소셜 오브 복숭아.

레이아웃 레퍼런스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

    글 상자가 이미지 위로 일부 겹쳐 앞뒤 층이 생긴다