저번시간에 'Figma Tool'에 대한 기초를 배웠으니 오늘은 UX/UI 디자인을 하며 많이 사용되는 기능을 적용해보는 시간을 가졌고, 나아가 UX/UI에 활용되는 화면 요소의 명칭, 디자인 가이드를 알아보는 시간을 가졌다.
'Auto Layout'과 'Auto Resizing'은 내 디자인은 통일성있게 제작하기 위해 사용하는 도구이다.
> Alignment : Align Left (Alt+A)
기본적인 정렬도구로 우리는 왼쪽에서부터 글을 읽기 때문에 왼쪽정렬을 가장 많이 사용한다.
※하지만 전체에서 한 문장을 수정하거나 배치하고 싶을 때 자칫하다 전체가 틀어질 우려가 있다.
그렇기에 우리는 'Figma'의 꽃이라고 할 수 있는 'Auto Layout'을 사용한다고 할 수 있다!
> Auto Layout (Shift+A)
※ Auto Layout은 'Layout'옵션에서 쉽게 찾을 수 있다. 적용한 뒤에는 'Direction'옵션을 통해 'Vertical Layout', 'Horizontal Layout'으로 수평, 수직을 결정할 수 있고, 마지막으로 'Wrap'으로 상위 컨테이너 크기가 줄어들 때 내부 오브젝트가 자동으로 줄바꿈이 될 수 있게 설정이 가능
※ 우클릭의 'Add auto layout'으로도 설정이 가능
※ 'Position'의 'Ignore auto layout'으로 부분개체 Auto Layout 해제 가능
> Resizing
※ 'Margin'을 통해 오브젝트 간의 간격 조절 가능
※ 'Padding'을 통해 오브젝트와 프레임 사이 간격 조절 가능
※ 패널을 사용하지 않고 간격과 'Padding'을 조절하고 싶다면 'Padding'영역의 분홍색 빗금영역을 드래그하여 조절이 가능
※ Frame이 Auto Layout이고 세부개체들이 Auto Layout이거나 Text일 때 'Fixed', 'Hug', 'Fill'로 제어가 가능
Fixed width / Fixed height : 폭 영역 고정 / 높이 영역 고정
Hug contents : 본인 Layer를 감싸는 영역 (기본값)
Fill container : Frame 크기를 맞춰서 스스로 영역을 늘리거나 줄임 (개체가 여럿일 때는 Frame에 맞춰서 영역이 나눠져 균등하게 1/N 크기를 가져감)
개인적으로 'Fixed', 'Hug', 'Fill'의 개념이해가 가장 어려웠는데 후에 디자인을 하게 될 때 자유자재로 사용이 가능하게 하는 것이 중요할 것 같다.
'Figma'에서 'Material Design 3 Kit'를 제공하고 있는데 여기서 여러 디자인 요소를 찾아볼 수 있었다.
'Figma 'Material Design 3 Kit'
이 Component를 통해 UX/UI 디자인을 쉽게 접하고 편하게 배울 수 있는 것 같아 아주 감사한 친구이다.
> 디자인 요소
App Bar : Logo나 메뉴, 검색바 등이 위치되어 있음
Avatar : 흔히 말하는 프로필 (요즘은 3D 프로필이 트렌드)
Badge : 알림 표시
Button : Button이라고 실무에서도 통칭하긴 하지만 'Segmented Button'은 확실이 구분함
Card : 모바일 화면구성에서 웹 화면구성으로 넘어갈 때 유용하게 쓰임 (Mobile First 화면에서 많이 사용)
Carousel : 슬라이드 형식의 카드UI
Checkbox, Radio Button : 'Radio Button'은 단수선택, 'Checkbox'는 복수선택일 때 쓰이며 명칭은 기능으로 나뉨 (형태는 Checkbox여도 단수선택일 경우 Radio Button으로 통칭)
Chip : 여러개를 선택할 수 있지만 각각의 이름을 구분지어야 할 때 사용
Date Picker : 달력, 시작일자와 종료일자를 표기할 때도 사용
Dialog : Overlay되는 형태도 많이 나타남 (Background가 Blur처리 된 상태에서 뜨는 경우가 많음) / 확인, 종료, 취소, 삭제를 하는 경우 (체크를 유도하는 경우는 소수)
Divider : 가로, 세로 구분 선
Icon : 아이콘
List : 리스트 (Dropdown, Text 입력방식 등 경우가 다양)
Menu : 메뉴
Navigation : 대부분 Mobile은 App Bar 형태로 아래로 배치하거나 우측배치 (오른손잡이가 많기 때문), PC는 왼쪽에 두는 경우가 많음
Progress Indicator : 상태표시 (Roading Bar)
Search : 검색바
Sheet : Mobile 사용시 위로 슬라이드해서 다른 화면을 나타내는 경우 등
Slider : 음악재생 등 슬라이드 형식으로 원하는 위치로 조정
Snackbar : 안내만 보여주고 짧은 시간 내에 사라지는 형태 (요즘은 잘 사용하지 않음)
Switch : 스위치 (라디오 버튼이 2개 밖에 없을 때는 Switch로 대체하는 경우가 있음 (PC제외)) /UI 초창기 때는 Offline에서 영감을 받은 기능들이 상당히 많았는데 그중 하나
Tab : Page전환이 일어났느냐 아니냐로 'Page'와 'Tap'이 구분 됨 (URL 변경 기준) /다른 건 그대로 있고 부분만 변경되면 Tab이라고 할 수 있음
Text Field :
Supporting Text - 비밀번호 입력 시 안내사항이 적혀있는 것과 같은 부분 (특수문자 포함, N자리 이상 등)
Placeholder - 내가 아이디를 입력하는 칸에 '아이디'라고 적혀 있지만 입력하면 사라짐
Label - 사라지지 않는 Text (입력 칸 위에 구분하기 위해 적혀있는 글씨 등)
Time Picker : 시간을 입력하게 하는 용도
Tooltip : 도움말 아이콘을 선택할 때 안내말을 표시할 때 사용
Keyboard : Text 입력
UX/UI를 어떤 식으로 디자인 해야하느냐에 대한 가이드라인이다.
'Human Interface Guidelines'
후에 내가 직접 디자인을 하게 될 때 참고하면 매우 좋을 것 같다.
> Onboarding (Pattern - Onboarding)
굉장히 중요하며 모든 App들에 있는 화면
처음 내가 회원가입을 하고 그 앱을 사용하기 위한 Guideline을 제공하는데 여기서는 이렇게 말하고 있다.
"Onboarding이 빠르고 재미있으면 사람들이 Onboarding을 끝까지 수행할 가능성이 더 높습니다. 반대로, 너무 많이 가르치려고 하면 사람들은 부담을 느끼고 배운 내용을 기억하지 못할 가능성이 높습니다."
> UI Guideline (기술 - Login)
UI 색상에 대한 지표 등 고려해야 할 부분들에 대한 Guide를 제공해준다.
기존 웹사이트나 앱에 들어가는 요소들의 명칭 구분과 오늘 배운 'Auto Layout'과 'Resizing', 'Component'를 활용해 일전에 내가 좋게 봤던 'CGV' 앱의 화면구성을 따라 그려보는 시간을 가졌다.
이때 'Google : Material Design 3' 굉장히 유용하게 사용할 수 있었다.
▼아래는 내가 'Figma'를 활용해 따라그려본 'CGV' 앱의 화면구성이다.
<'Component'를 활용해 'CGV'앱 화면구성 따라그려보기>
여러가지 디자인 요소들의 명칭을 확실히 알아보고 내가 직접 따라 그려보니 더 이해가 빨랐고 'Auto Layout'이라는 기능과 'Component'의 신세계를 알게되어 더욱 재미있게 느껴지는 수업이었다. UX/UI 디자인의 세계는 너무 흥미롭다. 하루빨리 나만의 디자인도 만들고 'Portfolio'도 채워나가고 싶다.