Music Leaf Green

초등 음악 교육 서비스
UI/UX 고도화 제안

학생이 쉽게 배우고 교사가 빠르게 관리할 수 있도록, 정식 런칭에 필요한 화면 경험과 Figma 디자인 시스템을 함께 정리하는 제안입니다.

01. Analysis & Strategy

요구사항 분석 및 핵심 전략 제안

클라이언트 핵심 요구사항

학생 학습 흐름 재설계

초등학생이 오늘 할 일, 재생 위치, 악보 흐름, 완료 상태를 바로 이해하는 구조

음악 플레이어와 악보 뷰어

듣기, 따라보기, 반복 학습, 진도 확인이 한 화면에서 이어지는 음악 학습 UI

교사 백오피스 고도화

학급별 진도와 미완료 학생, 콘텐츠 배포 상태를 빠르게 읽는 관리 화면

핵심 역제안

다음 행동이 보이는 UX

학생이 화면에서 길을 잃지 않도록 학습 과제, 재생, 완료 피드백을 단계화

재사용 가능한 컴포넌트

버튼, 입력창, 모달, 툴팁, 진도 카드, 보상 배지를 Figma 컴포넌트로 정리

PC와 태블릿 대응

수업 환경과 가정 학습 환경 모두에서 안정적인 반응형 레이아웃 제공

02. Strategic Deep-Dive

전략 과제별 구체적 수행 방안

기존 UX 진단과 우선순위 도출

운영 중인 MVP 화면을 학습 시작, 악보 보기, 과제 완료, 보상 확인, 교사 관리 흐름으로 나누어 이탈 가능 구간과 개선 우선순위를 정리합니다.

Expected Effect

런칭 전 핵심 사용성 리스크를 먼저 줄입니다.

음악 학습 전용 UI 패턴 설계

음악 플레이어, 악보 뷰어, 반복 재생, 진행률, 보상 피드백을 하나의 학습 흐름으로 연결해 초등학생이 설명 없이도 따라갈 수 있게 만듭니다.

Expected Effect

학생의 조작 부담을 낮추고 학습 몰입을 높입니다.

Figma 디자인 시스템 구축

컬러, 타이포그래피, 그리드, 간격, 컴포넌트 상태값을 정리하고 Dev Mode 기준으로 레이어와 네이밍을 관리해 개발팀이 바로 반영할 수 있게 합니다.

Expected Effect

전담 디자이너 부재 상황에서도 화면 확장이 쉬워집니다.

03. Implementation

프로젝트 수행을 위한 최적의 디자인 작업 체계

UX 진단

학습 여정 지도 학생의 오늘 학습부터 완료까지 핵심 흐름 정리
이탈 구간 분석 재생, 악보, 과제 완료 화면의 막힘 요소 진단

Figma 설계

Auto Layout PC와 태블릿 대응이 쉬운 구조화된 프레임
Variants 버튼과 입력창, 상태값을 한 컴포넌트로 관리

화면 고도화

학생 화면 음악 재생, 악보, 진도, 보상을 직관적으로 구성
교사 화면 학급별 통계와 학생별 리포트 판독성 강화

핸드오프

Dev Mode 개발자가 바로 확인 가능한 속성과 에셋 정리
Design QA 개발 반영 후 화면 차이와 반응형 이슈 검수
04. Sequence

프로젝트의 성공을 완성하는
정교한 8단계 업무 프로세스

01

미팅

요구사항 청취 및 비즈니스 목표 상세 협의

02

계약 진행

상세 과업 범위 확정 및 공식 계약 체결

03

요구사항 재분석

개발 관점에서의 기술적 타당성 도출

04

기획/디자인

UI/UX 설계 및 시스템 아키텍처 상세 정의

05

클라이언트 컨펌

확정된 기획안에 대한 최종 리뷰 및 승인

06

개발

PMS를 통한 투명한 집중 개발

07

테스트

단위/통합 테스트 및 버그 수정, 안정성 검증

08

배포

최종 운영 환경 배포 및 안정화 지원

05. Timeline

90일의 여정, 진단부터 핸드오프까지

Week 1-2

UX 진단

기존 화면 분석과 핵심 개선 우선순위 정리

Week 3-4

학생 화면

학습 홈, 플레이어, 악보 뷰어, 진도 화면 고도화

Week 5-6

교사 화면

학급 통계, 학생 상세, 콘텐츠 관리 화면 설계

Week 7-12

시스템화와 QA

디자인 시스템, 반응형, 상태값, 핸드오프, 디자인 QA 완료

06. Communication & Trust

외주의 불안함을 확신으로,
가장 투명한 파트너십을 약속합니다.

'답답함'이 없는 커뮤니케이션

클라이언트가 가장 힘들어하는 '소통의 부재'와 '진척도 확인 불가능'을 해결하기 위해, 모든 협업 과정을 시스템화했습니다.

  • 자체 PMS 시스템 운영: 기획서부터 소스코드까지 실시간 공유
  • 항시 연결되는 소통 채널: 지연 없는 피드백과 투명한 이슈 관리
  • 정기 데모 세션: 상상 속의 결과물이 아닌, 돌아가는 시스템을 매주 확인

"우리는 단순한 외주사가 아닙니다.
성공을 위해 시스템으로 소통하는
여러분의 사내 팀이 되겠습니다."

Thank You

Your Vision, Our Mission.