저는 웹개발자입니다. 웹개발에 발을 들여놓은 초기만해도 웹서비스에서 개발자의 역할이 가장 중요하다 생각했습니다. 대략 3년정도 그런 생각을 가지고 있었던 것 같습니다. 그 생각은 물 흐르듯 계속 변화고 있지요. 웹에 있어 업무를 정확하게 분장하는 것은 쉬운 일은 아니지만 요즘 제가 가장 관심을 가지고 있는 영역이 디자인영역입니다. 그래서 마루님께서 이벤트를 진행하시는 걸 보고 참여를 희망했고 좋은 결과가 있어 이렇게 책을 읽게 되었습니다.


 좋아 보이는 웹사이트를 만드는 디자인 원칙

책의 제목을 보고 잘 만들어진 사이트를 예로들며 간략한 설명글이 있을거라 생각했는데 저의 예상은 보기 좋게 빗나갔습니다. 전개방식은 저자가 플로리다 컨트리 타일이라는 회사의 홈페이지를 만들어 나가는 전과정을 다루고 있습니다. 책에서 다루는 과정은 다음과 같이 다섯가지의 영역으로 나누어져있습니다. 프로젝트의 진행순서와 유사하단 생각이 드네요.
  1. 레이아웃을 파헤쳐 보자
  2. 마음을 움직이는 색상 설계하기
  3. 그래픽을 풍부하게 하는 텍스처
  4. 타이포그래피로 콘셉트를 살리자
  5. 웹사이트에 어울리는 이미지 찾기


 레이아웃을 파헤쳐 보자

저는 웹사이트의 영역을 크게 나눠서 내비게이션 영역과 콘텐츠 영역으로 나눕니다. 나누어진 이 영역들을 어떻게 배치를 하느냐가 관건인데 2단으로 배치를 할것이냐 3단으로 배치를 할것이냐와 좌측에 메뉴를 둘것이냐 우측에 메뉴를 둘 것이냐 등이 큰 고민거리가 되겠네요. 일반적인 사이트들은 대체로 메뉴가 좌측에 있지만 블로그에서는 메뉴가 우측에 위치하는 경우도 많이 있습니다. 책에서는 메뉴가 우측에 있는 것이 더 합당하지 않냐는 의견을 보이고 있습니다. 스크롤때문인지 우리의 마우스 포인터는 대체로 우측에 위치하고 있죠. 메뉴를 이동하기 위해 좌우를 왔다 갔다해야하는 것이 갑자기 귀찮게 느껴지지 않나요? 또 한가지 컨텐츠 영역의 크기를 고정형으로 할것인지 유동형으로 할것인지인데 최근 추세가 유동형에서 고정형으로 움직이고 있는 것 같습니다. 다음이 그렇고 믹시도 최근에 고정형으로 바뀐 것 같습니다. 책에는 이에 대한 장단점도 잘 정리되어 있네요. 아 그리고 기준이 되는 화면 해상도는 800*600에서 1024*768로 추세가 거의 전환된 듯 합니다.


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

제가 가장 어려움을 느끼는 부분중에서 하나인데요. 결과물을 보면 온통 원색뿐이더라구요. 이런 막눈을 교정하는데 혹시라도 도움이 될까해서 컬러마케팅 책을 구입해서 보기도 했답니다. ㅠ.ㅠ 모랐다면 모를까 알고는 그냥 넘어가기 힘든 부분이, 나의 쇼핑몰을 방문한 사람의 구매의사에 색상이 영향을 미치기 때문입니다. 그래서 책에서는 색채심리학이라는 단어까지 등장하지요. 빨간색은 혈압을 높인다? 주황색은 에너지가 넘친다? 녹색은 희망을 상징하는 등등... 노란색이 좀 골치아프군요. "아기는 노란색 방에서 더 많이 울고, 부부는 노란색 부엌에서 더 싸우며, 오페라 가수는 노란색 의상실에서 더 짜증을..." 우선 노란색은 피해야 겠군요. 그외에도 색온도, 명도, 채도, 색상설계법, 보색등에 대한 내용이 나오는데 익혀두면 많은 도움이 될 것 같습니다.


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

텍스처가 무엇을 뜻하는지 아시나요? ㅡㅡ;; 디자인이나 사물의 표면에서 드러나는 특이한 외양이나 느낌을 주는 무언가를 뜻한다는군요. 벽돌 느낌, 비누느낌, 대나무느낌 이런 것들말이죠. 내가 운영하는 사이트에서는 어떤 느낌이 나면 좋을까?를 고민한적 있으신가요? 뾰족한 느낌? 둥글둥글한 느낌? 부드러운 느낌? 활발한 느낌? 다소 가라앉은 느낌? 뭘 알아야 면장도하죠... 사선은 동적인 느낌을 주며 뾰족한 선은 위험, 완만하게 굽은 선은 부드러운 느낌, 직각은 기계적인 느낌이 난다는군요. 홈페이지의 컨셉과 잘 어울리는 것을 찾으면 되겠군요. 책에서는 둥근느낌 또는 깔끔한 모서리 등에 대한 설명이 잘 되어 있습니다.


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

콘셉트... 얼마전까지 컨셉이라 말하는 사람이 많았는데 근래에 들어서 콘셉트라 말하는 사람이 많은 것 같더군요. 사실 웹사이트를 운영하면서 제가 고민할 수 있는 영역은 레이아웃 잡는것까지였습니다. 개발자가 색상을 선택하면 망한다는 생각을 가지고 있는 사람중에 하나라... 그 다음 항목인 텍스처나 타이포그래피 같은건 생각조차 해본적이 없었죠. 타이포그래피란 단순하게 보면 그냥 폰트를 말하는 것 같습니다. ㅡㅡ;; 여기서 패스!!


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

제법 많은 블로거들이 포스팅을 할때 어둠의 경로로 접수한 이미지를 사용하죠. 단순히 텍스트만 있는 글과 관련 이미지가 첨부된 글과는 많은 차이가 나는 것이 사실이니까요. 백문이불여일견과  비슷한건가요? 웹에서 많이 사용되는 이미지는 jpeg, gif, png 형식의 이미지입니다. 저의 경우 png는 거의 사용을 안 해봤는데 png파일의 사용빈도가 점차 증가하고 있는 듯 하네요. 이미지를 사용함에 있어 고려되어야 할 사항은 연관성, 흥미로움, 매력이라는 세가지 요소가 있는데 이중에서 최소 두가지 요소에 대해 긍정적인 답이 나왔을때 사용하는 것이 좋다고 하는군요. 우리는 공짜를 좋아하죠. 이미지도 예외는 아닐거라 생각합니다. 몇몇 블로그에는 무료이미지이트에 대해 잘 정리된 컨텐츠가 있으니 문제가 될것이 없다고 생각합니다. 책에서 추천하는 무료이미지 제공사이트가 있는데요, 고품질의 이미지가 무려 250,000개 이상이 된다고 하네요. 바로 stock.xchng라는 곳입니다. 참고하세요 ^^


책에서는 각 파트마다 플로리다 컨트리 타일이라는 회사의 홈페이지를 어떻게 적용을 했는지 자세히 소개를 하고 있습니다. 책을 읽으며 들었던 생각은 내 주위의 디자이너들도 이정도는 고려하고 디자인을 하는걸까?였습니다. 물론 그런분도 있을테고 아닌분도 있겠죠? 색채심리학에 관심을 기울이며 디자인하는 디자이너라... 이 책을 어떤분들께 추천해드리면 좋을까요? 디자이너? 개발자? 좋아보이는 웹사이틀 만들고자하는 분들께 추천을 해드리고 싶네요. 

지난 웹심리학에 이은 두번째 책 이벤트 리뷰네요 ^^ 제 책상 오른편엔 그녀를 감동시킬 여행지 50이라는 책이 놓여있습니다 ^^ 책 보면서 열심히 여행다녀야지!!


지난주에 어머니께서 갑작스럽게 다리관절 수술을 하셔서 밤에 병원엘 다니느라 조금 늦었네요. 한달 이상은 입원해 계셔야 할 것 같은데... 작년에 허리수술에 이은 다리수술이라 걱정도 많이 했는데 그동안 다리가 아파서 잘 움직이지도 못 하셨는데 수술하고 난 후 많이 편해하는 모습을 보니 기분이 좋네요. 공공근로 얘기도 하시는 걸보면 좋긴 좋은가 봅니다. 어머니의 쾌유를 빕니다.




  1. BlogIcon 청공비 2009.06.11 13:27

    항상 기획이야 근사하게 되서 시작하지만 아무것도 모르는 사람들의 이래라저래라에 마지막은 망가진 사이트..T T

    • BlogIcon 알통 2009.06.11 13:47 신고

      그렇죠 뭐...
      근데 아무것도 모르는 사람들 말을 안들을 수 없다는거 ㅠ.ㅠ

    • BlogIcon 청공비 2009.06.11 15:35

      어떻게 보면 아무것도 모르는 사람들이 좋아해야 웹유저빌리티가 좋은 사이트라고 말 할수도 있지만...그래도 T T

    • BlogIcon 알통 2009.06.11 16:10 신고

      맞는 말씀입니다만...
      브라우저버전이 어떻게되나요?라고 물어볼때
      xp인데요 이러는 분들이랑은 ㅠ.ㅠ 힘들죠.

      제 경험상 이런 부류는... 의사, 공무원... 고령자.. 대충 이렇더라구요.
      지금은 공무원!!

    • BlogIcon 청공비 2009.06.11 17:28

      그리고 개발비는 얼마 안되는데, 눈높이는 언제나 네이버입니다. T T
      그런 쌈빡한 디자인이 하루 이틀이면 뚝딱 나오는 줄 아는데다, 저렴하게 할 수 있는 걸로 생각들 하시지요. T T

    • BlogIcon 알통 2009.06.11 17:31 신고

      구구절절 막 가슴에 와 닷습니다 ㅠ.ㅠ

  2. BlogIcon 백마탄 초인 2009.06.13 02:57

    안녕하세요, 첨 인사 합니다 ^ ^

    관련글 살포시 놓고 갑니다!
    베리 즐거운 주말 보내시길,,,!!

    • BlogIcon 알통 2009.06.13 23:06 신고

      안녕하세요 ^^
      백마탄 초인님 말씀처럼 오늘 완전 즐거운 토요일이었답니다.
      한주동안 올릴 사진이 잔뜩~~ ^^;;

  3. BlogIcon 진사야 2009.06.13 09:47

    글을 읽고 나니 기획자나 개발자에게도 좋은 책이 될 것 같군요 :-) 잘 읽었습니다.^^
    댓글 내용에서 완전 공감하고 가네요 ㅠㅠ "개발비는 얼마 안되는데, 눈높이는 언제나 네이버입니다. T T" 아 안구에 습기가....

    • BlogIcon 알통 2009.06.13 23:08 신고

      저는 ㅠ.ㅠ 을 회사가 다른회사에 인수되는 바람에 ㅠ.ㅠ 11월까지였던 일이 이달로 종치게 생겼네요 ㅠ.ㅠ
      "개발자 말곤 할게 없다."이것이 문제네요 ㅠ.ㅠ
      또 다시 업무에 익숙해지려면 몇달이 걸릴텐데..
      근데 은근히 다음 프로젝트가 기대되는 이유는 뭘까요? ^^

  4. 지나가는나그네 2010.07.15 05:32

    개발비는 얼마 안되는데, 눈높이는 언제나 네이버입니다. T T
    너무나 공감가는 말입니다..:( 이래서 다들 네이버 네이버 하나봐요...ㅠㅠ

    • BlogIcon 알통 2010.07.15 23:27 신고

      네이버~ 네이버~
      네이버도 처음엔 별거 없었는데.... ㅠ.ㅠ