모던 웹사이트 디자인

만들면서 배우는 모던 웹사이트 디자인 - 웹 디자인을 위한 모던 테크닉 ㅣ 만들면서 배우는 시리즈
야무(지훈) 지음 / 한빛미디어 / 2014년 3월

+

웹디자이너로 일을 하면서 보통 보게 되는 책은 포토샵, 일러스트, 프로그램 관련 책들인데 대부분 실무에서 바로 써먹을 수 있는 실습위주의 책들을 보게 된다. 포토샵의 경우 이미지 작업과 관련된 스킬 작업 , 일러스트의 경우 드로잉과 관련된 스킬 작업 등등. 물론 이러한 책들도 분명 도움이 되고 필요하다. 그러다가 한빛미디어의 <모던 웹사이트 디자인>이란 책을 보게되었는데 구성이 참 독특했다. 뭐랄까? 분명 필요하고 알아야 하는 것들인데 그 동안 간과해 왔던 것들이랄까? 그런 내용들을 이 책을 통해 알게 되었다.

+

책에도 소개되어 있지만 이 책은 총 9장으로 구성되어 있다. 크게 소양, 실무, 실습으로 분류되어 있다. 혹 이 책에서 어떤 이미지 작업 스킬을 배울 수 있을까?를 기대한다면 다른 책을 찾아보길 바란다. 이 책은 그런 유의 스킬을 배우기에 앞서 웹디자이너라면 기본적으로 알고 넘어가야 하는 것들을 주로 다루기 때문이다. 첫째 작업 효율성을 높이기 위한 작업 환경 설정과 포토샵 성능을 최적화하는 알찬 팁 등등 웹 디자인을 하기에 앞서 준비해야 할 것들을 배우게 된다. 나의 경우 그냥 포토샵 프로그램에서 바로 이미지 작업으로 넘어가는 경우가 대부분이었는데, 그래서 그런지 어쩔 땐 로딩 속도가 느려 제때 퇴근조차 하지 못하고 야근업무까지 해야 했던 경우가 조금 있었다. 일종의 귀차니즘을 기반으로 한 무지였달까? 분명 무슨 일을 할 때 준비과정은 반드시 필요하다. 그런데 이 준비과정을 대수롭지 않게 생각하고 바로 본론으로 넘어가는 경우들이 꽤 있다. 그런데 이게 또 실무에서는 크게 문제가 되진 않는다. (물론 디자이너 본인은 피곤할 수 있다.) 그냥 제대로 된 결과물만 나오면 어쨌든 된 거니까. 그래도 기왕 이 책을 보고, 읽게 되었으니 앞으론 보고 익힌 내용들을 토대로 작업을 해보려 한다. 사상누각만큼 어리석은 일은 없으니까.

둘째 <이미지보단 타이포그래피> 이 소제목에 대해선 나도 꽤 공감한다. 웹디자인, 뭔가 디자인이라고 하면 대부분의 사람들은 텍스트보다는 이미지를 먼저 떠올리는 것이 보통이다. 그러나 웹디자인 영역은 특히나 텍스트 즉 타이포그래피가 굉장히 중요하다. 웹 디자인을 구성하는 95%가 타이포그래피라 해도 과언이 아닐 정도로. 속된 말로 이미지는 거들 뿐. 웹 디자인과 비슷한 영역의 편집 디자인도 마찬가지이고. 가끔 웹 서핑을 하다 보면 다양한 웹 사이트를 방문하게 되고 보게 되는데 <지나치게 화려한 폰트>를 사용한다든가, 복잡하고 장식적인 요소들로 도배를 한다든가 하는 경우들을 본다. 이는 가독성에 영향을 미치고 정확한 정보도 얻기 힘들고 결과적으로 잘~ 된 웹 디자인이라고도 할 수 없다. 이렇듯 간혹 타이포그래피의 중요성에 대해 간과하고 지나가는 많은 디자이너들에게 분명 도움이 될 장이다.

셋째 <웹 그리드 시스템> 아주 예외적인 경우들은 빼고, 대부분 우리가 보는 이미지들은 어떤 규칙에 의해 구성되어 있는데 그것이 바로 그리드 시스템이다. 들쭉날쭉해 보이는 디자인들도 자세히 관찰하면 그리드 시스템을 기반으로 하고 있음을 알 수 있다. 그만큼 웹 디자인을 쌓는 기초 공사가 그리드인 셈이다. 포토샵의 가이드 라인을 활용해 콘텐츠가 짜임새 있게 들어갈 부분과 여백이 있어야 할 부분을 나눈다. 그래서 뭔가 휑해 보이는 이미지들도 이상하게 여백의 미가 돋보이고, 뭔가 꽉 차 있어서 굉장히 답답해 보일 것 같은데도 균형감과 안정감이 느껴지는 이미지들을 본 적이 있을 것이다. 이런 이미지들이 바로 실제 이미지에선 보이지 않는 그리드 시스템을 활용한 것들이다. <모던 웹사이트 디자인>에서는 웹 사이트 디자인을 위한 그리드 시스템 설계 및 단축키를 활용한 그리드 토글에 대해 배울 수 있다.

넷째, 다섯째, 여섯째, 일곱째 장에서는 웹 컬러 매니지먼트 <웹 브라우저마다 컬러가 다르게 보이는 이유>, <웹 컬러 작업을 위한 포토샵 설정 및 컬러 스워치 활용>등을 배울 수 있고, 업무 생산성을 높이는 이미지 슬라이싱, 큰 그림을 그려 보는 빠른 프로토타이핑, 웹 그래픽 디자인 등도 배울 수 있다. 일곱째 장까지는 웹 디자이너로서 반드시 알아야 하지만 간과하고 지나칠 수 있는 것들을 아주 자세하게 배울 수 있는 장이다. 나 역시 이 책으로 그동안 놓쳤던 기본기를 탄탄하게 만들 수 있게 되었다. 마지막 여덟 번째, 아홉 번째 장은 최근 웹 디자인 트렌드를 볼 수 있는 장이다. 바로 반응형 웹 그래픽 디자인과 차세대 웹 벡터 그래픽 디자인이 그것인데, 나 역시 최근 아카데미를 통해 반응형 웹을 배웠던 터라, 더욱 반가웠다. 해외 사이트의 경우 반응형 웹사이트를 많이 만나 볼 수 있는데, 아직까지 국내 웹 사이트들은 PC를 기반으로 한 웹 사이트와 별도의 모바일 사이트가 주를 이루고 있다. 반응형 웹이란 내가 어떤 디바이스를 통해 웹사이트에 접속을 하더라도 동일한 정보를 얻을 수 있는 것을 말한다. <즉 디바이스의 해상도에 반응함으로써 그 화면에서 보여줄 수 있는 최적, 최상의 모습으로 표현되는 것>

이렇듯 웹 디자이너로서 갖춰야 할 기본기, 웹 시장 최신 동향까지 이 책 <모던 웹 사이트 디자인>한 권으로 익힐 수 있다. 그런 후에 퀄리티 있는 이미지 작업이나, 개성을 살린 드로잉 작업물들은 다른 책을 통해 배우고 익히면 될 것이다.