카드 UI 디자인, 정보가 많은 목록을 덩어리로 나누는 법

카드 UI는 상품, 기사, 일정처럼 비슷한 정보가 여러 개 늘어서는 화면을 한 항목씩 상자로 묶어 보여 주는 방식으로, 정보가 많은 목록을 훑어보기 쉽게 만듭니다. 잘 만든 카드는 제목, 이미지, 핵심 정보, 행동 버튼의 자리가 모든 카드에서 같아서 사용자가 몇 장만 보고도 읽는 법을 익힙니다. 카드 안에 정보를 너무 많이 넣으면 오히려 목록 전체가 복잡해지므로, 카드에는 고를 때 필요한 정보만 남기는 것이 핵심입니다.

카드는 하나의 대상에 관한 정보를 테두리나 배경으로 묶은 사각형 단위입니다. 한 장 한 장이 독립된 덩어리라 화면 크기에 따라 한 줄에 놓이는 개수를 바꾸기 쉽습니다.

카드에는 무엇을 넣어야 하나요?

카드에는 사용자가 목록에서 항목을 고르는 데 필요한 정보만 넣습니다. 쇼핑 목록이라면 상품 사진, 이름, 가격, 평점 정도면 충분하고, 자세한 설명은 상세 화면으로 넘깁니다. 카드에 모든 정보를 담으려 하면 카드가 길어져 한 화면에 보이는 개수가 줄고, 비교하기도 어려워집니다.

정보의 순서는 사용자가 가장 먼저 확인하는 것부터 놓습니다. 대부분은 이미지, 제목, 핵심 숫자, 보조 정보 순서로 읽힙니다. 중요한 정보일수록 글자를 크고 진하게, 보조 정보는 작고 흐리게 하면 시선이 자연스럽게 흐릅니다.

카드 요소	역할	디자인 요령
이미지	빠른 인식	비율을 모든 카드에서 통일
제목	무엇인지 알림	두 줄까지만, 넘치면 말줄임
핵심 정보	비교 기준	가격·날짜는 같은 위치
행동 버튼	다음 단계	하나만 두는 것이 좋음

카드끼리 일관성은 어떻게 지키나요?

카드는 모양과 자리가 반복될 때 가장 읽기 쉽습니다. 이미지 비율, 제목 줄 수, 가격 위치가 카드마다 다르면 사용자가 매번 정보를 다시 찾아야 합니다. 제목이 긴 항목이 있어도 두 줄에서 자르고 말줄임표를 넣으면 카드 높이가 고르게 유지됩니다.

이미지가 없는 항목이 섞이는 경우도 미리 정해 둬야 합니다. 빈칸으로 두면 목록이 들쭉날쭉해 보이므로, 기본 이미지나 색 배경을 넣어 자리를 채우는 것이 좋습니다. 카드 사이 간격도 일정하게 유지하면 정돈된 인상을 줍니다.

카드 전체를 눌러야 하나요, 버튼만 눌러야 하나요?

많은 서비스는 카드 전체를 누르면 상세 화면으로 가도록 만듭니다. 누를 수 있는 영역이 넓어 손가락으로도 쉽게 고를 수 있기 때문입니다. 카드 안에 찜하기나 장바구니 같은 별도 버튼이 있다면, 그 버튼을 눌렀을 때 상세 화면으로 넘어가지 않도록 구분해 줘야 합니다.

버튼이 여러 개면 사용자가 무엇을 눌러야 할지 망설입니다. 카드 안의 행동은 하나나 둘로 줄이고, 나머지는 상세 화면에서 할 수 있게 하는 편이 깔끔합니다.

자주 묻는 질문

카드와 목록형 화면은 언제 나눠 쓰나요?
이미지가 중요한 상품이나 콘텐츠는 카드가, 글자 정보를 빠르게 훑어야 하는 화면은 한 줄 목록이 잘 맞습니다.

카드에 그림자를 넣어야 하나요?
배경과 카드가 구분되기만 하면 됩니다. 그림자, 테두리, 배경색 가운데 하나로 구분하면 충분합니다.

한 줄에 카드를 몇 개 놓아야 하나요?
화면 너비와 카드 내용에 따라 다릅니다. 모바일은 한두 개, 넓은 화면은 서너 개가 흔합니다.