[2017.07] MMT Widget

Goal

• MyMusicTaste와 계약이 된 해외 아티스트의 공식 사이트에 MMT Widget을 넣어서 메이크를 유도한다.
• 페이스북 광고 외에 유저가 MMT로 유입되는 새로운 루트가 될 수 있다.
• 유의미한 정보를 보여주는 뷰어의 기능으로 활용
• 어떤 정보들을 넣어서 보여줄 것인지를 더 생각해 봐야 할 것 같음
• 위젯은 그 자체로 유저들의 흥미를 끌 수 있어야 한다
• 적은 리소스를 들여 많은 베리에이션을 칠 수 있음
• 디자인 리소스를 들인 광고보다 더 많은 유입을 이끌어 낸다면 훨씬 효율적인 마케팅 수단이 될 수 있다.

Note

• 위젯 디자인은 모바일 최소 사이즈를 고려하여 가로폭 300px을 넘지 않는다.
• 데스크탑/모바일 모두 같은 디자인을 사용한다.
• bar(기본), expand, shrink 3가지 형태가 있다.
• 최상위(.mmt-widget-wrapper)개체의 직속 자식 요소 클래스는 mmt-widget-xxx 식의 네이밍 사용한다.
• 마크업에서 아이디 네이밍은 요소의 위치에 상관없이 mmt-widget-xxx로 통일한다.
• 아이콘은 모두 svg 파일을 사용한다.
• 테마별 색상 변환 용이 (fill, stroke)
• 디바이스 별 사이브 변환 필요 없음 (vector)
• 마크업에서 .hidden은 요소를 잠시 가려두기 위한 클래스이다.

• 기술 참고 : http://alexmarandon.com/articles/web_widget_jquery/

• 고려사항
• [개발] 위젯을 적용할 사이트의 개발 환경을 고려, 어떤 충돌이 일어날지 모른다
• 예를 들어, 소속사 사이트라면 자체 개발팀이 없다고 생각하고 진행해야 한다
• [운영]
• 복잡하게 만들수록 가이드 문서도 복잡하게 작성되어 전달되어 진다는 것을 명심
• [디자인]
• 위젯의 최소 사이즈를 지정할 수 있지만 비율을 고정 시킨다던지 할 수는 없음
• 다양한 브라우저 환경과 사이즈에도 잘 보일 수 있어야 
• [기타]
• Email, mobile verification -> 큰 허들

Design

Markup Structure

• [root] div.mmt-widget-wrapper && (.left || .right) && (.dark || .light) && (null || .expand || .shrink)
• svg.mmt-widget-close
• div.mmt-widget-top-border[data-style="city-listed || image || youtube"]
• div.city-listed-style (1/3)
• div.image-style (2/3)
• div.youtube-style (3/3)
• div.search-box
• div.search-field
• div.search-drop
• ul.result-list
• p.no-results[data-spinner="true || false"]
• div.btn
• div.mmt-widget-content
• div.mmt-widget-bar
• div.mmt-widget-bar-content
• div.artist-img

DEMO

See the Pen [Demo] MMT-Widget by zinee (@zineeworld) on CodePen.

실제 적용 모습

https://www.orphancolours.com/

아무리 잘 만들어줘도 아티스트 쪽에 개발팀이 없으면 이런 결과가 생긴다.

이렇게 넣으면 된다고 가르쳐줘도 왜 못할까.....ㅠㅠ

후기

스케치 툴을 제대로 사용해 본건 처음이었는데, 기획-디자인-마크업-데모까지 거의 전담해서 진행할 수 있어서 재밌는 작업이었다. 적용까지 완벽하게 됐으면 좋았을텐데 아쉬움이 남는다. 종원님이 떠나시기 전에 진짜 열심히 작업해주고 가셔서 더욱 기억에 남는 프로젝트였다.