«실전 01»에서 만든 교육 현장 피드백 보드에 버튼 하나를 더 달았습니다. 강사가 «✨ AI 요약»을 누르면 학습자 소감을 Gemini가 읽고 좋았던 점 · 아쉬운 점 · 다음 차수에 바꿀 것으로 정리합니다. 요청은 웹 Claude Code에 우리말로 했고, 코드는 한 줄도 직접 쓰지 않았습니다. 이 글은 그 과정에서 꼭 지켜야 했던 네 가지 약속을 실제 화면으로 보여 줍니다.
앱에 AI를 넣는다는 건, 내 앱이 Gemini·ChatGPT에게 대신 질문을 보내고 답을 받아 화면에 보여 준다는 뜻입니다. 이때 «유료 열쇠(API 키)»가 필요합니다. 이 열쇠를 화면 코드(홀)에 두면 누구나 F12로 꺼내 갈 수 있습니다(«바이브 04»에서 실제로 경고를 받은 그 사고). 그래서 열쇠는 서버(주방)에만 둡니다.
| 열쇠를 홀(화면 코드)에 | 열쇠를 주방(서버)에 | |
|---|---|---|
| 만들기 | 쉽다 — AI 스튜디오 예제 그대로 | «서버에서만 쓰게 해줘» 한 줄 더 |
| 열쇠가 보이나 | F12로 누구나 꺼냄 | 보이지 않음 |
| 누가 쓸 수 있나 | 열쇠를 주운 아무나, 무제한 | 로그인한 강사만, 1분에 한 번 |
| 어울리는 곳 | 나 혼자 내 컴퓨터에서 시험할 때 | 남에게 주소를 주는 모든 앱 |
«AI 요약 버튼 달아줘»만 써도 만들어 줍니다. 하지만 남에게 쓰게 할 앱이라면 아래 네 가지 약속을 꼭 같이 적으세요. 실제로 보낸 요청은 이것입니다.
| 약속 | 요청문에 쓴 말 | 없으면 생기는 일 |
|---|---|---|
| ① 열쇠는 주방에 | «키는 화면 코드에 넣지 말고 서버에서만» | 열쇠 유출 → 남이 내 돈으로 AI 사용 |
| ② 강사만 | «강사 로그인한 사람만 요약 버튼» | 학습자·외부인이 버튼을 마구 누름 |
| ③ 1분에 한 번 | «한 차수에 1분에 한 번만(요금 폭주 방지)» | 연타·새로고침마다 요금 |
| ④ 글만 보내기 | «이름이나 개인정보는 보내지 말고 소감 글만» | 학습자 개인정보가 외부 AI로 나감 |
파일 11개, 430줄이 바뀌었고 PR(#2)로 main에 합쳐졌습니다. 그중 열쇠를 쓰는 파일(lib/gemini.ts)은 맨 위에 «서버 전용» 표시가 붙어 있어서, 실수로 화면 코드에 섞이면 빌드가 아예 실패하도록 막혀 있습니다.
AI는 «키 이름은 GEMINI_API_KEY»까지만 정하고, 실제 값은 사람이 넣게 했습니다. Vercel → 프로젝트 → Settings → Environment Variables에 이름과 값을 넣고 Sensitive(민감)로 저장한 뒤, 다시 배포(Redeploy)하면 끝입니다.
Sensitive 값은 저장한 뒤 관리자도 다시 볼 수 없습니다. 이번에 실제로 겪었습니다 — 체험용 강사 비밀번호를 잊어 내려받으려 했더니 진짜 값 대신 빈칸 표시만 왔습니다. 그래서 새 비밀번호로 바꿔 넣었습니다. 열쇠·비밀번호는 금고에 넣기 전에 본인만 아는 곳(비밀번호 관리자)에 적어 두세요.
이번 실습은 기존 Gemini 키를 썼습니다. 실제 운영에서는 AI 스튜디오에서 이 앱 전용 키를 새로 만들어 넣으세요. 한 개가 새도 그 앱의 키만 지우면 됩니다(«바이브 04» 네 단계).
예시 소감 4개 중 아쉬운 점은 «롤플레이 시간» 하나뿐이었습니다. 그런데 «2개»를 요청했더니 두 번째 칸에 «롤플레이 외에는 특별히 지적된 아쉬운 점이 없었습니다»라고 채웠습니다. 지어내지는 않았지만, 개수를 정해 주면 억지로 채울 수 있습니다. 요청할 때 «해당 내용이 없으면 없다고 써줘»를 덧붙이고, 결과는 소감 원문과 함께 보세요.
| 상황 | 어림 계산 | 대략 요금 |
|---|---|---|
| 소감 30개 요약 1번 | 읽는 양 약 1,500토큰 + 쓰는 양(생각 포함) 약 2,000토큰 | 약 $0.009 ≈ 10원 안팎 |
| 하루 4개 차수 × 3번씩 | 12번 | 약 150원 |
| 한 달 20일 운영 | 240번 | 약 3,000원 |
| 1분 제한이 없는데 열쇠가 샜다면 | 자동 프로그램이 1초에 여러 번 | 하루에 수십만 원도 가능 |
토큰 수는 글 길이와 «생각하는 양»에 따라 달라지고, 환율도 바뀝니다. 정확한 금액은 AI 스튜디오의 사용량 화면에서 보세요. 요점은 하나 — 정상 사용은 몇천 원, 사고는 수십만 원입니다. 그래서 요청문의 «강사만 · 1분에 한 번»과, «확장 04»의 월 지출 한도를 함께 겁니다.
관리자 화면에 «AI 요약» 버튼을 붙여줘. 누르면 지금까지 모인 응답 글을 Gemini가 읽고 좋았던 점 3개, 아쉬운 점 2개, 다음에 바꿀 것 1개로 정리해 보여줘. 해당 내용이 없으면 없다고 써줘. - API 키는 화면 코드에 절대 넣지 말고 서버에서만 쓰게 해줘. 키 값은 내가 배포처에 직접 넣을게 - 로그인한 관리자만 쓸 수 있게 하고, 1분에 한 번만 누를 수 있게 막아줘 - 응답이 3개 미만이면 AI를 부르지 말고 «응답이 더 모이면 요약할 수 있어요»만 보여줘 - 이름·이메일·전화번호 같은 개인정보는 AI에 보내지 말고 응답 글만 보내줘 내가 직접 해야 하는 일이 있으면 멈추고 알려줘.
이 앱에서 AI API 키가 어디서 쓰이는지 점검해줘. 1) 브라우저로 내려가는 화면 코드에 키나 키를 꺼낼 길이 있는지 2) 로그인하지 않은 사람이 AI 기능을 부를 수 있는지 3) 한 사람이 연달아 눌렀을 때 막는 장치가 있는지 결과를 쉬운 말로 알려 주고, 고칠 게 있으면 고쳐줘.
이 앱의 AI 기능을 한 번 쓸 때 대략 몇 토큰이 드는지, 지금 쓰는 모델의 공식 가격표로 1번, 하루 50번, 한 달 1,000번일 때 요금을 원화로 어림해줘. 가격표 주소도 같이 알려줘.
| 이어서 읽기 | 무엇을 |
|---|---|
| 바이브 04 · 열쇠 | 열쇠가 새는 네 곳, 샜을 때 네 단계 |
| 실전 01 · 피드백 보드 | 이번 글의 앱을 처음 만든 과정 |
| 확장 01 · 로그인 | «강사만»을 만드는 세 가지 문 |
| 확장 04 · 운영과 비용 | 월 지출 한도 거는 곳 |
2026년 10월 8일 «실전 01»의 웹 Claude Code 대화방에 위 요청을 보내 PR(#2)을 받고, Vercel에 키를 넣어 재배포한 뒤 실제 배포 주소에서 강사로 로그인해 «AI 요약»을 눌렀습니다. 차수와 소감은 모두 가상의 예시입니다. 요금은 공식 가격표로 어림한 값입니다.