시트·오버레이
화면 위에 잠깐 뜨는 것은 세 가지예요 - 아래 시트, 대화상자, 팝오버. 같은 내용도 폭 구간에 따라 다른 틀로 열어요.
화면
컬럼 편집
폰: 아래 시트 - 위 모서리만 둥글게, 최대 높이 85%, 아래 안전 영역만큼 띄워요(200ms)
무엇을 고르나요#
| 무엇 | 폰 · 767px 이하 | 태블릿 | PC · 1024px 이상 |
|---|---|---|---|
| 컬럼 편집 · 조건 고르기 | 아래 시트 | 팝오버 | 팝오버 |
| 내비로 보내기 | 아래 시트 | 아래 시트 | 가운데 대화상자 |
| 로그인 | 전체 화면 | 전체 화면 | 두 칸 - 브랜드 + 양식 |
| 단지 상세 | 전체 화면 도크 | 전체 화면 도크 | 옆 도크 |
손가락으로 미는 것이 자연스러운 곳은 실제 기기 폭으로 고르고, 배치는 칸 폭으로 골라요 - 반응형.
아래 시트#
- 화면 아래에 붙고 위 모서리만 둥글어요. 최대 높이는 화면의 85%, 넘치면 안쪽만 스크롤돼요.
- 아래 안전 영역(홈 막대)만큼 띄워요. 뒤는 어둡게 덮어요.
- 아래에서 올라와요(200ms, 들어오는 이징).
대화상자#
- PC에서 확인·선택이 필요한 짧은 일은 화면 가운데 대화상자로 열어요. 폭은 내용에 맞게 좁게(예: 384px).
- 검색 팔레트·토스트·로그인과 같은 층이에요. 아래 시트는 그 위에도 올라올 수 있어요.
팝오버#
- 누른 자리 옆에 떠서 본문을 가리지 않아요. 대화상자 안에서 열어도 그 위에 떠요.
- 부품은 팝오버 문서에 있어요.
공통 규칙#
- 화면 위에 뜨는 것은 페이지 맨 끝에 붙여 그려요. 부모의 층에 갇혀 머리·탭 막대 밑으로 숨지 않게요.
- 층은 이름으로 골라요 - 쌓임 층.