AI 코딩 화면 요청 프롬프트, 코딩 초보가 쓰는 5줄 템플릿

코딩을 처음 배우는 사람이 AI에게 가장 많이 막히는 지점은 코드 문법보다 요청문입니다. “로그인 화면 만들어 줘”라고 쓰면 AI는 색, 버튼 위치, 입력값, 성공 기준을 모두 추측합니다. 첫 결과가 마음에 들지 않으면 다시 설명해야 하고, 수정할수록 원래 원했던 화면에서 멀어질 수 있습니다. 화면을 잘 만들게 하려면 코딩 용어를 많이 아는 것보다 사용자가 보는 화면과 눌렀을 때의 결과를 5줄로 고정하는 편이 더 빠릅니다.

AI에게 화면 제작을 맡기기 전 화면, 행동, 입력, 성공 기준, 검증 방법을 나누는 흐름

help.openai.com의 OpenAI Help Center 프롬프트 작성 안내는 원하는 맥락, 결과, 길이, 형식, 스타일을 구체적으로 쓰라고 설명합니다. 같은 문서에서는 출력 형식을 예시로 보여 주는 방식도 권합니다. developers.openai.com의 Codex 문서 역시 로컬 프로젝트 안에서 코드를 읽고 바꾸고 명령을 실행하는 작업 흐름을 전제로 합니다. 그래서 AI 코딩 요청은 “멋진 화면”보다 “어떤 화면에서 어떤 행동이 성공인지”가 먼저 들어가야 합니다.

원하는 화면은 5줄로 먼저 고정합니다

아래 템플릿을 먼저 채우고 AI에게 붙여 넣습니다. 설명이 길 필요는 없습니다. 빈칸이 보이면 AI가 추측하므로, 모르는 부분은 “기존 스타일 유지”처럼 범위를 좁혀 적습니다.

아래 기준으로 웹앱 화면을 만들어 주세요.

화면: {사용자가 처음 보는 화면과 포함할 요소}
행동: {사용자가 누르거나 입력하면 일어나야 할 일}
입력: {필드 이름, 예시 데이터, 비워도 되는 값}
성공: {완료로 볼 수 있는 화면 상태}
검증: {직접 확인할 방법이나 실행할 명령}

제한:
- 기존 색상과 글꼴이 있으면 유지해 주세요.
- 필요한 파일만 수정해 주세요.
- 완료 후 바뀐 파일과 확인한 방법을 짧게 알려 주세요.

예를 들어 회원가입 화면을 맡긴다면 이렇게 바꿉니다.

아래 기준으로 웹앱 화면을 만들어 주세요.

화면: 회원가입 카드가 가운데 있고 이메일, 비밀번호, 비밀번호 확인 입력칸과 가입 버튼이 보이는 화면
행동: 세 입력칸이 모두 채워지고 비밀번호가 같으면 가입 버튼이 활성화됩니다
입력: 이메일 예시는 user [at] example.com, 비밀번호는 8자 이상입니다
성공: 가입 버튼을 누르면 "가입 요청이 접수되었습니다" 문구가 버튼 아래에 보입니다
검증: 로컬에서 실행 가능한 lint 또는 test 명령을 찾아 실행하고, 브라우저에서 빈 값과 정상 값을 확인합니다

제한:
- 기존 색상과 글꼴이 있으면 유지해 주세요.
- 필요한 파일만 수정해 주세요.
- 완료 후 바뀐 파일과 확인한 방법을 짧게 알려 주세요.

이 요청문은 AI에게 디자인 감각을 맡기는 문장이 아니라 판단 기준을 주는 문장입니다. 화면은 무엇을 그릴지, 행동은 언제 바뀔지, 입력은 어떤 데이터가 들어올지, 성공은 어디까지가 완료인지, 검증은 실제로 어떻게 확인할지를 나눕니다.

화면과 행동을 분리하면 결과가 덜 흔들립니다

초보자가 자주 쓰는 요청은 “예쁘게 만들어 줘”, “잘 작동하게 해 줘”처럼 한 문장 안에 화면과 기능이 섞여 있습니다. AI는 이 문장을 보고 레이아웃을 바꿔야 하는지, 버튼 상태를 바꿔야 하는지, API 연결까지 해야 하는지 추측합니다. 화면과 행동을 분리하면 작업 범위가 좁아집니다.

흐린 요청	바꿔 쓸 요청
로그인 화면 예쁘게 만들어 줘	화면: 로그인 카드, 이메일 입력칸, 비밀번호 입력칸, 로그인 버튼이 보입니다
버튼 작동하게 해 줘	행동: 이메일과 비밀번호가 채워지면 로그인 버튼이 활성화됩니다
오류도 처리해 줘	성공: 비밀번호가 비어 있으면 버튼 아래에 “비밀번호를 입력해 주세요”가 보입니다
테스트도 해 줘	검증: 빈 값, 이메일만 입력, 두 값 모두 입력 상태를 브라우저에서 확인합니다

“화면” 줄에는 보이는 요소만 씁니다. “행동” 줄에는 클릭, 입력, 선택처럼 사용자가 하는 일을 씁니다. 이 두 줄이 섞이면 AI가 화면 전체를 다시 설계하거나, 반대로 버튼 상태만 고치고 레이아웃은 놓칠 수 있습니다.

AI 코딩 요청에서 화면, 행동, 입력, 성공 기준, 검증 방법을 나누는 5줄 체크리스트

입력과 성공 기준은 예시 데이터로 씁니다

AI에게 “폼 검증 넣어 줘”라고 하면 기준이 넓습니다. 이메일 형식만 볼지, 비밀번호 길이를 볼지, 비밀번호 확인까지 볼지 정해져 있지 않습니다. 입력 줄에는 실제로 넣어 볼 값을 씁니다.

입력: 이메일 user [at] example.com, 잘못된 이메일 user, 비밀번호 12345678, 비밀번호 확인 12345678
성공: 올바른 이메일과 같은 비밀번호를 입력하면 가입 버튼이 활성화됩니다

반대로 실패 상태도 한 줄로 적을 수 있습니다.

성공: 이메일이 user처럼 올바르지 않으면 버튼 아래에 "이메일 형식을 확인해 주세요"가 보입니다

성공 기준은 AI를 통제하기 위한 문장이 아니라 사용자가 결과를 확인하기 위한 문장입니다. 화면이 완성됐다고 말해도 성공 기준을 만족하지 못하면 다시 요청할 수 있습니다. 이 기준이 없으면 “완성”이라는 말의 의미가 사람마다 달라집니다.

검증 줄은 AI의 완료 보고를 짧게 만듭니다

AI가 “완료했습니다”라고 말해도 실제로는 빌드가 깨졌거나 화면을 열어 보지 않은 경우가 있습니다. 검증 줄에는 실행 가능한 명령과 직접 확인할 상태를 같이 적습니다. 명령을 모르면 AI에게 찾게 하면 됩니다.

검증: package.json에서 실행 가능한 lint, test, build 명령을 확인하고 가능한 범위에서 실행합니다. 실행하지 못한 명령은 이유를 적습니다. 브라우저에서 빈 값, 잘못된 이메일, 정상 입력 상태를 확인합니다.

이 줄을 넣으면 결과 보고가 좋아집니다. AI가 바뀐 파일만 말하는 것이 아니라 어떤 명령을 실행했는지, 어떤 화면 상태를 확인했는지 분리해서 알려 줄 가능성이 높아집니다. 코딩을 배우는 입장에서는 이 보고가 다음 학습 자료가 됩니다.

결과가 빗나가면 전체 요청을 다시 쓰지 않습니다

첫 결과가 어긋났을 때는 전체 프롬프트를 다시 길게 쓰기보다 빠진 줄만 고쳐 붙입니다. 아래 수정문을 저장해 두면 반복 수정이 줄어듭니다.

방금 결과에서 아래 기준과 다른 부분만 고쳐 주세요.

다른 부분: {예: 버튼이 처음부터 활성화되어 있습니다}
원하는 기준: {예: 이메일과 비밀번호가 모두 채워졌을 때만 활성화됩니다}
유지할 것: 기존 색상, 카드 위치, 입력칸 문구는 유지합니다
검증: 수정 후 빈 값과 정상 입력 상태를 다시 확인합니다

관련 없는 파일이나 스타일은 바꾸지 말아 주세요.

수정 요청에서 가장 중요한 줄은 “유지할 것”입니다. 이 줄이 없으면 AI가 문제를 해결하면서 색상, 간격, 문구까지 다시 만질 수 있습니다. “관련 없는 파일은 바꾸지 말아 주세요”도 같이 넣으면 작업 범위가 더 좁아집니다.

오늘 만들 화면 하나에 바로 붙여 넣습니다

코딩 초보에게 좋은 AI 요청은 길고 전문적인 기획서가 아닙니다. 사용자가 보는 화면, 사용자가 하는 행동, 들어가는 입력, 완료로 볼 기준, 직접 확인할 방법을 빠짐없이 적은 5줄입니다. 지금 만들고 싶은 화면이 있다면 먼저 아래 빈칸만 채웁니다.

화면:
행동:
입력:
성공:
검증:

빈칸을 채운 뒤 AI에게 맡기면 첫 결과가 빗나가도 어디를 고쳐야 하는지 보입니다. 코드를 아직 몰라도 요청 기준을 고정하면 수정 대화가 짧아지고, 완성된 화면을 직접 판단할 수 있습니다.

코딩 초보가 원하는 화면을 AI에게 맡기는 프롬프트 5줄