사수 없는 신입 디자이너가 독학하는 방법
라이브러리에 있는 파일
선배의 작업물 뜯어보기!
저는 첫 직장에서 운 좋게도 상냥하고 성실하고 실력까지 좋은 사수를 만날 수 있었어요. 그런데 다들 본인 업무 하느라 바쁘니까 아무리 친절한 사수라고 하더라도 내가 먼저 물어보지 않는 한, 선배가 먼저 이것저것 알려주지는 않았어요. 그렇다고 너무 자주 이것저것 물어볼 수도 없는 노릇이었고요.
지금은 정말 세월이 많이 흘러서 이제 시니어 디자이너가 되었는데, 돌이켜 보면 실력을 단기간에 업그레이드 시켜줬던 방법은 선배가 작업한 파일을 열어서 직접 살펴보는 거였어요. 그 회사에서는 디자이너 각자가 작업한 디자인 파일을 하나의 공유 폴더에 올려놓는 시스템이었어요. 그 선배가 만들어 놓은 파일에서 디자인 소스를 가져다 쓸 일이 있어서 파일을 열어봤는데, 레이어 정리방법부터해서 내가 한번도 써보지 않았던 기능들 등등을 그 잠깐동안에 많이 배울 수 있었어요.
비슷한 경험이 또 있는데, 이건 다른 회사에서 근무할 때에요. 그당시 저는 신입이어서 인하우스 제품 디자인을 담당하고 있었어요. 그리고 어떤 외부의 큰 프로젝트가 있어서 그 건은 외부의 주니어 디자이너에게 의뢰를 한 생태였어요. 그렇게 프로젝트는 마무리 됐고 이후에 해당 프로젝트 클라이언트로부터 작은 수정사항 의뢰가 들어와서 제가 그 주니어 디자이너의 파일을 열어서 직접 수정해야 할 일이 있었어요. 이떄도 마찬가지로 레이어가 넘 깔끔히 잘 정리되어 있었고 또 새로운 기능들을 추가로 배울 수 있었어요. 백마디 말보다, 이렇게 직접 살펴보는 것이 훨씬 효과적일 수 있어요.
사수 = 대기업
그런데 회사에 사수가 없다면? 그래도 방법은 있어요. 대기업이 전체 공개해놓은 자료들을 살펴보면 돼요. 감사하게도 이미 많은 대기업들이 그들의 디자인 관련 내용들을 많이 공개해놓고 있어요.
구글의 경우에는, '머티리얼 디자인 시스템'이라는 이름으로 그들이 사용하는 모든 디자인 관련 내용들을 머티리얼 웹사이트를 통해 공개하고 있어요. 구글 뿐만이 아니에요. 네이버, 애플, 등등 .. 왠만한 대기업드은 자체적으로 제작한 디자인 시스템이 있고 이 내용들을 공개하고 있어요.
다른 디자이너들은 피그마 내에 있는 디자인 요소들을 어떻게 정리할까?
신입이라면 작업하다가 문득 이런게 궁금하실거에요.
유일무이한 정답은 없지만, 이 또한 대기업의 공개 자료를 참고하면 돼요. '디자인 작업 파일 내에 있는 디자인 요소들을 정리하는 방법'을 '디자인 시스템'이라고도 불러요. 면밀히 따지고 들면 완전 똑같은 개념이라고는 할 수 없지만, 이해를 돕기 위해 그냥 일단 동일하다고 생각하고 계셔도 될 것 같아요.
저 같은 경우에는 앱디자인을 할 때 크게 두가지 피그마 파일을 열어놓고 사용하고 있어요.
1. 제품 디자인 작업 파일
하나는 내가 만들고 있는 앱에 들어가는 각각의 화면 디자인 작업을 하는 파일이에요
2. 디자인 시스템 UI kit 파일 (← 바로 요게 디자인 시스템이에요.)
그리고 다른 하나는 그 제품 디자인 작업 파일에서 반복적으로 사용하는 요소들을 한 군데에 모아놓은 거에요. 예를들어 버튼이라던가 입력창 같은 것들요.
그리고 2번 디자인 시스템 UI kit파일은 또 페이지를 크게 3개로 나눠서 관리해요.
2-1. 스타일만 모아놓은 페이지
2-2. 컴포넌트만 모아놓은 페이지
2-3. 기타 등등 임시 보관용 요소들 모아놓은 페이지
바로 이 2번에 해당하는 내용들은 대기업이 친절하게 잘 알려주고 있어서 그들의 웹사이트에 가서 찬찬히 함 읽어보시면 돼요. 그런데 가서 보면 아시겠지만 내용이 으~마~어마 하게 많아요. 날잡고 각잡고 앉아서 읽기 시작한다고 하더라도 몇 일내에 끝내기는 어려울 수도 있어요.
핵심 내용만 간추려서 보고 싶은 경우에는 제가 정리해 놓은 내용이 있으니 참고해주세요. 컴포넌트, 스타일 내용까지만 알고 계셔도 이 디자인 시스템 만들고 관리하는데에 큰 무리는 없을거에요!
▼ 디자인 시스템 개념에 대한 전반적인 그림
