바이브코딩 첫 배포

• 노트북: Mac(macOS 15.0 이상) 또는 Windows
• GitHub 가입에 쓸 이메일
• 있으면 좋은 것: ChatGPT Plus·Pro, Claude Pro·Max, GitHub Copilot 구독 가운데 하나(없어도 됩니다)

Aside는 화면을 보고 클릭까지 해 주는 AI 브라우저입니다. 오늘 AI가 일하는 곳입니다.

1. Mac: 내려받은 Aside.dmg를 열고, Aside 아이콘을 Applications 폴더로 끌어다 놓습니다. 그다음 Applications 폴더에서 Aside를 엽니다.
   Windows: 내려받은 설치 파일을 열고 안내대로 설치한 뒤 Aside를 엽니다.
2. 첫 화면 안내대로 Aside에 로그인하거나 계정을 만듭니다.
3. 다른 브라우저의 데이터 가져오기(Import)를 물으면 오늘은 건너뜁니다.
4. 그 뒤 설정 화면(비밀번호 관리자 등)은 안내를 읽고 넘어갑니다. 오늘은 비밀번호를 저장할 일이 없습니다.

가져오기를 하면 크롬에 로그인해 둔 계정(학교·학원 업무 계정 포함)까지 Aside로 들어옵니다. 오늘은 GitHub만 있는 깨끗한 상태로 시작합니다.

오늘 내가 직접 하는 로그인은 이것 하나입니다.

1. 계정이 있으면 아이디(또는 이메일)와 비밀번호를 넣고 Sign in을 누릅니다.
2. 계정이 없으면 Create an account를 누릅니다. 안내대로 이메일·비밀번호·사용자 이름을 넣고, 메일로 온 코드로 이메일 인증을 마칩니다. 이메일 인증을 해야 저장소를 만들 수 있습니다.

사용자 이름은 영어 소문자로 짧게 짓습니다. 내 코드 주소(github.com/사용자이름)에 그대로 들어갑니다.

쓰고 있는 AI 구독이 있으면 Aside에 연결합니다. 연결한 구독은 Aside 크레딧과 따로 계산됩니다. 구독이 없으면 이 단계는 건너뛰고 아래 「확인」에 체크합니다.

1. Aside에서 Settings → Models → Providers로 갑니다.
2. Connect를 누르고 Subscription 아래에서 내 구독을 고릅니다.

ChatGPT Plus·Pro를 쓰면

ChatGPT Subscription

Claude Pro·Max를 쓰면

Claude Subscription

GitHub Copilot을 쓰면

GitHub Copilot

3. 뜨는 창에서 그 서비스에 로그인하고 허용한 뒤 Aside로 돌아옵니다.
4. Settings → Models → Task models에서 기본 모델을 방금 연결한 구독 모델로 고릅니다.

구독 로그인은 뜨는 창에 내가 직접 합니다. API 키를 붙이는 방식은 오늘 쓰지 않습니다. 공식 도움말에 적힌 구독은 위 세 가지입니다.

이제 말로 시킵니다. 이것이 바이브코딩입니다. Vercel·Supabase 가입, 코드 작성, 배포까지 Aside가 하고, 나는 승인만 합니다.

1. 만들 것을 고르거나 직접 씁니다. 고르기 어려우면 「랜덤」을 누릅니다.

「발표 순서·모둠 랜덤 뽑기」를 고르면 대략 이런 앱이 나옵니다. 랜덤 뽑기 앱 예시 열기 →
예시는 이 사이트가 직접 만든 것이라, Aside가 만든 결과와 모양은 다를 수 있습니다.

지금 이 브라우저에는 내 GitHub만 로그인돼 있어. 내 첫 웹앱을 만들어서 인터넷에 배포하고 싶어.

만들 것: 발표 순서·모둠 랜덤 뽑기

순서대로 해 줘.
1) Vercel(vercel.com/signup)과 Supabase(supabase.com/dashboard/sign-up)에 'Continue with GitHub'로 가입해 줘. 이미 가입돼 있으면 넘어가. 요금제는 무료(Vercel Hobby, Supabase Free)만 골라.
2) GitHub에 my-first-app 공개 저장소를 만들어 줘. 같은 이름이 있으면 뒤에 숫자를 붙여.
3) 위 웹앱을 index.html 파일 하나로 만들어 그 저장소에 올려 줘. HTML, CSS, JavaScript를 한 파일에 넣고, 휴대폰과 교실 화면에서도 보기 좋게, 화면 글자는 한국어로 해 줘. 올린 뒤 GitHub에서 코드가 깨지지 않았는지 확인해 줘.
4) 학생 이름·연락처·성적 같은 개인정보는 코드에 넣지 마. 이름이 필요하면 화면에서 그때그때 입력하게 하고, 입력한 내용은 다른 곳으로 보내지 마.
5) vercel.com/new 에서 그 저장소를 Import하고 Deploy해 줘. GitHub 연결 권한을 고르는 화면이 나오면 my-first-app 저장소만 고르게 해 줘.
6) 배포된 주소(https://….vercel.app)를 직접 열어서 화면이 제대로 나오는지 확인하고, 주소를 알려 줘.

지킬 것
- GitHub·Vercel·Supabase의 권한 승인(Authorize·Install) 화면에서는 멈추고 나에게 확인받아.
- 카드 입력, 결제, 유료 요금제 화면이 나오면 바로 멈춰.
- 비밀번호나 인증 코드가 필요하면 멈추고 나에게 물어봐.
- 내 다른 계정이나 다른 사이트는 쓰지 마.

2. 문장을 복사해서 Aside의 새 작업(Task) 칸에 붙여 넣고 보냅니다. 권한은 기본값 Guard 그대로 둡니다.
3. Aside가 승인을 물으면 화면을 보고 아래 기준으로 판단합니다.

바이브코딩은 「말하기 → 확인하기」를 되풀이하는 일입니다. 고칠 점을 말하면 Aside가 GitHub의 코드를 고치고, Vercel이 알아서 다시 배포합니다.

방금 배포한 my-first-app 웹앱을 고쳐 줘.
고칠 것: 글자와 버튼을 크게, 교실 TV·전자칠판에서도 잘 보이게
GitHub의 index.html을 고쳐서 커밋하고, Vercel이 다시 배포하면 내 주소에서 바뀐 걸 직접 확인한 뒤 알려 줘.
결제나 비밀번호 화면이 나오면 멈춰.

휴대폰으로도 열어 보고, 동료 선생님이나 가족에게 주소를 보내 봅니다. 학생에게 보내기 전에는 화면과 코드에 개인정보가 없는지 한 번 더 봅니다.

지금 앱은 새로 고침하면 기록이 사라집니다. Supabase를 붙이면 남긴 글이 저장됩니다. 연수나 교사 모임에서 한 줄 소감을 받아 보는 연습으로 좋습니다. 이것도 말로 시킵니다.

방금 배포한 my-first-app에 방명록을 붙여 줘.
1) Supabase에서 새 프로젝트 guestbook을 만들어 줘. 요금제는 Free, Region은 Northeast Asia (Seoul), Database password는 Generate a password로 해 줘.
2) SQL Editor에서 방명록 테이블을 만들고 RLS를 켜 줘. 누구나 읽고 새 글만 쓸 수 있게(수정·삭제는 막기) 정책을 만들고, anon 역할에 필요한 grant도 줘.
3) 글쓴이 이름·연락처 칸은 만들지 말고, 한 줄 글만 받게 해 줘.
4) 프로젝트의 Connect 화면에서 Project URL과 Publishable key(sb_publishable_로 시작)만 가져와서 index.html에 방명록을 붙여 줘. Secret key는 절대 쓰지 마.
5) GitHub에 커밋하고, 다시 배포된 내 주소에서 글이 저장되는지 직접 확인해 줘.
카드 입력이나 유료 요금제 화면이 나오면 멈춰.

Aside가 멈추거나 크레딧이 떨어지면 같은 일을 손으로 합니다. 평소 브라우저에서 해도 됩니다.

웹페이지를 하나 만들어 줘.
- 만들 것: 발표 순서·모둠 랜덤 뽑기
- index.html 파일 하나에 HTML, CSS, JavaScript를 모두 넣어 줘.
- 휴대폰과 교실 화면에서도 보기 좋게, 화면 글자는 한국어로 해 줘.
- 학생 이름 같은 개인정보는 코드에 넣지 말고, 필요하면 화면에서 입력하게 해 줘.
- 설명은 짧게 하고, 완성된 전체 코드를 한 번에 보여 줘.

단추 이름은 2026년 10월 20일 기준입니다. 로그인 없이 볼 수 있는 화면(GitHub 로그인, Vercel·Supabase 가입)은 실제 화면으로, 나머지는 각 회사 공식 도움말과 Supabase 공개 소스로 확인했습니다. 조금 달라도 같은 뜻의 단추를 누르면 됩니다.

모두 2026년 10월 20일에 확인했습니다.

링크는 모두 각 회사의 공식 주소이며, 추천인·제휴 링크가 아닙니다.