안녕하세요. 피그마로 모바일 앱 화면시 많이 보이는 chip list 만드는 방법을 설명드리겠습니다.
그전에 칩이 어떤 건지 알아볼까요?
Chip(칩) 이란?
앱 화면에서 자주 보이는 Chip(칩)은 작은 UI 요소이지만, 사용자 경험을 크게 향상하는 중요한 디자인 컴포넌트입니다. 칩은 일반적으로 태그, 카테고리, 필터, 사용자 입력 값 등을 표시하며, 터치 한 번으로 쉽게 선택하거나 제거할 수 있어 직관적인 인터페이스를 만드는 데 유용합니다.
Chip의 주요 특징
- 작고 가벼운 디자인 – 화면을 깔끔하게 유지하면서도 필요한 정보를 효과적으로 전달합니다.
- 상호작용 가능 – 터치하여 활성화하거나 제거할 수 있어 사용자 경험이 향상됩니다.
- 다양한 형태 – 필터, 태그, 입력값 등 여러 용도로 활용할 수 있습니다.
앱에서 많이 사용되는 Chip의 종류
1. 지원 칩(Assist Chip)
- 사용자가 특정 작업을 빠르게 수행할 수 있도록 돕는 칩입니다.
- 예를 들어, 캘린더 이벤트 열기, 길 찾기 등의 기능을 실행할 때 사용됩니다.
- 보통 버튼과 유사하게 동작하지만, 더 작은 공간을 차지하면서 작업을 수행할 수 있습니다.
2. 필터 칩(Filter Chip)
- 콘텐츠를 필터링할 때 사용되는 칩입니다.
- 예를 들어, "무료배송", "베스트셀러"와 같은 필터를 적용할 때 활용됩니다.
- 여러 개의 필터를 동시에 활성화할 수도 있고, 하나의 필터만 선택할 수도 있습니다.
3. 입력 칩 (Input Chip)
- 사용자가 입력한 정보를 나타내는 칩입니다.
- 예를 들어, 이메일 입력 필드에서 사용자가 입력한 메일 주소를 칩 형태로 변환해 보여줄 수 있습니다.
- 사용자가 직접 추가하고 삭제할 수 있으며, 검색 필드에서도 자주 활용됩니다.
4. 제안 칩(Suggestion Chip)
- 사용자가 빠르게 선택할 수 있도록 제안을 제공하는 칩입니다.
- 예를 들어, 검색창에 추천 검색어를 표시하거나 "최근 검색어 삭제" , 메시지 앱에서 "네", "아니요"와
같은 빠른 응답 옵션을 제공할 때 사용됩니다. - 사용자가 선택하면 즉시 실행되거나 관련된 작업이 진행됩니다.
피그마로 Chip 디자인 만들어보기
피그마로 칩 디자인을 해보겠습니다. 만드는 방법은 어렵지 않습니다. 하단 영상을 참고하시면 더 쉽게 이해될 거예요~
1. 피그마 툴바에서 Action툴 실행 > 플러그인 " content reel" 검색
2. 플러그인 content reel을 활성 후 > 아이콘 탭 > Fluent Icons - Regular 선택 > 'dismiss'로 아이콘 검색
3. ⓧ 모양 아이콘 캔버스에 드래그 > 네이밍 icon_dismiss로 변경
4. chip 텍스트와 4번에서 만든 아이콘 오토 레이아웃(shift+A) 묶기
5. 상하, 좌우 패딩 설정 및 Fill 색상 추가
6. chip text 설정 > 우측 타이포그래피에서 '스타일'등록
7. 아이콘과 칩 컴포넌트 등록
8. 칩 인스턴스 여러 개 복사 후 전체 선택 오토레이아웃(shift+A)
9. 칩리스트 오토레이아웃 속성 wrap으로 변경
10. 칩리스트 너비 모바일 너비 360 또는 375로 조정
11. 리스트의 상하, 좌우 항목사이 간격 설정
12. 필요시 리스트의 패딩 값 조정
13. 칩 컴포넌트의 아이콘에 부울린 속성 추가 Appearance > property 아이콘 클릭 > + 선택 > 속성추가
14. 칩에서 아이콘 선택 후 디자인패널 상단 토글스위치 on/off 설정
15. 칩을 보이거나 가리게 설정해서 2가지 타입 칩 리스트 생성 완료
위 설명으로 칩 만드는 게 이해가 안 되시면 아래 영상을 참고해 주세요. 2025년부터 모든 영상은 음성을 포함합니다.
Chip을 활용하면 앱 UI가 더 직관적이고 깔끔해집니다
칩은 단순한 디자인 요소처럼 보일 수 있지만, 실제로는 사용자의 탐색을 도와주고 조작을 간편하게 만들어주는 핵심 UI 요소입니다. 특히 모바일 환경에서는 공간이 제한적이기 때문에 칩을 적절히 활용하면 깔끔한 디자인과 편리한 사용자 경험을 동시에 제공할 수 있습니다. 이제 여러분이 앱을 사용할 때 칩을 한 번 더 눈여겨보시면, 그 유용함을 직접 느끼실 수 있을 것입니다.
지금까지 칩의 설명과 함께 피그마로 제작하는 방법을 설명했습니다. 디자인에 참고하시면 좋을 것 같아요. 다음 포스트에서 만나요~ 읽어주셔서 감사합니다. :)