행사 포스터 이미지 한 장만 있어도 반응형 신청 페이지는 바로 만들 수 있습니다. 오늘은 Codex에 포스터를 읽혀 초안을 만들고, Claude로 읽기 전용 검수를 돌려서 실제로 열어둘 수 있는 페이지까지 밀어봅니다. 지난 편에서 영수증처럼 구조가 엉킨 자료를 정리했다면, 오늘은 눈에 보이는 디자인을 웹으로 옮기는 날입니다.
완성되면 상단 히어로, 일정 카드, 장소 안내, 신청 폼, FAQ가 한 파일에 들어간 페이지가 남습니다. 브라우저에서 `index.html`만 열어도 돌아가구요.
AI 감독 스킬 네 줄
첫 지시는 길게, 수정 지시는 짧게 갑니다.
이미지에서 읽은 내용과 AI가 지어낸 내용을 분리해서 확인합니다.
마음에 안 드는 건 전체 재생성하지 말고 줄 단위로 고칩니다.
마지막 평가는 만든 AI 말고 다른 AI에게 맡깁니다.
오늘 쓸 건 딱 두 개
Codex CLI는 이미지 입력과 작업 권한 모드가 좋아서 초안 만들 때 편합니다. `codex --image poster.png`처럼 포스터를 붙일 수 있고, Read-only로 먼저 방향만 보다가 Auto로 넘길 수 있거든요.
Claude Code는 Plan Mode가 잘 맞습니다. `claude --permission-mode plan`으로 폴더를 읽기 전용으로 훑게 하면 수정 없이 문제만 뽑아줍니다. Claude 쓰는 분은 이렇게 검수부터 돌리면 되구요, Codex 쓰는 분은 이미지 첨부로 초안부터 뽑으면 됩니다. 매달 구독료 내는 입장에선 포스터 한 장으로 시작하는 쪽이 제일 덜 헤맵니다.
손은 적게, 기준은 세게
1
포스터를 작업 지시서로 바꾸기
AI에게 보낸 프롬프트
이 포스터 이미지를 읽고 단일 `index.html`로 반응형 행사 신청 페이지를 만들어줘. 목표는 사내 행사 참가 접수다. 제약은 네 가지다. 외부 라이브러리 없이 HTML, CSS, JS만 쓸 것. 모바일 우선으로 만들 것. 포스터의 색감과 분위기는 살리되 텍스트 대비는 충분히 확보할 것. 폼 항목은 이름, 이메일, 참석 인원만 넣을 것. 완료조건은 브라우저에서 바로 열리고, 히어로 섹션, 일정/장소 정보, 신청 폼, FAQ, 제출 완료 메시지가 모두 보이는 것이다. 포스터에 없는 정보는 지어내지 말고 `확인 필요`라고 표시해줘.
왜 이렇게 시켰나: 목표, 제약, 완료조건을 한 번에 넣어야 초안이 흔들리지 않습니다. `확인 필요`라는 안전핀을 넣으면 AI가 없는 일정을 멋대로 채우는 버릇도 줄어듭니다.
이렇게 나오면 정상입니다. 한 파일 안에 섹션이 나뉘고, 포스터 색을 닮은 버튼과 배경이 잡히며, 빈 정보는 비워두지 않고 표시가 남습니다.
여기서 포스터 내용을 그대로 붙여넣으라고만 하면 안 됩니다. 그러면 페이지 구조가 아니라 긴 요약문이 먼저 나올 때가 많습니다.
2
초안을 바로 쓰는 수준으로 보강하기
AI에게 보낸 프롬프트
지금 만든 페이지에서 실제 신청 전환에 필요한 것만 보강해줘. 상단 첫 화면에 날짜와 장소가 바로 보이게 배치하고, 모바일에서 버튼이 첫 화면 안에 들어오게 조정해줘. FAQ는 3개만 남기고, 폼 아래에는 개인정보를 저장하지 않는다는 안내 한 줄을 넣어줘. 여전히 단일 파일 구조는 유지해줘.
왜 이렇게 시켰나: 초안 다음 프롬프트는 범위를 좁혀야 합니다. 전환에 필요한 요소만 찍어주면 AI가 괜한 장식 대신 우선순위를 다시 잡습니다.
이렇게 나오면 정상입니다. 첫 화면에서 날짜, 장소, 신청 버튼이 한 번에 보이구요, 모바일에서도 버튼을 찾느라 스크롤을 길게 내리지 않게 됩니다.
여기서 디자인을 더 세련되게 같은 말로 뭉개면 안 됩니다. 그런 요청은 거의 항상 카드 그림자만 늘립니다.
3
마음에 안 드는 곳만 얇게 고치기
AI에게 보낸 프롬프트
이 부분만 바꿔줘. 히어로 제목은 두 줄 안으로 줄이고, 신청 버튼 문구는 `지금 신청하기`로 바꿔줘. 일정 카드 사이 간격은 모바일에서 더 넓혀줘. FAQ 제목은 덜 딱딱하게 바꿔서 실제 사내 공지처럼 보여줘. 다른 구조는 건드리지 마.
왜 이렇게 시켰나: 결과가 80점쯤 나오면 전체 재작성보다 부분 수정이 훨씬 안전합니다. `다른 구조는 건드리지 마` 한 줄이 diff 폭주를 막아줍니다.
이렇게 나오면 정상입니다. 문구와 간격만 바뀌고 폼 필드나 레이아웃 뼈대는 그대로 남습니다.
여기서 다시 처음부터 새로 만들어줘라고 하면 안 됩니다. 괜찮던 구간까지 같이 무너질 수 있습니다.
4
다른 AI에게 읽기 전용 검수 맡기기
AI에게 보낸 프롬프트
이 폴더를 읽기 전용으로만 검수해줘. 수정은 하지 말고, 행사 신청 페이지에서 실제 사용자가 막힐 문제 5개만 심각한 순서대로 적어줘. 범위는 모바일 화면, 폼 흐름, 접근성, 문구 오해 가능성이다. 칭찬은 빼고, 각 항목마다 파일명과 고칠 문장 한 줄을 붙여줘.
왜 이렇게 시켰나: 만든 AI가 자기 결과를 보면 대체로 후합니다. 다른 AI에게 읽기 전용으로 맡기면 점검표처럼 냉정한 답이 나옵니다. Claude Code라면 Plan Mode에서 이 프롬프트를 바로 넣으면 됩니다.
이렇게 나오면 정상입니다. 막연한 감상이 아니라 `버튼 대비가 약함`, `모바일에서 레이블 간격이 좁음`처럼 바로 고칠 수 있는 지적이 파일명과 함께 나옵니다. 그중 상위 2개만 다시 Codex에 넘겨도 퀄리티가 꽤 올라갑니다.
여기서 검수 결과를 전부 한 번에 반영하라고 하면 안 됩니다. 작은 페이지일수록 두세 개만 고쳐도 충분합니다.
세 군데서 자주 막힙니다
1. 포스터 글씨가 작아서 AI가 날짜를 틀리게 읽는 경우가 있습니다. 해결은 간단합니다. 포스터 이미지와 함께 날짜, 장소만 텍스트로 한 줄 보태세요. 여기서 보이지 않는 정보를 추측해서 채우면 안 됩니다.
2. 폼이 예쁘기만 하고 실제로 제출 반응이 없는 경우가 있습니다. 제출 뒤 완료 메시지나 유효성 검사 한 줄을 완료조건에 넣으면 대부분 해결됩니다. 여기서 폼 동작은 나중에 보자는 식으로 넘기면 안 됩니다.
3. 모바일에서 예쁘게 봐달라고만 적어서 버튼이 아래로 밀리는 경우도 많습니다. 첫 화면 안에 버튼이 보여야 한다는 식으로 관찰 가능한 조건을 넣으세요. 여기서 반응형으로 알아서 해달라고만 하면 안 됩니다.
여기서 한 발 더
한 걸음 더
확장 과제로는 신청 완료 뒤 캘린더 다운로드 버튼을 붙여보세요. 다음 편에서는 이 페이지를 Google Sheets나 Telegram 같은 바깥 서비스에 연결해서 신청이 들어오면 자동으로 모이게 만들어볼 만합니다.
![행사 신청 페이지 포스터 한 장으로 만드는 법 [Codex + Claude 활용]](https://i.ibb.co/wNZML7QJ/event-signup-page-from-poster-codex-claude-thumb.png)
