HTML2WEB / 가이드

Codex가 만든 HTML, 배포 없이 1분 만에 링크로 보내는 법

Codex의 코드 리뷰·구현 계획·UI 목업을 단일 HTML 파일로 만들고, 저장소나 배포 파이프라인 없이 임시 링크로 공유하는 방법입니다.

Codex 작업 공간의 코드와 파일이 하나의 HTML 리포트와 브라우저 링크로 합쳐지는 모습

Codex에게 “완전한 단일 HTML 파일 하나”를 만들게 한 뒤 HTML2WEB에 올리면, 배포 없이도 브라우저 링크로 결과를 보낼 수 있습니다. 핵심은 Codex가 기존 소스를 고치지 않고 공유 산출물만 만들게 하고, 게시 전에 근거·모바일 화면·비밀정보를 확인하는 것입니다.

Codex 결과가 저장소 밖에서 읽히기 어려운 이유

Codex는 코드를 이해하고 수정하고 검토하는 작업에 강합니다. 개발자는 diff, 커밋, 터미널 결과만으로도 맥락을 읽을 수 있습니다. 하지만 PM, 디자이너, 고객에게 git difflocalhost:3000을 보내는 것은 좋은 인계가 아닙니다.

단일 HTML 리포트는 다음 간극을 메웁니다.

  • 브라우저만 있으면 열 수 있습니다.
  • 요약, 표, 근거와 시각적 우선순위를 한 화면에 담을 수 있습니다.
  • 저장소나 개발 서버 권한을 상대에게 주지 않아도 됩니다.
  • 검토가 끝나면 링크가 만료됩니다.

HTML은 코드 변경 그 자체가 아니라 “사람이 검토하기 위한 산출물”로 다룹니다.

1. Codex에 공유용 파일만 만들게 합니다

아래 프롬프트를 복사하고 [내용]을 실제 작업으로 바꾸세요.

다음 작업 결과를 공유용 단일 HTML 파일로 정리해줘.
저장 경로: ./review/report.html

작업 경계:
- 기존 소스 파일은 읽기만 하고 수정하지 말 것.
- ./review/report.html 한 파일만 새로 만들 것.
- 발견한 버그를 이 작업에서 고치지 말고 리포트에 기록할 것.

내용:
- [이번 변경의 코드 리뷰 결과 또는 구현 계획]
- 맨 위에 결론 3~5줄과 다음 행동 3개.
- 범위와 제외 범위, 확인한 방법을 명시.
- 주장마다 실제 파일경로:줄번호를 근거로 표시.
- 확인하지 못한 내용은 "미확인", 근거 없는 계획은 "가정"으로 표시.
- 코드를 읽지 않는 PM과 디자이너가 이해할 말로 설명.

파일 요건:
- <!doctype html>부터 </html>까지 완전한 문서.
- CSS와 작은 JavaScript는 파일 안에 인라인.
- 외부 CDN, 웹폰트, 상대 경로 이미지, 빌드 도구 금지.
- header, main, section, article, footer를 의미에 맞게 사용.
- 표에 caption과 th scope를 포함.
- 360px 너비에서 가로 레이아웃이 깨지지 않게 할 것.
- html lang="ko", 의미 있는 title, 이미지 alt, 키보드 포커스를 포함.
- 시스템 폰트 사용, 전체 파일 1MB 이하.

보안:
- API 키, 토큰, 비밀번호, 접속 문자열, 개인정보, 고객 데이터,
  내부 호스트명과 사내 URL을 넣지 말 것.
- 꼭 필요한 예시는 <redacted>로 가공.
- 완성 후 비밀정보 후보와 외부 자산 경로를 다시 검사해 보고.

OpenAI의 Codex 문서에서 Codex의 현재 제품 표면과 사용법을 확인할 수 있습니다. 반복해서 같은 형식의 리포트를 만든다면 저장소의 AGENTS.md에 공유 산출물 규칙을 적을 수 있습니다. Codex는 작업을 시작할 때 적용 범위에 있는 지침을 읽습니다.

2. 내용과 화면을 로컬에서 확인합니다

변경 범위를 먼저 봅니다

git status --short로 기존 코드가 함께 수정되지 않았는지 확인합니다. 리포트 생성과 버그 수정이 섞이면 검토 대상과 검토 결과의 경계가 사라집니다.

git status --short
open review/report.html

공유용 파일을 저장소에 남기지 않을 계획이라면 작업이 끝난 뒤 추적 대상에서 제외합니다. 이미 추적 중인 파일을 무심코 지우거나 .gitignore로 숨기지는 마세요.

화면과 접근성을 확인합니다

MDN HTML 요소 문서를 기준으로 제목 순서, 표 헤더, 링크, 이미지 대체 텍스트를 확인합니다. 브라우저 개발자 도구에서 폭을 360px로 줄이고 Tab 키만으로 링크를 이동해 봅니다.

  • 요약이 첫 화면에 보이는가?
  • 표와 코드가 좁은 화면에서 읽히는가?
  • 색만으로 심각도를 구분하지 않는가?
  • 근거 링크와 파일경로:줄번호가 실제로 맞는가?
  • 콘솔에 빨간 오류가 없는가?

비밀정보 후보를 찾습니다

grep -nEi 'api[_-]?key|secret|token|password|bearer|-----BEGIN' review/report.html
grep -nEo '(src|href)="[^"]+"' review/report.html
ls -lh review/report.html

이 명령은 이메일, 실제 고객 이름, 스크린샷 속 정보까지 모두 찾지 못합니다. 마지막 검토는 사람이 해야 합니다.

3. 임시 URL로 바꿉니다

파일이 준비됐다면 HTML2WEB의 HTML-to-URL 도구에 올리거나 HTML을 붙여넣습니다. 로그인 없는 무료 경로는 1MB까지 지원하고, 30분·1시간· 24시간 만료 중에서 선택합니다. 기본은 1시간이며 공유 결과물에는 기본 noindex가 적용됩니다.

회의 중 함께 볼 자료라면 30분, 오늘 안에 의견을 받을 자료라면 24시간이 편합니다. 게시 결과는 시크릿 창에서 열고 수신자에게 만료 시각을 함께 알려주세요.

다른 AI 도구로 만든 파일도 같은 방식으로 검토하려면 AI HTML 미리보기 가이드를 참고할 수 있습니다.

공유 뒤 깨지는 네 가지 이유

이미지와 CSS가 로컬 경로를 봅니다

./assets/chart.png./style.css는 작성자의 컴퓨터에만 있습니다. 단일 파일 안에 스타일을 넣고, 이미지는 공개 HTTPS URL이나 작은 인라인 SVG로 바꿉니다.

CDN이 막혔습니다

사내망에서는 외부 JavaScript와 폰트 CDN이 차단될 수 있습니다. 처음 검토할 파일은 외부 네트워크 의존성을 최소화합니다.

Base64 이미지가 용량을 채웠습니다

스크린샷 여러 장을 인라인하면 1MB를 넘기 쉽습니다. 비교에 필요한 이미지만 남기고 나머지는 표와 설명으로 바꿉니다.

HTML이 Markdown 코드 펜스 안에 갇혔습니다

Codex가 HTML을 .md 파일의 코드 블록으로 저장했다면 브라우저 페이지가 아니라 코드로 보입니다. 완전한 HTML 문서를 .html 파일로 저장하게 다시 요청합니다.

공유 리포트와 코드 수정은 분리합니다

코드 리뷰 리포트를 만들면서 발견한 문제까지 고치게 하면 변경 파일과 설명이 같은 작업에 섞입니다. 먼저 읽기 전용 분석과 리포트를 만들고, 사람이 검토한 뒤 수정 작업을 별도로 시작하세요.

Codex가 만든 리포트를 Git에 커밋할 필요도 항상 있는 것은 아닙니다. 계속 유지할 원본이라면 Markdown으로 관리하고 HTML은 필요할 때 재생성하는 편이 diff를 읽기 쉽습니다.

임시 링크와 정식 배포의 경계

목적 임시 HTML 링크 정식 배포
수명 30분~24시간 지속 운영
대상 리뷰 리포트, 계획, 목업 제품 페이지, 문서 사이트
검색 기본 noindex 필요에 따라 색인
운영 단일 파일 검토 도메인, 버전, 모니터링

고객에게 계속 남겨야 할 URL, 사용자 입력, 고정 도메인과 검색 유입이 필요하면 정식 호스팅을 선택합니다.

비밀번호는 링크 유출에 대한 보조 경계입니다. API 키, 개인정보와 고객 데이터는 비밀번호 유무와 관계없이 게시하지 않습니다.

자주 묻는 질문

Codex 앱·CLI·IDE에서 만든 파일이 모두 가능한가요?

최종 결과가 완전한 .html 또는 .md 파일이거나 복사 가능한 본문이면 같은 게시 흐름을 사용할 수 있습니다.

Markdown 그대로 올려도 되나요?

됩니다. 표와 코드 블록 위주의 편집 가능한 문서라면 Markdown이 더 단순합니다. 시각적 비교와 레이아웃이 필요할 때 HTML을 선택합니다.

만료 전에 내용을 고칠 수 있나요?

게시 후 받은 관리 링크를 보관했다면 같은 공유를 수정하거나 삭제할 수 있습니다. 관리 링크와 토큰은 열람 URL과 분리해 보관하고 공개 채널에 붙여넣지 마세요.

링크가 만료되면 되살릴 수 있나요?

원본 파일로 새 링크를 만들 수 있지만 만료된 주소를 영구 주소처럼 사용해서는 안 됩니다. 반복해서 필요하다면 정식 호스팅으로 옮깁니다.

이 글의 목차