Web Guide카드 UI목록 디자인카드 레이아웃
카드 UI 설계 원칙
카드는 가장 많이 쓰이는 구성 요소이면서 가장 자주 잘못 만들어집니다.
정보를 다 넣으려다 보면 카드가 아니라 작은 페이지가 됩니다.
01카드가 하는 일
여러 항목을 나란히 보여주면서, 각 항목을 하나의 덩어리로 인식하게 하는 것입니다. 목록에서 항목을 구분하고 비교하기 쉽게 만듭니다.
따라서 카드 안의 정보는 '비교에 필요한 최소한'이어야 합니다. 자세한 것은 상세 페이지에서 봅니다.
정보를 다 넣은 카드
제목·설명 5줄·가격·사양·날짜·태그·버튼 2개 · 카드가 길어짐 · 비교가 어려움 · 스크롤만 길어짐
절제한 카드
이미지·제목·한 줄 설명·핵심 값 하나 · 한눈에 비교됨 · 관심 있는 것만 상세로 · 목록이 짧아짐
02구성 요소 순서
카드 안의 요소도 순서가 있습니다. 시각적 요소가 먼저 눈에 들어오고, 그다음 제목, 그다음 설명입니다.
비교에 결정적인 값이 있다면 그것을 눈에 띄게 배치하세요.
01
이미지
있으면 가장 먼저 눈에 들어옵니다. 비율을 통일합니다.
02
제목
가장 중요한 텍스트. 두 줄을 넘지 않게 처리합니다.
03
한 줄 설명
제목만으로 부족할 때. 없어도 되면 빼는 편이 낫습니다.
04
핵심 값
가격, 날짜, 분류 등 비교 기준이 되는 값 하나.
05
행동 요소
카드 전체를 클릭 가능하게 만드는 편이 낫습니다.
03높이를 맞춘다
제목 길이가 제각각이면 카드 높이가 달라지고 아래쪽 요소의 위치가 어긋납니다. 목록이 어수선해 보이는 가장 흔한 원인입니다.
제목을 두 줄로 제한하고 넘치면 말줄임표로 처리하면 높이가 일정해집니다.
제목 줄 수 제한
두 줄까지. 넘치면 '...'으로 자릅니다.
설명 줄 수 제한
한두 줄. 마찬가지로 자릅니다.
이미지 비율 통일
같은 비율로 잘라 냅니다. 원본 비율을 그대로 쓰면 제각각이 됩니다.
카드 높이 통일
한 줄 안의 카드는 같은 높이로 맞춥니다.
이미지 없는 항목
기본 이미지나 색 블록으로 대체해 구조를 유지합니다.
04클릭 영역 설계
카드 안에 링크가 여러 개 있으면 어디를 눌러야 할지 헷갈립니다. 카드 전체를 하나의 클릭 영역으로 만드는 편이 명확합니다.
다만 카드 안에 '장바구니 담기' 같은 별도 행동이 있다면 그것만 구분해야 합니다.
카드 전체 클릭가장 명확합니다. 어디를 눌러도 상세로 갑니다.
마우스 올렸을 때 반응그림자나 색 변화로 클릭 가능함을 알려줍니다.
별도 버튼다른 행동이 필요하면 명확히 구분되게 만듭니다.
터치 영역모바일에서 카드 전체가 눌리면 오히려 편합니다.
링크 중첩 주의카드 안에 또 다른 링크가 있으면 동작이 꼬입니다.
CHECK POINT
□ 카드 안의 정보가 비교에 필요한 최소한인가
□ 제목이 두 줄로 제한되어 있는가
□ 이미지 비율이 통일되어 있는가
□ 한 줄 안의 카드 높이가 같은가
□ 이미지가 없는 항목의 처리 방식이 있는가
□ 카드 전체가 클릭 가능한가
□ 마우스를 올렸을 때 반응이 있는가
□ 모바일에서 카드가 몇 열로 바뀌는지 확인했는가
#카드 UI#목록 디자인#카드 레이아웃#높이 통일#클릭 영역#이미지 비율#사용성#홈페이지 디자인#웹비스타#홈페이지 제작