솔직히 말씀드리면, 저는 필터 UI를 드롭다운으로 구현하는 게 당연하다고 생각했던 시절이 있었습니다. 콘텐츠 큐레이션 SaaS 외주를 맡았을 때도 처음엔 그냥 드롭다운으로 납품할 생각이었습니다. 그런데 칩(chip) 컴포넌트로 바꾼 뒤 필터 적용률이 22%에서 47%로 뛰었고, 그때부터 카드 UI와 내부 컴포넌트 설계를 제대로 들여다보기 시작했습니다.
카드 UI가 왜 필터 칩과 함께 쓰이는가
카드 UI는 단순히 "예쁜 박스"가 아닙니다. 하나의 카드는 단일 주제에 대한 정보와 액션을 담는 원자적 단위입니다. 여기서 원자적(atomic)이란 더 이상 쪼갤 수 없는 최소 단위를 의미합니다. 카드를 반으로 나누면 의미가 사라집니다. 이 원자성 덕분에 카드는 콘텐츠 탐색(Content Exploration) 환경에 특히 강합니다. 사용자가 무엇을 원하는지 완전히 확신하지 못한 상태에서 훑어보며 관심을 찾아가는 패턴, 바로 그 흐름에 카드가 맞습니다.
이 맥락에서 필터 칩은 카드를 더 빠르게 탐색하게 해주는 핵심 진입점이 됩니다. 드롭다운은 선택지를 숨기지만, 칩은 선택지를 화면에 펼쳐놓습니다. 제가 직접 써봤는데, 칩 한 줄에 6~8개가 보이도록 가로 스크롤을 넣고 선택된 칩을 좌측 고정 정렬로 배치하니 사용자가 현재 어떤 필터를 켰는지 한눈에 파악하는 데 드는 인지 비용이 확연히 줄었습니다. 이 방식을 외주 4건에 동일하게 적용했고 매번 비슷한 반응을 확인했습니다.
카드가 어울리는 상황과 그렇지 않은 상황을 정리하면 다음과 같습니다.
- 콘텐츠 탐색, 대시보드 지표 요약, 메뉴 옵션 선택 → 카드 적합
- 가격·배송 속도·평점 등 속성 기반 비교 → 그리드나 테이블이 더 적합
- 정밀 정렬·필터·비교가 동시에 필요한 e-커머스 상품 목록 → 카드 비적합
마이크로모션이 선택 확인에 미치는 영향
카드 내부 컴포넌트 설계에서 저를 가장 놀라게 한 건 마이크로모션(micro motion)이었습니다. 마이크로모션이란 버튼 클릭, 상태 전환 같은 작은 인터랙션에 적용되는 0.1~0.3초 수준의 짧은 애니메이션을 말합니다. 거의 없는 것 같지만, 있고 없고의 차이가 생각보다 큽니다.
제가 칩의 선택 상태 전환에 0.12초 마이크로모션을 추가하고 사용성 테스트를 진행했을 때, 참가자들이 "내가 선택했다"는 확인을 더 빠르게 인지했습니다. 이 결과는 UX 연구에서 말하는 피드백 루프(Feedback Loop) 원칙과 정확히 맞아떨어집니다. 피드백 루프란 사용자의 행동에 시스템이 즉각 반응해 행동이 인식되었음을 알려주는 순환 구조를 뜻합니다.
카드 설계에서 그림자(shadow) 효과도 같은 원리로 작동합니다. 호버(hover) 시 그림자 깊이가 바뀌면 사용자는 "이 카드는 클릭 가능하다"는 신호를 별도 설명 없이 직관적으로 읽습니다. 반대로 액션이 없는 카드에 호버 피드백을 넣으면 사용자를 오히려 혼란스럽게 만듭니다. 인터랙션 디자인의 기본 원칙인 어포던스(affordance)가 훼손되기 때문입니다. 어포던스란 UI 요소가 시각적으로 어떻게 사용될 수 있는지 행동 가능성을 암시하는 특성을 의미합니다.
Nielsen Norman Group의 연구에 따르면 사용자는 페이지를 읽는 게 아니라 스캔하며, 첫 번째 시선이 닿는 영역에서 이미 행동 여부를 판단한다고 밝혀져 있습니다(출처: Nielsen Norman Group). 카드 상단 이미지와 타이틀이 불일치하면 아무리 마이크로모션이 정교해도 첫 스캔에서 신뢰를 잃습니다. 제 경험상 이건 절대 나중에 고쳐지지 않습니다.
디자인 토큰으로 만든 칩 시스템의 실용성
칩을 외주마다 새로 만드는 것이 얼마나 비효율인지는 세 번째 프로젝트쯤 되면 몸으로 느낍니다. 그래서 저는 칩 상태를 디자인 토큰(design token)으로 묶었습니다. 디자인 토큰이란 색상, 간격, 타이포그래피 같은 디자인 결정 값을 코드와 디자인 도구 모두에서 공유 가능한 변수 형태로 저장한 것을 말합니다. 한 번 정의하면 디자인과 개발이 같은 값을 씁니다.
저는 칩 상태 토큰을 motion(전환 속도), color(선택/비선택 색상 쌍), icon(체크마크 유무) 세 축으로 나눠 정의했습니다. 이 구조로 디자인 시스템에 size와 state Variants를 24개 등록했고, 새 도메인에 칩 컴포넌트를 붙이는 데 평균 5분이 걸리지 않게 되었습니다. 외주 4건에서 이 시스템을 그대로 가져다 썼고, 매번 온보딩 시간이 반 이하로 줄었습니다.
카드 컴포넌트 자체도 마찬가지입니다. 반응형(responsiveness) 설계에서 모바일은 가로 방향 소형 카드, 데스크톱은 세로 방향 대형 카드로 전환하도록 브레이크포인트별 레이아웃을 토큰화해두면 QA 비용이 크게 줄어듭니다. 카드 내 콘텐츠 블록 순서를 바꿔도 의미가 깨지지 않도록 모듈성(modularity)을 확보해 놓는 것도 장기적으로 유지 보수 비용을 낮춥니다.
한국어 환경에서 카드·칩 가이드가 달라야 하는 이유
일반적으로 영문 기준으로 나온 카드 텍스트 가이드를 그대로 쓰는 경우가 많은데, 저는 한국어 프로젝트에서 이 부분에서 계속 문제를 겪었습니다. 영문 기준으로 한 줄에 50
60자를 권장하더라도, 한국어는 조사와 어미가 붙어 단어 하나가 영어 단어 두 개 길이를 차지하는 경우가 흔합니다. 실제로 칩 컴포넌트에서 한 줄에 노출되는 개수가 영문 대비 30
40%까지 줄어드는 것을 직접 확인했습니다.
또 한국 사용자는 멀티 선택 칩에서 '전체 해제' 액션을 찾는 빈도가 영미권보다 눈에 띄게 높습니다. 이 패턴이 반복되자 저는 전체 해제 버튼을 칩 영역 우상단에 고정 배치하는 방식을 표준으로 잡았고, 그 이후 사용성 테스트에서 불만 발화가 줄었습니다. 이건 문화적 사용 습관 차이로 봐야 하며, 영문 가이드를 그대로 따른다고 해결되지 않습니다.
한국어 환경에 맞는 카드·칩 가이드에는 아래 네 가지가 반드시 함께 담겨야 한다고 생각합니다.
- 한국어 칩 텍스트 글자 수 가이드라인 (최대 글자 수와 말줄임표 처리 기준)
- 전체 해제 버튼의 위치와 활성화 조건 운영 규칙
- 칩·토글·뱃지 컴포넌트 의미 분리 매트릭스 (세 컴포넌트가 혼용되면 사용자가 상태를 오독합니다)
- 마이크로모션 표준 (0.12초 기준 전환 속도와 이징(easing) 커브 명세)
이 네 가지를 하나의 가이드 문서로 묶지 않으면, 팀마다 다르게 해석하고 제각각의 칩이 만들어집니다. 실제로 이 가이드를 외주 3건에 적용했을 때 컴포넌트 관련 수정 요청이 이전 프로젝트 대비 절반 이하로 줄었습니다. Material Design의 컴포넌트 가이드라인도 지역화(localization)의 중요성을 명시하고 있으며, 특히 CJK(중국어·일본어·한국어) 환경에서 텍스트 밀도와 UI 간격 기준이 달라진다고 안내합니다(출처: Material Design).
카드 UI는 설계가 단순해 보이는 만큼 디테일이 성과를 가릅니다. 필터 적용률 22%에서 47%로의 상승은 화려한 리디자인이 아니라 칩 배치 하나, 정렬 방식 하나를 바꾼 결과였습니다. 지금 카드를 설계하고 있다면 이미지와 타이틀의 일관성, 선택 상태의 명확한 피드백, 그리고 한국어 환경에 맞는 텍스트 기준부터 점검해보시길 권합니다. 거창한 변화보다 작은 기준 하나가 수치를 바꿉니다.