티스토리 뷰

Portfolio

[2017.07] MMT Widget

zineeworld 2018.01.01 13:58

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/

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




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




후기

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


댓글
댓글쓰기 폼
«   2018/05   »
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
글 보관함
Total
125,034
Today
1
Yesterday
72