brunch

라이킷 18 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 스무 May 27. 2022

어느 날, 클래스 101에서 연락이 왔다.

스무님, 피그마 클래스 한번 제작해 보시지 않을래요?

5월 3일,

감사하게도 클래스 101에서 피그마 클래스 개설에 관한 제안을 주셨습니다.

지금이야 많은 훌륭하신 분들이 피그마에 대해 많은 정보를 공유해 주고 계시지만, 제가 피그마를 처음 독학하던 시절에는 국내에서는 그렇게까지 많은 정보를 얻기 쉽지가 않았죠.

지금도 양질의 팁이나 정보들은 산발적으로 흩뿌려져 있기 때문에, 이러한 데이터들을 한데 모아 가공하여 전달하기 쉬운 채널을 마련하고 싶었어요. 이것이 브런치를 시작하게 된 이유였습니다.

사실 브런치를 시작하면서 VOD 형태의 커리큘럼을 완성시켜보는 것 또한, 제 버킷리스트 중 하나였는데요.

내심 바라고 있던 부분이지만, 막상 연락을 받아보니!

"올게 왔구나.. 근데, 너무 빠르지 않나..?"

그렇습니다. 막연히 상상하고 있던 일이 현실이 되고 나니 조금 얼얼하더라고요.

PD님과 연락을 주고받는 상황 속에서도 '이거 몰카 아닌가?'라는 생각이 들었었어요. ~~(진짜로 의심함)~~

하지만 메일을 통해 언급해 주셨던 "각 기능의 개념부터 이해한 후 이를 활용하는 방법을 가르쳐주신다"라는 , 제가 가장 중요하게 생각하던 가치를 공감하고 인정해 주셨다는 생각에, 정말 너무 좋은 기분으로 클래스 101과 협업을 하게 되었습니다!

( 강의 링크는 본 글 최하단에 쿠폰과 함께 기재해두었습니다. )

이번 글에서는 제가 커리큘럼을 어떠한 생각을 가지고 구성하게 되었는지, 클래스 101의 상세페이지에는 나타나 있지 않은 그런 부분들에 대해서 이야기해 보려고 해요 :)

1. 피그마의 기초

기초는 어디에서나 늘 중요한 자산입니다. 그리고 피그마의 기초는 그렇게 어렵게 느껴지지 않아요.

하지만, 제 경험에 의하면 피그마를 실제로 잘 쓰고 계시는 분도 아주 사소하지만 핵심이 되는 기능들에 대해 놓치고 있는 경우가 종종 있었습니다.
왜 그랬을까요? 저는 늘 쓰던 기능만 써왔기 때문이라고 생각해요. "지금까지는 굳이 그런 거 몰라도 잘 써왔으니까" "굳이 찾아보지 않아서" 등의 많은 이유로 사용되고 있지 않은 꿀 기능이 피그마 곳곳에 숨어있습니다. 대표적으로는 여러 비슷한 상태를 셀렉해주는 Select All with~ 기능을 예로 들 수 있는데요, 피그마는 메뉴를 굳이 눌러보지 않는 경우가 많기 때문에 이 기능의 존재 자체를 모르는 경우가 많더라구요.

이번 강의에서는 최대한 제가 알고 있는 모든 디테일한 기능들에 대해서 서술하려고 해요. 물론 쓸모 있게!

2. 오토레이아웃

피그마의 꽃, 피그마의 핵심 오토레이아웃 입니다.

사실 오토레이아웃은 굉장히 중요하고 임팩트 있는 기능이라 브런치에도 몇 번이고 글을 쓰려고 했었지만

이번 Config2022를 통해 자잘하게 변화된 부분이 있어서 타이밍을 놓치게 되었어요.

오토레이아웃은 특히 반응형 구현을 위한 Resizing에 대한 부분을 많이들 어려워하셔서, 이 부분을 쉽게 이해할 수 있도록 집중해보려고 합니다 ☺️

3. 컴포넌트와 배리언츠

Config 2022에서 개인적으로 제일 러닝 커브가 상승한 부분이라고 생각되는데요, 기존에도 배리언츠 파트에서 Property와 Value 등, 영어의 압박과 함께 기능 옵션들이 좀 여기저기 흩어져 있어 학습하는데 난이도가 가장 높았던 부분이었어요.

이번에 컴포넌트에도 Property 옵션이 추가되면서 입문자 분들은 특히 더 많은 어려움을 겪을 거라고 예상이 되는데요..! 프로퍼티, 밸류 등 복잡한 용어를 풀어서 설명하고, 실무에서의 활용방안 예제 등을 통해 더욱 직관적으로 이해할 수 있도록 하는데에 집중했습니다.

4. 프로토타입

프로토타입은 재미있어요.

코딩을 몰라도 실제로 동작하는걸 눈으로 보면 한 차원 높은 디자인을 만난 것 같은 기분이 들죠.

본 강의에서는 프로토타입의 여러 액션들을 살펴보고 피그마로 프로토타입, 어디까지 가능할까?라는 것에 포커스를 두고 스와이프 액션이나 로딩 애니메이션, 타이핑되는 듯한 애니메이션 등 가능한 많은 예제를 만들어 보려고 합니다.

5. 라이브러리

"스타일은 쉬운데 라이브러리는 어려워"

라이브러리라는 개념이 아직 정립되지 않은 분들에게 이 영역은 상당히 어렵게 다가오는 것 같아요.

이제 무료 버전에서는 더 이상 라이브러리 퍼블리싱을 활용할 수 없기도 하고, 소규모의 프로젝트에서는 굳이 사용하지 않는 기능이기도 해서 접근하기 어려운 느낌이 있었는데요.

프로 버전 사용자가 아니라도 도움이 될 수 있도록 스타일과 관련된 플러그인을 소개하거나, 폰트 스타일의 하이어라키 정립, 세멘틱 컬러 등 디자인 시스템과 관련된 이야기도 함께 풀어낼 예정입니다!

6. 피그마 활용 Tip

위 내용에서 배운 기능들을 가지고 더욱 빠르게 작업을 진행할 수 있도록 제가 가진 노하우들을 아낌없이 공개할 예정이에요! 작업을 몇 배로 빠르게 만들어주는 효과적인 플러그인들과 레이어를 정리하는 방법, 컴포넌트 네이밍에 대한 방법론 등 실무에서 바로 써먹을 수 있는 제가 직접 시행착오를 겪으며 알게 된 노하우들을 전달해 드립니다. 물론 이러한 것들에 정답은 없기 때문에! 순전히 저만의 경험에서 나온 방법론에 대해서만 전달드린다는 점!

7. 실전 예제

실무에서 피그마를 사용해 만들 수 있는 모든 것들을 담아 하나의 작은 프로젝트를 실습해보려고 준비 중입니다! 카드, 리스트, 프로필 등 여러 가지 형태의 컴포넌트들과 아이콘, 그리고 프로토타입을 통한 애니메이션 등 하나의 완성된 프로젝트를 저와 함께 A to Z로 만들어 보며 커리큘럼을 완성시켜 보세요!