챗GPT 코딩 입문: 개발 모르는 기획자가 프로토타입을 만드는 현실 가이드, 20년 개발자가 옆에서 알려준다

기획자가 프로토타입을 만드는 현실 가이드

챗GPT를 이용하면 코딩을 전혀 모르는 기획자도 간단한 프로토타입을 실제로 만들 수 있다. 단, 코드를 이해하지 못해도 된다는 뜻은 아니다. AI가 만들어준 코드가 왜 안 되는지 설명할 줄 알아야 AI가 고칠 수 있다. 이 가이드는 코드 한 줄 안 짜본 기획자가 챗GPT와 처음 협업하는 방법을 개발자의 시각에서 정직하게 풀어낸다.

현장에서 일하다 보면 기획자가 "이걸 개발팀에 요청하기 전에 먼저 테스트해보고 싶은데"라고 말하는 경우가 꽤 있다. 예전엔 그 말이 "우리 팀 중 누군가가 퇴근 후 야근으로 만들어줘야 한다"는 신호였다. 지금은 다르다. 챗GPT를 제대로 쓸 줄 알면 기획자가 직접 동작하는 프로토타입을 만들 수 있다. 완성도 높은 제품이 아니라 아이디어를 눈으로 확인할 수 있는 수준이면 충분하다.

시작 전에 알아야 할 것: 챗GPT는 번역가지 마법사가 아니다

챗GPT와 코딩을 처음 시작하는 사람들이 가장 많이 하는 실수가 있다. "로그인이 되는 앱 만들어줘"처럼 너무 큰 요청을 한 번에 던지는 것이다. 이러면 챗GPT는 뭔가를 만들어주기는 하는데, 실제로 실행하면 안 되거나 절반짜리가 나온다. 챗GPT는 번역가에 가깝다. 내가 원하는 것을 구체적으로 설명하면 코드로 번역해주는 도구다. 설명이 불분명하면 번역도 불분명해진다.

개발자의 시각에서 보면, 좋은 질문과 나쁜 질문의 차이가 결과물의 차이를 만든다. 나쁜 질문은 "이메일 발송 기능 만들어줘"이고, 좋은 질문은 "사용자가 이름과 이메일을 입력하면 버튼을 눌러 환영 메시지를 보내는 HTML 페이지를 만들어줘. 이메일 발송은 실제로 구현하지 않아도 되고, 버튼을 누르면 발송 완료 메시지만 화면에 보이면 돼"다. 범위를 좁히고 기대치를 명확히 하는 것이 핵심이다.

프로토타입 첫 단계: HTML 파일 하나로 시작하는 이유

비개발자가 챗GPT로 처음 만들기에 가장 적합한 결과물은 HTML 파일이다. 서버가 필요 없고, 설치할 것도 없고, 파일을 더블클릭하면 브라우저에서 바로 열린다. 이 진입 장벽의 낮음이 핵심이다. 챗GPT에게 다음과 같이 요청하면 바로 시작할 수 있다.

HTML 파일 하나로 동작하는 간단한 할 일 목록 앱을 만들어줘.
기능은 다음과 같아:
- 텍스트를 입력하고 추가 버튼을 누르면 목록에 항목이 추가돼
- 각 항목 옆에 삭제 버튼이 있어서 눌러서 지울 수 있어
- 완성 여부를 클릭으로 표시할 수 있어 (완성된 항목은 취소선 표시)
- JavaScript와 CSS를 HTML 파일 안에 전부 포함해줘
- 외부 라이브러리 없이 순수 HTML, CSS, JavaScript만 써줘

이렇게 요청하면 붙여넣어서 바로 쓸 수 있는 코드가 나온다. 이 코드를 메모장이나 텍스트 편집기에 붙여넣고 파일명을 todo.html로 저장한 뒤 더블클릭하면 브라우저에서 열린다. 첫 번째 프로토타입 완성이다.

장점은 진입 장벽이 거의 없다는 것이다. 별도 프로그램 설치 없이 바로 결과를 확인할 수 있다. 단점은 기능이 복잡해질수록 한계가 뚜렷해진다는 것이다. 데이터를 저장하거나, 다른 사람과 공유하거나, 로그인 기능을 넣으려면 서버가 필요한데 그 순간부터 난이도가 급격히 올라간다. 프로토타입 용도로만 쓰는 것이 현실적이다.

안 되는 상황 대처법: 오류 메시지를 그대로 복사해서 붙여넣어라

코드가 안 될 때 대부분의 비개발자가 하는 행동이 있다. 그냥 포기하거나, 챗GPT에게 "안 되는데?"라고만 말하는 것이다. 이러면 챗GPT도 뭘 고쳐야 하는지 모른다. 올바른 방법은 오류 메시지를 그대로 복사해서 붙여넣는 것이다.

브라우저에서 F12를 눌러 개발자 도구를 열면 콘솔 탭에 오류 메시지가 빨간 글씨로 나온다. 그 메시지를 전체 선택해서 복사하고, 챗GPT에게 다음처럼 전달한다.

코드를 실행했는데 아래 오류가 나와. 어떻게 고쳐야 해?

[오류 메시지 붙여넣기]

이렇게 하면 챗GPT가 정확히 무엇이 문제인지 파악하고 수정된 코드를 준다. 이 과정을 몇 번 반복하다 보면 자연스럽게 오류 메시지가 뭘 말하는지 눈에 들어오기 시작한다. 의도하지 않은 학습 효과다.

현장에서 느낀 것은, 오류 해결 과정에서 실제로 코드를 이해하게 되는 사람이 생각보다 많다는 것이다. 처음엔 오류 메시지를 그냥 복사하다가, 어느 순간 "이 부분이 문제인 것 같은데?"라고 스스로 판단하게 된다. 챗GPT 코딩이 의도치 않은 교육 도구가 되는 순간이다.

기능 추가하는 방법: 한 번에 하나씩, 동작 확인 후 다음 단계로

기본 프로토타입이 되면 기능을 추가하고 싶어진다. 이때 저지르기 쉬운 실수가 여러 기능을 한꺼번에 요청하는 것이다. 챗GPT는 한 번에 여러 기능을 추가하면 코드 사이에서 충돌이 생기거나 예상치 못한 부분이 깨지는 경우가 있다. 올바른 방법은 한 번에 하나씩 추가하고, 각 단계마다 제대로 동작하는지 확인하는 것이다.

기능을 요청할 때는 현재 코드를 첨부하고 구체적으로 요청하는 것이 중요하다.

아래 기존 코드에 기능을 하나 추가해줘.
입력란이 비어있을 때 추가 버튼을 누르면 "할 일을 입력해주세요"라는 알림을 보여줘.
기존 코드의 다른 부분은 건드리지 마.

[현재 코드 붙여넣기]

이렇게 "기존 코드의 다른 부분은 건드리지 마"를 명시하는 것이 중요하다. 이 조건이 없으면 챗GPT가 전체 코드를 재구성하면서 이미 잘 되던 부분을 바꿔버리는 경우가 생긴다. 개발자들이 Git으로 버전 관리하는 이유가 이것인데, 비개발자는 코드를 수정할 때마다 이전 버전을 별도 파일로 저장해두는 방식으로 대신할 수 있다.

챗GPT 코딩을 6개월 써보고 느낀 현실적인 조언

챗GPT로 코딩을 도와주는 일을 오랫동안 해왔다. 처음엔 회의적이었다. 코드를 이해하지 못하는 사람이 코드를 다룬다는 게 어딘가 불안했다. 블랙박스처럼 쓰다가 문제가 생기면 어떻게 하나 하는 걱정이었다. 그런데 실제로 현장에서 기획자들이 챗GPT로 만든 프로토타입을 보면서 생각이 바뀌었다. 이 사람들이 만들어온 것들이 개발팀과의 소통을 완전히 바꿔놓았다. 말로 설명하는 기획서보다 직접 동작하는 프로토타입이 훨씬 명확하다. 개발팀도 무엇을 만들어야 하는지 즉시 이해한다. 수정 사항이 생겨도 기획자가 직접 프로토타입에서 보여주면서 설명할 수 있다.

물론 한계도 있다. 챗GPT로 만든 코드는 보안, 성능, 유지보수 측면에서 전문 개발자가 만든 코드와 다르다. 프로토타입은 아이디어를 검증하는 도구지 실제 제품이 될 수 없다. 이 선을 명확히 알고 있어야 한다. 챗GPT 코드를 그대로 제품에 올리려는 시도는 반드시 개발팀과 충돌하게 된다. 프로토타입으로 가능성을 보여주고, 실제 구현은 전문가에게 맡기는 분업이 현실적으로 가장 효과적이다. 챗GPT 코딩의 진짜 가치는 기획자가 코드를 짤 수 있게 되는 것이 아니라, 개발자와 같은 언어로 대화할 수 있는 최소한의 맥락을 가지게 되는 것이다. 그 맥락이 있는 기획자와 없는 기획자는 개발 현장에서 완전히 다른 존재감을 가진다.

출처 및 참고 경로:

• ChatGPT 공식: https://chat.openai.com
• MDN Web Docs (HTML 기초 학습): https://developer.mozilla.org/ko
• 구글 개발자 도구 사용법: https://developer.chrome.com/docs/devtools