웹사이트를 디자인 하기 전 고민해야 될 것들

안녕하세요 키다리디자이너입니다.

2016년 새해가 밝았네요. 올해는 인터넷/소프트웨어 산업이 많이 발전하길 기원해 봅니다. :-)

 

하나의 웹사이트를 디자인하기 위해서 웹디자이너는 어떤 것들을 고민해야 할까요?

막연히 기획서를 보며 고민하거나 디자인 작업을 하는 도중 고민하는 것보다는 디자인에 대한 계획을 대략적이나마 먼저 세우고 디자인을 시작하는 편이 훨씬 좋을 것입니다.

 

오늘은 웹디자이너가 사이트를 디자인 하기 전 고민해야 될 것들에 대해 알아보겠습니다.

 

 

 

1. 웹사이트의 타겟

 

디자이너는 먼저 현재 기획하는 웹사이트의 주요 타겟(사용자)을 파악한 후 그에 따른 사용성을 분석해 봐야 합니다.

이것은 UX를 고민하는 큰 맥락이기도 한데요, UX를 어렵게 생각할 필요는 없습니다. 타겟이 정해졌다면 그들이 이제까지 많이 이용하는 사이트들을 수집하고 그것들이 갖고 있는 공통적인 부분을 수집하고 정리해 보면 구체적인 화면들에 대한 디자인이 잡혀나갈 수 있습니다.

 

이러한 절차가 필요한 이유는 웹사이트의 UI나 기타 기능을 구현할 시 그것을 처음 보는 사람이 아무 어려움 없이 익숙하게 사용할 수 있는가에 대한 테스트가 반드시 필요하기 때문입니다.

또한 디자인 요소나 레이아웃이 너무 크거나 너무 작거나 기타 수많은 이유로 사용자에게 거부감이나 생소함을 주지 않도록 많이 비교해보고 고민해야만 할 것입니다.

 

본 포스트에 사용된 사이트 스크린샷은 예제이며 필자와는 아무련 관련이 없으므로 문제시 삭제하겠습니다.

 

 

Saver the children의 캠페인 페이지입니다.

이 홈페이지는 후원과 자선활동이라는 주제로 남녀노소 모든 사람들에게 편리한 접근성을 제공해야 합니다. 특히 나이 많은 분들을 위한 고민이 따라야 합니다.

그렇지만 너무 비쥬얼적인 부분에 치우쳤다는 느낌을 지울 수가 없는데요, 강하고 큼직한 이미지에 비해 글자가 너무 안보이거나 작다는 것입니다.

특히 웹폰트를 사용하면 시스템폰트보다 같은 크기에서 시각적으로 선명함이 떨어짐에도 작은 글자에 회색 컬러를 사용하여 잘 보이지 않고 좌상단 Topic 이미지는 흰색 글 배경이 밝아 글자가 있는지조차도 자세히 봐야 알 수 있을 정도입니다.

상단 네비게이션바에서는 2depth 메뉴의 글자도 너무 작은데 불필요한 영문 사용으로 더욱 사용성을 해치고 있습니다.

 

결국 이 홈페이지는 디자이너의 고민이 조금 부족하지 않았나 하는 생각이 들게 합니다.

 

 

 

2. 정확한 정보전달과 디자인 테스트

 

웹사이트의 목적은 정보 전달입니다. 그 무엇도 이 목적 위로 올라설 수는 없습니다.

하지만 디자인적인 욕심이나 화려함, 또는 유행하는 UI를 굳이 접목시키려고 하다 이 정보 전달이라는 목적을 해치게 될 수도 있습니다.

요리를 할 때에도 좋은 재료, 맛있는 양념이라고 해서 모두 과하게 넣어버리게 되면 오히려 요리를 망치게 되듯이 디자인도 그것에 필요한 적절한 선을 정해야만 사용성 높은 디자인이 완성될 것입니다.

 

 

 

 

하나투어의 여행박람회 홈페이지입니다.

너무 많은 컬러와 강한 색채의 이미지가 다수 사용되어 화려하지만 현란한 느낌까지 들게 합니다. 그러다 보니 시선이 머물러 흐르지 못하고 맴돌게 되는 느낌이 듭니다.

 

여행박람회를 알리고 초대한다는 목적보다 관광지의 화려함과 컨텐츠의 풍부함을 강조해버린 것은 아닐까요?

 

 

 

3. 컨텐츠의 심플함

 

가장 중요하고 필요한 컨텐츠를 효과적으로 배치할 수 있는 방법에 대한 고민을 키다리디자이너는 "컨텐츠의 심플함"이라는 문장으로 정했습니다.

 

일반적으로 인터넷 사용자가 웹사이트에 접속해 내용을 훑어보는데에는 5초의 시간도 걸리지 않는다고 합니다. 다시 말해 그 5초 안에 사용자가 뒤로가기 버튼을 누르지 않도록 사로잡아야 한다는 뜻입니다.

그것은 가장 중요하고 핵심적인 컨텐츠를 바로 알아볼 수 있도록 디자인하는 이유입니다.

 

 

 

 

KB국민은행의 대학생 전용 복합 컨텐츠 홈페이지입니다.

일단 이미지가 좀 작긴 하나 무엇을 위한 홈페이지인지 목적이 애매합니다. 또한 접속 후 어떤 행동을 유도할 것인지 파악이 어렵습니다.

블로그와 SNS와 웹진 등 여러가지를 섞어 놓은 듯한 느낌과 함께 사이트의 정체성이 불분명한 홈페이지처럼 보입니다.

 

 

 

4. 그리드를 그려보기

 

그리드를 이용하면 보이고자 하는 정보를 러프하게 미리 배치해보고 완성된 사이트의 구성을 볼 수 있습니다.

위에 기술한 "정보전달"과 "컨텐츠의 심플함"의 관점에 디자인적인 감각을 더해 최적의 그리드를 연구해야 합니다.

특히 모바일의 경우 모든 영역은 격자 형태의 가장 작은 단위를 정해 놓고 이것의 배수를 이용하여 구성하기도 합니다.

 

 

 

 

5. 유행에 민감하게

 

웹디자인의 트렌드는 정말 빨리 변하고 있습니다.

작년에만 해도 유행하던 핀터레스트스타일의 레이아웃이나 알록달록한 컬러의 플랫아이콘이 최근에는 거의 쓰이지 않는 것만 봐도 알 수 있죠.

 

적어도 웹디자이너는 이 유행에 가장 민감하게 반응해야 합니다.

하지만 그것을 너무 빨리 실무에 적용할 필요는 없습니다. 다만 유행에 대한 기존 방법과의 장단점과 비쥬얼적인 차이만 파악하고 있으면 언제든 내 것으로 만들 수 있으니까요.

 

 

 

 

이상으로 웹디자이너가 디자인을 시작하기 전 고민해야 할 것들을 알아봤습니다.

 

웹디자인은 예술의 영역이 아닌 산업의 영역에 가깝습니다. 그러나 일부 회사나 디자이너들은 웹디자인을 예술의 영역으로 착각하는 모습을 종종 보이곤 합니다.

아름답고 멋진 디자인도 물론 중요하나 그것이 사용성을 방해하거나 불편함을 초래해서는 안되겠죠. 그것이 말하고자 하는 목적과 내용을 전달하는 데에 가장 적합한 디자인을 연구한다면 분명 좋은 디자인 결과물이 나올 것입니다.