FOUNDATIONS
상황에 맞는 레이어와 알림을 고르고 다음 행동을 명확하게 안내합니다.
최대 폭·열 전환·스크롤·하단 CTA 배치와 레이어·Elevation 규칙을 함께 확인하세요.
현재 화면에서 자산 목록의 설명을 확인하거나 내용을 편집하는 상황입니다.
선택한 플랫폼의 실제 실행 예제입니다.
문서 플랫폼을 확인하는 중…
선택한 플랫폼의 실제 실행 예제입니다.
문서 플랫폼을 확인하는 중…
선택한 플랫폼의 실제 실행 예제입니다.
문서 플랫폼을 확인하는 중…
설정 저장의 결과나 현재 화면에서 해결해야 하는 문제를 알려주는 상황입니다.
| 컴포넌트 | 선택할 상황 | 책임과 차이 |
|---|---|---|
| Alert | 본문에 남아야 하는 상태 설명 | 관련 입력이나 콘텐츠 근처에 표시합니다. 사용자가 메시지와 다음 행동을 다시 확인할 수 있게 합니다. |
| Toast · 피드백 서비스 | 방금 수행한 작업의 결과 통지 | Toast로 짧게 통지합니다. 반드시 해결해야 할 문제나 중요한 안내를 자동 종료 알림에만 두지 않습니다. |
선택한 플랫폼의 실제 실행 예제입니다.
문서 플랫폼을 확인하는 중…
선택한 플랫폼의 실제 실행 예제입니다.
문서 플랫폼을 확인하는 중…
‘프로젝트 계획’ 문서를 삭제하기 직전의 확인 창입니다. 실제 Modal 안에서 제목·설명·확정 버튼의 문구와 강조를 비교합니다.
적용 조건 · 되돌릴 수 없는 문서를 삭제하기 직전에 적용합니다. 취소는 항목을 유지하고 삭제는 이 예제의 항목만 제거합니다.
주의 · 취소를 비활성화하지 마세요. 실제로 복원할 수 있는 서비스라면 복구 가능 여부와 보관 기간을 사실대로 적습니다.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
문서 플랫폼을 확인하는 중…
권장 사례처럼 삭제 대상과 결과를 명시하고 취소와 삭제를 분리합니다. 이 코드는 로컬 항목만 제거하며 실제 삭제 요청을 수행하지 않습니다.
문서 플랫폼을 확인하는 중…
사용자가 이해하고 다음 행동을 선택할 수 있는 문구를 작성하세요. 아래 “피하기”는 문구를 비교하기 위한 예시입니다.
주변 맥락 없이 읽어도 어떤 행동인지 알 수 있게 씁니다. 같은 화면의 주요 행동을 구분하세요.
확인
문서 플랫폼을 확인하는 중…
변경 사항 저장
문서 플랫폼을 확인하는 중…
실패를 알리는 데서 그치지 않고 사용자가 고칠 수 있는 내용을 말합니다.
입력 오류
문서 플랫폼을 확인하는 중…
목록 이름을 입력해 주세요.
문서 플랫폼을 확인하는 중…
검색 결과가 없으면 필터 초기화, 처음 사용하는 화면이면 첫 항목 추가를 연결합니다. 조회 실패는 재시도 안내로 구분합니다.
데이터 없음
문서 플랫폼을 확인하는 중…
조건에 맞는 항목이 없습니다
문서 플랫폼을 확인하는 중…
긴 한국어 라벨은 의미 단위로 줄바꿈하고, 숫자는 부호·단위가 값과 분리되지 않도록 확인하세요. 375px 보기에서는 실제 가용 폭으로 배치하며 축소 배율을 사용하지 않습니다. 브라우저 200% 확대에서도 라벨과 행동을 읽고 조작할 수 있는지 확인하세요. Native 기기의 시스템 글자 크기는 별도 기기 검증이 필요합니다.
줄바꿈이나 카드 전환은 소비자 배치와 공개 옵션으로 조절합니다. 컴포넌트 내부 글자를 임의로 줄여 잘림을 숨기지 마세요.