[나의 앱개발기] 비개발자가 AI로 노동조합 알림톡 자동화 시스템을 만든 이야기 (Google Apps Script + 뿌리오 API)

이미지
비개발자가 AI로 노동조합 알림톡 자동화 시스템을 만든 이야기 조합원이 가입 신청서를 내면, 누군가가 그 명단을 확인하고, 뿌리오에 접속하고, 전화번호를 복사하고, 템플릿을 골라서, 보내기 버튼을 누릅니다. 경조사 접수가 들어와도, 탈퇴 신청이 들어와도, 법률상담 요청이 들어와도 — 매번 같은 동작의 반복이거든요. 저는 코딩을 전혀 모르는 노동조합 임원 입니다. 그런데 이 반복 업무가 너무 비효율적이라는 건 확실히 알았죠. "이걸 자동화할 수 없을까?"라는 생각이 시작이었고, Claude AI에게 물어보는 것이 첫 걸음이었습니다. 결과적으로 4분할 대시보드 + 로그인 + 발송기록 공유 + 일괄발송 + SMS 자유발송 까지 갖춘 시스템을 만들었는데, 그 과정은 정말 우당탕탕 그 자체였습니다. 이건 그 좌충우돌 개발기입니다. 1. 왜 알림톡 자동화가 필요했나 2. 기술 스택 선택 — 왜 Google Apps Script였나 3. 4분할 대시보드 만들기 — 첫 번째 난관 4. 발송기록 공유 문제 — localStorage의 함정 5. 로그인과 일괄발송 — 점점 욕심이 커지다 6. SMS 자유발송 웹앱 — 별도 프로젝트로 독립 7. 삽질 모음 — 실제로 겪은 에러들 8. 마무리 정리 1. 왜 알림톡 자동화가 필요했나 * 2,000명 조합원, 4가지 업무, 매번 수동. 저희 노동조합에는 약 2천명 넘는  조합원이 있습니다. 신규 가입, 탈퇴, 경조사, 법률상담 — 이 네 가지 카테고리에서 매일 접수가 들어오고, 각각에 맞는 카카오 알림톡을 보내야 하거든요. 기존 프로세스는 이랬습니다. 구글 설문지로 접수가 들어오면 스프레드시트에 기록되고, 담당자가 그걸 확인한 다음 뿌리오 사이트에 직접 접속해서 하나하나 보내는 거죠. 하루에 몇 건 안 되면 괜찮은데, 가입 신청이 한꺼번에 10건, 20건 몰리는 날이면 정말 고역이었습니다. "스프레드시트에 이미 이름이랑 전화번호가 다 있는데, 왜...

[나의 앱 개발기] Claude로 클래식 테트리스 게임 직접 만들어본 후기

이미지
요즘 AI로 게임 만드는 재미에 푹 빠져 있습니다. 지난 몇 주 동안 갈라가, 폰포코, 디그더그 같은 옛날 오락실 게임을 하나씩 HTML로 만들어서 깃헙 페이지에 올려놨거든요. 만들고 나면 아이가 폰으로 바로 실행해서 노는 모습이 그렇게 뿌듯할 수가 없더라고요. 그래서 “이번 주말엔 또 뭘 만들어볼까” 하면서 유튜브를 뒤적이고 있었어요. 마침 알고리즘이 띄워준 영상 중에 ‘테트리스 출시 40주년 다큐멘터리’ 같은 게 있었습니다. 1985년 소련에서 알렉세이 파지트노프라는 사람이 만들어서 전 세계로 퍼진 그 게임. 영상을 보다가 무릎을 탁 쳤죠. 아 맞다, 이게 있었지. 왜 진작 생각 못했을까 싶을 정도였어요. 갈라가나 폰포코 만들 때 ‘어린 시절 오락실에서 동전 넣던 그 게임들을 직접 만들어보자’ 가 컨셉이었는데, 정작 제일 유명한 테트리스를 빼먹고 있었던 거죠. 게다가 테트리스는 룰도 단순하고, 그래픽도 블록 7개만 있으면 되니까 구현 난이도도 합리적이고요. 거기다 결정적인 한 방. 영상에서 누가 말하더라고요. “테트리스는 누적 판매량 1억 장, 모바일 다운로드까지 합치면 5억 회가 넘는 단일 게임 IP의 끝판왕” 이라고. 40년 동안 살아남은 게임은 다 이유가 있잖아요. 그 이유를 직접 코드로 짜보면서 느껴보고 싶었습니다. 결론부터 말하면 총 작업 시간 3시간 , 코드 라인 수 약 1,200줄짜리 모바일 대응 클래식 테트리스 게임을 완성했습니다. 그것도 효과음, 8비트 BGM, 홀드 기능, 고스트 피스, 하드드롭까지 정통 룰 거의 전부 들어간 버전으로요. 한 파일짜리 HTML이라 깃헙 페이지에 올리니 폰에서 바로 실행되고, 광고도 결제도 없는 우리 가족 전용 게임이 된 거죠. 어떤 식으로 기획했고, 어디서 막혔고, 어떻게 풀었는지 기록해두려고 합니다. 혹시 비슷한 걸 시도해보고 싶은 분께 도움이 됐으면 좋겠어요. 1. 왜 직접 만들었나 2. 기획 단계 — 무엇을 정했나 3. 핵심 게임 로직 구현 4....

[나의 앱 개발기] AI 코딩으로 갤러그 게임 만들기 — 며칠 만에 모바일 슈팅 게임이 나왔다

이미지
주말에 문득 어릴 적 오락실에서 동전 넣고 돌리던 갤러그가 떠올랐습니다. 그 픽셀로 된 우주선, 트랙터 빔에 잡혀가던 비행기, 합체 후 듀얼 파이터로 한풀이하던 그 감각. 요즘은 AI한테 "갤러그 만들어줘" 한 마디면 코드가 나오는 시대니까, 진짜 만들어지나 한번 굴려봤죠. 결론부터 말하면 며칠에 걸쳐 다듬으니 모바일에서 손가락으로 굴러가는 게임이 나왔습니다. 다만 처음 한 번에 완성된 건 절대 아니고, 진짜 게임답게 만들기까지는 여러 번 잡아채서 고쳐야 했어요. 그 과정을 정리해두면 비슷하게 시도하는 분들한테 도움이 될 것 같아 기록으로 남깁니다. 1. 시작은 "갤러그 만들어줘" 한 마디 2. 무기가 빈약해서 파워업 시스템 추가 3. 너무 쉬워서 밸런스 다시 잡기 4. 적이 너무 작아서 크기 2배 확대 5. 트랙터 빔 순간이동 → 거미줄처럼 천천히 6. 만든 게임 4개를 한 화면에 모은 오락실 * 시작은 "갤러그 만들어줘" 한 마디. 처음엔 별 욕심 없이 시작했어요. 갤러그 위키 문서를 통째로 복사해서 던지고 "이거 만들어줘. 모바일에서 할 거야" 정도. 풀버전으로 만들지 짧게 만들지, 터치 조작은 어떻게 할지, 배포는 어디로 할지 — 이 세 가지만 정해주니까 코드가 쏟아져 나오더라고요. 나온 결과물은 단일 HTML 파일 하나. 외부 라이브러리 없이 Canvas 2D로 그리고 Web Audio API로 사운드까지 절차 생성하는 방식이었습니다. 별 배경, 자코·고에이·보스 갤러그 스프라이트, 진입 경로, 포메이션 동작, 트랙터 빔, 듀얼 파이터, 보너스 스테이지까지 한 번에 들어갔죠. 여기까지 만드는 데 걸린 시간은 길지 않았는데, 막상 모바일에서 열어 플레이해보니 "이거 진짜 게임이 굴러가긴 하네" 싶은 동시에 어색한 점이 한두 가지가 아니더라고요. 그때부터가 진짜 시작이었습니다. * 무기가 빈약해서 ...

[나의 앱 개발기] 딸을 위해 '무한의 계단' 게임을 직접 만들어봤다 — AI + HTML + GitHub Pages 1인 개발기

이미지
"아빠, 무한의 계단 같은 거 오프라인에서도 할 수 있는 거 없어?" 딸한테 이 말을 듣고 잠깐 생각했습니다. 앱스토어에서 받으면 되지 않나? 근데 스크린타임 때문에 앱 설치가 제한되어 있고, 인터넷 없이도 되는 게임을 원하는 거였어요. 그래서 생각했습니다. 그냥 내가 만들어줄까? 코딩 경험이라곤 회사에서 Google Apps Script로 업무 자동화 좀 해본 게 전부입니다. 게임 개발은 당연히 처음이고요. 그런데 요즘 AI가 코드를 써준다고 하니까, 한번 해보자 싶었습니다.    * 첫 번째 시도 — "일단 돌아가는 게임부터." Claude한테 이렇게 말했습니다. "딸이 오프라인에서도 할 수 있는 간단한 게임 개발하고 싶어. 무한의 계단 같은 거." 그랬더니 HTML 파일 하나에 Canvas 기반 게임을 만들어주더라고요. 처음 받은 버전은 솔직히 엉망이었습니다. 다음 계단을 밟아도 바로 게임오버. 카메라가 위로 올라가는데 캐릭터와 계단은 안 따라감. 왼쪽이나 오른쪽으로 가면 화면 밖으로 나가버리고. 매번 문제를 발견할 때마다 Claude한테 "이거 이상한데?"라고 스크린샷을 보냈고, 수정하고, 다시 테스트하고. 이 "문제 발견 → 스크린샷 → AI 수정 → 재테스트" 루프를 수십 번은 반복한 것 같습니다. * 기능을 하나씩 붙여갔다. 첫 번째 버전이 겨우 돌아가기 시작하니까 욕심이 생기더라고요. 난이도 선택, 기록 저장, 특수 계단 같은 것들을요. 버전 추가된 기능 삽질 포인트 v1 기본 계단 오르기 방향 판정 버그로 첫 계단에서 바로 사망 v2 카메라 추적 Y좌표 방향이 반대여서 캐릭터 실종 v3 카메라 X축 추적 + 계단 보정 한쪽으로 치우치면 화면 밖으로 v4 난이도 상/중/하 + 기록 시스템 localStorage 접근 실패 시 게임오버 화면 안 뜸 v5 특수 계단 (시간보너스, 반전, 더블) "보라 계단이 안 ...

[나의 앱 개발기] 코딩 몰라도 만들었다 — 아버지를 위한 AI 맞춤법 앱 개발기

이미지
아버지가 카카오톡 메시지를 보낼 때마다 맞춤법이 조금씩 신경 쓰이셨던 모양이다. 직접 말씀을 꺼내신 건 아닌데, 어느 날 "맞춤법 검사하는 거 쉽게 쓸 수 있는 게 없냐"고 물어보셨다. 포털 맞춤법 검사기를 알려드렸는데 사용법이 복잡하다고 하셔서, 그냥 내가 만들어드리기로 했다. 간단할 거라고 생각했다. 텍스트 입력하면 AI가 교정해주는 앱. 하루면 되겠지 싶었는데, 실제로는 API 키 보안 하나 때문에 GitHub Pages, Cloudflare Workers, 그리고 최종적으로 Vercel까지 빙 돌아오는 여정이 됐다. 그 삽질의 전 과정을 솔직하게 공개한다. * 처음 기획은 이랬다. 아버지가 쓰실 앱이라 복잡하면 안 됐다. 요구사항은 딱 세 가지였다. 글 입력 또는 음성으로 말하기 맞춤법·띄어쓰기·용례 자동 교정 왜 틀렸는지 쉬운 설명까지! 여기에 국립국어원 한글 맞춤법 규정을 기준으로 교정해주면 더 신뢰도가 올라갈 것 같았다. 단순 맞춤법 교정 도구가 아니라 왜 틀렸는지 이유까지 설명해주는 앱 을 목표로 잡았다. 그게 기존 무료 맞춤법 검사기와의 차이점이기도 했다. 추가로 오늘의 맞춤법 팁, 즐겨찾기 저장, 국어사전 검색 기능도 넣기로 했다. 일단 Claude한테 기획을 던졌다. * 첫 번째 시도 — HTML 단일 파일. 처음엔 가장 단순한 방법으로 갔다. HTML 파일 하나에 Claude API 호출 코드를 넣고, 파일을 아버지한테 보내드리는 방식. Claude가 만들어준 코드를 붙여넣고 실행해봤더니 PC에서는 됐다. 문제는 모바일이었다. 파일을 메일로 보내드리고 열어보니 음성 입력도 안 되고, API 호출도 안 됐다. 파일을 직접 열면 file:// 프로토콜이라 브라우저가 외부 API 호출과 마이크 접근을 모두 차단한다 는 걸 그때 알았다. HTTPS 환경에서만 동작한다는 거다. 해결책은 웹 호스팅. GitHub Pages를 쓰기로 했다. 무료고 HTTPS도 기본 적용되니까. ...

[나의 앱 개발기] 코딩 모르는 직장인이 아버지를 위한 비밀번호 보관함 앱을 직접 만든 이야기

이미지
아버지 전화가 왔어요. "야, 쿠팡 비밀번호가 뭐였지?" 일주일 전에도 같은 전화였거든요. 네이버, 카카오, 병원 앱, 은행 앱… 요즘 앱 하나에 비밀번호 하나씩이니까 70대 어르신한테는 진짜 전쟁이에요. 메모장에 적어두셨다가 잃어버리고, 핸드폰 메모앱에 저장했다가 어디 있는지 모르고. 그때 결심했습니다. "내가 직접 만들자. 아버지 폰에 딱 맞는 비밀번호 보관함을." 저는 개발자가 아니에요. Google Apps Script로 직원 관리 툴 정도 만들어본 게 전부인 직장인이고요. 그런데 Claude AI와 함께라면 해볼 만하겠다 싶었어요. 결론부터 말씀드리면, 완성했습니다. 그 과정이 생각보다 훨씬 험난했고요. * 처음엔 단순하게 시작했다. 첫 번째 버전은 그냥 HTML 파일 하나였어요. localStorage에 데이터 저장하고, PIN 4자리로 잠금하고, 카드 형태로 사이트명·아이디·비밀번호 표시하는 구조. Claude가 한 번에 만들어줬는데, 처음 열어봤을 때 "오 이거 괜찮은데?" 싶었어요. 근데 문제가 바로 나왔습니다. 브라우저 캐시를 지우면 데이터가 통째로 날아간다 는 거예요. localStorage는 브라우저 저장소라 캐시 삭제하면 끝이거든요. 아버지 폰에서 잘 쓰다가 어느 날 데이터가 다 사라지면 저한테 전화가 쏟아질 게 뻔했어요. 방향을 바꿔야 했습니다. * Google Apps Script로 백엔드를 만들어보다. 평소에 GAS를 좀 써봤으니까 자연스럽게 여기로 방향을 잡았어요. Google Sheets를 데이터베이스로 쓰고, GAS 웹앱으로 서비스하는 방식이에요. 스프레드시트 ID까지 세팅하고, 함수도 다 만들었는데 여기서 생각지도 못한 문제들이 터졌어요. 문제 원인 해결 여부 GAS HTML에서 동적 함수 호출 불가 google.script.run은 고정 함수명만 허용 구조 변경으로 해결 em dash(—) 문자로 SyntaxError 특수문자...

[나의 앱 개발기] 코딩 모르는 직장인이 AI 문제출제 앱 혼자 만든 이야기 (feat. Claude, Next.js, Vercel)

이미지
중2 딸아이가 시험 준비하는 걸 옆에서 보다가 갑자기 이런 생각이 들었습니다. "교과서 사진 찍으면 AI가 문제 만들어주면 얼마나 편할까?" 그게 다였습니다. 저는 개발자가 아닙니다. 코딩을 제대로 배운 적도 없고, 앱을 만들어본 경험도 전혀 없는 그냥 직장인이에요. 근데 몇 달을 Claude AI랑 씨름한 결과, 실제로 서비스되는 앱이 만들어졌습니다. 그 과정을 있는 그대로 적어봅니다. * 먼저, 어떤 앱인지부터. 앱 이름은 AI테스트YOU 입니다. 도메인은 aitestu.com 이고요. 기능은 단순합니다. 교재나 필기 사진을 찍어 올리면 AI가 그 내용으로 시험문제를 뚝딱 만들어줍니다. 객관식, 서술형 다 됩니다. 틀리면 해설도 나오고, 모르는 문제는 단계별 풀이도 해줘요. 여기에 영어 학습, 집중 사운드, 오답보관함, 학습통계까지 붙었습니다. 초등 4학년부터 고등 3학년까지, 전 과목 지원합니다. 지금은 완전 무료 로 운영 중이에요. * 개발에 쓴 툴 총정리. 비개발자가 이 정도 앱을 만들 수 있었던 건 솔직히 툴 선택을 잘한 덕분이거든요. 돈 거의 안 씁니다. 역할 툴 비용 AI 코딩 도우미 Claude (Anthropic) 유료 구독 프레임워크 Next.js 무료 배포 Vercel 무료 DB / 인증 Supabase 무료 코드 저장소 GitHub 무료 AI API Anthropic API (Sonnet / Haiku) 사용량 과금 도메인 가비아 연 18,000원 여기서 핵심은 하나입니다. "Claude한테 코드 짜달라고 하면 됩니다." 저는 코드를 이해하려 하지 ...