본문 바로가기

분류 전체보기182

Google Material Components 컴포넌트(Components)컴포넌트는 사용자 인터페이스를 구성하는 인터랙티브한 기본 요소이다. 목적에 따라 액션, 컨테인먼트, 커뮤니케이션, 내비게이션, 선택, 텍스트 입력과 같은 카테고리로 분류할 수 있다. Button groups → 버튼 그룹: 버튼 그룹은 여러 버튼을 정리하고 버튼 간 상호작용을 추가한다Buttons → 버튼: 버튼은 UI에서 대부분의 액션을 유도한다Extended FABs → 확장형 FAB: 확장형 플로팅 액션 버튼(Extended FAB)은 주요 액션 수행을 돕는다FAB menu → FAB 메뉴: 플로팅 액션 버튼(FAB) 메뉴는 FAB에서 확장되어 관련된 여러 액션을 표시한다Floating action buttons (FABs) → 플로팅 액션 버튼(FAB): 플로팅 액.. 2026. 4. 17.
Google Material Designing 계층 구조 계층 구조 (Hierarchy)내비게이션이 쉬우면 사용자는 현재 위치와 중요한 요소를 빠르게 이해할 수 있다. 중요도를 강조하기 위해 색상, 형태, 텍스트, 모션 등 다양한 시각·텍스트 요소를 활용해 명확성을 높인다. 피드백 유형 (Feedback Types)라벨, 색상, 아이콘과 같은 시각적 피드백과 터치 피드백은 사용자가 UI에서 무엇을 사용할 수 있는지 보여준다. 네비게이션(Navigation)내비게이션은 최소한의 단계로 구성된 명확한 작업 흐름, 찾기 쉬운 컨트롤, 그리고 명확한 라벨링을 가질 수 있다. 포커스 제어, 즉 키보드 포커스와 읽기 포커스를 제어하는 기능은 자주 사용되는 작업에 적용할 수 있다. 추가되는 모든 버튼, 이미지, 텍스트 한 줄은 UI의 복잡도를 증가시킨다. 다음을 통해 UI.. 2026. 4. 9.
Google Material Style Guide (모션, 형태, 타이포그래피) 스타일이란?스타일은 UI에 고유한 분위기와 인상을 부여하는 시각적 요소입니다. 색상, 고도, 아이콘, 운동, 형태, 타이포그래피 같은 것들.색상: 스타일을 표현하고 의미를 전달하는 데 사용됩니다. 고도: z축을 기준으로 두 표면 간의 상대적인 거리입니다. 모든 표면과 컴포넌트는 고유한 elevation 값을 가집니다.아이콘: 일반적인 동작을 시각적으로 나타내는 데 사용됩니다. 운동: UI를 더 직관적이고 표현력 있게 만드는 데 사용됩니다. Material 전환 애니메이션은 사용자가 앱을 탐색할 때 자연스럽게 흐름을 안내합니다.형태: 컨테이너 모서리의 스타일을 정의하며, 각진 형태부터 완전히 둥근 형태까지 다양한 둥글기 옵션을 제공합니다.타이포그래피: 텍스트를 읽기 쉽고 아름답게 만드는 데 사용됩니다.4... 2026. 4. 7.
Google Material Style Guide (아이콘) 스타일이란?스타일은 UI에 고유한 분위기와 인상을 부여하는 시각적 요소입니다. 색상, 고도, 아이콘, 운동, 형태, 타이포그래피 같은 것들.색상: 스타일을 표현하고 의미를 전달하는 데 사용됩니다. 고도: z축을 기준으로 두 표면 간의 상대적인 거리입니다. 모든 표면과 컴포넌트는 고유한 elevation 값을 가집니다.아이콘: 일반적인 동작을 시각적으로 나타내는 데 사용됩니다. 운동: UI를 더 직관적이고 표현력 있게 만드는 데 사용됩니다. Material 전환 애니메이션은 사용자가 앱을 탐색할 때 자연스럽게 흐름을 안내합니다.형태: 컨테이너 모서리의 스타일을 정의하며, 각진 형태부터 완전히 둥근 형태까지 다양한 둥글기 옵션을 제공합니다.타이포그래피: 텍스트를 읽기 쉽고 아름답게 만드는 데 사용됩니다.3... 2026. 4. 6.
Google Material Style Guide (고도) 스타일이란?스타일은 UI에 고유한 분위기와 인상을 부여하는 시각적 요소입니다. 색상, 고도, 아이콘, 운동, 형태, 타이포그래피 같은 것들.색상: 스타일을 표현하고 의미를 전달하는 데 사용됩니다. 고도: z축을 기준으로 두 표면 간의 상대적인 거리입니다. 모든 표면과 컴포넌트는 고유한 elevation 값을 가집니다.아이콘: 일반적인 동작을 시각적으로 나타내는 데 사용됩니다. 운동: UI를 더 직관적이고 표현력 있게 만드는 데 사용됩니다. Material 전환 애니메이션은 사용자가 앱을 탐색할 때 자연스럽게 흐름을 안내합니다.형태: 컨테이너 모서리의 스타일을 정의하며, 각진 형태부터 완전히 둥근 형태까지 다양한 둥글기 옵션을 제공합니다.타이포그래피: 텍스트를 읽기 쉽고 아름답게 만드는 데 사용됩니다.2... 2026. 4. 5.
Google Material Style Guide (컬러) 스타일이란?스타일은 UI에 고유한 분위기와 인상을 부여하는 시각적 요소입니다. 색상, 고도, 아이콘, 운동, 형태, 타이포그래피 같은 것들.색상: 스타일을 표현하고 의미를 전달하는 데 사용됩니다. 고도: z축을 기준으로 두 표면 간의 상대적인 거리입니다. 모든 표면과 컴포넌트는 고유한 elevation 값을 가집니다.아이콘: 일반적인 동작을 시각적으로 나타내는 데 사용됩니다. 운동: UI를 더 직관적이고 표현력 있게 만드는 데 사용됩니다. Material 전환 애니메이션은 사용자가 앱을 탐색할 때 자연스럽게 흐름을 안내합니다.형태: 컨테이너 모서리의 스타일을 정의하며, 각진 형태부터 완전히 둥근 형태까지 다양한 둥글기 옵션을 제공합니다.타이포그래피: 텍스트를 읽기 쉽고 아름답게 만드는 데 사용됩니다.1... 2026. 4. 4.
728x90
반응형