말하면 Notion에 저장된다 — 음성 메모 PWA 직접 만든 반년 진화기

- 6월 07, 2026

음성 메모를 Notion 데이터베이스에 자동으로 저장하는 PWA를 직접 만든 지 반년이 지났습니다. 처음 만들 때는 "이 정도면 충분하다"고 생각했는데, 주변 생태계가 바뀌면서 도구가 오히려 더 단순해졌습니다. 직접 만들었기 때문에 변화를 바로 따라갈 수 있었습니다. 그 반년의 기록을 남깁니다.

1. 아이디어는 회의실 밖에서 온다

번뜩이는 아이디어, 회의실에서 나온 적 있으신가요?

아마 거의 없을 겁니다.

진짜 좋은 생각은 샤워할 때, 조깅할 때, 버스 창밖을 멍하니 바라볼 때 — 갑자기 찾아옵니다. 뇌는 집중할 때가 아니라 방황할 때 정보를 재조합합니다.

문제는 — 그 순간, 손에 펜이 없다는 것.

샤워 중에 떠오른 아이디어. 조깅하다 스친 해결책. 퇴근길에 갑자기 연결된 점들.

3초 뒤, 사라집니다.

"아까 그 프로젝트, 타겟을 B2B로 바꾸면 어떨까? 그리고 pricing은 freemium으로..."

그냥 말하면 됩니다. AI가 구조화하고, Notion에 자동 저장합니다. 다음 날 열면 — 어젯밤의 번뜩임이 깔끔하게 정리되어 있습니다.

이 문제를 해결하기 위해 직접 만들었습니다.

2. 직접 만든 이유 — 기존 도구의 한계

시중에 음성 메모 앱은 많습니다. 그런데 직접 쓰면서 느낀 한계가 각각 명확했습니다.

애플 기본 음성 메모는 녹음 파일로 저장됩니다. 나중에 다시 들어야 하는데, 그 "나중"은 거의 오지 않습니다. 음성 파일 무덤이 됩니다.

Notion 모바일 앱은 열고 타이핑하기까지 단계가 너무 많습니다. 앱 열기, 데이터베이스 찾기, 새 페이지 만들기, 제목 입력. 생각이 도착하기도 전에 UI를 조작하는 데 에너지를 씁니다.

카카오톡 나에게 보내기는 가장 많이 쓰는 방법이었는데, 결국 그 채팅방이 정리 안 된 메모 더미가 됩니다. 보내는 건 빠른데, 나중에 Notion으로 옮기는 작업이 귀찮아서 결국 안 하게 됩니다.

원하는 것은 단순했습니다. 말하면, 정리된 상태로 Notion 데이터베이스에 있으면 됩니다. 중간 단계가 없어야 합니다. 직접 만드는 이유가 여기 있었습니다.

홈화면에 설치하면 다른 앱과 똑같이 한 번에 열립니다. PWA라 앱 스토어 없이 바로 설치됩니다.

3. v1: Groq + Vercel Serverless + Web Speech API로 만든 PWA

2025년 12월, 처음 만든 버전의 구조는 이렇습니다.

마이크 버튼 탭 → Web Speech API 호출
음성 인식 → 구어체 텍스트 ("어... 오늘 회의에서 그러니까...")
Groq API (llama-3.3-70b) 호출 → 구어체를 문어체로 정제
Vercel Serverless Function → Notion API로 DB 페이지 생성 + Slack 알림

코드는 200줄이 채 되지 않았습니다. Vercel 무료 티어로 배포했고, 도메인 연결까지 30분이면 됐습니다.


// api/save.js — 핵심 흐름 (전체 200줄 미만)
export default async function handler(req, res) {
  const { text } = req.body;

  // 1) Groq로 구어체 → 문어체 정제 (model: llama-3.3-70b-versatile)
  const refined = await refineWithGroq(text);

  // 2) Notion DB에 페이지 생성 (title 속성명: Projects)
  await saveToNotion(refined);

  // 3) Slack으로 PC 알림
  await sendSlackNotification(refined);

  res.status(200).json({ success: true, refined });
}

[참고] Vercel 환경 변수 세팅: 코드에서 process.env로 참조하는 키 세 가지는 Vercel 대시보드 Settings → Environment Variables에서 설정합니다. GROQ_API_KEY는 Groq Console에서 발급받고, NOTION_API_KEY는 Notion 통합(Integration) 생성 후 복사합니다. NOTION_DATABASE_ID는 Notion 데이터베이스 URL의 ?v= 앞 32자리 hex 값입니다. 로컬 개발 시에는 .env 파일에 동일한 키로 입력하면 됩니다.

만족스러운 부분이 많았습니다. 실제로 회의 끝나고 복도에서 30초 만에 액션아이템을 저장했습니다. Slack 알림이 오면 PC에서도 바로 확인할 수 있었습니다.

그런데 한 가지 문제가 있었습니다. 아이폰 Safari에서 마이크 버튼을 누를 때마다 권한 팝업이 떴습니다. 당연히 허용을 눌러야 하는데, 그 팝업 자체가 심리적 마찰이었습니다. 빠르게 말하고 싶은데 팝업을 처리하는 그 순간이 흐름을 끊었습니다.

4. 세상이 바뀌었다 — Typeless가 해결해줬다

[주의]: 아래 내용은 Typeless 키보드 앱 사용 경험을 기반으로 작성했습니다. 앱 업데이트 또는 iOS 버전에 따라 동작이 다를 수 있으므로, 발행 전 현재 버전에서 직접 확인을 권장합니다.

Typeless는 iOS 서드파티 키보드 앱입니다. 키보드 영역에서 바로 음성 입력을 받아, 이미 정제된 텍스트 형태로 입력 필드에 넣어줍니다. 발화에서 "음", "어" 같은 필러워드를 제거하고 문어체로 다듬는 처리를 앱 내부에서 합니다.

이게 게임 체인저였습니다.

기존 v1의 흐름에서 가장 복잡한 부분이 Groq API 레이어였습니다. 구어체로 들어오는 음성을 정제하기 위해 LLM을 호출해야 했습니다. API 키 관리, 레이턴시, 비용이 모두 이 레이어에서 발생했습니다.

Typeless를 쓰면 그 레이어가 사라집니다. 말하면 이미 정제된 문장이 textarea에 들어옵니다. "어... 오늘 회의에서 그러니까 다음 주까지 제안서를 마무리해야 하는데..."가 아니라, "다음 주까지 제안서 마무리 필요"가 바로 입력됩니다.

마이크 권한 팝업도 없습니다. Typeless 키보드 자체에서 처리하기 때문입니다.

LLM 정제 레이어가 서버에서 키보드 레이어로 이동했다고 볼 수 있습니다. 제가 만든 서버는 더 단순해졌고, 사용자 경험은 더 좋아졌습니다.

Typeless 키보드를 올린 상태의 Voice to Notion 입력 화면 — Typeless 키보드를 띄우고(왼쪽) 말하면, 정제된 문장이 곧바로 textarea에 들어옵니다(오른쪽). 구어체 군더더기 없이 바로 저장 가능한 상태가 됩니다.

Typeless로 말한 문장이 정제되어 textarea에 입력된 화면 — Typeless 키보드를 띄우고(왼쪽) 말하면, 정제된 문장이 곧바로 textarea에 들어옵니다(오른쪽). 구어체 군더더기 없이 바로 저장 가능한 상태가 됩니다.

5. 지금의 구성과 실제 사용 흐름

[참고]: 아래는 2026-06-07 기준 실제 운영 중인 구성입니다. v1의 Groq 정제 레이어는 완전히 걷어냈습니다. Typeless가 입력 단계에서 정제하므로 서버에 LLM이 필요 없습니다.

현재 스택은 다음과 같습니다.

입력: Typeless 키보드 음성 입력 → textarea 자동 입력
저장: Vercel Serverless Function → Notion DB 페이지 생성
알림: Slack Webhook → PC에서 확인

v1에서 가장 복잡했던 Groq API 레이어는 이제 코드에서 완전히 제거했습니다. Typeless가 정제를 맡으니, 서버는 받은 텍스트를 그대로 Notion에 저장하기만 합니다. API 키 관리·레이턴시·비용이 모두 사라졌고, 서버 함수는 더 짧고 단단해졌습니다.

실제 사용 시나리오는 두 가지입니다.

첫 번째는 회의 직후입니다. 요즘은 AI 회의록 도구가 좋아져서 Next Action은 자동으로 정리되기도 합니다. 그래도 회의 중 내 머릿속에서만 굴러간 생각 — 나만의 아이디어나 판단 — 은 여전히 별도로 캡처해야 합니다. PWA가 홈화면에 설치되어 있어서 앱처럼 바로 열립니다. Typeless로 말하면 정제된 텍스트가 입력됩니다. Save to Notion 버튼 하나면 끝입니다. Slack 알림이 오면 오후에 PC에서 그 메모를 보고 캘린더나 프로젝트 보드로 옮깁니다.

두 번째는 이동 중입니다. 운전하거나, 지하철이나 버스에서 양 손이 바쁠 때도 쓸 수 있습니다. 말하는 것 자체가 입력이기 때문입니다.

PWA로 만들었기 때문에 앱 스토어 심사가 없었습니다. Vercel 배포라 무료 티어로 충분히 운영됩니다. 최근에는 앱 화면도 터미널 감성의 모노스페이스 다크 UI로 새로 다듬었습니다.

Voice to Notion 앱 메인 화면 — 터미널 네온그린 다크 UI — 현재 운영 중인 메인 화면. 마이크 오브, 입력창, Save to Notion 버튼만 있는 단순한 구성입니다. 터미널 감성의 모노스페이스 다크 UI로 다듬었습니다.

Save to Notion 후 저장 완료 알림이 뜬 화면 — Save to Notion을 누르면 저장 완료 알림이 오고(왼쪽), Notion 데이터베이스에 메모 페이지가 생성됩니다(오른쪽). 상태(Status)는 자동으로 To Do가 부여됩니다.

Notion 데이터베이스에 생성된 메모 페이지 — Save to Notion을 누르면 저장 완료 알림이 오고(왼쪽), Notion 데이터베이스에 메모 페이지가 생성됩니다(오른쪽). 상태(Status)는 자동으로 To Do가 부여됩니다.

6. 이 도구에서 배운 것

첫 번째는 완벽한 도구를 기다리지 않는 것입니다. 만들 때는 Groq API를 써야 한다는 게 번거롭게 느껴졌습니다. 더 간단한 방법이 있으면 좋겠다고 생각했습니다. 그런데 그냥 만들고 썼고, 반년 후에 Typeless가 그 부분을 대신해줬습니다. 만들지 않았다면 Typeless와 연결할 도구 자체가 없었을 것입니다.

두 번째는 개인 도구는 작아야 유지된다는 점입니다. 코드가 200줄 미만이기 때문에 생태계가 바뀌어도 빠르게 적응할 수 있었습니다. 기능이 많았다면 Groq 레이어를 제거하는 것도 부담이 됐을 것입니다.

세 번째는 AI 도구 생태계가 예측보다 빠르게 바뀐다는 점입니다. 반년 전 LLM을 직접 호출해야 했던 구어체 정제 기능을 지금은 키보드 앱이 해줍니다. 앞으로 또 어떤 레이어가 대체될지 모릅니다. 도구를 작게 유지하는 것이 그 변화를 흡수하는 방법입니다.

마무리

이 도구는 직접 만든 것이라 애착이 있습니다. 사용자가 저 한 명이더라도 계속 쓰고 있고, 쓸수록 개선하게 됩니다.

비슷한 불편함을 느끼는 분이라면 비슷한 구조로 만들어볼 수 있습니다. Vercel 무료 티어 + Notion API + Web Speech API 조합은 진입 비용이 거의 없습니다. 코드 200줄 정도면 충분합니다.

완성도보다 시작이 중요합니다. 만들고 쓰다 보면 세상이 바뀌고, 도구도 같이 좋아집니다.

이 블로그 검색

AI 코더 랩

음성봇을 스텁부터 만든 이유 — 테스트로 설계를 먼저 굳히다