HTML 화면을 코딩 AI에 넘기는 법
코딩 AI에 넘기는 건 화면 HTML입니다. ZIP이나 코딩 도구로 보내되, 화면 목록은 사람이 확인해야 합니다. 운영 앱이 아닙니다.
코딩 AI에 넘기는 건 화면 HTML입니다. 돌아가는 앱이 아닙니다. 화면 한 장이 HTML 한 장이고, AI는 그 파일을 보고 코드를 짜기 시작합니다. 다만 화면이 빠졌는지는 AI가 모릅니다. 목록은 사람이 확인해야 합니다.
캡처 PNG만 던지면 같은 질문이 돌아옵니다. 「이 화면이 몇 장이죠?」 HTML이면 장수가 파일 개수로 보입니다. 그래도 이름과 순서가 맞는지, 기능정의가 비었는지는 열어 봐야 해요.
이 글은 2026년 9월, 라이브 화면설계의 중고 거래 앱 공개 화면 여섯 장을 열어 보고 정리한 정찰 기록입니다. 개발사에 넘기는 문서 다섯 종과 길을 섞지 않습니다. 여기서는 코딩 AI에게 HTML을 넘기는 일만 다룹니다.
넘기는 길은 두 가지입니다
화면을 고친 뒤에는 길이 갈립니다. ZIP으로 내려받거나, 코딩 도구에 연결해 내 프로젝트로 저장하거나. 둘 다 운영 코드가 아닙니다.
| 경로 | 무엇이 가나 | 누가 만드나 |
|---|---|---|
| 개발 패키지 ZIP | 화면 HTML + 기능정의 MD + README | 내려받은 사람이 AI에게 폴더를 줌 |
| 코딩 도구 연결 | 화면 HTML·기획·정보구조를 내 프로젝트에 저장 | 커서·클로드 코드·코덱스·그록 빌드의 모델 |
ZIP은 기획 묶음이고, 코딩 도구 연결은 저장 통로예요. 내용은 그 도구의 모델이 만들고 클라비는 저장만 합니다. 클라비 포인트는 쓰지 않습니다. 설정은 대시보드 모델 > 코딩 도구 연결에서 복사합니다. JSON 전문은 이 글에 붙여 두지 않아요. 토큰은 다른 사람에게 보여 주지 마세요.
실사용
중고 거래 앱 공개 화면은 여섯 장입니다. 홈, 글 목록, 글 상세, 글 올리기, 채팅, 내 글. 각 화면 위에 이름과 360 × 780이 적혀 있었어요. 사용자 카피에서는 페이지·프레임이라고 쓰지 않습니다. 화면입니다.
화면 한 장 = HTML 한 장
편집 화면에서 화면을 고치면 HTML이 바뀝니다. 한 화면이 한 파일입니다. 로그인하지 않으면 이 편집이 열리지 않습니다. 공개 열람은 읽기 전용이에요. 「화면을 시작하려면 로그인해 주세요.」가 실제 안내입니다.
게스트 쿠키 14일로 편집을 이어 주는 길은 화면설계에 없습니다. 내 화면은 계정에 붙습니다. 남의 공개 와이어를 보는 일과, 내 HTML을 고치는 일은 권한이 다릅니다.
코딩 도구로 내 프로젝트에 저장
대시보드 모델 화면의 코딩 도구 연결에서 설정을 복사합니다. 대상은 커서, 클로드 코드, 코덱스, 그록 빌드입니다. 토큰은 내 계정만 열고, 내 프로젝트만 저장됩니다.
한 번 붙이면 화면설계·기획·정보구조가 같이 열립니다. 「화면설계 번호에 로그인 그려」처럼 주소의 숫자로 말하면 됩니다. 화면 목록이 맞는지까지는 도구가 책임지지 않습니다. 저장은 되고, 빠진 화면은 빠진 채로 남아요.
ZIP은 기획 패키지입니다
개발 패키지를 받으면 screens 폴더에 HTML, specs 폴더에 기능정의 MD, 루트에 README가 있습니다. README도 분명히 적습니다. HTML은 기획 화면이지 운영 앱이 아니라고. 그대로 배포하지 말라고. 같은 화면과 동작을 운영 앱으로 다시 구현하라고.
기능정의가 없으면 안내 한 줄만 갑니다. 「기능정의가 아직 없습니다.」 HTML만 잔뜩 있어도 동작은 비어 있는 상태예요.
개발사에 넘길 기획서 다섯 종과는 다릅니다. 그쪽은 화면 목록·목적·상태·예외·용어입니다. 사람을 위한 문서예요. 이 글의 ZIP은 코딩 AI가 열 파일 묶음입니다. 같은 「넘긴다」여도 받는 쪽이 다릅니다.
넘기기 전에 이 세 가지만
파일을 던지기 전에 종이 한 장으로 물어보면 됩니다. 판단 기준은 세 개면 충분해요.
- 화면 목록. 장수와 이름이 내가 말한 서비스와 같은가. 중고면 채팅이 빠지면 거래가 끊깁니다.
- 기능정의. 번호표와 오른쪽 화면·동작·유효성이 비어 있지 않은가. 없으면 AI는 보이는 레이아웃만 짭니다.
- 빠진 상태. 빈 목록, 실패, 로딩을 알고 있는가. HTML만 보면 완성된 순간만 보입니다.
세 가지를 건너뛰면 AI는 있는 화면만 예쁘게 구현합니다. 없는 화면은 없는 채로 남아요. 그게 한계입니다.
되는 것 vs 안 되는 것
- 되는 것. 로그인 후 화면 HTML을 고친다. ZIP으로 묶거나 코딩 도구로 내 프로젝트에 저장한다. 설정은 대시보드에서 복사한다. 포인트 없이 그 도구의 모델이 내용을 만든다.
- 안 되는 것. 로그인 없이 화면을 고친다. ZIP을 운영 서비스로 올린다. 화면 목록을 AI가 알아서 맞춰 주길 기다린다. 개발사 문서 다섯 종과 ZIP을 같은 일로 본다.
한계를 먼저 말하면 오해가 줄어듭니다. AI는 받은 화면을 코드로 바꿉니다. 받지 못한 화면은 모릅니다.
자주 묻는 질문
로그인 없이 화면 HTML을 고칠 수 있나요
없습니다. 공개 갤러리 열람은 로그인 없이 됩니다. 내 화면을 그리고 저장하는 일은 계정에 붙습니다. 아이디어 인터뷰처럼 게스트로 이어 가는 길이 아닙니다.
ZIP을 그대로 배포하면 되나요
안 됩니다. README가 한 줄로 말합니다. 같은 화면과 동작을 운영 앱으로 다시 구현하세요. HTML을 그대로 배포하지 마세요. 배포 스택을 고르는 안내가 README에 있어도, 그 HTML이 곧 서비스는 아닙니다.
지금 화면설계에서 중고 거래 공개 화면을 먼저 보세요. 화면이 어떻게 생겼는지 감이 오면 기획 인터뷰로 내 아이디어를 한 줄 던지면 됩니다. IA 없이 코드부터 열면 같은 화면을 세 번 그립니다. 그 실패는 IA 없이 바이브코딩에 적어 두었습니다. 갤러리 쓰임은 화면설계 갤러리에 있습니다. 질문은 상담에서 이어집니다. 이 글은 성공담 모음이 아니라 정찰 기록입니다. 아이디어 한 줄이면 시작됩니다.
