2026. 6. 17.
코딩 초보가 원하는 화면을 AI에게 맡기는 프롬프트 5줄
코딩 용어를 몰라도 화면, 행동, 입력, 성공, 검증 다섯 줄을 채우면 AI가 추측할 범위를 줄일 수 있다. 복사용 요청과 수정 프롬프트를 함께 제공한다.
“회원가입 화면 만들어 줘”라고만 적으면 AI는 입력칸, 버튼 상태, 오류 문구, 완료 기준을 모두 추측한다. 코딩 초보가 먼저 할 일은 전문 용어를 외우는 것이 아니라 화면·행동·입력·성공·검증을 한 줄씩 고정하는 것이다.
아래 다섯 줄을 채우면 첫 요청의 범위가 보이고, 결과가 다를 때도 어느 줄을 고쳐야 하는지 찾을 수 있다. 다만 이 형식이 올바른 코드나 보안을 보장하지는 않는다. 마지막에는 변경 파일과 검사 결과, 실제 화면 상태를 직접 확인해야 한다.
화면·행동·입력·성공·검증을 먼저 복사한다
먼저 아래 요청을 그대로 복사하고 중괄호 안만 바꾼다. 모르는 구현 방식은 지어내지 말고 “기존 구조 유지”라고 적는다.
아래 기준으로 웹 화면 하나를 만들어 주세요.
화면: {처음 보이는 요소와 배치}
행동: {누르거나 입력했을 때 일어날 일}
입력: {필드 이름, 예시 값, 비워도 되는 값}
성공: {완료로 판단할 화면 상태}
검증: {실행할 검사와 브라우저에서 볼 상태}
제한:
- 기존 색상과 글꼴, 폴더 구조를 유지해 주세요.
- 필요한 파일만 수정해 주세요.
- 완료 후 변경 파일, 실행한 검사, 확인하지 못한 항목을 나눠 알려 주세요.
회원가입 화면이라면 결과 예시는 이렇게 채울 수 있다.
화면: 가운데 카드에 이메일, 비밀번호, 비밀번호 확인, 가입 버튼이 보입니다.
행동: 세 입력칸이 채워지고 두 비밀번호가 같을 때만 가입 버튼이 활성화됩니다.
입력: 이메일은 user [at] example.com, 비밀번호는 8자 이상입니다.
성공: 가입 버튼을 누르면 버튼 아래에 “가입 요청이 접수되었습니다”가 보입니다.
검증: 저장소의 lint 또는 test를 실행하고, 빈 값·불일치·정상 입력 상태를 브라우저에서 확인합니다.
이 예시는 공식 ChatGPT나 Codex 화면이 아니라 요청 구조를 보여 주는 재연 예시다. 현재 코드베이스가 있다면 사용 중인 프레임워크를 AI가 먼저 확인하게 하고, 새 도구나 라이브러리를 임의로 추가하지 말라고 제한한다.
다섯 줄은 AI가 추측할 대상을 나눈다
OpenAI의 ChatGPT 프롬프트 작성 안내는 요청을 명확하고 구체적으로 쓰고, 첫 결과를 본 뒤 반복해서 다듬으라고 설명한다. 여기서 다섯 줄은 OpenAI의 공식 양식이 아니라 그 원칙을 화면 제작에 맞게 나눈 워크시트다.
| 줄 | 적을 내용 | 비우면 생기는 추측 |
|---|---|---|
| 화면 | 보이는 요소와 위치 | AI가 레이아웃과 문구를 정한다 |
| 행동 | 클릭·입력 뒤의 변화 | 버튼이 언제 바뀌는지 모호해진다 |
| 입력 | 예시 값과 빈 값 허용 여부 | 검증 규칙을 AI가 지어낸다 |
| 성공 | 완료로 볼 화면 상태 | “완료”의 의미가 달라진다 |
| 검증 | 실행할 명령과 볼 상태 | 검사하지 않은 결과를 받을 수 있다 |
여러 화면을 한 번에 맡기지 않는다. 로그인, 회원가입, 비밀번호 재설정이 필요하다면 화면 하나를 먼저 끝내고 다음 요청으로 나눈다. 범위가 큰 기능을 작업 단위로 나누는 방법은 Codex 작업 전에 우선순위를 표로 고정하는 프롬프트와 함께 쓰기 좋다.
결과가 다르면 전체가 아니라 한 줄만 고친다
첫 결과에서 버튼이 처음부터 켜져 있다면 처음 요청을 길게 다시 쓰지 않는다. 다른 부분과 유지할 부분을 나눠 아래처럼 보낸다.
방금 결과에서 아래 기준과 다른 부분만 고쳐 주세요.
다른 부분: 가입 버튼이 처음부터 활성화되어 있습니다.
원하는 기준: 이메일과 두 비밀번호가 유효하고 서로 같을 때만 활성화됩니다.
유지할 것: 카드 위치, 색상, 입력칸 문구, 기존 파일 구조는 유지합니다.
다시 검증: 빈 값, 비밀번호 불일치, 정상 입력 상태를 각각 확인합니다.
관련 없는 파일이나 스타일은 바꾸지 말아 주세요.
수정 요청에는 반드시 “유지할 것”을 적는다. 이 줄이 없으면 오류 하나를 고치면서 이미 맞는 간격, 문구, 파일까지 다시 바꿀 수 있다. 반복 업무 전체의 순서를 먼저 나누고 싶다면 ChatGPT로 실행 순서를 고정하는 업무 흐름 프롬프트를 참고할 수 있다.
완료 보고보다 화면 상태와 검사 결과를 본다
OpenAI의 Codex 안내는 Codex를 코드 작성·검토·출하를 돕는 에이전트로 설명한다. OpenAI Developers의 Codex 사용 사례에도 프런트엔드 화면을 시각적으로 확인하고 검증 가능한 작업을 수행하는 예가 있다. 그러나 에이전트의 “완료” 문장은 검증 결과 자체가 아니다.
결과를 받으면 다음 네 항목을 확인한다.
- 요청하지 않은 파일이 바뀌지 않았는가
- 빈 값, 실패 값, 정상 값에서 화면 상태가 각각 맞는가
- lint, test, build 중 실행한 명령과 결과가 적혀 있는가
- 실행하지 못한 검사가 성공한 것처럼 쓰이지 않았는가
검사가 실패했거나 변경 이유를 설명하지 못하면 바로 적용하지 않고 멈춘다. 실패 로그와 기대 상태를 붙여 좁게 다시 요청하고, 인증·결제·개인정보처럼 영향이 큰 화면은 사람의 코드 검토를 거친다.
오늘 만들 화면 하나로 시작한다
지금 만들 화면 하나를 고른 뒤 아래 빈칸만 채운다.
화면:
행동:
입력:
성공:
검증:
오늘 목표는 큰 앱 전체를 맡기는 것이 아니라 화면 하나의 완료 기준을 직접 쓸 수 있게 되는 것이다. 다섯 줄을 채워 첫 요청을 보내고, 결과가 다르면 어긋난 한 줄과 유지할 것만 다시 적는다.
참고 출처
다음으로 읽을 기사
같은 흐름으로 이어 읽기 좋은 기사만 추려 보여줍니다.
첫 번째 댓글을 남겨보세요.
여러분의 생각이 다른 독자에게 도움이 됩니다.
댓글 0
이 글을 읽은 독자들의 생각을 나눠보세요.