AI 코딩 어시스턴트(Claude 또는 ChatGPT 유료)에게 프롬프트*를 넣어, 원장님이 직접 작업실*을 만들고 그 안에 구글 리뷰 작성 도우미를 완성하는 절차서입니다. 먼저 작업실 폴더 구조와 공통 지시서*를 만들고, 깃허브*와 버셀*을 연결해 ‘올리면 자동으로 배포*되는’ 흐름(CI/CD)*부터 완성한 뒤, 그 위에서 기능을 하나씩 붙입니다. 필요한 자료(버셀 연동·API 키·리뷰 링크)는 전부 해당 STEP 안에 들어 있으니, 위에서 아래로 스크롤하며 그대로 진행하시면 됩니다. 화면으로 보실 때는 각 프롬프트의 복사 버튼을 누르면 한 번에 복사됩니다.
AI는 리뷰 ‘초안’만 제시합니다. 게시는 환자가 초안을 읽고 고친 뒤 복사 → 구글 리뷰 페이지 이동 → 붙여넣기로 직접 합니다(자동 게시 아님). 환자가 고른 자기 실제 경험(방문유형·언어·치료·경험)을 바탕으로 문장을 다듬는 작성 보조이며, 허위·과장 후기를 만들지 않습니다. 만드는 과정 전체에서 실제 환자정보(이름·연락처·차트번호)는 입력하지 않고 더미*(가상) 데이터만 사용합니다.
⚠️ 실제 도입 전 반드시 확인. 구글 지도 정책은 사업자가 리뷰에 넣을 특정 문구를 요청하는 것을 금지하고, 의료법 제56조는 치료경험담 광고를 금지합니다(제27조는 환자 유인·알선 금지). 이 문서의 산출물은 스터디 실습용 예제이며, 병원이 문구를 지정하거나 리뷰의 대가로 할인·사은품을 제공해서는 안 됩니다. 실제 진료실에서 환자에게 제공하기 전에는 의료광고 자율심의기구 심의와 법률 자문을 거치세요.
완성하면, 환자가 스마트폰으로 열어 몇 번의 선택만 하면 AI가 맞춤 리뷰 초안을 만들어 주고, 복사 버튼과 리뷰 페이지 열기 버튼으로 손쉽게 등록하도록 돕는 한 장짜리 웹페이지가 남습니다. 언어를 고르면 화면 전체가 그 언어로 바뀌는 다국어 페이지입니다. 그리고 그 페이지를 담는 작업실 — 앞으로 다른 프로젝트도 같은 방식으로 늘려 갈 폴더 구조 — 가 함께 남습니다.
시작 전에 스마트폰으로 위 버튼을 눌러 선택 → 문구 생성 → 복사 → 리뷰 페이지 이동까지 한 번 해 보세요. 오늘 오후에 이걸 원장님 손으로 직접 만듭니다.
깃허브와 버셀을 한 번 연결해 두면, 이후 깃허브에 올릴 때마다(push) 버셀이 자동으로 다시 배포합니다 — 이 자동 흐름을 CI/CD*라고 부릅니다. 주소는 그대로 유지되고 내용만 최신으로 바뀌므로, 실습 내내 폰에 그 주소를 띄워 두고 새로고침으로 진행 상황을 확인합니다. 반영까지는 보통 30초~1분 걸립니다.
실습 시작 전, 당일 현장에서 조교와 함께 아래 다섯을 순서대로 진행합니다. 이 순서로 하면 계정이 하나로 이어져 중간에 막히지 않습니다. 가입·설치는 무료이고(버셀 무료 플랜은 약관상 비상업·개인 용도 전용), AI 어시스턴트만 Claude·ChatGPT 중 하나가 유료여야 합니다. 터미널*은 쓰지 않습니다 — 전부 클릭으로 진행합니다.
실습 들어가기 전 체크 — ① VS Code 왼쪽 아래에 깃허브 계정이 표시된다 ② AI 확장이 로그인돼 있다 ③ vercel.com 에 깃허브 계정으로 로그인된다 ④ 바탕화면에 작업실 폴더가 있다. Git이 제대로 설치됐는지는 STEP 0에서 AI가 확인해 줍니다. 구글 계정은 내 병원 리뷰 링크(STEP 5)를 찾을 때도 필요합니다.
오늘 실습은 STEP 0~6, 아래 흐름으로 진행합니다. AI에게 시키는 일(프롬프트)과 사람이 클릭으로 하는 일(버셀 연동·환경변수·Place ID)이 섞여 있는데, 필요한 자료는 전부 해당 STEP 안에 순서대로 들어 있습니다. 문서 순서 = 실행 순서이니, 위에서 아래로 스크롤하며 그대로 진행하세요.
목표. 작업실의 공통 지시서와 폴더 구조를 만들고, 그 안에 오늘의 프로젝트(review-helper)를 깃 저장소*로 만들어 둔다. README에 기술 스펙(버셀 + Node 서버리스)을 적어 이후 단계에서 AI가 같은 방식으로 만들게 한다.
지시서는 매 세션 자동으로 적용되므로 규칙을 채팅마다 다시 말할 필요가 없고, 프로젝트가 늘 때는 projects/ 아래 폴더 하나만 추가하면 됩니다. 작업일지는 다음 세션의 AI가 이어서 일할 수 있게 하는 기억입니다 — 앞 강의(슬라이드 04·05)의 구조를 지금 그대로 만든 것입니다.
한 번에 다 만들지 말고, 한 단계 만들고 → 올리고 → 배포 주소에서 확인하는 리듬으로 갑니다. STEP 1에서 파이프라인이 연결된 뒤로는, 각 단계의 마지막이 항상 "올려 줘" → 폰에서 새로고침입니다.
좋은 프롬프트*는 세 가지를 담습니다.
목표. 뼈대뿐인 지금 상태를 먼저 배포한다. 깃허브 올리기도, 버셀 연동도 터미널 없이 클릭으로. 여기가 끝나면 내 주소가 생기고, 이후 모든 수정이 자동으로 배포된다.
이제부터의 리듬 — 고치고 → "올려 줘" → 30초~1분 뒤 같은 주소 새로고침. 배포 상태는 버셀 대시보드의 Deployments 탭에서 실시간으로 보입니다(Building → Ready). 실패(빨간 표시)하면 그 항목을 눌러 나온 오류 메시지를 그대로 AI에게 붙여넣고 "원인을 먼저 설명한 뒤 고쳐 줘"라고 하세요. 새 배포가 실패해도 직전 성공본이 계속 서비스되므로 사이트가 죽지는 않습니다.
목표. 환자가 방문 경험을 고르는 선택 버튼 화면을 만들어 배포 주소에서 확인한다.
목표. 언어 버튼을 고르면 리뷰 문구만이 아니라 화면의 모든 문구(제목·항목·선택지·버튼·안내)가 그 언어로 함께 바뀌게 한다 — 외국인 환자도 처음부터 자기 언어로 쓸 수 있게.
목표. "리뷰 문구 만들기"를 누르면, 고른 값으로 AI가 리뷰 초안을 만든다. 순서 중요 — 키를 먼저 등록하고 나서 프롬프트(등록한 환경변수는 다음 배포부터 적용되므로).
이 키는 오늘 실습 전용입니다. 버셀 환경변수 API_KEY의 Value 칸에만 붙여넣으세요. 행사 종료 후 폐기됩니다.
⚠️ API 키는 화면·저장소에 그대로 노출 금지. 정적 페이지의 script.js 에 키를 적으면 배포된 뒤 누구나 볼 수 있으므로, 반드시 서버리스 함수 + 버셀 환경변수 API_KEY 로 둡니다. 환경변수는 등록·수정해도 이미 만들어진 배포에는 적용되지 않고 ‘다음 배포부터’ 적용됩니다 — 그래서 키를 먼저 등록하고 나서 "올려 줘" 순서가 맞습니다. 순서가 바뀌었다면 버셀 Deployments → 최신 항목 ⋯ 메뉴 → Redeploy 로 한 번 다시 배포하면 됩니다. 제공받은 실습용 키는 행사 후 사용이 제한될 수 있으니, 계속 쓰시려면 6번 부록대로 내 키로 바꿔 주세요.
목표. 생성된 초안을 클립보드*에 복사하는 버튼과, 우리 병원 리뷰 페이지로 이동하는 버튼을 붙인다. 먼저 내 병원 리뷰 링크(Place ID)를 찾고, 아래 입력칸에 넣으면 프롬프트에 자동 반영된다.
아래 구글 공식 문서(한국어)를 열면 페이지 안에 Place ID 찾기(Place ID Finder) 지도가 있습니다. 검색창에 내 병원 이름을 넣고 지도에서 우리 병원을 클릭하면 Place ID*(ChIJ… 형태)가 표시되니 그대로 복사하세요.
구글 계정으로 로그인한 상태에서 구글에 내 병원 이름 검색 → 관리 카드의 리뷰 요청하기 링크를 복사해도 됩니다(구글 지도 앱 → 내 비즈니스 프로필 → 프로필 공유도 동일). 이렇게 얻은 링크는 주소 형태가 g.page/r/… 처럼 다를 수 있는데, 같은 리뷰 작성 화면으로 연결되므로 그대로 프롬프트의 링크 자리에 넣으면 됩니다.
붙여넣으면 아래 노란 내_PLACE_ID 자리가 전부 바뀝니다. 비우면 원래대로 돌아갑니다.
Place ID는 병원 이전·정보 변경으로 시간이 지나면 바뀔 수 있습니다. 링크가 안 열리면 위 Finder에서 다시 확인하세요(1년에 한 번 점검 권장).
목표. 5번 최종 검수 체크리스트를 통과시키고, 작업실의 규칙대로 오늘의 작업일지를 남긴다.
오늘은 주최 측이 준비한 실습용 키를 썼습니다. 계속 운영하시려면 내 키를 발급받아, 버셀 Settings → Environment Variables 의 API_KEY 값만 교체하고(이름은 그대로) Deployments → ⋯ → Redeploy 를 한 번 눌러 주면 끝입니다. 키는 앱 로그인(claude.ai / chatgpt.com)과는 별개의 ‘프로그램용 열쇠’이며, Claude 또는 ChatGPT 중 하나만 준비하면 됩니다.
본문 * 표시 용어의 뜻입니다. 더 자세한 설명은 용어집(인쇄용)을 참고하세요.
/api/…)에서 서버 대신 잠깐 실행되는 코드(오늘은 Node 기반). API 키를 브라우저에 노출하지 않고 AI를 부를 때 씁니다.ChIJ… 처럼 영문·숫자가 섞인 값, 길이 제한 없음). 숫자 번호가 아니고 시간이 지나면 바뀔 수 있어 링크가 안 열리면 다시 확인합니다.치과의사 바이브코딩 실습 스터디
2~3분이면 끝납니다. 주신 답은 다음 스터디를 만드는 데 그대로 씁니다.
응답은 스터디 운영·개선 목적으로만 씁니다.
주신 의견은 다음 스터디 준비에 그대로 반영하겠습니다.