brunch

You can make anything
by writing

C.S.Lewis

by RIDI Design Aug 28. 2023

리디의 배너 디자인에는 다 ‘계획’이 있다

리디 운영디자인 가이드

Summary 리디 곳곳에 배치된 배너들엔 다 계획이 있다는 거 알고 계셨나요? 고객에게 좋은 작품을 잘 보이기 위해 그리고 원활한 운영을 위해 고민을 거듭하는 운영디자인은 여러 부서가 함께 관리하는 만큼 업무 이해를 위한 가이드가 중요합니다.

다 계획이 있는 리디 프로덕트디자인팀에서 설계한 운영디자인에 대한 내용과 가이드로 정리하는 과정을 소개합니다.

리디에서 운영디자인이란

운영디자인이란 서비스를 운영하는 데 필요한 전반적인 디자인 요소들이다. UX/UI 디자인이 서비스의 뼈대와 신체를 이룬다면 운영디자인은 그 사람의 눈코입과 같다. 같은 눈코입이라도 조합에 따라 생김새가 좌우되는 것처럼 때론 운영디자인에 따라 프로덕트의 인상이 달라지기도 하고 각각의 역할을 수행한다.

콘텐츠 플랫폼인 리디에서 운영디자인은 대표적으로 배너가 있다. 배너들은 운영 섹션별로 다양한 크기와 형태로 적절하게 위치해 탐색을 지루하지 않게 돕는 역할을 한다.

2022년 리디가 크게 리뉴얼을 맞으면서 운영디자인도 크게 변화했다.

상단에 위치한 빅 배너는 큰 크기로 주목을 끌고, 반복되는 썸네일 사이에는 돌출형 배너로 하나의 콘텐츠에 집중시킨다. 돌출형 배너의 여백은 시각적 환기와 ‘오늘 리디의 발견’이라는 콘텐츠 선정에 맞춰 유저의 시선을 머무르게 하는 역할을 한다. (아래 이미지 참조)

리디에서만 감상할 수 있는 독점작이나 자체 제작 콘텐츠들은 2~3개 배너가 한 화면에 담길 수 있도록 배치하고, 타이틀이 잘 보이게 디자인했다. 또한 다른 썸네일보다 좀 더 크고 시원하게 길게 뻗은 형태로 임팩트를 주었다.

(좌측 상단) 빅 배너 / (우측 상단) 돌출형 배너, (우측 하단) 독점작 배너

다 함께 운영하기 위한 가이드가 필요하다

이처럼 리뉴얼 이후 운영 섹션이 다양해지면서 기준이 되는 가이드가 필요해졌다.

운영디자인 가이드는 다양해진 운영 섹션을 마케팅 디자이너들은 물론, 비 디자이너인 MD파트, CP사(contents provider)등 이해관계자 모두가 효과적으로 활용할 수 있도록 타이틀 카피라이팅의 문체와 글자 수, 이미지의 톤 등 내용 요소들을 어떻게 조합시켜 하나의 배너를 완성하는지를 정의하는 일이다.

특히 배너는 타이틀과 이미지의 조합이 매우 중요하다. 해당 섹션이 가진 임팩트와 맞지 않는 결의 이미지를 사용한다던가, 범위를 넘어선 긴 타이틀, 과도한 특수문자 사용은 배너의 가독성과 임팩트를 떨어트리고 사용자의 탐색 경험까지도 저하시킬 수 있기 때문이다.

이번 편에서는 리디 프로덕트디자인 팀이 진행했던 운영디자인 가이드를 위한 [① 포맷 찾기 → ② 형식 정의하기 → ③ 문서화] 과정을 정리해 보았다.

운영디자인 가이드를 위한 프로세스

운영디자인 가이드의 시작은 우선 다양한 해상도 및 디바이스에 최적화할 수 있는 최적화 된 ①포맷을 찾는 일로 시작해, 각 배너들이 어떤 시각적 언어로 표현될 수 있는지를 정의하는 ②형식 정의하기를 거쳐, ③문서화를 통해 다양한 부서 및 이해관계자에게 전해진다.

① 포맷 찾기

어떤 디바이스나 해상도에서도 각 섹션에 부여한 임팩트에 맞게 운영할 수 있도록, 주요 배너가 놓이는 영역에 크기와 형태를 지정하고 해당 영역에 들어갈 이미지에 규칙을 정했다.

여러 디바이스 환경에서도 텍스트 가독성을 확보하고 매끄러운 탐색을 할 수 있도록 배너의 텍스트를 CMS(Content Management System: 콘텐츠 관리 시스템)로 입력하도록 변경했다. 이미지에 텍스트를 작성해 하나의 이미지로 제작하는 방식도 있지만, 디바이스 해상도에 따라 텍스트 크기가 함께 커지는 것을 방지하고 해상도 변화에 영향이 적은 일관된 탐색 경험을 제공하고자 했다.

대신 CMS로 입력된 텍스트가 주요한 해상도에서 말줄임 처리되거나 지나치게 길어지지 않도록 텍스트 길이에 대한 가이드를 추가해야 했다. 카피를 작성하는 사업부에서 이미지와 어울리지 않는 특수문자 입력할 수 없도록 제약도 필요했다. 작품에 대한 호기심을 자극할 수 있는 카피라이팅을 예시로 적용해 디자인과 함께 제안했다.

CMS 입력을 위한 이미지 가이드

② 형식 정의하기

현재 리디에서 서비스하고 있는 콘텐츠 카테고리는 웹툰, 만화, 웹소설, 도서로 크게 분류할 수 있다. 이에 배너는 각 카테고리 특성에 맞춰 활용할 수 있도록 캐릭터형, 표지형, 그래픽형, 실사형으로 분류했다. 각 배너 형식의 특수성을 살리면서 서비스 내 배너 전반적으로 톤앤매너를 유지할 수 있는 가이드를 만들기 위해 먼저 큰 형식을 정의하고 세분화했다.

캐릭터형

인물과의 관계나 상황, 새로운 설정 등을 가장 직관적으로 표현해 주는 배너 형식이다. 작품의 매력이 한눈에 느껴질수 있도록 작품 표지 이미지에 한정 짓지 않고, 캐릭터의 매력이 돋보이거나 캐릭터 간의 관계나 배경을 분위기로 알 수 있는 이미지를 사용하는 것이 특징이다.

예시 가이드 이미지로 <상수리나무 아래> 작품을 선정해, 한 작품에 대한 배너이더라도 다각화 매력을 느껴볼 수 있도록 가이드했다. (아래 이미지 참조)

인물의 감정, 관계, 설정 등의 다각화 매력을 엿볼 수 있는 <상수리나무 아래> 캐릭터형 배너

캐릭터형 배너의 특징을 잘 살리기 위해 배너 이미지 속 인물을 제한시켰다. 인물이 복잡하게 얽혀있는 이미지보다는 적절한 여백을 통해 배경과의 조화를 이룰 수 있도록 하기 위함인데, 가장 큰 빅 배너에서는 4인 이하, 그 외 영역에서는 2~3인 정도로 인물의 수를 권장했다. 인물을 시원스럽게 보여주어 배너 자체의 주목도를 확보하고, 장소나 환경 같은 작품의 배경이 가지고 있는 작품 자체의 고유한 분위기를 전달하기 위해서였다.

때로는 인물의 표정 그 자체가 내러티브가 되기도 한다. 다양한 작품에서 인물의 클로즈업을 공들여 그리는 작가도 있다. 다만 이런 이미지는 태블릿이나 데스크톱 등의 가로 폭이 넓은 형태를 대응하기 어려운 경우가 많다. 따라서 운영가이드에서는 모바일 해상도를 우선으로 하여 제작하고, 불충분한 좌우 이미지는 확장하여 리터칭하거나 그라데이션 처리하여 사용할 수 있도록 가이드했다.

표지형

주로 웹소설이나 만화 e북, 도서에 해당하는 배너 형식이다. 웹툰처럼 장면의 이미지로 어필하기 보다는 ‘한 작품’ 이라는 개념을 포함하는 표지로 커뮤니케이션되어야 할 때 사용한다. 또 이미지를 활용하기 어려운 경우(웹소설, 만화 e북)에 표지형 커버로 대체해 제작할 수 있도록 가이드 했다.

표지사이즈의 가로, 세로 비율이 다르더라도 일정한 덩어리 감을 가질 수 있도록 원형을 중심으로 커버의 사이즈를 배치할 수 있는 영역을 잡았다. 다소 심심하게 느껴질 수 있는 표지 중심의 디자인에, 약간의 그래픽적 요소를 더해 책의 내용과 분위기를 전달할 수 있도록 가이드 했다.

그래픽형

기획전 혹은 쿠폰 같은 마케팅을 위한 배너 형식이다. 이벤트 디자인은 추상적 이미지를 사용하거나 타이틀을 그래픽화해 제작하는 경우가 대부분이다. CMS로 입력된 텍스트와 그래픽이 시각적으로 잘 어우러질 수 있을지 가장 고민되는 유형이었고, 가이드화하기에도 까다로운 부분이었다.

예를 들어 68% 포인트백 이벤트의 경우에는 ‘68%’라는 텍스트가 이벤트를 가장 잘 설명하는 요소이고, 시각적으로도 가장 강조되어야 하는 부분이다. 여기서 ‘68%’를 어떤 그래픽으로 표현하느냐에 따라 CMS로 입력된 “최대 68% 포인트백” 같은 이벤트 제목과 겹치지 않게 보일 수 있는데 디자이너의 그래픽 역량이 필요한 부분인 만큼 가이드로 정리하기 어려웠다. 다행히 이 부분은 현재 최소한의 가이드만으로 실무단의 마케팅디자이너분들이 정말 센스있게 디자인해 주고 계시다.

실사형

리디의 이벤트에는 굿즈 등 그래픽이나 일러스트가 아닌 실사 이미지를 사용하는 케이스도 드물게 있었다. 전반적인 톤앤 매너를 따라 복잡한 이미지보다는, 불필요한 장식적 요소들을 제거하고 심플하게 다듬어 플랫한 이미지를 사용할 수 있도록 가이드했다.

③ 문서화

위에서 정의한 내용들을 프로덕트 환경에서 적용될 포맷과 용량 및 적용 방식을 문서화는 것으로 운영디자인 가이드 작업을 마무리했다. 타 부서와 함께 공유하고 싱크를 맞추기 위해, 유형별로 디자인에서 의도한 구체적이고 디테일한 방향성을 모두 사례로 만들어 담다 보니 문서량이 상상을 초월했다.

물론 가이드의 문서 결과물만으로는 모든 부서와 완벽하게 싱크를 맞출 수 없다. 실제로 운영하면서 부딪힐 현실적 문제들이 있기 때문이다. 가령 일본의 출판 만화는 배너 내의 요소가 표지를 침범할 수 없다는 이슈가 있거나, 다양한 해상도에 모두 대응할 수 있는 여백이 충분한 이미지를 매번 수급하기도 어려웠다. 또 실제 업무 환경에서 타이트한 작업 기간 내에 모든 이미지를 누끼 따고 제작할 수 없는 상황도 이해되었기에 이 모든 가이드를 “꼭 지켜 주세요!” 라고 강제할 수는 없었다.

하지만 마케팅디자인팀, MD, CP사 모두 가이드 문서와 예시들을 꼼꼼히 확인해 주시고 까다로운 환경에서도 운영 퀄리티를 위해 가이드를 열심히 지켜주고 계시다.

마치며

콘텐츠 플랫폼에서 배너들이니만큼, 배너가 콘텐츠 그 자체로서 독보적인 역할을 해야 한다. 하지만 운영 관점에서 배너란 빠르게 쏟아지는 이벤트들을 빠른 속도로 내보낼 수 있어야 한다. 그렇기 때문에 효율성을 높이기 위한 운영디자인 가이드의 역할이 중요했고, 가이드 제작을 위해 많은 시간과 노력을 투자하지 않았나 싶다.

다음 스텝은 운영 디자인의 효율성을 지금보다도 더 극대화하면서 배너 클릭률을 높일 수 있는 방향을 고민해 보고 싶다.