웹디자이너는 어떻게 일하고 뭐가 필요한가요?

이 글의 제목은 아마 우리들이 실무에서 일하면서 자주 질문을 받으면서도 초년생 또는 취준생때 제일 많이 고민했던 이야기일지도 모릅니다. 

how_to_work_webdesigner_1

미리 말씀드리자면 아래 내용들은 절대로 무조건 정답이 아닙니다.  
제가 오랫동안 여러 디자이너분들과의 대화, 의견(특히 고충)을 토대로 작성된 글입니다.  😉 

이미 우리 서점에는 교과서 같은 서적들에서는 명확하게 웹디자이너가 하는 일들을 논리적으로 잘 적어놓았습니다.
우리들은 그 책들을 거의 읽어보았을 것입니다.  하지만 아직도 이런 질문이 있다는 것은 어디에선가 그 이상의 것들이 현실에서 여러가지 변수에 부딪혔기 때문에 생겨난게 아닐까 생각해보았습니다.

정리하자면,

웹디자이너라고 모두 똑같은 업무를 하지 않습니다.

상황에 따라 여러가지 타입이 있겠지만 저는 크게 두가지 타입이 있다고 추려보겠습니다.

  • A. 시안 디자인 또는 디자인 요소 작업을 주로하는 그래픽 디자인에 비중이 높은 웹디자이너
  • B. 디자인 작업을 하면서 퍼블리싱 또는 기타 웹으로 구현되는 인터렉션을 함께 만드는 웹디자이너

위 타입들은 자기가 결정되는 것이 아닌 업무 환경에 의해 자연스럽게 결정되어지는 경향도 있습니다.  그렇기에 실무에 투입되어 지내는 동안 자신의 다음 비전에 대해 많은 고민을 하기도 하는 이유이기도 합니다.

타입을 선택하는 여러가지 이유야 있겠지만 어찌되었건 선택은 본인 몫이고 다른 누군가가 책임져 주지 않습니다.  본인의 비전은 본인이 선택하는 것이지 환경이 ‘그럴수 밖에 없었다’라는 자기 합리화는 하지 않는 편이 좋습니다.

how_to_work_webdesigner_2
두가지 타입에 따라 업무하는 방향도 다르고 사용하는 툴과 스킬도 다르게 됩니다. (마치 케릭터 육성 게임 같죠? 😐 )

A 타입의 경우 디자인적인 방향으로 특화됩니다.

드로잉, 일러스트, 켈리그라피, 타이포그라피등 디자인 요소들을 필요에 따라 자신이 직접 만들어서 웹사이트의 시안을 완성합니다.
레이아웃만 잡는 것이 아니라 디자인의 요소와 컨셉을 직접 제작하는 것이죠.
이 타입은 기획에서 넘어오는 전략을 바탕으로 나름 디자인 전략을 짜서 시안을 만들 때 내포시키는 비중이 높습니다.
하지만 단점이 있습니다. 마크업을 잘 모르기 때문에 웹으로 구현함에 있어 디자인이 되지 말아야 하는 것들을 만들어 낼 때가 있습니다.  이 말을 잘 이해하는 사람은 B타입일 수도 있습니다. 😯   이유는 직접 제작한 디자인 시안을 웹으로 코딩해서 구현해 내기 시작한다면 시안의 100%를 웹으로 똑같이 구현할 수 없을 때가 있다는 걸 알게 됩니다.  대표적인 예를 들자면 포토샵의 레이어와 레이어들을 시각적인 효과를 위해 Multiply, Overlay, Subtract 와 같은 효과를 주어 겹쳐 사용하는 경우가 있는데 이렇게 만들어진 하나의 이미지는 상관없지만 (동적인 작용을 하는) 레이어마다 별개의 디자인으로 뽑아내어 구현되길 원할 때가 있습니다. (딱! 잘라 말하자면 웹브라우저는 Multiply, Overlay, Subtract을 지원하지 않습니다.)
또한 이렇게 마크업의 규칙이나 최적화를 잘 모르기 때문에 레이아웃들이 자유형식과 같은 개성있는 레이아웃이 많이 나옵니다. 장단점이기도 하죠. 🙂  정말 독창성이 있는 디자인이 나오지만 웹사이트로 구현해 내기 힘들 수도 있고 구현한다 치더라도 웹사이트라는 구조에 최적화되어 있지 않을 수도 있습니다.

B 타입의 경우 멀티형 웹디자이너라고도 합니다.

직접 디자인한 시안을 바탕으로 웹사이트를 어느정도 코딩할 수 있게 됩니다.
하지만 웹디자인과 퍼블리싱의 비중에서 퍼블리싱이 50%를 넘어서면 국내의 포지션 중에 퍼블리셔로 진입하는게 옳을 수도 있습니다.
또는 요즘은 자바스크립트의 코어까지는 아니더라도 제이쿼리를 이용해서 인터렉션을 구현하는 정도의 웹디자이너들도 있습니다. (한때 플래시를 이용해서 어느 정도의 인터렉션을 구현했던 것처럼요.)
이런 멀티형 웹디자이너는 프리랜서로 활동하는 비중도 A 타입보다 높습니다.
혼자서 디자인부터 퍼블리싱까지 결과를 만들어내기 때문에 포지션 분업화를 명확히 나눠 프로젝트를 진행하는 기업보다는 1인 고용으로 두가지 효과를 보기 위한 기업에서 선호하는 편입니다.
특히나 직접 코딩을 하기 때문에 최적화 되어 디자인을 하게 됩니다.  디자인 할 때 부터 웹브라우저에서의 최적화와 완성도를 염려하고 작업하는 경우가 다분합니다.
하지만 이 역시 단점이 될 수 있습니다.  틀에 갇히게 되어서 디자인 자체가 그 틀안에서만 만들려는 습관이 생깁니다.  그러다보니 그 이상의 울타리를 넘은 디자인을 시도하지 않고 안정적인 습관에 의존하게 됩니다.(사람마다 다르긴 합니다!)

how_to_work_webdesigner_3
또한 시간이란 것은 제한되어 있기 때문에 디자인과 퍼블리싱을 동시에 완성시키긴 힘듭니다.  그렇기 때문에 디자인 리소스를 활용하여 디자인 시안을 작성하는 경우가 많습니다.  그러다보니 어느 사이트에 쓰인 UI와 겹칠 때가 있고 사진이나 켈리그라피등의 디자인 요소들도 타 사이트들과 중복되는 경우가 생깁니다.  그리고 여기서 좋은 리소스, 저기서 이쁜 리소스를 가져와서 만들다보니 어느새 컨셉과는 조금 멀어진 듯한 느낌이 생기기도 합니다.

그렇다고 어떤 타입이는거고 어떤 타입은 틀린 것이다 라고 정의 내릴 수 없습니다.
취향일 수도 있습니다.  자신에게 맞는 타입으로 자연스럽게 흘러가게 됩니다.

웹디자이너로 시작해서 길이 수없이 바뀔 수도 있습니다.  PM 또는 기획자로 가거나, UI/UX 디자이너로 가거나, 프론트엔드 개발자 또는 퍼블리셔로 가거나 등등 자신의 비전 빌드업에 취향에 맞게 선택할 수 있습니다.  어떤 포지션이 돈을 더 많이 벌고 전망이 좋은지 선택을 잘 하고 싶은 것은 사람이라면 당연할 수 있습니다.  (다~ 먹고 살려고 하는 일이니까 그렇겠죠?)

how_to_work_webdesigner_4

하지만 국내에서 이쪽 계통은 무엇보다 자신이 재미있고 좋아하는 포지션을 선택하는 것이 좋습니다. (돈을 더 많이 벌면야 금상첨화겠지만 완성의 만족감성취감으로 일하는 실무자들이 은근히 많습니다. 😛 )


웹디자이너에게 무엇(스킬이나 지식)이 필요한 지 이야기해 볼까요?

1. 일단 취업할 때 가장 필요한 것이 무엇인지 궁금하실 겁니다.

디자인 관련 자격증? 공모전 수상 경력? 물론 있으면 안좋을 것은 없습니다.
그 무엇보다 가장 우선적으로 보는 것이 있습니다.
포.트.폴.리.오!!!!!
신입이 어떻게 포트폴리오가 있냐고 되물으실 수 있습니다.  꼭 정식 런칭이 된 사이트의 경력이 포트폴리오를 채우는 것은 아닙니다.
우리는 습작이라고도 부르는 작업물을 완성도 높여서 아트웤이라고 부르겠습니다.
그런 아트웤들을 누군가에게 보여줄 수 있게 리스트화 해놓으면 그게 포트폴리오입니다.

디자이너 실무자를 뽑으려는 데 그 사람에 대해 가장 궁금한 것은 그 사람의 디자인 스킬이지 자격증이나 수상 경력은 포트폴리오 앞에서는 보이지 않습니다. (저도 물론 자격증이 다소 있습니다만 필요에 의해 취득한 것이 아닙니다. 😕 )
기업은 당신이 무엇을 얼마만큼 할 줄 아는 지가 가장 궁금합니다. 
자격증 또는 공모전에 쏟을 투자(시간과 노력, 자금?)를 좀 더 자신의 포트폴리오로 채울 디자인 작업에 투자하는 것이 좋다고 개인적으로 생각합니다.

그렇다고 무조건 ‘자격증은 필요없어! 공모전 수상경력은 필요없어!’ 라고 정의 내릴 수는 없습니다.  
만약 대학을 막 졸업한 신입 사원 후보들 중에서 어차피 비등비등한 실력이고 후보들 중에서 선택하기 애매할 때 자격증이라도 하나 더 가지고 있는 후보에게 더 가산점이 부여될 수 있죠.  없는 친구보다는 개인 시간을 활용해서 더 관련 지식을 공부했다라는 결과물이니까요.  물론 후보들 중에는 자격증을 가진 친구보다 더 잘하고 열심히한 친구가 있을 수 있습니다만 그 것을 증명해줄 그 무엇인가 없는데 텔레파시로 알려줄 수는 없잖아요.

how_to_work_webdesigner_5

2. 이제 실무에서 일하려면 어떤 스킬들이 필요할까요?

2-1. 답정너인 것 같지만 어찌되었건 가장 중요한 것은 포토샵을 이용한 디자인입니다.

how_to_work_webdesigner_6물론 html과 css의 이해도가 어느정도 있으면 아주 좋습니다만 주어진 시간이란 한정적이기 때문에 디자인과 동시에 둘 다 스킬을 높일 수는 없습니다.  (저도 두마리 토끼 잡고 싶었습니다. 😥 )
가장 우선적으로 바로 레이아웃을 잡는 디자인 스킬입니다.  포토샵으로 메인 시안을 잡는 스킬이 높으면 좋겠죠?  A타입 웹디자이너에서는 메인 시안 잡는 디자이너서브 디자이너가 나뉘기도 한답니다.  메인 시안이 그 웹사이트의 중심을 좌지우지하는데 큰 역할을 할 정도로 중요합니다. 

2-2. 색감에 대한 센스도 필요합니다.  

색이라는게 가장 어려울 수도 있습니다.  어떤 색을 어디에 사용하느냐에 따라 클릭 유도를 하는데 성공할 수도 있고 실패할 수도 있습니다. 또한 색으로 인해서 사용자가 컨텐츠에 명확하게 집중 시킬 수 있는지도 영향을 끼칠 수 가 있습니다.  더군다나 색은 유행을 탑니다.  패션 디자인의 컬러, 인테리어 디자인의 컬러, 생활 디자인의 컬러 등등은 삶에 익숙하게 밀착되어 있기 때문에 그 영향으로 웹까지 영향을 받기도 합니다.

2-3. 포토샵 영역 외 디자인 요소를 제작하는 능력도 추가된다면 좋습니다.

일러스트레이터로 플랫 디자인 아이콘을 제작해서 스마트 오브젝트로 활용하거나, 실제 붓으로 켈리 그라피를 만든 후에 카메라 또는 스캔으로 불러와 포토샵에서 따서 활용하거나 하여 디자인 요소들을 직접 만드는 능력이 있으면 좋습니다.  (리소스들을 사용하는 것에도 한계가 있기 때문입니다.)

2-4. 이제 가장 고민이 많이 하는 html과 css는 어떻게 하느냐 입니다.

적어도 정석으로 된 기본은 알고 있는 정도는 되어야 하지 않을까 합니다.
예를 들어 <li> 태그들은 리스트를 만들 때 사용되는 것이고, <table> 예하 태그들은 데이터들을 테이블로 정리할 때 대부분 사용하는 것이고, <dl> 예하 태그들은 정의와 설명에 사용되는 태그들이고, <h1>부터 <h5>까지 제목의 역할을 전체 컨텐츠에 맞게 명확하게 구분하여 사용하였는지 등등
사람이 가시적으로 꾸미기 위한 html이 아닌 로봇이 읽고 이해할 수 있는 구조로 제작하는 기본 개념을 알아야하는 것입니다.  또한 이제 이렇게 작성된 것들을 디자인 시안에 맞게 구현해 내기 위한 css 정도면 좋을 듯 합니다.  물론 어느 브라우저에서든 최대한 비슷하게 보이게 하는 것(크로스 브라우징)도 중요하지만 그 정도는 퍼블리셔분들에게 믿고 맡기셔도 충분하리라 생각됩니다.

이렇게 기본적인 마크업에 대한 지식이 필요한 이유는 웹사이트는 혼자 만들 수 없고 여러 직군들과 협업하여 완성하기 때문에 소통에서도 원할하기 위함이기도 합니다.  
마크업에 대한 이해도가 높을 수록 서로 소통하며 협업하는데 있어 배려와 이해도가 높아지기 때문입니다.

이 글이 어느정도나 될지는 모르겠습니다.
또한 최대한 객관적이기 위해 여러 디자이너들의 의견과 사례들을 바탕으로 작성한 것인데도 혹여 주관적이게 작성되진 않았을까 하는 염려도 있습니다.


제가 이 계통에 일하면서 한가지 느낀 것이 있습니다.

패션과 유행은 돌고 돈다고 하더라도 웹은 돌고 돌지 않습니다.  
매년 새로 나오는 디지털 디바이스에 맞춰갈 뿐입니다.  
새로운 시대 변화에 적응하는 것도 능력입니다.

 긴 글 읽어주셔서 감사합니다.
수정할 내용이나 의견들은 언제든지 환영합니다.  😆

도움이 되셨나요?

여러분의 좋아요 와 공유하기가 글쓴이에게 큰 힘이 됩니다!

3 Comment threads
3 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
yej관리자quippshoo821 Recent comment authors
  Subscribe  
Notify of
yej
yej

좋은 글 감사합니다~

quipp
quipp

관리자님 웹디자이너의 꿈을 꾸는 한 사람인데요 아는 것이 없어 도움이 필요한데..
혹시 이 블로그에서 웹디자너에 관한 질문도 받으시나요?

shoo821

좋은글 감사합니다. 웹디자이너로써 경력이 쌓이면서 고민하던 부분을 잘정리해주셨네요~^^