brunch

You can make anything
by writing

C.S.Lewis

by Shaun Sep 01. 2020

UI Editorial Design.

콘텐츠 디자인을 하다 보면 콘텐츠(정보)의 우선순위를 분류하는 정보의 가공 과정을 거치지 않고 기획안이 넘어오는 경우가 있다. 우선순위를 정하고 가이드를 설정하는 것은 시각적인 부분 이전에 기획의 업무 영역에서 먼저 선행되어하지만 그렇지 않은 경우도 종종 발생한다. 그럴 때는 그것들의 우선순위를 분류하는 정보의 가공 과정이 필요하다. 이번 글은 실무에서 먼저 선행되어야 하는 콘텐츠의 우선순위를 분류하고 시각적으로 구조화하는 부분에 대해 써 내려가고자 한다. 이 글에서 콘텐츠는 UI상에서 사용자에게 전달하는 정보 또는 텍스트로 정의한다.

콘텐츠는 맥락을 고려한
가공 과정을 거쳐 노출해야 한다.

정보 파악하기

정보의 우선순위를 정하기 이전에 먼저 그 콘텐츠가 어떤 성향의 정보와 내용인지 파악하는 것이 중요하다. 노출하고자 하는 콘텐츠의 성향이 프로모션인지 아니면 단순한 공지인지 제품의 설명인지를 파악하고 그에 맞게 우선순위를 정해야 한다. 아래의 텍스트는 내가 자주 이용하는 마켓컬리 제품 설명에서 발췌했다. 과연 여기서 가장 중요한 것은 무엇이고 먼저 읽혀야 되는 것은 무엇일까? 제품을 설명하는 글로 가정하고 생각해보자.

예제 텍스트(정보)에서 정보의 맥락을 파악한다.

대부분은 많은 정보를 노출하려고 하지만 많은 정보는 사용자의 눈에 잘 들어오지 않는다. 그 이유는 정보의 양이 많을수록 사용자는 읽지 않기 때문이다. 그럴 경우 항상 디자인에서 답을 찾으려 한다. 텍스트의 크기를 키우고 잘 보이는 원색으로 디자인하면 사용자의 눈에 잘 띄지 않냐는 말은 문제의 근원을 잘못 파악했을 때 하는 말이다. 사용자에 눈에 띄지 않는 이유는 시각적인 부분보다는 정보의 맥락이 파악되지 않기 때문이다. 정보는 정보의 맥락에 맞게 축약시켜야 한다. 단, 정보의 맥락을 해치지 않는 선에서 축약시켜야 한다.

콘텐츠 우선순위 정하기

정보의 우선순위는 '강'과 '약'이 있어야 한다. 제일 먼저 핵심적이고 가장 먼저 전달해야 하는 정보가 '강'이 되어야 한다. 그 후 '약'은 '강'을 보조해주면 된다. 그런데 가장 많이 하는 실수가 모든 정보를 '강'으로 설정할 때다 모든 것이 중요하다는 것은 있을 수 없다. 어떤 상황에든 가장 중요한 것이 있고 그다음 중요한 것이 있다. 대부분은 모든 것이 중요하다고 할 때는 우선순위를 제대로 생각해 보지 않았을 때다. 우선순위는 상황과 맥락을 고려하면 분명히 정해지기 마련이다. 모든 것이 다 중요한 정보라고 주장하는 사람을 보면 과연 이런 고민의 과정을 거쳤는지 의심스럽다. 정보는 중요한 순서부터 보여주는 것이 전달력이 좋다.

맥락을 고려해 정보의 우선순위를 정해보자.

앞에 예제 글에서 중요한 것은 무엇일까? 제일 중요한 것은 제품명이다. '카레' 그리고 중요한 것은 핵심 재료다. '소고기' 그리고 '감자와 당근' 그다음은 제품의 분위기를 부각해 줄 수 있는 '따뜻한', '소담스러운'의 형용사들이다. 브랜드명 '테이스티 도쿄'는 제품명과 함께 표현하면 된다. 나는 예제 글에서 중요한 3가지의 우선순위를 축약했다. 제품명, 핵심 재료 그리고 제품의 분위기를 꾸며줄 형용사 문구들.

시각적 계층구조 가이드 만들기

정보의 우선순위를 정한 뒤에는 그것을 시각적으로 반영을 해줘야 한다. 앞에 말한 '강'은 '강'으로 보이게, '약'은 '약'으로 보이게 시각적으로 구성해야 한다. 그 방법에는 스케일, 컬러, 여백 등을 활용할 수 있다. 가장 중요한 '강'은 크고 진하게, 그다음 '약'은 작고 조금 더 흐리게 구성해주면 시각적 계층구조가 완성된다. 시각적 계층구조는 3단계까지만 사용하기를 권장한다. 계층구조가 많을수록 계층의 의미가 퇴색될 수도 있다.

정보의 우선순위, 시각적 계층구조.

나는 앞에서 제품명이 가장 중요하고 그다음으로 핵심 재료 그리고 제품을 꾸며줄 분위기 있는 형용사를 포함한 문구들 순으로 얘기했다. 그렇다면 이것들을 어떻게 시각적으로 '강'과 '약'을 표현할까?

시각적 계층구조 가이드.

나는 폰트의 비율을 1:1.5~1.6의 비율로 '강'과 '약'을 표현했다. 그리고 컬러와 여백 또한 활용했다. 컬러는 명도 대비 4.5:1 이상을 권장하며 여백 즉 행간은 묶이는 것과 묶어주면 좋다. 나는 브랜드를 포함한 제품명을 행간으로 묶었고 핵심 재료와 제품의 분위기를 꾸며주는 문구를 행간으로 묶었다.

가이드는 일관되게 적용하기

시각적 계층구조 가이드는 일관되게 적용해야 한다. 일관성은 패턴을 만들 수 있고 사용자가 패턴을 파악하면 정보는 수월하게 전달된다.

제품 피드에 가이드가 적용된 이미지.

디자인을 하다 보면 콘텐츠의 정보가 원고 그대로 전달되는 경우가 있다. 원고의 정보는 사용자에게 전달되기 위해서 가공의 과정을 거쳐야 하지만 가공되어 전달되지 않을 경우도 실무에서 많이 일어난다. 그럴 경우 당황하지 말고 먼저 제안을 해보는 것도 좋다. 정보의 맥락을 고려해 우선순위를 정하고 그 우선순위에 맞는 시각적 계층을 설계해 제안해 보자.

keyword