화면 배치 이름 9가지
웹페이지 레이아웃 종류와 이름은 무엇인가요? 히어로, 벤토 그리드, 스플릿, 카드 그리드, 사이드바 레이아웃, 매거진, 대시보드, Z 패턴, 풀블리드 아홉 가지입니다.
"보기 좋게 배치해 줘"는 AI에게 아무 정보도 주지 않습니다. 배치 이름을 대면 결과가 매번 비슷하게 나옵니다.
이름과 미리보기
미리보기를 누르면 멈추고, 다시 누르면 재생합니다.
히어로
Hero section
페이지 맨 위, 큰 제목과 대표 버튼이 있는 첫인상 영역
벤토 그리드
Bento grid
크기가 다른 칸을 도시락처럼 맞춰 넣은 격자
스플릿
Split screen
화면을 좌우로 나눠 글과 이미지를 나란히
카드 그리드
Card grid
같은 크기 카드를 여러 열로 반복
사이드바 레이아웃
Sidebar layout
한쪽에 고정 메뉴, 나머지는 본문
매거진
Magazine layout
큰 기사 하나와 작은 기사 여럿을 섞는 잡지식 배치
대시보드
Dashboard
숫자 카드·차트·표를 한 화면에 모은 관리 화면
Z 패턴
Z-pattern
시선이 왼쪽 위 → 오른쪽 위 → 왼쪽 아래 → 오른쪽 아래로 흐르는 배치
풀블리드
Full bleed
여백 없이 화면 끝까지 꽉 채운 이미지나 띠
이렇게 씁니다
- 영역을 위에서 아래로 순서대로 부르고, 영역마다 배치 이름은 하나만 씁니다.
- 열 수(2열·3열)와 기준 화면(데스크톱·모바일)을 함께 적습니다.
- 모바일에서 1열로 쌓으라는 말을 미리 넣어 둡니다. 빠뜨리면 AI가 가로 스크롤을 만들기도 합니다.
복사해서 쓰는 프롬프트
랜딩 페이지
랜딩 페이지를 만들어 줘. 1. 맨 위: 히어로(Hero section). 큰 제목 한 줄, 설명 한 줄, 주요 버튼 1개. 2. 그 아래: 카드 그리드(Card grid) 3열. 카드마다 제목과 두 줄 설명, 아이콘 없음. 3. 그 아래: 스플릿(Split screen). 왼쪽은 글, 오른쪽은 제품 화면 이미지. 4. 화면 폭 400px 이하에서는 전부 1열로 쌓아 줘. 가로 스크롤이 생기면 안 돼.
참고한 게시물: @uxwoodytips