한국은 저작권법 위반에 대한 형사 고소와 합의금 청구가 유독 활발한 나라로 꼽힌다. 개발 단계에서 무심코 저작권이 있는 사진을 임시로 가져다 쓰다가 실수로 그대로 배포되는 사고를 피하려면, 처음부터 코드로 생성한 대체 이미지를 쓰는 습관이 실질적인 안전장치가 된다.
대체 이미지가 필요한 이유
원하는 크기의 대체 이미지를 넣으면 디자이너나 사진작가의 최종 그래픽을 기다리지 않고도 콘텐츠가 이미지 주변에서 어떻게 배치되는지 바로 확인할 수 있다. 이는 개발 속도를 높이고 레이아웃 작업과 콘텐츠 작업을 동시에 진행할 수 있게 해준다.
lorem ipsum과 같은 역할을, 이미지로
대체 이미지는 레이아웃에 대해 lorem ipsum 텍스트가 단락에 대해 하는 것과 정확히 같은 역할을 한다 — 지금은 내용이 아니라 형태를 봐야 한다는 신호다. 두 도구 모두 같은 문제를 해결한다. 미완성 요소가 실제로 검증하려는 대상에서 시선을 빼앗지 않도록 구성 요소를 채워 넣는 문제다.
실제 이미지 없이 반응형을 테스트하기
다양한 크기와 비율의 대체 이미지는 화면 크기에 따라 레이아웃이 어떻게 반응하는지 확인하는 데 도움이 된다 — 이미지가 정사각형일 때 레이아웃이 무너지지 않는지, 창 크기가 바뀔 때 크롭이 올바르게 동작하는지 등을 검증할 수 있다.
왜 필요한가
- 실제 그래픽이 준비되기 전에 원하는 크기의 이미지로 레이아웃을 빠르게 채운다.
- 다양한 비율의 이미지로 레이아웃의 반응형 동작을 검증한다.
- 최종 콘텐츠를 기다리지 않고 페이지 구조를 클라이언트나 팀에 보여준다.
대체 이미지 형식: SVG와 래스터 이미지
대체 이미지는 래스터 이미지(PNG, JPEG)로 만들 수도 있고, 품질 저하 없이 확대·축소되는 벡터 형식인 SVG로 만들 수도 있다. SVG 대체 이미지는 픽셀 데이터를 저장하는 대신 도형과 텍스트를 기술하기 때문에, 지정한 크기와 상관없이 대개 몇 킬로바이트에 불과하다. 페이지의 로딩 성능을 테스트하기 위해 앞으로 사용할 실제 이미지의 파일 크기를 가깝게 흉내 내야 할 때는 래스터 형식이 더 유용하다.