저널 & 미디어, UX 환경에서의 적용 방법
정보 전달매체의 유형 및 특징
정보 전달매체의 유형 및 특징, UX 환경에서의 적용 방법
최근 모 언론사의 UX 디자인 프로젝트를 진행하면서 기존의 인쇄 매체들이 미디어 환경에서 어떤 방식으로 정보를 전달하는지 리서치할 기회가 있었습니다.
과거에는 인쇄매체(책, 잡지, 신문 등)와 음성매체(라디오), 영상매체(TV)를 통해 정보를 제공받았지만, 현재는 PC, 모바일 등의 디바이스를 통해 더 많이 정보를 접하고 있습니다. 이로써 사용자는 점점 빠르고 편리한 방향으로, 또 다양한 경로를 통해 정보를 습득을 하고 있습니다. 인쇄매체의 정보 전달방법이 텍스트형, 이미지형이었다면 멀티미디어 환경에서는 동영상형이 점점 늘어가는 추세입니다.
각각의 정보 전달방법에 대한 특징과 장단점을 간략하게 알아보고, 대표적인 정보매체 케이스를 통해 UX 환경에서 어떻게 적용되고 있는지 알아보았습니다.
1. 정보전달 매체의 유형 및 특징
1.1. 텍스트형 정보 매체
* 이미지출처 : http://ee.usatoday.com/ http://en.kiosko.net/us/ https://lachlanmurray.com.au• 신문, 잡지, 브로슈어 등 전달하고자 하는 정보가 상세하고 많은 경우
• 그리드 레이아웃을 사용하여 한정된 공간 내에 적절하게 기사를 배치하고 활용
• 정보의 모듈화를 통해 기사의 영역을 구분
• Font를 활용해 정보를 강조하고 아이덴티티를 확립함
1.2. 이미지형 정보 매체
* 이미지출처 : https://www.annapurnamellorphotography.com/ https://digital.elmercurio.com/• 잡지, 브로슈어 등 시각적 이미지가 중요한 콘텐츠에서 주로 사용
• 텍스트보다 직관적이고 생동감 있는 정보를 제공할 수 있음
• 통계나 비교가 필요한 객관적인 정보에서 인포그래픽, 도표, 차트 등을 활용하여 이해도를 높임
1.3. 동영상형 정보 매체
* 이미지출처 : https://www.bbc.com/ https://www.lonelyplanet.com/ https://www.youtube.com/• 현장감 있는 실시간 콘텐츠나 오락적 기능의 정보제공에 적합
• 시청각 이미지 전달로 이해가 쉽고 빠르며 현재 점점 늘어나고 있는 전달 방식
2. 정보전달 매체의 유형별 장단점
정보전달 매체의 유형별 장단점을 하단 표에 정리하였습니다.
텍스트형
장점: 상세하고 많은 양의 정보 전달 가능
단점: 많은 텍스트로 시각적인 피로감 증가, 아이덴티티 표현에 제한적일 수 있음
이미지형
장점: 사진을 통한 생동감 있는 이미지 전달, 인포그래픽이나 도표를 통해 사용자의 이해도를 높임
단점: 이미지의 퀄리티가 낮을 경우, 정보의 신뢰도나 정확도가 떨어져 보임
텍스트가 수반되지 않을 경우, 정보전달력이 떨어질 수 있음
동영상형
장점: 시청각의 양방향 사용으로 사용자의 인지가 가장 뛰어남 , 현장의 분위기를 있는 그대로 전달 가능
단점: 정해진 시간 내 정보를 제공해야 함, 사용자나 디바이스 환경에 따라 시청이 어려울 수 있음
3. UX 환경에서 효과적으로 정보를 전달하는 방식
텍스트, 이미지, 동영상을 모두 사용하는 대표적인 언론매체를 통해 모바일과 PC환경에서 어떤 방식으로 최적화하고 있는지 알아보았습니다.
그중에서 미국의 대표 언론사인 USA TODAY와 NewYork Times을 분석해 보았는데, 그 이유는 두 언론사의 정보전달 방식을 이미지형과 텍스트형으로 나눌 수 있었기 때문입니다.
* 이미지 위주의 정보전달 매체 VS 텍스트 위주의 정보전달 매체USA TODAY와 New York Times의 정보전달 방식에 대해 비교해 보았습니다.
# USA TODAY 웹
먼저 USA TODAY를 보면 이미지를 중심으로 기사를 제공하고 있습니다.
상단에는 메인이 되는 이미지를 크게 사용하고, 하단영역은 각 카테고리에 해당되는 대표 이미지와 제목을 노출시켰습니다.
또 카테고리별 컬러를 다르게 사용하여 지면, 웹, 모바일에 일관된 경험을 주고 있습니다.
# USA TODAY 모바일
모바일의 경우, 각 카테고리별로 메인기사와 서브기사들을 리스트 형태로 노출하였습니다.
카테고리 타이틀 왼쪽에 color bullet을 사용하여 카테고리별로 구분을 하고 있습니다.
서브 정보는 Swiping되어 모바일의 사용성을 높이고 있습니다.
# New York Times 웹
반면 New York Times는 텍스트를 좌측에 배치하여 좀 더 지면신문의 전통을 이어가는 모습입니다.
사진의 사용을 자제하고 제목과 본문의 일부 내용을 노출하여 정보를 전달하고 있습니다.
또 우측면은 언론사의 중요한 기능인 기자의 의견과 관련된 기사를 실어 매체의 신뢰도를 높이고 있습니다.
# New York Times 모바일
모바일도 웹과 마찬가지로 텍스트를 우선으로 배치하였습니다.
이미지는 모바일에 최적화된 Full 사이즈를 사용하였습니다.
카드 UI를 활용하여 많은 양의 정보를 일관성 있게 구분하고 있습니다.
위의 두 가지 대표 언론사를 통해 디자이너의 입장에서 좀 더 효과적으로 정보를 전달하기 위해서는 어떤 UI 요소들을 고려하는 게 좋을지 정리해 보았습니다.
3.1. 그리드 레이아웃 활용
텍스트와 이미지가 많은 정보매체에서는 그리드 레이아웃을 활용하는 것이 정보를 배치하고 구분하는데 유용하게 쓰입니다.
또 정보를 모듈화하고 운영하는데 가장 용이한 디자인 방식입니다.
USA Today는 왼쪽의 Wing 영역을 제외하고 4column으로 분할, 이미지 영역 내 정보들을 배치하고 있습니다.
* 카테고리 Tag & 기사제목하단 영역의 좌측 이미지들은 비율을 좀 더 길게 사용하여 카테고리의 주요 기사가 잘 인지되도록 하였습니다.
사용자가 좀 더 중요한 영역에 시선이 머무를 수 있도록 기사 레벨에 따른 영역의 배치가 필요합니다.
New York Times도 상단과 하단의 그리드 영역을 다르게 사용합니다.
Text중심의 상단 영역에서는 6 column내에서 기사를 배치하고, 카테고리를 표현해주는 이미지 영역에서는 5 column을 사용하여 콘텐츠를 정리해 놓았습니다.
그리드를 콘텐츠에 따라 유연하게 적용함으로써 상단은 텍스트 중심의 레이아웃으로 기사에 집중할 수 있고, 하단은 카테고리를 명확하게 인지할 수 있게 하였습니다.
3.2. 자연스러운 읽기 유도
다소 많은 콘텐츠가 연속으로 배치되기 때문에 자연스러운 시각적 흐름이 필요합니다.
•왼쪽->오른쪽, 상단-> 하단으로 이어지는 자연스러운 읽기 방향 제시
•중요한 정보를 상단에 배치하고 주변으로 연관정보를 배치
•종속 또는 단계의 과정이 잘 보일수 있는 구조로 구성
3.3. 정보의 모듈화, 그룹핑
정보의 모듈화는 웹(모바일)환경에서 사용자에게 일관된 경험을 제공함으로써 새로운 학습이 필요하지 않고, 구축 후에도 운영과 관리가 용이합니다.
•모듈러 시스템을 활용한 정보 제공을 통해 사용성을 높임
•콘텐츠 특성에 최적화된 레이아웃을 구성하여 정보의 차별성을 주고 특화할 수 있음
정보를 모듈화 할 수 있는 방법 중에 카드 UI를 꼽을 수 있습니다.
카드 UI는 콘텐츠를 분리하기 쉽고, 덩어리채 정보를 읽기 쉽습니다.
또, 다양한 디바이스 사이즈에 잘 대응하여 일관된 경험을 제공할 수 있습니다.
3.4. 타이포의 활용
텍스트가 많은 매체에서 폰트는 중요한 역할을 합니다.
사용자에게 동일한 경험을 제공함으로써 브랜드의 아이덴티티를 나타낼 수 있습니다.
# US TODAY
USA TODAY는 기본 서체를 ‘unify Sans’를 사용하여 모던하고 심플한 느낌을 주고 있습니다.
다만 기사의 상세페이지는 웹과 모바일이 다른 서체를 사용하고 있습니다.
이보다는 패밀리 서체를 사용하거나, 종류를 한정하여 서체의 통일감을 주는 것이 좋습니다.
# New York Times
New York Times는 Nyt-Cheltenham을 사용하여 지면신문과 동일한 경험을 주고 있습니다.
본문에는 둘 다 Serif를 사용하고 있는데, Serif는 많은 양의 텍스트를 빠르게 읽기 적합하여 본문에 선호되는 서체입니다.
(국문은 고딕을 권장)
타이포를 배치할 때 고려해야 할 점을 몇 가지 적어 보았습니다.
계층의 구분
아래 이미지에서 확인해볼 수 있듯이 기사의 제목, 메타데이터, 주석, 본문에 따라서 Text의 Size, 여백, Padding값의 가이드를 정하면, 기사의 양이 많더라도 사용자가 어떤 내용인지, 읽고 싶은 기사인지를 빠르게 인지하고 선택할 수 있습니다.
헤드라인과 소제목, 본문, 캡션 등의 용도에 따라 일관된 룰을 적용하여 통일성과 일관성을 유지시켜야 합니다.
여백
텍스트의 행간 및 자간이 가독성에 중요한 역할을 하기 때문에 디자인 작업할 때 규칙을 정하는 것이 좋습니다.
특히 한글의 경우 볼륨감이 크기 때문에 텍스트 간 행간을 조금 더 넓게 사용하는 것이 좋습니다.
또, 그리드 영 역내 짧은 줄 바꿈은 가독성을 좀 더 높일 수 있는 방법 중 하나입니다.
사용자가 한 번에 볼 수 있도록 텍스트의 양을 조절하면 전체적으로 질서 있고 정교한 느낌을 줄 수 있습니다.
정렬
문장의 정렬 방법도 여러 가지가 있는데(왼쪽, 중앙, 오른쪽, 양끝 등) 정보매체에서는 썸네일 이미지가 노출이 되는 경우와
되지 않는 경우가 있기 때문에 왼쪽 정렬이 안정적입니다.
•문장의 정렬은 왼쪽으로 해주는 것이 레이아웃을 정리하기도 좋고, 사용자의 시선 흐름에도 좋음
•콘텐츠를 중앙정렬을 하여 사용자가 읽기에 집중할 수 있음
3.5. 디바이스 환경에 맞춘 대응
PC, 태블렛, 모바일 등 다양한 디바이스 환경에 대응할 수 있어야 합니다.
두 언론사의 디바이스 대응방식을 보면, 해상도가 낮거나 크기가 작은 타블릿의 경우 Column의 수를 줄이거나 전체적인 비율을 줄여서 콘텐츠를 재배치한 것을 확인할 수 있습니다.
모바일의 경우는 리스트 UI를 사용하여 콘텐츠를 빠르게 스크롤하고 읽을 수 있도록 구성하였습니다.
정리
USA TODAY와 New York Times를 통해 정보매체를 디자인 할 때 어떤 UI 요소들을 고려하는 게 좋을지 정리해 보았습니다.
그리드 레이아웃의 활용, 정보의 모듈화, 자연스러운 읽기의 유도와 타이포의 배치 등을 간략하게 꼽아보았는데 방대한 양의 텍스트와 이미지들을 웹과 모바일에 옮기기 위해서는 디자인 가이드를 잘 정의하는 것이 그 첫 번째인 입니다.
또 특히 이러한 언론사의 UI는 잘 디자인된 편집디자인의 사례를 참고한다면 많은 도움이 될 것 같습니다.
감사합니다.
– 라이트브레인 가치디자인그룹 정유희
