Adobe Photoshop for Web Design

웹디자인을 하기전에…

웹디자인을 하기전에…

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

많은 디자인 학도들이,

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

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

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

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을 통해 웹디자인 작업을 할 때에는 다음과 같은 사항을 체크해야 합니다

1. 프로젝트의 가로 규격/프로젝트가 지원하는 최대 가로 규격
- 960px, 1024px, 1920px, 2560px 등
- 반응형 홈페이지의 경우 다양한 픽셀 규격을 고려
2. 프로젝트를 작업하는 도큐먼트의 해상도(DPI/PPI, 이하 DPI로 통일)
- 일반적으로 72DPI를 권장
- 레티나 규격, 혹은 그에 상응하는 규격(@2x)에 대해서는 144DPI 권장
3. 컬러모드 : RGB
- CMYK작업 시 탁한 색상을 사용할 수도 있으며 JPEG이미지로 변경할 경우 간혹 형광색으로 나타나는 현상 발생

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

@2x란?
레티나 디스플레이, AMOLED 등 높은 해상도(DPI)의 디스플레이에서 원하는 이미지를 뚜렷히 표현하기 위해 기본 이미지보다 2배 정도의 큰 이미지 소스를 의미합니다. 예를 들어, 48px * 48px 규격의 버튼을 일반적인 PC에서 표현하기 위해서는 48px * 48px 규격의 이미지 소스만 만들면 됩니다. 일반적인 모니터는 72DPI 정도의 해상도로 이미지를 그대로 표현하기 때문이죠. 하지만 레티나 디스플레이등은 그의 약 2배의 화소를 표현하기 때문에 2배의 해상도를 가진 96px * 96px 이상의 이미지를 만들어야 아름답게 표현됩니다. 그렇지 않으면 매끄러운 텍스트 요소에 비해 이미지의 화질이 흐리게 나오거나 도트가 도드라지게 나타나기 때문에 고해상도 디스플레이 사용자들의 특혜를 버리게 만드는 꼴이 됩니다. 물론 아직 국내 웹 사이트의 대부분이 이를 고려하지 않고 작업하고 있습니다. 필자 역시 @2x 규격의 이미지를 적용한 홈페이지는 모바일 페이지 외엔 고려해본 적이 없습니다. 하지만 올바른 웹디자인을 위해서는 결코 무시하지 말아야 하는 사항입니다.

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

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

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

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

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

1. 모든 작업을 계획화 하고 규칙을 반드시 지킬 것
2. 일러스트레이터를 멀리하고 포토샵을 가까이 할 것
3. 퍼블리셔와 이슈사항이 발생하지 않도록 꼼꼼한 메모를 통해 전달할 것
4. 효율적인 소스 관리를 하기 위해 끊임 없는 연구를 할 것

토픽을 읽기 전에…

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

댓글

댓글 본문
작성자
비밀번호
  1. 오픈스카이
    많은 도움이 되고 있습니다
    열공하겠습니다
  2. 슈르
    돋움과 굴림의 올바른 사용법이 궁금합니다! 이제 막 웹디자이너로 발을 들이기 시작했는데 가르쳐주실 분이 없어서 혼자 독학하고 있네요... 돋움과 굴림의 사용법이 따로 있는건가요?
  3. 이지수
    도움이 되었습니다.
  4. Baek Cheol Hun
    디자인을 공부하는 학생인데요, 제가 궁금한 부분에 대해서 말씀해주시는것같아 너무나도 도움이 되었습니다! 감사합니다!
  5. 웹 디자인을 시작하는
    정말 많은 도움이 되는 글이에요
    제가 최근에 위 내용들을 모르고 웹디자인에 발을 들여서
    정발 퍼블리셔와의 마찰이 크게 있었는데
    이 글을 보고 시작했으면 정말 좋았을껄 하는 생각이 들어요
    웹 디자인을 하기전에.. 라는 제목이 너무 맘에듭니다.
    웹디자인을 시작하는 사람들이 많이 보았으면 좋겠을 유익한 내용이네요..
    감사합니다.
  6. 으입
    저는 이 글의 작성자는 아닙니다만, 답변해드리고 싶습니다.
    저는 웹 관련 일을 오래동안 해오고 있습니다.
    포토샵과 일러스트를 전부 사용하고 있습니다만,
    포토샵을 가까이 해야 하는 것이 맞는 이유를 말씀드리겠습니다.

    일러스트가 글자가 더 깔끔한 부분은 역시 벡터 이미지이기 때문이겠죠.
    웹 상의 이미지는 아직까지는 비트맵을 주로 (거의 절대적으로)사용합니다.

    그래서 웹브라우저의 표현방식과 더 가까운 쪽을 고르자면, 일러스트보다는 포토샵입니다.
    그 것도 압도적인 차이로 포토샵이 웹브라우저와 가깝다고 할 수 있습니다.
    대화보기
    • 김후정
      좋은 글입니다^^ 저도 디자인을 전공하고 지금 웹코딩을 공부하는 중인데, 참 도움되는 글이네요~ 그런데 궁금한게 하나 있습니다. 왜 웹디자인을 할 때 일러스트보다 포토샵을 더 가까이 해야 하나요? 저는 일러스트가 포토샵 보다 글자가 좀 더 깔끔해서 일러스트를 자주 사용합니다. 그래서 일러스트보다 포토샵을 더 가까이 하라는게 당황스럽고 궁금하네요.
      꼭 좀 알려주세요!!
    • 지나가던학생
      기대가 됩니다. 그러니까 이 모듈을 보려면 CSS에 대한 이해가 있어야 하는거죠? 기대하고 있을게요~
    버전 관리
    효빗
    현재 버전
    선택 버전
    graphittie 자세히 보기