텍스트 이미지를 HTML 시각 자료로 변환

텍스트 이미지를 HTML 시각 자료로 변환은(는) 무엇을 하나요?

목적

텍스트 위주의 참조 이미지를 더 명확하고 유용한 HTML 시각 자료로 변환합니다. 원본 사실을 유지하고, 표현을 개선하며, 정보 구조를 재설계한 후 사용자의 확인을 거쳐 고해상도 스크린샷만 내보냅니다.

워크플로우

1. 원본 파악

   • 제출된 이미지를 시각적으로 검사합니다.
   • 엔터티, 레이블, 숫자, 카테고리, 비교, 결론, 주의사항, 원본 브랜드 텍스트를 추출합니다.
   • 핵심 사실과 장식 텍스트, 워터마크, 플랫폼 브랜딩, 중복 레이블, 레이아웃 아티팩트를 분리합니다.
   • OCR이 신뢰할 수 없는 경우, 보이는 정보를 수동으로 필기하고 불확실한 필드는 표시합니다.

2. 출물 의도 정의

   • 대상 독자와 읽기 맥락(소셜 이미지, 기사 그래픽, 영업 비교, 내부 보고서, 제품 카드, 체크리스트, 대시보드 등)을 추론합니다.
   • 최적의 출력 형태가 결정 페이지인지, 비교 표인지, 인포그래픽인지, 요약 카드인지, 보고서 페이지인지, 혹은 캐러셀형 긴 페이지인지 판단합니다.
   • 사용자가 명시적으로 충실한 재현을 요청하지 않는 한, 참조 레이아웃을 단순히 복제하지 않습니다.

3. 카피 재작성

   • 중요한 사실, 숫자, 제품명, 제한 사항, 위험 노트, 주의사항을 보존합니다.
   • 밀도 높은 표현을 간결한 사용자 지향 문장으로 재작성합니다.
   • "결론 + 조건 + 주의사항" 구문을 선호합니다.
   • 페이지를 스캔하기 쉽게 만들 때 "최적", "주의", "핵심 장점", "제한", "가격 예시", "의사 결정 포인트"와 같은 명시적 레이블을 사용합니다.
   • 법률, 의료, 보험, 금융, 규정 준수에 민감한 주장은 보수적으로 유지합니다. 원본에서 뒷받침되지 않는 권장 사항을 만들어내지 않습니다.

4. 정보 구조 재설계

   • 가장 중요한 결론을 먼저 배치합니다.
   • 밀도 높은 비교를 위해 상단 요약 또는 "선택 방법" 섹션을 추가합니다.
   • 항목별 포지셔닝을 위해 제품/엔터티 카드를 사용합니다.
   • 상세 표 앞에 핵심 차이점 섹션을 배치합니다.
   • 요약 뒤에 상세 매트릭스를 배치하고, 요약 앞에 배치하지 않습니다.
   • 사용자가 완전한 아카이브를 필요로 하지 않는 한, 모든 옵션이 동일한 행은 중요도를 낮춥니다.

5. HTML 구축

   • 사용자가 프레임워크를 요청하지 않는 한, 독립 실행형 HTML 파일을 생성합니다.
   • 스크린샷에 적합한 CSS를 사용합니다. 고정 내보내기 너비, 안정적인 그리드 치수, 높은 대비, 읽기 쉬운 글꼴 크기, 충분한 행 간격.
   • 가독성을 떨어뜨리는 장식 요소는 피합니다.
   • 사용자가 유지해 달라고 요청하지 않는 한, 원본 플랫폼 브랜딩, 워터마크, 관련 없는 참조 레이블을 제거합니다.
   • 생성된 HTML을 편집 가능하고 자체 포함되도록 유지합니다.

6. 최종 스크린샷 전 확인

   • HTML 경로 또는 미리보기 상태를 공유합니다.
   • 구조와 주요 카피/디자인 결정 사항을 요약합니다.
   • 사용자가 HTML 방향을 아직 승인하지 않은 경우, 최종 고해상도 스크린샷을 생성하기 전에 확인을 요청합니다.
   • 사용자가 명시적으로 "직접 스크린샷" 또는 "바로 최종으로 가기"를 요청한 경우 확인을 건너뛸 수 있습니다.

7. 고해상도 스크린샷 내보내기

   • Chrome을 사용할 수 있을 때 scripts/export_highres_screenshot.py를 사용합니다.
   • 밀도 높은 텍스트의 경우 넓은 내보내기 치수를 선호합니다.
     • 표준: 너비 2200-2600, 배율 2
     • 매우 밀도가 높은 경우: 너비 2800-3200, 배율 2
   • PNG로 내보낸 후 하단 공백을 자릅니다.
   • 치수를 확인하고 출력물을 시각적으로 검사합니다.

디자인 규칙

• 픽셀 유사성이 아닌 첫눈에 이해할 수 있도록 디자인합니다.
• 계층 구조 사용: 헤드라인, 결론 카드, 항목 카드, 핵심 차이점, 상세 표.
• 숫자와 제한 사항을 시각적으로 찾을 수 있게 만듭니다.
• 색상을 의미론적으로 사용합니다.
  • 초록: 상대적 장점.
  • 주황색 또는 브랜드 색상: 핵심 차이점.
  • 빨간색: 제한, 예외 또는 위험.
• 셀당 더 적은 단어를 사용합니다. 셀에 많은 단어가 필요한 경우 설명을 핵심 차이점 카드로 옮깁니다.
• 하나의 거대하고 밀도 높은 표가 전체 아티팩트가 되는 것을 피합니다.
• 스크린샷 작업의 경우, 이미지 업스케일링에 의존하기보다 내보내기 전에 HTML 캔버스 너비와 글꼴 크기를 늘립니다.

카피 규칙

재작성 예시:

• 밀도 높음: "10年保证续保：医保内医疗费/质子重离子；非保证续保：医保外医疗费/癌症外购药/重疾特需"

• 명확함: "医保内医疗费、质子重离子可 10 年保证续保；医保外、外购药和重疾特需不保证续保。"

• 밀도 높음: "30天，意外伤害无等待期"

• 명확함: "等待期 30 天；意外伤害无等待期。"

• 밀도 높음: "医保内：5000元；医保外：1万"

• 명확함: "医保内一般医疗免赔 5000 元；医保外免赔 1 万。"

필수 검증

전달 전:

• 중요한 원본 사실이 누락되지 않았는지 확인합니다.
• 요청 시 원본 브랜드/플랫폼 텍스트가 제거되었는지 확인합니다.
• 긴 단어와 밀도 높은 중국어 줄이 겹치지 않는지 확인합니다.
• HTML이 의도한 스크린샷 너비에서 작동하는지 확인합니다.
• 최종 PNG 치수와 파일이 존재하는지 확인합니다.
• 스크린샷을 생성하는 경우, 스크린샷 경로를 포함하고 가능하면 인라인으로 렌더링합니다.

간결한 체크리스트는 references/visual-html-checklist.md를 참조하세요.