FOUNDATIONS
레이어·Elevation
flat·raised·floating 표면 선택과 활성 창의 팝업·Toast·포커스 규칙입니다.
- 표면 표현
- 그림자로 배경과 얼마나 분리해 보일지 정합니다. flat·raised·floating 중 역할을 선택합니다.
- 표시 순서
- 겹치는 창 중 무엇을 앞에 보여줄지 정합니다. 창의 소유 관계와 열린 순서를 따릅니다.
- 입력·포커스
- 어디를 클릭하고 키보드로 이동할 수 있는지 정합니다. 새 창이 열리면 배경 입력을 차단합니다.
세 규칙은 독립적입니다. 앞에 있는 Modal이 메뉴보다 더 진한 그림자를 가질 필요는 없습니다.
표면 역할 선택
| 역할 | 사용 상황 | 표현 |
|---|---|---|
| flat | 일반 콘텐츠·기본 Card·Toast·Tooltip | 그림자 없음. 간격·표면색·필요한 테두리로 구분 |
| raised | 배경에서 살짝 분리할 Card | 작고 옅은 접촉 그림자 |
| floating | Select·메뉴·Popover·Modal·Drawer | 옅은 주변 그림자. 차단 창은 배경 차단과 활성 영역으로 구분 |
Card는 내용을 묶는 컨테이너입니다. 행동은 내부 Button·Link에 연결합니다. 마우스를 올리거나 내부 버튼에 포커스를 옮겨도 카드 전체가 떠오르지 않습니다.
실제 표면 비교
프로젝트 설정
팀과 공유할 프로젝트의 기본 정보를 확인합니다.
마지막 변경 · 오늘
프로젝트 설정
팀과 공유할 프로젝트의 기본 정보를 확인합니다.
마지막 변경 · 오늘
프로젝트 설정
팀과 공유할 프로젝트의 기본 정보를 확인합니다.
마지막 변경 · 오늘
세 표면은 크기·내용·표면색·여백이 같고 그림자만 다릅니다. Card는 flat·raised만 사용하며, floating은 Popover·Modal처럼 콘텐츠 위에 겹치는 표면에 사용합니다.
- 현재 활성 영역
- 문서 화면
- 닫은 뒤 포커스
- 팝업이나 창을 열어 복귀 위치를 확인하세요.
최근 변경 내역
프로젝트 이름과 공유 설정이 변경되었습니다.
팝업이나 창을 열면 현재 활성 영역과 닫은 뒤 포커스가 돌아갈 위치를 확인할 수 있습니다.
Modal·Toast·하단 CTA 함께 보기
아래 순서로 창이 바뀔 때 조작 범위와 포커스가 어떻게 이동하는지 확인하세요.
- 팝업 메뉴 열기
아래 예제의 ‘팝업 메뉴’를 누르면 화면 위에 메뉴가 열립니다.
- 새 모달 열기
메뉴에서 ‘새 모달 열기’를 누르세요. 이전 팝업은 사라지고 새 창만 조작할 수 있습니다.
- 닫고 복귀 확인
닫기 버튼이나 Escape로 창을 닫으면 ‘팝업 메뉴’ 버튼으로 포커스가 돌아옵니다.
문서 플랫폼을 확인하는 중…
이어서 하단의 ‘변경 내용 확인’을 열고 ‘Toast 표시’를 눌러 보세요. 알림의 ‘기록 보기’는 실행할 수 있고, 배경 CTA는 창을 닫을 때까지 차단됩니다. 색상·긴 콘텐츠·안전 영역은 ‘예제 설정’에서 바꿀 수 있습니다.
활성 창과 표시 순서
새 창이 열리면 입력 차단 · 기존 팝업 닫기
본문 · 입력 · 확정 행동
- 이 창에서 연 팝업·Tooltip
- 남은 시간과 행동을 유지하는 Toast
겹침과 입력 규칙
화면에서 확인할 동작을 먼저 읽고, 구현할 때 필요한 세부 조건을 펼쳐 보세요.
새 Modal·Drawer
새 창이 열리면 이전 영역의 팝업을 닫고 배경 입력을 차단합니다.
팝업에서 새 창 열기
팝업은 닫히고 새 창이 유지됩니다. 창을 닫으면 원래 팝업 버튼으로 포커스가 돌아갑니다.
Escape·Tab
Escape는 편집 중인 입력이 먼저 처리합니다. 처리되지 않은 Escape만 최상위 영역 하나를 닫고, Tab은 현재 활성 범위에서 이동합니다.
중첩 창
안쪽 창을 닫으면 바깥 창이 다시 활성화되고, 안쪽 창을 열었던 버튼으로 포커스가 돌아갑니다.
긴 본문·배경 CTA
열린 창의 본문만 스크롤합니다. 배경의 하단 CTA는 창을 닫은 뒤 다시 사용할 수 있습니다.
Toast
활성 창이 바뀌어도 알림의 남은 시간과 행동을 유지합니다.
상세 참조와 플랫폼 범위
React·Vue 2는 Provider의 색상·서체 범위를 유지하는 Web 호스트를 사용합니다. Native는 활성 Modal 창 내부에 Toast를 표시합니다. Web z-index와 Native 창 순서는 서로 다른 플랫폼 기능입니다.
Native Web은 브라우저 미리보기입니다. iOS·Android의 기기 키보드·안전 영역·뒤로 가기·VoiceOver·TalkBack 검증은 별도로 수행합니다.
하단 CTA 공간 확보 · 피드백 서비스 · Card · Modal