프로덕트 디자이너 병아리 주니어라면 이것만 확실하게!
1인분 하는 햇병아리 주니어로 살아남기
0. 머리글
이제 막 사회에 첫발을 내디딘 햇병아리 주니어라면 회사에서 어떤 일을 어떻게 해내야 할지, 어떻게 해야 최소한 월급 값(?)은 할지 온갖 고민으로 머리가 어지러울 것으로 생각한다. 나 역시 햇병아리 시절에 그런 고민으로 아주 혼란스러웠기 때문에 어림짐작해 보는 바..
되돌아보면 정말이지 딱 1인분, 아니 사실 0.5인분 만큼이라도 완벽하게 해내고 싶었던 것 같다. 0.5인분을 해내기 위해 2인분 만큼의 시간이 필요했었던 듯. (1인당 하루 근무 시간을 8시간으로 보면, 2인분의 시간은 16시간. 0.5인분의 시간은 4시간. 즉 4시간짜리 일을 하기 위해 16시간이 필요했다.. 뭐 그런 뜻..ㅋㅋㅋ)
이제 와서 생각하면 솔직히 사회에서 햇병아리 디자이너에게 기대하는 바가 많지는 않은 것 같다. 다만 그래도 최소한 기본기는 지니고 있으면 고생하는 시간을 많이 줄일 수 있기 때문에, 내가 그때 알았으면 덜 고생했을 것 같은 기본 개념들에 대해 작성해 두고자 한다. 자세한 튜토리얼이나 설명이라기보다는 개념 그 자체에 대해 말하는 게 목적. ＂병아리든 공룡이든 프로덕트 디자이너라면 적어도 이건 알아야 한다: Figma UI 작업 기본개념＂ 편으로 명명하고 시작해 보자!
1. 알고 있으면 좋은 Figma UI 작업 기본 개념
① 최소 작업 사이즈 지정
팀원들끼리 합의된 최소 프레임 사이즈가 있으면 작업이 훨씬 수월하다. 예전 포토샵 시절(저는 참고로 겪어보지 못함)에는 프레임, 즉 핸드폰 사이즈별로 대응된 이미지가 모두 있어야 했다는 그런 괴담을 들었던 적이 있다. 진짜 실로 괴담이 아닐 수 없다. 너무 끔찍.. 하지만 갓벽한 *피그마*의 등장으로 그런 괴담 같은 일은 겪지 않아도 된다는 점. 팀원들끼리 합의한 최소 프레임 사이즈로 작업하고, Constraints를 잘 걸어두자. 핸드오프 시에 이 Constraints view, 즉 반응형 뷰를 옆에 살포시 놓아두면 훨씬 소통하기 좋다. 리스폰스 뷰는 태블릿 사이즈를 추천한다.
최소 사이즈와 타블렛 뷰 배치 예시② Constraints, Auto Layout 걸기
위에서 살짝 언급했지만, Constraints view는 반드시 만들 줄 알아야 생 노가다(..)의 시간이 대폭 줄어들 수 있다. Constraints view를 만들기 위해서는 Constraints와 Auto Layout을 만들 줄 알아야 하는데, 말이 어렵지 막상 해 보면 사실 별것도 아니다.
이 개념을 쉽게 익히고 싶다면 말로 설명을 읽는 것보다는 피그마 커뮤니티에서 아무 앱 목업을 불러와서 이것저것 만져보며 익히는 걸 추천한다. Constraints는 가로, 세로 영역에서 특정 위치에 고정값을 설정해주는 건데 쉽게 말하자면 프레임 크기가 달라져도 해당 요소가 의도한 위치에 유지되도록 해주는 기능이다.
가로 Center / 세로 Top 고정된 컴포넌트 모습위 이미지에서 노란색 사각형은 아래 Constraints 설정처럼, 가로로는 Center에 세로로는 Top에 고정돼 있다. 이렇게 걸어두게 되면 프레임이 가로로 늘어나든 대각선으로 늘어나든 저 컴포넌트는 저 위치에 고정된다.
노란색 사각형 Constraints 설정값사이즈 그대로 고정하는 옵션도 있지만, 프레임 크기대로 마진을 유지하며 크기가 늘어나는 Left and Right 이나 Scale 고정값도 있으니, 요리조리 움직여 보며 체득해 보길..! (설명하기 귀찮아서가 아니라 진짜 그냥 해보는 게 가장 빨리 알 수 있는 길이다 ㅠ_ㅠ)
③ Component Library 만들기
Component Library가 잘 구축돼 있으면 훨씬 더 편하게 일할 수 있다. 기본적으로 컬러 시스템과 폰트 시스템을 구축하는 건데, 더 나아가면 버튼 컴포넌트나 아이콘 등 다양한 컴포넌트를 배치해 두고 사용할 수도 있다. 일단 다 차치하고 컬러와 폰트 시스템만 잘 구축해 둬도 쌩 노가다(..) 비중이 대폭 줄어들 수 있다. 작업하다 보면 컬러를 계속해서 설정하는 것도 상당히 번거롭고, 폰트 역시도 내가 전에 이 부분에 bold를 썼나 regular를 썼나.. 17이었나 14였나.. 반드시 헷갈리는 지점이 있다. 이 혼란을 아주 클린하게 막아줄 수 있는 게 바로 컴포넌트 라이브러리인 것!
폰트 설정 시에는 Line Height를 함께 설정해 두는 것을 추천한다. 행간에 해당하는데, 이걸 제대로 설정해 주지 않으면 폰트마다 줄 간격이 달라서 나중에 통일하는 데 괴롭다. 행간은 pt로 설정하기도 하고 %로 설정하기도 하는데, 개인적으로는 %로 설정하는 걸 추천한다. 그럼 폰트 사이즈가 바뀌어도 비율대로 행간이 늘어나기 때문!
* 참고로 핸드오프 시에는 개발자분들께 따로 해당 OS에 맞는 단위로 변환해서 말씀드리거나, 디자인 QA 진행 시 눈으로 맞춰나가야 한다. 피그마 행간 단위 그대로 가져가면 제대로 소통이 어렵다. 안드로이드의 경우 피그마 Dev 모드에서 확인할 수 있고, iOS는 Dev모드에서 플러그인을 사용해서 확인할 수 있다.
파란색 네모 부분이 Line Height아 그리고 이게 제대로 돼 있지 않으면 지옥의 Legacy가 남게 되는데, 나중에 이거 정리하게 되면 진짜 토 나오는 수가 있다. 이 Legacy라고 함은 일종의 업보다. 제대로 정돈되지 않은 채로 작업하다 보면 그레이스케일이며 각종 컬러들이 (안 그러려고 해도)마구잡이로 쓰게 되는데, 시간이 가면 갈수록 계속해서 화면이 쌓이고.. 그 모든 화면에 각각 다른 색, 폰트가 사용되어 있다고 생각하면 으악..
컬러 시스템 예시대략 이런 느낌으로 설정할 수 있다. 작업 중인 피그마 파일에 라이브러리를 만들기보다는 따로 컴포넌트 라이브러리 파일을 만드는 걸 더 추천! 그편이 관리하기 쉽다. 화면 작업 중인 피그마 파일은 필연적으로 페이지가 무한 증식하기에 비추천. 따로 파일을 만들고, 화면 작업 중인 피그마 파일에 연결해 주면 쉽게 쓸 수 있다.
그레이 스케일이나 폰트 스케일을 설정하기가 너무 막막하다면, 안드로이드/iOS 의 가이드를 그대로 긁어와서 세팅해도 무방하다.
iOS의 HIG에서 그레이스케일 값과 폰트 설정값을 그대로 가져와서 내 제품에 맞게 살짝 고쳐서 사용하면 충분히 보기 좋은 값으로 설정 가능하니, 이런 방법도 있다는 점 참고해 주시라!
* iOS HIG에서 공식적으로 제공하는 피그마 컴포넌트 파일 안에 컬러와 폰트 값이 모두 잘 제공돼 있으니 이 파일만 정독해도 많은 공부가 될 것이라고 생각한다. (아래 링크 참고)
https://www.figma.com/file/6O0yLc7ZefLEz7NSxBS7UN/iOS-17-and-iPadOS-17-(Community)?type=design&node-id=221-56229&mode=design&t=3JSb8Jw4bRbfGL7p-0
④ 간단한 프로토타입 구현하기
피그마로 프로토타입을 구현할 수 있다는 건 모두 다 아는 사실일 것이다. 그렇다. *GOAT 피그마*는 프로토타입도 구현할 수 있다!! 아주 세세하게 원하는 걸 모두 할 수 있는 건 아니지만, 간단히 UT를 진행할 수 있을 만큼은 충분히 구현할 수 있다. 프로토타입을 구현할 줄 알면 업무의 세계가 넓어진다. 주변 동료에게 UT를 돌려 피드백을 받기도 쉬워지고, 고객 인뎁스 인터뷰에서 보여주며 반응을 예측해보기도 수월하며, 개발자분들과의 소통과정도 한층 더 매끄러워진다. 디자인 QA 진행 시에도 구현 완성도를 체크하기 좋다.
능력자들의 휘황찬란한 프로토타입에 기죽지 말고, 정말 기본적인 것만 할 줄 알아도 되니 꼭 연습해 두자. 피그마에서 제공해주는 연습 파일도 있고, 피그마 커뮤니티 내에 다른 사람들이 올려둔 목업을 보며 공부해도 된다. 아니면 유튜브를 봐도 좋고. 기본적인 프로토타입을 구현할 줄 알게 되면, 그때부터는 구글에 원하는 기능들을 검색해 가며 공부하면 된다.
구글 검색하기2. 빠르게 실무 능력 올리는 팁
① Copy & Paste(클론 앱 만들기), 레퍼런스 쌓기
개발에서 주로 쓰는 말인가 싶긴 한데, 클론 앱을 만드는 게 디자인 실무 능력을 올리는 데 있어서 정말 아주 많은 도움이 된다. 시중에 나와 있는 앱을 캡쳐해서 그대로 베끼며 마진, 패딩, 폰트 사이즈 등 화면에 대한 기본적인 감을 잡아나갈 수 있다. 아무리 학교에서 과제를 하며 배우고 나와도, 막상 실제로 작업하려면 그야말로 하얀 건 백지고 까만 건 글씨가 된다. 흰 프레임이 그렇게 막막할 수가 없다. UXUI가 좋다고 평가받는 앱을 그대로 베껴 만들어 가다 보면 어느새 그 크기 감이나, 여백감 같은 감각을 체득할 수 있다.
디지털 프로덕트를 평소에 많이 보고/써 보는 것도 굉장히 좋다. 트렌드 파악뿐만 아니라 어떤 부분을 어떻게 해결했는지 살펴볼 수 있어 아주 좋은 공부가 된다. 차곡차곡 쌓인 레퍼런스가 자판기가 되어 필요할 때 쏙쏙 뿜어져 나올 것이다. 진짜다!
② 역기획 하기
평소에 쓰는 앱을 역기획 해보는 것도 매우 도움이 된다. 왜 이 서비스는 플로우를 이렇게 짰는지, 왜 버튼은 여기 있어야만 했는지, 왜 컬러는 이걸 썼는지. 각종 의도를 추론해가며 거꾸로 올라가 보다 보면 재미는 물론이거니와 디자인 논리력이 굉장히 향상될 수 있다. 앱 전체 다를 역기획하는 것도 물론 좋지만, 특정 플로우만 작게 작게 짬짬이 역기획 해 나가는 것만으로도 충분하다. 더 나아간다면, 실무적 관점을 벗어나 비즈니스적 관점에서 이건 왜 이렇게 만들어져야만 했는지를 생각해 보는 것도 시야를 넓히는 데 많은 도움이 될 것!
③ 전체 플로우 파악하기
프로덕트 전체의 플로우를 머릿속에 그릴 수 있으면 좋다. 제품 전체의 플로우가 어떻게 흘러가는지 알고 있으면 기획/디자인 자체에도 도움이 될 뿐만 아니라 다양한 케이스를 자연스럽게 떠올릴 수 있게 되기 때문에 코너 케이스 색출에도 많은 도움을 받을 수 있다. 한마디로 기획 빵꾸 색출 스탯이 빵빵하게 올라갈 수 있다는 것!
④ 사이드 프로젝트
사이드 프로젝트는 실무/기획 능력 향상의 치트키나 다름없다. 팀을 꾸려 사이드 프로젝트를 해 보는 게 물론 가장 좋지만, 여의치 않다면 혼자 본인 만의 아이디어를 펼쳐내 보는 것도 충분히 가치가 있다. 아이디어를 러프한 스케치로 시각화해 내고, 기획을 만들어 내고, 세부 기획과 로직을 짜 가며 화면을 만들다 보면 제품을 만들 때 그 단면만 보는 게 아니라 다양한 영향을 고려할 수밖에 없게 된다. 사이드 프로젝트는 나무가 아닌 숲을 보는 데 굉장히 많은 도움이 되는 연습이며, 계속 연습한다면 아주 당연하게도 실무 능력은 따라올 수밖에 없다. 손이 빠른 건 디자이너로서 굉장한 장점이니만큼 짬짬이 꼭! 해 보면 좋겠다.
3. 피그마 팁
① 알면 작업 속도가 올라가는 몇 가지 단축 키(맥 기준)
피그마 단축키.. 라고 검색하면 아주 살벌하게 많다. 그거 다 외우고 쓰는 사람이 있을까 싶을 정도로. 물론 있겠지만 일단 난 아니다. 사실 근데 그걸 다 외우지 않더라도, 솔직히 꼭 필요한 몇 개만 알고 있으면 작업 속도에 부하가 걸릴 일은 절대 없다. (이건 정말 내가 증명할 수 있다.) 실무에서 꼭 알면 좋을 몇 가지 단축 키 소개는 아래에 ↓↓
- cmd+\: 피그마 양 옆 툴바 감추기
- cmd+opt+shift+r: 프레임 크기를 자동으로 프레임 안 요소 크기에 맞추기
(이거 진짜 요긴하다! 피그마 작업하다 보면 프레임 크기가 컴포넌트보다 지나치게 클 때가 있는데, 일일이 손으로 맞추자면 대박 귀찮다)
- cmd+c / v: 복사 / 붙여넣기
- cmd+shift+v: 붙여넣을 곳의 설정값 그대로 붙여넣기(폰트 Weight, 컬러 등)
- cmd+z: 뒤로가기(실행 취소)
- cmd+[ / ]: 해당 컴포넌트 뒤로 / 앞으로 보내기
- cmd + shift + [ / ]: 해당 컴포넌트 가장 뒤로 / 가장 앞으로 보내기
- cmd+g: 그룹으로 묶기
- cmd+opt+g: 프레임으로 묶기
- cmd+b: 폰트 Weignt 볼드
- cmd+m: 전체 선택
- 프레임 전체 선택하고 cmd+v: 복사한 컴포넌트를 위치값과 함께 전체 프레임 안에 붙여 넣기
일단 정말 기본적으로 이 정도 알고 있으면 작업 속도에서 손해 볼 일은 절대 없으니 꼭 숙지하시길!
② 알면 도움되는 피그마 플러그인
피그마엔 플러그인이 굉장히 잘 되어 있다. 이것저것 쓸만한 게 참 많지만, 다 차치하고 딱 기본만 몇 개 적어두려고 한다.
Find and Replace: a 단어를 b로 모두 바꿔야 할 때, a레이어명을 b레이어명으로 바꿔야 할 때 유용하다. 바꿀 단어와 바꾸고 싶은 단어를 입력하면 해당 단어를 모두 대치해 준다.
Content Reel: 목업 만들 때 필요한 프로필 사진, 이름, 전화번호, Lorem Ipsum 등 다양한 더미 콘텐츠를 제공한다.
한글 더미 / 한글 입숨: 영문이 아닌 한국어로 된 더미 텍스트를 제공한다.
Pixel Perfect: 사이즈가 소수점으로 잡힐 때, 해당 컴포넌트/프레임을 잡고 이 플러그인을 실행시켜 주면 소수점이 사라진다.
SF Symbols Browser / Material Design icons(Material Symbols): 각 OS 디폴트 아이콘을 손쉽게 꺼내 쓸 수 있는 플러그인이다.
Feather Icons: OS 디폴트 아이콘 외 조금 더 예쁜 아이콘을 쓰고 싶을 때 사용하기 좋다.
SF Symbol Creator: SF Symbol을 만들 수 있는 플러그인으로, iOS 개발자분들께 아이콘을 전달 드릴 때는 SF symbol화 해서 드리면 가장 편리하다.
Able: 색 대비 정도를 확인할 수 있다. 대비가 너무 적어 접근성이 떨어지진 않는지 확인할 때 용이하다. 색약, 색맹인 사람의 눈에 어떻게 보이는지를 확인할 수 있어 편리하다.
피그마 플러그인 Able(나도 이중 많은 플러그인들을 같이 근무했던 시니어 디자이너님을 통해 알 수 있었다! 돌고 도는 선순환 ~_~)
내가 작성한 것 외에도 각종 무료 일러스트 플러그인이나 그라디언트 제작 플러그인, 문법 체크, 표 만들기, 목업 플러그인 등 굉장히 많은 플러그인들이 다양하게 있으니, 적재적소에 잘 활용하길! (영문으로 플러그인 검색창에 원하는 키워드를 쓰면 잘 나온다. 한국어 관련 콘텐츠가 필요할 땐 한국어로 쳐도 간혹 나오긴 한다.)
③ OS 공식 피그마 컴포넌트(디자인 라이브러리)
각 OS는 공식적으로 디자인 라이브러리를 피그마 파일로 제공한다. 그 안에 디자인 작업에 필요한 웬만한 모든 것이 다 있으니, 찾느라 애 먹지 말고 이걸 사용하시라!
iOS: https://www.figma.com/file/6O0yLc7ZefLEz7NSxBS7UN/iOS-17-and-iPadOS-17-(Community)?type=design&node-id=221-56229&mode=design&t=3JSb8Jw4bRbfGL7p-0
Android: https://www.figma.com/file/5WRBdQL9bSb8z9jHjOA4aG/Android-UI-Kit-(Community)?type=design&mode=design&t=OA7BX05hbZfJHJLU-0
④ 프레임 이름과 컴포넌트 이름은 재깍재깍 바꿔주기
화면을 치다 보면 화면 개수가 어쩔 수 없이 굉장히 많아지게 된다. 이름을 그때 그때 바꾸지 않으면 Frame8475869처럼 무한 증식하게 되는데, 나중에 굉장히 헷갈린다. 뿐만 아니라 개발자분들과의 소통에서도 비효율이 발생하기 때문에, 잘 바꿔두면 나중에 고생을 안 한다. 이게 생각보다 작업에 몰입하면 생각이 안 나기 때문에, 루틴화해 두는 게 좋다.
⑤ 버전 히스토리 저장하기
실무를 하다 보면 때때로 롤백 해야 할 때가 있다. 혹은 히스토리 확인이 필요한 시점이 있기도 하고. 스프린트가 끝났을 때, 또는 중요한 변화가 있을 때 등 특정 시점에서는 반드시 버전을 저장해두는 걸 추천한다. 히스토리가 다 날아가면 눈물 나는 상황이 가끔 발생하기도 하기 때문..
햇병아리 주니어로 이제 막 발을 내디뎠다면, 남들보다 더 잘하기보단 우선 남들 하는 것만큼은 누구에게도 뒤지지 않게 충분히 잘해낼 수 있는 능력이 더 중요하다고 생각한다. 기본기라고 통칭할 수 있겠는데, 기본기가 바탕이 되어야 그걸 기반으로 더 뛰어난 역량을 불러낼 수 있기 때문이다.
간단히 말하자면 게임 같은 거다. 레벨 30을 찍어야 비로소 도적이든 궁수든 직업을 선택하고, 전직이 가능한 것. 기본기 없는 전직은 소리만 요란한 빈 깡통이나 다름없다. 언제 무너져도 안 이상한 모래 위에 쌓인 모래성 같은 거라고 본다.
내실 없이 소리만 요란한 깡통으로 무장한 고연차 시니어로 커리어를 쌓고 싶지 않다면, 내실이 먼저라는 사실을 절대 잊지 말자! 나 또한 매 순간 기억하고 경계해야 할 지점이다.
https://i.imgflip.com/1be852.jpg(사족) 나도 이제야 햇병아리를 겨우 벗어난 수준이라 이렇게 팁을 적는 게 조금은 우스울지도 모른단 생각이 살짝 들긴 한다. 하지만 분명 그 시절을 지나온 지 얼마 안 된 사람의 시선에서 필요한 걸 짚어주는 것도 어느 정도 그 가치가 충분히 있으리라 판단해 용기 내어 올려보았다 하하...
