{3줄 요약}

카드는 콘텐츠를 독립적인 단위로 묶는 컨테이너입니다. 하나의 카드가 하나의 의미 단위가 됩니다.
카드가 잘 설계되면 빠르게 스캔하고 고를 수 있고, 잘못 설계되면 정보가 뭉개집니다.
카드는 오늘날 인터페이스에서 가장 흔한 패턴 중 하나라, 왜 쓰이는지 알면 더 잘 쓸 수 있습니다.

카드가 등장한 이유

스마트폰이 보급되면서 화면에 표시해야 할 콘텐츠의 종류가 폭발적으로 늘었어요.

뉴스, 상품, 게시물, 연락처, 앱 - 모두 형태가 다른 정보예요.
이것들을 하나의 화면에 나열하면서도 각각을 독립된 항목으로 구분해야 했어요.

카드가 그 해답이었어요.
어떤 종류의 콘텐츠든 카드 안에 담으면 독립적인 단위가 돼요.
그리드 위에서 반복하면 스캔하기 좋은 레이아웃이 만들어지고요.

Google이 2014년 Material Design에서 카드 컴포넌트를 공식화하면서 카드 UI는 사실상 표준이 됐어요.

카드의 구성 요소

카드 하나에 들어가는 요소들이 있어요.

이미지/미디어 영역 - 카드 상단이나 좌측에 위치해요.
콘텐츠를 한눈에 파악하게 해줘요.

제목 - 가장 크고 굵은 텍스트예요.
사용자가 관심이 있는지 판단하는 첫 번째 정보예요.

부제목/메타 정보 - 날짜, 카테고리, 작성자 같은 보조 정보예요.
제목보다 작고 흐려요.

본문 요약 - 길어야 2~3줄이에요.
더 길면 카드를 스캔하는 속도가 느려져요.

액션 버튼 - "더 보기", "구매", "저장" 같은 행동 유발 요소예요.

모든 요소가 항상 필요한 건 아니에요.
카드의 목적에 따라 필요한 것만 남기는 게 좋아요.

쿠팡 vs 배달의민족 카드 설계 비교

두 서비스 모두 카드 UI를 쓰지만 설계 방향이 달라요.

쿠팡 상품 카드 - 이미지가 크게, 아래에 상품명, 가격, 할인율, 배지(로켓배송 등).
정보가 많아요.
쇼핑에서는 비교가 중요하기 때문에 정보 밀도가 높아요.

배달의민족 음식점 카드 - 이미지, 음식점 이름, 배달 시간, 최소 금액, 별점.
핵심만 있어요.
선택이 빠르게 이루어져야 하는 서비스 특성상 불필요한 정보를 줄였어요.

같은 카드 패턴이지만 목적에 따라 정보 구성이 달라요.
이게 카드 설계의 핵심이에요.
사용자가 이 카드에서 무엇을 결정해야 하는지를 먼저 생각해야 해요.

카드를 잘못 쓰는 경우

모든 것을 카드로 만들기 - 카드는 콘텐츠가 독립적인 단위일 때 써야 해요.
단순한 텍스트 목록을 카드로 만들면 오히려 무거워 보여요.

카드 안에 너무 많은 정보 넣기 - 카드의 장점은 빠른 스캔이에요.
정보가 많으면 스캔이 느려지고 카드의 의미가 없어져요.

카드 크기가 제각각 - 카드는 반복 구조가 리듬을 만들어요.
크기가 달라지면 시각적 흐름이 끊겨요.

카드를 언제 쓸지 판단하는 기준

  • 콘텐츠가 독립적인 항목들인가요? (각각 따로 탐색할 수 있는가)
  • 사용자가 스캔하면서 선택해야 하는 상황인가요?
  • 여러 종류의 정보가 하나의 단위를 이루고 있나요?

세 가지 모두 해당하면 카드가 적합해요.
단순한 설정 메뉴 목록이나 순서가 중요한 리스트라면 카드보다 일반 리스트가 나아요.

아이콘이 카드 안에서 어떻게 쓰이는지는 아이콘 디자인 기초를 참고하세요.

관련 아티클

참고 문헌

  • Google, Material Design (2021) - 카드 컴포넌트 설계 원칙과 사용 지침이에요.
  • William Lidwell, 《Universal Principles of Design》(2003) - 정보 그룹화와 카드 패턴의 원리예요.