AI 기반 크롬 확장 프로그램 'MothNote' 개발기: 폴더 노트 시스템과 시계/날씨 위젯의 통합
🤖 AI 추천
AI 기술을 활용하여 생산성 도구를 개발하려는 프론트엔드 개발자, 개인 프로젝트 관리 및 노트 필기에 관심 있는 개발자, 새로운 크롬 확장 프로그램 아이디어를 구체화하려는 개발자에게 유용합니다.
🔖 주요 키워드
핵심 기술
AI(Google Gemini 2.5 Pro)를 활용하여 38일 만에 개발된 크롬 새 탭 확장 프로그램 'MothNote'는 폴더 기반 노트 시스템과 시계, 날씨, 달력 위젯을 통합한 올인원 대시보드입니다. 개발자는 새 탭에서 바로 노트 작성, 정보 확인, 일정 관리를 할 수 있습니다.
기술적 세부사항
- 개발 환경: Google AI Studio (Web) 및 Google Gemini 2.5 Pro 활용
- 주요 기능:
- 새 탭 대시보드 (시계, 날씨, 온도, 달력)
- 폴더 기반 노트 시스템 (PARA, 불렛노트 권장 구조)
- 3단 컬럼 UI 기반 노트 편집기
- Solarized Light/Dark 테마 지원
- 포커스 모드, 젠 모드
- 레이아웃 및 편집기 글꼴 설정
- 날씨 도시 설정 (이름 검색, 위도/경도 입력)
- 데이터 백업/복원 (Simplenote JSON 마이그레이션 지원)
- 마크다운 지원 (Snakdown → Marked 라이브러리 변경)
- 노트 연동 달력 (날짜별 노트 미리보기 및 즉시 보기)
- 생산성 기능: 글자/단어/줄 수 표시, 자동/수동 저장, 내용 첫 줄 제목 자동 지정, 들여쓰기/내어쓰기 (Tab 키)
- 고급 노트 관리: 검색 (하이라이트), 정렬, 고정, 즐겨찾기
- 드래그 앤 드롭 폴더/노트 이동, 휴지통/즐겨찾기 폴더 연동
- 무제한 로컬 스토리지 (
unlimitedStorage
권한 적용) - 데이터 안정성: 저장되지 않은 변경 시 경고, 비정상 종료 시 임시 백업/복원, 자동 데이터 검사/복구
- 코드 규모: 외부 라이브러리 제외 7,385 줄
- 설치 방법: chrome://extensions 에서 개발자 모드 활성화 후 확장 프로그램 로드
개발 임팩트
MothNote는 개발자가 일상적으로 사용하는 새 탭 화면을 생산성 허브로 전환하여, 노트 작성 및 정보 접근성을 크게 향상시킵니다. AI를 활용한 개발 과정을 공유하며, 비전공자도 AI 도구를 통해 소프트웨어를 개발할 수 있다는 가능성을 보여줍니다.
커뮤니티 반응
개발자는 기능 개선 및 버그 리포트를 블루스카이, 트위터, 스레드를 통해 받고자 합니다.
📚 관련 자료
Obsidian
폴더 기반 노트 시스템, 마크다운 지원, 다양한 플러그인 생태계 등 MothNote와 유사한 강력한 노트 관리 기능을 제공하는 데스크톱 애플리케이션입니다. 아이디어와 구현 방식에서 참고할 만한 부분이 많습니다.
관련도: 85%
Tabliss
MothNote가 새 탭 확장 프로그램 아이디어를 얻은 원본 프로젝트입니다. 디지털 시계, 날씨, 배경 이미지 등 사용자 정의 가능한 대시보드 기능을 제공한다는 점에서 MothNote의 UI/UX 구성에 대한 영감을 찾을 수 있습니다.
관련도: 70%
Simplenote
MothNote가 데이터 마이그레이션 기능을 구현할 때 참고했을 것으로 예상되는 단순하고 깔끔한 노트 앱입니다. JSON 백업 파일 형식을 이해하고 이를 파싱하여 데이터를 가져오는 로직을 개발하는 데 직접적인 연관이 있습니다.
관련도: 60%