레이아웃 레퍼런스7개

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

받는 쪽 · 코딩 AI

업무 화면

내부 스크롤 앱 셸
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)
메뉴에서 연 화면이 본문 위 탭으로 쌓이고, 탭을 눌러 오간다