누구나 쉽게 배우는 웹사이트 디자인의 비밀 - 인사이트

"누구나 쉽게 배우는 웹사이트 디자인의 비밀"이라는 책을 리뷰하게 되었다. 

이 도서는 "The Principles of Beautiful Web Design" 원서의 3번째 개정 번역판이다. 
3번째 개정 번역판이 나왔다는 것 자체만으로 이 책의 인기와 포함하고 있는 정보들이 유용함을 알 수 있을 것 같다.

5가지 핵심적인 원칙 ?!

이 도서는 아래의 5가지 웹 디자인의 핵심적인 원칙을 바탕으로 초보자도 이해하기 쉽도록 설명해주고 있다.

자 아래의 단어들 중 5가지 원칙을 찾아봅시다!!

정답은? 아마도 모두다 찾았을 것이라 생각을 해본다.

• 레이아웃 - 1장
• 색 - 2장
• 텍스처 - 3장
• 타이포그래피 - 4장
• 이미지 - 5장

자! 그럼 5가지 핵심원칙을 살펴볼까 한다.
참고로 이 도서는 "누구나"에게 초점을 맞추어 상당히 쉽고 이해하는데 어려움이 없도록 작성한 것 같은 느낌을 받았다.

 

다 이유가 있는 배치였구나!

1장 레이아웃 챕터에서는 기본적인 레이아웃 구조를 소개하고 실용적인 여러가지 이론 및 실천 방법들을 설명하고 있다.
기술적인 내용들을 간략히 설명하면 "그리드 이론", "균형", "통일성", 강조" 등 다양한 방향에서 레이아웃을 잘 설정할 수 있도록 설명하고 있다.

< 웹 페이지의 레이아웃 구성 >

"그리드 이론"은 3등분으로 나누어서 요소들을 배치하는 내용인데, 쉽게 생각해서 카메라를 찍을 때 나오는 가이드선을 생각하면 이해하기 쉬울 것 같다. 그 가이드선을 이용하여 비율을 맞추어 사람이나 사물을 찍으면 좀 더 안정적인 사진을 찍을 수 있는 것과 같다고 볼 수 있을 것 같다. 

그냥 무심코 스쳐지나가던 웹 페이지들도 나름대로 철저한 기준(지속, 고립, 대비 등)에 의하여 작성되었음을 인지하게 되었다. 예로 트위터 홈페이지는 "대비"(p.30 참고)라는 개념으로 보았을 때 잘 정의된 사이트라 그런지 내 시선은 자연스럽게 "Sign Up" 버튼을 향하고 있었다. 

< 트위터 홈페이지 >

1장 레이아웃 챕터 후반부에는 현재 모든 웹사이트 구성의 대세로 자리잡은 "반응형 디자인"에 대한 설명도 되어있다. CSS를 사용하여 사용자의 디바이스에 따라 레이아웃이 동적으로 변경되어야 하는 부분과 방법에 대해서 안내하고 있다. 

미술 시간이 제일 어려웠었는데 ??

2장 색 챕터는 개인적으로 가장 유익하게 다가왔다.
색에 대한 개념부터 시작하여 RGB색상환의 이해, 단색/유사색 설계, 보색 설계 등 색채 심리학을 통하여 사용자가 느낄 수 있는 가장 좋은 방법들을 소개하고 있다. 
RGB 색상환 도표를 이용하여 보색 설계를 사용하는 방법은 정말 이해하고 나니 신기할 따름이었다!

< 색상환 도표 >

< 보색 설계 방법 >

밋밋한 홈페이지 만들거야? 

3장 텍스처 챕터에서는 밋밋한 홈페이지가 아닌 홈페이지의 컨셉(주제)에 맞는 분위기를 만들어야 한다고 이야기한다.
여기선 텍스처의 정의를 "디자인이나 개체의 표면에 독특한 외관이나 느낌을 더하는 모든 것"을 말한다고 한다.
실질적으로 점, 선, 도형, 부피와 깊이, 패턴 등의 그래픽 디자인 요소들을 사용하여 꾸밀 수 있다. 

아래의 사진은 CSS를 이용하여 패턴을 사용하는 예시이다. 
바탕화면 설정할 때 중앙정렬이나 가로 반복, 전체 반복 등을 생각하면 될 것이다. 

< 패턴 반복에 대한 예시 >

활자의 힘을 보아라!!

4장 타이포그래피 챕터는 저자도 말한다. "중독성"이 있고 엄청나게 방대한 양의 공부할 것들이 있다고 말이다. 
타이포그래피라는 말은 어디선가 들어보았긴 한데 정확히는 모르니 정의만이라도 알아가는게 좋을 것 같다.
"타이포그래피는 글자 쓰기로 인상을 만드는 것"이라고 정의 내릴 수 있겠다. 

다양한 폰트를 사용하여 가독성 및 페이지의 이미지 등을 만들어갈 수 있다. 또한 예쁜 폰트를 과거에는 포토샵등을 이용하여 이미지를 만들어야 했으니 이제는 CSS3의 기능을 통하여 충분히 구현이 가능하다고 한다.
폰트 관련된 다양한 내용들이 수록되어 있으니 꼭 읽어보기 바란다.

< 타이포그래피로 만든 콜라주 >

이미지도 잘 골라야 한다!

마지막 5장 이미지 챕터에서는 이미지를 사용함에 있어서 상황에 적절하게 맞는 이미지를 사용해야 한다고 안내하고 있다.
또한 이미지를 사용할 때는 합법적인 출처가 보장되는 것을 사용해야 한다는 부분을 말하고 있다. 이 부분은 어떻게 보면 저작권 침해의 소지까지 갈 수 있는 민감한 부분임을 인지해야 할 것 같다. 단순히 구글에서 이미지 검색을 통하여 얻은 이미지를 무작정 사용하는 것은 상당히 위험한 일이니 꼭 권한을 확인하도록 한다. 

5장의 끝 부분으로 가니 "창의적으로 사진 자르기"의 내용은 평이한 사진을 좀 더 역동적으로 만들어 줄 수 있는 좋은 방법이기에 참고하면 좋을 것 같다. 

정리 해볼까요??

"누구나 쉽게 배우는 웹사이트 디자인의 비밀" 제목과 같이 정말 쉽게 설명되어 있는 것 같으며 노하우를 전수 받은 느낌을 받았다.

각 설명에 대하여 이미지 첨부(해당 홈페이지 이미지 및 다양한 이미지)가 되어 있어서 직접 링크를 들어가보지 않아도 되기에 부담없이 책만으로도 충분히 이해가 되었다. 

웹사이트 디자인을 기획하려는데 기초가 부족하거나 아이디어가 떠오르지 않으신다면 이 도서를 읽어보기를 추천합니다.!