케이팝 레이더, 어떻게 기획하고 디자인했을까?
‘회사에서 무슨 일 해?’ 주변에서 물으면 ‘음 그게...’ 하며 머리를 긁적이길 1년이 지났습니다. 스페이스오디티 2.0으로 가기 위한 지점에서 비밀리에 새로운 서비스들을 준비하고 있는 요원 중 한 명이었거든요.
지난 8월 13일, ‘팬덤 연구소 블립’에서 선보일 3가지 서비스 중 가장 먼저 케이팝 레이더(K-Pop Radar)를 공개했습니다. 그리고 지난주 우리는 왜 ‘팬덤'을 연구하며 그 시작으로 케이팝 레이더를 선보였는지에 대해 벡이 아주 재미있게 설명해주었고요.
1부에서는 ‘왜'라는 질문을 던지며 본질적인 접근을 통해 케이팝 레이더를 설명했다면 저는 어떤 포인트들을 고민하며 ‘어떻게’ 케이팝 레이더를 기획하고 디자인했는지를 이야기하고자 합니다.
감지, 생동감, 보는 재미 그리고 만지는 재미
모든 것들이 그렇듯 사실 케이팝 레이더도 무(無)의 상태에서 짠! 하고 만들어진 것은 아닙니다. 서비스와 유사한 기능을 가진 내부 연구용 페이지가 있었고, 기능적으로만 존재하면 되었기 때문에 UX/UI에 대한 고민이 담겨있지 않았을 뿐이었습니다. 내부에서 케이팝 레이더를 공개하기로 한 날부터 이곳저곳 뜯어고치는 공사를 시작했고, 하나의 서비스를 런칭하기 위한 여러 고민도 함께하게 되었습니다.
1. 감지하는 - Dot Dot Dot
케이팝 레이더에서 가장 중요한 상위개념은 ‘감지’였습니다. 📡 어떠한 규칙에 따라 수치를 조합하거나 계산해 나열하는 것이 아닌 있는 그대로를 감지해서 보여주는 역할을 하고자 했기 때문인데요. ‘레이더(Radar)’라는 네이밍뿐 아니라 여러 디자인 요소에도 ‘감지하고 있음'이 느껴지도록 강조했습니다. 그렇게 *‘블립’을 단순하면서도 명확하게 의미를 전달할 수 있는 원의 형태(dot)로 형상화했고 이것이 케이팝 레이더의 주요 디자인 포인트가 되었습니다.
*블립(blip) : 레이더에 잡히는 깜빡이는 점이나 물체를 뜻하는 단어
K-Pop Radar 공식 트위터 (@kpopradar_blip)
![[KPR] 19년 08월 3주차 - 유튜브 구독자 - 태연.jpeg](https://images.squarespace-cdn.com/content/v1/59813079f5e231d6d785b47f/1567004177313-HBGCBOWWZ3PD1FBMSOUL/%5BKPR%5D+19%E1%84%82%E1%85%A7%E1%86%AB+08%E1%84%8B%E1%85%AF%E1%86%AF+3%E1%84%8C%E1%85%AE%E1%84%8E%E1%85%A1+-+%E1%84%8B%E1%85%B2%E1%84%90%E1%85%B2%E1%84%87%E1%85%B3+%E1%84%80%E1%85%AE%E1%84%83%E1%85%A9%E1%86%A8%E1%84%8C%E1%85%A1+-+%E1%84%90%E1%85%A2%E1%84%8B%E1%85%A7%E1%86%AB.jpeg)
![[KPR] 19년 08월 4주차 - 인스타그램 팔로워 - 트와이스.jpeg](https://images.squarespace-cdn.com/content/v1/59813079f5e231d6d785b47f/1567004252214-JZVFW2RNFCN7GK4GZIMP/%5BKPR%5D+19%E1%84%82%E1%85%A7%E1%86%AB+08%E1%84%8B%E1%85%AF%E1%86%AF+4%E1%84%8C%E1%85%AE%E1%84%8E%E1%85%A1+-+%E1%84%8B%E1%85%B5%E1%86%AB%E1%84%89%E1%85%B3%E1%84%90%E1%85%A1%E1%84%80%E1%85%B3%E1%84%85%E1%85%A2%E1%86%B7+%E1%84%91%E1%85%A1%E1%86%AF%E1%84%85%E1%85%A9%E1%84%8B%E1%85%AF+-+%E1%84%90%E1%85%B3%E1%84%8B%E1%85%AA%E1%84%8B%E1%85%B5%E1%84%89%E1%85%B3.jpeg)
![[KPR] 19년 08월 4주차 - 트위터 팔로워 - 갓세븐 마크.jpeg](https://images.squarespace-cdn.com/content/v1/59813079f5e231d6d785b47f/1567004203729-TFCSLRKKY9RZHBHJZZ9R/%5BKPR%5D+19%E1%84%82%E1%85%A7%E1%86%AB+08%E1%84%8B%E1%85%AF%E1%86%AF+4%E1%84%8C%E1%85%AE%E1%84%8E%E1%85%A1+-+%E1%84%90%E1%85%B3%E1%84%8B%E1%85%B1%E1%84%90%E1%85%A5+%E1%84%91%E1%85%A1%E1%86%AF%E1%84%85%E1%85%A9%E1%84%8B%E1%85%AF+-+%E1%84%80%E1%85%A1%E1%86%BA%E1%84%89%E1%85%A6%E1%84%87%E1%85%B3%E1%86%AB+%E1%84%86%E1%85%A1%E1%84%8F%E1%85%B3.jpeg)
![[KPR] 19년 08월 4주차 - 새로운 아티스트 - 오하영.jpeg](https://images.squarespace-cdn.com/content/v1/59813079f5e231d6d785b47f/1567004170097-8Q7YZC6CD3GUSXNFPIS7/%5BKPR%5D+19%E1%84%82%E1%85%A7%E1%86%AB+08%E1%84%8B%E1%85%AF%E1%86%AF+4%E1%84%8C%E1%85%AE%E1%84%8E%E1%85%A1+-+%E1%84%89%E1%85%A2%E1%84%85%E1%85%A9%E1%84%8B%E1%85%AE%E1%86%AB+%E1%84%8B%E1%85%A1%E1%84%90%E1%85%B5%E1%84%89%E1%85%B3%E1%84%90%E1%85%B3+-+%E1%84%8B%E1%85%A9%E1%84%92%E1%85%A1%E1%84%8B%E1%85%A7%E1%86%BC.jpeg)
현재 운영 중인 케이팝 레이더 트위터 또한 이 포인트를 가져가며 디자인 통일성을 유지하고 있습니다.
2. 살아있는 - 다양한 무빙, 계속 변화하는 데이터
케이팝 레이더에 처음 들어오면 동시에 많은 것들이 움직입니다. 우선 좌측 상단에 있는 로고가 움직이고 스크롤을 하다 보면 (PC 기준) 백그라운드에 있는 작은 닷들이 나를 따라오듯 이동합니다. youtube viewcount 라고 적힌 데이터보드 이름도 마치 카드처럼 착착 넘어가고요.
케이팝 레이더는 여러 아티스트의 데이터를 감지하며 24시간 열일하고 있는데요. 이를 ‘살아있다’ 느껴지도록 표현하고 싶었고 곧 생동감 있는 분위기를 주기 위해 여러 움직임을 넣었습니다.
좌측 상단 로고의 애니메이션은 상위 메뉴 이동 시 첫 진입 혹은 로고를 눌러 리프레시하는 경우에만 적용됩니다. 이는 ‘새로 감지한다’라는 메세지를 전달하기 위해 의도적으로 넣은 것이고요.
배경 뒤 작은 닷들은 생동감을 주면서도 리프레시될 때마다 매번 다르게 나타납니다. 하지만 데이터를 가리는 경우가 종종 있어 최근에 여러 정보를 가리지 않는 영역에서만 노출되도록 수정하기도 했습니다.
데이터보드 이름이 카드처럼 넘어가는 이유는 우측의 메뉴에 숨어있는 여러 데이터보드의 존재를 짧고 굵게 알리고자 함인데요. 숨겨진 메뉴들을 모두 꺼내 보여주기보다는 유저에게 ‘여기 다른 데이터보드가 더 있어요'라는 것을 간접적으로 알려주고 싶었습니다.
3. 보는 재미, 만지는 재미가 있는 - 빅 타이포, 강력한 컬러, 인터렉션
세부적인 설명에 앞서 디자인을 맡아주신 D.FY 이수헌CD님이 짚어준 케이팝 레이더 디자인 전략 포인트를 전달드립니다. 📌
차트라는 다소 어려울 수 있는 정보를 조금 더 쉽게 유저들에게 전달할 수 있을지에 대한 고민을 바탕으로 콘텐츠 성격에 따른 재배치(Grouping), 정보들의 시각화(visualization)등의 UX 전략과 함께 K-Pop 아티스트들의 소식과 정보들을 ‘K.dot’이라는 심벌로 형상화해 다채롭고 펀한(Colorful&Fun) 인상을 전달하고자 했습니다. 이과 동시에 서비스의 주요 UI 요소로 활용해 사용성도 함께 고려했습니다. 그리고 BIG Typography를 통해 메시지와 정보의 전달력도 높였습니다.
보는 재미 그리고 만지는 재미. 케이팝 레이더를 만들며 가장 고민했던 부분 중 하나입니다. 대다수의 ‘차트'는 단순한 나열 형태의 콘텐츠이기에 디자인적으로 변별력이 없고, 디자인에 있어 큰 재미를 줄 수 있는 포인트 또한 한계가 있었기 때문입니다.
케이팝 레이더는 우선 전체적으로 빅 타이포를 이용해 주요 메뉴와 아티스트 이름을 강조했고 강렬한 블립 레드 색상과 함께 SNS 플랫폼의 대표 컬러들을 사용했습니다.
덕분인지 서비스 오픈 후 주변의 피드백 중 ‘예쁘다'라는 말이 꽤 큰 지분을 차지했습니다. 사용성을 크게 해치지 않는 선에서 디자인적으로도 차별화된 인상을 가져가고자 했는데 조금은 성공한 것 같아 기분이 좋더라고요. 조금은 실험적인 디자인일 수 있다고 생각하지만 한편으로는 직관적이고 쉬운 디자인이라고도 생각됩니다.
비주얼적인 포인트 외에 조금 더 디테일하게 살펴보면 곳곳에 만지는 재미를 위한 인터렉션들이 숨어있습니다. 첫 번째로 리스트 오버 시 배경으로 뮤비 스틸컷이 나타납니다. 그리고 좌측 썸네일을 클릭하면 바로 해당 뮤비의 유튜브 영상이 재생되고요. 🎬
(최근 이 기능을 많이 사용하지 않는다는 것을 발견하고 썸네일에 변화를 고민하고 있습니다.)
아티스트 페이지를 들어가 볼게요. (아티스트 페이지 구경가기) 스크롤시 빅 타이포와 함께 메뉴 뒤 라인으로 된 타이포까지 가로로 스크롤 되는 인터렉션도 숨어있습니다. 아주 소소하지만, 리스트 우측 그래프에 마우스를 가져다 대면 위아래로 그래프가 움직이기도 합니다.
그리고 사이트 어딘가에 다음 오픈될 서비스에 대한 힌트도 숨어있답니다! 🔍
업데이트는 수시 진행 중
모바일 기준 리스트 우측에 있는 그래프 버튼을 누르면 조금 더 자세한 정보를 볼 수 있습니다. 하지만 클릭커블 하지 않다는 의견이 지배적이었어요. 이렇게 저렇게 회의를 하며 결과적으로는 첫 진입 시 3~5초간 그래프를 열어놓고 자동으로 닫히게 적용해놓았습니다. ‘펼치면 무언가 더 있어요!’라는 걸 가장 효율적으로 전달할 수 있는 방법이라고 생각했거든요.
또 다른 예시를 들어볼게요. 인스타그램 데이터보드에서는 원래 링크 바로가기 버튼이 있었지만, 모바일의 좁은 화면에서 노출하기에는 한계가 있었습니다. 그래서 결국 프로필 이미지를 누르면 해당 아티스트의 인스타그램으로 이동하도록 수정했답니다. 대다수의 사람이 이미 여러 서비스를 통해 ‘프로필을 누르면 해당 계정으로 이동한다'는 것에 학습되어있으리라 판단했기 때문입니다.
이뿐 아니라 내부에서 뜨거운 감자였던 ‘tap’ 버튼도 현재 판결 중에 있습니다. ‘이 버튼을 쓸까? 쓴다면 얼마나 쓸까? 핸드폰 기종별로 어떤 차이가 있을까?’등의 토론을 하고 있는데요. 내부적으로 서비스 개선을 위한 인사이트는 최대한 데이터를 통한 객관적인 해답을 얻고자 하고 있습니다. 최근에는 개발자 차니의 의견으로 유저가 클릭한 지점들을 열 분포 형태로 웹사이트 이미지에 기록하는 ‘히트맵’을 보며 판단하고 있는데요, 어떤 것을 클릭했는지 어떻게 이동했는지 등 유저의 행동을 파악하며 UX를 개선하는 데에 활용하고 있습니다. 뚝딱뚝딱 개발하는 마법사 같은 요원들과 함께! 🔮
👩🏻💻 Soi’s comment
케이팝 레이더를 오픈한지 딱 2주하고 하루가 지났습니다. 해외 유입이 있을 것이라 예상해 6개의 언어로 서비스를 준비하면서도 번역되는 문장들을 최소화했는데요. 미국, 독일, 노르웨이, 필리핀, 베트남, 저 멀리 알제리에서까지 - 생각보다 다양한 국가에서 케이팝 레이더에 유입되는 것을 보며 새삼 놀랐습니다. ‘K-Pop’에 대한 관심이 전 세계적으로 핫하다니 🔥 또 이렇게 많은 사람들이 케이팝 레이더를 찾아주다니! 아직은 모두 신기합니다.
당장 갈 길이 멀지만, 우리가 케이팝 레이더를 세상에 공개한 ‘좋은 의도’대로 음악 업계에 있는 분들에게 그리고 K-Pop을 사랑하는 여러 팬들에게 조금이라도 도움이 되길 희망합니다.
‘케이팝 레이더, 어떻게 기획하고 디자인했을까?’궁금증이 조금은 해소되셨나요? 올해 5월부터 본격적으로 준비해 약 100일 남짓한 시간 동안 고민했던 부분들을 적어보았는데요. 소소한 팁이라도 얻으셨길 바라며 케이팝 레이더를 시작으로 스페이스오디티2.0이 그려갈 새로운 모습, 올 하반기에 야심차게 준비하고 있는 새로운 두 서비스도 기대 많이 해주세요! 감사합니다. 🙂🙏🏻
Special Thanks to
D.FY http://www.dfy.co.kr/seoul/
