잘 만든 콘텐츠 웹사이트 14선(2)
원문: 14 Beautiful Content-Heavy Websites
이 글은 Telepathy에 게시된 글을 직접 번역한 글입니다.
전문 번역가가 아니므로 대량의 오역 및 의역이 있을 수 있습니다.
원문: 14 Beautiful Content-Heavy Websites for Inspiration
앞선 글 읽기: 잘 만든 콘텐츠 웹사이트 14선(1)
영감 얻기 좋은, 잘 만든 콘텐츠 웹사이트 14선(2)
A LIST APART
http://www.alistapart.com/웹 디자인을 위한 바이블 중 하나인 A List Apart는 예술 작품의 근간에 대해 생각해보게 하는 기사들을 발행합니다. 이 글들은 많은 생각을 하게 하는 심오한 내용을 다루기 때문에, 읽기 편하면서도 즐거운 인터페이스가 매우 중요합니다.
깔끔하고 단순한 타이포그래피: 이 사이트의 지극히 섬세한 타이포그래피는 웹 디자인 커뮤니티에서 자주 회자되곤 하죠. 각 행, 표제, 인용문 등 모든 것이 읽기에 완벽히 최적화되어있습니다.
절제된 편집: 한 편의 글이 꽤 긴 분량을 가짐에도 불구하고, 글을 구성한 어떤 문단도 지나치게 길지 않다는 사실을 알 수 있습니다. 모든 아티클의 한 문단은 읽기 쉬운 2, 3개의 문장으로 구성되어 있습니다.
THE BLACK HARBOR
* 이 사이트는 2020년 3월 28일 현재 운영되고 있지 않는 것으로 확인되었습니다.
http://theblackharbor.com/이 곳은 다방면의 예술 작품을 모아둔 쇼케이스와 같은 곳입니다.
엄격한 그리드: 각 아티클은 홈 화면에서 저마다의 이미지로 표현되어 있는데, 깔끔한 그리드 레이아웃이 다양한 색상과 스타일을 가진 그림이 한 데 뒤섞여도 혼란스럽지 않게 합니다.
콘텐츠 드러내기: 이미지 아래에 캡션이나 설명글을 단순히 달아두는 것은 콘텐츠를 과대포장하기 쉽습니다. The Black Harbor는 사용자가 흥미 있는 곳에 마우스를 가져갔을 때에 한해 오버레이 방식으로 정보를 보여줍니다. 그리고 사용자가 홈페이지 버튼을 누르면 더 많은 콘텐츠 후보를 드러내 보입니다.
EBONY
* 이 사이트는 2020년 3월 28일 현재 운영되고 있지 않는 것으로 확인되었습니다.
http://www.ebony.com/가장 유명한 미국 내 흑인 커뮤니티 매거진 중 하나인 Ebony는, 그들의 목소리를 세상에 공유한다는 미션이 끌어안고 있는 광범위한 주제를 다루고 있습니다.
거대한 이미지: 앞서 살펴본 Polygon처럼 Ebony 역시 가장 중요한 아티클의 이미지를 홈 화면에 배치하는데요, 이는 홈페이지의 톤 앤 매너를 잡을 뿐만 아니라 사용자에게 강렬한 인상을 남기는데도 한몫합니다.
과감한 타이포라피 위계질서: Ebony의 시그니쳐 헤드라인 폰트인 ‘Didoni’는 사이트 내에서 실시간으로 가장 중요한 아티클을 위해서만 사용됩니다. 그다음 중요도를 가진 아티클의 경우 아예 다른 폰트인 ‘Trade Gothic’을 사용하죠.
WIRED
https://www.wired.com/기술 팬덤과 긱(geek) 저널리즘의 기원과도 같은 Wired는 숨 막힐 정도로 다양하고도 전문적인 콘텐츠를, 자신들에게 알맞은 방식으로 소화해내고 있습니다.
가독성: 깔끔한 산세리프체와 읽기에 편안한 칼럼 가로길이는 모든 콘텐츠를 단순하면서도 읽기 쉽게 만듭니다.
일관성 있는 타이포그래피: 방대한 범위의 주제들이 일관성을 지닌 헤드라인과 인용구 등 텍스트 질서 덕분에 덕분에 하나로 융합됩니다.
BOSTON GLOBE
http://bostonglobe.com이 잘 알려진 신문은 작년 한 해 동안 인터넷 상에서 꽤 주목을 받았는데요, 사이트 디자인을 대대적으로 리뉴얼했기 때문입니다. 눈에 띄는 변화 중 하나는 반응형 디자인을 수용했다는 점입니다.
여백: 아직까지도 텍스트는 신문의 가장 중요한 요소입니다. 즉 읽기라는 경험 자체가 즐겁도록 만드는데 주의를 기울여야 한다는 의미입니다.
비주얼 위계질서: 이미지를 가진 기사들은 그렇지 않은 기사들에 비해더 매력적이고, 그래서 더 중요합니다. 이 암묵적 룰은 (이 사이트에서) 이미지 사이즈로 더욱 강력하게 구현되는데요, 특히 메인 기사의 경우 엄청나게 큰 영역을 이미지에 할애하고 있습니다.
숨겨진 콘텐츠: 각 메뉴 별 탑 기사들은 최상위 메뉴 아래에 교묘하게 숨어있어서, 마우스를 가져다 대면 모습을 드러냅니다.
CO.DESIGN
https://www.fastcompany.com/co-designFast Company’s Design Blog는 그래픽 디자인과 제품 업계에서 가장 최신의 것들을 보여줍니다. 이 업계에서는 매일 엄청나게 많은 일들이 벌어지고 있다는 건, 두 말할 필요가 없죠.
거대한 이미지: 모든 아티클들은 말 그대로 거대한 메인 이미지를 가지고 있는데요, 이 이미지들은 독자로 하여금 그들이 지금부터 어떤 내용을 읽게 될 것인지를 정확히 인지하게 합니다.
인트로 슬라이더: Co.Design의 많은 아티클들이 도입부에 주요 내용을 담은 이미지 슬라이드를 가지고 있습니다. 이 슬라이드는 이어질 텍스트를 훌륭하게 보조하면서, 독자에게 아티클의 전체적인 톤을 짐작하고 받아들일 준비를 하게 만들죠.
THINK QUARTERLY BY GOOGLE
https://www.thinkwithgoogle.com/intl/en-gb/웹(인터넷)의 최신 트렌드와 변화들에 대해 자신들의 생각을 담은 구글의 분기 간행물은, 기술자라는 자신들의 출신 배경으로부터 깊은 명망을 얻은 회사가 주는 놀라운 경험을 선사합니다.
여백: 사이트 전반의 레이아웃이 상쾌하고, 깔끔하면서도 개방적인 느낌을 줍니다. 콘텐츠는 밀도보다는 그 효과를 중시하여 배치됩니다.
오버레이와 노출: 이 온라인 매거진의 인덱스(색인)는 아주 잘 구성되어 있고, 썸네일은 크고 세련되면서 역동적인 인용문을 담고 있으며, 콘텐츠로 가는 링크는 마우스 롤 오버 시에 보입니다. 이런 영민한 노출 전략은 독자로 하여금 계속해서 콘텐츠에 집중할 수 있게 합니다.
마치며
절대 간과해서 안 되는 사실이 하나 있습니다. 이 사이트들은 그저 운이 좋아서 콘텐츠 중심 웹사이트가 빠지기 쉬운 수많은 함정을 피해 간 것이 아닙니다. 단순히 좋은 디자인을 구현하는 것뿐만 아니라, 향후에 발행될 콘텐츠들이 전반적인 사용자 경험과 어우러지게 하려면 엄청나게 많은 시간을 들여 신중하게 전략을 짜야합니다. 다음의 것들을 꼭 명심하세요:
1. 우선순위
모든 것이 중요하면 결국 모두 다 쓸모없어집니다. 어떤 콘텐츠가 사용자의 전면에 드러나야 하고, 또 어떤 것들은 그 뒤로 물러나야 하는지를 명확하게 정하세요. 그리고 뒤에 숨어야 하는 것들도 만약 필요로 될 경우에는 찾기 쉽도록 배치해야 합니다.
2. 의미 범주화(Semantic Categorization)
사용자가 이해할 수 있는 구분 단위로 당신의 콘텐츠를 카테고라이징 하세요. 절대 우리에게, 우리의 동료에게, 심지어는 우리의 클라이언트에게 편한 방식대로 해서는 안됩니다. 사무실에서 사용하는 온갖 용어와 구분 값들은, 우리가 만드는 사이트에서는 가차 없이 사라져야 합니다.
3. 디자인 일관성
콘텐츠 중심 웹사이트에서 타이포그래피와 행간 등 사이트 전체에 걸친 모든 요소들은 다른 성격의 사이트와는 차원이 다른 중요도를 가집니다. 이건 사용자를 위해서 뿐만 아니라 나중에 이 사이트를 유지 관리할 우리를 위해서이기도 합니다. 예를 들어 연관성 있는 이미지 소스들은 동일한 사이즈로 만들어두면, 나중에 재사용하기에 편리합니다.
4. 사용자 흐름도
각기 다른 사용자 그룹을 만들고 각 그룹이 우리 사이트를 탐독하는 여정을 그려보세요. 직접 신규 사용자가 되어 여러분이 설계한 사이트와 페이지 구조들을 체험하고, 그 과정에서 드는 의문들에 답해볼 필요가 있습니다.
좋은 콘텐츠 중심 웹사이트를 만드는 법에 대한 아래의 글들도 읽어보시기 바랍니다.
One Extra Pixel – Planning for a content-heavy Web design
Build Internet – How to plan a content-heavy site
Information Architects – Improving the digital reading experience
Spoonfed Design – 10 user-friendly tips for good, content-heavy Web designs
Hongkiat – Designing content-intensive layout tips & examples
