사례: 통이미지 상세페이지를 일본어 HTML로 — REBEAUTY EMS Brush Air mini

한국 뷰티 브랜드 REBEAUTY의 EMS Brush Air mini 일본어 상세페이지를 HTML로 재구성한 사례입니다. 원본은 세로로 긴 한 장의 이미지였고, 결과는 텍스트·이미지·레이아웃이 분리된 실제 웹페이지입니다. 아래 수치는 모두 이 한 건에서 실제로 측정한 값입니다.

원본

• 레퍼런스 캔버스 800 × 9,371 px — 한 화면에 담기지 않는 세로 긴 통이미지
• 이미지 파일 1개, 1.4 MB
• 제목·본문·가격·후기까지 페이지의 모든 글자가 픽셀입니다. 검색도, 복사도, 번역도, 수정도 되지 않습니다.

재구성 결과

원본 ↔ 재현 결과

왼쪽이 원본 통이미지, 오른쪽이 재구성된 HTML 페이지를 그대로 캡처한 화면입니다. 두 패널은 같은 진행률로 함께 스크롤됩니다.

원본 ↔ 결과 HTML 보기 새 창에서 열기 ↗ 오른쪽 패널의 글자는 드래그·복사됩니다

원본 (통이미지 1장) 800×9,371

재현 결과 (라이브 HTML) 드래그·복사 가능

렌더링 높이가 양쪽 모두 9,371 px 로 일치합니다 — 위 품질 리포트의 height ×1.000 이 이 값입니다.

품질 리포트

재현 결과를 원본과 픽셀 단위로 대조한 값입니다.

전송량

합계 기준으로도 3분의 1 이하지만, 실제 체감은 더 큽니다. 통이미지는 1.4 MB를 한 번에 내려받아야 화면이 뜨는 반면, 재구성된 페이지는 48 KB짜리 문서가 먼저 그려지고 이미지는 화면에 들어올 때 하나씩 불러오기 때문입니다.

내용이 바뀔 때 — 유지보수가 달라집니다

상세페이지는 한 번 만들고 끝나지 않습니다. 시즌 가격, 프로모션 문구, 배송 안내, 성분 표기 — 바뀌는 건 거의 항상 '글자 몇 줄'입니다. 그런데 통이미지에서는 글자 한 줄을 고치려면 이미지 전체를 다시 만들어야 합니다.

이 페이지는 103개 텍스트 블록이 각자 제자리에 태그로 놓여 있습니다. "45%"를 "60%"로 바꾸는 일은 그 블록 하나를 고치는 것으로 끝나고, 나머지 레이아웃·이미지·간격은 손댈 필요가 없습니다.

Gumson의 텍스트 편집 모드는 이 지점을 그대로 도구로 만든 것입니다. 변환 결과 화면에서 글자만 뽑아 폼으로 보여주고, 고쳐서 저장하면 원래 자리에 되돌려 넣습니다. 태그 구조와 CSS는 건드리지 않으므로 디자인이 틀어질 걱정이 없습니다.

무엇이 달라지나

• 검색된다 — 865자가 실제 텍스트라 검색엔진과 답변엔진이 읽습니다. 이미지 속 글자는 색인되지 않습니다.
• 번역된다 — 텍스트 블록만 바꾸면 됩니다. 레이아웃을 다시 만들 필요가 없어 언어를 늘리는 비용이 거의 들지 않습니다.
• 수정된다 — 가격이나 문구 한 줄을 고치는 데 원본 디자인 파일도, 디자이너도 필요하지 않습니다.
• 읽어준다 — 화면 낭독기가 내용을 읽고, 사용자가 글자 크기를 키울 수 있습니다.
• 수정 비용이 사라집니다. 가격·문구가 바뀌어도 이미지를 다시 만들 필요 없이 그 텍스트 블록만 고치면 되고, 언어를 늘려도 레이아웃을 다시 만들지 않습니다.

직접 비교해 보기

원본 캡처와 재현 결과를 나란히 놓고 같은 배율·같은 진행률로 함께 스크롤하며 확인할 수 있습니다.

원본 ↔ 재현 결과 나란히 보기 ↗

재구성된 HTML 페이지만 열기 ↗