실습 8일차!
지금까지 이론 교육만 하다가 오늘은 드디어 피그마 툴 사용법에 대해 배웠다. 처음 UXUI디자이너로 진로를 정했을 때는
'디자인' 자체만 생각해 기획자가 전부 기획하면 UXUI 디자이너가 그대로 제작만 해주면 되는 줄 알고 피그마툴만 익숙해지면 되겠구나 했었다. 그래서 디자인툴은 혼자서 할 수 있다고 생각하고 피그마는 유튜브로 독학했는데....유튭으로 다 되는 거면 세상에 학원은 왜 있고 강사는 왜 있겠어...오늘 교육 들으면서 내가 얼마나 근본없이 피그마를 배웠는데 깨달았다.
나름 4개월 내내 피그마로 이것저것 제작해봤는데 아직도 컴포넌트와 오토레이아웃 기능에 대해 제대로 모르고 있었다.
그래도 이번 기회에 좀 알게 돼서 다행이다. 인턴형프로그램에 지원한 가장 큰 이유 중 하나였던 피그마 툴 사용법, 오늘 새로 배운 부분을 정리해본다.
Week 2-3(11/8) : 피그마로 디자인시스템 활용하기
1) 피그마 툴 익히기
디자인 작업 시 타겟 사용자들의 보편적인 디바이스를 기준으로 설정. 기본적으로는 최소단위를 기준으로 작업 why? 큰 화면 기준으로 디자인했을 때 작은 화면에서는 너무 작게 나올 수 있어서. 주로 375기준!
글로벌 타겟 작업 시엔 아이폰 8(375x667)이 기준
2) 컴포넌트 다루기
컴포넌트 하나 만들고 이를 복붙해서 쓰면 메인/인스턴스 컴포넌트로 구별됨
메인 컴포넌트를 수정하면 전체가 다 바뀜
우측 중간 컴포넌트 버튼 눌러 메인 컴포넌트 위치를 찾거나 인스턴스 컴포넌트 리셋 및 분리 가능
Property – Variants 기능을 통해 버튼이 탭/마우스오버 했을 때 색상이 변하는 것을 표기할 수 있음
같은 버튼은 하나의 디자인시스템 카테고리에 몰아넣어두기
3) 오토레이아웃
그룹화-오토레이아웃(이거 해야 텍스트 길이에 따라 같이 움직임)
텍스트에 따라 크기가 바뀌는 버튼 -> 그룹핑+오토레이아웃
텍스트와 관계없이 크기는 고정인 버튼 > 그냥 오토레이아웃
4) 그 외 피그마 툴 가이드
스케일(K)을 사용하면 프레임뿐만 아니라 모든 요소의 크기를 줄일 수 있다(이거 왜 이제 알았지..?)
디자일 스타일 가이드
: UXUI디자인을 구성하는 디자인 요소의 규칙과 가이드라인을 정하는 것
ex) 폰트, 색상, 컴포넌트, UI패턴
WSG/ASG => 웹스타일가이드/앱스타일가이드
=> 디자인시스템에 대한 이해도가 없어서 기존의 개인프로젝트들은 우습게도 프로젝트 완성 후 마지막에 사용한 컴포넌트들을 모아 겉모습뿐인 디자인시스템을 만들었었다. 그러다보니 컴포넌트들이 다 제각각이고 통일성이 없었다. 그래서 이번 개인 실습엔 와이어프레임 과정에서 디자인시스템을 미리 만들어두는 중이다.
실습 Day 8(11/8)
와이어프레임 제작 2
오늘은 어제 시작한 와이어프레임 작업을 추가로 진행했다.
확실히 와이어프레임 제작 전에 UI스케치 과정을 거치니 더 편하다
중간에 새로운 프레임을 추가할 필요도 없고 스케치 틀이 잡혀있어 프레임
디자인도 금방 가능하다.
다만....내가 손이 워낙 느려서...오늘도 마무리는 못했다.
메인메뉴 5개중 마지막 '더보기' 부분이 남았다.
내일은 꼭 마무리하고 UI디자인 본격적으로 들어가야지.
본 후기는 유데미-스나이퍼팩토리 UI/UX 디자이너 인턴형 프로그램 학습 일지 후기로 작성 되었습니다.