brunch

라이킷 42 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Melon Design May 08. 2020

인스타그램 스토리로 음악 공유하기

(feat. 멜론 디자이너들의 추천 음악)

이 노래, 세상 사람 다 알게 해주세요!

여러분도 듣고 있는 음악을 친구들에게 공유하고 싶을 때가 종종 있으신가요? 저는 그럴 때마다 멜론 플레이어 화면을 캡처해서 인스타그램 스토리에 올리곤 합니다. 그런데 앞으로는 멜론에서 더 쉽고 빠르게 그리고 트렌디하게 곡을 공유할 수가 있게 되었어요. 또한 그 위에 남기고 싶은 메시지를 여러 가지 움직이는 스티커로 감각 있게 표현할 수 있게 되었습니다.

좌 : 스토리 공유 화면 / 우 : 스티커 추가한 화면

그럼 공유 방법과 디자인 과정을 더 자세히 알아볼까요?

01. 공유하는 방법

인스타그램 스토리로 곡 공유하기

멜론 플레이어 화면에 인스타그램 모양의 버튼을 누르면 바로 인스타그램 스토리로 공유할 수 있습니다.

보통 노래를 공유하고 싶은 마음이 드는 때는 노래를 듣는 바로 그 순간이죠. 따라서 플레이어 전면에 인스타그램 공유 버튼을 넣는 과감한 선택을 했습니다. 사용자들에게 신규 기능에 대해 적극적으로 인지시키기 위한 목적이 제일 컸기 때문에 이러한 결정을 내리게 되었습니다.

또 다른 방법으로는 곡 리스트에서 더보기 버튼을 눌러서 공유하는 방법도 있습니다.

02. 다양한

콘텐츠 타입

앨범 / 플레이리스트 / 아티스트 공유 타입

위 이미지와 같이 곡 이외에 앨범/플레이리스트/아티스트 또한 스토리로 공유할 수 있도록 작업 중이며, 다음 업데이트에 적용될 예정이니 조금만 기다려주세요 ^.^

03. 디자인 과정

첫 번째로 고민했던 부분은 단순히 플레이어 화면 자체를 그대로 캡처해서 보여줄지, 아니면 필요한 정보만 간결한 레이아웃으로 재구성할지에 대한 것이었습니다. 인스타그램에서 사용자들이 노래를 공유하는 방식들을 찾아보았을 때, 많은 사람들이 플레이어 화면을 캡처하여 그대로 올린다는 사실을 알 수 있었습니다.

물론 인스타그램으로 공유하는 별도 기능이 없기 때문일 수도 있지만 플레이어 화면 자체는 지금 이 노래를 듣고 있다는 실시간성과 두 줄 정도 노출되는 가사에 대한 공유를 함께 할 수 있다는 장점이 있었습니다.

초기 시안

플레이어 화면 캡처

따라서 초기에는 플레이어 화면을 그대로 캡처했을 때 어떻게 보일지, 공유 시 필요 없는 하단의 시크바는 크롭해서 보여주면 어떨지, 플레이어의 느낌만 살려서 카드 타입으로 만들지, 여러 가지로 테스트를 진행했습니다. 하지만 개발 OS환경 차이에서 오는 문제 또는 디바이스마다 해상도 비율 등이 달라서 원하는 최적의 비율로 크롭하여 보여줄 수 없다는 이슈가 있었습니다.

따라서 위와 같은 시안은 진행을 멈추고, 캡처 방식이 아닌 필요한 정보만으로 간결하게 보여주는 시안을 여러 타입 만들어 보았습니다.

진행했던 시안들

필요한 정보만으로 구성한 시안들

Blur효과나 컬러 추출 등 배경 레이어에 대한 표현방식, 또한 필요한 정보만을 카드타입으로 묶어서 표현하는 방법 등의 디자인 테스트를 진행했습니다. 이러한 시안들은 캡처 화면과 비교해보면, 공유할 때 사실상 필요 없는 다른 요소들을 제거하고 깔끔하게 보여줄 수 있다는 장점이 있었습니다.

최종시안

위의 시안들 중 최종적으로 결정된 시안입니다. 카드타입의 시안들보다 사용자들에게 편집의 자율도를 높여줄 수 있고 함께 제공될 스티커와 제일 잘 어우러질 수 있는 시안이었습니다. 사용자들이 콘텐츠의 크기를 줄이거나 키우고 배치를 다양하게 해도 레이아웃이 자연스럽게 유지되기 때문에 보다 자유롭게 편집할 수 있습니다. 또한 배경은 컬러추출값을 사용하여, 여러 스토리를 넘겨보다가도 강렬한 컬러로 인해 시선을 끌 수 있게 했습니다.