TIL_1W5D_버튼 컴포넌트의 의사 상태 만들기

디자인 카타
오늘의 토픽 - 윈도우 시작 페이지의 변화 어떤 것을 선호하시나요?

선택 A안
윈도우가 계속 사용해왔던 디자인의 형태여서 친숙하고 안정적이라는 느낌을 받았음

B안을 선택하지 않은 이유로는 경쟁사를 카피한 디자인의 느낌을 많이 받음과 기존의 써왔던 A안의 친숙함과 다르게 B안은 도전적이여 거부감을 일으키는 것 같음

버튼 컴포넌트의 의사 상태 만들기
버튼의 위계 배리언츠 만들기
버튼의 위계는 hierarchy(하이어라키)는 계층이나 계급, priority(프라이어리티)는 우선순위라는 뜻인데 두 표현 모두 쓸 수 있음
두 표현 모두 '얼마나 중요한 행동을 하기 위한 버튼인가'를 담고 있음
일반적인 버튼은 프라이머리(Primary, 1순위), 세컨더리(Secondary, 2순위), 터시어리(Tertiary, 3순위)의 3단계를 가짐

버튼의 크기 배리언츠 만들기
버튼의 크기는 일반적으로 Large, Medium, Small의 3가지 단계를 사용
만드는 제품에 따라 사이즈를 한 가지로 써도 되고, 2개, 3개 이상을 써도 상관이 없음

버튼의 상태 배리언츠 만들기
버튼이 가질 수 있는 의사 상태는 Default(Enable), Hover, Pressed, Disabled 등 다양함
밑의 사진은 Pressed를 만든 것임

버튼 컴포넌트에 아이콘 추가하기
아이콘에 프로퍼티 적용하기 Boolean

버튼 컴포넌트의 아이콘 바꾸기
버튼 안의 아이콘 선택 후
프로퍼티 Instance swap 적용하기

버튼 컴포넌트의 텍스트 바꾸기
버튼 안의 텍스트 선택 후
프로퍼티 Text 적용하기

합성 컴포넌트는 파운데이션이 아닌 컴포넌트를 모아 또 컴포넌트를 만드는 경우를 뜻함

네스티드 인스턴스는 재료로 쓰인 컴포넌트를 하위 컴포넌트, 본체를 상위 컴포넌트라고 봤을 때, 상위 컴포넌트에서도 하위 컴포넌트 속성을 조작할 수 있도록 하는 기능
Nested는 '감싼', nest는 '둥지'라는 뜻

탭 컴포넌트는 컴포넌트 종류 중 네비게이션에 해당, 현재 화면을 전환해주는 요소

탭 만들기

컴포넌트 합치기 및 분리하기

4주차 숙제
( ੭ ･ ౩･ )੭

앱 바 컴포넌트는 컴포넌트 종류 중 네비게이션에 해당, 앱 화면 상단에 고정되어 현재 화면의 이름을 알려주면서 이전 화면으로 돌아갈 수 있도록 해줌
머티리얼 디자인에선 앱 바(App Bar)라고 부르지만, iOS에서는 네비게이션 바(Navigation Bar)라고도 부르고, 디자인 시스템마다 부르는 이름이 모두 다름

화면 디자인 실습 - 홈 화면 만들기

1W1D