Show GN: MothNote 폴더 기반 노트 시스템에 시계, 날씨, 달력 위젯을 더한 올인원 대시보드 구글 크롬 새 탭 확장 프로그램

(github.com/lunamoth)

🦋 MothNote

(긱뉴스 이미지 출력 지원하지 않는것 같아서 링크로 겁니다.)

MohtNote 는 폴더 기반 노트 시스템에 시계, 날씨, 달력 위젯을 더한 올인원 대시보드 구글 크롬 새 탭 확장 프로그램입니다.

개발 과정

MothNote 에서 구글 크롬 새 탭에서 빠르게 바로 노트를 쓸 수 있고, 시계/달력/날씨/온도 등도 빠르게 보실 수 있습니다. 15가지 기능을 갖춘 LunaTools 확장 프로그램 만든 이후로 문득 새 탭 확장 프로그램을 만들어보면 어떨까 하는 생각이 들어서 만들기 시작했습니다.

개발자도 아니고 프로그래밍도 전혀 모릅니다만, 구글 AI 스튜디오 (웹) 에서 구글 제미나이 2.5 프로로 2025년 7월 25일 만들기 시작해서 38일 정도 개발해서 2025년 9월 1일 릴리스하게 됐습니다. 외부 라이브러리 제외한 코드 줄 수는 7,385줄 입니다.

가장 많이 보게 되는 새 탭에서 바로 노트를 쓸 수 있다면 편할 것 같아서, 많은 프로젝트 관리 툴에서 보던 3단 컬럼 구조로 노트 앱을 우선 만들기 시작했습니다. Solarized Light/Dark 테마 지원을 넣었고, Tabliss 확장 프로그램에서 아이디어를 얻어서 디지털 시계, 아날로그 시계, 날씨, 온도를 넣고, 일기장 활용을 위해서 달력도 넣었습니다.

글쓰기 앱에서 많이 구현하는 포커스 모드, 젠 모드도 넣었습니다. 레이아웃 설정, 편집기 글꼴 설정, 날씨 도시 설정, 데이터 백업/복원 기능도 지원했습니다.

중간에 다중 탭 동기화 기능을 지원하다가 오버 엔지니어링이란걸 이해하고 롤백하기도 했었네요. "원자적 작업" 이라는 단어도 만들면서 지원하면서 알게 됐던 기억 나는군요.

기존에 만들었던 날씨 상세 페이지도 결합해 보면 좋을 것 같아서 넣어봤습니다. 마크다운은 지원하지 않으려고 했는데 외부 라이브러리 쓰는 법 알게 돼서 마크다운 뷰 모드를 지원했습니다. (Snakdown 쓰다가, Marked 로 변경)

폴더 기본값으로 PARA, 불렛노트에서 권장하는 폴더를 넣어봤습니다. Todo.txt 식의 활용도 가능할 것 같습니다.

심플노트를 기존에 썼었는데 데이터 마이그레이션도 가능할 것 같아서 심플노트 백업 파일 JSON 파일의 데이터 마이그레이션 기능도 넣어봤습니다. 며칠 전에는 로컬 스토리지 10MB 제한이 아닌 무제한으로 쓸 수 있는 unlimitedStorage 권한 알게 돼서 적용하기도 했습니다.

개발 과정에서 생각난 아이디어로는 태그, 다단 폴더, 위지윅 에디터, 위키식 링크 도입, 할일 체크, Readability.js 로 본문 스크랩 기능, 구글 드라이브 연동 등등이 있었네요. 향후 의미 있는 기능 위주로 업데이트해 볼 생각입니다.

버그 수정 과정을 꽤 오래 거쳐서 나름 쓸만해진 것 같아서 릴리스해 봅니다. 나름 쓸만하실 겁니다. 한번 써보시면서 기능 개선, 버그 리포트 부탁드리겠습니다. (블루스카이, 트위터, 스레드로 답글 주시면 감사드리겠습니다.)

주요 기능

(아래 기능 설명은 MothNote 의 소스 코드를 분석해서 제미나이 2.5 프로가 작성했습니다.)

올인원 대시보드: 새 탭에서 필요한 모든 정보를 한눈에 확인하세요.
- 시계: 미려한 디자인의 아날로그 시계와 가독성 높은 디지털 시계를 제공합니다.
- 상세 날씨 정보: 대시보드 위젯 클릭 한 번으로 날씨 전문가가 되어보세요.
  - 주간 예보: 전용 페이지에서 주간 최고/최저 기온 변화를 시각적인 차트와 함께 한눈에 파악할 수 있으며, 현재 날씨에 따라 비나 눈이 내리는 아름다운 배경 효과도 함께 제공됩니다.
  - 시간대별 상세 정보: 특정 날짜의 예보 카드를 클릭하면, 해당일의 시간대별 기온, 날씨 변화, 강수 확률을 상세한 리스트와 차트로 제공합니다.
  - 위치 설정: 도시 이름 검색은 물론, 위도와 경도를 직접 입력하여 전 세계 어느 곳이든 원하는 지역의 날씨를 설정할 수 있습니다.
- 노트 연동 달력: 노트가 작성된 날짜는 밑줄로 표시되며, 날짜에 마우스를 올리면 노트 제목을 미리 볼 수 있고, 클릭하면 해당 일자의 모든 노트를 즉시 모아볼 수 있습니다.
강력한 노트 시스템: 폴더 기반으로 생각을 체계적으로 정리하고, 3단 패널 UI를 통해 효율적으로 노트를 관리합니다.
- 마크다운 지원: #, *, ** 등 간단한 문법으로 서식이 있는 노트를 작성하고, 버튼 클릭 한 번으로 깔끔하게 렌더링된 미리보기로 전환할 수 있습니다.
- 생산성 높은 편집기: 편집기 하단에서 글자/단어/줄 수, 생성/수정일 등 상세 정보를 실시간으로 확인하고, Tab 키로 들여쓰기/내어쓰기를 할 수 있습니다.
- 자동 저장 및 수동 저장: 작성 내용은 타이핑을 멈추면 자동으로 저장되며, Ctrl+S (Mac: Cmd+S) 단축키로 원할 때 즉시 수동 저장할 수도 있습니다.
- 편의 기능: 제목을 비워두면 내용의 첫 줄이 자동으로 제목이 됩니다.
높은 사용자 자유도 및 편의성: 생산성을 극대화하는 다양한 기능을 지원합니다.
- 사용자 설정: 라이트/다크 테마, 편집기 글꼴/크기 등 앱의 외형을 취향에 맞게 변경하고, 모든 설정을 초기화할 수 있습니다.
- 동적 UI: 설정 메뉴뿐만 아니라, 마우스 드래그로 패널과 젠 모드의 너비를 직관적으로 조절할 수 있습니다.
- 고급 노트 관리: 노트 검색 (검색어 하이라이트 포함), 정렬, 중요 노트 고정 및 즐겨찾기 기능을 제공합니다.
- 직관적인 이동: 드래그 앤 드롭으로 폴더 순서를 바꾸거나 노트를 다른 폴더로 쉽게 이동할 수 있습니다. (노트를 휴지통/즐겨찾기 폴더로 드래그하여 바로 삭제/추가 가능)
- 집중을 위한 젠 모드(Zen Mode): 주변 요소를 모두 숨기고 오직 노트 작성에만 집중할 수 있는 환경을 제공합니다.
- 휴지통 및 복원: 삭제된 항목은 휴지통으로 이동하며, 복원 시 이름 충돌을 자동으로 감지하고 해결하는 등 안전하게 복원할 수 있습니다.
- 데이터 백업 및 복원: 모든 데이터를 JSON 파일 하나로 안전하게 백업하고 복원할 수 있습니다. Simplenote 백업 파일(JSON) 가져오기를 지원하며, 기존 데이터를 유지한 채 새 폴더로 안전하게 추가합니다.
- 키보드 단축키: 새 폴더/노트 생성, 이름 변경, 목록 탐색 등 다양한 작업을 키보드만으로 빠르게 수행할 수 있습니다.
데이터 안정성 및 신뢰성: 사용자의 소중한 데이터를 안전하게 보호합니다.
- 데이터는 웹브라우저 로컬 스토리지에 저장됩니다.
- 유실 방지 경고: 저장되지 않은 변경사항이 있는 상태에서 페이지를 닫으려고 하면 경고창을 띄워 데이터 유실을 방지합니다.
- 비상 복구 기능: 브라우저 비정상 종료 시, 저장되지 않은 마지막 변경사항을 임시 백업하고 다음 실행 시 복원 여부를 묻습니다.
- 자동 데이터 검사: 앱 실행 시 데이터 무결성을 검사하고, 문제가 발견되면 자동으로 복구하여 안정성을 유지합니다.

설치 방법

GitHub 페이지에서 릴리스 섹션에서 최신 릴리스 파일을 받고 압축을 해제합니다.
Chrome 브라우저 주소창에 chrome://extensions를 입력하여 관리 페이지로 이동 후, 개발자 모드를 활성화합니다.
압축 해제된 확장 프로그램을 로드합니다 버튼을 클릭하고, 1단계에서 압축 해제한 폴더를 선택하면 설치가 완료됩니다. 폴더를 확장 프로그램 관리 페이지로 드래그앤드롭해도 됩니다. (참고로 해당 폴더는 삭제하면 안됩니다.)