“나는 코드를 한 줄도 못 쓰는데, 정말 GPT만으로 동작하는 웹앱을 만들 수 있을까?” 결론부터 말하면 가능합니다. 다만 ‘마법 버튼’은 아니고, 무엇을 만들지 정확히 설명하고 → 나온 코드를 그대로 실행해 보고 → 안 되는 부분을 다시 물어보는 작은 반복을 빠르게 도는 일에 가깝습니다. 이 글은 그 반복을 비개발자가 따라 할 수 있게 한 호흡씩 끊어 안내합니다.
이 글의 흐름
- 웹앱이란 무엇인지 먼저 이해하기
- 만들기 전에 ‘한 문장’으로 정의하기
- GPT에게 뼈대 코드 요청하는 법
- 내 컴퓨터에서 실제로 실행해 보기
- 에러가 났을 때 다시 물어보는 법
- 마치며
1. 웹앱이 뭔지부터 가볍게
웹앱은 ‘브라우저에서 열리는 프로그램’입니다. 우리가 매일 쓰는 메모 앱, 가계부, 설문 폼이 모두 웹앱입니다. 기술적으로는 화면을 그리는 HTML/CSS, 동작을 담당하는 JavaScript, 그리고 데이터를 저장하는 서버가 합쳐진 결과물입니다. 비개발자에게 중요한 건 이 용어를 외우는 게 아니라, “화면 + 동작 + 저장” 세 덩어리가 있다는 감각입니다. GPT에게 요청할 때 이 세 가지를 나눠서 부탁하면 답이 훨씬 깔끔해집니다.
2. 만들기 전, 한 문장으로 정의한다
가장 흔한 실패는 ‘무엇을 만들지 모호한 채’ GPT에게 던지는 것입니다. 먼저 다음 빈칸을 채워 한 문장으로 적어 보세요.
“[누가] [어떤 상황에서] [무엇을 입력]하면 [어떤 결과]를 보여 주는 앱.”
예: “나 혼자 쓰려고, 하루 끝에, 오늘 쓴 돈과 메모를 입력하면, 이번 달 합계를 보여 주는 가계부 앱.” 이 한 문장이 명확하면 GPT의 답도 명확해집니다. 여기에 화면 항목(입력칸 무엇무엇), 버튼 동작(누르면 무슨 일), 저장 위치(브라우저에만? 파일로?)를 덧붙이면 사양서가 됩니다.
3. GPT에게 뼈대 코드 요청하기
이제 첫 프롬프트입니다. 막연히 “가계부 앱 만들어 줘”보다, 아래처럼 역할·제약·출력형식을 명시하면 결과 품질이 크게 올라갑니다.
너는 초보자를 돕는 웹 개발 도우미야.
파일 하나(index.html)로만 동작하고, 설치 없이
더블클릭으로 브라우저에서 열리는 가계부를 만들어 줘.
[화면] 날짜, 금액, 메모 입력칸 + '추가' 버튼
[동작] 추가하면 아래 목록에 한 줄씩 쌓이고, 총합이 갱신됨
[저장] 브라우저 localStorage에 저장해 새로고침해도 유지
[조건] 코드는 한 덩어리로, 줄마다 한국어 주석을 달아 줘
[출력] 전체 코드를 코드블록 하나로만 줘핵심은 “파일 하나로”와 “설치 없이”입니다. 비개발자는 개발 환경 설치 단계에서 가장 많이 포기하므로, 처음엔 단일 HTML 파일을 노리는 게 안전합니다.
4. 내 컴퓨터에서 실제로 실행하기
GPT가 준 코드를 ‘읽는’ 것과 ‘돌려 보는’ 것은 완전히 다릅니다. 다음 순서대로 하면 됩니다.
- 메모장(또는 VS Code 같은 편집기)을 열고 GPT가 준 코드를 그대로 붙여넣기
index.html이라는 이름으로 저장 (확장자가 .txt가 되지 않게 ‘모든 파일’로 저장)- 저장된 파일을 더블클릭 → 브라우저에 화면이 뜨는지 확인
| 증상 | 대개의 원인 | 다음 행동 |
|---|---|---|
| 빈 화면만 나옴 | 코드 일부 누락 | “코드가 중간에 끊겼어, 전체를 다시 줘” |
| 버튼이 안 눌림 | 동작 코드 오류 | 화면을 캡처해 증상과 함께 질문 |
| 새로고침하면 사라짐 | 저장 미구현 | “저장이 안 돼, localStorage로 유지시켜 줘” |
5. 에러가 났을 때 다시 물어보는 법
에러는 실패가 아니라 ‘대화의 재료’입니다. 비개발자가 가장 강력하게 쓸 수 있는 무기는 브라우저의 개발자 도구 콘솔입니다. 화면에서 F12를 누르고 ‘Console(콘솔)’ 탭을 열면 빨간 글씨로 오류 메시지가 보입니다. 이 빨간 글씨를 통째로 복사해 다음처럼 붙이세요.
아래 코드를 실행했더니 이 에러가 났어. 원인과
수정한 전체 코드를 다시 줘. 나는 비개발자라
어디를 어떻게 고쳤는지 한 줄로 설명도 붙여 줘.
[에러 메시지]
(여기에 빨간 글씨 그대로 붙여넣기)
[현재 코드]
(여기에 지금 쓰는 코드 붙여넣기)이 ‘실행 → 에러 복사 → 전체 코드 재요청’ 루프를 서너 번만 돌면 대부분의 작은 앱은 동작합니다. 욕심을 내 기능을 추가할 때도 한 번에 하나씩만 부탁하는 것이 안전합니다. “이제 항목을 삭제하는 버튼도 추가해 줘. 나머지는 그대로 두고 전체 코드를 다시 줘.” 처럼요.
마치며
GPT로 웹앱을 만드는 일은 천재적 발상이 아니라 작은 반복을 끈기 있게 도는 습관입니다. 한 문장으로 정의하고, 파일 하나로 시작하고, 에러는 콘솔째 복사해 다시 묻는다. 이 세 가지만 몸에 익으면 가계부, 할 일 목록, 간단한 설문 폼 정도는 누구나 만들 수 있습니다. 오늘은 가장 작은 한 조각부터 직접 실행해 보세요. ‘읽는 사람’에서 ‘돌려 보는 사람’으로 넘어가는 순간, 바이브코딩은 비로소 내 손에 들어옵니다.
읽었으면, 직접 풀어보는 게 가장 빠릅니다.
무료 ‘수련’에서는 레벨별 챕터의 핵심을 익히고 퀴즈를 풀며 경험치(XP)를 쌓아 한 단계씩 레벨을 올립니다. 로그인하면 내 진행 상황이 저장됩니다.