[디자인 카타]
🐉 슬라이더 방식은 가격 분포를 한눈에 파악할 수 있는 장점이 있는 반면, 내가 원하는 정보를 정확하게 조정하기 어렵다는 단점도 존재한다. 예를 들어, 내가 쓸 수 있는 예산이 정해져있어 37,500원부터 52,000원까지의 상품을 찾고 싶을 때, 슬라이더로 정확히 그 범위를 설정하기가 쉽지 않다. 그렇기 때문에 나는 직접 입력 방식을 더 선호한다.
또한, 대부분은 가격 분포에 대한 정보보다는 필터에 인기 순위나 판매량 등을 입력해 물건을 선별하는 것이 사람들이 더 선호하는 것이 아닌가 생각이 들었다. 그리고 특정 금액대(5만 원 이하, 5~10만 원 등)에 대한 목록이 있어서 해당 범위를 클릭만으로 바로 확인할 수 있다면, 굳이 번거롭게 슬라이더를 조정하거나 금액을 입력하지 않아도 되어 편리하다. 하지만 단위 표시 없이 숫자 '120000'을 입력한다면,큰 금액일 경우 조금 번거로울 수 있으니 만 원, 천 원 등의 단위가 표시되었으면 더 좋을 것 같다. 그리고 시장의 평균 가격대를 파악하거나, 특정 제품군에서 자신의 예산 기준을 정할 때, 최저가와 최고가 차이를 확인하고 싶을 때는 슬라이더 방식 UI를 같이 배치하는 것도 좋은 선택이 될 것 같다.
가장 대표적인 의류 쇼핑몰 UI를 조사한 결과, 3곳 중 2곳이 슬라이더와 직접 입력 방식을 같이 사용하고 있었고, 의외로 가격 분포도의 그래프는 사용하지 않고 있다. 직접 사용해본 결과, 무신사의 UI가 편리하다고 느꼈다. 가장 불편했던 UI는 지그재그였는데, 슬라이더 방식만을 제공하여 정확한 가격 입력이 어렵다. 결론적으로 두 가지 방식을 함께 사용하는 것이 최선인 것 같다.
[피그마 기초 4주차 강의 정리]
1. 컴포넌트 프로퍼티의 이해
- 컴포넌트 프로퍼티: 컴포넌트 안의 요소의 변화와 변경을 만들 수 있는 피그마 기능 / 하나의 컴포넌트로 더 많은 인스턴스를 생산해 디자인을 효율적으로 만들 수 있음.
- 배리언츠(Variants): 컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능
- 프로퍼티: 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용
- 프로퍼티 종류
a)👁️ Boolean: Yes or No를 선택하는 형식 <참 또는 거짓, 예 또는 아니오, 켜기 또는 끄기>
레이어를 껐다가 켰다가 할 수 있는 속성값
2)◇ Instance swap: 인스턴스를 다른 인스턴스로 교체하는 기능. 인스턴스끼리만 가능 / 주로 버튼 안의 아이콘, 팝업 안의 버튼 등을 교체할 때 사용
3)𝐓 Text: 컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포넌트 속성으로 만듦
- 배리언츠와 프로퍼티를 고르는 기준:
배경색, 텍스트 크기, 텍스트 색상, 텍스트 간격, 아이콘의 크기 등이 바뀌면 배리언츠.
파운데이션 값이 그대로면 프로퍼티.
실무 환경에서 적합한 최선의 판단하기.
2-1. 버튼 의 위계 배리언츠 만들기
📌 위계(hierarchy, priority)
색깔이 다 채워짐/ 테두리만 있음/ 회색 배경색 => 버튼의 위계
얼마나 중요한 행동을 하기 위한 버튼인가를 의미
일반적인 버튼은 프라이머리(Primary, 1순위), 세컨더리(Secondary, 2순위), 터시어리(Tertiary, 3순위)의 3단계
📌 배리언츠가 있는 컴포넌트로 변경하면, 보라색 점선으로 둘러쌓임
컴포넌트로 만든 버튼을 눌러 우측 패널에서 Variants 선택 ➡️ 속성 패널의 Property 1을 더블 클릭해서, Priority 라고 이름 바꾸기 ➡️ 보라색 점선 밑의 + 를 눌러서 복제 ➡️ 가장 맨 위의 버튼을 클릭해 속성 패널에서 현재 배리언트(Current Variant) 의 Default라고 되어 있는 부분을 Primary로 변경 ➡️ 두번째 버튼을 선택, 같은 방식으로 Secondary, 세번째 버튼은 Tertiary
📌 프라이머리 컬러 ≠ 프라이머리 버튼
- 프라이머리 컬러: 주요 컬러 / 세컨더리 컬러: 보조 컬러
- 프라이머리 버튼: 1순위의 / 세컨더리 버튼: 2순위의 (위계)
- 세컨더리 버튼에 세컨더리 컬러를 적용하는 것이 아님. 1순위와 2순위 버튼은 둘 다 프라이머리 컬러를 사용해 사용자에게 혼돈을 주지 않고, 대신 2순위 버튼이 1순위 버튼보다 시각적인 강조 효과가 덜해야 한다. 그래서 보통 세컨더리 버튼은 프라이머리 컬러의 50이나 100을 사용.
- 결론: 컬러에서의 프라이머리, 세컨더리와 컴포넌트에서의 프라이머리, 세컨더리는 서로 구분된다.
2-2. 버튼의 크기 배리언츠 만들기
컴포넌트 선택 후 패널에서 Variant 추가 ➡️ 작성창에서 Name에는 Size / Value에는 Large 입력 ➡️ 버튼 3개 전부 선택해 + 누르기 ➡️ 새로 추가된 3개 모두 Variant Value에 Small 입력 ➡️ 폰트 크기와 행간 변경 <이때 4의 배수 활용 ex.L 16 M 12 S 8>
2-3. 버튼의 상태 배리언츠 만들기
작성창에서 State-Default 라고 작성
📌 일반적으로 버튼 Pressed 상태는 버튼의 배경색을 한 단계 더 진한 색으로 함. 꼭 버튼들 전체가 동일한 규칙으로 변하도록. 예를 들면, 프라이머리 버튼은 한 단계 진해지는데, 세컨더리 버튼은 두 단계 진해지는 것 ✖️
2-4. 아이콘에 프로퍼티 적용하기 <Boolean>
패널에서 Boolean 추가 ➡️ Show Leading Icon / True 입력 후, 프로퍼티 생성 ➡️ 추가한 아이콘 선택 후, Appearance 패널의 ⎆ 아이콘 선택 ➡️ Show Leadign Icon 프로퍼티 선택 ➡️ 인스턴스를 생성하면 패널에 토글이 추가된다. 여기서 아이콘의 가시성을 Y/N 할 수 있음
2-5. 버튼 컴포넌트의 아이콘 바꾸기
패널에서 Instance swap 추가 ➡️ Leading Icon 입력 후, Value에는 컴포넌트 버튼에 있는 아이콘 선택/ Preferred values는 넣고 싶은 아이콘들 전부 선택하고 프로퍼티 생성 ➡️ 아이콘 선택 후, Appearance 패널의 ⎆ 아이콘 선택 ➡️Leading Icon 프로퍼티 선택 ➡️ 인스턴스를 생성하면 아이콘을 교체할 수 있는 창이 생성됨
2-6. 버튼 컴포넌트의 텍스트 바꾸기
이전과 동일한 과정의 반복이다. 다른 점이 있다면 패널에서 Text 추가해서 생성하는 것.
프로퍼티를 생성할 때 Value에 적은 글자가 기본값이 되어 마스터 컴포넌트 속 텍스트도 기본값으로 변경된다. 그러나 인스턴스에서 텍스트 변경 가능하다. 작은 버튼에 더블클릭하며 글자를 바꾸던 것보다 훨씬 쉬운 방식으로 변경할 수 있다.
3. 합성 컴포넌트와 네스티드 인스턴스
- 합성 컴포넌트: 컴포넌트 + 컴포넌트 => 컴포넌트 / 컴포넌트 + 파운데이션 => 컴포넌트
바텀시트, 다이얼로그, 리스트, 카드, 탭 등 복잡한 구조
- 네스티드 인스턴스(Nested Instance): 상위 컴포넌트에서 하위 컴포넌트의 프로퍼티를 바로 조작할 수 있도록 도와주는 속성
3-1. 탭 컴포넌트
- 네비게이션에 해당하며 현재 화면을 전환해주는 요소
- 구조:
1) 인디케이터(Indicator): 탭이 선택되어 있는지 알려주는 표시자 / Cats 밑에 있는 검은 선
2) 라벨/레이블(Label): 탭 이름 / Cats, Dogs, Birder, Reptiles
'탭 이름' 글자 입력 ➡️ 오토 레이아웃으로 만들고, 복제 ➡️ 두 개 합쳐서 Create component set 누르기 ➡️ 프로퍼티 이름 Active로 바꾸기 ➡️ 두 개 각각 On, Off로 이름 바꾸기 ➡️ 각각 하단 스트로크 적용 <직접 그리지말고, 개별 스트로크 기능 사용하자!> ➡️ 컴포넌트 이름 Tab menu로 바꾸기 ➡️ 두 개 각각 복사하면 패널에 토글이 생김 ➡️ 두 개를 오토레이아웃으로 묶기 (간격은 0) ➡️ 컴포넌트로 만들기 ➡️ Off인스턴스 2개 더 복사 ➡️ 프로퍼티 목록에서 Nested Instances 누르기 ➡️ 탭 메뉴 인스턴스들 모두 체크하기 => 탭 메뉴를 직접 조작하지 않고도, 패널에서 바로 전환 가능
📌 토글 기능 배리언츠를 만들 때 On, Off 또는 True, False, 아니면 Yes, No 입력하면 자동으로 토글 스위치 생성
Create component set은 여러 개체를 한번에 배리언츠로 만들어서 하나의 컴포넌트로 묶음
Create multiple components는 선택한 여러 개체들을 한 번에 개별 컴포넌트로 만들어줌
'UIUX 내일배움본캠프 > CH 1 온보딩 주차' 카테고리의 다른 글
| 본캠프 5일차_디자인 카타, WIL (3) | 2025.01.27 |
|---|---|
| 본캠프 3일차_디자인 카타, 강의 정리 (0) | 2025.01.24 |
| 본캠프 2일차_디자인 카타, 강의 정리 (1) | 2025.01.22 |
| 본캠프 시작~! 1일차_강의 정리(0120) (2) | 2025.01.20 |
