이미지 하나 바꾸려고 디자인 툴 켜고, 내보내고, 업로드하고 — 혹시 이 과정을 매번 반복하고 계신가요? 이번 편에서는 웹 빌더 환경에서 이미지 관리가 왜 번거로운지, 그리고 어떤 접근이 이 문제를 근본적으로 해결하는지 이야기합니다.
한국 웹사이트의 특수성 — 이미지로 가득 찬 상품 소개 페이지
해외 쇼핑몰과 달리, 국내 상품 소개 페이지는 상품의 모든 것을 긴 세로형 이미지 하나에 담는 방식이 보편적입니다. 디자이너가 Figma에서 레이아웃을 잡고 이미지로 내보내면 개발자 없이 바로 올릴 수 있으니 빠르고 직관적입니다. 문제는 이 편리함이 생각보다 많은 대가를 요구한다는 점입니다.
1. 속도 문제가 배가된다
웹 빌더는 구조적으로 코드가 무거운데, 여기에 최적화되지 않은 고용량 이미지까지 더해지면 속도 문제는 배가됩니다.
상품 소개 페이지 하나를 로드하는 데 수십 MB의 데이터를 내려받아야 하는 상황이 생깁니다. 이미지가 다운로드될 때까지 웹사이트는 불완전한 형태로, 심하면 아예 보이지 않는 상태로 유지됩니다.
웹 빌더는 고용량 이미지를 제공하기 위한 세밀한 최적화를 온전히 적용하기 어렵습니다. 그 결과, Core Web Vitals 성능에 빨간불이 켜지고 유저들은 웹 사이트에 접속할 때마다 이미지를 기다리는 답답함을 견뎌야 합니다. 앞 게시글인 웹 속도에 관한 글에서 이야기했듯이 WebP 자동 변환이나 글로벌 CDN 같은 이미지 최적화 전략이 국내 웹 사이트 환경에서 필수인 또 다른 이유입니다.
2. 이미지 안에 갇힌 텍스트 — 접근성과 SEO의 함정
구글 봇은 이미지 안에 적힌 글자를 읽지 못합니다.
"최고급 원단 사용", "3중 방수 처리", "무료 반품 가능"상품의 핵심 가치를 담은 문장들이 이미지 파일 안에 들어가는 순간, 검색 엔진에게는 존재하지 않는 내용이 됩니다.
웹 접근성 표준(WCAG)은 이 문제를 보완하기 위한 몇 가지 모범 사례를 제시합니다.
Alt Text (alt 속성)
이미지가 로드되지 않거나 스크린 리더(주로 시각장애인을 위한 음성 지원)가 페이지를 읽을 때 이미지를 대신해 내용을 전달합니다. 구글 봇도 Alt Text를 통해 이미지의 맥락을 파악합니다. 125자 이내로 간결하게, 이미지의 문맥에 맞게 작성하는 것이 원칙입니다. 가장 기본적이면서 SEO에도 직접 영향을 주는 속성입니다. Iqcompress
aria-labelledby / aria-describedby
페이지 내에 이미지와 관련된 텍스트가 이미 존재할 경우, aria-labelledby를 사용해 해당 텍스트와 이미지를 연결할 수 있습니다. 텍스트를 중복 작성하지 않고도 스크린 리더가 올바른 맥락을 파악하도록 돕습니다. 상품명이나 섹션 제목처럼 페이지에 이미 노출된 텍스트를 이미지 설명으로 재활용할 때 유용합니다. w3
<figure> + <figcaption>
이미지와 설명 텍스트를 의미론적으로 묶어주는 HTML5 방식으로, 접근성 표준에서 ARIA보다 우선적으로 권장하는 방법입니다. 이미지 아래에 캡션이 화면에 직접 노출되므로, 스크린 리더뿐 아니라 일반 사용자에게도 맥락을 전달할 수 있습니다. Oregon Department of Education
장식용 이미지 숨기기 (alt="", aria-hidden)
정보를 전달하지 않는 장식용 이미지에는 빈 alt 속성(alt="")이나 aria-hidden="true"를 지정해 스크린 리더가 불필요하게 읽지 않도록 처리하는 것이 권장됩니다. 정보성 이미지와 장식용 이미지를 명확히 구분하는 것 자체가 접근성 설계의 기본입니다. Testparty
3. 이미지 하나 바꾸려면 — 반복되는 수고
수정할 때마다 반복되는 과정
텍스트 몇 글자를 바꾸고 싶어도, 해야 할 일은 다음과 같습니다.
- Figma / Photoshop 열기
- 해당 레이어 찾아 수정
- 이미지 내보내기
- 웹 빌더에서 기존 이미지 삭제
- 새 이미지 업로드
이 과정이 상품마다, 수정마다 반복됩니다. 시즌 이벤트를 진행하려면 수십 개 상품 이미지를 전부 다시 작업해야 하는 경우가 다반사입니다.
쌓이는 이미지 파일들
위에서 웹 빌더에서 기존 이미지 삭제는 필수 단계가 아니라서 무시하는 경우가 많습니다. 그 결과, 업로드를 반복할수록 웹 빌더 스토리지에는 구버전 이미지들이 조용히 쌓입니다. 어떤 파일이 현재 쓰이는지, 어떤 파일이 구버전인지 파악하기 어렵고, 담당자가 바뀌거나 시간이 지나면 아무도 손대기 어려운 상태가 됩니다.
4. 대안 — 이미지에 의존하지 않는 구조로
대안 1: 간단한 디자인은 웹 코드로 작성하기
이미지로 만들어야 했던 많은 것들이 HTML과 CSS만으로 충분히 구현됩니다.
| 이미지 방식 | 코드 방식 | |
|---|---|---|
| 텍스트 수정 | 이미지 재작업 필요 | 한 줄 수정으로 즉시 반영 |
| 검색엔진 인식 | 텍스트 미인식 | 바로 인식 |
| 페이지 속도 | 이미지 용량만큼 느려짐 | 가볍게 유지 |
물론 사진이나 복잡한 그래픽은 여전히 이미지가 필요합니다. 하지만 그 안의 텍스트와 단순한 레이아웃 요소만큼은 코드로 분리하는 것이 속도, 접근성, 유지보수 모두에서 유리합니다.
대안 2: 이미지 해시를 사용한 중복 이미지 검사
이미지 파일마다 고유한 해시값(디지털 지문)을 생성해 두면, 새 이미지 업로드 시 기존 파일과 자동으로 비교할 수 있습니다.
- 중복 파일은 저장하지 않고 기존 파일 재사용
- 현재 실제로 사용 중인 이미지를 명확히 파악
- 스토리지 낭비 방지 및 관리 체계 유지
대안 3: AI OCR을 활용한 이미지 텍스트 자동 추출
이미지를 코드로 전환하기 어려운 경우, AI OCR이 실질적인 보완책이 됩니다. 상품 소개 이미지를 업로드하면 시스템이 자동으로 이미지 안의 문구를 추출해 대체 텍스트 영역에 반영합니다.
담당자가 대체 텍스트를 일일이 작성하지 않아도, 이미지 속 핵심 내용이 SEO와 접근성 두 가지를 자동으로 충족할 수 있습니다.
마치며
| 항목 | 웹 빌더 (이미지 중심) | 모던 웹 개발 전략 |
|---|---|---|
| 텍스트 수정 | 이미지 재작업 필요 | 코드 한 줄 수정 |
| SEO 텍스트 인식 | 미인식 | 직접 인식 |
| 접근성 | Alt Text 수동 작성 | 텍스트 자연 처리 |
| 중복 이미지 관리 | 수동, 파악 어려움 | 해시 기반 자동 검사 |
| 이미지 최적화 | 제한적 | WebP/AVIF 자동 변환 |
| 스토리지 관리 | 구버전 파일 누적 | 중복 제거 자동화 |
이미지로 모든 것을 담으려는 방식은 제작에는 편리하지만, 운영하는 관점에서는 웹 사이트 성능을 저해하고 수고를 요구한다는 측면에서 단점이 뚜렷합니다. 텍스트는 텍스트로, 이미지는 이미지로 역할을 분리하는 것만으로도 속도, 검색 노출, 운영 효율이 눈에 띄게 달라집니다.
이미지가 많은 웹 사이트를 개발해야 하거나 운영하고 있다면 핀오버웹에 문의해 보세요. 개발과 운영의 효율성을 다 잡은 웹사이트를 설계해 드리겠습니다.