배포하기

지금까지 만든 신청 앱은 바이브 코딩의 미리보기 안에서만 돕니다. 친구가 휴대폰으로 열려면 내 주소가 있어야 합니다. 바이브 코딩 오른쪽 위의 [배포하기]를 누르면 위니버시티 배포로 올라갑니다.

배포는 휴대폰 본인인증을 마친 만 14세 이상 회원이 씁니다. 인증을 하지 않았다면 배포 창에 쓸 수 없는 까닭과 '배포 화면에서 확인하기' 링크가 나옵니다. 무료 회원은 웹페이지 3개와 서버가 있는 앱 1개를 둘 수 있고(스터디 부스트·플러스 회원은 10개와 3개), 이 신청 앱이 그 서버가 있는 앱 한 자리를 씁니다.

1. 올리기 전에 /test 빼기

3장 3절에서 본 대로 /test는 진짜 명단에 신청 30개를 넣는 단추이고, 키 확인이 없습니다. 배포한 앱에 남아 있으면 주소를 아는 누구나 눌러 열 자리를 한 번에 채울 수 있습니다. 화면을 거치지 않는 요청으로도 정원을 채울 수는 있으니 /test를 뺀다고 장난이 사라지지는 않습니다. 그래도 단추 하나로 하게 둘 까닭은 없습니다. 배포하기 전에 이렇게 말합니다.

/test 화면을 빼 줘. 신청 화면과 주최자 화면은 그대로 두고, 다시 시험할 때는 다시 만들어 달라고 할게.

5장 1절에서 /test에 단 [키 없이 지우기 보내기]도 함께 빠집니다. 미리보기 주소 칸에 /test를 넣어 열었을 때 시험 화면이 더 나오지 않는지 봅니다. 그리고 [API 문서]를 엽니다. GET /test 줄이 없어졌는지, 지우는 줄이 DELETE /api/applicants/{applicant_id} 하나뿐인지 봅니다. 남는 줄은 명단 보기·신청하기(/api/applicants의 GET·POST), 주최자 확인(GET /api/admin/check), 마감(PATCH /api/admin/status), 지우기, GET /admin의 여섯 줄입니다. 그 밖에 지우거나 바꾸는 줄이 있으면 무엇인지 AI에게 묻고, 키 확인이 없는 줄이면 빼 달라고 합니다.

2. 배포 창

처음이면 [새 앱으로 배포]입니다. 서버가 있는 앱 자리를 이미 다른 앱이 쓰고 있다면 새 앱은 만들 수 없고, [내 앱에 덮어쓰기]로 그 앱에 올라가 있던 내용을 이 프로젝트 파일로 바꿉니다.

'주소에 쓸 이름'은 영어 소문자로 시작하고 소문자·숫자·하이픈(-)으로 3~30자입니다. 하이픈으로 끝나거나 하이픈을 연달아 쓸 수는 없습니다. saturday-study로 정하면 주소는 https://saturday-study.wenivops.co.kr이고, 다른 사람이 이미 쓰는 이름이면 칸 아래에 알려 줍니다.

배포에 성공한 앱은 갤러리에 자동으로 공개됩니다. 앱 화면·앱 이름·주소·제목·소개가 공개되고, '갤러리에 올리지 않기'는 플러스·스터디 부스트 회원만 켤 수 있습니다.

이름을 넣고 [배포하기]를 누르면 "설치까지 2~3분 걸릴 수 있어요."라는 진행 표시가 나옵니다. 끝나면 주소와 함께 [주소 복사], [앱 열기], [앱 관리]가 나오고, 처음 열 때는 준비하느라 몇 초 걸릴 수 있다는 안내와 갤러리에는 3~4시간 뒤 올라간다는 안내가 붙습니다.

배포가 실패하면 "배포하지 못했어요."와 오류 내용이 나옵니다. [AI에게 고쳐 달라고 하기]를 누르면 바이브 코딩 입력창에 "배포가 실패했어요. 원인을 찾아 고쳐 줘."와 오류 내용이 채워지니, 그대로 보내고 AI가 고친 뒤 다시 [배포하기]를 누릅니다.

배포한 앱은 빈 명단에서 시작합니다. 배포 단추는 프로젝트의 코드 파일과 올린 파일을 묶어 보내고, 미리보기의 명단은 미리보기 서버에 남아 따라가지 않습니다. 3장 1절에서 실습 API의 명단이 내 서버로 따라오지 않았던 것과 같은 일입니다. 미리보기에 쌓인 시험 신청은 걱정하지 않아도 됩니다.

3. ADMIN_KEY 넣기

배포를 마친 앱의 /admin은 아직 잠겨 있습니다. ADMIN_KEY를 넣기 전이라 미리보기와 똑같이 닫혀 있습니다(5장 2절). 배포한 순간부터 키를 넣기 전까지 주최자 기능이 열려 있는 틈은 없습니다.

1. 배포 완료 창의 [앱 관리]를 누릅니다. 나중에는 위니버시티 학습 도구의 배포 화면에서 내 앱을 눌러 들어갑니다.
2. 앱 화면의 '환경변수'에서 '이름' 칸에 ADMIN_KEY, '값' 칸에 정해 둔 키를 넣고 [저장]을 누릅니다. 이름은 대문자까지 똑같이 씁니다. 그 칸 아래에는 "서버가 있는 앱은 저장하면 다시 시작해서 바로 반영해요."라고 적혀 있습니다.
3. 내 주소 뒤에 /admin을 붙여 엽니다(https://saturday-study.wenivops.co.kr/admin). 키를 넣고 [확인]을 눌러 "확인되었어요."와 명단이 나오는지 봅니다.

3번에서 여전히 "관리자 키가 아직 설정되지 않았어요."가 나오면 키 값이 앱에 닿지 않은 것입니다. 이름 철자를 다시 보고, 같은 화면 '실행 로그'의 [다시 시작]을 누른 뒤 다시 확인합니다. 그래도 같으면 그 증상을 바이브 코딩에 말합니다. 키 값은 쓰지 않습니다.

4. 주소를 보내기 전에

5장에서 그림으로만 따라간 주최자 화면을 이제 내 주소에서 직접 씁니다. 갤러리 그림은 배포하고 3~4시간 뒤에 찍히니, 그 전에 아래를 마치고 시험 신청을 지워 두면 모르는 사람이 들어오기 전에 이상한 곳을 찾고 갤러리 그림에도 시험 신청이 찍히지 않습니다.

1. 휴대폰에서 내 주소를 엽니다. 신청 칸이 화면 밖으로 넘치지 않는지, 단추가 손가락으로 누르기 좋은지 봅니다.
2. 친구와 각자 휴대폰으로 한 사람씩 차례로 신청합니다. 두 사람이 명단에 한 번씩 들어갔는지, 남은 자리가 둘만큼 줄었는지, 내 화면을 새로 고치면 친구의 신청이 보이는지 봅니다. 3장의 시험은 모두 한 컴퓨터에서 보낸 것이라, 서로 다른 휴대폰에서 들어오는 신청은 이것이 처음입니다. 30명이 한꺼번에 신청하는 경우는 3장의 /test가 맡았고, 배포한 주소에서는 시험하지 못한 채로 남습니다.
3. /admin에 틀린 키를 넣어 "관리자 키가 맞지 않아요."가 나오는지, 맞는 키로 "확인되었어요."가 나오는지 봅니다. 키를 넣은 서버가 틀린 키를 막는지는 미리보기에서 볼 수 없었으니 여기서 처음 확인합니다. [신청 마감하기]를 눌러 신청 화면이 "신청이 마감되었어요"로 바뀌는지 보고, [신청 다시 열기]로 돌려놓습니다.
4. 1~3번에서 넣은 신청을 주최자 화면의 [지우기]로 모두 지우고 "아직 신청자가 없어요."를 확인합니다.

이것을 마치면 주소를 보냅니다. 그 뒤로 고칠 것이 생기면 바이브 코딩에서 고치고 다시 배포합니다(6장 2절).