코딩을 몰라도 AI에게 말로 시켜서 "내 앱"을 만드는 과정 — 재단 직원 소그룹 교육
이 교육은 코드를 한 줄도 몰라도 AI에게 말로 시켜 앱을 만드는 과정을 처음부터 끝까지 보여주는 시연 중심 교육입니다. 강의 재료는 가상의 예제가 아니라, HC가 Codex(챗GPT의 코드 짜는 AI 도구)로 "북릴레이션"이라는 책 인물관계도 앱을 기획부터 배포·연결·사고 수리까지 실제로 만들어낸 여정입니다.
전원이 실습하는 강의가 아니라, HC가 시연으로 전 과정을 보여주고 챗GPT·Claude 계정을 이미 갖고 있는 참가자만 그 자리에서 일부 따라해보는 방식입니다. 챗GPT Work 7가지·클로드 7가지 도구 교육을 이미 들은 것을 선수지식으로 전제합니다.
코드를 몰라도 AI에게 말로 시켜서 "내 앱"을 만들어내는 전 과정(기획 → AI가 코드 생성 → 실행해서 확인 → 막히면 고치기)을 HC의 실제 사례로 처음부터 끝까지 목격하고, MCP·API·"API 키 방식" vs "로그인 방식"의 차이를 자기 말로 설명할 수 있게 됩니다.
이 강의는 "재단 직원을 개발자로 만드는 강의"가 아닙니다. "AI에게 시켜서 만든다"는 것이 실제로 어떤 과정인지 눈으로 보고, 언제 API 키가 필요하고 언제 필요 없는지를 구분할 줄 아는 것이 도착점입니다.
이 강의의 뼈대는 가상의 예제가 아니라 HC가 실제로 겪은 여정입니다. HC는 Codex를 이용해 "북릴레이션"(책 속 인물관계도를 보여주는 앱)을 만들어 챗GPT에 연결하는 과정을 기획 → 구현(AI가 코드를 짜는 것을 직접 목격) → 배포 → 연결 → 사고 → 수리까지 전부 실제로 겪었고, 이 경험 전체가 1단계(Codex편)의 교육 재료가 됩니다.
특히 실전에서 실제로 막혔던 사고 두 가지 — 경로 충돌로 인한 404 오류, 재배포를 빠뜨린 문제 — 를 4차시에서 그대로 보여줍니다. (npm 구버전·세션 혼동 같은 어려움도 실제로 겪었지만, 이는 강의에서 다루는 내용이 아니라 강의를 준비하며 겪은 리스크로, 8장 '위험 요소'에서 별도로 다룹니다.) 완성된 운영 화면(북릴레이션이 챗GPT에 연결되어 전체화면으로 작동하는 모습)을 함께 보여주면서, "AI가 만들어도 확인은 결국 사람 몫"이라는 메시지를 실화로 전달합니다.
개념을 먼저 설명하면 정보 나열이 되지만, 실제로 작동하는 화면을 먼저 보여준 뒤 "왜 API 키가 필요 없지?"라는 질문이 자연스럽게 생긴 시점에 개념을 풀면 그 개념이 실화에 걸려서 기억에 남습니다. (3차시를 2차시 뒤에 배치한 이유이기도 합니다.)
1단계(Codex)와 2단계(Claude Code)를 그대로 두 블록으로 삼고, 그 앞뒤로 오리엔테이션과 마무리를 붙여 "도착점 → 차시 → 완주 확인"의 흐름을 완성했습니다.
| 차시 | 제목 | 도착점 | 형식 | 소요 |
|---|---|---|---|---|
| 1 | 오리엔테이션 — 바이브코딩이 뭔가 | "바이브코딩"을 한 문장으로 설명하고, 오늘 볼 두 도구가 챗GPT Work "사이트" 기능의 어떤 확장인지 말할 수 있다 | 시연(설명 중심) | 15분 |
| 2 | Codex — 말로 시켜서 앱을 만드는 순간 | Codex에게 "이런 앱을 만들어줘"라고 요청했을 때 AI가 실제로 코드를 쓰는 과정을 설명할 수 있다 | 시연 + 계정 있는 사람 화면 동행 | 25분 |
| 3 | MCP·API 개념 — 왜 API 키가 필요 없나 (핵심 차시) | MCP·API를 비유로 설명하고, "API 키 방식"과 "로그인 방식"의 차이·장단점을 자기 말로 말할 수 있다 | 시연(개념 + 구조도) | 30분 |
| 4 | 배포·연결, 그리고 진짜 있었던 사고 | "배포"가 뭔지 설명하고, 실전에서 막혔던 사고(경로 충돌 404, 재배포 누락)를 통해 "AI가 만들어도 확인은 사람 몫"임을 안다 | 시연(운영 앱 실행 + 사고 스토리) | 25분 |
| 차시 | 제목 | 도착점 | 형식 | 소요 |
|---|---|---|---|---|
| 5 | Claude Code 설치 — 터미널(명령어를 글자로 입력하는 검은 화면) 위의 AI 동료 | Claude Code가 챗GPT/클로드 앱과 어떻게 다른지 설명하고, 로그인 방식으로 작동함을 확인한다. 계정 있는 사람은 설치까지 마친다 | 시연 + 계정 있는 사람 설치 따라하기 | 20분 |
| 6 | Claude Code로 내 컴퓨터 안에서 앱 실행하기 | Claude Code에게 말로 시켜 간단한 웹앱을 만들고, 배포 없이 "내 컴퓨터 안(로컬)"에서 브라우저로 열어 실행 화면까지 본다 | 시연 + 계정·설치 완료자 실행 따라하기 | 30분 |
| 7 | 마무리 — 1·2단계 비교 & 내 적용 계획 | Codex와 Claude Code의 차이(배포 방식·목적·난이도)를 표로 비교해 말하고, 자기 업무·아이디어에 시도해볼 것 1개를 정한다 | 시연 + 토의 | 15분 |
Claude Code 설치는 참가자 PC 환경(윈도우 관리자 권한 등)을 사전 확인할 시간이 필요하고, 완전 초보에게 새 개념 5개(MCP·API·API키·로그인·로컬-배포)를 한 번에 몰아넣으면 소화가 안 됩니다. 회차 사이에 참가자 PC·계정 상태를 점검하는 시간도 확보됩니다.
이번 교육에서 새로 배우는 개념은 MCP, API, "API 키 방식 vs 로그인 방식", 배포·로컬 실행입니다. 모두 강의식 설명이 아니라 실화 속 장면 + 비유로 풀어서, 개념이 실제 화면과 함께 기억에 남도록 설계했습니다.
| 개념 | 다루는 차시 | 비유 | 핵심 메시지 |
|---|---|---|---|
| 바이브코딩 | 1차시 | "설계도를 그리면 목수가 짓는다" — 내가 원하는 것을 말하면 AI가 그것을 코드로 짓는다 | 코드를 몰라도 "원하는 것을 정확히 말하는 능력"이 핵심이다 |
| API | 3차시 | 식당의 "주문 창구" — 프로그램끼리 정해진 형식(메뉴판)으로 요청하고 정해진 형식으로 결과를 받는 곳 | 프로그램 두 개가 서로 대화하려면 이 창구를 거쳐야 한다 |
| MCP | 3차시 | "만능 콘센트 어댑터" — 나라마다 콘센트 모양이 달라도 어댑터 하나면 어디서든 꽂아 쓸 수 있듯, MCP는 어떤 AI 챗봇이든 이 앱의 도구를 표준 방식으로 꽂아서 쓰게 해준다 | AI 챗봇마다 따로 연결 코드를 짤 필요 없이, MCP 규격 하나만 지키면 된다 |
| API 키 방식 | 3차시 | 내 이름표를 달고 직접 가게에 가서 내 카드로 결제하는 것 | 어디서든 독립적으로 작동하지만, 쓸 때마다 비용이 나가고 키(카드) 관리·유출 위험을 내가 책임져야 한다 |
| 로그인(구독) 방식 | 3차시, 5차시 | 이미 회원가입한 단골 가게에서, 그 가게 점원(내가 로그인한 ChatGPT/Claude)에게 심부름을 시키는 것 | 이미 내는 구독료 안에서 해결되어 추가 비용이 들지 않는다 — 대신 그 서비스에 로그인돼 있어야만 작동한다 |
| 배포 | 4차시 | "가게 문을 연다" — 인터넷에 공개해서 나 말고 누구나(또는 특정 조건의 사람이) 찾아올 수 있게 만드는 것 | 배포해야 다른 사람이 쓸 수 있다. 대신 관리·보안 책임도 함께 생긴다 |
| 로컬 실행 | 6차시 | "우리 집 부엌에서 요리해서 나만 먹는 것" — 아직 가게 문은 안 열었지만 음식(앱)은 완성돼서 쓸 수 있다 | 오늘은 배포까지 가지 않고 로컬에서 멈추지만, "다 작동은 한다"는 것을 눈으로 확인하는 것이 목적이다 |
2026년 8월 20일, 도현이 커리큘럼 골격을 HC에게 보고하고 아래 4가지가 확정됐습니다. 본제작(교안·실습·실연) 단계는 이 확정을 전제로 진행됩니다.
AI 호출이 아예 없는 로컬 웹앱을 Claude Code(로그인 계정)로 만듭니다. "만드는 도구가 로그인 방식"이라는 메시지로 가르치고, "실시간 AI 기능을 넣으려면 API 키가 필요해진다"는 대조 설명을 짧게 붙입니다. 유의할 점: 이 앱은 "로그인 방식으로 돌아가는 앱"이 아니라 "로그인 방식(구독 계정)의 도구로 만들어진 앱"입니다 — 6차시에서 이 구분을 분명히 설명합니다. 로컬 MCP를 Claude Desktop(클로드의 PC 설치형 앱)에 연결하는 방식은 이번 과정에서 제외하고, 심화반이 생길 경우의 보너스 후보로만 남깁니다.
1회차 Codex편(1~4차시, 약 95분) / 2회차 Claude Code편(5~7차시, 약 65분)으로 나누고, 회차 사이에 참가자 PC·계정 상태를 점검합니다.
배포 과정을 실제로 다시 실행하지 않고, 이미 완성된 운영 화면(북릴레이션이 챗GPT에 연결되어 전체화면으로 작동하는 모습)을 보여주는 방식으로 확정합니다.
재단 직원 희망자 소그룹을 대상으로, HC 시연 중심 + 계정 보유자만 따라하는 형식을 그대로 유지합니다.
| 위험 | 발생 지점 | 대응 |
|---|---|---|
| 사내망이 외부(Codex Sites, 챗GPT 개발자모드) 접속을 막아둘 가능성 | 2, 4차시 | 강의 전 재단 네트워크에서 실제 접속 테스트를 리허설로 반드시 선행합니다 |
| ChatGPT 개발자모드의 메뉴명·위치·승인 절차가 자주 바뀜 (북릴레이션 제작 중에도 npm 버전 문제·세션 혼동을 실제로 겪음) | 4차시 | 실연 프로듀서가 강의 임박 시점에 최신 화면으로 재확인·재캡처합니다. 오래된 캡처를 그대로 쓰지 않습니다 |
| Claude Code 설치 시 재단 PC의 관리자 권한 제한 | 5차시 | 사전에 IT 정책을 확인하고, 필요하면 재단이 승인한 설치 경로를 확보합니다. 안 되면 "계정 있는 사람 따라하기"를 시연 관람으로 축소합니다 |
| 터미널(검은 화면) 자체가 낯설어 "멈춘 것 같다"는 불안을 유발 | 5, 6차시 | 교안에 "이 화면이 뜨면 정상"이라는 안내를 명시적으로 넣습니다 |
| 라이브로 배포·연결을 재현하다 실제로 사고(404, 인증 실패 등)가 재발할 위험 | 4차시 | 배포는 완료된 결과 화면 위주로 보여주고, 사고 재현을 라이브로 시도하지 않습니다 (확정 3과 연결) |
| 실연 영상이 정지 캡처로만 만들어지거나, 결말이 완료 화면으로 끝나지 않을 위험 | 전체 실연 제작 시 | 실연 프로듀서(재이) 단계에서 화면녹화를 기본값으로 하고, 6차시(로컬 앱 실행)·4차시(운영 앱 실행)의 마지막 장면은 완료 상태가 분명히 보이는 결말로 설계합니다. 개인정보 가림(블러)이 필요하더라도 결말 화면을 통째로 가리지 않고, 식별 정보만 좁게 가립니다 |
| "된다고 적혀 있지만 실제로는 안 되는" 실습이 그대로 발간될 위험 | 5, 6차시(설치·로컬 실행) | Claude Code 설치부터 로컬 실행까지 전 과정을 실연 프로듀서가 실제로 처음부터 끝까지 실행해보고 확정합니다. 서술로 대체하지 않습니다 |
| 재단 이메일·사번 등 개인정보가 시연 화면(터미널 경로, 브라우저 탭 등)에 우연히 노출 | 전체 | 시연용 화면은 사전에 개인정보 노출 여부를 점검하고, 필요하면 별도 시연용 계정·폴더로 진행합니다 |
커리큘럼 설계(세아)가 확정됐으니, 다음은 교육팀 안에서 아래 순서로 본제작이 이어집니다. 각 단계는 앞 단계가 끝나야 넘어가고, 완주 테스트에서 막히면 앞 단계로 되돌립니다.
본제작이 시작되면 준·리아가 먼저 "남은 준비 사항"의 2단계 로컬 앱 예제 후보를 정리해 HC 확인을 받고, 그 사이 HC는 참가자 PC·계정 사전 조사를 진행하는 것을 제안합니다.