# 핸드폰만으로 하는 시니어를 위한 AI 프로그램 웹 구현

- 작성자: [은근한 여우](https://community.clauders.ai/member/imported-member-CvEAn1wec2)
- 공간: [Claude Code MVP 공장](https://community.clauders.ai/cto)
- 게시: 2026-10-11
- 연재: [Claude Code MVP 공장 시즌 9](https://community.clauders.ai/series/cto-season-9) 3/3편
- 태그: #CTO
- 주소: https://community.clauders.ai/cto/post/%ED%95%B8%EB%93%9C%ED%8F%B0%EB%A7%8C%EC%9C%BC%EB%A1%9C-%ED%95%98%EB%8A%94-%EC%8B%9C%EB%8B%88%EC%96%B4%EB%A5%BC-%EC%9C%84%ED%95%9C-ai-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8-%EC%9B%B9-%EA%B5%AC%ED%98%84-833589d6-1343-8176-85fe-2cf4cea127d9

---

## 연습 주제 재검토 — 사진 보내기 후보 제외 (2026-10-11)

사용자 피드백: 사진 보내기는 카카오톡 사용자가 쉽게 할 수 있으므로 첫 연습 과제로 부적합. 위 시작 프롬프트의 사진 보내기는 폐기된 후보이며 확정 주제가 아니다.

대체 후보 세 가지(아직 선택하지 않음):

1. 기차표 예매 연습: 출발·도착역, 날짜·인원, 열차 시간·좌석을 고르고 최종 내용을 확인하는 모의 예매. 실제 결제 없는 가상 승차권까지. 여러 선택을 연결해야 하므로 첫 스마트폰 연습 주제로 추천. 코레일 공식 승차권 조회에서 역·날짜·인원 선택 확인: [https://www.korail.com/](https://www.korail.com/)
2. 카페 키오스크 주문 연습: 매장/포장, 메뉴·크기·옵션, 장바구니 확인, 잘못 담은 항목 수정, 모의 결제까지. 스마트폰에서 가상 키오스크 화면을 연습하는 방식이며 실제 매장 주문은 하지 않음.
3. 와이파이 연결과 인터넷 문제 해결 연습: 가상 설정 화면에서 와이파이를 켜고 지정 네트워크를 선택하고 암호 입력. 잘못된 암호·비행기 모드 같은 미션을 해결. 실제 기기 설정을 바꾸지 않는 시뮬레이터이며 기종별 화면 차이는 제작 전 범위를 정함.

카카오톡의 메시지·사진 공유와 구별되는 학습 주제 제안이다. 카카오 계열 전체 서비스의 제공 기능에 관한 배타적 주장은 아니다. 제작·사용자 테스트 미실행.

## 후속 설계 — 익숙한 카카오톡 행동 안에서 주문 연습하기

사용자 선택: 카페 키오스크 주문 연습. 핵심 제약: 시니어에게 앱 설치·다운로드나 새 웹 서비스 이용을 요구하기 어렵다. 익숙한 행동은 카카오톡 사용, 글·영상·사진 공유, 본인이 찍은 사진 공유다.

우선 제안은 ‘카톡 사진으로 하는 1분 주문 연습’이다. 원샷이 큰 글씨·번호가 붙은 가상 주문 화면 사진을 보내고, 참여자는 번호 또는 짧은 말로 답한다. 원샷이 답에 맞는 다음 사진과 설명을 보낸다. 예: 포장 주문 미션 → ①매장 ②포장 사진 → ‘2’ 답장 → 따뜻한/차가운 선택 사진 → 메뉴·주문 내역 확인. 처음에는 1:1 대화에서 진행하며 자동 응답으로 가장하지 않는다.

만들 프로젝트는 원샷이 쓰는 ‘카톡 주문 연습 교재 제작기’다. 메뉴·가격·미션을 설정하면 문제 사진, 정답과 해설, 진행 순서와 복사용 메시지를 만들고 저장한다. 원샷은 실제 카카오톡에서 직접 보낸다. 자동 전송·카카오 API 연동·시니어 계정 등록은 첫 버전 범위에 없다. 교재의 선택지·정답·가격 합계는 검증한다.

한계: 일반 사진 안의 버튼은 작동하지 않는다. 이 방식은 화면 이해·선택 순서를 연습하며 실제 터치 조작과 동등하지 않다. 참여자 2~3명이 사진을 보고 답할 수 있는지 먼저 시험한다. 실제 기기 조작은 수업 현장에서 이어서 확인한다.

추후 참여자가 공유된 링크를 누르는 데 익숙함이 확인되면, 설치 없는 연습 페이지 링크를 카카오톡으로 보내는 방식도 검토할 수 있다. 웹사이트는 운영자가 공개 주소로 제공해야 하며 ‘무배포’가 아니다. 카카오 공식 공유 템플릿은 버튼의 웹 링크 이동을 지원하지만, 일반 채팅 사진이 대화형 앱이 되는 것은 아니다. 참고: [https://developers.kakao.com/docs/ko/message-template/common](https://developers.kakao.com/docs/ko/message-template/common)

상태: 설계 제안, 교재 제작·배포·참여자 테스트 미실행. 기존 사진 보내기 시작 프롬프트는 이 제약을 반영해 재작성해야 한다.

## 키오스크 웹 기획 인터뷰 — 현재 선택과 알림 정정

- 진행 방식: 질문은 한 번에 하나, 사지선다형, 어려운 내용은 쉽게 설명. 모든 질문 종료 후 계획서에 사용자 승인을 받은 다음에만 코드·웹 제작. 현재 코드는 생성하지 않음.
- 최초 사용자: 지인 시니어 2~3명, 카톡 링크만 받고 혼자 연습.
- 미션: 따뜻한 아메리카노 한 잔 포장.
- 모드: 단계별 쉬운 모드 후 실제 키오스크 형태의 실전 모드.
- 오류 안내: 쉬운 모드 즉시, 실전 모드 마지막 주문 확인에서 수정.
- 음성: 화면별 자동 안내 희망. 시작 버튼을 통한 재생 활성화와 기기별 실제 동작 검증 필요.
- 범위: 가상 결제·주문번호 확인·음료 받기까지. 실제 결제 없음.
- 참여자 휴대전화 기종: 미확인, 양쪽 지원을 계획하고 테스트 전 확인.
- 결과: 캡처 후 카톡 전송 선택은 취소. 웹에서 자동 수집해 원샷이 확인. 처음 카카오톡 자동 전송을 희망했으나 복잡하면 웹 확인으로 대체하도록 정정했고, 현재 웹 자동 알림 가능 여부를 문의하며 가능한 경우 채택 요청.
- 웹 알림: 결과 화면 안 새 완료 표시·자동 갱신과, 화면 밖 시스템 알림·백그라운드 푸시는 다른 기능. 후자는 알림 허용과 기기·브라우저 지원 및 추가 서버 연동이 필요. 알림 받을 원샷 기기를 확인하고 범위를 확정할 예정. 참여자에게 알림 설정을 요구하는 방향은 아님.
- 미정: 원샷 알림 수신 기기, 참여자 식별 방식, 실전 메뉴 수 등. 웹 알림 전달은 아직 구현·검증하지 않음.
- 근거: [https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API) 및 [https://developer.mozilla.org/en-US/docs/Web/API/Push_API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)

## 카페 주문 연습 — 구현 계획서 v1 (사용자 승인 전)

이 구간은 앞선 후보와 인터뷰 중간 기록보다 우선하는 최신 기획안이다. 상태: 요구사항 인터뷰 종료·계획서 작성 완료·개발 승인 대기. 앱 코드, 웹 페이지, 계정·배포·결제는 생성/실행하지 않았다.

### 1. 목적과 첫 사용자

임시 이름 ‘카페 주문 연습’. 지인 시니어 2~3명이 카카오톡으로 받은 링크를 누르고 혼자 연습한다. 참여자에게 앱 설치·회원가입·결과 캡처·카톡 전송을 요구하지 않는다. 참여자의 휴대전화 기종은 아직 모르므로 Android와 iPhone의 카카오톡 내장 브라우저에서 핵심 흐름을 검증한다.

### 2. 사용자 화면과 기능

시작 화면에서 연습 목적과 기록 수집·7일 보관 안내 → 이름 또는 별명 입력 → 쉬운/실전 모드 선택 → ‘처음이에요(메뉴 3개)’/‘해봤어요(메뉴 6개)’ 직접 선택 → 시작 버튼 → 포장·음료·온도·수량 선택 → 주문 확인·수정 → 가상 결제 → 주문번호 확인 → 번호 호출 → 음료 받기 → 느낌 버튼 → 완료.

미션은 ‘따뜻한 아메리카노 한 잔 포장’. 모드와 메뉴 수는 독립 선택이며 이전 사람의 기록을 자동 조회하지 않는다. 주문 화면은 실제 키오스크 분위기로 메뉴 사진과 장바구니를 보여주되 큰 글씨·터치 영역을 유지한다. 쉬운 모드는 단계별 화면과 즉시 오류 안내, 실전 모드는 자유 선택 후 주문 확인 단계에서 미션과 다른 부분을 수정한다. 어느 모드든 하나를 끝내면 완료다.

음성은 시작 버튼 뒤 화면마다 자동 안내한다. 읽는 내용은 화면에도 표시하고 다시 듣기·소리 끄기를 제공한다. 음성 재생이 차단되더라도 글과 버튼으로 완료할 수 있어야 한다. 번호 호출은 소리와 화면을 함께 사용한다. 실제 카드번호 입력·결제·매장 주문은 없다. 가격과 사진은 연습용이며, 실제 브랜드 화면의 복제품으로 가장하지 않는다.

소감은 ‘쉬웠어요/조금 어려웠어요/많이 어려웠어요’ 버튼 중 선택한다. 글·음성 입력은 넣지 않는다. 완료 판정은 음료 받기 성공에 두고 소감은 뒤에서 저장하여 창을 닫아도 완료 결과가 사라지지 않도록 제안한다.

### 3. 결과와 관리자 화면

개별 연습 ID로 이름/별명, 선택 모드·메뉴 수, 시작 시각, 마지막 단계, 완료 시각, 소요시간, 잘못 선택한 단계·도움말 사용, 느낌 응답을 저장한다. 같은 별명은 동일인임을 보증하지 않으므로 자동 합치지 않는다. 완료율은 고유 인원 비율이 아닌 연습 시작 건 대비 완료 건 비율로 계산한다.

중간에 닫힌 연습은 ‘미완료’와 마지막 단계로 표시한다. 오래 머문 이유를 어려움으로 단정하지 않으며, 틀린 선택·도움말 사용은 관찰 지표로 표시한다. 네트워크 실패 시 저장 여부를 구분하고 재시도하며, 같은 완료 건이 중복 집계·알림되지 않게 한다.

관리자 계정은 원샷 1명만 허용하는 이메일·비밀번호 방식 추천. 관리형 인증을 사용하고, 비밀번호를 웹 코드에 넣지 않는다. 공개 참여 화면에서는 다른 참여자의 결과를 볼 수 없다. 결과 목록, 개별 상세, 새 완료 표시, 통계 내려받기, 삭제 예정일을 제공한다.

### 4. 기록 보관·통계 다운로드

사용자 선택은 ‘삭제 전에 통계를 내려받고 웹에서는 7일 후 모두 삭제’다. 구현 세부 제안: 각 연습 시작부터 7일을 보관 기한으로 삼아 관련 이름·별명·단계·소감·집계 원천 자료를 삭제한다. 이름 없는 통계를 별도 영구 누적하지 않는다. 내려받기 버튼은 이름·별명·개별 식별자 없는 전체 통계를 CSV로 제공한다. 이 파일은 원샷 기기에 남고 웹 삭제의 영향을 받지 않는다. 다운로드하지 않아도 기한을 연장하지 않는다.

만료 데이터는 조회에서 즉시 제외하고, 정기 삭제 실행과 실제 삭제 결과를 검증한다. 배포 서비스의 휴면이나 실패로 삭제가 지연되면 완료라고 보고하지 않는다. 원본 개인정보가 앱 로그에 남지 않게 하고 제공업체 백업·로그 보존은 별도로 확인한다. ‘7일 뒤 모든 제공업체 백업까지 삭제’는 확인 없이 보장하지 않는다.

### 5. 맥·아이폰 자동 알림

결과 저장 성공 후 관리자 화면에 새 완료 표시와 자동 갱신. 화면 밖 알림은 웹 푸시로 구현 후보. 원샷 맥과 아이폰 각각 구독하고 사용자 허용을 받는다. 아이폰은 iOS 16.4 이상에서 관리자 웹의 홈 화면 추가가 필요하므로, 원샷에게만 설정 방법을 안내한다. 참여자는 홈 화면 추가·알림 허용을 하지 않는다. 카카오톡 자동 전송은 첫 버전에서 제외하는 안을 추천한다.

푸시 내용은 ‘새 연습 결과 1건’과 관리자 화면 링크를 기본으로 하고 이름은 잠금화면에 노출하지 않도록 제안한다. 푸시는 OS·네트워크·설정에 따라 지연/미수신될 수 있어 기록 저장과 분리하고 결과 화면을 정본으로 삼는다. 실제 맥·아이폰 도착을 검증하기 전에는 알림 완료라고 하지 않는다.

### 6. 기술·비용 제안

후보 구조: TypeScript 기반 웹 화면 + 서버의 결과 저장/검증 + Supabase 데이터베이스·관리자 인증 + 웹 푸시. 화면 호스팅은 비상업 개인 실험인 경우 Vercel Hobby, 저장은 Supabase Free를 우선 비교한다. 사용자에게 기술 학습을 요구하지 않고 설정 시 필요한 계정 로그인만 안내한다. 연습 앱 자체에는 생성형 AI API가 필수적이지 않다. 음성은 브라우저 음성 기능부터 검증하며 유료 음성 생성은 자동 도입하지 않는다.

무료 실험 후보: Vercel Hobby(개인·비상업 조건) + Supabase Free, 제공 기본 주소 활용. 사용량 한도 내 호스팅·DB 월 $0 목표이며 기존 AI 구독, 도메인 구매, 유료 음성은 별도. Supabase Free는 1주 비활동 시 휴면될 수 있으므로 삭제 작업·시험 기간 운용을 검증해야 한다. 무료 구성으로 필요한 보관·삭제 동작을 만족하지 못하면 배포 전 구조를 재검토한다.

장기 운영 비교: Supabase Pro 월 $25부터(사용량·추가 자원 별도). 호스팅 유료 플랜이나 도메인은 별도 비용이므로 총액 $25로 표현하지 않는다. 시니어 수업의 상업적 운영으로 확장하면 Vercel Hobby 적용 여부를 다시 확인한다. 현재 유료 구매·결제 승인은 없으며 결제하지 않는다.

### 7. 개발 순서와 3일 목표

아래는 승인 및 필요한 계정 접근이 준비된 때부터의 목표이며 보장 일정이 아니다.

- 1일차: 메뉴·가격·정답 규칙 정리 → 쉬운/실전 화면 → 가상 주문·결제·수령. 완료 기준: 두 모드와 3/6개 메뉴에서 미션을 끝까지 수행하고 오답 수정 가능.
- 2일차: 기록 저장·미완료·관리자 인증·결과 목록·통계 다운로드·7일 삭제. 완료 기준: 다른 참여자의 기록 접근 불가, 통계값 대조, 중복 완료 방지, 만료 테스트 통과.
- 3일차: 음성·맥/아이폰 알림 설정·카카오톡 링크 열기·모바일 조작·최종 시연 확인. 완료 기준: 실제 기기 확인 결과와 미확인 항목을 구분하여 보고.

원샷 승인에 제시할 추천안: 3일 안 핵심 연습·결과·통계·삭제를 우선 검증하고 맥/아이폰 푸시도 시도하되, 알림 설정으로 일정이 넘어가면 핵심 테스트부터 진행하고 알림은 후속으로 완료. 이것은 제안이며 사용자가 아직 승인하지 않았다. 모든 알림 완료를 선행조건으로 원하면 테스트 일정을 연장하는 대안이 있다.

### 8. 작업 분담·검증·발표

구현과 검토를 분리해 진행한다. 구현 단계 뒤 별도 검토 단계에서 합의된 동작을 확인하며, 현재 별도 에이전트 실행은 하지 않는다. 작은 작업마다 결과·테스트 근거를 남긴다. 핵심 검증: 올바른/잘못된 주문 경로, 뒤로 가기·새로고침, 같은 별명, 중간 종료, 저장 실패, 중복 완료, 관리자 권한, 통계 대조, 만료 삭제, 음성 차단시 진행 가능, 웹 푸시 수신.

발표는 카톡 링크 → 참여자 연습 → 자동 결과 수집 → 관리자 확인 → 이름 없는 통계 내려받기 순으로 시연한다. 실제 지인 테스트 수치를 확보하기 전에는 성공률·효과·시간 단축을 주장하지 않는다.

[https://oneshot-cafe-practice.oneshot11.chatgpt.site](https://oneshot-cafe-practice.oneshot11.chatgpt.site)

[https://oneshot-cafe-practice.oneshot11.chatgpt.site/admin](https://oneshot-cafe-practice.oneshot11.chatgpt.site/admin)

📊 [**원샷님 결과 확인하기**](https://oneshot-cafe-practice.oneshot11.chatgpt.site/admin)  
원샷님 ChatGPT 계정으로 로그인해 확인하세요.

```
마지막 장 '끝내려면 이 창을 닫아주세요.' 버튼이 없어요. 실전 하기를 눌러도 내가 원하는 주문을 할 수 없어요. 안내 나온 대로만 주문이 가능해요. 바꾸기를 하라고 했는데 여전히 바꾸기가 안 되고 처음 안내 나온 대로만 주문이 가능해요. 내가 원하는 대로 변경이 가능하도록 바꿔줘요
```

**수정해서 기존 링크에 반영했습니다.**

- **실전 연습:** 메뉴·온도·수량·매장/포장을 자유롭게 선택하고 바꿀 수 있습니다.
- **완료 화면:** 실제 주문한 내용과 **‘연습 끝내기 · 창 닫기’ 버튼**이 표시됩니다.
- 자동으로 창이 닫히지 않는 브라우저에서는 닫는 방법을 안내합니다.

👉 [**수정된 카페 주문 연습 열기**](https://oneshot-cafe-practice.oneshot11.chatgpt.site/)

열려 있던 화면은 새로고침한 뒤 **‘실전 연습’**을 선택해 주세요. 쉬운 연습은 정해진 주문을 따라하는 방식입니다.

몇 차례 연습 확인 후 링크를 지인(10명)들에게 보내 테스트 해봄.

테스트 결과 아래와 같이 수정함.

```
첫 시작으로 인사말과 함께 안내문구를 만들어 주세요. 이제 테스트는 끝났으니 실제 키오스크처럼 만들어줘요. 지금은 테스트용이라서 아주 간단한데 실제 키오스크는 많이 복잡해요. 키오스크 예를 가져오세요. 실제 키오스크는 주문 방법도 복잡하고 첨가하기도 복잡해요. 결제 방법도 복잡해요. 이런 걸 실제와 비슷하게 만들어줘요. '이름 쓰는 난'을 삭제해 주세요. '연습 방법 삭제'해 주세요. '키오스크 주문 익숙한가요?' 삭제해 주세요. 현재는 한 가지 종류의 숫자만 표기하게 되어 있어요. 여러 가지 종류, 여러 개의 숫자를 표시할 수 있도록 수정해 주세요.예를 들면 다음과 같은 방식으로 표시할 수 있어야 합니다:• 아메리카노 한 잔, 라떼 두 잔, 유자차 세 잔 초코라떼 네 잔 이런 식으로 종류별 숫자를 표시할 수 있도록 해줘요. 아직 코드는 만들지 말고 나의 승인을 먼저 받아요.
```

- 완성 후 카톡으로 보냄

☕ **카페 키오스크 연습**

차 한 잔 즐겁게 마시고 싶은데 키오스크만 보면 긴장되나요?

설치 없이 아래 링크를 눌러 천천히 연습해 보세요. 원하는 음료를 골라 주문부터 결제까지 연습할 수 있어요. **실제 돈은 결제되지 않아요.**

연습한 느낌도 들려주세요. 도움이 되셨다면 다른 분께도 이 링크를 전해주세요 😊

[https://oneshot-cafe-practice.oneshot11.chatgpt.site/](https://oneshot-cafe-practice.oneshot11.chatgpt.site/)

## 결과와 배운 점

배운점:

처음 구상부터 기획 설계 결과 수정 모든 단계를 AI와 상의해서 하니까 편하다.

AI가 상의하면서 자동으로 학습하게 되니까 진행이 빠르고 쉽다.

중국에서 차단된 웹과 앱들을 우회하는 VPN 사용법을 알게 되었다.

시행착오:

연습용 키오스크를 만들면서 AI가 정답을 미리 말하면서 누르라고 하여 연습자의 선택권이 없이 만들었다. 나중에 연습 사용자가 선택하도록 수정하여 다시 만들었다.

앞으로의 계획이 있다면 들려주세요:

테스트 결과를 보고 본격적인 웹 구현.

키오스크 이외에, 극장표 사는 법 연습 웹, 와이파이 인터넷 구현 연습 웹, 사진 및 블로그 동영상 자동화 파이프라인 연습 웹 구현.

## 도움 받은 글

CTO 스터디장 개발자F 10/10 토요모각 지식공유.