디자인·UI

카드Card

업데이트 2026.10.31 · Qshop Growth Lab

한 줄 정의

카드는 사진 · 제목 · 짧은 설명 · 버튼처럼 대상 하나에 관한 정보를 네모난 틀 하나에 모아 담은 화면 요소예요.

쉽게 말하면

쇼핑몰 상품 목록에서 상품마다 사진, 이름, 가격이 네모 칸 하나에 담겨 나란히 놓인 모습이 카드예요. 카드 한 장은 상품 하나, 글 하나, 직원 한 명처럼 대상 하나를 맡아요. 정보가 칸마다 묶여 있어서, 방문자는 카드를 옆 카드와 견주어 보며 훑어볼 수 있어요.

잘 쓰려면

카드끼리 구성을 맞추기: 모든 카드의 사진 비율과 정보 순서가 같아야, 방문자가 같은 위치를 보며 카드끼리 비교할 수 있어요
한 카드에는 핵심만: 카드는 크기가 작아서 정보를 많이 넣으면 글자가 작아지고 무엇이 중요한지 흐려져요. 자세한 내용은 카드를 눌렀을 때 넘어가는 페이지에 둬요
누를 수 있는 곳을 분명하게: 카드 전체를 누르면 이동하는지, 안의 버튼만 눌러야 하는지 방문자가 알아볼 수 있게 해요
화면 너비에 맞춰 줄 바꾸기: 휴대폰은 화면이 좁아서 PC와 같은 수의 카드를 한 줄에 놓으면 카드가 너무 작아져요. 화면이 좁을수록 한 줄의 카드 수를 줄여요

헷갈리는 말

헷갈리는 말	뜻	카드와 다른 점
섹션	페이지를 위아래로 나눈 큰 덩어리	섹션은 페이지를 나누는 큰 영역이고, 카드는 섹션 안에 여러 장 늘어놓는 작은 정보 묶음이에요
컴포넌트	버튼 · 카드처럼 여러 곳에 다시 쓰려고 만들어 둔 화면 부품	컴포넌트는 다시 쓰는 부품 전체를 가리키는 말이고, 카드는 그런 부품으로 자주 만드는 모양 가운데 하나예요

같은 말

아래 이름으로도 불러요. 모두 같은 뜻이에요.

카드 UI

디자인·UI 용어 더 보기

CTA 고스트 버튼 내비게이션 바 대체 텍스트 띠배너 링크 버튼 반응형 웹 배너 배지 버튼 스타일 별점 섹션 솔리드 버튼 스티키 헤더 아웃라인 버튼 아이콘 버튼 아코디언 액티브 영상 삽입 입력폼 카드 컴포넌트 태그 탭 토글 팝업 포커스 푸터 햄버거 메뉴 호버 히어로 섹션