UX 디자이너가 되고 싶은 분들에게(3)
UX 디자이너가 다루는 툴의 범위
UX 디자이너를 하고 싶다고 찾아오는 후배들이나 메일을 보내주는 분들의 공통된 질문들 중 하나는 바로 UX 디자이너가 되려면 어떤 툴을 공부해야 하나요?이다. 사실 아주 간단한 대답이 될 수 있는 질문이지만 이 질문으로 꽤 긴 글을 쓰는 이유는, UX 디자이너가 다루면 좋은 툴들이 계속해서 생기고 있고 디자이너는 이 스텝에 맞춰가지 않으면 도태될 수밖에 없는 위치이기 때문이다.
다음 글에서 말하겠지만 나는 포토샵과 일러스트레이터가 좋아서 웹디자이너가 되었다. 그리고 지금은 UX 디자이너로 일하고 있다. 나와 같은 수순으로 디자이너가 되려는 사람들은 UX 디자이너도 포토샵과 일러스트레이터를 할 줄 안다면 된다고 생각할지 모르겠다. 나도 그랬으니. 하지만 사실 UX 디자이너가 다뤄야 하는 툴과 지식의 범위는 꽤 넓다.
3. UX 디자이너가 다루는 툴의 범위
UX 디자이너가 다루는 툴은 크게 둘로 나뉜다. 필수적인 툴과 할 수 있으면 더 좋은 툴.(개인적인 생각입니다.) 필수적인 툴은 디자이너가 업무를 하면서 다뤄야만 하는 디자인적인 툴이고 할 수 있으면 좋은 툴은 개발이나 기획에 관련된 툴일 것이다.
- UX 디자이너라면 기본적으로 다룰 수 있어야 하는 툴과 지식
디자인하는 스케치와 XD, 도와주는 포토샵과 일러스트레이터, 개발자와 이어주는 제플린
UX 디자이너라면 기본적으로 다룰 수 있어야 하는 것에는 기본적으로 포토샵/일러스트레이터/스케치/XD 가 있을 것이다. 이 툴들은 모두 화면을 만들고 구상하는 데 사용되는데 보통 mac을 사용하는 회사에서는 스케치 프로그램을 사용한다.(비중이 제일 높다.) 어도브 XD 프로그램을 사용하는 회사도 여럿 있다. 스케치와 XD는 디자인/구성/프로토타입 까지 모두 가능하기 때문에 디자이너가 기본적으로 사용할 줄 알아야 하는 툴이다. 두 툴은 내용이나 구성이 꽤 비슷해서 실제로 하나만 잘 익히면 나머지 하나는 처음 사용하더라도 익숙한 느낌이 나서 금방 적응이 가능한 툴이라고 할 수 있다.
포토샵과 일러스트레이터는 스케치와 XD에서 하지 못하는 작업들을 수행한다. 예를 들어 화면에 사용할 무료 이미지나 촬영 이미지를 보정하거나 화면에 맞게 정교하게 구성하고 합성 및 수정할 경우에는 포토샵을 주로 사용하는 편이다. 스케치나 XD에서는 이미지를 정교하게 다듬을 수 없기 때문이기도 하고, 포토샵이 특화되어 있는 부분이라는 이유도 있다. 일러스트레이터는 주로 아이콘을 만드는 데에 사용한다. 스케치 안에서도 아이콘은 만들 수 있지만 일러스트레이터에서 아이콘을 만들고 나면 스케치 안에서 만들기 불편하다는 것을 느낄 것이라고 생각한다. 필자는 일러스트레이터 안에서 아이콘이나 로고를 만들고 svg 파일 화해서 스케치에서 불러와 사용하는 것을 즐기는 편이다.
이 기본 프로그램들을 사용하여 디자인을 한다면 개발자에게 보여주는데 쓰이는 '소통을 위한 툴'이 있다. 대표적인 것이 제플린이다. 제플린은 디자이너가 작업한 화면을 업로드하고 그 위에 코멘트들을 달 수 있는 툴이다. 개발자와 함께 공유하여 사용할 수 있는 것이 특징인데, 그 안에 든 정보들이 아주 대단하다. (스케치와 연동되는 툴이라서 스케치를 사용한다면 아주 편리하다.) 작업한 화면을 업로드하기만 하면 해당 폰트 정보와 박스들이 자동으로 html로 표현되어 픽셀 하나하나가 클릭만 하면 보이는 형태이다. 거기에 최근 업데이트된 내용으로는 디자이너가 기존의 작업화면을 업데이트하였을 때 어떤 부분이 업데이트되었는지 메모할 수 있는 부분 또한 생겼다. 개발자들과의 소통이 중요한 UX에서 그 부분을 좀 더 쉽게 만들어주는 툴이라고 할 수 있겠다.
UX 디자이너가 기본적으로 알아야 할 지식에는 그리드/기본적인 개발환경/폰트 사이즈 및 간격 등이 있겠다. 디자인을 하기 위해서는 당연히 폰트의 사이즈나 간격/그리드에 대해서 아주 기본적인 지식이 갖춰져 있어야 한다. 화면을 봤을 때 어떤 그리드/간격이 편해 보이는지, 자간과 줄간은 어떻게 배치해야 더 안정적으로 보이는지에 관련해서는 연습하고 또 실무를 겪다 보면 자연히 쌓인다고 생각한다. (이 점에 관해서는 브런치에도 많은 분들이 정보를 올리고 있고 나 또한 그 글들을 참고하여 공부하고 있다. 검색창을 이용해서 꼭 정보를 얻길 바란다.)
하지만 실무를 쌓으면서 내가 느낀 것은 디자이너 또한 기본적인 개발환경 정도는 알고 있어야 한다는 것이다.
예를 들어서, 반응형 사이트를 만드는 데에는 대충이라도 어떤 식으로 개발을 하는지, 내가 디자인한 화면을 개발자가 현실화시키기 위해서는 어떤 파일들이 어떤 구성으로 필요한지 등은 숙지가 가능해야 한다. 그걸 이해하려면 기본적인 개발의 이해도가 있어야 한다고 생각한다. 사실 실무업무를 하면서 개발자에게 필요하다고 생각하는 파일을 주지 않았다가 뒤늦게 다시 만들어야 했던 상황도 생겼었는데 당시에는 정말 내가 개발에 관한 이해가 필요하구나..라는 생각을 했었다.
.
.
-UX 디자이너가 다루면 더 좋은 툴과 지식들
UX 디자이너에게 필수는 아니더라도 알고 있으면 좋은 툴과 지식에는 개인적으로 프로토타입 툴이라고 생각한다. 사실 프로토타입 툴은 선택이 아닌 필수사항이지만 스케치나 XD가 워낙 쉽게 되어있기 때문에 별도의 프로토타입 툴을 필수적으로 공부하지는 않아도 된다고 생각한다. (역시 개인적인 생각이다.) 하지만 어떤 회사에서 어떤 프로토타입 툴을 사용하게 될지는 모르는 일이니. 개인적으로 알아두면 좋은 프로토타입 툴에는 인비전/피그마/프로토 파이/마블이 있을 것 같다. 최근 마블에 이어서 피그마가 꽤 핫하게 뜨는 것 같은데 여러 사이트나 유튜브 동영상을 통해서 배울 수 있는 공간이 있으니 예비 UX 디자이너라면 한 번 구경해 보는 것도 좋을 듯하다.
UX 디자이너가 알고 있으면 좋은 지식에는 개발언어가 있겠다. 기획을 할 수 있으려면 사실 개발언어를 이해하는 것만큼 좋은 것이 없다. 잔뜩 신나게 기획을 했는데 구현이 될 수 없다면 그만큼 힘이 빠지는 일도 없으니 말이다. 개발언어에는 기본적으로 html/css/java 등이 있을 것이나 이에 대해 개발자만큼 자세하게 알 필요는 없다. 하지만 기본적인 숙지는 되어있으면 본인에게 아주 편할 것이다. 또한 그에 더불어서 데이터 구현에 관한 부분도 알면 아주 좋다. 이 부분은 실무를 하다 보면 직접 부딪히며 더 크게 배우게 될 것이라고 생각하는데, 내가 구상한 플로우 내에서 데이터베이스가 어떤 식으로 구현되어야/혹은 어떤 곳에서 어떻게 가져와야 가능할지를 고려해야 하기 때문이다. 개발자에게는 퍼블리셔, 프론트엔더 그리고 백 엔더가 있는데 퍼블리셔와 프론트엔더와의 협업을 위한 툴과 지식이 있다면 백 엔더와의 소통과 작업을 위한 것이 바로 그 데이터 구현 부분이 아닐까 생각한다. 따로 어떤 공부나 툴이 있다기보다는 백 엔더가 일하는 모습이나 충분한 대화, 개발의 이해도가 있다면 충분히 실무를 통해서 접할 수 있는 부분이기도 하다.
지금까지 UX 디자이너가 필수로 알아야 할 툴과 지식 혹은 알면 좋은 것들을 써보았다. 사실 정말 수많은 프로그램들이 나오고 있는 터라 이 내용은 계속해서 업데이트되어야 한다. 다양한 디자인과 개발환경이 나올수록 더 편리하고 좋은 툴들은 계속해서 나오고 있기 때문이다. 그런 점을 보면 디자이너도 개발자만큼이나 언제나 새로운 환경에 귀 기울이고 촉각을 세우고 있어야 하는 것 같다.
다음 글에는 UX 디자이너가 되고 싶은 분들에게 마지막 글로, 내가 UX 디자이너를 하게 되기까지의 날들을 적어 보려고 한다.
