서론
13일차의 Figma 기본도구들을 배운 뒤 오늘은 Component 기능의 개념과 종류에 대한 기초지식을 다지고 기존 App Design 화면의 Component들을 Clone Design 해보는 시간을 가졌다.
Component (Ctrl+Alt+K)
Component는 디자인 요소를 재사용하고 유지보수하기 쉽게 만드는 방법을 제공
반복적으로 사용되는 디자인 요소를 Component로 정의하면 해당 Component를 다른 디자인에서도 쉽게 사용가능
Figma의 Component 기능은 Design System을 구축하고 협업하는데 큰 도움을 주며, 특히 대규모 Project에서 효율적인 작업이 가능
> Component의 장점
- 재사용성 : 한 번 디자인한 Component를 다른 곳에서 간편하게 재사용 가능
(수정하거나 업데이트할 때에도 모든 Instance에 일괄적용)- 일관성 : Component를 사용하여 디자인 요소들을 일관성 있게 유지
- 효율성 : Component를 사용하면 동일한 디자인 요소를 반복해서 디자인 하지 않아도 되기 때문에 작업이 빨라짐
- 업데이트 관리 : Component를 수정하면 해당 Component를 사용한 모든 Instance에 변경사항이 적용되므로 디자인의 업데이트가 간편
> Instance
Master Component의 사본 (Component를 설계할 때, 해당 Component를 여러번 재사용할 수 있도록 만들 수 있고, 각각의 재사용된 사본)
- Instance에서 수정이 가능 : Auto Layout, 투명도, Color, Text, Line, Shadow
- Instance에서 수정이 불가능 : Layer 정렬, 위치, 크기, Constraint
Component 종류
가장 많이 사용되는 Component 종류들을 알아보자!
> App Bars : TOP
- Statusbar 바로 아래 위치
- OS 별 제공하는 기능이 조금씩 다르고 각기 다른 이름으로 호칭
- Android의 Actionbar는 주로 Action실행이 가능한 버튼 위치
- IOS의 Navigationbar는 말그대로 상위 하위 View로 이동가능한 Navigation역할
> Bottom Navigation
- 앱의 기본 메뉴이동 어느 곳에서 Access 할 수 있어야 하는 최상위 대상 (최소 3개, 5개의 메뉴)
- Navigation과 Tap을 결합하면 내용과의 관계가 불분명해 혼란
- 짧은 Text Label 사용
- 선택 시 활성화 된 Color와 표현
- Badge포함 가능
> Search Bar
- 검색바
- Android와 IOS검색 기능은 활성화 되는 기본 로직 자체가 다름
- Actionbar에 검색 Icon만 제공
> Tab Bar
- Tab은 관련이 있고 동일한 계층 구조의 Contents Group간에 탐색을 구성하고 허용
- Tab은 Icon, text 포함 가능 (Text Label은 짧게)
- 고정 Tab, 각 Tab의 너비는 Tab 수를 화면 너비로 나눔
- Scroll Tab, 고정 너비 없이 표시
- Icon은 Tab이 간단하고 인식가능한 방식으로 나타내는 유형을 전달하는데 효과적
> Check Box
- Check Box는 동시에 여러개를 선택할 때 사용
- Tick Box라고도 불리며 다중 선택 뿐만 아니라 On/Off 개념
- Radio Button과 Check Box 이 두 Component는 모바일 환경에서도 널리 사용되어 친숙
> Radio Button
- Windowsk Popup의 선택 영역에서 어느 하나를 선택 또는 취소하기 위해 사용하는 버튼으로 하나의 항목만 선택 가능
> Toggle Button, Switch
- On/Off를 설정할 때 쓰이는 Control
- Toggle Button의 경우 Butcon 같지만 선택시에 음각 상태로 변함 (해당 항목이 실행되고 있음을 의미)
- Switch는 모바일에서 주로 사용되며 손가락으로 직접 스위치를 좌우로 움직이거나 영역을 선택하여 조절
> Tooltip
- 사용자가 특정한 메뉴에 마우스를 Rollover 시 약 1~2초 뒤에 해달 메뉴에 대한 설명 제공
- Butcon은 사용자가 학습하기 전에 식별이 어려울 수 있다는 단점이 있지만 Tooltip이 이를 보완
> Card
- Card는 단일 주제에 대한 Contents와 작업을 표시
- 작은 화면이지만 동적으로 할 수 있으며, 가이드 규격 등이 정해져 있음
> Banner
- Banner는 눈에 잘 띄는 Messege와 관련 Option작업을 표시
- 중요하고 간결한 Messege를 표시하고 사용자가 해결 할 수 있는 작업을 제공
- 해제하려면 사용자 작업이 필요
> Button
- Button을 사용하면 사용자가 Tab 한 번으로 작업을 수행하고 선택 가능
- Button은 사용자가 취할 수 있는 작업을 전달
- 일반적으로 UI 전체에 대화, Modal, 양식, Card, 도구 모음 등과 같은 위치에 배치
> Slider
- Slider를 사용하면 막대를 따라 범위에서 값을 보고 선택 가능
- Volume 및 밝기와 같은 설정을 조정하거나 이미지 Filter를 적용하는 데 이상적
> Snack Bar (Toast Bar)
- Snack Bar는 사용자에게 App이 수행했거나 수행 할 Process를 알려줌 (일시적으로 화면 하단에 나타남)
- 사용자 경험을 방해해서는 안되며 사라지는 데 사용자 입력이 필요하지 않음
Ant Design 사이트에서 여러 Component를 보고 경험해볼 수 있다.
Ant Design
지난 작업에서 내가 직접 Component를 제작해보았는데 사용해보았을 때 Buttonr과 같은 간단한 작업이었지만 뿌듯했던 그 느낌은 잊을 수가 없다.
MVP
'MVP'는 Minimum Viable Product의 약자이며 스타트업이 제품의 가장 중요한 기능에 집중하여 개발하는 초기 모델이다.
처음부터 Design System을 구축하는 것이 아닌 이 'MVP'를 통해 만들어진 Component 여러개가 모여 Design System을 구축하게 된다.
이해해보기
위의 수업내용을 토대로 App에서 사용된 Component 구성을 이해하고 Clone Design으로 Component를 제작, Component 별로 구분 짓는 작업을 해보는 시간을 가졌다.
▼ 아래는 내가 Figma로 제작한 Clone Design한 'KaKao T'와 'Naver Map'이다.
<'KaKao T', 'Naver Map' Component Clone Design>
오늘은 Component를 디자인만 Clone 작업을 했지만 이후에 기능을 추가해서 Component 제작을 진행하게 될 시간들이 기다려진다. 언젠가 내가 기획하게 될 Project에서도 나만의 Design System이 구축된다면 정말 뿌듯하고 기쁠 것 같다. 그 날을 위해 기초를 더욱 더 열심히 다져두어야겠다.
