고품질 웹사이트를 만들기 위한 팁과 예제

http://www.webtrendawards.com/blog/textyle/15801




wefunction.com의 디자이너 Liam이 좋은 웹사이트를 만들기 위한 팁과 예제를 설명한 블로그를 등록했습니다. 쭉 살펴보니 아주 성의껏 작성한 것이 참 마음에 듭니다. 물론 대부분의 내용들은 이미 어느정도 디자인 실력이 있지만 발전이 더딘 사람들에게 참고 할 만한 내용들이고 완전 초심자용은 아닙니다. 하지만 디자인에 관심있는 초심자들도 한번쯤 읽어두면 나중에 도움이 될 수 있지 않나 싶군요.

모든 것들을 번역해 드릴 수는 없고 키포인트가 되는 부분만 함께 잠시 살펴보도록 할께요. 직역이 아니라 어느정도 입맛에 맞게 바꿔서 적는 것이니 양해해 주시고요. 원문은 여기를 클릭하시면 됩니다.


1. 공간 (Spacing)



웹 브라우저의 영역을 어떻게 사용하느냐에 대한 이야기를 하고 있습니다. 가장 빈번히 실수하는 치명적인 공간 디자인의 오류로서 컨텐츠와 가생이(Edge)의 간격을 너무 좁게 설정하는데에 있다고 설명하고 있습니다. 너무 타이트하게 마진을 여백을 잡지 말고 넉넉하게 하여 보는이의 눈의 환기 시키라는 이야기 입니다. 아래 그림처럼 넉넉하게 말이죠.




2. 섬세한 픽셀 디자인 (Pixel Perfect Detail)



1픽셀의 아주 작은 부분도 신경써서 하라는 말입니다. 제가 몇년전에 8tunes.net이라는 사이트를 운영할 때 적었던 디자이너 가이드와 동일한 내용입니다. 단 1픽셀이 하나의 디자인 요소의 느낌을 완전히 바꿔버릴 수 있기 때문이죠. 위 그림은 아직도 유행하고 있는 Glossy적인 디자인에서 주로 볼 수 있는 1px 반사광 처리입니다. 아주 옅은 그라데이션의 Edge 부분을 1px의 밝은 색상을 상요해서 입체감을 주는 기법입니다.



버튼도 예외일 수 없겠죠. 입체감을 주기 위한 반사광 처리는 버튼에서도 사용됩니다. 좌측과 상단은 밣게, 우측과 하단은 어둡게 표현하는 것은 버튼의 입체감을 살리는 아주 기본적인 방법입니다. 이 방법은 버튼의 배경에 옅은 그라데이션이 적용 되었을 때 그 효과가 배가됩니다. 입체감이 있는둥 없는둥 아주 미세하게 느껴질 수록 좀 더 고난이도 기법이라 할 수 있겠죠.


3. 타이포그라피 (Well thought out Typography)

 

글자의 자간, 행간, 크기를 비롯한 전체적인 타이포그라피를 잘 살려야 한다는 내용입니다. 여기서 말하는 타이포그라피는 이미지가 아닌 웹 브라우저상에 그대로 드로잉 되는 화면용 서체의 활용을 더 중점적으로 강조하고 있습니다. 아름다운 무료 서체가 무궁무진한 알파벳 언어권 디자이너들만의 배부른 소리죠. 우리나라 디자이너들은 좋은 화면용 서체가 없기 때문에 대부분 이미지로 상용 폰트를 사용하고 있습니다. 다만, 영어를 써야할때면 CSS를 통해 아름다운 타이포그라피를 만들 수 있다는 점만 기억하면 됩니다.


4. 의미에 맞는 요소의 사용 (Organization of Elements)



본문부면 본문부, 댓글이면 댓글, 바로가기 링크면 링크, 각 목적에 맞는 요소들의 의미를 정확하게 살리라는 이야기입니다. 댓글부와 바로가기 링크가 똑같고, 본문부와 댓글부가 똑같이 디자인 된 사이트는 뭐가 어떤 이야기를 하고 있는지 알 수가 없다는 이야기를 하고 있습니다. 뭐 좋은 내용입니다.


5. 데코레이션 (Restraint & Subtlety)

 

우리가 주로 쓰는 말로 데코레이션이라 생각하면 됩니다. 사이트를 보다 개성있게 만들어 줄 수 있는 몇가지 장치들을 말하죠. 이런 장치들을 훌륭하게 꾸미면 완전히 차별화 된 디자인의 개성 넘치는 사이트를 만들 수 있습니다. 하지만 개성이 강할수록 방문자보다는 디자이너가 쉽게 그 디자인에 식상함을 느낍니다. 무난함과 개성의 경계를 조화롭게 꾸밀 수 있는 것도 Creative에 있어서 중요한 점이 아닐까요.


6. 가능한한 많은 색상을 활용 (Using Colour to it’s Full Potential)

 

Laim은 디자이너들이 범하는 가장 큰 실수로, 자기의 입맛에 맞는 몇가지의 색상만 사용한다는 것에 있다고 지적합니다. 최대한 많은 컬러를 사용해서 사이트를 풍성하게 하는 것이 중요하다고 이야기 합니다. 물론 맞는 말입니다. 또한 여러가지 컬러를 혼용해서 사용하는 것만큼 어려운 것도 없습니다. 특히나 전통적으로 흰색의 종이와 검은색의 묵으로 그림을 그려왔던 우리나라와 같은 민족은 더더욱 그렇습니다. 우니라나와 인도 사람들이 색을 사용하는 방식은 완전히 틀립니다.

이 색 사용에 대한 부분은 아무리 가르치고 강조해도 소용이 없습니다. 제가 볼때 우리나라 사람들은 색상 사용에 대한 DNA 자체에 문제가 있다고 생각합니다. 물론 저를 포함해서요^^ 아닌 사람은 말고요.


7. 아무도 하지 않는 것을 해보라 (Doing something Nobody else has done)



창의력에 관련 된 부분을 거론하고 있습니다. 처음에는 이상하게 보일지 몰라도 일반적으로 널리 사용되는 것들보다 아무도 하지 않았던 것을 해보라는 이야기입니다. 위 그림에서는 상단 메뉴 부분을 예로 든 것 같군요. 이 이야기는 디자인으로 돈을 버는 사람들에겐 예외로 해두는게 좋겠군요. 창의성과 예술성이 결합되려면 돈 벌 시간 없이 자기 일에만 미쳐야 하거든요. 아무튼 좋은 이야기면서도 진부한 이야기입니다.

여기까지가 Laim이 이야기 한것에 제 이야기를 덧붙인 내용입니다. 디자이너들에겐 익히 많이 듣던 이야기지만 중요한건 좋은 예문과 예제 사이트, 그리고 팁까지 모두 하나의 블로그에 담고 있다는 점 입니다. 그 부분을 높이 사야한다고 봅니다. 여러분들도 조금이나마 사이트 디자인에 대한 생각이 확고해졌으면 좋겠습니다.