"회식 날짜 잡기 너무 귀찮아서" 비개발자가 Claude Code로 4일 만에 앱을 만든 이야기

코딩을 한 줄도 못 짜는 제가, AI 코딩 도구(Claude Code) 하나로 "모임 날짜 잡기 앱"을 기획부터 실제 배포까지 끝냈습니다. 앱 주소: [배포 링크 비공개] · 걸린 시간: 단속적으로 4일


1. "회식 날짜 잡는 거, 매번 왜 이렇게 귀찮지?"

다들 한 번쯤 겪어보셨을 거예요.

단톡방에 "이번 주에 회식 한번 하시죠~"라고 누가 운을 띄우면, 그때부터 시작입니다. "저는 화요일 빼고요", "수요일은 6시 이후만", "금요일은 안 돼요" 이런 말풍선이 30개쯤 올라오고, 누군가는 그걸 일일이 메모장에 적어가며 겹치는 날을 찾아냅니다. 그러다 결국 "그냥 목요일 어때요?" 하고 던지면 또 누군가는 그날 안 된다고 하고요.

저는 이 과정이 매번 너무 비효율적이라고 느꼈어요. "되는 날짜만 톡 누르면, 자동으로 다 되는 날을 찾아주는 앱"이 있으면 좋겠다 싶었죠.

사실 모두의 시간 같은 비슷한 앱이 이미 있다는 걸 알아요. 제가 뭔가 최초로 만든다는 게 아닙니다. 그래도 직접 만들어보고 싶었고, 무엇보다 내가 원하는 방향으로 차근차근 발전시켜보고 싶었어요. 남이 만든 걸 쓰는 것과, 내 손으로 만들어서 마음대로 고쳐가는 건 전혀 다른 경험이니까요.

문제는 — 저는 코딩을 모릅니다. 함수가 뭔지, 데이터베이스가 뭔지도 잘 몰라요. 그런 제가 앱을 만든다는 게 가능할까 싶었지만, 일단 한번 부딪혀보기로 했습니다.

시작은 거창하지 않았어요. 계획 메모 한 장과, 제가 쓰는 AI 코딩 도구의 "맞춤 실습(Rona)"을 받아 7단계 흐름으로 쪼개는 것부터였습니다.

데이터 저장 → 운영자가 모임 생성 → 공유 링크 → 참가자 투표
→ 결과 집계 → 실시간 갱신 → 배포

이렇게 큰 그림을 단계로 나눠두니, "막막한 앱 개발"이 "오늘은 이 한 칸만"으로 바뀌더라고요. 이게 첫 번째 깨달음이었습니다.


2. 만드는 과정 — 저는 기획·선택·검증, AI는 구현·디버깅

핵심부터 말씀드리면, 역할 분담이 명확했어요.

  • 제가 한 일: 무엇을 만들지 정하고(기획), AI가 준 선택지 중에 고르고(결정), 진짜로 잘 되는지 확인(검증)
  • AI가 한 일: 실제 코드 작성, 에러 잡기(디버깅), 막힌 부분 우회

저는 코드를 단 한 줄도 직접 쓰지 않았습니다. 대신 말로 설명하고, 고르고, "진짜 되는지 확인해줘"라고 시켰습니다.

1일차 — 뼈대 세우기 (데이터 저장 ~ 공유 링크)

가장 먼저 한 건 "데이터를 어디에 저장할까"였어요. 투표한 날짜들이 어딘가에 쌓여야 하니까요. AI가 Supabase라는 무료 데이터 저장소를 추천해줬고, 저는 그 키(비밀번호 같은 것)를 발급받아 전달만 했습니다. 솔직히 URL을 어디서 찾는지 몰라서 스크린샷을 찍어 "이거 어디 있어?"라고 물어보기도 했어요.

그렇게 모임을 만들면 공유 링크가 나오는 데까지, 1일차에 뼈대를 세웠습니다.

2일차 — 핵심 기능 + 실시간 + 첫 배포

여기서 제 의견을 많이 냈어요. AI가 만든 첫 화면을 보고 이렇게 요청했습니다.

ㅇㅋ 흐름은 좋은데 너무 심플한거같아.
UI 좀 더 좋게 다듬고 이모지는 싹다 없음으로 디폴트깔아.
그리고 날짜를 입력하는 것 자체가 매우 피로도가 높은 일이라서
이름 입력하는거 빼고 그냥 날짜만 선택하게 하자. 달력이 뜨고 거기서 선택할 수 있게끔.

"날짜 입력 자체가 피곤한 일"이라는 건 제가 실제로 겪은 불편이었고, 그걸 그대로 말로 옮겼더니 AI가 달력에서 톡톡 누르는 방식으로 바꿔줬습니다.

그다음 욕심이 났어요. 누가 투표하면 새로고침 없이 결과가 실시간으로 바뀌면 좋겠다. 이게 기술적으로 꽤 어려운 거라던데, AI에게 시켰더니 구현해줬고, 저는 한 가지만 확실히 시켰습니다 — "진짜 실시간으로 되는지 확인해줘." AI가 검증 스크립트를 돌려서 "구독 → 데이터 입력 → 화면 갱신"이 실제로 작동하는 걸 보여주더라고요. 코딩을 모르는 저는 "된다고 말만 하는 것"과 "진짜 되는 것"을 구별할 수 없으니, 이 검증 요청이 정말 중요했습니다.

그리고 2일차에 첫 배포까지 했습니다. 폰으로 링크를 열어 카톡으로 공유까지 되는 걸 보니, 진짜 앱이 됐다는 게 실감 났어요.

3일차(4일째) — 기능 보강 + 디자인 리뉴얼 + 출시 마감

중간에 며칠 쉬고, 마지막 날 몰아서 마무리했습니다. 실제로 써보니 아쉬운 점이 계속 나왔고, 그걸 하나씩 말로 고쳐갔어요.

  • "내가 만든 모임들을 한눈에 보는 리스트가 있으면 좋겠어" → 목록 + 삭제 기능 추가
  • "달력이 월 바뀔 때 페이지가 넘어가지 말고, 위아래로 쭉 이어지게" → 세로 연속 캘린더
  • "결과 페이지는 나(만든 사람)만 보게 하고, 투표한 사람한텐 감사 인사만" → 결과 잠금
  • "참가자별 투표를 모아서 만장일치/다수가 되는 날을 자동으로 띄워줘" → 추천 날짜 하이라이트 + 확정 버튼

이 과정에서 AI가 갈림길마다 저에게 물어봤어요. 예를 들어 "확정하면 폰 푸시 알림을 진짜로 구현할까요, 아니면 카톡 공유 문구로 대체할까요?" 같은 식으로요. 저는 그중에서 현실적인 쪽(카톡 공유 대체)을 골랐습니다. 결정은 제가 하고, AI는 선택지를 차려주는 구조가 끝까지 이어졌어요.


3. 솔직히, 막힌 적도 많았어요 (그래서 오히려 도움됩니다)

"AI가 다 해주니 술술 풀렸겠지" 싶겠지만, 전혀 아니었습니다. 막힌 게 더 기억에 남아요. 다만 막힐 때마다 제가 끙끙댄 게 아니라, AI에게 "이거 에러 나는데?" 하고 넘기면 그 자리에서 잡아줬다는 게 핵심입니다.

막혔던 순간          무슨 일이었나                              어떻게 풀렸나
─────────────────────────────────────────────────────────────────────────────────
설치가 안 됨         초반에 프로그램 설치(npm)가 에러로 멈춤      AI가 원인 진단 후 우회
실시간이 안 됨       실시간 기능에서 "이미 등록됨" 류 에러 발생   AI가 중복 등록을 무시하도록 처리해 해결
모바일 드래그 충돌   폰에서 날짜를 드래그하면 화면이 같이 스크롤  드래그 버리고 "시작일·끝일 클릭 → 범위 자동 선택"으로 전환
카톡 미리보기 안 뜸  링크 공유 시 미리보기 이미지가 안 나옴      기준 주소 고정 + 이미지 주소를 절대경로로 바꿔 해결

특히 모바일 드래그 문제가 인상적이었어요. "손가락으로 쓱 드래그하면 날짜 범위가 잡히게" 하고 싶었는데, 폰에서는 그 동작이 화면 스크롤과 자꾸 충돌했거든요. 한참 안 되길래, AI에게 "그냥 시작일·끝일만 누르면 그 사이가 자동으로 채워지게 하자"고 방향을 틀었습니다. 기술로 안 되면 사용성으로 우회한 셈인데, 이런 판단은 제가 사용자 입장에서 내릴 수 있는 부분이었어요.

막힘을 숨기지 않고 말씀드리는 이유는, 이게 정상이기 때문입니다. 비개발자가 앱을 만든다고 다 매끄럽게 흘러가지 않아요. 다만 막혔을 때 직접 푸는 게 아니라 AI에게 넘긴다는 점이 예전과 완전히 달라진 부분입니다.


4. 디자인은 '여러 안을 한 번에 뽑아 눈으로 비교'

기능이 다 되고 나니 모양새가 아쉬웠어요. 그런데 저는 디자인 감각이 뛰어난 것도 아니고, 색 조합을 글로 설명하기도 어려웠습니다. 그래서 이렇게 시켰어요.

서브에이전트 시켜서 디자인 몇개 뽑아서 html로 띄워. 내가 선택할 수 있게.
지금꺼에 추가로 4개 더 화면 띄워. html에서 선택가능하게 하고 선택되면 그걸로 ui 싹 바꿔놔.

여기서 신기했던 게, AI가 '서브에이전트(작은 일꾼들)'를 동시에 여러 개 돌려서 디자인 시안 4종을 한 번에 만들어줬다는 거예요. 기존 디자인까지 합쳐 총 5종을 한 화면(갤러리)에 나란히 띄워줬습니다.

  • 시안1: 미니멀 모노
  • 시안2: 다크 네온
  • 시안3: 소프트 파스텔 ← 제가 고른 것
  • 시안4: 그라데이션 글래스

말로 "이런 느낌 어때?"를 백 번 설명하는 것보다, 눈으로 5개를 나란히 보고 "3번"이라고 답하는 게 비교가 안 되게 빨랐습니다. 그렇게 고르니 전체 화면이 소프트 파스텔 톤으로 싹 바뀌었어요.

앱 아이콘도 같은 방식으로 여러 개 뽑아 화면에 띄우고, "6번"으로 골랐습니다.


5. 마지막 디테일까지 — 카톡 공유 카드와 앱 아이콘

여기서 멈출 수도 있었지만, "진짜 출시"의 느낌을 내고 싶었어요. 그래서 두 가지를 더 챙겼습니다.

  • 카톡 공유 카드(미리보기 이미지): 링크를 카톡에 붙이면 그냥 파란 글씨가 아니라, 예쁜 카드 이미지가 뜨도록 만들었어요. (이게 앞서 말한 "미리보기 안 뜸" 문제를 잡은 부분입니다.)
  • 앱 아이콘: 브라우저 탭과 홈 화면에 뜨는 작은 아이콘까지 테마에 맞춰 교체했습니다.

이런 마무리 디테일이 들어가니, "혼자 만든 연습용"이 아니라 남한테 보여줄 수 있는 앱이 됐다는 기분이 들더라고요.


6. 결과 — 코딩 0인데, 진짜 쓰는 앱이 나왔습니다

구분            Before (앱 없을 때)                    After (MOIN 사용)
────────────────────────────────────────────────────────────────────────────────
날짜 조율 방식   단톡방 말풍선 30개, 수동으로 찾기        링크 공유 → 각자 되는 날만 톡 선택
집계            누군가 메모장에 손으로 정리             만장일치·다수 동의 날짜 자동 하이라이트
결과 확인        누가 언제 된다 했는지 헷갈림            만든 사람만 "누가 언제 가능"을 한눈에
결과 갱신        계속 다시 물어봐야 함                  새로고침 없이 실시간 반영
내 코딩 실력     0 (한 줄도 못 짬)                     여전히 0 — 그런데 앱은 배포됨
걸린 시간        —                                    단속적으로 약 4일

제 코딩 실력은 시작할 때나 지금이나 0입니다. 그런데 결과물은 인터넷에 배포돼서 누구나 링크로 쓸 수 있는 진짜 앱이에요. 이게 가능하다는 걸 직접 겪고 나니, "AI 코딩 도구로 뭘 만든다"는 말이 더 이상 남의 이야기처럼 들리지 않았습니다.


7. 비개발자가 따라 할 때 — 제가 배운 재현 팁 3가지

혹시 "나도 한번 해볼까?" 싶은 분들을 위해, 4일 동안 몸으로 배운 것 3가지만 정리할게요.

  1. 한 번에 다 시키지 말고, 단계별로 쪼개세요.
    "모임 앱 만들어줘"라고 통째로 던지면 막막해집니다. 저는 7단계(저장 → 생성 → 공유 → 투표 → 집계 → 실시간 → 배포)로 나눠서 "오늘은 이 한 칸만" 진행했어요. 그래야 어디서 막혔는지도 보이고, 검증도 쉽습니다.
  2. 막히면 AI에게 맡기되, "진짜 되는지" 검증을 꼭 요청하세요.
    코딩을 모르면 "됐다"는 말이 진짜인지 알 수가 없어요. 그래서 저는 중요한 기능마다 "정말 작동하는지 확인해줘"라고 시켰고, 실시간 기능 같은 건 AI가 실제로 돌려서 결과를 보여줬습니다. 이 검증 한 줄이 비개발자에겐 안전벨트입니다.
  3. 디자인은 여러 안을 뽑아 눈으로 비교하세요.
    글로 "세련되게 해줘"라고 백 번 말하는 것보다, 시안 4~5개를 한 화면에 띄워놓고 "3번"이라고 고르는 게 훨씬 빠르고 정확합니다. 선택은 말보다 눈이 빨라요.

8. 바로 쓸 수 있는 프롬프트 모음

제가 실제로 썼던 요청 중, 비개발자 분들이 그대로 복붙해 쓰기 좋은 것들만 골랐습니다.

① 큰 그림을 단계로 쪼갤 때

이런 앱을 만들고 싶어. 코딩은 전혀 모르니까,
전체를 작은 단계로 나눠서 '오늘은 이 한 칸만' 할 수 있게 흐름을 짜줘.
각 단계가 끝나면 다음에 뭘 할지 안내해줘.

② 화면/사용성을 고칠 때 (내가 겪은 불편을 그대로 말하기)

지금 흐름은 좋은데, 입력하는 게 너무 번거로워.
사용자가 최소한의 동작으로 끝낼 수 있게 UI를 다듬어줘.
불필요한 입력은 빼고, 핵심만 남겨줘.

③ "진짜 되는지" 검증을 시킬 때 (비개발자 필수)

방금 만든 이 기능, 말로만 됐다고 하지 말고
실제로 작동하는지 직접 확인하는 과정을 거쳐서 결과를 보여줘.

④ 디자인 시안을 여러 개 뽑아 비교할 때

디자인 시안 4~5개를 서로 다른 느낌으로 만들어서,
한 화면(html)에 나란히 띄워줘. 내가 보고 번호로 고르면
그 디자인으로 전체를 바꿔줘.

⑤ 막혔을 때 (에러 메시지를 그대로 붙이기)

이거 실행하니까 이런 에러가 떠. (에러 메시지 붙여넣기)
원인이 뭔지 진단하고, 고쳐줘. 내가 코딩을 몰라도 되게 알아서 처리해줘.

9. 앞으로는 이렇게 더 발전시킬 거예요

여기서 끝이 아니에요. 이미 비슷한 앱들이 있지만, 저는 제 손으로 만든 만큼 제가 원하는 방향으로 계속 키워보고 싶습니다. 지금 머릿속에 있는 다음 단계들은 이렇습니다.

  • 날짜별 개별 코멘트 — 단순히 "되는 날"만 고르는 게 아니라, "17일은 저녁 8시 이후만 가능" 같은 조건을 날짜마다 붙일 수 있게. 실제 조율에선 '되냐 안 되냐'보다 '몇 시부터 되냐'가 더 중요할 때가 많거든요.
  • 소셜 로그인(애플·구글·카카오) — 로그인하면 기존 캘린더와 연동해서, 일일이 누르지 않아도 가능한 날이 자동으로 선택되게. 입력 자체를 더 줄이는 방향이에요.
  • 중간 지점 + 맛집 추천(챗봇) — 날짜가 정해지면 "그럼 어디서 봐?"가 남잖아요. 참가자들 위치의 중간 지점을 잡아주고, 그 근처 맛집까지 챗봇이 추천하게.
  • 소수 인원 조율 푸시 — 전원이 다 되는 날이 없을 때, "이 사람만 안 되는 날"을 찾아 그 사람에게 푸시로 "이날 혹시 조정 가능하세요?"라고 물어보는 기능. 모임이 깨지지 않게 마지막 한 칸을 메워주는 거죠.

비슷한 앱과 똑같이 가는 게 목표가 아니라, 이런 디테일을 하나씩 더 해보는 게 제가 직접 만든 이유예요. 코딩을 몰라도 "내가 원하는 방향"만 분명하면, 그걸 말로 설명해서 한 걸음씩 키워갈 수 있다는 걸 이번에 배웠습니다.


코딩을 모른다는 게 더 이상 "앱을 못 만드는 이유"가 아니더라고요. 필요한 건 내가 뭘 원하는지 말로 설명하는 힘, 고를 줄 아는 눈, 그리고 "진짜 되는지" 확인하는 습관이었습니다. 혹시 미뤄둔 작은 아이디어가 있다면, 오늘 한 단계만 시작해보시길 권합니다.

완성된 앱: [배포 링크 비공개]


참고한 글들

1
1개의 답글

뉴스레터 무료 구독