웹사이트의 디자인은 어떻게 하는가
사용자와 친구가 되고 싶은가? 아니면 한 번만 만날 사이인가?
사람은 만나는 사람에 따라 입는 옷이 다르다.
친구를 만날 땐 편한 옷을 입고, 데이트를 할 땐 예쁜 옷, 특정한 일을 하기 위해선 특수한 옷을 입는다. 사이트의 모습도 마찬가지여야 한다. 내가 만들고자 하는 사용자와의 관계에 따라 웹서비스의 디자인, 레이아웃, UI 모두 변화한다.
1. 친구형
편안한 서비스를 만들기 위해선 격식을 낮출 필요가 있다. 이게 무슨 말이냐면 디자인이 투박하고 익숙한게 좋다는 말이다. 전세계 최대의 커뮤니티 사이트 레딧을 살펴보자.
언듯봐도 예쁘다거나 멋지다는 생각보단 엄청나게 많은 수다가 오고가는 느낌을 준다. 복잡해보이기도 한다. 하지만 레딧은 외국에서 아주 익숙한 Thread 형태의 게시판 구조를 띄고 있고, 이런 디자인 문법은 사용자들에게 웹사이트의 구조를 익히기 위한 추가적인 노력을 만들지 않는다.
이제 한국의 예를 살펴보자. 한국 최대 커뮤니티인 디씨인사이드에서도 마찬가지의 패턴을 확인할 수 있다.
두 사이트 모두 사용자에게 익숙한 레이아웃과 페이지 구성을 따른다. 익숙하고, 편안하다는 것은 어쩌면 구식 디자인이라고도 표현할 수 있는데, 사용자와 친구같은 관계를 맺고자 한다면 구식 레이아웃은 정답이 될 수 있다.
친구형 웹사이트에서는 눈에 띄는 디자인 패턴이 존재한다.
전반적으로 작은 글씨체
자극적이지 않은 색조합
많은 컨텐츠 노출
쉬운 페이지 구조
이 패턴은 심미적으로 아름다워서가 아닌 사용성이 더 중요하기에 이러한 패턴을 만들게 된 것이다. 하나하나 살펴보면 게시판엔 엄청나게 많은 글이 올라가고, 댓글이 많이 달리므로 글씨 크기가 커선 안된다. 또한 웹사이트에 자극적인 색상이 많아지면 여러 컨텐츠에 집중하기보단 자극적인 색상에 눈이 가서 시선이 분산된다. 그 뿐 아니라 편안한 색상이 아니라면 한 번 접속해서 오랫동안 사용하는 커뮤니티들의 강점을 마이너스 하는 요인이 된다. 많은 컨텐츠를 노출하는 것은 커뮤니케이션을 유도해주고, 페이지 구조를 익숙하게 만들어야 사용자들이 사이트를 쉽게 사용할 수 있다.
어찌보면 상식적인 내용이지만 이러한 문법을 무시하는 사이트도 많이 있다. 예를 들면 핀터레스트가 있다.
핀터레스트는 웹사이트에서는 과도하게 큰 폰트와 붉은 포인트 컬러를 사용했다. 아이러니하게도 핀터레스트는 포인트 컬러와 브랜드 컬러가 동일한데, 가장 주목성이 높은 빨강색을 웹사이트 이곳저곳에 두다보니 컨텐츠보다 자연스럽게 빨간색으로 눈이 가게 된다.
이러한 이유에서 인스타그램은 웹사이트에서 모든 고채도의 색상을 제거하고, 컨텐츠에 집중하는 디자인을 택했다.
인스타그램의 디자인은 트랜드를 따르면서도 사용자를 배려한 디자인이라는 것을 쉽게 알 수 있다. 첫번째는 불필요한 포인트 컬러를 제거해서 컨텐츠에 집중할 수 있게 만들었다. 심지어 로고도 브랜드 컬러인 분홍, 보라 계열의 그라데이션 컬러를 사용하지 않고 블랙으로만 나타냈다. 사람들에게 주목을 끌어야 하는 스토리에서만 브랜드 컬러가 적용되어있으며, 검증된 사용자라는 의미를 나타낼 때는 신뢰도를 주는 색상인 블루를 사용해서 표시해주고 있다. 요약하자면 인스타그램의 디자인은 디자이너의 감각에 의존한 결과라기보단 디자인 문법과 패턴을 따라 수학적으로 계산된 디자인이라 할 수 있다.
2. 첫만남형
사이트 사용자들이 딱 한 번만 들어온다면 어떨까? 제품을 소개하거나 사이트 내에서 커뮤니케이션이 발생하지 않는 경우 단 한 번만을 가정하고 사이트를 설계하는게 적합하다. 정확한 예시라고 할 순 없지만 넓은 의미에서 랜딩 사이트, 제품 소개 사이트 등이 이 케이스라 할 수 있다.
대부분의 랜딩 사이트는 하나의 페이지에 소개 내용이 적힌 팜플렛 같은 구성을 택한다. 그렇기 때문에 랜딩 사이트는 특정한 목적을 가지고 사용되는데, 서비스 소개, 브랜딩, 포트폴리오 등의 목적이다. 방문자가 어떤 인터렉션을 할 필요성도 낮으며, 인터렉션이 목적이 아닌 사이트이므로 아래의 패턴이 공통적으로 목격된다
비교적 큰 글씨
화면 전체를 채우는 이미지
친근감을 주는 일러스트레이션
눈길을 끄는 컬러들
https://www.morningbrew.com이런 첫만남형 웹사이트는 욕심을 부리기 보단 목적에만 집중해야한다. 위의 예시를 보면 사이트에 대한 구구절절한 소개보단 단 하나의 타이틀과 인풋 필드만을 가지고 행동을 유도한다. 사용자들이 글을 읽는 것 자체가 에너지를 소모하는 일이라는 점을 생각해봤을 때 위의 랜딩 페이지는 아주 잘 만든 사이트라 할 수 있다.
소개팅 자리에서 자신을 어필할 게 많다면 어떨까? 내 이야기를 지루하지 않게 풀어내가는게 핵심일 것이다. 그렇기 때문에 내용이 길어야할 수록 스토리텔링이 중요하다.
랜딩 사이트에서 스토리텔링을 할 때의 원칙은 다음과 같다.
재밌어야한다
쉬워야 한다
그림이 있어야 한다
사람들이 사이트에 대해 무관심하다고 가정해야한다. 위의 3원칙을 지키지 않는다면 사람들은 3초 이내로 사이트를 떠날 것이다. 아무리 정성들여 글을 적었더라도 읽히지 않으면 소용이 없다. 통계적으로 사람들은 사이트에 관심이 없고, 글자는 읽지 않기 때문에 더욱 더 친근하고 쉬워야 한다.
사이트를 편안하게 만들어주는 한가지 요소는 바로 그림이다. 동화책을 보는 기분을 만들어주는게 일러스트 이미지들이다. 물론 뛰어난 일러스트 이미지를 구하는건 어려울 수 있지만 조금만 찾아보면 좋은 일러스트 이미지를 무료로 얻을 수 있다.
https://icons8.com/vector-creator
3. 목적 달성형
특정 목적을 위해서만 존재하는 사이트도 있다. 이런 경우 기본적인 레이아웃을 아예 무시하고, 자신만의 스타일을 우직하게 밀어붙인다.
달과의 거리를 통해 우주의 크기를 알려주는 이 사이트는 보편적인 사이트 구성을 완전히 무시했다.
http://joshworth.com/dev/pixelspace/pixelspace_solarsystem.html?a스크롤을 하면 보통 아래로 내려가지만 이 사이트는 횡으로 이동한다. 사용자들은 스크롤을 하면서 이렇게 달과 지구 사이가 멀었는지, 다른 행성과 이렇게 멀었는지 간접적으로 경험할 수 있다.
일반적인 레이아웃을 무시하는 웹사이트는 극적인 연출에 매우 적합하다. 사용자들은 신기함을 느낄 수 있고, 큰 임팩트를 경험한다. 이런 사이트는 대체로 사이트의 제목부터 남다른 경우가 많은데, 이름이 매우 길거나, 웃기거나, 이름 자체로 목적을 의미한다.
페이스북의 모든 얼굴을 모은 사이트를 보자.
http://app.thefacesoffacebook.com/사이트는 일반적인 레이아웃이라곤 부르기 힘든 구성을 택하고 있다. 노이즈처럼 보이는 저 색상이 모두 사용자들의 얼굴이다. 클릭해보면 확대되는데 10억명이 넘는 사용자들의 얼굴이 하나하나 존재한다.
페이스북 프로필 사진이 모자이크처럼 존재한다.이렇게 비정형 레이아웃, 익숙하지 않은 구조를 통해 신선함과 임펙트를 줄 수 있다.
웹사이트는 목적에 따라 디자인 패턴이 변화해야 한다. 소잡는 칼과 닭잡는 칼은 다른 것처럼 서비스의 방향성에 따른 디자인은 사용자와의 관계 형성에 핵심이 된다.
