다양한 페이지 구조 ASCII

시작일
종료일
수정일

비디오/멀티미디어 중심 (The Media Player)

유튜브, 넷플릭스, 혹은 강의 사이트의 핵심 구조입니다. 콘텐츠(영상)가 화면의 80%를 차지하고, 우측이나 하단에 보조 리스트(추천 영상, 채팅창)가 붙습니다.

clipboard-image-1776919504443.webp

싱글 카드 / 마이크로 사이트 (The Single Card / Linktree style)

clipboard-image-1776919217986.webp

비대칭 브루탈리즘 (The Asymmetrical / Brutalism)

clipboard-image-1776919236696.webp

핀터레스트 / 메이슨리 그리드 (The Masonry Grid)

이미지나 카드의 세로 길이가 달라도 빈틈없이 차곡차곡 쌓아 올리는 구조입니다. 포트폴리오, 쇼핑몰, 아티클 모음 등 콘텐츠의 양이 압도적으로 많을 때 사용합니다.

clipboard-image-1776919333428.webp

벤토 박스 레이아웃 (The Bento Box)

clipboard-image-1776919293077.webp

지그재그 스토리텔링 (The Zig-Zag / Z-Pattern)

사용자의 시선이 'Z' 모양으로 떨어지는 심리를 이용한 구조입니다. 텍스트와 이미지를 교차 배치하여 지루함을 없애고 리듬감을 줍니다. Apple의 제품 소개 페이지에서 가장 흔하게 볼 수 있습니다.

clipboard-image-1776919316763.webp

결제 및 체크아웃 페이지 (The Checkout / Payment)

clipboard-image-1776919427955.webp

고객 문의 / 폼 제출 페이지 (The Contact / Inquiry Form)

clipboard-image-1776919449309.webp

← 프로젝트에서 보기