문서
뒤에 개발자 있어요 | Simplicity 4 제작기 #2
박은식 / 이예서 토스 · 토스 기술 블로그
AI 핵심 요약
다음 시즌에도 재사용할 수 있는 Simplicity 컨퍼런스 사이트를 만들기 위해 세션 화면을 템플릿화하고, 구성 요소를 Script·Top·Canvas·Background로 나눠 공통 애니메이션 흐름을 구현했습니다. 모바일 Safari의 비디오 재생 정책과 Blur 성능 문제에는 사용자 터치 재생을 추가하거나 배경 이미지의 opacity를 조정하는 등 브라우저별 대응을 적용했습니다. 모바일 로딩을 개선하기 위해 GIF를 WebP로 교체하고 에셋을 미리 로드했으며, 영상 요소 재사용과 라우팅 로직 개선도 진행했습니다. 홈 화면은 React 메모이제이션과 요소 스타일 직접 변경으로 렌더링을 최적화했고, 프로파일링과 CPU 감속 테스트를 통해 모바일에서도 원활하게 시청할 수 있도록 다듬었습니다.
- 여러 화면 템플릿은 구성 요소를 분리하고 공통 전환 흐름을 정의하면 중복 구현과 유지보수 부담을 줄일 수 있습니다.
- 모바일 Safari처럼 브라우저 정책으로 해결할 수 없는 제약은 우회책을 반복하기보다 사용자 동작이나 화면 스펙을 조정해야 합니다.
- 모바일 로딩은 큰 GIF를 WebP로 바꾸고, 필요한 에셋을 미리 불러오며, 영상 요소를 재사용하는 방식으로 개선할 수 있습니다.
- React 메모이제이션과 DOM 스타일 직접 변경을 적용하고 CPU 감속 환경에서 확인하면 렌더링 병목을 찾는 데 도움이 됩니다.
소개
토스 디자인 컨퍼런스 Simplicity 사이트를 개발하며 고민한 내용을 공유합니다.
