첫 15분: 아이디어가 화면이 되는 순간

상상이 아니라 예고입니다. 수업 시간표가 정갈하게 정렬되어 있고, 트레이너 소개가 사진과 함께 이어지고, 맨 아래에는 실제로 입력이 되는 예약 폼이 붙어 있는 필라테스 스튜디오 사이트. 15분 뒤 여러분의 화면에 떠 있을 결과물입니다.

이걸 만드는 데 필요한 것은 코딩 실력이 아니라 문장 하나입니다. 여러분이 문장을 쓰면 AI가 코드를 쓰고, 여러분은 중간중간 선택지를 클릭해 방향만 잡아 주면 됩니다. 왜 이 순서로 배우냐면, 스튜디오의 흐름을 한 번이라도 끝까지 통과해 본 사람과 아닌 사람은 이후 모든 코스의 흡수 속도가 완전히 다르기 때문입니다.

자, 타이머를 켠 셈 치고 시작해 볼까요. 다음 단계부터는 손이 계속 움직입니다.

먼저 자리를 만들어야 합니다. 아래의 직접 해보기 버튼을 누르면 가입 화면이 열립니다. 이메일이나 소셜 계정으로 1분이면 끝나고, 비용은 들지 않습니다.

가입하고 들어오면 출석 보상이 기다립니다. 바이브캠퍼스는 매일 접속할 때마다 재화인 Vibes를 적립해 주는데, 이 Vibes가 나중에 빌드와 여러 기능의 연료가 됩니다. 왜 첫날부터 챙기라고 하냐면, 출석은 미루면 사라지는 유일한 보상이기 때문입니다.

이제 작업실로 들어갑니다. 스튜디오 화면 가운데에 큰 입력창이 보일 겁니다. 여기가 여러분이 문장을 쓰는 곳, 그러니까 이 플랫폼의 심장입니다.

입력창 주변을 둘러보세요. 웹페이지, 앱, 게임, 영상 같은 빌드 종류 선택이 있고, 빠른 빌드와 심화 빌드를 고르는 빌드 모드 스위치가 있습니다. 프롬프트 도움받기 버튼은 뭐라고 써야 할지 막막할 때 쓰는 구조 요청 벨이고, 템플릿으로 시작하기를 열면 125종의 완성 예시가 기다립니다.

지금은 이름만 눈에 익히면 충분합니다. 각각은 뒤의 코스에서 하나씩 제대로 다룹니다. 왜 투어부터 하냐면, 화면 어디에 뭐가 있는지 아는 것만으로 첫 빌드의 긴장감이 절반으로 줄기 때문입니다.

아래 직접 해보기 버튼을 누르면 스튜디오 입력창에 첫 프롬프트가 미리 채워져 있습니다. 작은 필라테스 스튜디오를 위한 예약 사이트, 수업 시간표와 트레이너 소개와 예약 폼까지 담은 요청입니다.

채워진 문장을 한 번 소리 내어 읽어 보세요. 누구를 위한 것인지(필라테스 스튜디오), 무엇이 필요한지(시간표·소개·예약 폼)가 담겨 있습니다. 좋은 프롬프트의 뼈대가 이렇게 생겼습니다. 마음에 들면 그대로, 바꾸고 싶은 게 있으면 자유롭게 고친 뒤 보내기를 누릅니다.

보내는 순간부터는 AI가 일합니다. 여러분이 한 일은 문장 하나를 보낸 것뿐인데, 이제 화면이 바빠지기 시작합니다.

프롬프트를 보내면 AI가 바로 코드부터 쓰지 않습니다. 먼저 clarify, 그러니까 되물음이 옵니다. 어떤 분위기를 원하는지, 예약은 어떤 방식인지 같은 질문이 선택지 버튼으로 나열됩니다.

맞는 것을 골라 클릭하면 됩니다. 여러 개 선택 가능이라고 표시된 질문은 복수로 골라도 되고, 마음에 드는 선택지가 없으면 직접 입력할 수도 있습니다. 다 골랐으면 이대로 만들기를 누르세요. 급하면 건너뛰고 바로 만들기도 있지만, 처음 한 번은 질문에 답해 보길 권합니다. AI가 무엇을 궁금해하는지 보는 것 자체가 공부가 됩니다.

왜 이 단계가 있냐면, 같은 문장도 사람마다 머릿속 그림이 다르기 때문입니다. 되물음은 그 간극을 클릭 몇 번으로 메워 주는 장치입니다.

답을 마치면 AI가 블루프린트, 즉 무엇을 어떻게 만들지 정리한 설계 요약을 보여 줍니다. 어떤 화면이 들어가는지, 어떤 기능이 작동하는지, 어떤 분위기로 꾸미는지가 항목별로 적혀 있습니다.

여기서 여러분이 할 일은 검수자의 눈으로 훑는 것입니다. 내가 말한 예약 폼이 들어 있나, 시간표가 빠지지 않았나. 이상이 없으면 승인하고, 빠진 게 보이면 이 시점에 말하는 게 가장 쌉니다. 집을 다 짓고 벽을 옮기는 것보다 도면에서 고치는 게 훨씬 빠른 것과 같은 이치입니다.

승인하면 빌드가 시작되고 게이지가 차오릅니다. 이 시간 동안 노는 게 아니라, AI 에이전트가 블루프린트를 손에 들고 실제 코드를 한 줄 한 줄 써 내려가는 중입니다. 화면 왼쪽에 코드가 흘러가는 게 보일 텐데, 그게 지금 여러분의 사이트가 지어지는 현장입니다.

다 이해할 필요는 전혀 없습니다. 다만 한 가지만 기억하세요. 저 코드는 전부 여러분의 것입니다. 바이브캠퍼스는 결과물의 코드 전체를 제공하니까, 나중에 내려받아 어디로든 가져갈 수 있습니다.

완성된 사이트가 오른쪽 미리보기에 떠 있습니다. 구경만 하지 말고 만져 보세요. 버튼을 누르고, 예약 폼에 이름을 넣어 보고, 스크롤을 끝까지 내려 보는 겁니다. 진짜로 작동한다는 걸 손으로 확인하는 순간이 이 코스의 백미입니다.

다음은 폰 미리보기입니다. 실제 크기의 폰 프레임으로 사이트를 감싸서 보여 주고, 아이폰과 갤럭시를 나란히 비교할 수도 있습니다. 요즘 방문자의 대부분은 폰으로 들어오기 때문에, 폰에서 어떻게 보이는지가 사실상 진짜 모습입니다.

결과가 첫술에 100% 마음에 들지 않아도 정상입니다. 그래서 두 개의 도구가 있습니다. 무료 재생성은 현재 빌드를 더 높은 품질로 처음부터 다시 만들어 주는 기능이고, 리파인은 채팅으로 '버튼을 더 크게', '시간표를 표 형태로' 같은 부분 수정을 요청하는 기능입니다.

틀려도 됩니다. 재생성은 무료입니다. 이 한 문장을 믿고 마음껏 실험하는 사람이 제일 빨리 늡니다. 전체 분위기가 어긋났으면 재생성, 특정 부분만 고치고 싶으면 리파인. 이 구분만 잡으면 됩니다.

마음에 드는 결과가 나왔으면 저장을 누릅니다. 저장된 빌드는 내 빌드함에 차곡차곡 쌓이고, 언제든 다시 열어 이어서 수정하거나 공유할 수 있습니다.

아래 직접 해보기 버튼으로 내 빌드함을 열어 보세요. 방금 만든 필라테스 사이트가 첫 칸을 차지하고 있을 겁니다. 앞으로 이 선반에 앱, 게임, 영상이 하나씩 늘어납니다. 여기가 여러분의 포트폴리오이자 작업실 선반입니다.

여러분은 방금 프롬프트, clarify, 블루프린트, 빌드, 미리보기, 저장이라는 스튜디오의 뼈대 흐름을 완주했습니다. 앞으로 무엇을 만들든 이 흐름은 똑같이 반복됩니다. 오늘 15분이 앞으로의 모든 빌드를 떠받치는 바닥이 됩니다.

다음 지도는 두 갈래입니다. 개발 용어가 아직 외국어처럼 들린다면 용어 완전정복 코스로, 결과 품질을 끌어올리고 싶다면 프롬프트의 기술 코스로 가세요. 어느 쪽이든 오늘 만든 필라테스 사이트가 계속 교재로 쓰입니다.

그리고 내일 또 오세요. 출석 보상은 매일 쌓이고, 여러분의 빌드함도 매일 자랄 수 있습니다.