https://fandom-k-eight.vercel.app/

프로젝트 개요

역할

프론트엔드, 프로덕트 디자인

기간

2025년 3월 6일 ~ 3월 20일(약 2주)

설명

‘내 최애에게 한 걸음 더 다가가는 법' Fandom-K는 K-POP 팬을 위한 플랫폼입니다. 좋아하는 아티스트에게 투표를 하거나, 후원을 할 수 있으며, 자신이 좋아하는 아티스트를 모아볼 수 있습니다. 복잡하게 느껴질 수 있는 '후원'과 '투표' 과정을 직관적인 UI와 마이크로 인터랙션을 통해, 쉽고 재미있는 경험으로 개선하는 것을 목표로 했습니다.

---

문제와 해결

• 성능 최적화: 60fps를 위한 렌더링 파이프라인 구축
• 프론트엔드 아키텍처: 확장 가능한 UI 시스템 설계
• 네트워크 불안정성 및 데이터 관리: 사용자 경험 향상
• UI/UX: 마이크로 인터랙션을 통한 후원 경험 재설계

---

성능 최적화: 60fps를 위한 렌더링 파이프라인 구축

• 문제 정의: 프로젝트의 핵심인 랜딩 페이지는 다수의 스크롤 기반 애니메이션으로 구성되어 있었으나, 초기 구현 시 scroll 이벤트의 과다 발생으로 인한 잦은 리렌더링과 reflow/repaint로 인해 심각한 성능 저하가 발생함. 개발자 도구 분석 결과, 애니메이션 처리 속도가 4.45초에 달하며 사용자 경험을 심각하게 해치는 수준이었음.
• 해결 과정:

  • 대안 분석:

    1. 순수 JS와 CSS transform을 통한 직접 구현
    2. GSAP
    3. Framer Motion

    1은 이벤트 Throttling과 GPU 가속(translate3d)을 적용했으나 복잡한 연산에 한계가 있었음. React 환경과의 호환성을 고려하여 3. Framer Motion을 최종 선택함.

  • 최종 선택:

    1. 애니메이션 로직 분리: Framer Motion의 useScroll, useTransform 훅을 활용하여 스크롤 진행도와 애니메이션 값을 분리 및 관리함.
    2. 이벤트 최적화: requestAnimationFrame을 통해 throttle을 적용하여 비디오 프레임 재생과 같은 무거운 작업을 16ms(60fps) 간격으로 제한, 불필요한 이벤트 콜백을 제거함.
• 결과: 랜딩페이지의 애니메이션 처리 속도를 4.45초에서 0.47초로 약 9.47배 향상시키며 60fps의 안정적인 애니메이션을 달성함.
• 확장: 향후 Intersection Observer를 활용한 이미지 지연 로딩을 도입한다면 초기 로딩 성능을 더욱 극대화할 수 있을 것으로 예상함.

---

프론트엔드 아키텍처: 확장 가능한 UI 시스템 설계

• 문제 정의: 프로젝트 전반에 걸쳐 모달과 타이포그래피, 스켈레톤 사용이 잦으나, 일관된 규칙이 없어 props drilling, 코드 중복, 일관적이지 않은 UI 등의 문제가 발생함. Figma 컴포넌트 역시 체계 없이 분리되어 있었음.
• 해결 과정:
  • 대안 분석: 모달 상태 관리를 위해 Redux, Zustand, Context API를 검토함. 프로젝트 규모를 고려했을 때 Redux는 과도하며, Context API가 별도의 라이브러리 없이 React 자체로 문제를 해결할 수 있는 가장 합리적인 방안이라 판단함.
  • 최종 선택:
    1. 중앙 모달 관리: Context API를 기반으로 openModal, closeModal을 통해 모든 모달을 제어하는 시스템을 설계함. MODAL_TYPES 상수를 활용하여 새로운 모달 타입을 빠르게 추가할 수 있는 확장 가능한 구조를 구현함.
    2. 체계적인 디자인 시스템 구축: 디자인과 개발 간의 소통 비효율을 해결하기 위해, 타이포그래피 및 컬러 시스템을 직접 설계하고 Styled Components의 Theme Provider와 연동함. b24(Bold, 24px)와 같은 명확한 네이밍 컨벤션을 도입하고, 함수형 헬퍼를 제작하여 생산성을 높임.
    3. Figma 재구성: 분리되어 있던 모든 Figma 컴포넌트를 재구축하여, 개발자가 한눈에 시스템을 파악하고 즉시 적용할 수 있도록 워크플로우를 개선함.
    4. 로딩 경험 개선: 로딩 시의 빈 화면 문제를 해결하기 위해, CSS의 %와 em 단위를 적극 활용하여 실제 콘텐츠 구조와 동일한 스켈레톤 UI를 도입하고, CSS 애니메이션으로 부드러운 Shimmer 효과를 구현하여 체감 로딩 시간을 단축시킴. 이를 공통 컴포넌트로 제작하여 일관된 UI를 유지할 수 있도록 함.
• 결과: props drilling 문제를 완전히 제거했으며, CSS 코드 중복을 크게 감소시킴. 체계적인 시스템 도입으로 새로운 컴포넌트 스타일링 시간을 단축시키는 등 팀 전체의 개발 생산성을 크게 향상시킴.
• 확장: 현재 시스템에 Style Dictionary를 도입하여 Figma의 디자인 토큰과 코드를 자동으로 동기화하는 파이프라인을 구축하고, Portal을 활용하여 모달의 렌더링 위치를 더 유연하게 제어하는 방향으로 고도화할 수 있음.

---

네트워크 불안정성 및 데이터 관리: 사용자 경험 향상

• 문제 정의: 제공된 백엔드 API 서버가 매우 불안정하여 요청 실패율이 높았고, 대용량 데이터를 한 번에 로딩하여 사용자 경험이 심각하게 저하되는 문제가 있었음.
• 해결 과정:
  • 대안 분석: 서버 자체를 개선할 수 없는 제약 조건 하에서, 클라이언트 단에서 사용자 경험을 개선시키는 전략에 집중함.
  • 최종 선택:
    1. 재시도 메커니z즘: axios 요청 실패 시, 최대 5회까지 간격을 두어 자동으로 재시도하는 로직을 구현함.
    2. 캐싱 및 SWR: 최초 데이터 로딩 성공 시, LocalStorage에 데이터를 캐싱함. 이후 방문 시에는 캐시된 데이터를 먼저 보여주고(Stale), 백그라운드에서 새로운 데이터를 조용히 업데이트하는(While-Revalidate) 패턴을 적용함.
    3. Optimistic UI: 응답 속도가 느린 요청(토스트 팝업 등)의 경우, 서버 응답을 기다리지 않고 일단 성공한 것처럼 UI를 먼저 보여준 뒤, 백그라운드에서 실제 요청을 보내는 방식으로 체감 성능을 극대화함.
• 결과: 불안정한 네트워크 환경에서도 데이터 로딩 성공률을 크게 끌어올렸음. 캐싱 전략을 통해 재방문 시 로딩 시간을 매우 짧게 단축시켰으며, 오프라인 상황에서도 캐시된 데이터로 기본 기능을 유지할 수 있게 됨.
• 확장: SWR 패턴을 더 많은 곳에 적용하여 성능을 향상시키고, React-query를 도입하여 더욱 세밀하고 효율적으로 데이터를 관리할 수 있음.

---

UI/UX: 마이크로 인터랙션을 통한 후원 경험 재설계

• 문제 정의: 초기 후원 기능은 단순 모달 형태로 구현되어, '후원'이라는 중요한 결정에 필요한 충분한 정보와 맥락을 제공하지 못했음. 또한, 사용자가 직접 금액을 입력하는 방식은 불편하고 입력 실수를 유발할 가능성이 높았음.
• 해결 과정:
  • 대안 분석: 주요 펀딩 서비스(텀블벅, 와디즈 등)와 금융 앱(카카오페이 송금)의 UX 패턴을 분석함. 그 결과, 후원 페이지에는 충분한 정보를 제공하는 '전용 페이지'가 필수적이며, 입력 편의성을 높이는 '단축 버튼'과 즉각적인 '에러 피드백'이 사용자 경험에 중요하다는 것을 알게됨.
  • 최종 선택:
    1. 정보 구조 개선: 기존의 모달을 폐기하고, 후원에 대한 충분한 동기를 부여하고 정보를 제공하는 전용 페이지를 새롭게 설계함.
    2. 입력 편의성 향상: '카카오페이'의 송금 UI를 벤치마킹하여, 사용자가 클릭 몇 번으로 원하는 금액을 쉽게 입력할 수 있는 '금액별 단축 버튼'을 도입함.
    3. 직관적 에러 피드백: 후원금이 소지 금액을 초과했을 경우, 애플 iOS의 UI 패턴을 참고하여 CSS Animation 기반의 좌우로 흔들리는 마이크로 인터랙션을 구현함. 이를 통해 사용자에게 텍스트 경고보다 훨씬 빠르고 직관적으로 입력이 잘못되었음을 인지시킴.
• 결과: 사용자의 입력 단계를 줄이고 인지적 부하를 낮추어, 후원 완료까지 걸리는 평균 시간을 단축함. 직관적인 UI 개선을 통해 입력 실수를 줄이고, 최종 후원율을 높이는 효과를 기대할 수 있었음.
• 확장: 향후 사용자의 과거 후원 패턴을 분석하여 개인화된 금액 버튼을 추천하거나, 금액에 따라 달라지는 인터랙티브한 시각 효과를 추가하여 '후원'이라는 행위 자체를 더 즐거운 경험으로 만들 수 있음.