NAVIGATION & SHEETS / 1.1 · 02 OCT 2026

버튼 수로 정리하고,
역할에 맞게 조합해요.

상단 바는 버튼 0개·1개·2개로 정리합니다. 버튼의 위치와 제목·로고를 조합해, 서비스가 달라도 같은 구조를 사용합니다.

Pretendard 17 / 600Header 56Touch 44Sheet R24

뒤로 · 닫기 · 취소

뒤로는 이전 단계로.
닫기는 현재 창을 끝내기.
취소는 변경사항을 확인하고 나가기.

보기글씨

01. 버튼 수 3단계, 배치 4가지

상태바는 OS 영역 · 콘텐츠 바는 최소 56pt

N0 / N1-L / N1-R / N2가 기본형입니다. 아래 N2 예시 세 개는 같은 구조이며 버튼과 중앙 콘텐츠만 바뀝니다.
비활성 버튼은 개수에 포함합니다. 로고·장식·그래버는 제외합니다. 버튼이 없어도 양쪽 64pt 공간을 유지해 제목이 중앙에서 움직이지 않습니다.

02. 시트는 같은 프레임

공통 헤더 · 공통 표면 · 목적에 따른 본문

편집 시트에는 작동하지 않는 그래버를 넣지 않습니다. 하단에 ‘완료’가 있으면 상단 저장은 생략합니다. 확인 시트의 닫기·배경 탭은 항상 취소로 처리합니다.

03. 공유한 화면에 적용하면

이미지 번호 기준

사례	유형	통일할 내용
1 · 5 위젯 추가	Browse	같은 제목 행과 32pt 닫기 표면. 터치 영역 44pt.
2 프로필 수정	N1-L / N2	하단 완료면 취소만(N1-L). 상단 완료면 취소+완료(N2). 전체 화면 편집 권장.
3 로고 + 뒤로	N1-L + Logo	온보딩이면 로고 허용. 일반 상세는 화면 제목. 이전 단계가 있을 때만 뒤로.
4 초대 + 로고 + 알림	N2 + Logo	양쪽 64pt 슬롯, 로고 높이 22pt, 아이콘 버튼 44pt.
6 친구 초대	Browse	위젯 추가와 동일한 헤더. 본문에서 초대 기능을 구분.
7 친구 끊기	확인창 권장	단순 실행 여부만 물으면 확인창. 현재 시트를 유지할 때 헤더는 N1-R.

04. 화면이 늘어나도 지킬 기준

제목의 중앙은 흔들리지 않게

양쪽 슬롯을 같은 폭으로 예약합니다. 큰 글씨는 줄바꿈과 높이 확장을 허용하고, 제목과 버튼을 겹치지 않습니다.

색은 역할에서 가져오기

헤더와 본문은 같은 modal 표면. 닫기는 중립색, 일반 저장은 브랜드색, 파괴적 액션은 위험 의미색을 사용합니다.

닫기와 저장을 분리하기

선택·조회는 닫기와 헤더 드래그. 편집은 취소와 저장. 변경사항이 있을 때만 폐기를 확인합니다.

시스템이 맡는 영역은 한 번만

상태바·safe area·시스템 시트 그래버를 중복으로 그리지 않습니다. 본문은 스크롤하고 주요 액션은 접근 가능한 위치에 유지합니다.

05. 시트보다 먼저, 작업을 구분해요

디자인 시스템의 선택 기준 · 화면 전환 이관 전

작업 / 영역	우선 형식	이유
프로필 수정 · 그룹 만들기	전체 화면 편집	여러 필드·키보드·다음 단계에 충분한 공간이 필요합니다.
스티커 보드	전체 화면 캔버스	드래그·사진·그리기가 중심 작업입니다. 현재 즉시 반영 방식은 유지합니다.
친구 초대	일반 화면 + 시스템 공유	보상·친구 목록 조회와 링크 공유를 나눕니다.
친구 끊기	확인창	대상·결과를 설명하고 취소 / 친구 끊기만 제공합니다.
주파수 · 열람권 안내	인라인 도움말	설명은 관련 카드나 목록에서 펼쳐봅니다.
위젯 종류 · 댓글 · 미니 프로필	시트 유지	원래 콘텐츠 문맥을 보며 짧게 처리하는 보조 작업입니다.

이 기준은 로컬 디자인 시스템에 반영했습니다. 개별 앱 화면의 전환 방식은 아직 변경하지 않았습니다. 피그마 전체 화면 시각 감사 결과가 아니라 앱 코드와 관련 영역 검토에 기반합니다.
화면별 근거와 우선순위 →