[인프런 리프 2기] UX/UI 시작하기 : Figma 입문 - 섹션 7~10 공부 & 후기 (완)

반응형

 

 

저번 [3주차] 섹션 5~6 에 이어서 이번 주에는 [4주차] 섹션 7~10 을 수강했다!

​

정신을 차리고 보니 벌써 한 달이라는 시간이 흘러 마지막 주차를 수강하고 있네... ㅎㅎ

(시간 참 빠르다...🥲)

 

 

 

 

드디어 100% 완강 !!!  와아아아아-👏👏👏  내가 완강을 하다니 ㅠㅠ 뿌듯뿌듯...😭

​

다 리프 덕분입니다...💚

 

---

 

섹션 7. 스타일가이드 만들기

 

 

UI를 제작하다 보면 자주 사용하는 색상들이 있게 되는데 사용하기 쉽도록 설정하는 방법을 배워보았다.

 

기본적으로 Figma에서 제공해주는 색상들이 있는데, 위의 색상들도 평소에 필요한 색상들이라 유용하게 사용할 것 같다.

 

 

 

 

지난 번에 진행했던 프로젝트 때 제작했던 앱 내에서 자주 사용했던 색상들을 기반으로 한 번 만들어보았다.

​

Primary : 주로 사용하는 색상

Secondary : 두 번째로 자주 사용하는 색상

Grayscale : 글씨 색상과 같은 것들에 사용되는 색상

System : 상태를 알려줄 때 사용되는 색상

 

 

 

 

여러 색상들을 사용하기 쉽도록 등록할 수 있는데

​

Design 패널에서 Fill - create - style - create style - 카테고리 / 이름 입력   ( / : 카테고리로 인식)

​

위와 같은 방식으로 각각의 색상들을 스타일로 생성해주면 된다.

 

 

 

 

오른쪽 Color Styles에서 등록한 색상들을 살펴 볼수 있다. 나중에 사용하기 쉽고, 한 눈에 모아서 볼 수 있을 것 같다.

 

 

 

 

색상 외에도 자주 사용하는 그림자 속성도 등록할 수 있었다.

 

 

 

 

 

위에서 색상 등록하는 방식과 똑같이 스타일을 지정해주면 매번 번거롭게 만들지 않아도

클릭 한 번으로 설정해둔 속성을 사용할 수 있어서 좋은 것 같다.

 

 

 

 

색상과 그림자 속성 말고도 타이포그래피도 등록해서 사용하는 경우가 많은데,

​이는 약속된 텍스트만을 사용해서 일관되어 보이도록 만들기 위해서 라고 한다.

​

Android 와 iOS 는 각각 타이포 그래피 가이드를 제공하는데,

​

​

Android 타이포그래피 가이드

 

Android는 'Material Design'의 Type System에서 제공하는 기준을 따른다고 한다.

​

Android에서는 크게 6가지로 Headline / Subtitle / Body / Button / Caption / Overline 이 존재한다.

​

 

 

 

iOS 타이포그래피 가이드

 

iOS는 'Human Interface Gudielines'의 Typography에서 제공하는 기준을 따른다고 한다.

​

iOS에서는 크게 8가지로

Large Title / Title / Headline / Body / Callout / Subhead / Footnote / Caption 이 존재한다.

 

 

 

 

UI를 만들 때 글씨들이 크기, 굵기가 다 다르기 때문에 타이포그래피도 등록해서 편하게 사용한다고 한다.

 

 

 

​

기본적인 글씨체인 Roboto / Noto 를 사용해서 크기, 굵기를 다르게 하여 한 번 설정해보았다.

​

특히 행간에도 규칙이 있다는 것에 놀랐는데, 대부분 폰트 사이즈 * 1.25 로 설정한다고 한다. (소수점은 안 나오게 조절)

​

Body의 경우는 1.5~1.75를 곱해준다고 한다.

 

 

 

 

레이아웃 그리드는 저번에 아이콘 만들 때 사용했었는데, margin을 주어서 safe zone을 설정하는 경우가 많기 때문에

​그리드도 따로 자주 사용하는 설정을 등록해서 사용한다고 한다.

​

 

 

 

만드는 방법은 2가지가 있는데,

1. columns를 2개 추가 - left/right에 margin

2. columns를 1개 추가 - stretch 상태로 margin

​

강사님은 1번 방법이 더 좋다고 추천해주셨다!

​

​

 

이 부분은 팀원들과 논의를 많이 해야하는 부분이라 Description 기능을 사용하면 좋다고 한다.

​

 

 

 

 

섹션8. 프로토타입으로 커뮤니케이션하기

 

 

Figma 프로토타입 요소에는  Trigger / Action / Destination (+Animation)  이렇게 3가지가 존재한다고 한다.

​

각 요소에는 정말 다양한 속성들이 존재해서 직접 실습을 해보면서 익혀보는 시간을 가져보았다.

​

 

 

 

첫 번째 실습에서는 화면간 넘어가는 Animation에 대해 연습해보았다.

​

저번에 만든 로그인/회원가입 화면에 프로토타이핑을 연결해보았는데,

​연결하고자 하는 요소를 클릭하면 오른쪽 +버튼을 눌러 끌어다 놓으면 다음 화면과 연결이 된다.

​

 

 

 

연결선을 클릭했을 경우 Interaction - Interaction details - animation / 옵션 을 선택할 수 있다.

​

옵션을 custom으로 하면 위와 같이 그래프가 나오게 되는데, 이때 가로축은 시간 / 세로축은 거리를 의미한다고 한다.

​

 

 

 

두 번째 실습에서는 open overlay를 통해서 팝업창이 나타나는 것을 연습해보았다.

​

해당 요소를 클릭했을 경우, 밑에서 팝업창이 올라오는 형식으로 만들어보았다.

​

추가적으로 Overlay 부분에서 닫을 때의 옵션 / 뒷 배경의 옵션 2가지를 선택할 수 있는데,

실제 앱을 실행시켰을 때 팝업창이 등장한 것과 거의 유사하게 만들어져서 신기했다!

​

 

 

 

 

섹션 9 ~10. 협업하기 / 마무리

 

 

UI를 만들 때 대부분 여러 명의 다지아너들과 협업하는 경우가 많은데, 이때 Team Library를 사용하면 동기화하기 쉽다고 한다.

 

 

 

 

원하는 요소를 components로 설정한 후

왼쪽 상단 햄버거 버튼 / Figma 아이콘 화살표 버튼 - Libraries - publish 순으로 클릭하면

​Team Library로 등록해서 여러 명이 같이 협업할 때 편하게 사용할 수 있다고 한다.

​

하단에 스위치를 켜주면 바로바로 library로 사용 가능하다고 한다.

( 단축키 : option + cmd + o )

​

 

 

 

​

 

Figma에는 협업할 때 필요한 Comment 기능도 제공해주는데,

​링크를 복사해서 공유할 수도 있고, @로 작업하는 구성원들을 태그할 수도 있고, Slack 채널과도 연동되도록 도와준다고 한다.

​

​이외에도 디자인 파일 버전관리, 파일 커버 만들기, 리소스 Export 하는 방법 등을 배워보았다.

​

​

 

 

마지막 섹션10 에서는 강사님께서

​

디자이너는 혼자할 수 있지만, 작업은 결국 협업을 하게 된다.

피그마를 활용해서 더 효율적으로 작업했으면 좋겠다.

​

라고 말씀하시면서 강의를 마무리하셨다.

 

---

 

이렇게 [4주차] 섹션 7~10을 수강함으로써 Figma 입문 강의를 마무리해보았다!

​

​이번 강의에서 배운 것들을 토대로 앞으로 UX/UI를 제작하는 데에 있어서 Figma를 자주 이용할 것 같다 😁

​

​

​

이렇게 한 달이라는 시간 동안 UX/UI 라는 분야를 좀더 체계적으로 체험해볼 수 있었던 것 같아서 좋았고,

​리프 2기를 통해서 좋은 강의를 들으며 완강까지 할 수 있었던 것 같다 👍

 

 

 

 

 

(▼ 아래의 링크를 클릭하면 인프런 Figma 입문 강의 페이지로 이동합니다.)

UX/UI 시작하기 : Figma 입문(Inflearn Original) - 인프런 | 강의