///
🌎

글로벌 UI 가이드

하늘

Search
Dividers UI는 시각적으로 콘텐츠를 구분하고 그룹 간의 관계를 명확히 보여주기 위해 사용되는 요소입니다. Dividers는 사용자 인터페이스에서 콘텐츠의 흐름을 정돈하고, 정보를 시각적으로 구분하며, 페이지나 화면의 계층 구조를 더욱 명확하게 만들어 줍니다. Dividers의 주요 특징은 다음과 같습니다:
1. 얇고 단순한 선: 대부분의 Dividers는 얇고 단순한 선 모양으로 나타나며, 수평선(horizontal) 또는 수직선(vertical) 형태로 사용됩니다. 주로 시각적 방해를 최소화하면서 영역을 나누는 역할을 합니다.
2. 여백과 간격 조절: Dividers는 주변 콘텐츠와의 여백을 통해 적절한 간격을 만들어줍니다. 이를 통해 콘텐츠 간의 구분을 명확히 하며, 레이아웃의 일관성을 유지할 수 있습니다.
3. 색상과 투명도: Dividers는 일반적으로 배경색과 잘 어울리는 중립적인 색상이나 반투명한 색상을 사용하여 화면에 조화롭게 나타납니다. 그러나 강조가 필요할 때는 더 두껍거나 색상이 짙은 Dividers를 사용하여 주목성을 높일 수 있습니다.
4. 구분의 역할: Dividers는 콘텐츠를 그룹화하거나 섹션을 나누는 데 사용됩니다. 예를 들어, 카드 컴포넌트 간의 구분, 리스트 아이템의 경계, 또는 폼 필드 간의 시각적 구분을 위해 사용될 수 있습니다.
5. 상호작용이 없는 패시브 요소: Dividers는 일반적으로 사용자와의 직접적인 상호작용을 위한 요소가 아닌, 시각적인 구분을 위해 사용되는 패시브한 UI 요소입니다. 사용자가 Dividers를 클릭하거나 조작하지 않으며, 대신 시각적으로 정보의 흐름을 돕는 역할을 합니다.
6. 레이어 및 깊이 감각 추가: 때때로 Dividers는 쉐도우(그림자 효과)나 입체감을 추가하여 깊이감을 표현할 수 있습니다. 이를 통해 콘텐츠의 레이어링을 더 명확하게 보여줄 수 있습니다.
7. 일관된 디자인 시스템의 일부: 디자인 시스템에서 Dividers는 특정 스타일 규칙을 따르며, 다른 컴포넌트들과 일관되게 사용됩니다. 디자인 시스템 내에서 Dividers의 두께, 색상, 여백 등이 표준화되어 있어 통일된 사용자 경험을 제공합니다.
Dividers
Floating Action Buttons (FAB)는 사용자 인터페이스에서 중요한 작업을 쉽게 액세스할 수 있도록 돕는 버튼입니다. 일반적으로 앱 화면의 하단 모서리에 위치하며, 둥글고 떠 있는 형태로 시각적으로 두드러집니다. FAB의 주요 특징은 다음과 같습니다:
1. 둥근 형태: FAB는 원형의 버튼 형태로 나타나며, 이로 인해 시각적으로 주목할 수 있습니다. 둥근 모양은 상호작용 가능성을 직관적으로 나타내며, 사용자가 클릭할 수 있는 주요 액션임을 암시합니다.
2. 떠 있는 위치: FAB는 일반적으로 화면의 하단 우측 모서리에 위치하지만, 필요에 따라 다른 위치에 배치될 수 있습니다. 다른 UI 요소들 위에 떠 있는 방식으로 배치되기 때문에 사용자에게 주요 작업으로 쉽게 눈에 띕니다.
3. 주요 액션 강조: FAB는 사용자가 가장 자주 수행하는 작업이나 앱에서 가장 중요한 액션을 수행하도록 설계됩니다. 예를 들어, 이메일 앱에서 FAB는 새로운 이메일을 작성하는 기능을 제공할 수 있습니다.
4. 애니메이션과 전환 효과: FAB는 화면 전환이나 다른 요소와의 상호작용 시 애니메이션을 사용하여 시각적인 피드백을 제공합니다. 이를 통해 FAB의 움직임이 자연스럽게 보이고 사용자 경험이 개선됩니다.
5. 단일 액션: FAB는 일반적으로 단일한 주요 작업을 수행하기 위해 사용됩니다. 이로 인해 사용자는 혼동 없이 특정 작업을 수행할 수 있으며, UX를 단순화하는 역할을 합니다.
6. 강한 대비와 색상: FAB는 앱의 다른 UI 요소들과 대비를 이루는 색상을 사용하여 눈에 잘 띄게 디자인됩니다. 이는 사용자가 버튼을 쉽게 식별할 수 있게 해주며, 중요한 액션이라는 인상을 줍니다.
7. 아이콘 기반 디자인: FAB는 주로 텍스트보다는 아이콘을 통해 기능을 전달합니다. 이는 버튼의 크기를 작게 유지하면서도 그 기능을 명확히 전달할 수 있게 해줍니다. 아이콘은 FAB의 목적을 직관적으로 이해할 수 있게 도와줍니다.
8. 디자인 시스템 내에서의 규칙: 디자인 시스템에서 FAB의 크기, 색상, 위치, 여백 등이 정의되어 있어 일관성 있는 사용자 경험을 제공합니다. 이를 통해 앱 전반에 걸쳐 동일한 스타일과 경험을 유지할 수 있습니다.
9. 스크롤과의 반응성: FAB는 사용자가 화면을 스크롤할 때 자동으로 숨기거나 나타나는 기능을 포함할 수 있습니다. 이로 인해 FAB는 사용자의 콘텐츠 탐색을 방해하지 않으면서 필요한 순간에 적절히 나타날 수 있습니다.
Floating Action Buttons (FAB)
Icon Button은 아이콘을 사용하여 기능을 직관적으로 전달하는 버튼입니다. 일반적으로 간결한 디자인과 명확한 상징성 덕분에 사용자에게 직관적인 상호작용을 제공합니다. Icon Button의 주요 특징은 다음과 같습니다:
1. 아이콘 기반 디자인: 이 버튼은 텍스트 대신 아이콘을 사용하여 기능을 전달합니다. 예를 들어, ‘검색’ 아이콘은 돋보기 모양, ‘삭제’ 아이콘은 휴지통 모양으로 표현됩니다. 아이콘은 기능을 직관적으로 전달하기 때문에 버튼의 목적을 쉽게 이해할 수 있습니다.
2. 간결한 크기: Icon Button은 일반 버튼보다 크기가 작고 간결합니다. 덕분에 인터페이스에서 많은 공간을 차지하지 않으면서도 여러 기능을 배치할 수 있습니다. 작은 크기 때문에 버튼 간 간격과 터치 영역의 여백을 적절하게 설정하는 것이 중요합니다.
3. 시각적 피드백: Icon Button은 사용자와의 상호작용 시 시각적 피드백을 제공합니다. 버튼을 클릭하거나 터치할 때 색상 변경, 그림자, 크기 변화 등의 애니메이션을 통해 클릭 여부를 직관적으로 알 수 있습니다.
4. 일관된 스타일: 디자인 시스템에서 Icon Button은 아이콘의 크기, 버튼의 여백, 색상 등이 규정되어 있어 앱이나 웹 전체에서 일관된 스타일을 유지할 수 있습니다. 이는 사용자 경험의 일관성을 높이고 디자인의 정체성을 유지하는 데 도움을 줍니다.
5. 텍스트 레이블과의 조합: 필요할 때는 텍스트 레이블과 함께 사용되어 아이콘의 기능을 더 명확하게 설명할 수 있습니다. 예를 들어, ‘저장’ 아이콘과 ‘저장’이라는 텍스트를 함께 배치하여 사용자가 버튼의 기능을 쉽게 인지하도록 할 수 있습니다.
6. 상호작용성이 높은 요소: Icon Button은 클릭 가능한 요소로, 주로 사용자가 자주 접근하는 기능에 사용됩니다. 예를 들어, 웹사이트에서 소셜 미디어 공유 버튼이나 모바일 앱의 하단 네비게이션 메뉴에서 쉽게 찾아볼 수 있습니다.
7. 다양한 배치: Icon Button은 앱이나 웹 페이지에서 다양한 위치에 배치될 수 있습니다. 예를 들어, 툴바, 카드 컴포넌트의 액션 버튼, 네비게이션 메뉴 등에 사용되며, 다양한 사용 사례에 맞춰 활용됩니다.
8. 명확한 대비: 아이콘과 배경색 사이의 명확한 대비가 중요합니다. 아이콘 버튼이 잘 보이도록 대비를 높여 사용자에게 버튼의 존재를 인식시키고, 접근성을 높이는 데 도움이 됩니다.
Icon button
Icon Button은 아이콘을 사용하여 기능을 직관적으로 전달하는 버튼입니다. 일반적으로 간결한 디자인과 명확한 상징성 덕분에 사용자에게 직관적인 상호작용을 제공합니다. Icon Button의 주요 특징은 다음과 같습니다:
1. 아이콘 기반 디자인: 이 버튼은 텍스트 대신 아이콘을 사용하여 기능을 전달합니다. 예를 들어, ‘검색’ 아이콘은 돋보기 모양, ‘삭제’ 아이콘은 휴지통 모양으로 표현됩니다. 아이콘은 기능을 직관적으로 전달하기 때문에 버튼의 목적을 쉽게 이해할 수 있습니다.
2. 간결한 크기: Icon Button은 일반 버튼보다 크기가 작고 간결합니다. 덕분에 인터페이스에서 많은 공간을 차지하지 않으면서도 여러 기능을 배치할 수 있습니다. 작은 크기 때문에 버튼 간 간격과 터치 영역의 여백을 적절하게 설정하는 것이 중요합니다.
3. 시각적 피드백: Icon Button은 사용자와의 상호작용 시 시각적 피드백을 제공합니다. 버튼을 클릭하거나 터치할 때 색상 변경, 그림자, 크기 변화 등의 애니메이션을 통해 클릭 여부를 직관적으로 알 수 있습니다.
4. 일관된 스타일: 디자인 시스템에서 Icon Button은 아이콘의 크기, 버튼의 여백, 색상 등이 규정되어 있어 앱이나 웹 전체에서 일관된 스타일을 유지할 수 있습니다. 이는 사용자 경험의 일관성을 높이고 디자인의 정체성을 유지하는 데 도움을 줍니다.
5. 텍스트 레이블과의 조합: 필요할 때는 텍스트 레이블과 함께 사용되어 아이콘의 기능을 더 명확하게 설명할 수 있습니다. 예를 들어, ‘저장’ 아이콘과 ‘저장’이라는 텍스트를 함께 배치하여 사용자가 버튼의 기능을 쉽게 인지하도록 할 수 있습니다.
6. 상호작용성이 높은 요소: Icon Button은 클릭 가능한 요소로, 주로 사용자가 자주 접근하는 기능에 사용됩니다. 예를 들어, 웹사이트에서 소셜 미디어 공유 버튼이나 모바일 앱의 하단 네비게이션 메뉴에서 쉽게 찾아볼 수 있습니다.
7. 다양한 배치: Icon Button은 앱이나 웹 페이지에서 다양한 위치에 배치될 수 있습니다. 예를 들어, 툴바, 카드 컴포넌트의 액션 버튼, 네비게이션 메뉴 등에 사용되며, 다양한 사용 사례에 맞춰 활용됩니다.
8. 명확한 대비: 아이콘과 배경색 사이의 명확한 대비가 중요합니다. 아이콘 버튼이 잘 보이도록 대비를 높여 사용자에게 버튼의 존재를 인식시키고, 접근성을 높이는 데 도움이 됩니다.
Lists
Menus는 사용자 인터페이스에서 여러 옵션이나 기능을 제공하는 컴포넌트입니다. 사용자가 특정 작업을 선택하거나 설정을 변경할 수 있게 하며, 다양한 기능이나 페이지로의 접근을 간편하게 만들어줍니다. Menus는 웹, 모바일 앱, 데스크톱 애플리케이션 등에서 광범위하게 사용되며, 다음과 같은 특징을 가집니다:
1. 옵션의 리스트 제공: Menus는 일반적으로 사용자가 선택할 수 있는 여러 옵션을 목록 형태로 제공합니다. 예를 들어, 파일 메뉴는 ‘새로 만들기’, ‘열기’, ‘저장하기’ 등 여러 옵션을 제공할 수 있습니다.
2. 트리거 요소: Menus는 보통 버튼이나 아이콘 등 사용자가 클릭하거나 터치했을 때 활성화되는 트리거 요소에 의해 열립니다. 예를 들어, 햄버거 메뉴 아이콘을 클릭하면 사이드 메뉴가 나타나거나, 드롭다운 화살표를 클릭하면 추가 옵션이 나타납니다.
3. 드롭다운 형태: Menus의 일반적인 형태는 드롭다운 메뉴입니다. 이는 트리거 요소를 클릭하거나 터치했을 때, 아래로 펼쳐지는 방식으로 옵션 목록을 보여줍니다. 드롭다운 메뉴는 단순하면서도 컴팩트한 옵션 제공에 유리합니다.
4. 컨텍스트 메뉴: 사용자가 특정 요소나 영역을 우클릭하거나 길게 누를 때 나타나는 메뉴로, 해당 컨텍스트와 관련된 옵션을 제공합니다. 예를 들어, 파일을 우클릭했을 때 ‘이름 변경’, ‘삭제’, ‘복사’ 등의 옵션이 포함된 메뉴가 나타날 수 있습니다.
5. 사이드바 메뉴: 웹사이트나 앱에서 왼쪽이나 오른쪽에 고정되어 있는 사이드바 형태의 메뉴입니다. 이 메뉴는 보통 네비게이션 용도로 사용되며, 다양한 페이지나 섹션으로 쉽게 이동할 수 있게 해줍니다. 특히, 대시보드나 복잡한 애플리케이션에서 자주 사용됩니다.
6. 상태 표시와 선택 가능성: Menus는 선택된 항목에 대해 시각적인 표시를 제공합니다. 예를 들어, 현재 활성화된 옵션을 하이라이트하여 사용자가 현재 상태를 쉽게 파악할 수 있게 합니다. 메뉴 항목이 선택되면 해당 상태를 유지하거나 변경할 수 있습니다.
7. 아이콘과 텍스트 조합: 메뉴 항목은 단순한 텍스트뿐만 아니라, 아이콘과 결합하여 옵션의 의미를 더 직관적으로 전달할 수 있습니다. 예를 들어, ‘복사’ 항목 옆에 복사 아이콘을 배치하면 사용자가 더 쉽게 그 기능을 이해할 수 있습니다.
8. 메뉴 그룹 및 섹션 구분: 긴 메뉴는 그룹으로 나누어 섹션 구분을 할 수 있습니다. 이를 통해 사용자가 관련된 옵션들을 묶어서 볼 수 있으며, 시각적으로 더욱 정돈된 느낌을 줍니다. 예를 들어, ‘파일’ 메뉴 안에 ‘저장’, ‘다른 이름으로 저장’ 등을 그룹화할 수 있습니다.
9. 접근성: Menus는 키보드 내비게이션, 스크린 리더 지원 등을 통해 접근성을 고려하여 설계되어야 합니다. Tab 키를 이용한 메뉴 항목 간 이동이나, 키보드 단축키를 통한 액세스를 지원하면 더 나은 접근성을 제공합니다.
10. 상호작용 애니메이션: 메뉴가 열리거나 닫힐 때 부드러운 전환 애니메이션을 사용하면 사용자 경험이 향상됩니다. 예를 들어, 드롭다운 메뉴가 스르륵 내려오거나 사이드바 메뉴가 슬라이드로 열리는 효과를 주면 더 자연스러운 느낌을 줄 수 있습니다.
11. 모바일 대응성: 모바일 환경에서는 화면 크기가 작기 때문에, Menus는 접히거나, 풀스크린으로 확장되는 형태로 나타납니다. 햄버거 메뉴 아이콘을 이용한 모바일 네비게이션 메뉴가 대표적인 예입니다. 이는 화면 공간을 효율적으로 사용하도록 설계되었습니다.
12. 다단계 메뉴: 하위 메뉴나 서브메뉴를 포함하는 형태로, 사용자가 메뉴에서 세부 옵션을 선택할 수 있도록 합니다. 예를 들어, ‘설정’ 메뉴를 선택하면 ‘개인 정보’, ‘알림 설정’, ‘계정’ 등의 하위 메뉴가 나타날 수 있습니다.
Menus
Navigation Bars는 웹사이트나 애플리케이션에서 사용자가 다른 페이지나 섹션으로 쉽게 이동할 수 있도록 도와주는 중요한 UI 컴포넌트입니다. 사용자 경험을 향상시키기 위해 일관성과 가시성을 갖춘 네비게이션 구조를 제공하며, 다음과 같은 주요 특징을 갖습니다:
1. 일관된 위치: Navigation Bars는 일반적으로 화면 상단, 하단, 또는 측면에 고정된 위치에 자리 잡습니다. 상단에 배치되는 경우가 가장 흔하며, 사용자들이 쉽게 발견하고 사용할 수 있도록 합니다. 위치가 일관되면 사용자가 앱이나 웹사이트를 탐색할 때 혼란을 줄일 수 있습니다.
2. 핵심 섹션으로의 접근성 제공: Navigation Bars는 웹사이트나 앱의 핵심 페이지나 섹션으로 바로 이동할 수 있는 링크들을 포함하고 있습니다. 예를 들어, ‘홈’, ‘제품’, ‘서비스’, ‘연락처’ 같은 메뉴들이 대표적입니다.
3. 브랜드 로고 포함: Navigation Bars에는 종종 브랜드 로고가 포함되며, 이 로고는 일반적으로 클릭하면 홈페이지로 이동할 수 있습니다. 이는 사용자에게 브랜드 정체성을 강화하고, 직관적인 내비게이션을 제공하는 역할을 합니다.
4. 반응형 디자인: Navigation Bars는 다양한 화면 크기에 맞춰 반응형으로 설계됩니다. 데스크톱 화면에서는 전체 메뉴를 펼쳐 보여주고, 모바일 화면에서는 햄버거 메뉴 아이콘으로 축소하여 드롭다운 형태로 표시하는 방식이 대표적입니다. 이를 통해 공간을 효율적으로 사용하면서도 탐색 기능을 유지할 수 있습니다.
5. 상태 표시와 하이라이트: 사용자가 현재 어떤 페이지에 있는지를 표시하기 위해 Navigation Bars는 활성화된 메뉴 항목을 하이라이트합니다. 색상 변화, 밑줄, 또는 배경색 변경 등을 통해 현재 페이지를 명확하게 나타냅니다. 이를 통해 사용자는 자신의 위치를 쉽게 파악할 수 있습니다.
6. 드롭다운 및 서브메뉴 지원: 다단계 메뉴 구조를 지원하여 사용자가 하위 페이지나 세부 섹션에 접근할 수 있게 합니다. 예를 들어, ‘제품’ 메뉴를 클릭하면 ‘신제품’, ‘베스트셀러’, ‘세일 중’ 등의 서브메뉴가 드롭다운 형태로 나타납니다. 이러한 드롭다운 메뉴는 복잡한 사이트 구조를 깔끔하게 정리하는 데 유용합니다.
7. 상호작용 가능한 아이콘: Navigation Bars에는 텍스트 링크뿐 아니라 아이콘을 포함할 수 있습니다. 예를 들어, 검색, 쇼핑 카트, 알림, 사용자 프로필 아이콘 등이 포함될 수 있으며, 직관적인 탐색을 제공합니다.
8. 스크롤에 반응하는 동작: 사용자가 페이지를 스크롤할 때 Navigation Bars가 자동으로 숨겨지거나 고정(fixed)되어 따라오는 방식으로 동작할 수 있습니다. 이러한 기능은 스크롤에 따라 네비게이션 바의 노출을 조절하여 콘텐츠를 최대한으로 활용하거나, 언제든지 쉽게 접근할 수 있게 합니다.
9. 사용자 인증 관련 기능: 로그인, 로그아웃, 사용자 프로필 등의 사용자 인증과 관련된 메뉴를 포함할 수 있습니다. 이는 사용자가 자신의 계정에 접근하거나, 설정을 변경할 수 있는 통로를 제공합니다.
10. 간결한 정보 구조: Navigation Bars는 너무 많은 메뉴를 나열하지 않고, 핵심적인 몇 가지 링크만 제공하여 간결한 정보를 전달합니다. 복잡한 메뉴는 드롭다운이나 더보기(…) 옵션을 통해 숨길 수 있습니다. 이를 통해 사용자에게 혼란을 줄이고, 탐색 경험을 단순화할 수 있습니다.
11. 다양한 형태:
• 탑 네비게이션: 화면의 맨 위에 위치하며, 전통적인 웹사이트와 앱에서 널리 사용됩니다.
• 사이드 네비게이션(Sidebar): 화면의 왼쪽이나 오른쪽에 위치하며, 특히 대시보드나 관리 패널에서 자주 사용됩니다. 사용자가 많은 메뉴 항목에 쉽게 접근할 수 있는 장점이 있습니다.
Navigation Bars
Navigation Drawers는 모바일 애플리케이션과 웹사이트에서 주로 사용되는 사이드 메뉴 형태의 UI 컴포넌트입니다. 화면의 측면에서 슬라이드되어 나타나는 방식으로, 사용자가 다양한 섹션이나 페이지로 쉽게 이동할 수 있도록 돕습니다. 다음은 Navigation Drawers의 주요 특징입니다:
1. 슬라이드 방식: Navigation Drawers는 일반적으로 화면의 왼쪽이나 오른쪽에서 슬라이드되어 나타나며, 사용자가 메뉴 아이콘(예: 햄버거 아이콘)을 클릭하거나 스와이프 동작을 통해 열고 닫을 수 있습니다. 이를 통해 화면 공간을 효율적으로 활용하면서 메뉴를 제공할 수 있습니다.
2. 화면의 대부분을 덮음: Navigation Drawers는 열리면 화면의 일부 또는 대부분을 덮을 수 있습니다. 특히 모바일 앱에서 사용될 때는 전체 화면을 덮을 수 있어 사용자가 다른 섹션으로 이동할 때 명확한 전환을 제공합니다. 반면, 데스크톱에서는 종종 화면의 일부분만을 덮어, 사용자에게 현재 페이지의 일부가 여전히 보이도록 합니다.
3. 숨겨진 메뉴 제공: Navigation Drawers는 기본적으로 콘텐츠를 숨겨 놓고 필요할 때만 표시하기 때문에, 화면 공간을 절약하는 데 유리합니다. 사용자가 자주 사용하는 메뉴 항목을 깔끔하게 숨길 수 있으며, 필요한 순간에만 드로어를 열어 추가적인 옵션을 확인할 수 있습니다.
4. 계층적 구조와 섹션 나누기: 드로어 내부에는 계층적 구조를 포함할 수 있어, 사용자에게 상위 메뉴와 하위 메뉴를 구분하여 제공할 수 있습니다. 예를 들어, ‘설정’ 메뉴를 선택하면 ‘일반’, ‘알림’, ‘계정’ 등의 하위 메뉴가 드러나는 방식으로 구성할 수 있습니다.
5. 아이콘과 텍스트의 조합: 드로어 내부의 각 항목은 아이콘과 텍스트로 구성되어 있습니다. 아이콘은 각 메뉴 항목의 기능을 직관적으로 전달하며, 텍스트는 해당 기능의 구체적인 내용을 설명합니다. 이는 사용자에게 기능을 쉽게 이해할 수 있도록 돕습니다.
6. 콘텐츠와의 자연스러운 통합: 드로어가 열릴 때 콘텐츠가 드로어에 의해 밀려나는 방식 또는 위에 겹쳐지는 방식으로 열릴 수 있습니다. 이는 사용자 경험을 부드럽게 하며, 콘텐츠와 드로어의 전환을 자연스럽게 만듭니다.
7. 사용자 정보 및 프로필 영역: 많은 경우, 드로어의 상단 부분에는 사용자의 프로필 정보(프로필 사진, 이름, 이메일 등)가 표시됩니다. 이는 사용자가 자신의 계정 정보를 빠르게 확인하고, 프로필 설정이나 로그아웃 같은 옵션에 접근할 수 있도록 합니다.
8. 고정형 vs 임시형:
• 고정형 드로어(Persistent Drawer): 큰 화면에서 주로 사용되며, 항상 열려 있어 네비게이션 요소가 화면에 지속적으로 나타나는 형태입니다. 데스크톱 애플리케이션에서 사이드바처럼 작동하며, 대시보드 레이아웃에 적합합니다.
• 임시형 드로어(Temporary Drawer): 모바일 환경에서 주로 사용되며, 필요할 때만 슬라이드되어 나타납니다. 사용자가 메뉴를 탐색할 때 화면 대부분을 덮었다가, 메뉴 선택 후 자동으로 닫히는 방식입니다.
9. 상호작용 피드백: Navigation Drawers는 사용자가 메뉴 항목을 클릭할 때 색상 변화나 하이라이트 등을 통해 상호작용 피드백을 제공합니다. 이를 통해 사용자는 자신이 선택한 메뉴를 명확하게 인지할 수 있습니다.
10. 다단계 메뉴 지원: 복잡한 앱 구조를 가진 경우, 드로어는 서브메뉴를 포함할 수 있어 다단계 네비게이션을 지원합니다. 예를 들어, ‘설정’ 메뉴를 선택하면 하위 메뉴가 펼쳐지며 세부 설정 항목들이 나타날 수 있습니다.
11. 접근성 고려: 드로어는 접근성을 고려하여 설계되어야 합니다. 스크린 리더와의 호환성, 키보드 내비게이션 지원, 그리고 메뉴 항목 간의 포커스 이동을 통해 접근성을 높일 수 있습니다. 특히 모바일에서는 스와이프 제스처를 통해 쉽게 열리고 닫히는 기능을 제공하여 사용자 편의성을 높입니다.
12. 애니메이션 효과: 드로어가 열리고 닫힐 때 자연스러운 애니메이션을 제공하면 사용자 경험이 향상됩니다. 부드러운 슬라이드 애니메이션은 전환이 더 직관적으로 느껴지게 하며, 사용자가 메뉴가 나타나고 사라지는 과정을 이해하기 쉽게 만듭니다.
Navigation Drawers
Navigation Rail은 특히 모바일과 태블릿에서 사용되는 네비게이션 컴포넌트로, 화면 측면에 위치하여 앱의 주요 섹션 간의 이동을 돕는 역할을 합니다. Navigation Drawer와 비슷한 역할을 하지만, 더 슬림하고 항상 표시되는 형태로, 큰 화면에서도 효율적으로 작동합니다. Navigation Rail의 주요 특징은 다음과 같습니다:
1. 화면 측면에 고정: Navigation Rail은 화면의 왼쪽이나 오른쪽 가장자리에 위치하며, 사용자가 주요 페이지나 섹션으로 쉽게 이동할 수 있도록 돕습니다. 이로 인해 사용자는 스크롤하거나 화면을 스와이프할 필요 없이 주요 네비게이션 옵션에 쉽게 접근할 수 있습니다.
2. 슬림한 디자인: Navigation Rail은 사이드바보다 좁고, Navigation Drawer보다 일관되게 화면에 나타나는 특징이 있습니다. 덕분에 사용자는 메뉴를 항상 볼 수 있으며, 앱의 콘텐츠와 네비게이션 사이의 전환이 더욱 빠르고 직관적입니다.
3. 아이콘 기반: Navigation Rail은 주요 섹션을 나타내기 위해 아이콘을 사용합니다. 각 아이콘은 앱의 주요 섹션을 상징하며, 텍스트 레이블과 함께 사용할 수도 있습니다. 텍스트 레이블은 화면 크기에 따라 기본적으로 숨겨지거나, 선택된 항목에만 표시될 수 있습니다.
4. 선택된 항목 하이라이트: 현재 활성화된 섹션은 아이콘 주변의 색상 변화나 하이라이트를 통해 표시됩니다. 이는 사용자가 현재 위치한 페이지나 섹션을 명확히 파악할 수 있도록 도와줍니다.
5. 적응형 디자인: Navigation Rail은 반응형 디자인을 지원합니다. 작은 화면에서는 Navigation Drawer로 전환될 수 있고, 큰 화면에서는 Navigation Rail로 고정되어 표시됩니다. 이로 인해 사용자는 화면 크기와 관계없이 일관된 네비게이션 경험을 얻을 수 있습니다.
6. 5-7개의 주요 항목: Navigation Rail은 주로 5~7개의 주요 네비게이션 항목을 지원하도록 설계됩니다. 이는 사용자가 주요 기능에 쉽게 접근할 수 있도록 하고, 지나치게 많은 선택지를 줄여 탐색의 복잡성을 줄입니다.
7. Floating Action Button(FAB)과의 통합: Navigation Rail은 Floating Action Button(FAB)을 통합할 수 있는 구조를 가지고 있습니다. FAB은 Navigation Rail에 맞춰 중앙이나 측면에 부착되어 중요한 액션을 강조합니다. 이를 통해 네비게이션과 주요 작업의 접근성을 동시에 제공할 수 있습니다.
8. 세로형 레이아웃: Navigation Rail은 화면의 세로 공간을 사용하여 레이아웃됩니다. 세로형 레이아웃 덕분에 주요 섹션들이 순차적으로 배치되어 있고, 이는 화면의 넓이를 차지하지 않아 콘텐츠 영역을 최대한 활용할 수 있게 합니다.
9. 항상 가시성 유지: Navigation Drawer와 달리, Navigation Rail은 항상 화면에 표시되므로 사용자가 언제든지 쉽게 접근할 수 있습니다. 이는 특히 태블릿이나 큰 화면에서 사용자가 메뉴를 반복적으로 열고 닫는 불편을 줄이는 데 유리합니다.
10. 상태 변화 애니메이션: 사용자가 메뉴 항목을 선택할 때마다, 선택된 아이콘에 시각적 애니메이션이 추가되어 선택 여부를 명확히 알립니다. 이러한 애니메이션은 전환을 부드럽게 만들어 사용자 경험을 더욱 향상시킵니다.
11. 접근성 강화: Navigation Rail은 키보드와 스크린 리더와의 호환성을 염두에 두고 설계됩니다. Tab 키를 통한 포커스 이동, 음성 안내 등을 통해 사용자 접근성을 높이며, 다양한 사용자 그룹이 쉽게 탐색할 수 있도록 돕습니다.
12. 콘텐츠와의 통합감: Navigation Rail은 콘텐츠와 자연스럽게 통합되어 사용자가 주요 메뉴에 접근하면서도 콘텐츠를 방해하지 않도록 설계됩니다. 이를 통해 네비게이션 요소가 시각적으로 가벼워지고, 앱의 레이아웃이 더욱 정돈된 느낌을 줍니다.
Navigation Rail
Progress Indicators는 사용자 인터페이스에서 진행 상태를 시각적으로 표시하는 요소로, 사용자가 현재 작업의 완료 상태나 남은 시간을 쉽게 파악할 수 있게 돕습니다. 로딩, 다운로드, 처리 중인 작업 등 다양한 상황에서 사용되며, 다음과 같은 주요 특징을 갖습니다:
1. 형태에 따른 분류
• 선형(Linear) Progress Indicator: 직선형 막대 그래프 형태로 진행률을 나타내는 방식입니다. 보통 길이가 길어질수록 작업이 완료됨을 나타내며, 막대의 길이와 색상이 진행률을 시각적으로 보여줍니다. 다운로드 진행 상태나 파일 전송 중에 자주 사용됩니다.
• 원형(Circular) Progress Indicator: 원형 또는 도넛 형태의 진행 표시기로, 원의 일부분이 채워지며 진행 상태를 나타냅니다. 특히 모바일 앱에서 많이 사용되며, 화면의 한 부분을 절약하면서 진행 상태를 직관적으로 전달합니다.
2. 명시적(Determinate) vs. 불명시적(Indeterminate)
• 명시적(Determinate): 진행 상태나 남은 시간을 명확하게 알 수 있을 때 사용됩니다. 예를 들어, 파일 다운로드 진행률이 50%일 때, 선형 또는 원형 프로그레스 바에 50%만큼 채워진 상태로 표시됩니다. 이 방식은 사용자가 얼마나 더 기다려야 하는지 예측할 수 있게 합니다.
• 불명시적(Indeterminate): 진행 상태나 완료 시간을 알 수 없을 때 사용됩니다. 로딩 상태가 끝날 시점을 예측할 수 없는 경우에 사용하며, 진행 막대나 원형이 반복적으로 애니메이션되면서 진행 중임을 알려줍니다. 예를 들어, 서버로부터 데이터를 가져오는 동안 상태를 알 수 없는 경우에 사용됩니다.
3. 시각적 피드백 제공:
• Progress Indicators는 작업이 진행 중임을 시각적으로 전달하여 사용자가 기다려야 하는 상태를 명확하게 알 수 있게 합니다. 이를 통해 사용자는 시스템이 멈추지 않고 작업이 진행 중임을 인지하게 되어 불편함을 줄일 수 있습니다.
4. 작업의 완료 상태:
• Progress Indicator는 작업이 완료되면 변화하는 상태를 통해 사용자에게 알림을 줍니다. 예를 들어, 100% 완료 시 색상이 변경되거나 ‘완료’라는 텍스트가 나타나 사용자가 다음 단계로 진행할 수 있음을 알려줍니다.
5. 애니메이션 효과:
• Circular 및 Linear Progress Indicators는 애니메이션을 통해 부드러운 진행을 보여줍니다. 이 애니메이션은 사용자가 진행 상황을 이해하기 쉽게 하며, 불명시적 프로그레스의 경우, 반복적인 애니메이션을 통해 작업이 여전히 진행 중임을 전달합니다.
6. 색상과 테마:
• Progress Indicators의 색상은 상태를 반영할 수 있습니다. 예를 들어, 녹색은 성공적인 진행, 노란색은 주의, 빨간색은 오류 상태를 나타낼 수 있습니다. 이는 사용자가 현재 상황을 시각적으로 빠르게 파악할 수 있게 도와줍니다.
Progress Indicators
Radio Buttons는 사용자 인터페이스에서 여러 옵션 중 하나만 선택할 수 있게 하는 선택형 입력 컴포넌트입니다. 사용자가 제공된 여러 옵션 중에서 정확히 하나의 옵션을 선택하도록 제약하는 경우에 유용하며, 다음과 같은 주요 특징이 있습니다:
1. 단일 선택 제약
• Radio Buttons는 사용자가 여러 옵션 중 하나만 선택할 수 있도록 제한합니다. 이를 통해 사용자는 명확하게 하나의 선택지를 선택해야 하며, 여러 개의 옵션을 동시에 선택할 수 없습니다. 이는 서로 배타적인 선택지(예: 성별 선택, 배송 방법 선택)에서 유용합니다.
2. 그룹으로 사용
• Radio Buttons는 일반적으로 그룹으로 사용되며, 각 그룹 내에서 하나의 선택지만 가능하게 됩니다. 동일한 그룹 내에 속한 Radio Buttons는 동일한 질문이나 항목에 대한 여러 선택지를 나타냅니다. 이 그룹화는 HTML과 같은 웹 개발에서는 name 속성을 통해 이루어집니다.
3. 원형 인터페이스
• Radio Buttons는 작은 원(circle) 형태로 나타나며, 선택된 경우 중심에 점(dot)이 나타납니다. 이러한 시각적 특징은 사용자가 선택 상태를 쉽게 인식할 수 있도록 도와줍니다. 선택되지 않은 상태에서는 비어 있는 원으로 보이며, 선택된 상태에서는 원 안에 점이 나타납니다.
4. 텍스트 레이블과의 결합
• 각 Radio Button에는 텍스트 레이블이 함께 제공되어 선택지가 무엇을 의미하는지 설명합니다. 이 텍스트 레이블은 사용자가 선택하려는 옵션의 의미를 쉽게 이해할 수 있게 돕습니다. 예를 들어, “아침”, “점심”, “저녁”과 같은 선택지에 Radio Buttons를 사용하면 사용자는 하루의 특정 시간을 선택할 수 있습니다.
5. 사용자의 선택 시 즉시 반응
• Radio Button은 클릭하거나 탭할 때 바로 선택 상태가 변경되며, 이전에 선택된 항목은 자동으로 선택 해제됩니다. 사용자가 선택한 내용은 즉시 반영되므로 추가 확인 없이 바로 사용자의 의도를 반영할 수 있습니다.
6. 전형적인 사용 사례
• Radio Buttons는 사용자에게 명확한 단일 선택을 요구할 때 사용됩니다. 예를 들어:
• 성별 선택: “남성”, “여성”, “기타”
• 배송 방법: “일반 배송”, “익일 배송”, “빠른 배송”
Radio Buttons
Badges are used to convey dynamic information, such as a count or status. A badge can include text, labels, or numbers.
배지는 개수나 상태와 같은 동적 정보를 전달하는 데 사용됩니다. 배지에는 텍스트, 레이블 또는 숫자를 포함할 수 있습니다.
Badges show notifications, counts, or status information on navigation items and icons
배지는 탐색 항목 및 아이콘에 알림, 개수 또는 상태 정보를 표시합니다.
Badges are used to indicate a notification, item count, or other information relating to a navigation destination. They are placed on the ending edge of icons, typically within other components.
배지는 알림, 항목 수 또는 내비게이션 목적지와 관련된 기타 정보를 표시하는 데 사용됩니다. 배지는 일반적으로 다른 구성 요소 내에서 아이콘의 끝 가장자리에 배치됩니다.
Badges are most commonly used within other components, such as navigation bar, navigation rail, top app bars, and tabs.
배지는 탐색 모음, 탐색 레일, 앱 상단 바 및 탭과 같은 다른 구성 요소 내에서 가장 일반적으로 사용됩니다.
Badges
Bottom app bars display navigation and key actions at the bottom of mobile and tablet screens
하단 앱 바는 모바일 및 태블릿 화면 하단에 탐색 및 주요 작업을 표시합니다.
•
Use bottom app bars to draw attention to important actions 하단 앱 바를 사용하여 중요한 작업에 주의를 끌기
•
Can contain up to four icon buttons and a floating action button (FAB) 최대 4개의 아이콘 버튼과 플로팅 액션 버튼(FAB)을 포함할 수 있습니다.
•
Bottom app bar layout and contents can change on different screens of an app 앱의 여러 화면에서 하단 앱 바 레이아웃과 콘텐츠를 변경할 수 있습니다.
•
Easy to reach on a mobile device
Bottom app bars provide access to up to four actions, including the   floating action button (FAB).
하단 앱 바에서는 플로팅 액션 버튼(FAB)을 포함하여 최대 4개의 액션에 액세스할 수 있습니다.
Bottom app bars should be used for
•
Mobile devices only(모바일 디바이스 전용)
•
Screens with two to five actions (2~5개의 동작이 있는 화면)
Bottom app bars
Bottom sheets show secondary content anchored to the bottom of the screen
하단 시트에는 화면 하단에 고정된 보조 콘텐츠가 표시됩니다.
•
Use bottom sheets in compact and medium window sizes 소형 및 중형 창 크기에서 하단 시트 사용
•
Two types: standard and modal
•
Content should be additional or secondary (not the app’s main content) 콘텐츠는 앱의 메인 콘텐츠가 아닌 추가 또는 보조 콘텐츠여야 합니다.
•
Bottom sheets can be dismissed in order to interact with the main content 메인 콘텐츠와 상호 작용하기 위해 하단 시트를 해제할 수 있습니다.
Bottom sheets display supplementary content and actions on a mobile screen.
하단 시트는 모바일 화면에서 보충 콘텐츠와 작업을 표시합니다.
Bottom sheets are a versatile component that can contain a wide variety of information and layouts, including menu items (in list or grid layouts), actions, and supplemental content.
하단 시트는 메뉴 항목(목록 또는 그리드 레이아웃), 작업, 추가 콘텐츠 등 다양한 정보와 레이아웃을 포함할 수 있는 다용도 구성 요소입니다.
Bottom Sheets
Buttons let people take action and make choices with one tap
버튼을 통해 탭 한 번으로 조치를 취하고 선택할 수 있습니다.
Buttons communicate actions that users can take.
버튼은 사용자가 수행할 수 있는 작업을 전달합니다.
Buttons are just one option for representing actions in a product and shouldn’t be overused. Too many buttons on a screen disrupts the visual hierarchy.
버튼은 제품에서 작업을 나타내는 하나의 옵션일 뿐이므로 과도하게 사용해서는 안 됩니다. 화면에 버튼이 너무 많으면 시각적 계층 구조가 흐트러집니다.
Buttons
Cards display content and actions about a single subject
카드에는 단일 주제에 대한 콘텐츠와 작업이 표시됩니다.
Use a card to display content and actions on a single topic. 카드를 사용하여 단일 주제에 대한 콘텐츠와 작업을 표시합니다.
Cards should be easy to scan for relevant and actionable information. Elements like text and images, should be placed on cards in a way that clearly indicates hierarchy.
카드는 관련성 있고 실행 가능한 정보를 쉽게 스캔할 수 있어야 합니다. 텍스트 및 이미지와 같은 요소는 카드에 계층 구조를 명확하게 나타내는 방식으로 배치해야 합니다.
Cards can serve as entry points into deeper levels of detail or navigation, such as a music album or details on an upcoming vacation.
카드는 음악 앨범이나 다가오는 휴가에 대한 세부 정보 등 더 깊은 수준의 세부 정보나 탐색을 위한 진입점 역할을 할 수 있습니다.
•
Card text and images show a clear hierarchy 카드 텍스트와 이미지로 명확한 계층 구조 표시
•
Use cards to display related information on a single subject 카드를 사용하여 단일 주제에 대한 관련 정보를 표시합니다.
Cards can be displayed together in a grid, vertical list, or carousel.
Cards
Carousels show a collection of items that can be scrolled on and off the screen
캐러셀은 화면에서 스크롤할 수 있는 항목 모음을 표시합니다.
•
Contain visual items like images or video, along with optional label text 이미지나 동영상과 같은 시각적 항목과 라벨 텍스트(선택 사항)를 포함할 수 있습니다.
•
Four layouts: Multi-browse, uncontained, hero, and full-screen
•
Layouts can be start-aligned or center-aligned 레이아웃은 시작 정렬 또는 중앙 정렬 가능
•
Item visuals have a parallax effect when scrolled 스크롤할 때 항목 비주얼에 시차 효과 적용
•
Items change size as they move through the carousel 캐러셀을 이동하면서 항목 크기가 변경됩니다.
Carousels display a scrollable list of items. Carousel items emphasize visuals, but can also contain brief text that adapts to the item size.
캐러셀은 스크롤 가능한 항목 목록을 표시합니다. 캐러셀 항목은 시각적인 요소를 강조하지만 항목 크기에 맞는 간단한 텍스트를 포함할 수도 있습니다.
•
Multi-browse : 한 번에 많은 시각적 항목(예: 사진) 탐색, 동적 디자인
•
Uncontained : 고도로 사용자 정의되거나 텍스트가 많은 캐러셀, 이미지와 텍스트가 쌓인 캐러셀, 기존 캐러셀 동작
•
Hero: 매우 큰 시각적 항목(예: 영화 또는 추천 앱) 스포트라이트 표시
Carousel
Checkboxes let users select one or more items from a list, or turn an item on or off
확인란을 통해 사용자는 목록에서 하나 이상의 항목을 선택하거나 항목을 켜거나 끌 수 있습니다.
•
Use checkboxes (instead of switches or radio buttons) if multiple options can be selected from a list 목록에서 여러 옵션을 선택할 수 있는 경우 스위치나 라디오 버튼 대신 체크박스를 사용합니다.
•
Label should be scannable 라벨은 스캔할 수 있어야 합니다.
•
Selected items are more prominent than unselected items 선택된 항목이 선택되지 않은 항목보다 더 눈에 잘 띄어야 합니다.

Usage

•
Select one or more options from a list 목록에서 하나 이상의 옵션 선택
•
Present a list containing sub-selections 하위 선택 항목이 포함된 목록 제시
•
Turn an item on or off in a desktop environment 데스크톱 환경에서 항목 켜기 또는 끄기
•
Visually group similar options together 비슷한 옵션을 시각적으로 그룹화하기
Checkboxes should be used instead of switches if multiple, related options can be selected from a list. Checkboxes visually group similar items effectively and take up less space than switches.
Checkboxes
Chips help people enter information, make selections, filter content, or trigger actions
칩은 사람들이 정보를 입력하고, 선택하고, 콘텐츠를 필터링하거나, 작업을 트리거하는 데 도움이 됩니다.
•
Use chips to show options for a specific context 칩을 사용하여 특정 상황에 맞는 옵션 표시하기
•
Four types: assist, filter, input, and suggestion
•
Chip elevation defaults to 0 but can be elevated if they need more visual separation

Usage

Chips help people enter information, make selections, filter content, or trigger actions. They're best used to help users accomplish their current task faster and easier.
칩은 사람들이 정보를 입력하고, 선택하고, 콘텐츠를 필터링하거나, 작업을 트리거하는 데 도움이 됩니다. 칩은 사용자가 현재 작업을 더 빠르고 쉽게 완료할 수 있도록 돕는 데 가장 잘 사용됩니다.

Chips aren’t buttons(칩은 버튼이 아니다)

Chips and buttons are similar; they both provide visual cues to prompt users to take actions and make selections.
칩과 버튼은 사용자에게 행동을 취하고 선택하도록 유도하는 시각적 단서를 제공한다는 점에서 비슷합니다.
However, while buttons are expected to appear consistently and with familiar calls to action, chips should be dynamic to the situation, and appear as a group of interactive elements. 그러나 버튼은 익숙한 클릭 유도 문안과 함께 일관되게 표시되어야 하는 반면, 칩은 상황에 따라 동적으로 표시되어야 하며 대화형 요소의 그룹으로 표시되어야 합니다.
Chips
Date pickers let people select a date, or a range of dates
날짜 선택기를 사용하면 사람들이 날짜 또는 날짜 범위를 선택할 수 있습니다.
•
Date pickers can display past, present, or future dates 날짜 선택기는 과거, 현재 또는 미래 날짜를 표시할 수 있습니다.
•
Three types: docked, modal, modal input 세 가지 유형: 도킹, 모달, 모달 입력
•
Clearly indicate important dates, such as current and selected days 현재 및 선택한 날과 같은 중요한 날짜를 명확하게 표시하세요.
•
Follow common patterns, like a calendar view 캘린더 보기와 같은 일반적인 패턴을 따르세요.

Docked date picker

Modal date picker

Modal date input

Date Picker
Dialogs provide important prompts in a user flow. They can require an action, communicate information for making decisions, or help users accomplish a focused task.
대화 상자는 사용자 흐름에서 중요한 프롬프트를 제공합니다. 작업을 요구하거나, 의사 결정을 위한 정보를 전달하거나, 사용자가 집중적인 작업을 수행할 수 있도록 도와줍니다.
•
Use dialogs to make sure users act on information 대화 상자를 사용하여 사용자가 정보에 따라 행동하도록 유도하기
•
Two types: basic and full-screen
•
Should be dedicated to completing a single task 단일 작업을 완료하는 데만 사용해야 합니다.
•
Can also display information relevant to the task 작업과 관련된 정보를 표시할 수도 있습니다.
•
Commonly used to confirm high-risk actions like deleting progress 일반적으로 진행 상황 삭제와 같은 고위험 작업을 확인하는 데 사용됩니다.

usage

A dialog is a modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.
대화상자는 중요한 정보를 제공하거나 결정을 요청하기 위해 앱 콘텐츠 앞에 표시되는 모달 창입니다. 대화 상자가 표시되면 모든 앱 기능이 비활성화되며 확인, 해제 또는 필요한 조치가 취해질 때까지 화면에 남아 있습니다.
Dialogs are purposefully interruptive, so they should be used sparingly. A less disruptive alternative is to use a menu, which provides options without interrupting a user’s experience.
Dialogs
•
Use search bars and views for navigating a product through search queries
•
Search bars can display suggested keywords or phrases as the user types
•
Always display results in a search view
•
Search bars can include a leading Search icon and an optional trailing icon
Search is a navigation method that allows people to quickly find information across an app. Users input a query into the search bar or text field of the search view and then see related results.
Search view, which can display dynamic suggestions, is the focused state of search bar.
Search

link

Copy link
•
Segmented buttons can contain icons, label text, or both
•
Two types: single-select and multi-select
•
Use for simple choices between two to five items (for more items or complex choices, use chips)
Segmented Buttons
•
Use side sheets to provide optional content and actions without interrupting the main content
•
Two types: standard and modal
•
Users can navigate to another region within the sheet
•
Side sheets can contain a back icon for navigation
Side Sheets
•
Four configurations: Continuous, discrete, centered, range selection
•
Sliders should present the full range of choices that are available
•
The slider value should immediately take effect
Sliders
•
Time pickers are modal and cover the main content
•
Two types: dial and input
•
Users can select hours, minutes, or periods of time
•
Make sure time can easily be selected by hand on a mobile device
Time Picker
•
Use tooltips to add additional context to a button or other UI element
•
Two types: plain and rich
•
Use plain tooltips to describe elements or actions of icon buttons
•
Use rich tooltips to provide more details, like describing the value of a feature
•
Rich tooltips can include an optional title, link, and buttons
Tooltips
•
Contains a title and actions related to the current screen
•
Four types: center-aligned, small, medium, and large
•
On scroll, apply a container fill color to separate app bar from body content
•
Top app bars have the same width as the device window
Top app bars