AI 기반 크롬 확장 프로그램 'MothNote' 개발기: 폴더 노트 시스템과 시계/날씨 위젯의 통합

🤖 AI 추천

AI 기술을 활용하여 생산성 도구를 개발하려는 프론트엔드 개발자, 개인 프로젝트 관리 및 노트 필기에 관심 있는 개발자, 새로운 크롬 확장 프로그램 아이디어를 구체화하려는 개발자에게 유용합니다.

🔖 주요 키워드

AI 기반 크롬 확장 프로그램 'MothNote' 개발기: 폴더 노트 시스템과 시계/날씨 위젯의 통합

핵심 기술

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 도구를 통해 소프트웨어를 개발할 수 있다는 가능성을 보여줍니다.

커뮤니티 반응

개발자는 기능 개선 및 버그 리포트를 블루스카이, 트위터, 스레드를 통해 받고자 합니다.

📚 관련 자료