좋아 보이는 웹사이트, 그 안에 숨겨진 변치 않는 원칙

By | 2009년 5월 12일
웹이 생겨난 이래 웹 디자인은 점차 영역을 확장하고, 트렌드도 계속해서 변해 왔습니다. 2009년 현재, 어떤 웹 문서를 열더라도 페이지가 디자인되어 있는 것을 볼 수 있죠(점이나 선 같은 정적인 요소만 썼더라도 말이죠). 단순한 장식과 더 예쁘게 보이려는 목적을 넘어 이제는 방문자의 사용성과 접근성도 고려하는 디자인이 등장했죠.^^

또 웹이 발전함에 따라 HTML, CSS, 드림위버, 나모 웹 에디터, 그리고 포토샵 같은 그래픽 편집 등 구현 도구들도 풍부해져서 웹 페이지를 장식하는 일이 그다지 어렵지 않은 것 같기도 합니다.

자, 구현 방법도 알겠다, 더 쉽고 화려하게 구현할 수 있는 도구도 있으니 잘 할 수 있을 것 같습니다. 이쯤에서 부족한 테크닉을 보완하기 위해 책 한 권을 펼쳐 보는 분도 있으리라 생각합니다.
서점의 웹 디자인 책이 놓여 있는 구역에 가보셨다면 아실 텐데, 그래픽 도구를 이용해 웹사이트에 어울리는 이미지를 편집하는 방법과 웹사이트 제작 편집기 사용법을 알려주는 책이 정말 많습니다.


수많은 참고 사이트, 상세한 스크린샷들이 가득한 책을 한 권쯤 공부하고 나면 어느 정도 요령을 터득한 자신을 발견할 수도 있겠습니다. (“그래, 웹 디자인. 못할 게 무어냐!”하고요)

하지만, 뭔가 부족한 느낌이 들지는 않나요? 그런데 문제없다는 마음으로 창대하게 시작했으나 끝이 미약해지는 경험, 없으셨나요? 빈 페이지를 마주하고 있노라면 내 머릿속도 따라서 비어버리는 경험은요? 무엇보다도 내가 진짜 뭘 알고 디자인하기는 하는 걸까, 수박 겉만 핥은 듯한 디자인은 아닐까 하는 우려 말입니다.

그런데 ‘인사이트에서 갑자기 웬 웹 디자인을?’하고 궁금해 하실 분들이 계실지도 모르겠네요.^^
네, 개발자 분들 가운데 웹 애플리케이션이나 웹 서비스를 개발하시면서 자신의 손으로 웹사이트를 제작하고 싶다는 분들이 많으실 줄 압니다. 하지만 자신의 디자인 센스에 자신이 없다거나(^^;) 자신 있게 만들었음에도 주변의 반응이 시원치 않은 경우가 다반사라면, ‘무언가’의 도움이 필요하다는 생각이 드실 테지요?

그런 필요에 힘입어 웹사이트를 제작하는 데 훌륭한 가이드가 되어 줄 책 한 권이 있기에 소개합니다.

웹 디자인이 웹 애플리케이션 개발과 떼려야 뗄 수 없는 사이임에도, 어쩐지 거리감이 생겨 ‘나와는 상관없는 분야’ 정도로 치부하기 쉽습니다. 인사이트 내부에서도 “웹 디자인과 관련된 책을 우리가 출판하는 것이 맞느냐”라는 논의도 일부 있었고요.
하지만 ‘개발자에게 필요한 것’이라는 큰 주제로 봤을 때, ‘웹 디자인 역시 개발자에게 필요한 덕목(?) 중 하나’라는 생각에 과감히(^^) 결정을 내렸습니다. 물론, 개발자를 염두에 둔 웹 디자인 서적이라는 사실과 기본에 충실한 책의 내용이 출간을 결정하는 데 기여한 바가 컸죠.

한 가지 이유가 더 있다면, 국내 웹 디자인 서적 시장의 불균형성도 있겠습니다. 웹 디자인 서적은 다른 컴퓨터 분야에 비해 다양성이 좀 떨어집니다. (웹 디자인이라는 키워드에는 수많은 자격증 서적, 그래픽 도구, 편집기 사용법 서적이 검색되지만, 웹 디자인의 기본을 잡아주는 책은 한 권도 검색되지 않는다는 사실!!)

아이디어가 있어도 구현할 수 있는 기술이 없으면 디자인 아이디어조차 무용지물이나 마찬가지이기에 그래픽 도구나 CSS 등에 치중하는 경향이 더 많습니다. 그러니 체계적으로 웹 디자인 지식을 구축하려는 사람들을 추정하기도 어렵지요. 굳이 찾아보자면, UI나 UX 관련 서적이 웹 디자인에 필요한 부분을 설명하긴 하지만, 어디까지나 사용성 관점에서 바라볼 뿐 심미적인 부분에서는 독자들의 목마름을 채워주기 어려웠구요.

이 책은 단순히 이 효과는 이렇게 하면 되고, 이럴 때는 이런 타이포그래피를 쓴다는 식으로 팁만 알려주지 않습니다. 비유하자면 물고기를 잡아 주느니 물고기를 잡는 방법을 알려 주는 책이라고 할 수 있겠네요.^^
레이아웃, 색, 텍스처, 타이포그래피, 이미지를 통해 웹 디자인의 기초를 정성들여 설명하는 책은 찾아보기 힘들다고 감히 자신합니다.^^

『Beautiful Web Design:좋아 보이는 웹 사이트를 만드는 디자인 원칙』이 제시하는 주제는 이렇습니다.

‘웹 디자인의 본질을 알라! 그리고 당신만의 스타일을 찾으라!’

웹 디자인을 기초부터 제대로 알고 싶다면, 웹 디자인을 많이 해봤지만 여전히 머릿속에 안개가 낀 것 같다면, ‘아름다운 웹 디자인’의 세계로 잠시 빠져보시는 것은 어떨까요?

[#M_목차|접기|

1장 레이아웃을 파헤쳐 보자

디자인 과정

좋은 디자인의 정의

웹 페이지 분석

그리드 이론

균형

통일성

강조

일반적인 레이아웃

참고 사이트

새로운 경향

크기 조절-고정형 너비 vs 유동형 너비

화면 해상도

응용 예제-플로리다 컨트리 타일


2장 마음을 움직이는 색상 설계하기

색채 심리학

색 온도

색 명도

색 이론 101

Red, Yellow, and Blue or CMYK?

여러 색상 설계법

팔레트 만들기

응용 예제-타일 사이트의 색


3장 그래픽을 풍부하게 하는 텍스처

도형

부피와 깊이

패턴

텍스처 만들기

응용 예제-풀칠하고 붙이기


4장 타이포그래피로 콘셉트를 살리자

웹에 글자 나타내기

활자 구조 분석하기

자간

본문 정렬하기

활자체 구분하기

폰트 찾기

올바른 폰트 선택하기

응용 예제-타일 사이트에 타이포그래피 입히기


5장 웹사이트에 어울리는 이미지 찾기

무엇을 찾아야 하는가

합법적으로 이미지를 얻는 방법

좋지 않은 인상을 주는 행동

창조적으로 자르기

포토샵으로 조정하기

파일형식과 해상도

테두리와 경계선 처리하기

응용 예제-플로리다 컨트리 타일 마무리하기

영감을 떠올리십시오! 그리고 무조건 따라하지 마십시오


_M#]

.

14 thoughts on “좋아 보이는 웹사이트, 그 안에 숨겨진 변치 않는 원칙

  1. Pingback: 웹디자이너, mkstyle.kr, citybard@naver.com

  2. 천국지기

    그리고 사소한 오타가 있더군요. 121페이지 밑에서 5줄에 보면
    “카메론이 쓴 글들은19 는 즉시”이라고 되어 있는데
    “카메론이 쓴 글들은19 즉시”이라고 수정해야 되네요. “는”을 빼야 합니다.

    Reply
    1. JOE;

      소중한 정보 감사합니다.^^
      오타 정보는 2쇄 때 반영하게 됩니다.
      좋은 하루 보내세요^^

      Reply
  3. Pingback: ARASHI♡

    1. JOE;

      트랙백, 리뷰 잘 봤습니다.^^
      앞으로 좋은 웹 디자인을 만드시는 데
      참고가 되는 책이 되었으면 했는데,
      도움이 되었다니 기쁩니다.

      Reply
  4. Pingback: BARE NOTE

  5. OneLove

    다들 좋다고 하시길래 일단 구입을 했습니다. 과연 얼마나 잘 빠진놈이길래..ㅋ
    그건 그렇고..콜린 아저씨의 Essential ActionScript3.0 잘 되고있나요?

    Reply
    1. ks.han

      감사합니다. ^^
      EAS는 그리 멀지 않은 시간 내에 마무리됩니다.
      많이 기다려 주셔서 감사합니다.

      Reply
  6. OneLove

    먼 시간 내에 마무리 되도 괜찮습니다. 언젠간 나올테니깐요
    기다리가 욕심히 생겨서요 혹? 출관 1호 구매 가능할지?
    선주문 가능하면 줄을 스겠습니다 ㅋ

    Reply
  7. Pingback: 여전히 아무것도 없는 Na!의 Blog

  8. Birdie

    안녕하세요. 이 책의 구입을 고려하고 있는 독자입니다. 검색해보니, 미국에서 작년말 쯤 2nd 판이 출간되었더라고요. 혹시 새 판도 번역해서 내실 계획이 있으신지요? 그럼 선주문하고 싶어서요^^

    Reply
    1. mintry

      안녕하세요!
      2판은 번역 중이긴 한데, 지금으로선 출간 일정을 정확히 말씀드리기가 어렵습니다. 예약 주문이 가능할 때 포스팅으로 알려드리겠습니다. ^ ^

      인사이트 페이스북(http://www.facebook.com/insightbook)이나 트위터(@insightbook)를 참고하셔도 소식을 접하실 수 있습니다. 고맙습니다!

      Reply

댓글 남기기