사이트의 디자인을 어떻게 할 것인가

사이트의 디자인을 어떻게 할 것인가

사이트를 디자인하는 것은 언제나 어려운 문제입니다. 스미 모토하루 님은 SEO 検索エンジン最適化(SEO 검색엔진최적화) 웹사이트를 디자인하면서 여러 디자인적 요소들을 반영했는데, 그 내용을 한번 알아보겠습니다. 이번 포스팅의 경우 원문의 디자인을 참조하시면 더욱 이해하기 쉽습니다.


주제가 비슷한 다른 사이트와의 차별화

한번의 방문이라도 유저에게 인상을 남기고, 다음에 방문했을 때는 “아, 이 사이트는 전에도 본 적이 있다”라고 생각할 수 있도록, 즉 기억에 남도록 하는 것이 이 사이트의 디자인의 가장 중요한 포인트입니다. 이 사이트는 SEO 검색엔진최적화와 같이 차별화도 아무것도 없는 진부한 사이트명을 갖고 있었습니다. 이것은 이 사이트의 개설이 2002년이며, 그 당시에는 SEO와 검색 엔진 최적화라는 등의 말이 그다지 일반적이지 않고 충분히 독특한 것이었다는 것을 나타내고 있습니다.

하지만 그때부터 수년간에 거쳐서 SEO는 일반화되어, 이 사이트 명은 완전히 진부해져 버렸습니다. 그래도 사이트 명을 바꾸기 싫다고 하면, 그 외의 부분을 최대한 차별화하는 것밖에 없습니다. 디자인 차별화의 목표는 구체적으로는 다음의 두 가지입니다.

  • 다른 비슷한 사이트와의 차이를 명확하게 인식하고 기억하게 한다.
  • 자주 보는 사이트로서 친근감과 신뢰감을 얻는다.

위의 내용은 둘 다 유저의 기억과 밀접한 관계가 있다는 공통점이 있습니다. 여기서 위력을 발휘하는 것이 색채 설계입니다. 웹 페이지를 보고 처음으로 눈에 들어오는 정보는, 이미지나 문자 정보가 아니라 색채이며, 인상과 기억에 남는 것도 색채이기 때문입니다. 현재의 그린 베이스의 배색은 2006년에 스스로 다시 디자인했을 때에 정한 것 그대로이지만, 그 시점에서는 SEO 관련의 다른 사이트에 그린 베이스의 것이 거의 없었다는 것이 이 배색을 적용한 이유의 하나입니다.

하지만 이 배색에는 다른 이유도 있습니다. 신뢰성과 프로페셔널함을 보여주는 것입니다.

신뢰성과 프로페셔널함을 보여주기

이 사이트는 정보 제공 중심이며 비즈니스 요소가 거의 없지만, 이걸 ‘업’으로 삼고 있다는 뜻도 갖고 있습니다. 즉 정보 제공을 위한 사이트인 것과 동시에, 전문가로서의 자신을 어필하는 목적도 있다는 것입니다. 여기서 나오는 과제가 신뢰성과 견실함을 보여주는 것입니다. 또한 주제인 SEO는 그 특성상 스팸이라는 오해를 자주 사기 때문에, 편안함과 안정된 느낌을 연출할 필요성을 느꼈습니다. 정리하자면, 여기서의 목표와 해결책은 각각 다음과 같습니다.

  • 안전성 보여주기 : 자연스럽고 온화한 인상을 줌과 동시에, 파란 불처럼 안전한 이미지가 있는 녹색을 베이스로 배색한다.
  • 견실함 보여주기 : 베이스의 녹색에 대한 보색인 빨간 색 계열의 색 중에서, 견실한 인상을 가진 다크 레드를 보색으로 쓴다.
  • 신뢰성 보여주기 : 희귀함보다는 견실함을 중요시하고 조화로운 배색을 사용하며, 사용하기도 편리하도록 무난한 레이아웃을 쓴다.
녹색 위주의 구성과 갈색에 가까운 보색을 준 "SEO 검색엔진최적화"
녹색 위주의 색상에 갈색에 가까운 보색을 준 “SEO 검색엔진최적화”의 전체 구성

이 사이트의 경우, 이미지를 만드는 데 있어서 대부분의 역할은 배색에 있습니다. 더욱 기본적인 부분에서 말하자면, 배색이 조화롭지 않고 정신이 없을 경우, 어떻게 해도 아마추어의 티가 나고, 신뢰성과 프로다움과는 멀어지게 됩니다. 또한 위에서 보조색으로 사용한 다크 레드는 소제목의 글자색으로, 문장을 읽기 쉽게 하기 위한 뜻도 있습니다.

텍스트를 읽기 쉽고 이해하기 쉽도록 하기

사진 사이트나 동영상 사이트가 아닌 이상, 기본적으로는 어떤 사이트도 모두 텍스트가 주입니다. 즉 웹 디자인에 있어서 글이 읽기 쉬운지, 문장은 이해하기 쉬운지는 무엇보다도 우선시해야 할 중요 사항이라는 것입니다. 읽기 쉽고 이해하기 쉽게 만들기 위해 가장 필요한 것은 문장 자체의 품질을 높이는 것이나 시각적인 디자인에서도 어느 정도 보충할 수 있습니다. 여기서의 목표와 해결책은 각각 다음과 같습니다.

  • 쓸데없는 장식은 하지 않는다 : 눈의 피로를 덜고 집중력을 유지할 수 있도록 소제목과 인용, 리스트 등의 마크를 비롯하여 화면 내에 산만한 장식을 넣지 않는다.
  • 글자 사이즈를 크게 한다 : 뉴스 사이트 등 글 정보가 주인 사이트의 글자 사이트를 참고로 큰 글자 사이즈로 설정한다.
  • 글자와 배경에 명도차를 크게 한다 : 글자색과 배경색에 높은 콘트러스트를 잡고, 또 본문의 글자색을 무난한 색으로 해서 눈의 피로를 최소화한다.

디자인의 불필요한 장식을 최대한 제거하는 것은 개인적으로 특히 신경 쓰는 부분입니다. 문장을 읽고 이해하기 위해서는 집중력의 유지가 꼭 필요한데, 과도하게 장식된 디자인의 사이트는 문장에 집중할 수가 없습니다. 이것은 개인적인 문제일 수도 있지만, 예를 들어 소제목이나 인용, 리스트 등의 장식으로 체크 마크와 화살표 등의 컬러플한 마크가 있거나 소제목에 본문과 맞지 않은 배경색을 설정되어 있으면 집중력이 떨어지고 읽기 어려워집니다.

"SEO 검색엔진최적화"는 장식이 거의 없고 글씨 크기도 큰 편입니다. 미스터 SEO 역시 마찬가지입니다.
“SEO 검색엔진최적화”는 장식이 거의 없고 글씨 크기도 큰 편입니다. 미스터 SEO도 비슷하죠?

똑같이, 내용과 무관계한 이미지(웃으면서 악수하는 외국인의 사진 등)를 기사 윗부분에 올리거나, 유도용 이미지로 화려하게 사이드 바에 붙이는 것도 집중력을 저하시키고 기사를 읽는데 방해가 됩니다. 이러한 것을 피하기 위해서, 본문에 초점을 맞춘 레이아웃과 디자인을 하는 것도 중요시하고 있습니다. 이 사이트는 포스팅마다 글자 수가 아주 많으며, 한 기사당 소프트 커버 서적 6~8페이지에 해당하는 글자수가 채워져 있습니다. 그래서 기사를 읽는데 걸리는 시간도 길어집니다. 때문에 피로의 감소와 집중력의 유지는 디자인의 중요한 과제입니다.

페이지의 표시를 빠르게 하기

페이지가 표시될 때까지 기다리는 시간은, 방문을 한번 할 때의 페이지 수에 직접 영향을 줍니다. 대기시간이 길어질수록 집중력이 떨어지고, 읽으려는 기력도 없어지기 때문입니다. 페이지의 이동은 순간적으로 하는 것이 이상적입니다.

  • HTTP리퀘스트 횟수를 줄인다 : CSS Script로 이미지를 정리하거나, 외부 CSS를 하나의 파일로 정리함으로써 리퀘스트 수를 줄인다.
  • 파일을 GZIP 압축 전송한다 : 서버로 mod_deflate를 유효로 하고 GZIP 압축 전송을 하여 전송량을 삭감한다. Minify보다 더욱 효과적이다.
  • JavaScript의 로딩을 지연시킨다 : JavaScript는 CSS와 페이지 본문보다 나중에 읽게 하거나 동기화하지 않는다.
  • 필요 없는 것을 삭제한다 : 장식과 위젯과 광고중에서 정말로 필요한 것 외에는 모두 삭제한다. 속도를 높일 뿐만 아니라 독자가 산만해지는 요소를 줄인다.

이 사이트에서 실시하고 있는 것은 주로 위와 같은 것입니다. 페이지의 표시를 빠르게 하는 것은, 이 항목의 처음에 말한 듯이 숫자로 나타나기 쉬운 효과도 있지만, 그것보다 중요한 것은 주로 독자의 심리에 주는 영향입니다. 이 사이트에서는 신뢰성과 견실함을 중요시하고 있지만, 표시가 느리면 물거품이 되어버리기 때문입니다. 빠른 사이트를 보는 것은 특별히 감흥이 없지만, 잘 표시되지 않는 사이트를 보면 누구든지 그 제작자와 운영자는 능력이 없다고 느낄 것입니다. 또 경우에 따라서는 예의가 없다는 인상을 줄 수도 있습니다.

음식점과 방문한 기업에서 안내 받지 못하고 현관에서 장시간 기다려서 불쾌한 마음이 든 것은 누구든 있는 경험입니다. 이 불쾌함의 이유는 시간이 아깝다는 것과, 방문객을 우습게 보는 듯 무례한 태도라고 할 수 있겠죠. 이런 인식을 주는 것은 피해야 합니다.

소셜 버튼의 클릭율을 높이기

본문과 내비게이션 등의 사이트로서의 필수 요소 이외에 이 사이트에 표시되는 것은 우선 순위가 높은 순으로 다음과 같으며, 각각 가로 안의 역할을 맡았습니다.

  • 각종 소셜 미디어 공유 버튼 (신규 독자의 획득)
  • RSS 구독 링크, Twitter 팔로우 버튼, Facebook 페이지 좋아요! 버튼 (방문자의 고정 독자화)

이러한 클릭은 이용자에게 원하는 구체적인 액션이며, 이 사이트에서의 일종의 컨버전에 해당하는 의미를 두고 있습니다. 콘텐츠를 방해하지 않는 범위 내에서 이것을 최대화하는 것도 디자인의 과제의 하나입니다. 구체적으로는 다음과 같이 배치되어 있습니다.

큼직한 공유 버튼과 Like 및 팔로우 버튼이 있습니다. 그리고 관련 글을 제공합니다.
큼직한 공유 버튼, Like 팔로우 버튼입니다. 그리고 독자를 위한 다른 추천 기사도 제공합니다.
  • 공유 버튼 : 기사를 읽은 직후의 액션을 예측하여 기사 밑단에 공유를 재촉하는 메시지와 함께 배치
  • 구독 버튼 : 여기저기 돌아본 후의 액션을 예측하여 기사 밑의 관련기사의 링크보다 아래를 구독하도록 재촉하는 메시지와 함께 배치

이 항목에서 말하는 액션을 끄집어낸다는 부분은 여기까지 말씀드린 다른 항목과 비교하면 조금 우선도가 낮아집니다. 이것은 당연한 일입니다. 유저에게 좋은 체험을 제공하는 것이 우선이며, 액션을 바라는 것은 그 다음이기 때문입니다.

마지막으로

이 사이트의 디자인의 방향성은 꽤 소극적인 것이며, 무언가 특별한 일을 하고 있다는 인상 또는 좋은 인상을 주기 위한 적극적으로 접근하고 있지는 않습니다. 특별한 아름다움과 화려함은 사이트의 성격과 목적에서 보았을 때 불필요하거나, 경우에 따라서는 해가 될 수도 있다고 생각하기 때문입니다. 웹 사이트는 보면서 즐기는 것이 아니라 유저가 활용하는 것입니다. 제품 디자인과 같이 사용성을 우선한 기능미가 요구됩니다. 게다가 이 사이트는 정보 제공을 중심으로 하고 있기 때문에, 주역인 정보가 전면에 나서고 디자인은 그것은 보강하는 것이어야 합니다.

그러한 내용으로 보아 이 사이트에서는 나쁜 인상을 주지 않는 것을 가장 중요시하고, 통일감과 심플함, 읽기 쉬운 것, 스피드 등을 중요시하고 있습니다. 아무 화려함이 없고 글자만 있는 이 사이트라도 지금까지 말씀드린 것처럼, 달성하고 싶은 목표를 따라서 의외로 자세하게 생각해서 만들어져 있습니다. SEO라고 하면, 뭔가 디자인과 무관한(경우에 따라서는 대립하는) 것이라고 생각되겠지만, 실은 SEO와 디자인은 밀접한 관계가 있습니다.


다음 콘텐츠도 참조하시면 좋습니다

웹사이트를 위한 시각적 디자인 최적화
뺄셈의 디자인, 뺄셈의 SEO
다도와 고전에 배우는 UX 디자인

Comments

comments


답글 남기기

이메일 주소는 공개되지 않습니다.

3 + 7 =