AI 스튜디오로 바이브코딩 ①
— 말로 설문 웹앱 만들기

«말로 앱을 만든다» — 이게 바이브코딩입니다

교육담당자가 설문을 돌릴 때 쓰는 것은 대개 구글 폼입니다. 편하지만 한계가 분명합니다. 우리 회사 모양대로 못 만들고, 사전·사후를 나란히 비교하기 어렵고, 결과를 보려면 매번 시트를 열어야 합니다.

직접 만들면 됩니다. 그런데 개발자가 아니면 못 만들었지요. 지금은 됩니다. 한국어로 «이런 걸 만들어 줘»라고 적으면 AI가 코드를 써서 실제로 돌아가는 웹앱을 만들어 줍니다. 이걸 바이브코딩이라고 부릅니다.

1단계 — 들어가기

2단계 — 프롬프트 넣기 «전에» 모델부터 바꾸십시오

이걸 모르면 여기서 포기하십니다. 기본 모델로는 앱 생성이 실패합니다.

3단계 — 첫 프롬프트 쓰기

짧게 시작하셔도 됩니다. 이 한 줄로도 앱이 나옵니다.

교육 만족도 설문 웹앱을 만들어 줘. 5점 척도 6문항과 주관식 2문항, 제출 후 관리자 통계 화면. 한국어, 모바일 우선, 글씨 크게.

제대로 만들고 싶으시면 화면 순서와 문항을 적어 주십시오. 아래가 이 자료에서 실제로 쓴 프롬프트입니다.

교육 만족도 설문 웹앱을 만들어 줘.

화면 순서: 시작 화면 → 응답자 정보(이름, 소속) → 설문 문항 → 제출 완료 → 관리자 통계 화면.

설문은 5점 척도 6문항(주제 이해도, 업무 적용 자신감, 실습 충분도, 강사 전달력, 교재 만족도, 전체 만족도)과 주관식 2문항(가장 도움된 점, 개선할 점).

관리자 화면은 응답 수와 문항별 평균을 막대그래프로 보여주고 주관식 응답을 목록으로 보여줘.

한국어 화면, 휴대폰 우선 반응형, 글씨 크고 단순하게, 흰 바탕에 남색 포인트. 응답은 일단 브라우저에 저장해 줘.

다 적으셨으면 Ctrl + Enter 또는 오른쪽 아래 «Build» 버튼을 누릅니다.

4단계 — 만들어지는 걸 지켜봅니다

끝나면 오른쪽 Preview에 실제로 돌아가는 앱이 뜹니다. Code 탭을 누르면 만들어진 코드도 볼 수 있습니다 — 안 보셔도 됩니다.

5단계 — 고치고 싶을 때

완성본이 마음에 안 드시면 아래 입력칸에 한국어로 말하면 됩니다. 처음부터 다시 만들 필요가 없습니다.

문항 사이 간격을 넓히고, 5점 척도 버튼을 더 크게 만들어 줘. 휴대폰에서 한 손으로 누르기 편하게.

관리자 화면에 응답자 소속별 평균을 비교하는 표를 추가해 줘.

설문 제출 전에 «빠진 문항이 있습니다»라고 알려주고, 그 문항으로 화면을 이동시켜 줘.

색을 흰 바탕에 남색으로 바꾸고, 그라데이션은 전부 빼 줘. 회사 보고용이라 차분해야 해.

여기까지의 한계와, 2·3부에서 할 일

1부까지만 하시면 «내 브라우저에서만» 돌아가는 앱입니다. 응답이 내 컴퓨터에만 남고, 직원들에게 나눠줄 수 없습니다. 그걸 푸는 것이 2부와 3부입니다.

세 가지만

20분이면 앱 하나

라운지의 다른 자료