Google Meet 같은 앱을 내가 만들 수 있을 줄 몰랐다 — 카메라, 음성, 대화까지

📝 한줄 요약

AI 코딩 도구 하나로, 카메라·음성·AI 대화까지 갖춘 스탠드업 미팅 앱을 하루만에 만든 이야기. (미완성!)

😫 문제 상황 (Before)

혼자 일하다 보니 하루를 시작하고 마무리하는 루틴이 없었다. 팀에서 일할 때는 아침 스탠드업이 자연스럽게 그 역할을 해줬는데, 1인 작업 환경에서는 그런 구조가 없으니 하루가 흐지부지 흘러갔다.

스탠드업 미팅의 효과는 이미 알고 있었다. 어제 뭘 했는지 돌아보고, 오늘 뭘 할 건지 말로 정리하는 것만으로도 하루의 밀도가 달라지니까. 문제는 혼자서는 그걸 유지하기가 어렵다는 거였다.

그래서 생각했다 — 나와 함께 스탠드업을 진행해주는 AI를 만들면 어떨까? 귀여운 돼지 캐릭터가 매일 아침 "어제 어땠어? 오늘은 뭐 할 거야?" 하고 물어봐주는 앱. Google Meet처럼 카메라 켜고, 진짜 미팅하는 것처럼.

솔직히, 기본적인 채팅 정도만 바이브코딩으로 가능할 줄 알았다. 카메라? 음성? 그건 내 영역이 아니라고 생각했다.

🛠️ 사용한 도구

• AI 코딩: Claude Code

• AI 캐릭터 제작: 미드저니 (캐릭터 디자인), Kling (영상 생성)

• AI 대화 모델: Groq (llama-3.3-70b) — Claude Code가 무료 모델로 추천

🔧 작업 과정

프로젝트 셋업 — "일단 시작해보자"

처음에는 간단했다. Claude Code한테 아이디어를 주고, Google 로그인을 붙여달라고 했다.

Next.js 초기화하고 Google OAuth 로그인 연동해줘

그러자 프로젝트 구조부터 환경 변수 설정, OAuth 연동까지 한 번에 세팅해줬다. 여기까지도 사실 꽤나 신기하게 느껴졌다.

Google Meet 스타일 UI — "이거 진짜 되네?"

핵심은 구글밋처럼 생긴 화면이었다. 좌측에 카메라 프리뷰, 우측에 액션 패널.

실제 사용하던 미팅 툴과 최대한 이질감이 없길 바랐다. 그래서 구글밋 UI 스크린샷을 던져주고, 이거랑 최대한 비슷하게 만들어 봐달라고 요청했다.

Google Meet UI를 따라해줘. 좌측에 카메라 프리뷰, 우측에 로그인/스탠드업 버튼

그랬더니 진짜 WebRTC로 카메라 피드를 띄워주고, 마이크/카메라 토글 버튼까지 만들어줬다. 버튼을 눌렀더니 정말 웹캠이 켜졌다!!

중간에 UI가 마음에 안 드는 부분이 있었는데, 스크린샷을 찍어서 "여기 텍스트가 두 줄로 나뉘는 게 어색해"라고 던지면 바로 고쳐줬다. 디자인 피드백을 말이 아니라 스크린샷으로 주니까 소통이 훨씬 빨랐다.

카메라 배경 블러 — 포기할 줄도 알아야 한다

Google Meet처럼 카메라 배경을 블러 처리하고 싶었다. Claude Code한테 구현해달라고 했고, 실제로 동작하는 배경 블러 기능을 만들어줬다.

문제는 성능이었다. 배경 블러가 실시간 영상 처리를 해야 하다 보니 앱이 눈에 띄게 무거워졌다. AI 대화, TTS 음성, 카메라 피드까지 이미 돌아가고 있는 상태에서 블러까지 얹으니 버거웠다. 결국 이 기능은 삭제했다.

모든 걸 다 넣을 수는 없다. MVP에서는 핵심에 집중하고, 나머지는 과감하게 빼는 것도 중요한 판단이었다.

Porky 아바타 — AI로 캐릭터 만들기의 현실

나의 스탠드업 미팅 상대를 만들 차례. 같이 파이팅 넘치게 진행하고 싶어서, 다이어트 중인 돼지 캐릭터를 만들고자 했다. 이름하여 Porky (포키)! 미드저니로 캐릭터를 디자인하고, 미드저니 + Kling으로 움직이는 영상을 만들었다.

이게... 생각보다 오래 걸렸다. (1) 가만히 있을 때 (2) 듣고 있을 때 (3) 말하고 있을 때 (4) 환호할 때 - 총 4가지 상태의 짧은 애니메이션을 제작해봤는데, 원하는 느낌이 한 번에 안 나와서 생성 → 확인 → 재생성을 반복했다. AI 이미지/영상 생성은 "한 방에 뚝딱"이 아니라는 걸 체감한 구간이었다.

그래도 결국 아침용(활기찬 Porky)과 저녁용(차분한 Porky) 애니메이션 영상을 몇 가지 완성했고, Claude Code한테 이 영상들을 앱에 넣어달라고 했다.

영상 이어지는 게 매끄럽지가 않아. 전환될 때마다 뚝뚝 끊기네...

그러자 "더블 버퍼링"이라는 기법을 적용해줬다. 두 개의 비디오를 겹쳐놓고, 하나가 재생되는 동안 다음 영상을 미리 로딩해서 부드럽게 전환하는 방식이었다. 이런 건 내가 알아서 요청할 수 있는 영역이 아니었다 — AI가 알아서 해결책을 가져온 거다.

AI 대화 연동 — "무료로 가능해?"

Porky가 실제로 말을 해야 했다. AI 대화 모델이 필요한데, 유료 API는 MVP에서 쓰기 부담스러웠다.

무료로 쓸 수 있는 AI 모델 없어?

Claude Code가 Groq이라는 서비스를 추천해줬다. llama-3.3-70b라는 모델을 무료로 쓸 수 있다고. SDK 설치부터 API 연동까지 알아서 세팅해줬고, 비용 0원으로 AI 대화가 돌아갔다.

음성도 마찬가지였다. 브라우저 기본 음성이 너무 어색해서 대안을 물어봤더니 Edge TTS라는 걸 가져와서 별도 서버까지 만들어줬다. 한국어 남성 목소리를 적용해봤는데, 아무래도 많이 부자연스러웠지만 MVP인 만큼 이 정도면 우선은 충분하다고 생각했다.

Porky의 질문 설계 — AI와 기획을 같이 하다

Porky가 사용자한테 질문하는 흐름을 설계하는 건데, 처음에 만든 프롬프트가 너무 추상적이어서 Porky가 질문 순서를 안 따르고, 톤도 들쑥날쑥했다.

Porky의 질문 프레임워크를 본격적으로 다져보자. 전반적으로 대화가 매끄럽지 않아. 전체적으로 리디자인하고 싶음.

Claude Code한테 이렇게 던지니까, Plan 모드로 전환해서 질문 설계를 같이 짜기 시작했다. "몇 턴으로 구성할까?", "어떤 정보가 필요해?", "톤은 어때?" 같은 질문을 주고받으면서 구조를 잡았다.

결과적으로 턴 1~4까지 명확한 지시와 예시를 넣은 프롬프트가 나왔고, Porky가 드디어 자연스럽게 대화를 이끌어갔다. "어제 어땠어?" → "어제에 이어 할 일 있어?" → "오늘 새로 할 일은?" → "좋다! 화이팅이야 꿀꿀!" 이 흐름이 딱 맞아떨어졌을 때의 쾌감이 있었다.

데이터 연속성 — 하루가 이어지는 구조

마지막은 데이터였다. 아침에 세운 계획이 저녁 체크인에 나와야 하고, 어제 저녁 결과가 오늘 아침에 보여야 했다.

데이터 저장 방식을 고민해보자. 콜이 끝나면 이 내용을 마크다운으로 저장해야 하는 거고.

Claude Code한테 데이터 저장 전략을 같이 짜자고 했더니, 일단 브라우저 로컬 저장소에 저장하고, Supabase라는 무료 데이터베이스 서비스까지 자동으로 연결해줬다. Supabase를 직접 세팅해본 적이 없어 막막했는데, 테이블 생성부터 데이터 저장/불러오기 로직까지 알아서 세팅해줬다. 스탠드업이 끝나면 마크다운 파일로 다운로드도 가능하게 만들어줬고.

채팅창만 보여주니까 어제 어땠는지 기억이 안 나. 어제 저녁 체크인 내용이 반영되어야 할 거 같아.

그 데이터베이스 덕분에, 어제 저녁 체크인 데이터를 다음 날 아침에 불러와서 체크리스트로 보여주는 것도 가능해졌다. "✅ API 리팩토링 / ⬜ 문서 작성" 이런 식으로 어제 결과가 눈에 보이니까, "어제 뭘 했더라?" 하는 문제가 해소됐다.

아침 스탠드업 → 저녁 체크인 → 다음 날 아침 — 이 사이클이 자연스럽게 이어지는 걸 보면서, "이게 진짜 프로덕트 같아지고 있다"는 느낌을 받았다.

막혔던 순간 — .next 캐시의 저주

작업하면서 반복적으로 겪은 문제가 있었다. 코드를 수정하면 UI가 갑자기 깨지는 현상. 스타일이 날아가고, 레이아웃이 뒤죽박죽 됐다.

UI가 또 깨졌네...

처음엔 내가 뭘 잘못한 줄 알았는데, Claude Code가 .next 캐시 문제라고 알려줬다. 캐시를 삭제하고 다시 시작하면 정상으로 돌아왔다. 이걸 자동화할 수 없냐고 물었더니, 개발 서버 시작할 때마다 캐시를 자동으로 날리는 설정을 만들어줬다. 이후로는 이 문제가 사라졌다.

✅ 결과 (After)

결과물

• Google Meet 스타일 UI (카메라 프리뷰 + AI 아바타)

• AI 돼지 캐릭터 Porky가 진행하는 스탠드업 미팅

• 음성 대화 (Edge TTS 한국어 음성)

• 아침 계획 → 저녁 체크인으로 이어지는 데이터 흐름

• 마크다운으로 저장되는 스탠드업/체크인 기록

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. 스크린샷을 적극 활용하자 — "이거 이상해" + 스크린샷 하나면 AI가 정확히 뭘 고쳐야 하는지 안다. 말로 설명하는 것보다 10배 빠르다.

2. 기획 단계에서 AI와 대화하자 — Porky 질문 프레임워크처럼, 구현 전에 AI와 설계를 같이 짜면 결과물의 퀄리티가 확 올라간다.

3. 모르면 그냥 물어봐라 — "무료 모델 있어?", "이거 자동화할 방법 있어?" 한마디로 해결되는 게 많다. AI가 프레임워크, 모델, 기법을 알아서 가져온다.

이렇게 하면 안 돼요

1. 내 머릿속에서 먼저 "안 될 것 같은데"를 판단하지 말 것 — 카메라? 음성? 불가능할 것 같았지만 다 됐다.

2. AI 생성에 "한 방에 됨"을 기대하지 말 것 — Porky 캐릭터 만드는 데 생각보다 시행착오가 많았다. 기능 구현도 마찬가지다. 반복이 필요하다.

🚀 앞으로의 계획

그리고... 포기... 하지만 괜찮다!!!

프로토타입이 거의 완성될 즈음, 솔직한 깨달음이 왔다. "나 어차피 이거 만들어도 안 쓸 것 같은데...🥲"

무료 모델을 활용해서 성능 면에서 많이 떨어지고, 그렇다 보니 아무래도 손이 안 갔다. 근데 아쉬움은 없다. 만드는 과정 그 자체가 가치 있었다! 바이브코딩으로 간단한 플랫폼 정도만 만들 수 있을 줄 알았는데, 카메라, 음성, AI 대화, 데이터 저장... 이 모든 걸 내가 직접 구현했다는 경험이 남았다.

지금은 흥미가 떨어져 완성을 포기한 상태지만, 언젠가 진짜 매일 쓰고 싶은 루틴 앱이 생기면 그때 다시 만들 수도 있다. 이번의 경험이 다음 프로젝트의 자산이 될 것 같다.