사실 개발자로 살면서 15년간 PM역활을 더 많이 해왔습니다.

지금도 대국민서비스를 하는 앱들을 포함해서 꽤 많은 앱들을 관리하고 있는데요.

이번에 나만을 위한 메모앱을 만들다보니, 무엇이 중요한가에 대한 많은 생각을 하게되었습니다.



좋은 앱은 무엇인가 더 많은 기능을 넣는것이 아닌

내가 원하는 본질에 어떻게 다가가야 하는지, 끊임없이 성찰하는 과정을 겪는다는 기분이라고 할까요.



지금 만든 앱은 그렇습니다.

일정도 없고, 투자자도 없고, KPI도 없고, 마감에 대한 압박도 없습니다.

그런데 속일수 없는 그사용자 단 한명 나에게 솔직하기 위해서, 더 촘촘하고, 더 세밀하게 바라보게 되더라구요.



새로운 기능을 넣기전에 하나씩 불편함을 덜어주는 과정을 거쳤습니다.

온전히 기록을 위한 타자만 남기려고 클릭한번더와 타자 한번더와의 차이를 느끼고, 거슬리는 단어 문단 그리고 시선까지 고민하게 되더라구요.

이제 거의 마무리되어서 뭔가 시인의 기분마져 느끼고 있네요.



다음업데이트에 이런부분을 반영하게 되서 너무나 기쁩니다. 나의 만족감이 다른 사람들은 어떻게 느낄까 하는 정말 순수한 감정을요.

도파민 팡팡 터진 행복한 날들이었네요 ㅎㅎ.

개발로그를 첨부해 봅니다.

# AI Memo 개발 일기

## 2025년 12월 8일 - v1.0 첫 출발

오늘 드디어 AI Memo 첫 버전을 세상에 내놨다. 사실 대단한 건 아니고, 그냥 브라우저 쓰다가 생각나는 걸 빨리 적고 싶어서 만들었다. 새 탭 열고, 메모장 찾고, 파일명 정하고... 이 과정이 너무 귀찮더라. 생각의 흐름이 뚝뚝 끊긴다.

크롬 확장 프로그램으로 만든 이유는 명확했다. 언제 어디서나, 어떤 웹페이지를 보고 있든 단축키 하나로 바로 띄울 수 있으니까. 400×600 픽셀짜리 작은 팝업이면 충분했다.

### AI한테 태그를 맡기다

첫 버전에서 제일 고민한 건 정리였다. 메모는 쌓이면 쌓일수록 찾기 어려워진다. 폴더 만들기도 귀찮고, 태그 직접 다는 것도 생각의 흐름을 끊는다. 그래서 AI한테 맡기기로 했다.

Google Gemini Nano를 연동해봤다. window.ai로 접근하는 거였는데, 실패하면 정규식 기반 키워드 추출로 대체하게 만들었다. 한글 조사 떼어내고 명사만 뽑아내는 extractKeywords 함수를 짰다. 투박하지만 작동했다. 중요한 건 사용자가 신경 쓰지 않아도 메모가 알아서 정리된다는 느낌이었다.

### 손으로 만지는 인터페이스

메모 순서도 중요했다. @dnd-kit 라이브러리로 드래그 앤 드롭을 구현했다. 애니메이션이 부드럽게 나와서 좋다. 메모를 잡아서 움직일 때 다른 메모들이 자연스럽게 자리를 비켜주는 느낌. 디지털이지만 뭔가 물건 만지는 느낌을 주고 싶었다. order 필드로 순서를 저장했다.

다국어도 넣었다. 한국어랑 영어 실시간 토글. 날짜 포맷(toLocaleString)도 자동으로 바뀐다. 나만 쓸 거 아니니까.

---

## 2025년 12월 15일 - v1.3 효율성을 높이다

요즘 계속 쓰다 보니까 불편한 점들이 보이기 시작했다. 메모 저장하려고 버튼 누르는 게 은근 귀찮다. 키보드에서 손 떼는 그 짧은 순간이 흐름을 끊는다.

### 단축키 추가

`Ctrl + Enter` (맥은 `Cmd + Enter`)로 저장하게 만들었다. 간단한 기능인데 생산성이 확 올랐다. 타이핑하다가 바로 저장하고 다음 생각으로 넘어갈 수 있다. `Alt + Enter`로 줄바꿈도 강제로 넣을 수 있게 했다. 어떤 사람들은 엔터를 줄바꿈으로 쓰고 싶어 하니까.

### 시리얼 넘버 시스템

이때쯤 각 메모에 고유 번호를 붙이기로 했다. `#24-0042` 같은 형식이다. 메모가 많아지면 "아, 그 메모"라고 말하기 어렵다. "42번 메모"라고 부를 수 있으면 훨씬 명확하다.

연도별로 카운터를 분리했다. localStorage에 serial-2025 이런 식으로 저장한다. 매년 1번부터 시작하는 게 심리적으로 깔끔해 보였다.

### 텍스트 정리 도구

웹에서 텍스트 복사하면 온갖 마크다운 문법(#, *, -)이나 HTML 태그가 따라온다. 지팡이 아이콘을 클릭하면 이런 걸 싹 제거하고 순수한 텍스트만 남기게 했다. Clean Text 기능이라고 이름 붙였다. 깨끗한 텍스트가 필요할 때가 의외로 많더라.

---

## 2025년 12월 17일 - v1.4 데이터 백업

어느 날 문득 생각이 들었다. 만약 이 확장 프로그램이 망가지면? 브라우저 캐시 날아가면? 내 메모들은 다 어디로 가는 거지? 좀 불안해졌다.

### JSON 백업 시스템

그래서 백업 기능을 만들었다. 전체 메모 데이터, 태그 설정, 작성일시를 포함한 표준 JSON 파일로 추출할 수 있게 했다. 파일명은 `aimemo-backup-2025-12-17.json` 이런 형식이다. 언제든 다운로드받아서 보관할 수 있다.

### 자동 패칭

백업 파일 만들면서 새로운 문제가 생겼다. 앞으로 버전 업데이트하면서 데이터 구조가 바뀔 수 있는데, 예전 백업은 어떻게 하지?

자동 패칭 시스템을 넣었다. 구버전 백업을 불러오면 누락된 필드(order, serialNumber 같은 거)를 자동으로 생성해준다. 사용자는 그냥 "가져오기" 버튼만 누르면 된다. 물론 덮어쓰기 전에는 window.confirm으로 경고를 띄웠다. 실수로 데이터 날리는 건 정말 끔찍하니까.

---

## 2025년 12월 18-19일 - v2.0 프리미엄 경험

기능은 충분한 것 같았다. 이제는 경험을 개선할 차례였다. 매일 쓰는 도구인데, 보기 좋아야 하지 않을까?

### 10가지 테마

테마 시스템을 만들기 시작했다. Modern(기본), Classic, Dark, Forest, Midnight, Zen, Ocean, Garden, Deep, Tarot. 총 10가지다.

각 테마는 단순히 색만 바꾸는 게 아니다. 분위기 전체를 바꾼다. Forest 테마를 선택하면 초록빛 숲속에 있는 느낌이 들고, Midnight를 선택하면 고요한 밤의 정적이 느껴진다. 각각 고유한 CSS 변수(Color Palette)와 배경 스타일을 적용했다.

### 배경음

테마 바꾸면 그에 맞는 배경음이 은은하게 깔린다. Zen 테마는 싱잉볼(Singing Bowl) 소리, Classic 테마는 도서관 소리. 소리가 거슬릴 수도 있으니 볼륨을 0.1 단위로 미세 조절할 수 있게 했고, 음소거 설정도 기억한다.

### Pro 버전

이 시점에서 Pro 버전을 도입했다. 무료로 모든 걸 제공하고 싶었지만, 계속 개발하려면 수익이 필요했다.

라이선스 시스템은 최대한 간단하게 만들었다. `PRO-{RANDOM}-{CHECKSUM}` 형식의 키를 입력하면 오프라인에서 체크섬 방식으로 검증된다. 서버에 개인정보 안 보낸다. 프라이버시는 타협할 수 없다.

### 타임머신

Pro 사용자에게는 타임머신 기능을 제공한다. 사용자가 설정한 주기(1h, 6h, 12h, 24h)마다 백그라운드에서 스냅샷을 저장한다. 최대 7개의 과거 시점 데이터를 보관하고 원클릭으로 복원할 수 있다. 실수로 중요한 메모 지웠을 때 정말 유용할 것 같다.

---

## 2025년 12월 22일 - v2.1 성능의 벽을 넘다

메모가 1,000개를 넘어가면서 문제가 생겼다. 앱을 열 때마다 0.5초씩 멈칫한다. localStorage의 한계였다. 동기식으로 작동하는 localStorage는 큰 데이터를 읽을 때 메인 스레드를 차단한다.

### IndexedDB 마이그레이션

결단을 내렸다. IndexedDB로 완전히 갈아타기로. Dexie.js 라이브러리를 선택했다. 비동기 처리로 바꾸니까 로딩 속도가 0.01초로 줄었다. **50배 빨라진 거다.** 이제 10,000개 메모 넣어도 끄떡없다. 메인 스레드 차단 현상도 완전히 해결됐다.

### 스마트 검색

검색 로직도 다시 생각했다. 사람들은 두 가지 방식으로 메모를 찾는다. 태그로 찾거나, 내용으로 찾거나.

**하이브리드 검색 모드**를 만들었다:
- **태그 모드**: `#`으로 시작하면 AND 조건 검색 활성화. `#아이디어 저녁`이라고 입력하면 '아이디어'와 '저녁'이 **모두** 포함된 메모를 찾는다.
- **일반 모드**: `#` 없이 `아이디어 저녁`이라고 입력하면 띄어쓰기를 포함한 **정확한 구문**을 검색한다.

검색창 우측에 검색 결과 개수를 실시간으로 보여주는 뱃지도 추가했다. 작은 디테일이지만, 내가 찾는 메모가 몇 개인지 바로 아는 게 중요하더라.

---

## 2025년 12월 24일 - v2.2 실용성의 완성

크리스마스 이브다. 마지막 업데이트를 올렸다. 실용성에 집중한 버전이다.

### 컨텍스트 메뉴 통합

웹서핑하다가 좋은 문장 발견하면 어떻게 할까? 드래그하고, 확장 프로그램 열고, 붙여넣기 하고... 너무 많은 단계다.

브라우저 우클릭 메뉴에 "Save to AI Memo" 항목을 추가했다. 텍스트를 선택하고 우클릭해서 이걸 누르면 바로 저장된다. background.ts와 App.tsx가 IndexedDB를 공유한다. 성공하면 확장 프로그램 아이콘에 OK 뱃지가 1.5초간 반짝인다. 비차단적(Non-blocking) 피드백이다.

**스마트 들여쓰기**도 추가했다. 선택된 텍스트의 불필요한 공백은 제거하되, **상대적 들여쓰기(Relative Indentation)**는 유지한다. 코드나 목록의 구조를 보존하는 거다.

### 플로팅 윈도우 모드

어떤 사람들은 메모를 항상 눈에 보이게 두고 싶어 한다. 팝업은 다른 탭으로 가면 사라지니까 불편했다.

독립된 팝업 윈도우로 실행할 수 있게 했다. chrome.windows.create에서 type: 'popup'으로 만든다. 항상 위(Always-on-top) 효과를 위해 창 크기랑 위치를 최적화했다. IndexedDB 덕분에 팝업과 플로팅 모드 간 데이터가 실시간으로 동기화된다.

### UI 디테일들

**날짜 구분선**을 추가했다. 메모 리스트에 "오늘", "어제", "YYYY년 MM월 DD일" 헤더를 조건부로 렌더링한다. 날짜가 변경되는 지점을 자동 감지해서 삽입한다.

**완료 표시** 기능도 넣었다. 메모 본문을 더블 클릭하면 isDone 상태가 토글된다. 완료된 메모는 텍스트가 회색으로 바뀌고 중앙에 취소선(line-through)이 그어진다. 체크리스트처럼 쓸 수 있다.

**드래그 핸들**도 개선했다. 평소에는 점 6개 아이콘(Grip)만 보이다가, ::before 영역에 마우스를 올리면 시리얼 넘버(#24-xxxx)가 나타난다. 평소엔 깔끔하게, 필요할 때만 정보를 보여준다.

---

## 돌아보며

처음엔 그냥 간단한 메모 앱 하나 만드는 거였다. 근데 어느새 여기까지 왔다.

- **v1.0**: AI 자동 태깅, 드래그 앤 드롭, 다국어 지원
- **v1.3**: 키보드 단축키, 시리얼 넘버, 텍스트 정리 도구
- **v1.4**: JSON 백업/복원, 자동 패칭
- **v2.0**: 10가지 테마, 배경음, Pro 라이선스, 타임머신
- **v2.1**: IndexedDB 마이그레이션(50배 빠름), 스마트 검색
- **v2.2**: 컨텍스트 메뉴, 플로팅 윈도우, 날짜 구분선, 완료 표시

만들면서 계속 생각한 건 하나였다. **사용자의 흐름을 깨지 말 것.** 생각은 흐르는 물 같다. 한 번 끊기면 다시 이어붙이기 어렵다. 그래서 모든 기능을 최대한 자연스럽게, 방해하지 않게, 필요할 때만 정확하게 작동하게 만들려고 했다.

앞으로도 조금씩 더 나아질 것 같다. 뭐 거창한 건 아니고, 그냥 쓸모 있는 도구 하나 만드는 거다.