모바일 청첩장 만들기 (3) - 이미지 최적화와 성능 개선

공백 기간과 디자인 통일

MVP(10/25)와 UX 개선(10/26~28) 이후 약 3주간의 공백이 있었다. 11/18에 다시 손을 댄 첫 작업은 색상 톤 통일이었다.

1bd2734 전체적인 색상 톤을 부모님 배경 색상으로 통일

부모님 섹션에서 사용한 배경 색상이 전체 청첩장의 톤과 잘 어울려서, 이걸 기준으로 모든 섹션의 색상을 맞첄다. Rose 계열의 따뜻한 톤으로 통일하니 훨씬 일관성 있는 느낌이 됐다.

컴포넌트를 이미지로 대체한 이유

12/14, 다소 독특한 결정을 했다.

181fb2d 일부 컴포넌트를 이미지로 대체

일부 복잡한 레이아웃의 섹션을 HTML/CSS 대신 이미지로 대체했다. 이유는 단순하다.

1. 디자인 정밀도: CSS로 구현하기 어려운 세밀한 타이포그래피나 레이아웃을 이미지로 대체하면 픽셀 퍼펙트한 결과를 얻을 수 있다.
2. 개발 시간 절약: 한 번만 쓰이는 장식적 섹션에 시간을 쓰느니, 이미지 하나로 해결하는 게 효율적이다.
3. 반응형 처리: width: 100%로 설정하면 이미지가 알아서 비율을 맞춘다.

물론 트레이드오프도 있다. 텍스트 검색이 안 되고, 접근성이 떨어지고, 수정할 때 이미지를 다시 만들어야 한다. 하지만 모바일 청첩장의 특성상 이런 단점이 크게 문제되지 않았다.

이미지 형식 최적화: JPEG에서 WebP로

ee7a394 이미지 형식 최적화

메인 사진들을 JPEG에서 WebP로 변환했다. 결과가 극적이었다.

평균 50% 이상의 용량 감소를 얻었다. 모바일에서 로딩 속도가 체감될 정도로 빨라졌다.

sharp 패키지를 추가해서 빌드 과정에 이미지 최적화를 포함시켰다.

LQIP: 저품질 이미지 먼저 보여주기

aaa6092 저품질 이미지를 먼저 로드하는 LQIP 추가

LQIP(Low Quality Image Placeholder)는 고해상도 이미지가 로드되기 전에 극히 작은 저품질 이미지를 먼저 보여주는 기법이다. Medium의 이미지 로딩에서 익숙한 그 블러 효과다.

ProgressiveImage 컴포넌트

const ProgressiveImage = ({ lqip, src, alt, ...props }) => {
  const [loaded, setLoaded] = useState(false);
 
  return (
    <div className="relative">
      <img src={lqip} alt={alt} className="blur-lg" {...props} />
      <img
        src={src}
        alt={alt}
        onLoad={() => setLoaded(true)}
        className={`absolute inset-0 transition-opacity duration-500
          ${loaded ? 'opacity-100' : 'opacity-0'}`}
        {...props}
      />
    </div>
  );
};

LQIP 이미지는 극도로 작다. 메인 사진의 LQIP는 742바이트에 불과하다. 이 작은 이미지를 블러 처리해서 먼저 보여주고, 원본이 로드되면 페이드인으로 교체한다.

각 메인 사진에 대해 1-lqip.webp, 2-lqip.webp 같은 LQIP 파일을 별도로 생성해두다.

폰트 선택과 적용

b77ab6d 폰트 적용
365ff4d italic체 제거
bc1cc77 border radius 제거

청첩장의 분위기에 맞는 폰트를 선택하는 건 생각보다 시간이 걸렸다. 결혼식 청첩장에는 세리프(Serif) 계열이 잘 어울린다. 우아하고 격식 있는 느낌을 주기 때문이다.

적용 후에는 불필요한 이탤릭체와 보더 라디우스를 제거하면서 디자인을 정리했다. "덜어내는" 작업도 디자인의 일부다.

모바일 성능 최적화 체크리스트

이 시기의 작업을 정리하면 이런 최적화 체크리스트가 된다.

• 이미지 형식 변환 (JPEG → WebP)
• LQIP 적용 (블러 → 선명 전환)
• 색상 톤 통일로 디자인 일관성 확보
• 불필요한 CSS 속성 제거
• 적절한 웹폰트 선택과 적용

모바일 청첩장에서 로딩 속도는 곧 사용자 경험이다. 하객들이 카카오톡 링크를 클릭했을 때, 느린 로딩으로 기다리게 만들면 안 된다. WebP 변환과 LQIP만으로도 체감 성능이 크게 개선되었다.

다음 편에서는 친구 커플과 가족의 피드백을 반영하고 버그를 수정한 이야기를 다룬다.