8. 도구를 고르는 기준과 서비스별 역할
처음부터 모두 준비하지 않습니다
바이브 코딩을 검색하면 여러 서비스 이름을 한꺼번에 만나게 됩니다. 이름을 많이 아는 것과 첫 화면을 만드는 준비는 다릅니다. 이번 책의 처음에는 브라우저와 웹페이지 미리보기가 가능한 AI 도구가 필요합니다. 만든 파일을 보관하고 인터넷에 공개하는 서비스는 뒤에서 사용합니다.
| 도구·서비스 | 맡는 일 | 이 책에서 만나는 시점 |
|---|---|---|
| AI 도구 | 설명을 바탕으로 코드와 화면을 만들고 수정합니다. | 첫 실습 |
| 브라우저 | 만든 화면을 읽고 동작을 확인합니다. | 처음부터 |
| GitHub | 파일과 수정 기록을 보관합니다. | 공개 준비 |
| Vercel | 사이트를 인터넷 주소로 제공하는 일을 돕습니다. | 공개 실습 |
| Supabase | 데이터베이스·사용자 인증·파일 저장 등의 기능을 제공합니다. | 역할만 이해 |
데이터베이스는 자료를 저장하고 찾는 체계이고, 인증은 사용자가 누구인지 확인하는 과정입니다. 이번 링크 모음은 브라우저에 자료를 보관하므로 Supabase 연결이 필수는 아닙니다. 랜딩 페이지라는 말은 특정 목적을 안내하는 페이지를 뜻하며, 반드시 어느 한 서비스의 이름을 가리키지는 않습니다.
도구 사이에서 무엇이 오가는지 보기
설명 → 결과 → 수정 요청
원본과 변경 시점을 보관
파일을 방문자용 주소로 제공
첫 칸에서 AI와 주고받는 것은 부탁과 수정 의견입니다. 그 과정에서 코드와 파일이라는 결과가 생깁니다. 두 번째 칸에서는 그 파일과 변화의 기록을 보관합니다. 세 번째 칸에서는 제공할 파일을 바탕으로 방문자가 여는 사이트가 준비됩니다. 그림은 세 서비스가 같은 일을 반복하는 것이 아니라 서로 다른 역할을 맡는다는 것을 보여 줍니다.
첫 소개 페이지를 도구 안에서 확인할 때는 두 번째와 세 번째 칸까지 가지 않아도 됩니다. 파일을 보관하고 공개하는 단계에서 필요에 맞게 이어 갑니다. 이것이 처음부터 모든 서비스에 가입하라고 하지 않는 이유입니다. 반대로 공개까지 진행했다면 마지막 칸에서 실제 주소와 동작을 확인해야 합니다.
어느 단계에서 문제가 생겼는지 말할 때도 그림을 기준으로 생각할 수 있습니다. 부탁한 문장이 다르면 제작과 수정의 문제일 수 있고, 저장한 파일이 예전 결과라면 보관한 버전의 문제일 수 있습니다. 파일은 맞는데 사이트가 준비되지 않으면 공개 과정의 상태를 확인할 수 있습니다. 모든 문제를 AI에게 코드 재작성으로 부탁하지 않아도 되는 이유입니다.
나중에 다른 도구가 이 역할을 함께 제공하더라도 구분은 유효합니다. 한 화면에 있다고 해서 모든 자료가 같은 곳에 남는 것은 아닐 수 있습니다. 결과가 무엇으로 보관되고 어떤 주소로 제공되는지 설명할 수 있으면 도구를 바꾸거나 작업을 이어 갈 때도 질문이 명확해집니다.
AI 도구에서 확인할 네 가지
우리에게 필요한 것은 웹페이지를 만들 수 있다는 광고 문구보다 실제 작업 화면입니다.
- 화면 보기만든 화면을 볼 수 있는지 확인합니다.
- 대화로 수정하기대화로 수정할 수 있는지 확인합니다.
- 작업 다시 찾기작업을 다시 찾을 수 있는지 확인합니다.
- 결과 꺼내기결과를 파일이나 코드로 꺼낼 수 있는지 확인합니다.
이 네 가지는 만들기부터 보관까지 이어지는 조건입니다.
글로만 답하는 화면에서도 코드가 나올 수 있지만, 그것만으로 이 책의 미리보기 실습을 그대로 진행할 수 있는 것은 아닙니다. ‘가능합니다’라는 대답보다 제목이 실제로 보이고 수정한 문장이 반영되는지를 기준으로 삼습니다. 지원 여부가 불분명하면 현재 서비스의 도움말에서 사용 환경과 계정 조건을 확인합니다.
첫 실습을 준비하는 순서
처음 고르는 분은 먼저 화면 하나 만들어 보기의 Claude 웹 → 새 대화 → 요청 입력 → Artifact 열기 순서를 따라가세요. 제목 한 줄을 만들고 수정하는 것으로 미리보기까지 확인합니다. 계정 준비, 입력칸, 코드만 보일 때의 다음 행동도 그 안내에 모았습니다.
이미 ChatGPT 등 다른 도구에서 실제 웹페이지 미리보기를 열고 수정할 수 있다면 그대로 사용해도 됩니다. 서비스 이름보다 만든 화면을 열기·수정하기·다시 찾기·파일로 꺼내기의 네 가지가 되는지 보세요. 화면 확인이 끝나면 같은 도구로 21장 소개 페이지를 만듭니다.
역할을 알면 질문이 짧아집니다
만든 문장을 고치는 일은 AI 도구에서, 파일의 이전 상태를 찾는 일은 보관한 기록에서, 공개 주소가 열리지 않는 일은 공개 설정에서 살펴봅니다. 모든 문제를 코드 수정으로 해결하려고 하면 잘 작동하던 화면까지 바뀔 수 있습니다. 어느 단계의 문제인지 구분하는 것이 서비스 이름을 외우는 것보다 유용합니다.
여러 도구를 동시에 비교할 때의 어려움
처음부터 여러 서비스에서 같은 요청을 반복하면 무엇이 다른지 배우기보다 계정과 화면을 오가는 데 시간이 많이 들 수 있습니다. 도구마다 프로젝트와 대화, 결과 파일을 보관하는 방식도 다릅니다. 한 도구에서 만든 자료를 다른 도구가 자동으로 읽는다고 가정하면 혼동이 커집니다.
먼저 필요한 기능이 되는 도구 하나에서 작은 결과를 완성해 보는 편이 이 책의 흐름과 맞습니다. 그 뒤 다른 도구를 볼 때는 미리보기, 수정 범위, 결과 보관, 공개 방식처럼 비교할 기준이 생깁니다. 유명한 도구라는 이유만으로 모든 작업에서 같은 장점이 있다고 생각하지 않습니다.
도구에 필요한 기능이 없을 때
기능을 확인할 때 보는 증거
AI 도구의 소개에 ‘웹사이트 제작’이라고 적혀 있어도 어떤 방식으로 결과를 주는지는 살펴야 합니다. 코드를 글로만 보여 주는지, 실제 화면을 함께 보여 주는지, 인터넷 공개까지 자동으로 진행하는지에 따라 첫 작업의 경험이 달라집니다. 이번 책에서는 만드는 도중 도구 안에서 결과를 확인하는 경로를 사용합니다.
미리보기 지원을 확인할 때는 제목 한 줄짜리 작은 예시가 충분합니다. 그 화면의 제목을 바꾸고 실제로 반영되는지 보면 생성과 수정의 기본 경로를 확인할 수 있습니다. 다시 열기와 내보내기는 이후 작업을 이어 갈 수 있는지 보는 조건입니다. 네 가지를 한 번에 복잡한 프로젝트로 시험할 필요는 없습니다.
지원하지 않는 기능을 만났을 때
버튼이 보이지 않으면 현재 계정과 사용하는 환경이 공식 안내의 조건에 맞는지 봅니다. 브라우저와 데스크톱 앱의 지원 기능이 다를 수 있고, 계정별 제공 범위도 다를 수 있습니다. 도구 이름만 같다고 화면을 완전히 똑같이 따라 할 수 있는 것은 아닙니다.
AI에게 ‘있는 기능이라고 말해 줘’처럼 반복해서 요청해도 실제 기능이 생기지는 않습니다. 현재 환경에서 가능한 경로를 확인하거나 지원되는 환경으로 옮겨야 합니다. 책에 나온 화면과 다르면 무엇이 없는지 구체적으로 설명하면 도움받기 쉽습니다. 로그인이나 결제 정보를 보내는 방식으로 해결할 문제는 아닙니다.
처음에는 보이지 않는 비용도 구분하기
어떤 도구는 제작, 파일 보관, 공개를 한곳에서 제공하기도 합니다. 편리할 수 있지만 내가 무엇을 이용하고 있는지는 알아야 합니다. 공개 주소가 생겼다면 어느 서비스가 제공하는지, 결과를 다른 곳으로 옮길 수 있는지, 사용을 중단하면 자료를 어떻게 꺼내는지 살펴봅니다.
이 질문은 처음부터 모든 서비스를 따로 써야 한다는 뜻이 아닙니다. 한곳에서 작업하더라도 만드는 일과 보관과 공개의 역할을 구분하자는 것입니다. 역할을 알면 작업을 옮기거나 문제가 생겼을 때 어디를 확인할지 더 쉽게 판단할 수 있습니다.
“한 도구에서 전부 해 준다면 역할을 몰라도 될까요?”
한 서비스에서 만들기와 보관과 공개까지 이어지는 것은 편리할 수 있습니다. 그래도 현재 결과가 도구 안의 임시 화면인지 인터넷에서 접속되는 사이트인지 알아야 합니다. 공개 범위나 자료를 꺼내는 방법이 달라질 수 있기 때문입니다. 버튼이 적다고 책임져야 할 범위도 모두 사라지는 것은 아닙니다.
역할을 아는 목적은 서비스를 억지로 나누어 쓰기 위해서가 아닙니다. 문제가 생겼을 때 어느 과정의 상태를 확인할지 알고, 필요하면 결과를 다른 곳으로 옮길 수 있는지 판단하기 위해서입니다. 파일이 어디에 남고 공개 주소가 어디에서 제공되는지 설명할 수 있으면 다음 질문이 분명해집니다.
처음에는 한 도구에서 작은 결과를 완성하고 그 결과를 다시 열어 보는 것만으로도 많은 것을 배울 수 있습니다. 나중에 다른 서비스를 연결할 때는 무엇을 추가로 맡기는지 살펴봅니다. 지금 꼭 필요하지 않은 연결을 미리 늘리지 않는 것이 첫 작업의 범위를 이해하기 쉽습니다.
꼭 기억하세요
지금 필요한 도구부터 준비하고, 보관과 공개는 필요한 시점에 배웁니다. 첫 기준은 실제 미리보기와 수정이 되는지입니다.