프론트엔드
Simplicity 4 : 뒤에 개발자 있어요
두줄요약
재사용 가능한 컨퍼런스 구조를 만들기 위해 템플릿 분리, 브라우저 대응, 로드·렌더링 최적화를 진행했습니다. 모바일과 데스크탑 모두에서 자연스럽게 동작하도록 성능과 인터랙션을 다듬었습니다.
문제 상황
- 다음 시즌에도 재사용 가능한 컨퍼런스 구조 필요
- 세션 화면 템플릿화, 시트 기반 세션 수정, 모바일·데스크탑 공통 인터랙션 설계 부담
- 모바일 공식 지원과 다양한 브라우저 대응, 특히 Safari 제약 대응 필요
해결 방법
- 세션 템플릿 요소를 4분할하고 공통 인터랙션 흐름 정의
- 템플릿별 구성 요소 분리 후 애니메이션 전환, 화면 높이와 템플릿에 따른 휴리스틱 위치 계산
- gif를 webp로 교체, 필요한 애셋 순차 프리로드, 연사자 video element 텔레포트로 중복 로드 방지
성능/운영 포인트
- Safari에서 blur 성능 저하를 고려해 배경 이미지 opacity 조정
- React memoization과 직접 스타일 변경으로 불필요한 렌더링 감소
- 프로파일러와 CPU 감속 테스트로 모바일·데스크탑 성능 개선