로컬 AI 일기장 직접 만들기 – 에이전트 대신 내가 코딩한 이유

안녕하세요. Mark입니다.

지난 편에서 AI 에이전트(Hermes, OpenClaw)를 써본 솔직한 후기를 남겼었죠. 일기 저장 한 줄 시켰는데 파이썬으로 diary.db를 통째로 만들어버린 그 에피소드, 기억하시나요? ㅎㅎ

그 사건 이후로 머릿속에서 계속 같은 생각이 떠나지 않았어요.

“차라리 내가 직접 만들면 어떨까?”

저장 누르면 바로 저장되고, 검색하면 바로 나오고, 필요할 때만 AI를 불러서 요약시키면 에이전트보다 훨씬 빠를 것 같았거든요. 그래서 로컬 AI 일기장 직접 만들기에 도전했습니다.

🔧 제 vibe-coding 파이프라인

본격적으로 들어가기 전에, 제가 평소 AI로 프로그램을 만드는 방식을 짚어볼게요. 시민개발자(저처럼 정식 프로그래밍 교육 없이 AI 도구로 만드는 사람)로서 자리잡은 패턴이에요.

단계	도구	역할
1단계	Claude	아이디어 정리, 구조 설계, 스펙 토론
2단계	GPT	정리된 내용을 MVP 개발 프롬프트로 변환
3단계	구글 안티그래비티	프롬프트 던지면 실제 코드 스캐폴딩
4단계	VS Code + Claude Code	다듬기, 버그 수정, 기능 추가

이 파이프라인으로 이미 PNG/JPG/WebP 배치 이미지 변환기를 한 번 만들어본 적이 있어요. 그때도 비슷한 과정을 거쳤는데, 이번엔 같은 방식으로 일기장 앱을 만들어보기로 했습니다.

💬 Claude와 아이디어 토론, 그리고 깜빡한 안티그래비티

재미있는 에피소드가 하나 있어요. 일기장 아이디어를 Claude와 토론하다가, 정리된 스펙을 GPT에 넘기려는 단계에서 제가 “이거 안티그래비티에 던지면 되겠죠?”라고 물었더니, Claude가 안티그래비티가 뭔지 몰라서 “그거 혹시 OpenClaw예요?”라고 되묻더라고요. ㅎㅎ

AI도 모르는 게 있다는 게 새삼 신기했어요. 도구가 워낙 빠르게 쏟아지니 AI 입장에서도 따라가기 힘든 것 같아요.

📝 Claude에게 부탁한 핵심 설계 원칙

Claude와 토론하면서 가장 중요하게 잡은 원칙은 “일기는 기본적으로 로컬에만 머문다”는 거였어요.

정리하면 이렇습니다.

원칙	내용
데이터 저장	일기는 기본적으로 로컬에만 저장
AI 호출 시점	사용자가 명시적으로 요약 버튼을 누를 때만 Gemini API 전송
잠금	앱 실행 시 비밀번호 입력 필수
보안 수준	군사급은 아니지만 개인용 로컬 앱 수준의 기본 잠금
확장성	추후 암호화 저장 기능을 더 붙일 수 있는 구조

에이전트를 쓰면서 가장 불안했던 게 “내 데이터가 어디로 가는지 안 보인다”는 점이었거든요. 그래서 이번엔 정반대로, AI는 내가 명시적으로 호출할 때만 작동하도록 설계했어요.

🎯 MVP에서 반드시 들어가야 할 4가지

욕심내지 않고 핵심만 추렸습니다.

일기 작성 및 로컬 저장
날짜 / 키워드 검색
앱 실행 시 비밀번호 잠금
Gemini API 기반 기간별 AI 요약

화면 구성도 단순하게 잡았어요. 위쪽엔 검색창, 왼쪽엔 달력과 날짜별 목록, 오른쪽엔 일기 작성 영역, 아래쪽엔 AI 요약 결과가 나오는 4분할 레이아웃입니다.

🔐 보안은 “적당히 확실하게”

군사급 보안까지는 필요 없지만, 개인 일기인데 평문으로 막 굴러다니면 곤란하잖아요.

그래서 비밀번호는 평문 저장을 금지하고 해시로 저장하도록 했고, AI 기능을 실행하기 전엔 “선택한 기간의 일기 내용이 Gemini API로 전송됩니다”라는 안내 문구를 반드시 띄우도록 했어요. 사용자가 모르는 사이에 데이터가 빠져나가는 걸 막으려는 의도예요.

🤖 AI 요약 기능: 말로 시키면 알아서 분석

기간별 요약 기능이 이번 앱의 핵심이에요. 사용자가 이런 식으로 자연어로 입력하면:

“6월 첫째주 요약해줘” “지난달 어땠어?” “이번 주 내 감정 흐름을 알려줘”

해당 기간의 일기를 모아서 Gemini API로 전송하고, 전체 요약·반복적으로 나타난 감정·자주 등장한 주제·신경 쓰고 있는 일·긍정적인 변화까지 한국어로 정리해서 돌려줍니다.

여기서 한 가지 신경 쓴 부분이 있는데, AI한테 “사용자를 비난하거나 단정하지 말고 부드럽게 표현하라”는 지침을 넣었어요. 일기는 가장 사적인 글이니까, AI가 함부로 평가하는 느낌이 들지 않게 하려고요.

📦 백업과 다크모드는 가볍게

백업은 거창하게 갈 필요 없이, 전체 일기를 JSON 파일로 내보내고 다시 불러오는 정도로 MVP 범위를 정했어요. 구글 드라이브 연동 같은 건 다음 버전으로 미뤘습니다.

다크모드도 라이트/다크 전환 버튼 하나만 넣고, 선택한 테마가 다음 실행 때도 유지되도록만 했어요.

⚡ 5분 만에 나온 뼈대, 생각보다 완성도 높았던 UI

Claude와 정리한 스펙을 GPT한테 넘기고, GPT가 다듬은 개발 프롬프트를 구글 안티그래비티에 제 Gemini Pro 계정으로 로그인해서 던졌어요.

결과가 나오는 데 걸린 시간, 5분.

그런데 그 5분짜리 뼈대가 생각보다 완성도가 높았어요. 잠금 화면, 달력 패널, 검색바, AI 패널까지 레이아웃이 처음부터 꽤 그럴듯하게 잡혀 나왔습니다. Electron + React 조합으로 구조가 잡히고, 데이터는 일단 IndexedDB로 저장하도록 됐어요.

✅ 핵심 요약

항목	내용
동기	에이전트가 일기 저장 한 번에 코드를 돌려대서 직접 만들기로 결심
파이프라인	Claude(설계) → GPT(스펙화) → 안티그래비티(스캐폴딩)
핵심 원칙	일기는 로컬 저장, AI는 명시적 호출 시에만 사용
보안	비밀번호 잠금 + 해시 저장 + AI 전송 전 안내
AI 기능	자연어로 기간 요약, 감정 흐름 분석
결과	5분 만에 완성도 높은 뼈대 확보

마치며

에이전트를 쓰면서 느꼈던 답답함이 오히려 직접 만들어보는 계기가 됐어요. 결과적으로 더 빠르고, 더 투명하고, 제가 원하는 대로 동작하는 앱이 나왔습니다.

시민개발자 입장에서 가장 신기했던 건, 아이디어부터 실제 동작하는 뼈대까지 가는 데 거의 시간이 안 걸렸다는 점이에요. Claude가 설계를 잡아주고, GPT가 그걸 실행 가능한 명령으로 바꿔주고, 안티그래비티가 코드로 만들어주는 이 조합이면 진짜 웬만한 개인용 프로그램은 직접 만들 수 있겠다 싶었어요.

“에이전트가 일기 저장하는 데 한참 걸려서 답답했는데, 그 답답함이 결국 제 손으로 앱을 만들게 했네요. 화나면 뭐라도 만들게 되나 봅니다 ㅎㅎ” — Mark, 시민개발자

로컬 AI 일기장 MVP 개발 요청서 by Chat GPT
0. 역할
너는 Electron + React 기반 데스크톱 앱을 개발하는 시니어 풀스택 개발자다.
이번 프로젝트의 목표는 Windows에서 실행 가능한 로컬 AI 일기장 MVP를 만드는 것이다.
앱은 개인 일기를 로컬에 저장하고, 사용자가 원할 때만 Gemini API를 이용해 기간별 요약, 자연어 질문, 맞춤법 검사, 감정 흐름 분석을 수행한다.
중요한 원칙은 다음과 같다.
일기 데이터는 기본적으로 로컬에만 저장한다.
사용자가 AI 기능을 실행할 때만 필요한 일기 내용을 Gemini API로 전송한다.
앱 실행 시 비밀번호 잠금 화면을 먼저 보여준다.
MVP에서는 완벽한 군사급 보안보다 “개인용 로컬 앱으로서의 기본 잠금과 데이터 분리”를 우선한다.
추후 암호화 저장 기능을 확장할 수 있도록 구조를 설계한다.
1. 앱 개요
앱 이름
로컬 AI 일기장
개발 스택
React
TypeScript
Electron
SQLite 또는 IndexedDB
Gemini API
Vite
CSS Modules 또는 Tailwind CSS 중 하나 선택
권장 방향
Windows exe 패키징을 목표로 하므로 MVP는 Electron + React + SQLite 조합을 우선한다.
단, 구현 난이도가 높다고 판단되면 Electron + React + IndexedDB 조합으로 시작해도 된다.
2. MVP 핵심 목표
이번 MVP에서 반드시 구현할 기능은 다음 4가지다.
일기 작성 및 로컬 저장
날짜 / 키워드 검색
앱 실행 시 비밀번호 잠금
Gemini API 기반 기간별 AI 요약
3. 화면 구성
전체 레이아웃
아래 구조를 기준으로 구현한다.
┌────────────────────────────────────────────┐
│ 상단: 앱 제목 / 검색창 / 다크모드 버튼      │
├───────────────┬────────────────────────────┤
│ 왼쪽 영역      │ 오른쪽 영역                 │
│ 달력           │ 일기 작성 / 보기 / 수정      │
│ 날짜별 목록    │ 제목 입력                    │
│ 키워드 검색    │ 본문 입력                    │
│               │ 저장 버튼                    │
├───────────────┴────────────────────────────┤
│ 하단: AI 요약 / 자연어 질문 / 결과 출력     │
└────────────────────────────────────────────┘
잠금 화면
앱 실행 시 가장 먼저 잠금 화면을 표시한다.
잠금 화면 구성:
비밀번호 입력창
잠금 해제 버튼
최초 실행 시 비밀번호 설정 화면
비밀번호 오류 메시지
4. 데이터 저장 구조
DiaryEntry 모델
type DiaryEntry = {
  id: string;
  date: string;        // YYYY-MM-DD
  title: string;
  body: string;
  mood?: string;
  keywords?: string[];
  createdAt: string;
  updatedAt: string;
};
AppSettings 모델
type AppSettings = {
  passwordHash: string;
  geminiApiKey?: string;
  theme: "light" | "dark";
};
저장 방식
MVP에서는 아래 중 하나를 선택한다.
1순위: SQLite
Electron 환경에서 로컬 DB 파일로 저장한다.
예상 DB 테이블:
CREATE TABLE diary_entries (
  id TEXT PRIMARY KEY,
  date TEXT NOT NULL,
  title TEXT NOT NULL,
  body TEXT NOT NULL,
  mood TEXT,
  keywords TEXT,
  created_at TEXT NOT NULL,
  updated_at TEXT NOT NULL
);

CREATE TABLE app_settings (
  key TEXT PRIMARY KEY,
  value TEXT NOT NULL
);
2순위: IndexedDB
SQLite 설정이 복잡할 경우 IndexedDB로 시작한다.
단, 추후 SQLite로 교체하기 쉽도록 저장 로직은 별도 모듈로 분리한다.
5. 보안 요구사항
MVP 보안
앱 실행 시 비밀번호 입력 필요
최초 실행 시 비밀번호 설정
비밀번호는 평문 저장 금지
비밀번호는 SHA-256 또는 bcrypt 해시로 저장
일기 데이터는 기본적으로 로컬에만 저장
AI 기능 실행 전 사용자에게 “선택한 기간의 일기 내용이 Gemini API로 전송됩니다” 안내 표시
추후 확장 고려
MVP 이후 버전에서 아래 기능을 추가할 수 있도록 구조를 열어둔다.
DB 전체 암호화
일기 본문 필드 암호화
비밀번호 변경
자동 잠금
백업 파일 암호화
6. 일기 작성 기능
기본 기능
오늘 날짜 자동 입력
날짜 직접 선택 가능
제목 입력
본문 입력
저장 버튼
기존 날짜의 일기 선택 시 수정 가능
저장 시 createdAt / updatedAt 관리
UX 요구사항
저장 성공 메시지 표시
저장 후 왼쪽 목록 자동 갱신
제목이 비어 있으면 본문 첫 줄 또는 “제목 없음”으로 자동 설정
본문이 비어 있으면 저장 불가
7. 검색 기능
날짜 검색
달력에서 날짜 선택
선택한 날짜의 일기 목록 표시
월별로 작성한 날짜를 표시할 수 있으면 좋음
키워드 검색
제목 + 본문 대상으로 검색
검색어 입력 시 결과 목록 표시
검색 결과 클릭 시 오른쪽 편집 영역에 로드
8. AI 기능
Gemini API 설정
설정 화면 또는 상단 입력 영역에서 Gemini API Key 입력 가능
API Key는 로컬 설정에 저장
API Key가 없으면 AI 기능 버튼 비활성화 또는 안내 메시지 표시
기간별 요약
사용자가 다음과 같은 자연어 요청을 입력할 수 있어야 한다.
6월 첫째주 요약해줘
지난달 어땠어?
이번 주 내 감정 흐름을 알려줘
MVP에서는 자연어 날짜 해석이 복잡하면 다음 방식으로 시작해도 된다.
시작일 선택
종료일 선택
“이 기간 요약” 버튼
자연어 질문 입력창
AI 요약 프롬프트
Gemini API로 보낼 때는 다음 형식을 사용한다.
너는 사용자의 개인 일기를 분석하는 조용하고 신중한 AI 비서다.

아래 일기들을 바탕으로 다음을 한국어로 요약해라.

1. 전체 요약
2. 반복적으로 나타난 감정
3. 자주 등장한 주제
4. 사용자가 신경 쓰고 있는 일
5. 긍정적인 변화
6. 조심하면 좋을 점

단, 사용자를 비난하거나 단정하지 말고 부드럽게 표현해라.

[일기 목록]
날짜: YYYY-MM-DD
제목: ...
내용: ...
AI 결과 표시
하단 AI 결과 영역에 출력
결과 복사 버튼
결과 지우기 버튼
9. 맞춤법 검사
MVP에서는 선택 기능으로 둔다.
구현 가능하면:
저장 전 “맞춤법 검사” 버튼
Gemini API를 이용해 문장을 자연스럽게 교정
원문 덮어쓰기 전 사용자 확인
불가능하면 v1.1 기능으로 분리한다.
10. 감정 분석
MVP에서는 단순 구현으로 시작한다.
방법:
저장 시 사용자가 직접 감정 선택
좋음
보통
나쁨
피곤
화남
불안
AI 분석 시 감정 흐름을 텍스트로 요약
자동 감정 분석은 v1.1 기능으로 분리한다.
11. 통계 기능
MVP에서는 아주 간단하게 구현한다.
월별 작성 횟수
전체 일기 수
이번 달 작성 수
자주 쓴 키워드 분석은 v1.1로 분리해도 된다.
12. 백업 / 복원
MVP에서는 최소 기능만 구현한다.
백업
전체 일기 데이터를 JSON 파일로 내보내기
파일명 예시: diary_backup_2026-06-29.json
복원
JSON 백업 파일 가져오기
기존 데이터와 병합 또는 전체 교체 선택
복원 전 확인 메시지 표시
구글 드라이브 백업은 v1.1 이후 기능으로 미룬다.
13. 다크모드
라이트 / 다크 전환 버튼
선택한 테마는 로컬 설정에 저장
다음 실행 시 유지
14. 프로젝트 구조
권장 구조는 다음과 같다.
local-ai-diary/
├── package.json
├── vite.config.ts
├── electron/
│   ├── main.ts
│   ├── preload.ts
│   └── db.ts
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   ├── styles/
│   │   └── global.css
│   ├── components/
│   │   ├── LockScreen.tsx
│   │   ├── DiaryEditor.tsx
│   │   ├── DiaryList.tsx
│   │   ├── CalendarPanel.tsx
│   │   ├── SearchBar.tsx
│   │   ├── AiPanel.tsx
│   │   ├── SettingsPanel.tsx
│   │   └── StatsPanel.tsx
│   ├── services/
│   │   ├── diaryService.ts
│   │   ├── settingsService.ts
│   │   ├── geminiService.ts
│   │   └── backupService.ts
│   ├── types/
│   │   └── diary.ts
│   └── utils/
│       ├── dateUtils.ts
│       ├── passwordUtils.ts
│       └── keywordUtils.ts
├── README.md
├── .gitignore
└── build.bat
15. Electron 보안 요구사항
Electron 사용 시 아래를 반드시 지킨다.
webPreferences: {
  nodeIntegration: false,
  contextIsolation: true,
  preload: path.join(__dirname, "preload.js")
}
렌더러에서 직접 Node.js API를 쓰지 말고 preload를 통해 필요한 API만 노출한다.
16. 패키징
Windows exe 생성을 위해 electron-builder 또는 electron-forge 중 하나를 사용한다.
가능하면 electron-builder를 사용한다.
build.bat 예시
@echo off
npm install
npm run build
npm run dist
pause
17. README 작성
README.md에는 다음 내용을 포함한다.
앱 소개
주요 기능
설치 방법
개발 실행 방법
빌드 방법
Gemini API Key 설정 방법
데이터 저장 위치
보안 주의사항
향후 개발 계획
18. 완료 조건
아래 조건을 만족하면 MVP 완료로 본다.
앱 실행 시 비밀번호 설정 / 로그인 가능
일기 작성 후 로컬 저장 가능
저장된 일기를 날짜별로 다시 불러올 수 있음
키워드 검색 가능
Gemini API Key 입력 후 선택 기간 일기 요약 가능
AI 전송 전 사용자 안내 메시지 표시
백업 JSON 내보내기 가능
다크모드 전환 가능
Windows exe 빌드 스크립트 포함
19. 개발 순서
아래 순서로 개발한다.
프로젝트 초기 세팅
Electron + React 실행 확인
로컬 저장소 모듈 구현
비밀번호 설정 / 로그인 화면 구현
일기 작성 / 수정 / 삭제 구현
날짜별 목록 및 키워드 검색 구현
Gemini API 설정 및 요약 기능 구현
백업 / 복원 구현
다크모드 구현
README, build.bat, .gitignore 작성
Windows 패키징 테스트
20. 주의사항
처음부터 과도하게 복잡한 UI를 만들지 말 것
MVP는 일단 실행 가능한 것이 가장 중요하다
기능을 한 번에 많이 넣기보다 단계별로 동작 확인하면서 진행할 것
민감한 일기 데이터가 Gemini API로 자동 전송되지 않도록 할 것
사용자가 명시적으로 AI 요약 버튼을 눌렀을 때만 API 전송할 것
코드 작성 후 변경 파일 목록과 실행 방법을 요약해서 보고할 것

🔧 제 vibe-coding 파이프라인

💬 Claude와 아이디어 토론, 그리고 깜빡한 안티그래비티

📝 Claude에게 부탁한 핵심 설계 원칙

🎯 MVP에서 반드시 들어가야 할 4가지

🔐 보안은 “적당히 확실하게”

🤖 AI 요약 기능: 말로 시키면 알아서 분석

📦 백업과 다크모드는 가볍게

⚡ 5분 만에 나온 뼈대, 생각보다 완성도 높았던 UI

✅ 핵심 요약

마치며

로컬 AI 일기장 MVP 개발 요청서 by Chat GPT

0. 역할

1. 앱 개요

앱 이름

개발 스택

권장 방향

2. MVP 핵심 목표

3. 화면 구성

전체 레이아웃

잠금 화면

4. 데이터 저장 구조

DiaryEntry 모델

AppSettings 모델

저장 방식

1순위: SQLite

2순위: IndexedDB

5. 보안 요구사항

MVP 보안

추후 확장 고려

6. 일기 작성 기능

기본 기능

UX 요구사항

7. 검색 기능

날짜 검색

키워드 검색

8. AI 기능

Gemini API 설정

기간별 요약

AI 요약 프롬프트

AI 결과 표시

9. 맞춤법 검사

10. 감정 분석

11. 통계 기능

12. 백업 / 복원

백업

복원

13. 다크모드

14. 프로젝트 구조

15. Electron 보안 요구사항

16. 패키징

build.bat 예시

17. README 작성

18. 완료 조건

19. 개발 순서

20. 주의사항

댓글 남기기 응답 취소