이 글은 Telepathy에 게시된 글을 직접 번역한 글입니다.
전문 번역가가 아니므로 대량의 오역 및 의역이 있을 수 있습니다.
원문: 14 Beautiful Content-Heavy Websites for Inspiration
많은 콘텐츠를 담는 웹사이트를 디자인하는 것은 쉽지 않은 작업입니다. 사용자가 잘 따라올 수 있도록 빵 부스러기가 될 수 있도록, 모든 정보를 명확하고, 잘 정리되었으며, 숨김없이 보여주고 있나요? 이런 방시근 자칫 잘못하면 사용자를 숨 막히게 할지도 모르고, 콘텐츠에 압도된 사용자들은 콘텐츠를 다 소비하지 않고 이탈하기 쉽습니다. 하지만 반대로 성공적으로 설계만 한다면 사용자는 당신의 메시지를 단순히 이해하는 것을 넘어서 적극적으로 새 친구도 데려올 겁니다.
“노출을 두려워하면서, 눈에 보이지 않는 것 또한 무서워한다. 이게 바로 당신의 딜레마다."
Afraid of being exposed, dying to be seen - there’s a dilemma for you.
- Philip Roth, The Human Stain
정보 과부하는 빠른 웹 사이트 인게이지먼트를 막는 벽돌 벽으로, 한 번 이것을 경험한 방문자를 다시 데려오기란 쉽지 않습니다.
웹 사이트들을 돌아다니면서, 저는 모든 디자이너의 만능 도구함에 반드시 들어있어야 할 몇 가지 도구와 원칙들을 발견했습니다. 이것들이 콘텐츠로 가득한 웹사이트를 만드는 데 요긴하게 사용될 수 있기를 바랍니다.
1. 여백: 콘텐츠를 (그리고 사용자의 눈을) 숨 쉬게 합니다.
2. 박스, 구분선, 평면 그래픽: 정보를 시각화된 카테고리로 나눕니다
3. 직관적인 검색법: 사용자가 곧바로 원하는 곳에 도달하게 합니다.
4. 그리드(Grid, 레이아웃): 글을 이해하기 위해 항상 필요한 것은 아니지만, 일단 잘 짜인 구조안에 콘텐츠를 넣으면 그 콘텐츠를 소화하는데 도움이 됩니다.
5. 강력한 정보 위계구조: 콘텐츠 타입을 활용해 일관성 있는 디자인 언어를 구축하세요. (예: 추천글, 인용문, CTA 추가 등)
6. 시각적 위계구조: 다양한 시각적 장치를 활용해 각기 다른 콘텐츠 영역과 요소들의 비중을 달리 할 수 있는데, 타이포그래픽이나(제목, 부제, 따옴표 등) 이미지 크기, 채도, 배치를 활용하는 것이 그 예입니다.
아래 예시 웹 사이트들을 통해 불편하지 않으면서도 즐거운 사용자 경험을 주기 위해 어떤 트릭들이 사용되었는지를 확인해보세요.
POLYGON
Polygon은 기발한 신생 기업인 The Verge 창립자가 운영하는 비디오 게임 리뷰 웹사이트입니다.
- 여백: Polygon의 아티클들은 크고 아름다운 이미지와 조밀한 텍스트 본문을 하나의 부담스럽지 않은 덩어리로 나누는, 마치 잡지와 같은 구성 형태로 스크롤이 길다는 점이 특징입니다. 각 아티클 내 글들은 단순히 복사+붙여넣기 된 것이 아니라, 아주 의도적으로 배치되어 있습니다.
- 강력한 정보 위계구조: 드라마틱한 느낌의 인용구는 리뷰의 핵심을 더욱 강조합니다.
- 사용성 좋은 검색 기능: 눈에 잘 띄는 검색 창이 화면 상단에 계속 붙어있어 언제든 원하는 게임을 찾아볼 수 있습니다.
THE VERGE
Gizmodo, Engadget과 같은 사람들을 위한 New Kid on the block처럼, The Verge는 세계의 테크놀로지를 다루기 위해 대담하고 신선하게 접근합니다.
*Gizmodo, Endgaget: IT 기술 미디어 블로그
- 스토리 콜라주: 홈 화면은 각 아티클의 내용을 훑어볼 수 있는 헤드라인을 담은 형형색색의 큰 직소 퍼즐로 구성되어 각 영역에 링크된 기사에 대한 내용과 시각적인 효과를 함께 보여줍니다.
- 썸네일 슬라이더: 페이지의 특정 영역은 이미지 썸네일로 구성된 캐러솔(회전 메뉴)로 구성되어 있는데, 각 썸네일은 사용자를 특정 스토리로 끌어들입니다.
- ‘당신은 지금 이것을 읽어야만 한다’: 탑 아티클의 경우 약간의 공백과 함께 강력한 지시어를 사용하여 사용자가 더 인기 있는 뉴스에 집중하도록 합니다.
CONDE NAST
유명한 매거진의 모회사로서, Conde Nast의 웹사이트는 사전에 잘 설계된 디자인이 아니라면 사용자를 압도하기 쉬운 엄청난 양의 콘텐츠를 제공하고 있습니다.
- 과감한 비주얼: 홈 헤더(Header)의 장대하면서도 아름다운 콘텐츠 슬라이더만으로도 사용자는 Conde Nast는 '당신이 이 사이트에서 무엇을 볼 것인지'가 가장 중요시한다는 사실을 의심의 여지없이 받아들이게 됩니다.
- 커스터마이즈 필터: 이 사이트는 모든 콘텐츠를 보여주려는 시도 따위는 하지 않습니다. 대신 사용자 개개인의 흥미에 맞게 콘텐츠를 필터링할 수 있도록 주도권을 넘겨줍니다.
BLIK
Blik은 아트 상품들을 찾을 때 방문하기 좋은 사이트 중 하나로, 다양한 미디어와 자료들을 담고 있습니다. 독창적인 사용자들이 영감을 받은 동안 빠르게 원하는 것을 찾을 수 있도록 하는 것이 중요합니다.
- 강력한 정보 위계질서: 이커머스 상품 페이지의 좋은 본보기와도 같은 Blik의 상품 페이지에서는 각 상품에서 가장 중요한 게 무엇인지를 파악하는 것이 전혀 어렵지 않습니다.
- 그리드 스타일: 광범위한 상품 고유의 색상과 형태, 선 그리고 패턴들을 활용해 견고한 그리드를 유지하면 자칫 혼란스러울 수 있는 시각적 요소에도 질서가 생깁니다.
- 역동적인 마우스 오버: Blik는 불필요한 설명을 사이트 전면에 내세우는 대신, 역동적인 마우스 호버 텍스트를 활용해 사용자가 관심 있는 상품에 대해 더 많은 정보를 제공합니다.
USA Today
미국에서 가장 큰 신문 중 하나로써, 적어도 USA today는 한정된 공간에서 대량의 정보를 어떻게 다루어야 하는지를 알고 있습니다.
- 깔끔하고 정리된 그리드: 깔끔하고 날카로운 선과 레이아웃은 이 사이트가 질서 정연하다는 느낌을 주고, 정신없거나 탐색하기 어렵다는 느낌을 없애줍니다.
- 사용자 맞춤형 레이아웃: USA Today에서 사용자는 상위 기사들을 목록형으로 볼지, 그리드형(격자형)으로 볼 지 선택할 수 있습니다.
THE NEW YORKER
풍자만화로 잘 알려진 이 인쇄물은 자신의 콘텐츠를 온라인에서도 안정적으로 보여주고 있습니다.
- 벽돌 공사: The New Yorker의 홈페이지는 끊임없이 쏟아지는 트렌드의 메아리처럼, 콘텐츠를 벽돌처럼 쌓아 올려 사용자가 계속 스크롤하면서 원하는 것을 탐색할 수 있게 합니다.
- 버라이어티: 레이아웃 내에서 이미지 크기를 변주하여 탐색 과정에서의 단조로움을 방지합니다.
- 미니멀리즘: The New Yorker의 서체를 계속 사용하는 한편, 전반적으로 깨끗하고 잘 구성된 미니멀리즘 디자인으로 콘텐츠 자체의 목소리를 키웁니다.
AIGA
그래픽 아트 국제 전문 회원 단체인 AIGA는 회의, 출판 등 다양한 방법으로 회원들과 소통합니다. 웹사이트에서는 이용 가능한 압도적인 콘텐츠 양을 효과적으로 보여줌으로써 유사한 다른 단체들과의 차별성을 꾀했습니다.
- Grid 스타일: 그 콘텐츠가 가지고 있는 정보의 양에 비례하는 그리드(콘텐츠의 레이아웃) 크기는 사용자에게 읽는데 걸리는 시간을 직관적으로 보여줍니다.
- 일관성: 각기 다른 디자인 스타일, 타이포그래피, 색상 스킴을 가진 그래픽 이미지를 다루고 있음에도 불구하고 캡션, 헤드라인, 아티클 본문을 보여주는 데 있어서 지속적이고도 확실한 일관성을 가지고 있습니다.
- 강력한 정보 위계질서: 모든 아티클이 동일한 제목/부제/발췌 구조를 지닙니다.
- 버튼: 직사각형을 탈피한 버튼 모양은 이 사이트의 레이아웃에 변주를 줍니다. 이 CTA(Call to Action)들은 사용자의 충분히 끌만큼 멋집니다.
*(2)에서 계속됩니다.
