Hero section
들어오자마자 보이는 첫 화면이에요
큰 제목과 버튼 하나로 핵심만 말해요
예시봄날상점신상품기획전고객센터
이번 주말까지
봄 신상 최대 50%
지금 보러가기
이럴 때 써요
- 쇼핑몰 첫 화면의 '봄 신상 50%' 큰 배너
- 새 앱을 소개하는 홈페이지 맨 위
- 행사·캠페인 안내 페이지의 첫인상
#히어로섹션#HeroSection#페이지구성#홈페이지첫화면
Max-width container
화면이 아무리 넓어도
글은 가운데 일정한 폭 안에만 놓여요
이럴 때 써요
- 뉴스 기사를 큰 모니터로 읽을 때 줄이 너무 길지 않게
- 회사 공지사항·블로그 글 페이지
- 문서를 웹페이지로 옮길 때 읽기 편한 폭 맞추기
#본문폭제한#MaxWidthContainer#페이지구성#읽기편한폭
Full-bleed
사진이나 배경이 옆 여백 없이
화면 끝에서 끝까지 꽉 차요
이럴 때 써요
- 호텔 홈페이지의 탁 트인 바다 사진
- 상세페이지 중간에 분위기 바꾸는 큰 사진 한 장
- 잡지처럼 글 사이에 넓은 사진 넣을 때
#풀블리드#FullBleed#페이지구성#큰사진
Whitespace
같은 내용도 빈 공간을 넉넉히 두면
훨씬 깔끔하고 읽기 쉬워져요
예시신제품 출시
가볍고 조용한 새 청소기 지금 사전예약하면 사은품 증정 무료배송 할인쿠폰
★4.8 후기 1,203개 · 오늘출발
사전예약
이럴 때 써요
- 명품 브랜드 홈페이지가 시원해 보이는 이유
- 글이 빽빽한 안내문을 읽기 쉽게 고칠 때
- 카드뉴스 한 장에 글을 너무 많이 넣었을 때
#여백#Whitespace#디자인기본#깔끔하게
Split screen
화면을 반으로 딱 나눠
한쪽은 사진, 한쪽은 글을 놓아요
예시사진
2026 가을
새 시즌
컬렉션
포근한 니트와
코트를 만나보세요
둘러보기
이럴 때 써요
- 옷 쇼핑몰의 '새 시즌 컬렉션' 소개
- 로그인 화면에서 한쪽에 큰 사진 둘 때
- 발표자료에서 사진과 설명을 나란히 보여줄 때
#좌우분할#SplitScreen#페이지구성#사진과글
Zigzag layout
사진과 글의 자리를 줄마다 바꿔
왼쪽 오른쪽 번갈아 내려가요
이럴 때 써요
- 제품 장점을 ①②③ 순서로 소개할 때
- 상세페이지에서 기능을 하나씩 설명할 때
- 회사 소개의 '우리가 하는 일' 부분
#지그재그배치#ZigzagLayout#페이지구성#장점소개
Card grid
크기가 같은 카드를
칸을 나눠 줄 맞춰 늘어놓아요
이럴 때 써요
- 쇼핑몰 상품 목록
- 배달앱의 가게 목록, 넷플릭스 작품 목록
- 회의 요약을 주제별 카드로 정리할 때
#카드그리드#CardGrid#페이지구성#상품목록
Bento grid
크고 작은 칸을 도시락처럼
빈틈없이 맞춰 끼워 넣어요
예시NEWAI 사진 보정
🔋 배터리 하루 종일
5G
무게168g
💧 방수
이럴 때 써요
- 애플 같은 신제품 기능 소개 페이지
- 포트폴리오에서 대표작은 크게, 나머지는 작게
- 대시보드에서 중요한 숫자만 큰 칸에
#벤토그리드#BentoGrid#페이지구성#기능소개
Masonry
사진마다 높이가 달라도
빈틈없이 벽돌처럼 쌓아 올려요
이럴 때 써요
- 핀터레스트에서 사진 구경할 때
- 인스타 같은 사진 모음, 후기 사진 모아보기
- 카드뉴스·포스터 시안을 한 페이지에 모아 볼 때
#메이슨리#Masonry#페이지구성#사진모음
Responsive
PC·태블릿·휴대폰 화면 크기에 맞춰
한 줄에 놓이는 개수가 알아서 바뀌어요
이럴 때 써요
- 같은 쇼핑몰을 PC와 휴대폰으로 볼 때
- 휴대폰에서 글씨가 너무 작아지지 않게
- 만든 대시보드를 휴대폰으로도 확인할 때
#반응형#Responsive#화면크기대응#모바일대응
Product detail page
위에서 아래로 길게 내려가며
사진·장점·후기 순서로 설득해요
예시← ① 대표 사진
← ② 한 줄 핵심
← ③ 장점 3가지
← ④ 사용 방법
← ⑤ 구매 후기
← ⑥ 구매 버튼
이럴 때 써요
- 쿠팡·스마트스토어 상품 상세 화면
- 홈쇼핑처럼 순서대로 설명하는 제품 소개
- 새 상품 상세페이지를 처음 짤 때 순서 잡기
#상세페이지구성#ProductDetailPage#페이지구성#상세페이지
Pricing table
요금제를 나란히 세워
무엇이 다른지 한눈에 비교해요
예시추천
프로
₩9,900
✓ 5명
✓ 100GB
✓ 상담
선택
이럴 때 써요
- 통신사·OTT 요금제 고를 때
- 넷플릭스 '베이직·스탠다드·프리미엄' 화면
- 제안서에서 A안·B안·C안 비교할 때
#요금비교표#PricingTable#비교정리#요금제
Timeline
한 줄 위에 시간 순서대로
있었던 일을 점으로 찍어 보여줘요
이럴 때 써요
- 회사 소개의 '걸어온 길' 연혁
- 택배 배송 현황, 주문 진행 단계
- 프로젝트 일정을 발표자료로 보여줄 때
#타임라인#Timeline#정보정리#연혁
Sidebar layout
왼쪽에 메뉴가 늘 세로로 있고
오른쪽 넓은 곳에 내용이 바뀌어요
이럴 때 써요
- 쇼핑몰 관리자 화면, 은행 기업뱅킹
- 노션·메일함처럼 왼쪽에 목록 있는 화면
- 매출 모니터링 대시보드 만들 때
#사이드바레이아웃#SidebarLayout#화면구성#대시보드
KPI cards
가장 중요한 숫자 몇 개를
맨 위에 카드로 한 줄 세워요
이럴 때 써요
- 가게 사장님 앱의 '오늘 매출·주문 수'
- 은행 앱 첫 화면의 총자산·이번 달 지출
- 매일 보는 광고 성과 대시보드 맨 위
#KPI카드#KPICards#대시보드#핵심숫자
Data table
칸과 줄을 반듯하게 맞춰
숫자를 한눈에 비교하게 해요
예시| 날짜 | 매체 | 노출 | 클릭 | 비용 ▾ |
|---|
| 10/21 | 네이버 | 52,310 | 1,204 | ₩84만 |
| 10/22 | 유튜브 | 88,902 | 2,015 | ₩132만 |
| 10/23 | 인스타 | 41,577 | 986 | ₩61만 |
| 10/24 | 네이버 | 49,880 | 1,131 | ₩79만 |
| 10/25 | 유튜브 | 92,140 | 2,240 | ₩140만 |
| 합계 | 324,809 | 7,576 | ₩496만 |
이럴 때 써요
- 카드사 앱의 월별 사용 내역
- 엑셀 보고서를 웹 화면으로 옮길 때
- 매체별 광고비·클릭 수 모니터링 표
#데이터표#DataTable#정보정리#보고서
Aspect ratio
가로와 세로의 비율이에요
어디에 올리느냐에 따라 맞춰야 해요
이럴 때 써요
- 인스타 피드는 1:1이나 4:5
- 릴스·쇼츠는 세로로 긴 9:16
- 카드뉴스·발표 슬라이드 크기 정할 때
#화면비율#AspectRatio#규격#카드뉴스
Slide layout
발표 화면 한 장을 위 제목, 왼쪽 요점,
오른쪽 그래프, 아래 쪽번호로 나눠요
예시02 · 성과
3분기 성과 요약
•매출 전년 대비 18% 증가
•신규 고객 2.4만 명
•광고비 효율 1.3배
봄날상점 · 마케팅팀3 / 12
이럴 때 써요
- 회사 회의 때 띄우는 보고 화면
- PPT 발표자료를 웹페이지로 옮길 때
- 강의·세미나 자료 한 장 한 장
#슬라이드구성#SlideLayout#발표자료#PPT