소셜 오브 복숭아.

레이아웃 레퍼런스31개

화면 배치에도 이름이 있습니다. “카드를 보기 좋게 늘어놓아 줘”보다 “벤토 그리드” 한 단어가 AI 에게 훨씬 정확하게 전달됩니다. 와이어프레임으로 배치를 고르고, 이름이 든 요청 문장을 복사해 붙여 넣으세요.

받는 쪽 · 코딩 AI

페이지 골격

홀리 그레일
Holy grail layout
머리와 바닥 사이에 왼쪽 메뉴 · 본문 · 오른쪽 보조 단이 놓인다
사이드바 + 본문
Sidebar layout
한쪽에 고정 폭 사이드바, 나머지를 본문이 채운다
스플릿 스크린
Split screen layout
화면을 반으로 나눠 두 내용을 나란히 둔다
싱글 컬럼
Single column layout
읽기 좋은 폭으로 좁힌 한 단에 내용을 위에서 아래로 쌓는다
대시보드 셸
Dashboard app shell
왼쪽 내비 · 상단 바가 고정되고 가운데에 지표 카드가 채워진다
박스 레이아웃
Boxed layout
정해진 폭의 상자 안에 페이지 전체가 들어가고 양옆은 여백이다
풀블리드
Full-bleed layout
본문은 좁은 폭인데 이미지 · 띠만 화면 끝까지 닿는다
하단 탭 바
Bottom tab bar navigation
모바일 화면 맨 아래에 주요 메뉴 아이콘이 나란히 고정된다

업무 화면

내부 스크롤 앱 셸
App shell with inner scroll
상단 바와 사이드바는 제자리에 두고 본문 영역만 안에서 스크롤된다
고정 머리줄 · 고정 열 표
Sticky header and frozen column table
표 안에서만 가로 · 세로로 스크롤되고 머리줄과 첫 열은 제자리에 붙어 있다
독립 스크롤 분할 창
Independently scrolling split panes
목록 창과 상세 창이 각자 따로 스크롤되고, 경계선을 끌어 폭을 바꾼다
조회 조건 + 결과 그리드
Search filter panel with result grid
위의 조회 조건 영역을 접으면 아래 결과 표가 남은 높이를 채운다
조회 · 목록 · 상세 3단
Search, list and detail stacked layout
조회 조건 · 목록 · 고른 행의 상세가 한 화면에 위아래로 쌓인다
하단 고정 작업 바
Sticky bottom action bar
긴 입력 폼이 스크롤되는 동안 「취소 · 저장」 바는 아래에 늘 붙어 있다
탭형 작업 공간
Tabbed workspace (multi-document tabs)
메뉴에서 연 화면이 본문 위 탭으로 쌓이고, 탭을 눌러 오간다

첫 화면

첫 화면(히어로)

중앙 히어로
Centered hero section
첫 화면 가운데에 큰 제목 · 설명 · 버튼이 세로로 모인다
스플릿 히어로
Split hero section
한쪽에 제목 · 버튼, 다른 쪽에 큰 이미지가 놓인다
풀스크린 히어로
Full-screen image hero
화면 전체를 덮은 배경 이미지 위에 제목이 얹힌다
비대칭 히어로
Asymmetric hero section
제목과 이미지를 크기 · 위치를 엇갈리게 놓아 긴장감을 준다

콘텐츠 배열

카드 그리드
Card grid layout
같은 크기의 카드가 행과 열로 고르게 놓인다
벤토 그리드
Bento grid layout
크기가 다른 칸들이 도시락처럼 빈틈없이 맞물린다
마소너리
Masonry layout
높이가 제각각인 카드가 벽돌처럼 열마다 위로 붙어 쌓인다
매거진
Magazine layout
큰 대표 기사 하나와 작은 기사들이 잡지 지면처럼 섞인다
지그재그
Zigzag alternating layout
이미지와 글이 줄마다 좌우를 바꿔 가며 번갈아 놓인다
타임라인
Vertical timeline layout
세로 선을 따라 시간 순서의 항목이 점과 함께 이어진다
마스터-디테일
Master-detail layout
왼쪽 목록에서 고른 항목의 내용이 오른쪽에 펼쳐진다
프라이싱 테이블
Pricing table columns
요금제 카드가 나란히 서고 추천안 하나가 도드라진다

시선 · 구성

F 패턴
F-pattern layout
왼쪽 위에서 시작해 가로로 두 번 훑고 아래로 내려가는 시선을 따른다
Z 패턴
Z-pattern layout
왼쪽 위 → 오른쪽 위 → 왼쪽 아래 → 오른쪽 아래로 시선이 지난다
브로큰 그리드
Broken grid layout
격자를 일부러 벗어난 요소가 칸 경계를 넘어선다
겹침 레이아웃
Overlapping layout
글 상자가 이미지 위로 일부 겹쳐 앞뒤 층이 생긴다