Tooltip은 짧은 힌트를 줘. Popover는 더 많은 글, 선택지, 버튼을 담을 수 있어.
몇 단어만으로 충분할 때는 툴팁을 사용하세요. 페이지를 떠나지 않고 더 많이 읽거나 해야 할 때는 팝오버를 사용하세요. 가이드 열기혼동하기 쉬운 UI 패턴 비교
두 패턴은 비슷하게 보일 수 있지만 다른 작업을 수행합니다. 올바른 것을 선택하려면 이러한 짧은 규칙을 사용하세요.
모달은 작업이 끝날 때까지 화면을 멈춰요. 팝오버는 버튼 옆에 뜨고 화면은 계속 쓸 수 있어요.
먼저 완료해야 하는 한 가지 작업에는 모달(modal)을 사용하세요. 추가 정보나 작은 동작에는 팝오버(popover)를 사용하세요. 가이드 열기 드롭다운 & 컨텍스트 메뉴 — 학습 번들Dropdown & Context Menu — Learning Bundle · 선택Select · 편집 가능한 콤보박스Editable Combobox
dropdown 메뉴는 여러 동작을 실행해요. select는 정해진 목록에서 고르는 거고, combobox는 직접 타이핑하거나 검색할 수도 있어요.
동작에는 메뉴를 사용하세요. 짧은 고정 목록에는 선택(select)을 사용하세요. 긴 목록이나 검색 가능한 목록에는 콤보박스(combobox)를 사용하세요. 가이드 열기탭은 콘텐츠 섹션 간 전환을 합니다. 세그먼트 컨트롤은 같은 뷰에서 작은 모드, 필터, 또는 값을 변경합니다.
별도의 콘텐츠 섹션에는 탭을 사용하세요. 동일한 콘텐츠를 변경하는 몇 가지 짧은 선택에는 세분화된 컨트롤을 사용하세요. 가이드 열기아코디언은 페이지 안에서 여러 섹션을 열어 둘 수 있어요. 반면 탭은 하나의 공간에서 한 번에 하나씩만 보여줘요.
사람들이 함께 읽을 수 있는 질문이나 섹션에는 아코디언을 사용하세요. 한 번에 하나만 중요한 몇 가지 별도의 보기는 탭을 사용하세요. 가이드 열기Toast는 작업을 멈추지 않는 짧은 메시지야. Alert은 놓치면 안 되니까 화면에 머물거나 작업을 중단시켜.
완료된 작업을 확인할 때는 토스트를 사용하세요. 실패, 위험, 또는 즉각적인 주의가 필요한 선택에는 알림을 사용하세요. 가이드 열기Tooltip은 짧은 이름이나 힌트를 줘. Hover card는 사람이나 항목, 링크에 대한 자세한 미리보기를 보여줘.
몇 단어만으로 충분할 때는 툴팁을 사용하세요. 미리보기를 통해 다른 페이지로 이동하지 않아도 될 때는 호버 카드를 사용하세요. 키보드와 터치에서도 작동해야 합니다. 가이드 열기 macOS Context MenumacOS Context Menu · 드롭다운 & 컨텍스트 메뉴 — 학습 번들Dropdown & Context Menu — Learning Bundle
컨텍스트 메뉴는 누르거나 클릭한 항목에 쓸 수 있는 행동을 보여줘요. 드롭다운은 목적이 명확하게 보이는 버튼에서 열려요.
컨텍스트 메뉴를 유일한 경로가 아닌 추가 단축키로 사용하세요. 메뉴가 어디에서 열리는지 사람들이 볼 수 있어야 할 때는 드롭다운을 사용하세요. 가이드 열기캐러셀은 조작 장치가 있는 각각의 슬라이드를 보여줘요. 마키는 한 줄의 내용이 계속 움직이게 해요.
항목마다 시간과 제어가 필요할 때는 캐러셀을 사용하세요. 중요한 장식이 아닌 경우에는 요구될 때 멈추거나 정지할 수 있는 마퀴를 사용하세요. 가이드 열기라이트박스는 사진이나 영상을 보여주는 특별한 창이에요. 보통 창은 선택지, 양식, 짧은 작업을 담아요.
사진이나 비디오를 확대하려면 라이트박스를 사용하세요. 주요 작업이 행위하거나 결정을 내리는 것이라면 모달을 사용하세요. 가이드 열기메이슨리는 서로 다른 높이의 카드를 열에 채웁니다. 벤토 그리드는 계획된 카드 크기를 사용하여 가장 중요한 것을 보여줍니다.
높이가 다른 여러 개별 항목에는 메이슨리를 사용하세요. 크기가 중요도를 보여주는 소규모 집합에는 벤토 그리드를 사용하세요. 가이드 열기사이드바는 화면 구조 안에 자리 잡아. Drawer는 잠깐 옆으로 미끄러져 들어와서 화면을 가리거나 밀어낼 수 있어.
여유가 있을 때 사람들이 자주 사용하는 도구나 링크에는 사이드바를 사용하세요. 덜 자주 사용하는 작업이나 작은 화면에는 드로어를 사용하고, 닫기 쉽게 만드세요. 가이드 열기세 줄 모양 버튼은 메인 메뉴를 열어. 점 세 개 버튼은 근처 항목의 추가 기능을 열어.
주로 작은 화면에서 숨겨진 내비게이션에는 세 줄을 사용하십시오. 추가 항목 동작이 맞지 않는 경우 세 점을 사용하고 버튼 이름을 “더 많은 동작”이라고 하십시오. 가이드 열기이징은 설정된 타이밍 커브를 따릅니다. 스프링은 실제 스프링처럼 움직이며 스스로 멈춥니다.
페이드, 색상 변경 및 시간 기반 단계에는 이징(easing)을 사용하세요. 드래그를 따라가는 객체에는 스프링(spring)을 사용하세요. 가이드 열기Stepper는 정해진 단계로 숫자를 바꿔. Slider는 범위 안에서 원하는 위치를 고르게 해.
작은 정확한 변경에는 스태퍼를 사용하세요. 정확한 숫자를 입력하는 것보다 대략적인 위치가 중요할 때는 슬라이더를 사용하세요. 항상 값을 표시하고 키보드를 지원하세요. 가이드 열기Sheet는 하나의 창에 속하며 짧은 작업을 담아. Alert은 지금 당장 주의가 필요한 짧은 메시지나 선택지를 보여줘.
설정, 저장 또는 하나의 문서와 관련된 짧은 양식에는 시트(sheet)를 사용하세요. 경고, 실패 또는 단일 단계 확인에는 알림(alert)을 사용하세요. 가이드 열기빈 상태는 콘텐츠가 없다는 뜻이에요. 스켈레톤은 콘텐츠가 아직 로딩 중이고 모양은 알고 있다는 뜻이죠.
내용이 없는 이유와 다음에 해야 할 일을 설명하려면 빈 상태를 사용하세요. 레이아웃을 알 때 짧은 로드에는 스켈레톤을 사용하세요. 가이드 열기Toolbar는 창 안에 자주 쓰는 기능을 두는 거야. Menu bar는 화면 위에 앱의 모든 명령을 둬.
일반 문서 또는 선택 작업을 도구 모음에 넣으세요. 모든 명령, 키보드 단축키 및 덜 일반적인 작업은 메뉴 막음에 보관하세요. 가이드 열기