프로젝트 기록2023. 3. 11.

매거진 <B> 온라인 스토어 제작기

비미디어컴퍼니는 도서, 온라인 전자서적 및 잡지 출판업을 진행하며 브랜드 다큐멘터리 매거진 <B>, 푸드 다큐멘터리 매거진 <F>와 단행본 브랜드 REFERENCE BY B의 ‘잡스(JOBS)’ 시리즈 등을 발간하는 회사입니다.

 

2022년 초, 비미디어컴퍼니의 의뢰로  https://magazine-b.co.kr/ 의 전면 리뉴얼에 대한 논의를 시작했고, 5개월여의 작업 끝에 2022년 8월에 새로운 사이트가 대중에 공개되었습니다. 

 

이번 프로젝트와 관련하여 기획의 관점에서 중요하게 여겼던 점들은 크게 다음과 같습니다. 

 

 

1. "우리가 만드는 것이 스토어인가요, 미디어인가요?"

초기 기획에서의 논의 중 하나는 사이트를 방문하는 사람들에게 온라인 스토어의 인상과 미디어로서의 인상 중 어느 쪽을 더 중점적으로 전달해야 할 것인지였습니다.  

 

관련하여 당시에 했던 내부 메모

 

바톤이 위의 두 갈래를 제안할 당시에는 '스토어'와 '포털'이라는 개념을 각각 썼었습니다. '미디어'는 바톤이 제안한 위의 두 방향성에 대한 비미디어컴퍼니 측의 피드백입니다. 이를 바탕으로 키워드를 '미디어'로 잡고 그것을 바탕으로 한 일종의 세계관을 만들기 시작했습니다. '미디어' 하면 떠오르는 인상들이나 미디어가 외부와 커뮤니케이션하는 방식들이 가지는 특징들을 찾아본달지요.

 

 

 

2. "우리가 만드는 게 '매거진 <B>' 사이트인 것인가요?"

기획 초기 단계에서는 사람으로 치면 주민등록등본을 떼보듯 이번 작업에 대한 기초 정보들을 확인하는데, 초기에 상호 확인한 사이트의 정체성은 크게 다음과 같습니다. 

  • 바톤은 단순히 매거진 <B>가 아닌, '비미디어컴퍼니'라는 회사이자 미디어의 웹사이트를 만드는 것
  • 매거진 <B>는 <F>, <Jobs>등과 함께 비미디어컴퍼니의 콘텐츠 중 하나임과 동시에 대표 콘텐츠로서 존재
  • 간행물 출간은 비미디어컴퍼니의 여러 사업 중 하나이며, Cast, Playlist, Newsletter, 오프라인 프로그램(토크, 워크숍 등)을 포함한 다양한 채널과 함께 사이트에 존재함으로써 결과적으로 이 사이트가 미디어로서의 정체성을 나타내도록 해야 함

 

엄밀히 보면 이 사이트의 공식 타이틀은 '비미디어컴퍼니 공식 웹사이트'이지만 대중에게는 '매거진 <B>'로 각인되어 있기 때문에 어떻게 커뮤니케이션하더라도 사람들은 "매거진 비 사이트 봤어?"라고 할 것으로 보고, 드러나는 정체성 또한 비미디어컴퍼니와 매거진 <B> 사이의 적절한 선을 유지하고자 했습니다.

 

 

 

3. "새로운 사이트에서는 매거진 <B>의 본문이 디지털화되어서 웹에 실리게 되는 건가요?"

첫 미팅 전에는 지금까지 인쇄로만 만들어져 온 매거진 <B>을 디지털 포맷으로도 제작해서 웹에서 쾌적하게 볼 수 있도록 하고자 하는 니즈를 갖고 계시지 않을까 하는 짐작을 했었으나, 결과적으로 저희가 확인한 것은 크게 다음과 같습니다.

  • 비미디어컴퍼니는 인쇄를 기반으로 오프라인에서의 경험을 잘 만드는 사람들이 모인 회사다. 그것이 이 분들의 DNA.
  • 바톤이 만드는 웹사이트는 그 DNA가 잘 담겨 있는 장면 장면들을 잘 보여주는 역할을 하면 된다. 웹사이트에 맞게 DNA를 바꾸거나 더하는 게 아니고.

 

최근 이슈인 '발베니'의 상세페이지 내 주요 이미지

 

사이트에서 <B>의 각 이슈의 상세페이지-실물 이슈의 주요 페이지를 펼쳐서 단정하게 촬영한 몇 컷과 함께 2개의 주요 인용구만 발췌해둔 텍스트만 나타나 있는-들을 보면 위에서 언급한 이 분들의 DNA를 엿볼 수 있습니다. 그러니까 이 상세페이지 자체에서는 '어 맞아, 이번에 B가 또 B 했어.' 정도로 최소한의 설명만 해주고, 진짜 경험은 손에 들고 책장을 직접 넘기면서 해보기를 권하고 있는 것입니다. 온라인에서 최대한 유저를 오래 붙잡아두고 볼 거리를 계속 떠먹여주는 최근 웹 매거진 트렌드와는 아주 다른 커뮤니케이션 방식입니다.

 

 


4. 위계보다 관심사

메뉴나 카테고리 구성에 있어서 정보의 위계가 가급적 지켜져야 한다고 생각하는 경우가 많은데, 이 부분을 조금 자유롭게 열어둘 수 있다면 더 효과적인 커뮤니케이션을 시도할 수 있는 기회가 생깁니다. 

 

사이트 내 'Magazine' 메뉴의 하위 메뉴 구성

 

위의 하위 메뉴에서 첫번째와 두번째는 각각 <B>와 <F>인데, 세번째부터는  <B>와 <F>를 가로지르는 일종의 테마들이 등장합니다. 하위 메뉴들을 위계를 따라야 하는 정보들로 보지 않고, 유저가 관심 있어할 만한 키워드들을 뽑아서 배치하는 접근을 취했습니다. 

 

 

 

5. 그 외의 몇 가지 디테일들

 

 

1) 매거진 <B>의 구매고객의 특징 중 하나는 도서관, 학교, 기업과 같은 기관의 비중 또한 꽤 높다는 점입니다. 기관 구매고객을 위하여 장바구니 페이지에 견적서를 바로 신청하고 받을 수 있는 기능을 구현해두었습니다. 

 

 

2) 쇼핑몰 솔루션인 카페24는 매우 방대한 기능을 제공하고 있지만 천차만별이며 계속 변화하는 이용자들의 디자인적・기능적 니즈에 100% 대응하는 것은 불가능합니다. 매거진<B> 또한 일부 페이지의 디자인 및 기능 연출의 차원에서 카페24의 기술적 범위를 벗어나 시도할 수 밖에 없는 상황들이 있었고, 해당 영역은 카페24 외부에 별도의 관리자 기능을 구축하여 컨트롤할 수 있도록 하였습니다. 물론 이용자의 입장에서는 알 수 없지만 시스템 차원에서는 서로 다른 두 개의 사이트가 결합되어 있는 형태라고도 볼 수 있습니다. 

 

 

 

 

3) 정보량이 많고 깊이가 있는 콘텐츠가 많은 사이트일수록, 얕고 넓게 보고자 하는 이용자의 니즈가 늘어나는 경향이 있습니다. 'Index' 페이지에서는 지금까지 발행된 이슈들을 핵심적인 요소들로만 압축하여 보여주고 있습니다. 또한 플레이리스트나 캐스트와 같은 포맷의 결과물도 노출하고 있어서, 이용자가 ‘이슈’를 기준으로 핵심내용과 함께 다양한 포맷의 콘텐츠에 쉽게 접근할 수 있도록 했습니다. 이 사이트는 'Magazine', 'Book', 'Cast'와 같이 콘텐츠 구조가 '포맷'을 기준으로 설계되어 있는 것이 기본인데, 이것을 '이슈'라는 칼로 기존 콘텐츠 구조를 뚝 잘라서 그 단면을 보여주는 식의 접근을 하고 있는 것이 이 Index 페이지입니다. 

 

 

4) 전면적인 리뉴얼이라고 해서 모든 기능을 자체적으로 만들어내야 하는 것은 아닙니다. 정기구독이 그 예인데 매거진<B>의 정기구독은 별도의 전문 서비스를 통해 운영되고 있고, 이번 개편에서는 정기구독에 대하여 소개하는 페이지까지를 이 사이트의 일부로서 잘 정리하여 'Subscribe' 페이지에서 보여주고, 유저의 구독행위 자체는 아웃링크를 통해 별도 사이트로 이동하여 진행하도록 하고 있습니다. 

 

 

 

비미디어컴퍼니는 최근 일본 커피브랜드 아라비카와의 협업으로 매거진<B>와 아라비카 커피를 함께 만날 수 있는 오프라인 공간 '매거진 B 한남'을 오픈하여 팬들과의 접점을 넓혀가고 있는데, 위에서 언급한 비미디어컴퍼니만의 DNA가 강화되고 구체화되는 과정이라는 생각이 듭니다.

 

이미지 출처: https://magazine-b.com/

 

-

 

Client. 비미디어컴퍼니 

Format. Website 

Date. 2022.02-08 

Design. 고유영, 박하늘, 오유진 

Development. 김동하, 이상희, 한송욱 

Planning. 김가영, 김지빈