비전공자 디자이너로 살아남기_(1) 신입~주니어
인사팀 사원에서 프로덕트 디자이너가 되기까지
나는 경영정보학을 전공했다.
학부 시절 발표 PPT를 만들다가 레이아웃이라는 걸 알게 되었고 그런 비슷한 일을 하는 것이 이쪽 일이라는 걸 알게 되었다.
원래는 종합병원에서 인사 업무를 했었고, 일 자체에 열정이 생기지 않고 재미가 너무 없어서 내 적성에 맞는 일로 전직을 시도했다. 나는 비전공자였다. 비전공자에 나이도 많은 상태에서 시작했다.
모르는 것 투성이에 늘 부족한 것만 같은 나날들이 나를 불안하게 만들고 때로는 좌절하기도 했지만 그럼에도 불구하고 일을 할 때 '행복'을 느낀다.
아직도 주위 어른들은 그거 웹디자이너냐? 그거 돈 못 벌지 않니? 하고 잘 모르시는 말들을 하셔서 슬프지만.. 일일이 설명해 드리기도 힘들고, 우리가 이런 일을 한다. 참 좋은 일이다! (아니 삼촌, 저 같은 사람들이 있어서 지금 삼촌이 스마트폰 편하게 사용하시는 거 아입니까!!!!!라고 속으로 말했다.)
프로덕트 디자이너로 일하며 적성에 맞는 일을 업으로 살아간다는 것, 그것 자체가 감사한 하루들이었다. 지금도 크게 무언가 이룬 것은 없는 것 같아서 늘 발전을 갈망하는 것 같다.
전공이 디자인이 아닌 내가 어떻게 이 직군에 잘 정착할 수 있을까를 늘 고민했던 것 같다. 나와 같은 고민을 하고 있을 신입/주니어 디자이너들에게 내가 온 길이 정답은 아니지만 나는 이렇게 지나왔다고 말해주고 싶다.
1. 생신입 시절
첫 번째, 인사팀 사원에서 상세페이지 디자이너가 되다.
우선 나는 상세페이지 디자이너로 입문했다. 상세페이지 디자이너가 되면서 디자인 업계에 발을 들였고, 이때 일러스트와 포토샵을 정말 정말 열심히 배웠다. 코딩은 국비 교육을 들었지만, 디자인은 전부 나 혼자서 독학했다. 유튜브, 블로그 등 인터넷에 정말 좋은 무료 강의가 널리고 널렸다.
< 일러스트/포토샵 툴 배우며 기초 쌓기에 좋았던 유튜브 강의 List >
- 포토샵과 일러스트 관련 유튜브 강의 추천
- 봤던 강의 링크 아무거나 걸어놓겠으니, 들어가서 다른 강의 참고하기!
1) 디자인 베이스: https://youtube.com/playlist?list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w
- 디자인 베이스님은 깔끔한 영상 스타일과 핵심만 차근차근 잘 설명해 주시는 부분이 배우기 좋았고, 웹디자인 기초부터 무료로 깔끔하게 공부할 수 있어서 너무 좋았던!
2) 마디아: https://youtube.com/playlist?list=PLs8gZ5b9piXWEcHBy0h4oIdVKnNtHrcFq
- 아이콘 그리기 연습할 때 마디아님 영상으로 기초 정말 잘 쌓았습니다.
3)디자인숩: https://youtu.be/IOgzgIAyiNs
- 디자인숩님은 진짜 상세페이지 만들 때 엄청난 꿀팁을 전수해 주셔서 제가 다시 한번 감사드립니다.
4) 제이슨킴: https://youtu.be/w5BFmMuka7c
- 이 사진이 합성으로 만든 사진이랍니다. 믿기나요? 합성의 대가 제이슨킴님 유튭 강의 보면서 따라 하고 합성 연습 엄청 많이 하고 스킬도 진짜 많이 늘어서 상세페이지에 없는 사진도 이것저것 조합해서 뚝딱 만들어내고 능력 있는 디자이너가 될 수 있었습니다.
두 번째, UI/UX 디자이너 1년 차
이때는 10개월 정도 준비를 위한 공백기가 있었다. 이때 4-7개월은 국비로 퍼블리싱 교육을 들었고, 나머지 기간은 개념 잡기, 이론 공부, 피그마 툴 공부를 하며 시간을 보냈다.
광고대행사 디자이너에서 인하우스 UI/UX디자이너가 되기까지 준비했던 것들을 소개하겠다.
1. 웹디자인/모바일 디자인 이론 알기
웹/앱 디자인으로 넘어오면서 기본기가 정말 중요하다는 것을 알게 됐다. 특히나 신규들이 많이 모르는 것들이
- 타이포그래피
- 그리드
- 컴포넌트 단위의 디자인(디자인 시스템)
- 웹 접근성 등
사용자 인터페이스 설계를 위해서는 우선 웹디자인 시절부터의 기본 개념과 히스토리 파악이 필요하다고 생각했고, 여러 가지 책을 읽거나 부족한 것 같을 땐 강의를 구매해서 공부하기도 했다. 진짜 도움 많이 받았던 강의 2가지만 소개해보겠다.
1) 유료 강의:
- 'UIUX 디자인 패키지'라는 이름의 강의였는데, 비전공에다가 생초짜인 나에게는 정말 도움이 많이 됐던 강의였다. 그리트, 폰트, 반응형 등등 모든 기초 개념이 잘 설명되어 있었다. 오래전에 들은 거라 지금도 같은 강의가 있는지는 모르겠다. 꼭 리메인이 아니어도 이런 기초 개념 유료 강의가 진짜 많으니 잘 맞는 강의로 투자해서 개념부터 탄탄히 채워 넣는 걸 추천한다.
2) 유/무료 강의
https://www.inflearn.com/courses/creative/ux-ui
- 인프런에는 저렴한 강의도 있고, 아예 무료인 강의 중에 뽑아먹을 수 있는 강의도 있으니 필요에 맞게 공부해 보길 추천!
3) 연정스 피그마: https://youtu.be/Y7_LfW8SmW8
- 연정님 피그마 강의로 피그마를 입문해서 정말 감사드린다고...! 말씀드리고 싶다. 피그마 강의 제대로 된 게 연정스 피그마가 당시에는 유일했던 것 같다. 오토레이아웃이나 컨스트레인츠 같은 부분도 쉽게 이해할 수 있었다.
4) 피그마 커뮤니티: 디자인 시스템
- 피그마 커뮤니티에는 정말 좋은 자료들이 많다. 참고할 수 있는 디자인들이 많고, 남들은 어떻게 설계했고 어떻게 레이어를 쌓았는지 오토레이아웃을 사용하는지 등등 궁금하다면 피그마 커뮤니티를 방문해 보길.
2. 퍼블리싱 배워보기 -> 국비 퍼블리싱 교육
솔직히 디자이너 코딩 안 배워도 된다. 이런 사람도 진짜 많고, 어느 정도 일리도 있다고 생각한다. 하지만, 나는 공부했다. CSS와 바닐라 자바스크립트, 리액트 극초반부까지 배우다가 그만뒀고 배웠던 이유는 '개발자와 더 잘 소통하고 싶어서'였다. 배우는 건 개인의 자유라고 생각하지만 배워서 나쁜 건 없다!
그래도 이 정도는 알면 참 좋다고 생각하는 개념은
- CSS 개념 익히기
- 개발자의 직무 이해하기
개발팀에 디자인을 핸드오프 할 때, 피그마가 전부 다 알려줄 거라는 착각을 하면 안 된다. 디자이너에겐 당연한 것이 개발자들에겐 (?)가 떠오르게 할 수 있기 때문이다.
나 같은 경우에는 개발자분들이 한 번에 이해하기 힘들 것 같다, 나의 디자인 의도 파악이 좀 어려울 것 같다 싶으면 스타일 가이드를 옆에 기록해 둔다.
예로 들면,
- text box의 height는 flex로 해주세요.
- 박스 요소 align: center
- 버튼 요소 space between
(display: flex; flex-direction: row; justify-content: space-between;)
이런 식으로 가이드 작성해 두면 개발자분들이 의도를 알아채고 반영해 주신다.
하드코딩으로 퍼블리싱을 배웠던 기억이 있기 때문에,
'이거 버튼 빼도 양쪽 간격 벌어지게 해 주세요.'보다는
버튼 요소 space between이라고 관련 용어를 사용해서 간략하게 남겨두는 편이다.
메모장에 하드코딩하다가 VS Code로 열심히 코딩하던 시절..< 도움 받았던 강의/블로그 List >
1) 리베 하얀: https://youtu.be/OXEZEYVs8dA
- 웹 사이트 하나 만들어보기! 할 때 너무 어려워서 리베 하얀 님 유튜브 보면서 코딩했다. CSS로 별 거 다 하시는 분이다.
2) 블로그: https://heropy.blog/2018/11/24/css-flexible-box/
3) 책 읽기: 개발자가 오늘도 안된다고 했다 등 다수
하나둘씩 사서 읽은 책들맨 윗줄은 상세페이지 디자이너 시절 읽었고 나머지는 그 이후 쭉 읽었다. 인터넷엔 좋은 아티클이 많다. 하지만 책만큼 정제되고 잘 정리된 콘텐츠는 없다고 생각해서, 책 읽고 공부하는 것을 가장 추천한다.
트렌드는 온/오프 두루두루 살피고, 개념이나 이론은 책을 활용해 보는 것도 좋다.
3. 클론 디자인
말 그대로 클론 하는 코딩으로, 주로 웹 개발에서 쓰이는 용어이며 우리가 자주 사용하는 서비스나 웹사이트를 밑바닥부터 만들어가는 강의를 의미한다. 위에 리베 하얀 님 강의도 이런 의미에서 활용했다.
- 클론 코딩처럼 클론 디자인 해보기
- 클론 디자인을 해보면서 레이아웃의 ‘쫀쫀함’을 위한 '디자인 감각' 익히기
나는 신입 때 아무리 디자인을 해도 UI가 쫀쫀해 보이지 않았다.
도대체 왜지!?!?!? 왜 이렇게 내가 하면 엉성해 보일까...
이때부터 여러 서비스들의 간격과 수치를 마구 뜯어보기 시작했다^^
이것 말고도 뜯어본 서비스가 많지만 여기까지..그리고 클론 디자인을 많이 해봤다.
내가 디자인 감을 익혔던 방법스크린샷한 이미지를 내가 디자인하려는 프레임에 맞게 사이즈를 맞추고, (나 같은 경우는 ios 기반으로 375*812 사이즈에 맞게 디자인했다.) 똑같이 그려 넣어보는 거다. 이렇게 따라 해보면 이 서비스는 어떤 간격을 쓰고 어떤 특징을 갖고 있는지 알 수 있다. 토스 같은 경우에는 간편한 금융서비스를 모토로 양 사이즈 마진을 조금 넓게 가져가고, 시원시원한 폰트 사이즈를 사용했다.
이런 식으로 인사이트를 얻을 수 있고, 간격이나 레이아웃에 대한 감을 잡아나갔다.
아 그리고 실력 있는 좋은 사수분을 만나게 되어, 사수님의 디자인 시안도 뜯어보고 간격과 레이아웃도 확인해 가면서 감을 많이 얻었던 것 같다.
아이콘도 정말 많이 따라그렸다.
전부 피그마로 그렸는데 한 번 시작하면 거의 몇 백 개는 그린 것 같다.
그리고 내 디자인은 조금씩 나아지고 있었다.
부끄러운 내 포트폴리오(일부)를 공개합니다^^!위 이미지는 신입 시절 내 포트폴리오 일부와 막 1년을 채웠을 때의 내 포트폴리오의 일부이다. 친환경 브랜드만 판매하는 커머스 플랫폼을 콘셉트로 디자인했는데, 생 신입때와 비교해 보면 정말...^^^^ 어마어마해
물론 아직도 부족한 것 투성이에 모르는 것 투성이라, 계속 공부하고 연습하고 갈고닦을 예정이다.
(요새는 피그마로 프로토타이핑 연구 중)
Floating button 프로토타이핑(피그마에서 이런 것까지 되는 줄 몰랐다는...? 분발하자^^)
< 도움 받았던 강의/블로그 List >
1) WWIT: 앱 화면 스크린 샷 모음 사이트(국내 기반이라 지금도 가장 많이 애용)
2) Mobin: 해외 버전 wwit(이게 원조)
https://mobbin.com/browse/ios/apps
3) 핀터레스트: 디자이너들에겐 빠질 수 없죠?
4. 사이드 프로젝트
- 남들과 사이드 프로젝트를 하든 혼자 해보든 반드시 사프는 해보는 것을 추천
- 너무 콘셉트 디자인에만 치우치지 않도록 주의하고, UIUX나 프로덕트 디자이너는 '문제 해결'이 가장 중요하고 그것을 시각적으로 풀어내어 가치를 전달하는 집단임을 잊지 말자.
- 남의 포트폴리오를 많이 살펴보자. 다만 다들 이렇게 한다고 해서 꼭 그렇게 해야 하는 것은 아니다. 나만의 개성을 잃지 않되, (여기서 개성은 나만이 가지고 있는 '경험') 보는 사람이 쉽게 와닿을 수 있도록 풀어내라고 말해주고 싶다.
- 실제로 유명 N사 디자이너 분과 커피챗을 했을 때 내용이 술술 잘 읽히면, 포트폴리오 장수가 많아도 괜찮은 것이라고 말씀해주셨다. 물론 무지막지하게 많은 건 논외)
특히 무작정 더블 다이아몬드 프로세스로 포트폴리오를 다 덮어버리진 않았는지 유의...(본인이 생신입 포트폴리오 만들 때 경험은 하나도 녹이지 않고, 남들 따라해서 더블 다이아몬드 프로세스에 어거지로 내용을 채워서 포트폴리오를 만들었기 때문에ㅠㅠ... 물론 신입들에겐 경험 자체가 없을 수도 있지만 최대한 다방면으로 경험할 수 있는 건덕지를 찾아야한다.)
지금 싹 갈아 엎은 포트폴리오는 '문제 해결'이 메인이다. 문제를 찾아서 가설을 세우고, 어떠한 워크 프로세스로 그 문제를 해결했고 회고 후 성과는 어땠는지를 중심으로 제작하기 때문에 더블 다이아몬드의 틀에 박힌 형식은 거의 없고 나의 상황에 맞게 문제를 해결했던, 문제 해결 과정을 녹여내었다.
디자인에 앞서서 레퍼런스는 최대한 많이 살펴보자.
이 앱 저 앱 다운 받아서 다양한 UI를 살펴보는 것이 가장 좋았다. 앱으로 살펴보면 인터랙션과 디자인을 둘 다 확인할 수 있기 때문이다.
< 도움 받았던 레퍼런스 사이트 >
1) 비핸스 https://www.behance.net/
2) 노트폴리오 https://notefolio.net/
3) 구글링
4) 핀터레스트
5) 디비컷 https://www.dbcut.com/
6) 지디웹 https://www.gdweb.co.kr/sub/list.asp?Txt_fgbn=7
*기타 유명 디자인 에이전시의 포트폴리오 살펴보기
** 비핸스나 노트폴리오에는 콘셉트 디자인만 수두룩해서 UX를 참고하기에는 비추천 UX는 WWIT나 MOBIN 추천
5. 레퍼런스는 디자이너의 자산
- 레퍼런스는 디자이너의 자산이다. 나는 커머스 플랫폼에 종사하고 있기 때문에 수많은 쇼핑 앱을 설치하고 주기적으로 들여다본다. 인상 깊거나 벤치마킹 해보고 싶은 UI는 캡처해서 핀터레스트에 바로 올리고 앨범에서는 바로 지워준다.(안 그러면 파일 관리가 너무 힘듦...)
아래도 다시 한번 더 정리해야 하긴 하지만^^ 핀터레스트에서 좋은 레퍼를 발견하면 카테고리 별로 분류해서 저장해 두고, 내가 개인적으로 직접 캡처한 화면들은 따로 보드에 모아두는 중이다.
레퍼런스 찾는 것도 시간이 많이 드는 일이라, 미리미리 많이 모아두면 분명 도움 될 거다.
(무작정 저장하면 찾을 때 시간이 더 들고 중복될 수가 있어서 폴더링을 잘해두는 것이 중요.)
나의 핀터레스트 보드 중 일부 캡처2. 2년 차 ~ 현재
그렇다면 요즘은 어떻게 자기계발하고 노력하고 있을까
1. 책 읽기
- UI/UX 관련 서적 읽고 정리해 보기
- 심리학, 인간 과학 관련 서적
2. 매일 아침 디자인 관련 아티클 읽기
- 브런치/서핏/미디엄/티스토리 등등
< 트렌드 관련 아티클 사이트 >
1) 요즘it: https://yozm.wishket.com/magazine/
3) 브런치 it 트렌트 탭: https://brunch.co.kr/keyword/IT_%ED%8A%B8%EB%A0%8C%EB%93%9C?q=g
4) 썸트렌드: https://some.co.kr/
5) 지금 써보러 갑니다 상황별 사례: https://airtable.com/shr6SrF27Ikoz2v1B/tblBLUgXMVJeERnNq/viwOq0fAMm5P0Jmrl
3. 디자이너 커뮤니티 활동
- 1000명 이상 회원들이 활동하는 오픈채팅방 3곳 참여 중
4. 포트폴리오 꾸준히 업데이트하기
- 글감만이라도 업데이트
- 포트폴리오의 최신화/온라인화(노션)
5. 최신 디자인 스킬 클론
- 글래스모피즘 등
- 아이콘 디자인 등 콘텐츠 디자인도 연습
요즘은 이런 루틴으로 지내고 있고, 지금 회사에서는 Data를 기반으로 스프린트 주제가 정해지기 때문에 관련 인사이트에 대해 고민 중이다.
이다음엔 디자인 실무를 하면서 느꼈던 점(멘탈 관리 등)에 대해 소개해보기로!
이만, 신입-주니어 디자이너들에게 많은 도움이 되었기를 바라며 : )
디자이너 모두 자긍심을 가지고 행복하게 일할 수 있기를
+혹시 다음 발행글 주제에 관련해서
저와 비슷한 연차분들에게 궁금한 내용이 있다면 댓글로 달아주세요.
고민 해결에 도움이 된다면 다음 발행글에 포함하겠습니다.
