소셜 오브 복숭아.

레이아웃 레퍼런스8개

화면 배치에도 이름이 있습니다. “카드를 보기 좋게 늘어놓아 줘”보다 “벤토 그리드” 한 단어가 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

    모바일 화면 맨 아래에 주요 메뉴 아이콘이 나란히 고정된다