본문 바로가기

시각 스타일과 조합해 사용하는 구성·상호작용 기법입니다.

W32 / 레이아웃 기법

카드 중심 구성

Card-based Layout

관련된 그림·제목·설명·행동을 하나의 단위로 묶어 나열한다. 같은 구조의 항목을 탐색하고 비교하기 좋은 구성이다.

기존 배치 패턴

카드 중심 구성 학습용 웹 화면. 관찰할 특징: 같은 구조의 반복 카드, 항목별 제목·요약·행동, 균일한 간격으로 묶은 목록.
구성·상호작용 기법을 설명하기 위해 직접 제작한 학습용 화면입니다.그림 원본 열기 ↗

어디에 적용할까요?

자료실·상품 목록·강좌 목록·프로젝트 탐색에 활용한다.

함께 살펴볼 점

카드 안의 여러 링크와 카드 전체 클릭이 서로 충돌하지 않게 한다. 벤토처럼 각 칸의 크기가 반드시 달라야 하는 것은 아니다.

MAKE YOUR OWN

이 기법으로 만들어 보세요

목적과 콘텐츠를 내 작업에 맞게 바꿔 사용하세요.

출처와 확인일

확인일 2026-09-20. 정의와 자료 맥락의 근거이며, 위 그림은 이 도감을 위해 별도로 제작했습니다.

함께 살펴볼 항목

그림을 나란히 비교하기 →

← 구성·상호작용 참고 보기