이 도구에 대해
플레이스홀더란 실제 이미지 로딩이 끝나기 직전 순간에 페이지가 보여주는 것—앞으로 나타날 사진을 흐릿하게 뭉갠 모습이거나 그냥 단색 상자—으로, 레이아웃이 갑자기 튀지 않고 실제 콘텐츠가 이미 로드되고 있는 것처럼 느껴지게 합니다. 이런 "흐릿한 사진" 스타일은 흔히 LQIP(Low-Quality Image Placeholder, 저품질 이미지 플레이스홀더)라고 불립니다. 원본 사진을 겨우 수십 픽셀—긴 변 기준 20~40px면 충분—로 줄인 다음, 원한다면 약간의 블러로 부드럽게 만들고, 이 아주 작은 결과물을 다시 인코딩합니다. 픽셀 수가 워낙 적기 때문에 인코딩할 데이터도 거의 없어서, 결과물은 보통 수백 바이트에서 몇 KB 정도에 불과하며, 별도 파일로 요청하는 대신 base64 데이터 URI로 바로 삽입할 수 있을 만큼 작습니다.
플레이스홀더를 데이터 URI로 삽입한다는 것은 페이지 자체의 HTML이나 CSS 안에 함께 실려 간다는 뜻으로, 실제 사진이 도착하기 전에 무언가를 보여주기 위해 추가 네트워크 요청을 할 필요가 없습니다. 이 아주 작고 살짝 흐릿한 결과물을 CSS로 실제 이미지의 표시 크기까지 늘리면 곧 나타날 사진의 부드러운 미리보기처럼 보이며, 이것이 바로 Medium 같은 사이트와 수많은 상품 사진 갤러리에서 쓰이는 페이드인 로딩 효과의 정체입니다. 아직 원본 사진이 없는 경우—스켈레톤 화면을 만들거나, 대략적인 레이아웃 목업을 만들거나, 사용자가 아직 업로드하지 않은 콘텐츠를 위한 공간을 확보해야 할 때—두 번째 모드로 전환하면 원하는 픽셀 크기로 단색, 그라디언트, 줄무늬 플레이스홀더를 대신 생성할 수 있으며, 다운로드와 복사 가능한 데이터 URI 출력 방식은 동일합니다. 모든 처리는 브라우저에서 로컬로 이루어지며, 어떤 것도 업로드되지 않습니다.
자주 묻는 질문
LQIP 데이터 URI에서 "작다"는 것은 얼마나 작은 건가요?
기본 작은 크기(긴 쪽이 50px 미만)에서의 일반적인 출력은 base64 문자열로 몇백 바이트에서 약 1-2KB 정도입니다 — 페이지에 의미 있는 무게를 더하지 않고 HTML/CSS/JS에 직접 인라인으로 삽입할 수 있을 만큼 작습니다. 이것이 바로 LQIP 기법의 전체 요점입니다: 실제 전체 크기 이미지가 백그라운드에서 로드되는 동안 즉시 무언가를 보여주는 것입니다.
"사진에서" 모드와 "단색/그라데이션" 모드 중 어느 것을 사용해야 하나요?
이미 실제 이미지가 있고 다가올 것을 시각적으로 암시하는 플레이스홀더(실제 콘텐츠의 흐린 미리보기)를 원할 때는 "사진에서"를 사용하세요 — 이는 사용자에게 더 부드럽고 정보가 풍부한 로딩 경험을 제공합니다. 실제 이미지가 알려지거나 준비되기 전에 일반적인 플레이스홀더가 필요할 때(예: 아직 사진이 선택되지 않은 갤러리의 스켈레톤 로딩 상태), 또는 단순히 LQIP보다 더 간단하고 작은 것을 원할 때는 "단색/그라데이션"을 사용하세요.