AI랑 같이하는 코딩

1. 왜 단계별 요청 구조가 필요한가

AI에게 웹앱을 요청할 때 많은 사람이 처음부터 “로그인, 게시판, 검색, 관리자 페이지까지 다 만들어줘”라고 말합니다. 시작은 빠를 수 있지만 결과는 대개 불안정합니다. 기능이 섞인 상태로 생성되면 어디가 잘못됐는지 찾기 어렵고, 한 부분을 수정하면 다른 부분이 깨지는 일이 반복됩니다. 그래서 필요한 것이 단계별 요청 구조입니다.

단계별 요청은 단순히 일을 쪼개는 방식이 아닙니다. 기능별 책임을 분리하고, 각 단계마다 검증 기준을 두어 리스크를 낮추는 방식입니다. 특히 초보자에게는 “무엇을 먼저 확인해야 하는지”가 명확해져 학습 속도가 빨라집니다. 실무에서는 리뷰 단위가 작아지고, 협업 시 충돌이 줄어드는 장점도 큽니다.

2. 실전에서 쓰는 5단계 프롬프트 프레임

웹앱 기능 요청은 아래 5단계로 나누면 안정적입니다. 1단계는 기능 명세 정리, 2단계는 UI 구조(HTML) 작성, 3단계는 스타일(CSS) 적용, 4단계는 동작(JavaScript 또는 백엔드 로직) 구현, 5단계는 테스트와 리팩터링입니다. 핵심은 각 단계가 끝날 때 “완료 기준”을 체크하는 것입니다.

예를 들어 회원가입 기능이라면 1단계에서 필드 목록과 유효성 규칙을 확정하고, 2단계에서 폼 구조와 접근성 속성을 만들고, 3단계에서 모바일 반응형을 맞추고, 4단계에서 제출/에러 처리 로직을 붙입니다. 마지막 5단계에서 예외 케이스와 에러 메시지 표현을 다듬으면 실제 서비스에 가까운 품질이 됩니다.

3. 단계별 요청 문장 템플릿

실제로는 각 단계마다 요청 문장을 바꿔야 합니다. 예시를 보면 감이 빨리 옵니다. 1단계: “할 일 관리 기능의 요구사항을 표로 정리하고, 이번 단계에서 제외할 항목도 함께 적어줘.” 2단계: “확정된 요구사항 기준으로 HTML만 작성해줘. 시맨틱 태그와 접근성 속성을 포함하고, 스타일과 스크립트는 제외해줘.” 3단계: “기존 클래스명 유지 조건으로 CSS만 작성해줘. 375px 모바일 기준 반응형 포함.” 4단계: “마크업과 스타일은 변경하지 말고 JS만 추가해줘. 추가/수정/삭제/완료 토글을 구현해줘.”

여기서 중요한 문장은 “변경 금지 범위”입니다. 어떤 파일을 건드려도 되는지 명시하지 않으면 AI가 편의상 구조를 바꾸는 경우가 있습니다. 따라서 “이번 단계는 `app.js`만 수정” 같은 조건을 넣으면 안정성이 크게 올라갑니다. 요청문 끝에 “변경 이유 3줄 요약”을 붙이면 코드 이해도도 함께 높일 수 있습니다.

4. 실패를 줄이는 운영 원칙

단계별 프롬프트를 쓸 때 실패를 줄이는 핵심은 세 가지입니다. 첫째, 단계마다 검증 문장을 넣는다. 둘째, 기존 산출물의 유지 조건을 명확히 쓴다. 셋째, 피드백을 행동 단위로 전달한다. “느려요”보다 “목록 100개에서 필터 전환 시 지연이 있으니 렌더링 최적화”처럼 구체적으로 말해야 정확히 고쳐집니다.

또한 단계 간 기록을 남기면 다음 요청 품질이 높아집니다. “현재 상태: HTML 완료, CSS 완료, JS 일부 완료”처럼 진행 상황을 붙이면 AI가 맥락을 잘 이어갑니다. 결론적으로 단계별 프롬프트 구조는 복잡한 앱을 쉽게 만드는 기술이 아니라, 복잡함을 통제 가능한 크기로 줄이는 실전 운영 방식입니다.

5. 자주 묻는 질문