카드UI (Card UI)
쉽게 풀면
정보 하나하나를 네모난 카드 모양 안에 담아서 구분해서 보여주는 방식이다.
왜 중요한가
카드 UI는 이미지·제목·요약·행동 버튼을 하나의 사각 컨테이너에 묶어 독립된 단위로 보여 주는 패턴으로, 서로 종류가 다른 콘텐츠를 같은 화면에 나열해야 하는 피드나 대시보드에서 표준이 되었습니다. 컨테이너 크기가 화면 폭에 따라 재배치되기 쉬워 반응형 디자인과 궁합이 좋고, 터치 기기에서 넉넉한 탭 영역을 자연스럽게 확보합니다. 카드 안에 담기는 정보량과 구성 요소(이미지 비율, 버튼 위치)를 표준화한 카드 컴포넌트를 디자인시스템에 등록해 두면, 새로운 목록 화면을 만들 때마다 카드 레이아웃을 처음부터 다시 설계할 필요가 없어진다. 카드 안에 담긴 텍스트의 줄 수가 카드마다 달라지면 격자 형태로 늘어선 카드들의 높이가 들쭉날쭉해지므로, 실무에서는 제목과 요약 텍스트의 줄 수를 고정하고 넘치는 부분은 말줄임표로 처리한다. 카드 하나를 눌렀을 때 상세 화면으로 이동하는 것인지 그 자리에서 확장되는 것인지에 대한 규칙을 서비스 전체에서 통일해야 사용자가 카드의 동작을 예측할 수 있다.
논문에서는 이렇게 쓰입니다
콘텐츠를 카드 단위로 구분한 것이 실제 탐색 속도에 미친 영향을 검증한 연구이다.
동일한 정보라도 카드 단위로 나누어 배치하면 항목 간 경계가 뚜렷해져 오인 클릭을 줄일 수 있다는 점을 설명합니다.
조금 더 깊게 보면
카드는 각 항목을 독립적으로 보이게 하기 때문에 항목 간 비교가 중요한 콘텐츠(가격표, 스펙)에는 표가 더 적합합니다. 그림자와 테두리로 카드를 강조하는 머티리얼 디자인 초기 스타일은 화면을 무겁게 만들어, 이후 여백으로만 구분하는 방향으로 완화되었습니다. 카드 전체가 클릭 가능한지 일부만 가능한지가 불명확하면 사용자와 스크린리더 모두 혼란을 겪는다는 점이 접근성 지적에서 반복됩니다. 카드는 보통 그림자나 테두리 같은 시각적 경계로 컨테이너임을 표시하지만, 최근에는 여백만으로 카드 경계를 암시하는 '플랫'한 카드 스타일도 늘고 있어 시각적 무게 없이도 그룹을 구분하는 방식이 함께 쓰인다.
주의할 점
카드UI는 개별 콘텐츠 단위를 강조하지만 카드 수가 많아지면 전체 정보 구조 파악이 어려워질 수 있다.