brunch

You can make anything
by writing

- C.S.Lewis -

by Melon Design May 08. 2020

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

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

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

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

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


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



01.

공유하는 방법

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

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

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

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



02.

다양한 

콘텐츠 타입

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

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



03.

디자인 과정

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


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


초기 시안

플레이어 화면 캡처

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


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


진행했던 시안들

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

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


최종시안

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



GIF 스티커 제작

인스타그램 스토리 'melon' 제공 스티커

스토리 공유 화면을 제공하면서 곡에 대한 다양한 메시지를 남길 수 있게 GIF 스티커도 함께 제작했습니다.  인스타그램 스토리 스티커에 'melonmusic'을 검색하면 확인하실 수 있습니다.



지금까지 멜론에서 새롭게 제공하는 '인스타그램 스토리로 곡 공유하기'에 대해 알아보았습니다. 

앞으로는 플레이어 화면을 캡처하고, 갤러리에서 사진을 불러와서, 스토리에 공유하는 복잡한 방법 대신에 멜론에서 제공하는 새로운 기능으로 트렌디하게 노래를 공유하세요!


그럼 마무리를 하며, 

멜론 디자이너들이 코로나 블루를 이겨내기 위해 듣는 노래를 몇 곡 소개해드리겠습니다.





멜론 디자이너들의

코로나 블루 극복송


Gabe Bondoc - Stronger Than


Ardhito Pramono - Here We Go Again / Fanboi


방탄소년단 - On


The Weeknd - In Your Eyes



이 노래들이 조금이나마 코로나19로 지친 마음에 힘이 되었으면 좋겠네요. 하루빨리 모두가 마음 편히 콧바람 쐴 날이 다가오길 바랍니다. 


그럼 다음에도 재미있고 유익한 이야기들로 찾아오겠습니다. 


감사합니다.



작가의 이전글 툴루즈 로트렉전

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
브런치 시작하기

카카오계정으로 간편하게 가입하고
좋은 글과 작가를 만나보세요

카카오계정으로 시작하기
페이스북·트위터로 가입했다면