레이아웃

폭 구간 · 화면 틀 · 안전 영역 · 쌓임 층. 화면의 값은 빌드할 때 제품 코드에서 바로 읽었어요.

폭 구간#

경계는 두 개예요 - 767px과 1024px. 태블릿은 따로 된 플랫폼이 아니라 폰 틀을 넓게 쓰는 구간이에요.

폰

767px 이하

태블릿

768 - 1023px

1024px 이상

틀(막대·패널)은 1024px에서 한 번 바뀌고, 안쪽 내용은 768px부터 넓어져요.

폭 구간별 화면 틀과 내용
구간	화면 틀	안쪽 내용
폰 · 767px 이하	전체 화면 틀 - 위 막대 + 아래 탭 막대. 단지 상세도 전체 화면으로 열려요.	한 단. 글자 역할은 폰 크기, 누르는 칸 44px.
태블릿 · 768-1023px	폰과 같은 전체 화면 틀이에요.	안쪽이 넓어져 두 단 격자가 돼요.
PC · 1024px 이상	왼쪽 레일(접으면 76px, 펼치면 264px). 단지 상세는 오른쪽 패널(도크)로 열려요.	여러 단. hover와 키보드 초점.

페이지 머리는 모든 화면에서 같은 자리·같은 높이예요. 요청이 있어도 머리를 바꾸지 않고 안쪽 카드·내용을 바꿔요.
글을 읽는 페이지(소개·인사이트·문서)는 본문 폭 최대 1152px, 좌우 여백 20px이에요. 맨 아래 푸터는 최대 1520px까지 넓어져요.
격자의 단 수는 640 · 768 · 1024 · 1280px 경계에서 늘어나요. 카드 목록은 보통 폰 1단 → 태블릿 2단 → PC 3단이에요.
모든 카드는 바깥 위 조작 줄(CardBar) + 안쪽 제목(CardHead)으로 짜요. 조작이 없는 카드도 빈 줄을 얹어 옆 카드와 높이를 맞춰요.

폰의 노치·홈 막대·소프트 키보드가 가리는 만큼을 CSS 변수로 받아 비켜 그려요.

안전 영역과 키보드 변수
값	쓰는 곳
--sat	위 안전 영역(노치·상태 표시줄). 폰 위 막대가 이만큼 아래에서 시작해요.
safe-area-inset-bottom	아래 안전 영역(홈 막대). 아래 시트·전체 화면 상세의 맨 아래 여백에 더해요.
--kb	소프트 키보드가 가린 높이. 검색처럼 입력이 있는 화면의 아래 여백에 더해 결과가 키보드 밑에 숨지 않게 해요.

값이 아니라 이름으로 골라요. 화면 위에 뜨는 것(대화상자·시트·팝오버·툴팁)은 페이지 맨 끝에 붙여 그려 부모의 층에 갇히지 않게 해요.

지금은 접는 기기도 화면 폭에 따라 위 구간 중 하나로 들어가요. 접힌 플립·폴드 바깥 화면은 폰, 펼친 폴드는 폭에 따라 폰 또는 태블릿이에요.
접는 선(힌지)을 피해 나누는 배치는 아직 없어요. 두 화면 기기도 한 화면처럼 그려요.
어떤 화면을 두 쪽으로 나눌지 연구하고 있어요. 정해지면 이 페이지에 구간을 더할게요.

플랫폼별 레이아웃
역할	모바일	PC	Pleos개발 중
기준 폭	402px(767px 이하)	1440px(1024px 이상)	창 크기에 따라 - 넓은 창 약 1706dp
두 단이 되는 폭	768px(태블릿)	기본 여러 단	1200dp 이상 창
머리 높이	-	-	100dp
좌우 여백(글 페이지)	20px	20px	32dp(화면)

Pleos 값은 차량 앱 공개 저장소(reevl-for-pleos)의 테마 코드에서 옮겼어요. 차량 앱은 개발 중이에요.