예약 시스템 외주를 맡았을 때 처음 맞닥뜨린 문제는 캘린더 입력이 아니었습니다. 정작 발목을 잡은 건 칩 컴포넌트였습니다. 첫 사용자 성공률이 64%에 머물렀고, 원인을 파고들수록 칩 설계 방식이 UX 전체에 얼마나 깊이 연결돼 있는지 실감했습니다. 컴포넌트 하나를 어떻게 만드느냐가 결국 전환율 숫자를 바꿉니다.
칩 컴포넌트의 변형 구조, 왜 셋으로 나뉘는가
처음 피그마에서 칩 컴포넌트를 설계할 때 저도 의아했던 부분이 있습니다. 액션 칩(Action Chip), 초이스 칩(Choice Chip), 필터 칩(Filter Chip)이 시각적으로는 동일한 형태를 가지는데 왜 굳이 세 가지로 분리하느냐는 것이었습니다.
여기서 칩 컴포넌트란 사용자가 정보를 입력하거나, 선택을 내리거나, 콘텐츠를 필터링하거나, 특정 액션을 실행할 때 쓰이는 소형 인터랙티브 요소를 의미합니다. 버튼처럼 고정된 위치에 단독으로 존재하는 게 아니라, 복수의 요소가 동적으로 그룹을 이루며 등장하는 것이 특징입니다.
세 가지 칩이 같아 보이는 이유는 디자인 레이어에서 동일한 스타일링을 공유하기 때문입니다. 하지만 코드 레이어에서는 각각 다른 컴포넌트로 구현될 수 있습니다. 디자인 파일의 네이밍 컨벤션(Naming Convention)을 프론트엔드 개발자의 컴포넌트 명칭과 일치시키지 않으면, 협업 과정에서 불필요한 커뮤니케이션 비용이 발생합니다. 여기서 네이밍 컨벤션이란 파일이나 컴포넌트에 이름을 붙이는 규칙 체계로, 팀 전체가 공통된 언어를 쓰기 위한 약속입니다. 이 이유 하나만으로도 세 개를 별도 변형(Variant)으로 관리하는 것이 정당화됩니다.
피그마에서 이 세 칩을 메인 컴포넌트로 만들 때는 텍스트 레이어 이름을 "label"로 통일하고, 오토 레이아웃(Auto Layout)으로 좌우 패딩을 12dp로 고정해 텍스트 길이에 따라 너비가 자동으로 늘어나게 설정합니다. 높이는 32dp로 고정하고 모서리 반경은 16dp로 지정해 완전한 필 형태를 만드는 것이 Material Design 가이드라인의 기본 스펙입니다.
아웃라인 칩과 입력 칩의 구조적 차이
아웃라인 칩(Outlined Chip)과 인풋 칩(Input Chip)은 앞서 소개한 세 칩과 분명히 다른 구조를 가집니다. 제가 직접 설계해보니 이 두 칩은 아이콘 배치와 상호작용 방식에서 차이가 있어 별도로 설계 기준을 잡아둘 필요가 있었습니다.
아웃라인 칩은 배경 채우기 없이 1픽셀 스트로크만 적용합니다. 좌측에 아이콘 플레이스홀더(Icon Placeholder)가 들어가고, 아이콘 우측에 8dp 간격을 두고 텍스트가 배치됩니다. 우측 패딩은 12dp입니다. 여기서 아이콘 플레이스홀더란 실제 아이콘이 들어갈 자리를 표시하는 더미 영역으로, 디자인 시스템 라이브러리에서 실제 아이콘으로 교체할 수 있도록 준비해 두는 요소입니다.
인풋 칩은 구조가 조금 더 복잡합니다. 이메일 수신자 칩처럼 아바타 이미지가 좌측에 붙고, 우측 끝에는 캔슬 아이콘(Cancel Icon)이 18×18dp 크기로 들어갑니다. 이 캔슬 아이콘의 역할은 사용자가 선택한 항목을 제거할 수 있는 인터랙션을 제공하는 것입니다. 텍스트는 아이콘과 캔슬 아이콘 사이에서 양쪽으로 8dp 여백을 가집니다.
오토 레이아웃을 인풋 칩에 적용할 때 주의할 점이 있습니다. 좌우 패딩을 서로 다르게 지정해야 하는데, 피그마의 오토 레이아웃 구조상 개별 패딩 제어가 까다로울 때가 있습니다. 제 경험상 이럴 때는 오토 레이아웃을 제거하고 컨스트레인트(Constraint)로 각 요소의 위치를 고정하는 방식이 오히려 더 안정적이었습니다. 컨스트레인트란 부모 프레임이 크기를 바꿀 때 자식 요소가 어떻게 반응할지 정의하는 규칙으로, 텍스트는 우측과 수직 중앙으로, 아이콘은 좌측과 수직 중앙으로 설정하면 됩니다.
단축 옵션이 전환율을 바꾼 수치
칩 컴포넌트를 단순히 예쁘게 만드는 데서 끝나면 안 된다고 생각하는 이유가 있습니다. 실제로 이 컴포넌트가 어디에 붙느냐에 따라 사용자 행동 데이터가 완전히 달라지기 때문입니다.
제가 담당한 예약 시스템에서 캘린더 데이트 피커(Date Picker) 상단에 단축 칩 버튼 4개를 추가했습니다. 데이트 피커란 사용자가 날짜를 선택하기 위해 조작하는 달력 형태의 UI 컴포넌트입니다. '오늘', '내일', '이번 주말', '다음 주' 네 가지 레이블을 칩으로 배치했을 뿐인데, 첫 사용자 성공률이 64%에서 89%로 올랐고 평균 입력 시간은 21초에서 7초로 줄었습니다.
여기에서 멈추지 않았습니다. 이후 프로젝트에서는 '가장 빠른 가능 일자' 자동 추천 기능을 칩 형태로 붙였고, 성공률이 89%에서 94%까지 올라갔습니다. 솔직히 이건 예상 밖이었습니다. 단순 단축 옵션보다 자동 추천이 5%p 더 높은 성과를 냈다는 건, 사용자가 "내가 원하는 날"보다 "시스템이 권장하는 날"을 더 빠르게 수용한다는 의미이기도 합니다.
이 로직을 현재 외주 5건에서 재사용하고 있는데, 도메인별로 단축 칩 레이블을 달리 운영하고 있습니다.
- 의료 예약: '가장 빠른 날', '이번 주', '다음 주', '특정 날짜 지정'
- 미용실 예약: '오늘', '내일', '이번 주말', '날짜 직접 선택'
- 렌터카 예약: '오늘 바로', '내일 아침', '주말 픽업', '날짜 범위 설정'
사용자 리서치 없이 이 레이블을 정한 게 아닙니다. 도메인별 예약 완료 데이터를 보면 어떤 날짜 패턴이 가장 자주 선택되는지 경향이 보이고, 그 패턴을 칩 레이블로 끌어올린 것입니다. UX 라이팅(UX Writing)과 데이터 분석이 맞닿는 지점이 바로 여기입니다. UX 라이팅이란 인터페이스 안의 모든 텍스트를 사용자 행동을 유도하는 방향으로 설계하는 작업을 말합니다.
사용자 인터페이스의 마이크로카피(Microcopy)가 전환율에 미치는 영향에 관해서는 닐슨 노먼 그룹의 연구에서도 반복적으로 검증된 바 있습니다(출처: Nielsen Norman Group).
한국 환경에서 칩 설계가 놓치는 것들
글로벌 디자인 시스템 가이드를 그대로 가져다 쓸 때 한국 서비스에서 특히 문제가 되는 지점이 있습니다. 제가 국내 외주를 진행하면서 가장 자주 빠지는 함정이 바로 로컬라이제이션(Localization) 부재입니다. 로컬라이제이션이란 특정 지역의 언어, 문화, 법적 요건에 맞게 제품을 조정하는 과정으로, 단순 번역을 넘어 UI 구조 자체를 바꾸는 작업을 포함합니다.
한국 데이트 피커에서 음력 옵션이 빠지면 특정 사용자층에서 신뢰가 떨어집니다. 전통 행사나 생일 관련 예약 서비스라면 음력 날짜 표시는 선택이 아닌 필수입니다. 공휴일 시각화도 마찬가지입니다. 달력에 법정 공휴일이 표시되지 않으면 사용자는 예약 가능 여부를 스스로 계산해야 하고, 그 불편함은 이탈로 이어집니다.
모바일에서는 OS 네이티브 피커와 커스텀 피커 사이의 일관성 문제도 있습니다. OS 네이티브 피커란 iOS나 안드로이드 운영체제가 기본으로 제공하는 날짜 선택 UI로, 사용자가 이미 익숙한 인터페이스입니다. 커스텀 피커를 억지로 넣었다가 네이티브 UI와 충돌하면 사용자 입장에서는 혼란스럽습니다. 서비스 성격에 따라 네이티브를 택할지 커스텀을 택할지 기준을 명확히 가져가야 합니다.
Material Design 3 가이드라인은 이런 지역화 요소에 대해 상세한 기준을 제시하고 있지는 않습니다(출처: Material Design). 결국 한국 서비스를 위한 칩 및 피커 설계 가이드는 음력·공휴일 표기 표준, 네이티브 vs 커스텀 의사결정 기준, 범위 선택(체크인-체크아웃) 모바일 UX 패턴, 이 세 가지를 반드시 묶어서 다뤄야 합니다.
칩 컴포넌트는 만드는 데 30분이 안 걸리지만, 그것이 어디에 붙고 어떤 레이블을 달고 어떤 사용자 맥락을 담느냐는 훨씬 더 많은 시간과 판단을 요구합니다. 피그마 파일을 완성하는 것과 사용자가 실제로 성공하는 것 사이의 거리가 바로 이 설계 판단에서 갈립니다. 저는 앞으로도 도메인별 단축 옵션 데이터를 계속 쌓을 생각입니다. 같은 컴포넌트라도 어떤 데이터를 먹이느냐에 따라 전혀 다른 결과가 나오기 때문입니다.