플레이스홀더 이미지 완벽 가이드 (SVG, LQIP, BlurHash)

용도별 플레이스홀더 선택

SVG 플레이스홀더 (가장 흔한 방법)

와이어프레임과 목업이라면 인라인 SVG가 최선입니다. 무한히 확대되고, 파일이 아주 작으며, CSS로 바꿀 수 있습니다.

<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
  <rect width="400" height="300" fill="#e2e8f0"/>
  <text x="200" y="150" text-anchor="middle" dominant-baseline="middle"
        font-family="sans-serif" font-size="24" fill="#64748b">
    400 × 300
  </text>
</svg>

빠르게 쓰려면 data URI로 src에 바로 넣을 수도 있습니다.

<img src="data:image/svg+xml;utf8,
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'>
    <rect width='400' height='300' fill='%23e2e8f0'/>
  </svg>" alt="플레이스홀더" />

플레이스홀더 서비스 (랜덤 데모 이미지)

진짜 사진처럼 보여야 하는 프로토타입이라면, URL만으로 이미지를 만들어 주는 서비스가 편합니다.

• Picsum Photos — https://picsum.photos/800/600은 지정한 크기의 고품질 랜덤 사진을 돌려줍니다. 라이프스타일, 여행, 제품 프로토타입에 좋습니다.
• Unsplash Source — https://source.unsplash.com/800x600/?nature는 주제에 맞는 사진을 돌려줍니다. 자연, 인물, 음식, 건축, 비즈니스 등이 있습니다.
• Placeholder.com — https://via.placeholder.com/800x600/cccccc/666666?text=Hello 형태로 단색 배경에 텍스트를 올립니다.
• DummyImage.com — Placeholder.com과 비슷하되 포맷과 스타일 옵션이 더 많습니다.

다만 외부 서비스는 운영 환경에 그대로 두면 안 됩니다. 서비스가 멈추면 사이트에 빈 이미지가 남습니다. 프로토타입 단계까지만 쓰세요.

LQIP (저품질 이미지 플레이스홀더)

LQIP는 최종 이미지가 로드되는 동안 보여주는, 아주 작고 흐릿한 버전입니다. Medium이 널리 알린 방식입니다.

<img
  src="tiny-20x15-blurry.jpg"
  data-src="full-1920x1080.jpg"
  style="filter: blur(10px); transition: filter 0.4s;"
  onload="this.src = this.dataset.src; this.style.filter = 'none';"
/>

20×15 픽셀 흐린 이미지는 약 200바이트라 즉시 로드됩니다. 원본이 도착하면 부드럽게 교체됩니다. 페이지에 빈 상자가 한 번도 보이지 않기 때문에 사용자는 더 빠르다고 느낍니다.

BlurHash (현대적인 LQIP)

BlurHash는 흐릿한 미리보기를 20~30자 문자열로 인코딩해 이미지 URL과 함께 데이터베이스에 저장합니다.

/* 업로드 시 한 번만 생성 */
const hash = blurhash.encode(imageData, width, height, 4, 3);
/* → "LKO2?U%2Tw=w]~RBVZRi};RPxuwH" */

/* 이후 계속 플레이스홀더로 사용 */
const canvas = blurhash.decode(hash, 32, 32, 1);

이미지 LQIP보다 나은 점은 세 가지입니다. 텍스트라서 DB에 그대로 들어가고, 별도 파일 요청이 없으며, 기기와 무관하게 같은 플레이스홀더가 나옵니다. Unsplash와 Wolt를 비롯한 여러 서비스가 씁니다.

스켈레톤 로더 패턴

스켈레톤은 이미지가 아니라 콘텐츠의 형태를 미리 보여주는 구조적 힌트입니다.

.skeleton {
  background: linear-gradient(
    90deg,
    #e2e8f0 0%,
    #f1f5f9 50%,
    #e2e8f0 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

시머 움직임은 스피너가 주는 답답함 없이 "불러오는 중"을 전달합니다. 텍스트 블록, 아바타, 카드 껍데기에 쓰고 이미지에는 LQIP와 함께 씁니다.

대표색 플레이스홀더

LQIP보다 더 단순한 방법입니다. 이미지가 로드되는 동안 그 이미지의 대표색을 단색으로 깔아 둡니다. 색은 업로드 시점에 한 번만 뽑으면 됩니다.

<img
  src="photo.jpg"
  style="background-color: #4a5568;"
  width="1200" height="800"
  loading="lazy"
/>

여기서 중요한 것은 width와 height입니다. 이 두 속성이 있어야 브라우저가 자리를 미리 잡아 레이아웃 이동(CLS)이 생기지 않습니다. 플레이스홀더 전략을 무엇으로 고르든 이 속성은 항상 넣으세요.

자주 묻는 질문

어떤 플레이스홀더가 Core Web Vitals에 가장 좋은가요?

어느 것을 쓰든 width와 height를 명시하는 것이 가장 중요합니다. 그것만으로 CLS 대부분이 해결됩니다. 그 다음으로는 별도 요청이 없는 BlurHash나 대표색이 유리합니다.

Picsum 같은 서비스를 운영 환경에 써도 되나요?

권하지 않습니다. 외부 서비스가 느려지거나 멈추면 그대로 영향을 받고, 요청이 하나 더 늘어납니다. 프로토타입까지만 쓰고 배포 전에 교체하세요.

LQIP와 BlurHash 중 무엇을 골라야 하나요?

백엔드를 건드릴 수 있다면 BlurHash입니다. 문자열이라 DB에 들어가고 요청이 없습니다. 정적 사이트처럼 인코딩 단계를 넣기 어렵다면 작은 이미지 LQIP가 더 간단합니다.

SVG 플레이스홀더를 data URI로 넣으면 문제가 없나요?

작은 SVG라면 괜찮습니다. 다만 #은 %23으로 인코딩해야 하고, 큰 SVG를 여러 번 인라인하면 HTML이 무거워집니다. 반복해서 쓴다면 CSS 클래스나 별도 파일이 낫습니다.