국내 아티스트 음원 판매 기업,
매직드럭 플랫폼 비즈니스 구축
BUILD
WEB / MOBILE
매직드럭
플랫폼 비즈니스 구축
- Client
- 매드
- Date
- 2021. 08 - 2021. 11
- Type
- 창업패키지, 플랫폼, React, 반응형 구축
Overview
매직드럭만의 특색을 나타내기 위한 메인페이지 Icon Drag & Drop과 Window Resizing의 기술을 활용하였습니다. 아티스트와 구독자간의 사용성 간극을 줄이고자 커뮤니티 및 Feed 기능을 개발하여 온라인 네트워크상에서 놀수있는 놀이공간을 개발하였습니다.
Goal
독특성이 가미된 개성확보
UI/UX Strategy
독특한 그래픽 요소
MAGICDRUG의 개성있고 화려한 컨셉을 유지할 수 있도록
픽셀 컨셉의 폰트를 사용하고 어두운 배경을 적용하였습니다.
틀을 깨는 UI
공통적으로 사용되는 UI의 틀을 깨고 자유로운 Retro 디자인을 적용하였습니다.
특정 개체가 묻히거나 튀지 않도록 톤앤매너를 유지하였습니다.
직관적인 UX
그래픽과 UI는 화려하지만 UX는 직관적이고 보편적인 개념을 사용하였습니다.
제이콥의 법칙을 통해 산업군과 비슷한 인터페이스를 제공합니다.
MAGICDRUG
Design System
윈도우 디자인 컨셉에 맞게 시스템적인 폰트를 사용했으며,
본문은 컨셉을 가져가는 동시에 가독성을 위한 윈도우 서체를 사용했습니다.
색상은 브랜드의 color system을 사용해 통일성을 제공합니다.
Typography
px sans nouveaux
Segoe UI
Color System
아티스트를 위한, 구독자를 위한
음원 판매 플랫폼, 매직드럭
메인페이지 아이콘 Drag & Drop
WINDOW 방식의 메인페이지를 구현하기 위해 각각의 페이지를 아이콘화 하였습니다.
각각의 아이콘은 페이지 안에서 Drag & Drop이 가능하여 홈페이지 사용자의 이탈을 막아냈습니다.
비슷한 음악을 추천하는 추천 알고리즘 구현
AI를 기반으로 비슷한 음원을 추천하는 기능을 구현하여
홈페이지의 사용성을 극대화 시켜 플랫폼의 의존도를 상승시켰습니다.
‣ BGM 페이지
‣ 음원 상세페이지
MAGIC DRUG
Subpage
PRICE & ABOUT PAGE
매직드럭만의 특색있는 Price & About페이지를 디자인해 브랜딩하였습니다.
‣ Service Page
CATEGORY PAGE
BGM / SOUND EFFECT / FONT / VFX의 카테고리를 나누어
각 카테고리 별 BEST 섹션을 생성해 홈페이지 사용성을 올렸습니다.
‣ BGM 페이지
SOUND DETAIL PAGE
음원상세페이지에서 비슷한 음원찾기 기능을 추가하여
홈페이지 사용성을 극대화 하였습니다.
‣ 음원 상세페이지
MAGIC DRUG
Mobile Page
완벽한 WEB / MOBILE 반응형 대응
모바일에서도 문의 신청이 가능하도록 자연스러운 문의흐름을
개발하는 완벽한 반응형 대응을 진행하였습니다.
