살린 · Localo · 2023.10 ~ 2023.12
UI 먼저, 3D는 뒤에서
아바타 스튜디오 성능 개선
외주 업체에서 인수한 WebGL 아바타 서비스의 초기 진입과 구조를 개선했습니다.
- 문제
- 3D 렌더링과 대용량 정적 자산이 진입을 막아 3초 이상 빈 화면이 보였고, 3D·편집 로직이 섞여 작은 변경도 위험했습니다.
- 결정
- 진입점을 lazy loading·Suspense로 나누고 정적 자산을 CDN으로 옮겼으며, 3D와 편집의 변경 경계를 나눴습니다.
- 결과
- 첫 화면 표시를 Lighthouse FCP 기준 400~600ms로 단축했습니다.
결과 근거: 이력서 기재 내용. 이 페이지에서 측정한 값이 아닙니다.
구조
- lazy·Suspense 진입점 · 확정
진입점 분리. 앱 진입점을 lazy loading과 Suspense 경계로 나눕니다.
범례
- 임시·화면 계산
- 확정
- 문제 발생
- 대기
- 복구
서비스 화면은 공개 캡처가 없어 구조를 다시 그린 도식입니다. 단계 간격은 실제 시간이 아닙니다.
판단
첫 화면을 막는 비용을 어떻게 줄일 것인가
진입점을 lazy loading·Suspense로 분리
3D 렌더링이 첫 화면 표시를 막지 않고, 필요한 시점에 불러옵니다.
아바타 파츠·JSON 자산을 S3·CDN으로 이전
대용량 정적 자산을 앱 번들에서 떼어 내 CDN 경로에서 받습니다.
3D 뷰와 편집 기능을 어떻게 나눌 것인가
역할별 컴포넌트·훅으로 분리
신규 기능이 기존 렌더링 로직에 직접 의존하지 않게 변경 경계를 나눴습니다.
문제와 해결
문제
3D 렌더링과 대용량 정적 자산이 초기 진입을 막아 3초 이상 빈 화면이 노출됐고, 3D·편집 로직이 큰 컴포넌트에 섞여 작은 기능 변경도 기존 동작에 영향을 주기 쉬웠습니다.
해결
진입점 분리, 자산 CDN 이전, 역할별 컴포넌트 분리를 함께 적용해 Lighthouse FCP 기준 400~600ms로 줄였습니다.
이력서 원문
3초 이상 빈 화면이 노출되던 WebGL 아바타 서비스의 진입점을 lazy loading과 Suspense 경계로 나누고 정적 자산을 S3·CDN으로 이전해, Lighthouse FCP 기준 400~600ms로 단축했습니다.
문제
외주 업체에서 인수한 WebGL 아바타 서비스는 3D 렌더링과 대용량 정적 자산이 초기 진입을 막아 3초 이상 빈 화면이 노출됐습니다. 3D·편집 로직이 큰 컴포넌트에 섞여 있어 작은 기능 변경도 기존 동작에 영향을 주기 쉬웠습니다.
기여
앱 진입점을 lazy loading과 Suspense 경계로 분리하고, 아바타 파츠·JSON 자산은 S3·CDN 경로에서 불러오도록 이전했습니다. 3D 뷰와 편집 상태는 역할별 컴포넌트·훅으로 나눠 신규 기능이 기존 렌더링 로직에 직접 의존하지 않게 했습니다.
결과
3초 이상 걸리던 첫 화면 표시를 Lighthouse FCP 기준 400~600ms로 단축했습니다. 3D 렌더링과 화면 기능의 변경 경계를 나눠, 기존 동작을 전부 수정하지 않고도 아바타 편집 기능을 확장할 수 있게 했습니다.