cebenteam · 바카라 확률(Wishket)

프로젝트 배경

1) 문제점
1-1. 리소스(고용량 이미지, 오디오 등) 과다로 초기 렌더링 지연 발생
도서 최초 진입 시 Blank 페이지로 이동 된 문제를 커스텀 빌드 스크립트를 통해 이미지/오디오 자동 압축
모듈 단위로 병합하여 리소스 간소화 작업

1-2. 자연스러운 UX
framer-motion, IntersectionObserver 등을 사용해 부드러운 UX 구현
인터랙션 우선순위 정립 및 페이드/스케일 등 효과에 공통 규칙 정의

2) 프로젝트 목표
2-1. 어른을 위한 감성적인 전자책 콘텐츠 구현
텍스트와 오디오, 애니메이션이 어우러진 몰입형 독서 경험 제공
챕터마다 다른 인터랙션 제공

3) 주안점
3-1.Epub3.0의 한계를 극복한 풍부한 인터랙션 구현
스크롤 이벤트 기반 애니메이션, 오디오 재생 제어, 다단계 콘텐츠 흐름
자동 재생, 콘텐츠 확대/축소 등 고급 인터페이스 구현

3-2.리소스 최적화와 로딩 성능 확보
EPUB 내부의 무거운 리소스를 효과적으로 경량화하여 사용자 경험 저하 방지

프로젝트 성과

코드 구조 및 컴포넌트 시스템 정비로 외주 이관 대비 체계 마련

재사용 가능한 컴포넌트 기반으로 프로젝트를 설계하여, 외주 변경 시에도 유지보수가 가능한 구조 설계를 통해 가독성과 이해도를 높임

리소스 최적화 및 사용자 경험 향상

리소스 경량화 및 모듈화 설계를 통해 페이지 로딩 성능 개선
오디오/이미지 자동 압축 커맨드를 개발하여 빌드 프로세스를 표준화
framer-motion을 이용해 부드럽고 몰입도 높은 UX 제공

크로스 브라우징 및 멀티 플랫폼 테스트 100% 통과

Chrome, Safari, Firefox 및 iOS/Android/Windows 기반 디바이스에서 모든 콘텐츠가 동일하게 동작하도록 최적화

프로젝트 진행 전 과정 기술 리딩 및 클라이언트 신뢰 확보

기술 스택 선정, 프로젝트 구조 설계, 퍼블리싱, 개발, 테스트까지 전 과정을 단독 리딩
프로젝트 후반에는 추가 콘텐츠까지 제안할 정도의 신뢰를 얻음

핵심 기능

페이지별 다단계 애니메이션 인터랙션

- 스크롤 위치에 따른 텍스트 인아웃 애니메이션
- 이미지 확대/축소 및 위치 변경 등 자연스러운 트랜지션 제공
- framer-motion을 활용한 세련된 모션 처리

오디오 자동 재생 및 사용자 제어 기능

- 자동 재생 버튼으로 페이지 이동 및 오디오 자동 재생 기능
- 오디오 정지 및 볼륨 제어 기능

리소스 최적화 자동화 도구 개발

이미지, 오디오 압축 자동화 커맨드 스크립트 작성

프로젝트 상세

1) 프로젝트 소개
어른을 위한 동화책으로 애니메이션 기능을 포함한 자연스러운 인터랙션이 가능한 Epub3.0 베이스의 전자책

2) 작업 범위
- 기술 스택 선정
- 프로젝트 설계
- 퍼블리싱
- 컴포넌트 및 기능 개발
- 검증 및 테스트

3) 주요 업무
- 프로젝트 설계
- 기획자 및 디자이너와 협업
- 콘텐츠 개발
- 크로스브라우징, 멀티플랫폼 대응

4) 주안점
- 자동재생 로직 개발
- 오디오 제어 기능
- 컨트롤 UI 구성
- 스크롤 단계에 따른 애니메이션 처리
- 향후 유지보수가 가능한 구조 설계