디자이너를 위한 프론트엔드 개발 취미생활
이 글은 UI 디자이너(UX 디자이너, 프로덕트 디자이너등 디지털 디자이너를 광범위하게 포함합니다.)와 프론트엔드 코드에 관련된 심도가 얕은 글입니다. 한 명의 디자이너가 어떻게 프론트엔드 코드를 이용하고 있는 지에 관련된 이야기를 풀어보려고 합니다. 피드백은 언제나 환영합니다.
디자인 커뮤니티, 특히 UI 디자인에 관련된 커뮤니티에서 흔하게 볼 수 있는 질문입니다. 조금 깊이 생각해보면 생각보다 복잡한 질문이지만, 제 생각을 짧게 적어보면…
UI 디자이너라면 ‘실제로 표현을 하는 개발’에 관련된 프론트엔드를 알면 좋다고 생각합니다. 꼭, 알아야한다는 건 아니지만, 세상에 (위법적인 지식이 아닌 이상에야) 지식은 많으면 많을수록 좋으니까요. 더불어 ‘생각보다 몸값이 높아질 기회’가 많아지는 것도 장점이겠고요.
(개발자로 직군을 바꾸는 이야기가 아니라 디자이너의 ‘채용 우대사항’에 프론트엔드 개발 이해가 포함되는 경우가 많아지는 것 같습니다.)
어찌되었든 프론트엔드 개발은 ‘시간을 내서 배워두면 좋은’ 것이라 생각합니다.
백엔드 개발까지 포함하기엔 좀 애매할 것 같습니다. 굳이 알아야할 필요는 없을 것 같지만 ‘시간이 나면 배워두면 좋은’ 것이라 생각해보면 어떨까요. 간혹 백엔드 개발에 대한 감이 있으면 UX 디자인을 할 때 도움이 되는 것 같습니다. (적어도 개발자와 대화할때 손쉽게 대화를 풀어나갈 수 있는 무기 하나는 가지게 되는 것 같아요.)
이 정도로 개발의 범위에 대해서 정리를 해보고, 앞으로 제가 쓰는 개발이라는 단어는 ‘프론트엔드 개발’을 일컫는다 생각해주시면 감사하겠습니다.
몇년동안 디자인만 배우고, 몇년동안 일러스트레이터, 스케치, 포토샵만 쓰면서 일해왔는데 개발을 어떻게 시작해야하나…라고 생각하신다면 먼저 묻지도 따지지도 말고 Atom(혹은 Sublime text, 혹은 Visualstudio Code)부터 설치해보시길 권해드립니다. 생각보다 재미있습니다.
디자인이 머릿속의 추상화된 개념을 시각적으로 꺼내는 것이라면, 개발은 시각적인 것을 실제로 클릭할 수 있게, 탭 해볼 수 있게 만들어주는 것이라 디자인만큼 재밌는게 개발이라 생각합니다. 그리고 그 시작은 간단한 것들부터 해보는 것이지요.
저도 개발 전문가는 아니고, 디자인과 개발 전부 잘 하시는 분들도 많이 계시니까 저는 제가 아는 선에서 실제로 쓸 만한 것들만 적어볼까 합니다. 뭐, 크게 거창한 것은 아니고, 요즘 브랜딩 웹사이트 제작하는 김에 제가 써먹은 것들 위주로 한 번 적어보려고 합니다.
질문이나 피드백은 댓글이나 kimmungyu@gmail.com 로 메일주세요 :)