사례: 사내 이미지 문서를 사람도 AI도 읽는 HTML로 — 지엔에이 업무수칙

회사 안에는 이미지 한 장으로만 존재하는 문서가 의외로 많습니다. 업무수칙, 사내 안내문, 조직도, 교육자료 — 디자인 파일은 사라지고 JPG만 메신저와 게시판을 떠돕니다.

사람이 보기에는 문제가 없습니다. 문제는 그 문서를 가지고 무언가를 하려 할 때 생깁니다. 한 줄 인용하려면 손으로 옮겨 적어야 하고, "야근 관련 수칙이 뭐였지" 하고 검색하면 아무것도 걸리지 않으며, AI에게 물어보려 해도 붙여넣을 텍스트가 없습니다.

지엔에이(GNA)의 사내 업무수칙 문서를 예로 들어보겠습니다. 아래 수치는 모두 이 한 건에서 직접 측정한 값입니다.

대상: 사내 업무수칙 안내문

• 「사무실 에티켓 — 지엔에이 업무수칙」
• 레퍼런스 캔버스 853 × 3,612 px, 이미지 파일 1개 600 KB
• 8개 분야에 걸친 수칙 34개가 전부 픽셀 안에 들어 있었습니다.

이미지였을 때 안 되던 것

HTML로 바꾼 뒤

사람에게 달라지는 것

• 드래그해서 그대로 복사됩니다. 공지사항이나 메일에 수칙 한 줄을 옮길 때 다시 타이핑할 필요가 없습니다.
• Ctrl+F 로 찾아집니다. "복장", "보고", "정보보호" 로 바로 해당 항목에 갑니다.
• 글자를 키워도 깨지지 않습니다. 이미지 확대와 달리 텍스트는 몇 배로 키워도 선명합니다.
• 휴대폰에서 읽힙니다. 가로로 밀어가며 볼 필요 없이 화면 폭에 맞춰 접힙니다.
• 화면 낭독기가 읽어줍니다. 이미지 9개에 alt가 붙어 무엇이 담긴 그림인지도 전달됩니다.

AI에게 달라지는 것

여기가 핵심입니다. AI는 화면을 보는 게 아니라 구조를 읽습니다. 이미지를 통째로 넘기면 모델은 글자를 추측해야 하지만, 이 문서는 이제 이렇게 생겼습니다.

h1  지엔에이 사무실 에티켓
h2  근무 태도          → li 7개
h2  인사 및 협동        → li 4개
h2  청결 및 정리정돈     → li 7개
h2  회의 및 보고        → li 4개
h2  복장 및 위생        → li 3개
h2  대외 응대          → li 3개
h2  회사 재산 및 정보보호 → li 3개
h2  기타              → li 3개

어느 수칙이 어느 분야에 속하는지가 태그로 표시되어 있습니다. 그래서 "회의 관련 수칙만 뽑아줘", "복장 규정을 신입 안내문 문장으로 바꿔줘" 같은 요청에 모델이 근거를 짚어 답할 수 있습니다. 사내 문서를 챗봇이나 검색 도구에 넣을 때도 이미지가 아니라 이 HTML을 넣으면 됩니다.

원본 ↔ 재현 결과

여기까지 바꾸면서 보이는 화면은 그대로입니다. 왼쪽이 원본 이미지, 오른쪽이 재구성된 HTML을 캡처한 화면입니다. 두 패널은 같은 진행률로 함께 스크롤됩니다.

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

원본 (이미지 1장) 853×3,612

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

두 캡처 모두 853×3,612 px — 같은 화면, 복사되는 텍스트.

품질 리포트

파일도 가벼워집니다

메신저로 돌려보던 600 KB 이미지가 133 KB짜리 링크 하나로 바뀝니다. 수칙이 바뀌면 이미지를 다시 만들어 다시 뿌릴 필요 없이, 그 페이지의 문장만 고치면 됩니다.

수칙이 바뀔 때 — 여기서 진짜 차이가 납니다

사내 문서는 바뀌는 것을 전제로 존재합니다. 수칙 하나가 추가되고, 문장이 다듬어지고, 담당 부서가 바뀝니다. 이미지 문서에서는 그때마다 아래를 반복해야 합니다.

이 문서는 수칙 34개가 각각 하나의 <li> 로, 8개 분야가 각각 하나의 <h2> 로 들어 있습니다. "청결 및 정리정돈에 항목 하나 추가"는 그 <ul> 안에 줄 하나를 넣는 일이고, 나머지 33개 항목과 레이아웃은 그대로입니다.

가장 큰 변화는 재배포가 사라진다는 점입니다. 이미지 문서는 고칠 때마다 새 파일을 다시 뿌려야 하고, 그러고도 각자 저장해 둔 옛 버전이 계속 돌아다닙니다. HTML 문서는 주소가 하나라 고치는 순간 모두가 최신본을 봅니다. 사내 챗봇이나 검색 도구가 참조하는 원본도 자동으로 함께 최신이 됩니다.

정리

• 사내 이미지 문서는 사람에게는 보이지만 복사·검색·낭독·AI 입력 어느 것도 되지 않습니다.
• 같은 디자인을 유지한 채 HTML로 다시 짜면, 사람은 복사하고 찾을 수 있고 AI는 구조를 짚어 읽습니다.
• 이 사례에서는 수칙 34개와 분야 8개가 태그로 살아났고, 화면은 픽셀 대조를 통과할 만큼 동일합니다.
• 유지보수가 가장 크게 달라집니다. 수칙이 바뀌면 텍스트 한 줄만 고치면 되고, 이미지 재제작도 재배포도 없습니다. 주소가 하나라 모두가 항상 최신본을 봅니다.

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

재구성된 HTML 문서만 열기 ↗ — 열어서 직접 드래그·복사해 보세요.