서론
본격적으로 UX/UI 디자인을 제작하기에 앞서 'Component'와 'Variants'라는 주요기능을 배워보고 우리나라 정부에서 지침하고 있는 '범정부 가이드'의 'KRDS Component'를 통해 고용24의 UX를 살펴보는 시간을 가졌다.
'Figma'의 'Component'와 'Variants'
개인적으로 이 기능을 배울 때 가장 많이 해맸던 것 같다. 그만큼 결과물은 좋게 나오는 듯 하다.
>Component (Ctrl+Alt+K)
'Component'는 'Figma'로 UI제작을 할 때 필수적인 기능이라고 할 수 있다.
사용방법
1. 'Component'할 객체를 우클릭 한 뒤 'Create component'로 생성
2. 우측 패널에서 'Create new property' 선택 후 항목 선택
3. 보라색 점선으로 박스가 감싸지고 +를 통해 'Component'항목 추가 가능 (원하는 Pattern들을 제작)
※ 'Main Component'(원본)과 'Instance Component'(복사본)으로 나뉘는데 'Main Component' 수정 시에는 'Instance Component' 에도 적용
※ 'Instance Component' 수정 시에는 개별 수정이 가능 (Layer에 사각형이 4개인 마름모면 Main, 마름모 하나면 Instance로 구분)
※ 'Component'는 경우의 수가 미리 다 작성이 되어 있어야지 변경이 자유롭게 가능
> Variants
스타일이 다른 속성을 지정할 때 사용하는 기능이며, 속성별 카테고리 분류작업이 가능하다.
※'Component'에서만 사용이 가능하며 2개 이상의 'Component'를 선택해야한다.
사용방법
1. 'Variants'할 'Component'를 선택하고 우측 패널 'Components'에서 [Combine as variants] 선택
2. 크기, 속성, 색상으로 분류
3. 속성을 바꾸고자 하는 'Component'를 선택 후 , 'Current variant'에서 속성 변경이 가능
※ 하위 Default로 되어 있는 객체들을 전부 선택 한 뒤 'Rename'을 하면 선택되어있는 객체의 이름을 한 번에 변경 가능 (Number 선택 시 객체들을 Numbering 가능)
명칭 (Status로 상태변경 가능)
Default (기본값) : 버튼의 활성화 상태에서 사용자가 Touch하기 전
Hover (선택) : 사용자가 버튼 위에 마우스나 손가락을 올렸을 때
Focus (준비) : 사용자가 버튼을 Tap하기 전의 준비단계
Disabled (비활성화) : 비활성화 상태
'Menu', 'Label', 'Input'
위 내용을 토대로 가장 대표적인 'Menu', 'Label', 'Input'을 자유자재로 변경하고 경험해보았다.
번외로 'Component' 기능을 통해 내가 원하는 음료수도 만들어보았다!
범정부 UX/UI 디자인 시스템 (KRDS)
누구나 쉽게 정부 서비스를 경험할 수 있도록 가이드라인과 디자인 리소스 및 디자인 시스템 구축을 위한 모든 자료가 포함되어 있다.
범정부 디자인 시스템
※ Prudut Designer는 항상 설득력을 갖춰야하기 때문에 내 디자인의 의미를 설명하기 위해 가이드라인은 필수적으로 배워야한다.
사실 이론에는 약한 편이라 실전과 내가 직접 제작하고 비교분석을 통해 가이드라인을 기억해둬야겠다.
> 범정부 가이드에서는 오류에 대한 정보 제공을 이렇게 설명하고 있다.
"오류는 사용자가 요청한 작업을 시스템이 완료하지 못하는 문제가 발생했을 때 제공된다. 발생 가능한 문제를 사전에 안내하는 경고와는 달리, 오류는 이미 발생한 문제에 관한 정보를 사용자에게 알려준다. 오류 정보는 단순히 사용자에게 문제가 발생했음을 알려주는 데 그치지 않고 본래 수행하고자 했던 행동을 완수할 수 있게 유도해야 한다. 오류 정보를 제공하기 위해 별도의 모달을 사용하거나 오류가 발생한 지점에 직접 메시지를 전달할 수 있다."
※ 모달은 확인, 닫기 정도만 들어있는 화면이며 버튼이 없는 경우도 있다.
> 사용성 가이드라인 또한 제공하고 있다.
> 접근성 가이드라인
장애인차별금지 및 권리구제 등에 관한 법률을 통한 가이드로 차별없는 서비스 사용을 위해 제공되는 가이드라인이다.
※ 대부분 사람들은 지나치는 경우가 많은데 소수를 위한 디자인이 대부분의 사용자들에게 더 나은 서비스를 제공하는 경우가 많은 만큼 이러한 디자인을 지향해야 한다.
Universal Design에 관심이 많았던 만큼 접근성 가이드라인에 대한 내용을 더 깊게 배워보고 싶고, 좋은 디자인을 하는 디자이너가 되고 싶은 마음이 크다.
> Design Style Guide
색상
Gray, Primary, Seconndary는 기본적으로 많이 사용되어 모든 디자인에 포함되어 있다고 할 수 있다.타이포그래피
레이아웃
고도
시스템 아이콘
적용해보기
오늘 배웠던 수업 내용을 토대로 고용24 홈페이지의 화면구성을 분석해보고 '범정부 가이드'를 통한 로그인화면 오류분석, 마지막으로 'Auto Layout'과 'Component'를 활용하여 홈페이지를 따라 그려보는 시간을 가졌다.
여기서 'KRD'의 디자인시스템을 유용하게 사용할 수 있었다.
KRDS_v1.0.0
▼아래는 내가 'Figma'를 통해 분석, 따라 그려본 '고용24' 홈페이지이다.
<'고용24'분석 및 'Component', 'Variants'를 활용한 홈페이지 Copy>
이번수업은 'Figma'에서 가장 유용하고 심도있는 내용이었는데 이해가 어려워 인터넷 여기저기를 돌아다니며 이해하려고 애썼던 것 같다. 이후에 홈페이지 Copy를 하며 이해와 적용을 동시에 할 수 있었다. 점점 심화내용으로 가다보니 어려운 부분도 많지만 확실히 무언가를 배워나간다는 느낌과 동시에 성취감도 느낄 수 있었다.
