memo

2026-10-07 ~ 진행 중

Intro

memo는 혼자 쓰는 메모 앱입니다. 브라우저에서 편집하지만 저장되는 것은 서버 폴더 안의 Markdown 파일입니다. PC에서는 웹으로, iPhone에서는 같은 웹을 여는 Flutter WebView 앱으로 사용합니다.

핵심은 메모를 파일로 남기면서, 휴대폰과 PC에서 편하게 열어보고 수정하는 것입니다. 폴더로 정리하고 태그로 다시 찾는 기능에 할 일과 캘린더를 더해, 기록과 해야 할 일을 같은 곳에서 다룰 수 있도록 만들었습니다.

여러 사람을 위한 협업 도구보다는 제가 매일 쓰는 메모장에 가깝습니다. 계정을 여러 개 만드는 대신 비밀번호로 접근을 보호하고, 저장 형식도 직접 읽고 옮길 수 있는 Markdown을 기준으로 삼았습니다.

사이트 링크

memo — 개인용 서비스로, 로그인 후 사용할 수 있습니다.

상단과 본문의 화면은 현재 코드를 로컬에서 실행하고 소개용 합성 메모를 넣어 촬영했습니다. 개인 메모는 사용하지 않았으며, 캘린더 화면도 Google Calendar 연동을 끈 로컬 예시입니다.

주요 기능

화면에서는 편집기로, 저장은 Markdown으로

Tiptap 기반 편집기에서 글과 목록, 표, 코드 블록, 이미지를 편집할 수 있습니다. 폴더 트리로 메모를 정리하고, 제목과 본문 검색이나 태그 화면으로 다시 찾아갑니다.

제목·날짜·태그 같은 정보는 Markdown의 frontmatter에 함께 기록합니다. 파일을 열었을 때 본문과 메모 정보를 같이 확인할 수 있는 구조입니다. 삭제한 메모는 휴지통을 거쳐 복원할 수 있습니다.

다시 찾고, 연결하고, 반복해서 쓰기

최근 메모와 즐겨찾기로 자주 쓰는 글을 열고, 제목별 목차와 섹션 접기로 긴 문서를 읽을 수 있습니다. 다른 메모를 고르는 내부 링크와 백링크도 지원합니다. 링크는 저장할 때 일반 Markdown 링크가 되어, 파일을 앱 밖에서 읽을 때도 확인할 수 있습니다.

반복해서 쓰는 문서는 「내 템플릿」으로 보관합니다. 제목·본문·태그 같은 내용을 복사하되 새 메모의 날짜와 할 일·공개 상태는 초기화합니다. 독서 메모나 여행 준비처럼 틀은 비슷하고 내용만 달라지는 기록에 쓸 수 있습니다.

메모와 할 일, 일정 구분하기

메모를 할 일로 바꾸고 날짜와 중요도를 지정할 수 있습니다. 할 일은 전용 폴더에 모으고, 끝낸 항목은 완료 상태로 관리합니다.

캘린더에 나타나는 기준은 날짜가 있는 미완료 할 일입니다. 일반 메모의 날짜는 기록용으로 남기고 일정에는 넣지 않습니다. 날짜가 있다는 이유만으로 모든 메모가 일정이 되면, 기록과 해야 할 일이 뒤섞이기 때문입니다.

Google Calendar에는 전용 캘린더로 단방향 연동합니다. 메모에서 할 일의 날짜를 바꾸면 캘린더에 반영하고, 완료하거나 일반 메모로 전환하면 연결된 일정을 정리합니다. 기존 Google 일정을 앱으로 가져오는 방식은 아닙니다.

AI와 연결해서 메모 읽고 쓰기

MCP 연결을 통해 AI 클라이언트에서 메모를 검색하고 읽거나, 새 메모와 할 일을 만들 수 있습니다. AI가 쓰는 경로도 웹 편집기와 같은 저장 로직을 거치도록 구성했습니다.

기존 메모를 수정할 때는 읽어 온 버전을 함께 보내야 합니다. 그사이 다른 곳에서 수정했다면 저장을 거절해, AI가 오래된 내용을 덮어쓰지 않도록 했습니다. 삭제 도구는 휴지통으로 보내는 동작만 제공합니다.

필요한 메모만 공개하기

개별 메모의 공개 설정을 켜면 로그인 없이 읽을 수 있는 링크가 생깁니다. 메모 전체를 공개하는 대신 필요한 글 하나만 공유하는 방식입니다. 공개 여부는 사용자가 화면에서 직접 정하며, AI 도구에서는 켤 수 없도록 했습니다.

기술 스택

영역	사용 기술
웹 앱·서버	Nuxt 4, Vue, TypeScript, Nitro
UI	Nuxt UI, Tailwind CSS
편집기	Tiptap, Shiki
저장	Markdown 파일, YAML frontmatter
iPhone 앱	Flutter, WebView
캘린더	Google Calendar API
AI 연결	MCP SDK, OAuth
배포	Docker, GitHub Actions, Cloudflare Tunnel

구현하면서 신경 쓴 부분

메모가 저장되는 경로를 하나로

웹 편집기에서 고치든 AI를 통해 수정하든 파일 저장, 충돌 검사, 휴지통 처리, 캘린더 반영은 같은 저장 계층을 통하도록 했습니다. 입력 경로가 늘어나도 저장 규칙이 달라지지 않게 하는 데 신경 썼습니다.

잘못 고친 내용은 수정 이력에서 원문을 확인하고 복원할 수 있습니다. 자동저장마다 이력이 무한히 늘어나지 않도록 5분 단위로 묶고, 메모별로 최근 30일·최대 50개를 남깁니다.

캘린더 반영이 실패해도 작성한 메모는 저장하고, 동기화 오류는 별도로 안내합니다. 외부 서비스의 문제 때문에 방금 쓴 글까지 잃지 않도록 구분한 것입니다.

웹 편집기를 그대로 쓰는 iPhone 앱

iPhone 앱은 편집기를 다시 구현하는 대신 Flutter WebView로 웹을 엽니다. 편집 동작은 웹에서 관리하고, 키보드 위의 편집 툴바는 네이티브로 구성했습니다. 툴바를 눌러도 본문 입력 포커스가 유지되도록 하고, 키보드와 안전영역, 화면 복원처럼 실제로 메모할 때 영향을 주는 부분을 다듬는 방식입니다.

메모 앱은 기능이 많은 것보다 생각났을 때 바로 적고 나중에 다시 찾을 수 있는 것이 중요하다고 생각합니다. memo도 그 흐름을 기준으로, 직접 쓰면서 필요한 기능을 조금씩 더하고 있습니다.