문제 상황

카드 관리 페이지(/manage-my-card)에서 Swiper를 사용한 카드 슬라이드를 구현했습니다. 새로운 디자인 이미지를 전달받아 적용하는 과정에서 사용자 조작 시 버벅거림이 심해지는 성능 문제를 발견했습니다.

증상

• 사용자 경험: 카드 전환 시 눈에 띄는 버벅거림
• 슬라이드 전환 시 심한 Frame Drop 현상
• 특히 저사양 기기에서 사용 불가 수준
• Android LogFilter에서 Repainting 경고 감지 ⚠️

핵심 질문

“같은 이미지인데, 포맷(SVG vs PNG)과 렌더링 방식(background vs img tag)에 따라 성능이 달라질까?”

이 질문에 답하기 위해 체계적인 성능 테스트를 진행했습니다.

테스트 설계

테스트 조합

4가지 조합을 비교 테스트했습니다:

측정 지표

• 평균 FPS
• 최저 FPS
• Frame Drop (횟수 및 비율)
• Jank Score (ms)
• Jank Score per second (ms)

💡 초기에는 Core Web Vitals(LCP, FID, CLS)도 고려했으나, 슬라이드 전환 성능 측정에는 프레임 기반 지표가 더 적합하다고 판단하여 제외했습니다.

테스트 방식

초기 접근

Claude를 활용해 4가지 조합(PNG/SVG × img/background)을 한 페이지에서 비교할 수 있는 테스트 페이지를 빠르게 작성했습니다.

테스트 결과 정량화를 위해 FPS를 이용하여 jankScore를 도출해 비교 하였습니다.

jankScore 계산식:

const targetFrameTime = 16.67;  // 60fps 기준 프레임 시간 (ms)

if (delta > targetFrameTime) {
  const jank = delta - targetFrameTime;
  jankScore += jank;
}

설명:

• targetFrameTime: 60fps 기준 한 프레임당 목표 시간 = 16.67ms (1000ms / 60)
• delta: 실제 프레임 간 경과 시간
• jank: 목표 시간을 초과한 시간 = delta - 16.67ms
• jankScore: 모든 초과 시간의 누적 합계 (ms)

1차 개선: 극한 조건 적용

초기 테스트에서는 조합 간 성능 차이가 뚜렷하게 나타나지 않았습니다. 실제 사용 환경보다 가혹한 조건에서 병목을 드러내기 위해 다음 요소를 추가했습니다:

• 다중 카드 동시 렌더링 (카드 수 증가)
• box-shadow, filter: blur() 등 GPU 부하 효과
• transform, opacity 애니메이션 적용

2차 개선: 스크롤 연동 테스트로 전환

극한 조건 적용 후에도 정적 상태에서는 차이가 미미했습니다. 그러나 스크롤 동작 시 프레임 드롭이 급격히 증가하는 것을 확인했습니다. 실제 Swiper 사용 패턴을 반영하여, 스와이프 동작마다 스크롤이 함께 발생하도록 테스트를 설계했습니다.

최종 테스트 시나리오

1. 테스트 방식(이미지 포맷 + 렌더링 방식) 설정 후 “테스트 적용” 클릭
2. “측정값 초기화” 클릭 후 “자동 테스트 시작” 클릭
3. 자동으로 스와이프 50회 수행 (매 스와이프마다 스크롤 연동)
4. 측정 종료 후 결과 확인 및 기록
5. 각 조합별 3회 반복 → 평균값 산출

💡 스와이프와 스크롤을 연동한 이유: 실제 카드 관리 페이지에서는 카드 전환 시 화면 스크롤이 함께 발생합니다. 스크롤은 reflow/repaint를 지속적으로 유발하여 렌더링 방식 간 성능 차이를 명확히 드러냅니다.

테스트 환경

Device 1: Galaxy A16

• OS: Android 16
• Browser 1: Samsung Internet 29
• Browser 2: Google Chrome 143

Device 2: iPhone 11 Pro

• OS: iOS 18.5
• Browser: Safari

Device 3: Redmi Note 13

• OS: 2.0.208
• Browser 1: Mi Browser 14.48.2
• Browser 2: Google Chrome 143

테스트 구현

performance-test.html

Case 1. PNG + <img> tag

<div class="card png-img">
  <img src="/img/card/img_nfc@2x.png"
       srcset="/img/card/img_nfc.png 1x,
               /img/card/img_nfc@2x.png 2x,
               /img/card/img_nfc@3x.png 3x"
       alt="Card">
  <div class="card-content">
    <div class="card-number">1234 5678 9012 3456</div>
    <div class="card-name">Athens Metro Card</div>
  </div>
</div>

Case 2. PNG + CSS Background

<div class="card png-bg" style="background-image: url(/img/card/img_nfc@2x.png);">
  <div class="card-content">
    <div class="card-number">1234 5678 9012 3456</div>
    <div class="card-name">Athens Metro Card</div>
  </div>
</div>

Case 3. SVG + <img> tag

<div class="card svg-img">
  <img src="/img/card/img_nfc.svg" alt="Card">
  <div class="card-content">
    <div class="card-number">1234 5678 9012 3456</div>
    <div class="card-name">Athens Metro Card</div>
  </div>
</div>

Case 4. SVG + CSS Background

<div class="card svg-bg" style="background-image: url(/img/card/img_nfc.svg);">
  <div class="card-content">
    <div class="card-number">1234 5678 9012 3456</div>
    <div class="card-name">Athens Metro Card</div>
  </div>
</div>

테스트 결과

image.png

Device 1 - Samsung Internet

Device 1 - Google Chrome

Device 2 - Apple Safari

Device 3 - Mi Browser

Device 3 - Google Chrome

결과 요약

핵심 발견

• SVG는 매 프레임 재계산으로 인해 스크롤/애니메이션 시 성능 저하 심각
• PNG는 디코딩 후 GPU 캐시를 활용하여 일관된 성능 유지
• Samsung Internet이 Chrome 대비 SVG 처리 성능이 현저히 낮음
• Mi Browser가 예상보다 성능이 좋다(?)

결론 및 적용

선택한 방식: PNG + CSS background (image-set)

테스트 결과 PNG + img tag가 가장 좋은 성능을 보였으나, 다음 이유로 PNG + CSS background를 선택했습니다:

• Side-effect 최소화: 기존 마크업 구조 유지
• 성능 차이 수용 가능: img tag와 background 간 실사용 체감 차이 미미
• 반응형 대응: image-set으로 DPI별 이미지 자동 선택

개선 결과

• 카드 전환 시 버벅거림 해소
• Android 저사양 기기에서도 원활한 사용 가능
• Repainting 경고 해소

참고: 기술적 분석

SVG 렌더링 과정

flowchart LR
  A[XML 파싱] --> B[DOM 트리 생성]
  B --> C[Style 계산]
  C --> D[Path 계산]
  D --> E[Rasterization]
  E --> F[GPU 전송]
  F --> G[Composite]

PNG 렌더링 과정

flowchart LR
  A[PNG 파일 로드] --> B[디코딩]
  B --> C[픽셀 버퍼 생성]
  C --> D[색상 변환]
  D --> E[GPU 텍스처 업로드]
  E --> F[Composite]

핵심 차이:

• SVG는 매 프레임마다 파싱 → Path 계산 과정 반복
• PNG는 최초 한 번만 디코딩, 이후 GPU 캐시 사용

CSS background vs img tag

background-image 처리 과정

flowchart LR
  A[Style 재계산] --> B[Repaint 대상 결정]
  B --> C[이미지 로드]
  C --> D[디코딩]
  D --> E[Rasterization]
  E --> F[Paint]
  F --> G[GPU 업로드]
  G --> H[Composite]

img tag 처리 과정

flowchart LR
  A[HTML Parsing] --> B[DOM Tree 생성]
  B --> C[CSSOM 생성]
  C --> D[Render Tree 생성]
  D --> E[Layout]
  E --> F[이미지 로드]
  F --> G[디코딩]
  G --> H[Rasterization]
  H --> I[Paint]
  I --> J[GPU 업로드]
  J --> K[Composite]

실제 차이:

• background-size: cover, background-position 고정 시 성능 차이 미미
• Modern browser는 background도 별도 레이어로 최적화