← Home

📌Muzig.ai

AI 음악을 쉽고 빠르게 생성할 수 있는 웹 플랫폼

Next.jsTypeScriptCSS Modules
Web Site

Overview

역할프론트엔드 개발
기간2025.09 - 2026.04
팀 구성Front(2), Back(1), AI/PM(1)
담당 업무Next.js App Router 기반 구조 설계, Custom Hooks 패턴 도입, 반응형 UI 구현, 코드 리팩토링
성과Muzig.ai 사이트 성공적 런칭

Preview

프로젝트 이미지 1
프로젝트 이미지 2
프로젝트 이미지 3
프로젝트 이미지 4
프로젝트 이미지 5
프로젝트 이미지 6

Description

아티움 그룹에서 새로 서비스하는 AI 음악 생성 웹 플랫폼의 프론트엔드 개발을 담당했습니다. Next.js App Router를 활용하여 전체적인 프로젝트 아키텍처를 설계하였으며, Custom Hooks 패턴을 적극 도입하여 UI와 비즈니스 로직(API 호출, 상태 관리)을 명확히 분리했습니다. 이를 통해 코드의 유지보수성을 높이고 다양한 디바이스에 대응하는 반응형 UI를 완벽하게 구현하여 서비스 런칭에 기여했습니다.

Technical Challenges

  • UI와 비즈니스 로직(API 호출, 상태 관리)이 섞여 유지보수가 어려워지는 문제를 Custom Hooks 패턴 도입으로 분리
  • 다양한 디바이스 대응이 필요한 서비스 특성에 맞춰 반응형 UI 구조 설계
  • PageSpeed Insights에서 이미지 관련 성능 지표가 낮게 측정된 것을 확인하고, <img>를 next/image로 교체해 지연 로딩과 자동 포맷 압축을 적용

Learnings

  • Next.js App Router 기반 프로젝트 아키텍처를 처음부터 설계하며 구조 설계 역량을 키움
  • 실제 서비스 배포 후에는 기능 구현만큼 도구를 통한 성능을 직접 측정하고 확인하는 습관이 생김