SWING 첫 화면 표시 지연 개선

업무 맥락

SWING 홈페이지는 첫 화면이 늦게 보였고 초기 전송 자원도 컸어요. 렌더링 구조와 미디어, 폰트, 외부 콘텐츠가 함께 초기 로딩에 영향을 주고 있었어요.

Next.js 구조를 옮기며 자원별 초기 비용을 줄였어요. 같은 조건의 로컬 모바일 Lighthouse 측정으로 전후를 비교했고, 운영에서 발견한 이미지 첫 변환 지연도 후속 수정했어요.

• Next.js 렌더링 구조
• 미디어·폰트 최적화
• Lighthouse 측정
• 운영 이미지 후속 개선

선택과 구현

1. 01

   첫 화면 표시 경로 단축

   기존 화면에는 클라이언트 렌더링을 기다리는 시간과 큰 초기 자원이 함께 있었어요.

   Pages Router에서 App Router의 서버 우선 구조로 옮기고 한국어·영어 경로를 프리렌더링했어요.

   로컬 프로덕션 빌드에서 한·영 경로와 반응형 상태를 확인했어요.

2. 02

   초기 자원 로딩 시점 조정

   히어로 GIF, 외부 콘텐츠와 여러 폰트 파일이 첫 로딩의 전송량을 키웠어요.

   GIF를 MP4와 WebP 포스터로 바꾸고, 외부 콘텐츠는 화면에 가까워질 때 불러오도록 했어요.

3. 03

   폰트 용량과 굵기 표현의 균형

   regular 글꼴만 쓰는 방식은 점수에서 유리한 경우가 있었지만 원래 디자인의 굵기 표현을 잃을 수 있었어요.

   여러 방식을 비교한 뒤 굵기 표현을 유지하면서 요청을 줄이는 가변 WOFF2 서브셋을 선택했어요.

   폰트만 따로 비교한 로컬 실험에서 요청이 4건에서 1건으로 줄었어요.

4. 04

   빌드 단계의 이미지 변환

   초기 개선 이후 운영에서 이미지가 처음 변환될 때 지연되는 문제가 보였어요.

   요청 시 변환하는 대신 34개 원본에서 106개 반응형 WebP를 빌드 시 생성하고 정적 자원으로 제공했어요.

   후속 로컬 확인에서 이미지 변환 요청과 깨진 이미지 여부를 한·영 경로에서 살폈어요.

기술적 구현

검증과 결과

동일 조건 전후 비교

로컬 프로덕션 빌드의 Lighthouse 모바일 시뮬레이션에서 개선 전 3회, 후 5회 측정한 중앙값을 비교했어요. Performance는 54→95점, 초기 전송량은 19.805→0.488MB였어요.

폰트 선택

같은 로컬 조건에서 5회 측정한 별도 폰트 비교에서 요청 4건·186.9KB가 1건·109.6KB로 줄었어요. 전체 홈페이지 측정과는 다른 비교예요.

이미지 후속 확인

빌드 시 이미지 생성으로 바꾼 뒤 로컬 프로덕션에서 이미지 변환 요청 0건과 한·영 10개 경로의 깨진 이미지 0건을 확인한 기록이 있어요.

이 수치는 로컬 시뮬레이션 결과로 실사용자 성능이나 전환율을 보여 주지 않아요. 여러 변경을 함께 적용한 결과예요.

작업에서 확인한 점

로컬 측정 후 운영에서 이미지 변환 지연을 발견했어요. 변환 작업을 빌드 단계로 옮긴 뒤 다시 확인했어요.

경력 기록과 구현 근거를 바탕으로 정리했어요. 도식은 작업을 설명하려고 재구성한 것으로, 비공개 제품 화면과 데이터는 포함하지 않았어요.