MMT Widget 기획/디자인/마크업

목표

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

구현 내용

• 위젯 디자인은 모바일 최소 사이즈를 고려하여 가로폭 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 -> 큰 허들

디자인

마크업 구조

  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.mmt-widget-content
      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-bar
      div.mmt-widget-bar-content
        div.artist-img
  

데모

실제 적용 모습

https://www.orphancolours.com/

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

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

후기

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