학습 목표
- 카드는 비교할 정보를 반복 가능한 위치에 놓는 도구입니다.
- 실제 데이터와 빈 상태로 설계해야 운영 화면에서도 균형이 유지됩니다.
- 실습의 완료 조건과 실패 시 회복 방법을 직접 확인합니다.
사전 지식
누르기 쉬운 버튼과 명확한 행동 설계에서 기본 용어를 먼저 확인하세요. 예시는 기존 운영 서비스를 자동으로 바꾸는 설정이 아니라 별도 연습 화면·프로젝트에 적용하는 출발점입니다.
개념 이해
카드는 정보를 같은 형태로 비교하게 만드는 틀입니다. 모든 내용을 상자에 넣기보다 사용자가 고를 때 필요한 정보와 행동을 일정한 위치에 배치하세요.
카드가 필요한 화면인지 판단하기
서로 독립된 상품이나 서비스를 훑어볼 때 카드는 유용합니다. 숫자와 사양을 행 단위로 비교한다면 표가 더 빠를 수 있습니다. 카테고리별로 테두리와 그림자를 계속 겹치지 말고 여백·구분선만으로 묶을 수 있는지도 확인합니다.
정보의 위계와 길이 제한
제목, 한 문장 설명, 선택에 필요한 지표, 행동 순서를 고정합니다. 설명은 시각적으로 줄여도 원문은 상세 화면에서 읽을 수 있어야 합니다. 긴 제목·이미지 없음·숫자 없음에서도 높이와 정렬이 크게 흔들리지 않게 설계합니다.
카드 전체 링크와 내부 버튼
전체 카드를 링크로 만들면 내부에 또 다른 링크나 버튼을 중첩하지 않습니다. 제목 링크와 북마크 버튼을 형제 요소로 두면 동작이 명확합니다. 이미지에는 내용에 맞는 대체 텍스트를 쓰고 제목과 완전히 중복되는 장식 이미지는 빈 대체 텍스트를 고려합니다.
반응형과 콘텐츠 상태
열 개수보다 읽기 좋은 최소 너비를 먼저 정합니다. 로딩에는 실제 카드와 비슷한 자리 표시를, 결과 없음에는 필터 해제 행동을, 실패에는 다시 시도를 제공합니다. hover 효과 없이도 클릭 대상을 이해할 수 있어야 합니다.
실제 사용 사례
서비스 탐색 카드에는 이름·한 줄 설명·카테고리·저장 버튼만 표시하고 세부 스펙은 상세 화면으로 넘깁니다. 점수가 없는 서비스는 0점으로 꾸미지 않고 아직 평가 없음으로 표시합니다.
단계별 실습
- 사용자가 카드를 보고 결정해야 하는 질문을 세 개 이내로 적으세요.
- 실제 길이의 제목과 설명, 이미지 없는 예시를 준비하세요.
- 이동 링크와 저장 버튼의 마크업을 분리하세요.
- 모바일 한 열과 넓은 화면 여러 열에서 읽기 순서를 확인하세요.
- 키보드로 제목 이동과 저장이 각각 한 번씩 작동하는지 확인하세요.
코드와 프롬프트
아래 예시는 브라우저의 HTML/CSS 연습 화면에 적용하는 예시입니다. 이벤트·서버 검증·운영 설정 전체를 대신하지 않습니다. 기존 코드와 설치 버전을 먼저 확인하세요.
<article class="service-card">
<h3><a href="/services/example">서비스 이름</a></h3>
<p>어떤 문제를 해결하는지 한 문장으로 설명합니다.</p>
<span>생산성</span>
<button type="button" aria-label="서비스 이름 저장" aria-pressed="false">저장</button>
</article>대괄호를 실제 상황으로 바꿔 요청하세요. 비밀 값과 개인정보 원문은 넣지 마세요.
[목록 화면]의 카드 정보 위계를 제목·설명·핵심 정보·행동 순으로 정리해줘. 중첩 링크 없이 저장 버튼을 분리하고 긴 제목·이미지 없음·결과 없음·조회 실패·모바일 상태를 포함해줘.자주 발생하는 문제와 해결
| 문제 | 해결과 확인 |
|---|---|
| 카드 전체를 누르면 저장도 실행된다 | 클릭 이벤트를 무조건 상위에 붙이지 말고 독립된 링크와 버튼으로 구성합니다. |
| 모든 카드의 문구를 잘라 의미가 사라진다 | 필수 비교 정보는 보존하고 상세로 이어지는 명확한 링크를 둡니다. |
핵심 요약
- 카드는 비교할 정보를 반복 가능한 위치에 놓는 도구입니다.
- 실제 데이터와 빈 상태로 설계해야 운영 화면에서도 균형이 유지됩니다.
완료 확인
참고자료
확인 기준일: 2026-10-20. 기능·제품 요금·법령은 변경될 수 있으므로 적용 시 공식 문서와 현재 시행일·설치 버전을 다시 확인하세요.