웹디자인을 하기전에…

웹디자인을 하기전에…

프로그램 언어를 알아야 하나요?

많은 디자인 학도들이,

"웹디자인을 하기 위해서는 HTML도 알아야 하며 CSS도 알아야 하고 그 외 기타등등 수많은 것들을 알아야 한다. 그런데 나는 디자인 밖에 할줄 모른다. 그래서 웹디자인에는 관심도 가지지 않을것이다."

라고 생각하는 오류를 범하는 경우가 자주 있습니다. 이러한 생각에 대한 정답은 무엇일까요? Yes일까요, No일까요?

정답은 없습니다. 웹디자이너는 때에 따라서 HTML과 CSS를 이해해야 하는 경우도 있으며, 때에 따라서는 디자인 툴만을 다룰줄 알아도 됩니다. 다만 프로그래밍 언어를 어느정도 이해하고 있어야 원활한 작업이 가능할 수도 있고, 혹은 너무 일부만 알아 "선무당이 사람잡는" 경우가 생기기도 합니다.

HTML과 CSS 언어를 직접 구사하지는 못하되 어느정도 읽을 줄 아신다면 퍼블리셔가 훨씬 원활하게 작업할 수 있도록 제한적인 부분을 고려하여 디자인할 수 있을 것입니다. 하지만 이런 경우도 있습니다. 어떤 한 디자이너가 기획을 한 뒤 시안을 클라이언트에게 공개합니다. 그리고 그 디자인들이 화면에서 어떻게 움직이는지에 대해 자신만만하게 브리핑을 하고 퍼블리싱이 진행되며, 수일이 지난 후 개발이 완료 되었습니다. 그런데 클라이언트가 말합니다.

문제는 바로 많은 개발자분들이 달가워 하지 않는 IE였습니다. 클라이언트의 것은 8버젼이었죠. 그리고 디자이너가 기획했던 디자인은 HTML5와 CSS3로 이루어진 소스였고, 이를 퍼블리셔에게 예제 자료로 제시했으며, 퍼블리셔는 디자이너가 원하는대로 작업했을 뿐이었죠. 디자이너는 클라이언트에게 버젼업을 추천하지만, 클라이언트는 그럴 생각이 없습니다. 그리고 지금 자신이 사용하는 IE8에서 처음 시안과 달리 표현된다면 디자인을 다시 진행해야만 한다고 고집을 부립니다. 저는 이런 경우를 "선무당이 사람잡는"경우라고 합니다.

따라서 숙련된 PM이 없이 프로젝트를 진행하는 디자이너분들은 퍼블리셔와 개발자분들, 그리고 클라이언트와 잦은 커뮤니케이션을 하시는 것이 중요합니다. 물론 PM이 있을 경우에도 필요한 사항이며, 이것은 HTML과 CSS에 대해 충분한 이해를 가졌든 그렇지 않든 간에, 매우 중요한 점입니다.

웹 디자인은 시각디자인과 어떻게 다른가요?

먼저 언급해 드리자면, 사실 웹 디자인은 일반적으로 말하는 시각 디자인의 극히 일부일 뿐입니다. 다만 한국에서 시각 디자인의 의미가 매우 잘못 이해되고 있기 때문에 관련된 커리큘럼을 배우지 못하고 대학을 졸업한 경우가 허다합니다.

웹 디자인은 시각 디자인의 일부로 시각디자인은 영문 표기로 Visual Design 이기도 하나, 정확하게는 Communication Design이라 표기해야 합니다. 이유인 즉, 시각 디자인은 시각적 정보를 전달하는 것이고, 이는 청자와 화자가 서로 "소통communication"하는 하는 과정이기 때문이며, 디자인은 그 "소통"을 위한 산출물이기 떄문입니다. 심지어 "디자인"에 대한 해석도 상당수 잘못 이해하고 있는데, 사실 "디자인"은 그림을 그리는 작업이 아니라 "설계"를 위한 작업입니다.

즉, UI/UX 디자인도 실제로 대학교에서는 시각 디자인 학과를 통해 학습해야하는데-적어도 제가 졸업한 대학교에서는-충분한 커리큘럼을 경험하기 힘듭니다. 물론 그렇다고 해서 이 모듈이 그런 부족한 학습을 채워드리리라 장담드리지는 않습니다. 본 모듈은 Adobe Photoshop을 웹디자인 심화 학습을 위한 것입니다.

아마 시각디자인을 전공한 많은 분들께서 혼란을 가질 것이라 예상되는데, 웹디자인에 대한 커리큘럼을 제대로 배우지 못한 경우, 다음과 같은 실수를 많이 범하게 됩니다.

1. 돋움, 굴림 서체의 잘못된 사용방법
2. 곡선적인 구조를 과도하게 사용한 웹디자인
3. 픽셀 단위 작업의 무시
4. 벡터 기반 프로그램 사용

물론 웹디자인 팀에서 업무를 시작하는 신입 디자이너들은 초반에 이러한 부분에 선임 디자이너에게 대해 지적을 받거나, 혹은 관련된 사항에 대해 크게 간섭을 받지 않는 경우도 있습니다. 하지만 문제점은 퍼블리셔가 작업하는 것에 있어서 불편과 혼란을 가지거나, 퍼블리셔가 완료한 산출물에 대해 디자인 시안과 다르다는 내용으로 인해 불화가 생기기도 합니다.

웹디자인은 철저하게 픽셀단위로 작업되어야 합니다. 물론 최근에 들어서 높은 해상도의 디스플레이 환경에 맞추어 디자인해야 한다는 이유로 인해 @2x 규격 이상의 이미지를 만들어야 하지만, 기본적으로는 픽셀단위로 작업되어야 합니다. 하지만 많은 디자이너들, 특히 시각디자인 학과 출신의 디자이너들은 Adobe Illustrator 로 작업하는 것에 익숙하여 규격을 정확하게 지키지 않거나, 심지어 픽셀 단위를 아예 모르는 경우도 있습니다.

Adobe Photoshop을 통해 웹디자인 작업을 할 때에는 다음과 같은 사항을 체크해야 합니다

하지만 반드시 상기 내용을 지켜야 하지 않아도 되는 경우도 있습니다. 때에 따라서는 PM이나 설계/기획자가 해당 규정을 먼저 명시하거나 개발자가 목업Mockup을 먼저 진행한 뒤 이미지만 입히는 경우에는 그렇게 중요하지 않은 경우도 있습니다. 다만, 이러한 경우 디자이너는 자신의 디자인을 주장할 권한이 낮아질 수도 있습니다.

웹디자인을 하기 위해서는 어떤 공부를 해야 하나요?

정답은 없습니다. 감각있는 개발자분들이 디자인도 함께 하며 아름다운 웹디자인을 하는 경우도 아주 많으며 오히려 다양한 오픈소스를 활용하면서 보통 디자이너들보다 훨씬 효율적이고 경제적인 웹 사이트를 만들어 냅니다. 이런 점에서는 퍼블리싱을 제대로 공부하지 않은 디자이너로써 많이 부끄럽기도 합니다.

웹디자인을 위해서는 사실 많은 것을 공부해야 합니다. 디자인의 균형을 꺠우치기 위해 기초적인 드로잉과 색채학을 배워야 하며, 최근에는 타이포그라피Typography가 중요시 되는 웹사이트가 많기 때문에 타이포그라피에 대한 공부도 무시할 수 없습니다. 또한 사진 소스를 사용하는 것에서도 주의해야 하는데, 이는 상용 사진 소스를 구매하거나 혹은 직접 촬영해야하는 경우도 발생하기 때문에 사진학을 공부하는 것도 도움이 될 수 있습니다.

또, 일반적인 편집 디자인에 비해 유행이 빠르게 변하고, 최근에는 오히려 편집 디자인이 웹디자인을 따라가는 추세이기 때문에 새로운 트렌드를 따라가는 것도 중요합니다. 때때로 프로그래밍 언어로 어떤 것이 가능한지 학습하는 것도 중요한데, jquery나 자바스크립트 등을 통해 동적 요소가 사용되는 경우가 많고 그래프 요소도 이미지를 사용하는 경우보다 훨씬 아름답게 표현될 수도 있기 때문입니다. 또, 글자를 이미지 소스로 사용하는 경우 이질감을 발생시키는 경우도 종종 있는데, CSS3는 매우 똑똑하기 때문에 그라데이션이 포함된 글자를 표현할 수도 있고 글자에 그림자를 넣거나, 글자를 대각선으로 표현할 수도 있는 등, 다양한 사용방법에 따라 이미지로 표현하는 것보다 아름답게 표현할 수도 있으며 이미지 소스를 2중 3중으로 만들거나, 움직이는 GIF이미지를 만드는 수고를 덜기도 하고 효율적인 용량 관리도 가능합니다. 자세한 내용은 생활코딩 CSS항목을 참조 하시면 더 좋을것 같습니다.

그리고 다음은 웹디자인을 할 때에 권장하는 내용입니다. 아래 권장 내용은 "권장"일 뿐, 반드시 지켜야 한다는 것은 아닙니다.

토픽을 읽기 전에…

웹디자인을 위해서는 앞서 설명한 내용을 숙지하는 것이 좋으며, 본 모듈에 올라오는 글 대부분도 위 내용을 숙지했음을 바탕으로 진행할 예정입니다. 또한 다시 한번 말씀 드리자면, 본 모듈에 올라오는 글은 정답이 아니고, 필자 역시 많은 경력이 있어서 "이래라 저래라"하기 위해 쓰는 글이 아니기 때문에 너그러운 마음으로 봐주시길 바랍니다. 본 모듈을 보시는 모든 분들께 조금이나마 도움이 되었으면 하며, 조금이나마 눈요깃 거리가 되길 바랍니다.