왓챠벨 제작기

프로젝트 개요

• 왓챠벨 인트로 애니메이션 구현
• 순수 CSS anmiatoin으로 세부 움직임 제어

• 타임어택바 제작 및 최적화
• useImperativeHandle 를 이용하여 리렌더링 최적화

• UI/UX 디자인 품질 관리 및 개선

인트로 애니메이션 제작기

• 외부 라이브러리 대신 순수 CSS로 구현하여 가볍고 효율적인 애니메이션을 구현했습니다.

• 가장 중점을 둔 부분은 '종이 쳐지는 듯한' 자연스러운 모션 구현으로, rotate와 translate 값을 정밀하게 계산하여 개발했습니다.

• 반응형 지원을 위해 모든 요소의 position 값을 최적화했습니다.

• 초기에는 요소의 클릭 가능성이 직관적으로 인식되지 않는 문제가 있었습니다.

• 디자인팀과의 협업을 통해 scale 조절 방식을 채택하여 상호작용성을 향상시켰습니다.

• 초기 로딩 시 컴포넌트가 불규칙하게 렌더링되는 문제가 발생했습니다.

• 종 바디와 검은 종이 별도의 요소로 존재하여 렌더링 타이밍 차이로 인한 시각적 불일치가 발생했습니다.

• CSR 방식의 이미지 로딩 문제를 해결하기 위해 Next.js의 Image 컴포넌트 사용 또는 SVG 컴포넌트화 방안을 검토했습니다.

• 하지만 Next.js의 Image 태그는 내부 스타일 우선순위로 인한 CSS 충돌 문제가 발견되었습니다.

• 최종적으로 webpack 설정을 수정하여 SVG를 React 컴포넌트로 import하는 방식을 채택했습니다.

• 한 가지 더 고려해야 할 점은 config 설정만 끝냈을 때 svg의 viewport가 생략되는 문제가 있었습니다다. 이는 view-port인데 viewPort라 되어 있어 이를 인지하지 못하고 생략시키기 때문에 발생했습니다. 그래서 viewport를 무시하지 않는다는 추가 설정을 해주었습니다.

• 사용자 경험 향상을 위해 컴포넌트에 min-height를 적용하여 렌더링 순서에 따른 레이아웃 시프트를 방지했습니다.

타임어택 제작 및 최적화

• 타이머 기능 구현을 위해 use-timer라는 라이브러리를 활용했습니다.

• React의 useImperativeHandle 훅을 사용하여 렌더링 최적화를 구현했습니다.
• useImperativeHandle은 부모 컴포넌트가 자식 컴포넌트의 요소에 접근해 행위 주체를 부모로 전환할 때 사용합니다.

• props 전달 방식 대신 부모 컴포넌트에서 자식 컴포넌트의 메서드에 직접 접근하는 방식을 채택하여 불필요한 렌더링을 방지했습니다.

• 이를 통해 타이머 상태 변경이 전체 UI 렌더링에 영향을 미치지 않도록 격리했습니다.

• Chakra UI의 Progress 컴포넌트는 퍼센트 기반으로 동작하는 반면, 타이머는 프레임 기반으로 동작하여 단위 변환 로직이 필요했습니다.

• 소수점 처리 과정에서 타이머 종료 조건이 정확히 일치(time === endTime)할 때만 작동하는 문제를 발견했습니다.

• 해당 이슈를 라이브러리 GitHub에 보고하고, 임시 해결책으로 계산 로직을 재구현하여 문제를 해결했습니다.

성과

• 서비스 공개 2시간 만에 참여자 1만 명 돌파 및 트위터 실시간 트렌드 6위 기록.

• 출시 다음날까지 총 3만 명 참여.

• 서비스 오픈 후 5일간(목~일) 약 4만 명 참여.

• 스태프 추천 작품의 클릭률 10%(4,135명 인입) 달성.

• 퀴즈에 등장한 작품들의 시청률 상승 효과 확인
• 〈아저씨〉: 전주 대비 23% 시청자 증가
• 〈아수라〉: 전주 대비 44% 시청자 증가