플러스프로젝트 배경
1) 문제점 1-1. 리소스(고용량 이미지, 오디오 등) 과다로 초기 렌더링 지연 발생 도서 최초 진입 시 Blank 페이지로 이동 된 문제를 커스텀 빌드 스크립트를 통해 이미지/오디오 자동 압축 모듈 단위로 병합하여 리소스 간소화 작업 1-2. 자연스러운 UX framer-motion, IntersectionObserver 등을 사용해 부드러운 UX 구현 인터랙션 우선순위 정립 및 페이드/스케
프로젝트 성과
코드 구조 및 컴포넌트 시스템 정비로 외주 이관 대비 체계 마련
재사용 가능한 컴포넌트 기반으로 프로젝트를 설계하여, 외주 변경 시에도 유지보수가 가능한 구조 설계를 통해 가독성과 이해도를 높임
리소스 최적화 및 사용자 경험 향상
리소스 경량화 및 모듈화 설계를 통해 페이지 로딩 성능 개선
오디오/이미지 자동 압축 커맨드를 개발하여 빌드 프로세스를 표준화
framer-motion을 이용해 부드럽고 몰입도 높은 UX 제공
오디오/이미지 자동 압축 커맨드를 개발하여 빌드 프로세스를 표준화
framer-motion을 이용해 부드럽고 몰입도 높은 UX 제공
크로스 브라우징 및 멀티 플랫폼 테스트 100% 통과
Chrome, Safari, Firefox 및 iOS/Android/Windows 기반 디바이스에서 모든 콘텐츠가 동일하게 동작하도록 최적화
프로젝트 진행 전 과정 기술 리딩 및 클라이언트 신뢰 확보
기술 스택 선정, 프로젝트 구조 설계, 퍼블리싱, 개발, 테스트까지 전 과정을 단독 리딩
프로젝트 후반에는 추가 콘텐츠까지 제안할 정도의 신뢰를 얻음
프로젝트 후반에는 추가 콘텐츠까지 제안할 정도의 신뢰를 얻음
핵심 기능
페이지별 다단계 애니메이션 인터랙션
- 스크롤 위치에 따른 텍스트 인아웃 애니메이션
- 이미지 확대/축소 및 위치 변경 등 자연스러운 트랜지션 제공
- framer-motion을 활용한 세련된 모션 처리
- 이미지 확대/축소 및 위치 변경 등 자연스러운 트랜지션 제공
- framer-motion을 활용한 세련된 모션 처리
프로젝트 상세
1) 프로젝트 소개 어른을 위한 동화책으로 애니메이션 기능을 포함한 자연스러운 인터랙션이 가능한 Epub3.0 베이스의 전자책 2) 작업 범위 - 기술 스택 선정 - 프로젝트 설계 - 퍼블리싱 - 컴포넌트 및 기능 개발 - 검증 및 테스트 3) 주요 업무 - 프로젝트 설계 - 기획자 및 디자이너와 협업 - 콘텐츠 개발 - 크로스브라우징, 멀티플랫폼 대응 4) 주안점 -
