NotebookLM 향상기

발행: 18시간 전 (2026년 2월 5일 오전 06:06 GMT+9)

11 min read

I’m happy to help translate the article, but I’ll need the full text you’d like translated. Could you please provide the content (excluding the source line you already shared) so I can translate it into Korean while preserving the formatting and code blocks?

프로젝트 개요

NotebookLM의 혼란스러운 사이드바를 아름답게 정리된 폴더 시스템으로 바꾸는 Chrome 확장 프로그램입니다. 47개의 연구 노트가 디지털 빨래 더미처럼 보여서는 안 되니까요.

NotebookLM을 사용해 본 사람이라면 연구에 얼마나 마법 같은지 알 겁니다 – PDF를 업로드하고, URL을 붙여넣고, 질문을 하면… 잠들지 않는 연구 조수가 있는 것과 같습니다. 유일한 골칫거리는? 노트가 열 개가 넘으면 사이드바가 악몽이 된다는 점입니다.

문제 (예시)

15 research papers on Spring Framework
8 articles about microservices
12 random bookmarks you saved “for later”

모두. 하나의. 거대한. 리스트.
폴더도, 정리도 없습니다. 그저… 혼돈뿐.

Source: …

솔루션 개요

Chrome 확장 프로그램을 만들어 NotebookLM 사이드바에 완전한 폴더 관리 시스템을 직접 주입했습니다.

스마트 폴더 조직

폴더와 하위 폴더 생성 (깊이 1단계 – 간단하게)
부드러운 애니메이션을 지원하는 드래그 & 드롭 노트 이동
할당되지 않은 노트를 위한 “Inbox” 뷰
각 노트북 프로젝트마다 격리된 폴더 제공 (교차 오염 없음)

NotebookLM과 일치하는 세련된 UI

Angular + Tailwind CSS 로 구현
다크 / 라이트 / 시스템 테마 토글
네이티브 느낌의 미니멀리스트 디자인
부드러운 확장 / 축소 애니메이션

국제화

완전한 i18n 지원 (현재 영어 / 스페인어)
원클릭 언어 전환 스위처
모든 UI 텍스트 번역 가능

지능형 통합

노트를 클릭하면 native NotebookLM이 열림
오른쪽에 정렬된 네이티브 메뉴가 나타나는 삼점 메뉴 클릭 → 네이티브 메뉴 표시 (위치 일치)
네이티브 사이드바에서 노트를 드래그 → 우리 폴더에 드롭 가능
“새 노트 추가” 버튼이 native NotebookLM을 트리거

견고한 아키텍처

Chrome Extension MV3 (최신 매니페스트 버전)
스타일 격리를 위한 Content script + Shadow DOM
UI를 위한 Iframe‑ 기반 Angular 앱
iframe ↔ 페이지 통신을 위한 postMessage 브리지
기기 간 동기화를 위한 chrome.storage.sync

이것은 몇 개의 버튼만 추가하는 단순한 Content script가 아닙니다. 완전한 마이크로‑프런트엔드 아키텍처입니다:

┌─────────────────────────────────────────────────────────┐
│  NotebookLM Page                                        │
│  ┌──────────────────────────────────────────────────┐ │
│  │  Native Sidebar (hidden but functional)          │ │
│  │  • Still handles clicks & menus                  │ │
│  │  • We extract data from it                       │ │
│  └──────────────────────────────────────────────────┘ │
│                       ↓                                 │
│  ┌──────────────────────────────────────────────────┐ │
│  │  Our Injected Host (Shadow DOM)                  │ │
│  │  ┌───────────────────────────────────────────┐   │ │
│  │  │  Iframe (Angular App)                     │   │ │
│  │  │  • Folder tree                            │   │ │
│  │  │  • Drag & drop (Angular CDK)              │   │ │
│  │  │  • Theme toggle                           │   │ │
│  │  │  • Note add / folder add…                 │   │ │
│  │  │  • i18n                                   │   │ │
│  │  └───────────────────────────────────────────┘   │ │
│  └──────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘

왜 Shadow DOM 안에 iframe를 두는가?

Concern	Reason
Isolation	NotebookLM은 Angular Material을 전역 스타일과 함께 사용합니다; 우리의 iframe은 Tailwind 스타일을 온전하게 유지합니다
Security	Content script가 iframe 내부에 쉽게 접근할 수 없으며 그 반대도 마찬가지입니다
Performance	Angular 앱이 독립적으로 실행되어 메인 페이지를 오염시키지 않습니다

통신 흐름

Content script가 native DOM을 읽어 노트북 데이터를 추출
postMessage → Angular가 정리된 폴더를 표시
사용자가 노트를 폴더로 드래그 → postMessage가 다시 Content script로 전송
Content script가 chrome.storage.sync를 업데이트

기술 하이라이트

Notebook 격리를 통한 Storage V3

전역 폴더 구조 대신, 각 NotebookLM 프로젝트는 자체 격리된 상태를 갖습니다:

// StorageStateV3
{
  "byNotebook": {
    "uuid-abc-123": {
      "folders": [ /* … */ ],
      "notebookFolderByKey": { /* … */ }
    },
    "uuid-def-456": {
      "folders": [ /* … */ ],
      "notebookFolderByKey": { /* … */ }
    }
  }
}

이는 “Work” 폴더 구조가 “Personal” 연구에 섞이지 않음을 의미합니다. 깔끔한 분리.

MV3 서비스 워커 슬립 처리

Chrome MV3 서비스 워커는 비활동 상태가 30 초가 되면 슬립 모드에 들어가 chrome.runtime 호출이 중단됩니다.
‘keep‑alive’ 해킹 대신 우리는:

컨텍스트 무효화를 우아하게 감지
다음 프레임에서 조용히 재시도
console.warn 남발 대신 자체 NLE.log()에 기록

네이티브 드래그 브리지

네이티브 NotebookLM 사이드바 항목을 드래그 가능하게 만드는 것은 까다로웠습니다. 우리는:

네이티브 항목에 dragstart 훅 연결
드래그 중에 iframe 위에 보이지 않는 오버레이 생성
좌표와 함께 elementFromPoint()를 사용해 드롭 대상 계산

결과: 네이티브 노트를 폴더에 원활히 드롭할 수 있습니다.

모달에서 자동 포커스 입력

작지만 큰 차이를 만드는 UX 디테일:

Create folder → 입력란이 이미 포커스되어 바로 입력 가능
Rename folder → 텍스트가 사전 선택되어 있어 바로 입력만 하면 교체
추가 클릭이 필요 없음

전/후

Before (포커스 없음)

After (자동 포커스)

(원한다면 스크린샷을 삽입하세요)

데모

전체 비디오: (링크 또는 임베드 자리표시자)

GitHub Copilot CLI 사용 경험

이 프로젝트는 거의 전부 GitHub Copilot CLI와의 상호작용을 통해 구축되었으며, 자연어를 프로덕션 수준 코드로 변환했습니다.

아키텍처 결정

# Asked Copilot: "Best way to inject UI into an existing Angular Material page?"
# Copilot suggested: Shadow DOM + iframe for isolation
# Result: Zero style conflicts with NotebookLM's Material Design

콘텐츠 스크립트 구조

# Asked: "How to structure 8 content scripts that share state?"
# Copilot proposed: Module pattern with window.__NLE__ namespace
# Result: Clean separation, no global pollution

Drag & Drop 구현

# Asked: "Bridge native HTML5 drag with Angular CDK drop?"
# Copilot designed: Overlay system with postMessage bridging

(추가 프롬프트와 반복은 간략히 생략했습니다.)

마무리 생각

“NotebookLM Enhancer”는 잘 설계된 Chrome 확장 프로그램이 혼란스러운 연구 워크플로우를 깔끔하고 생산적인 경험으로 전환할 수 있음을 보여줍니다. 또한 최신 웹 기술(Angular, Tailwind, MV3)과 GitHub Copilot CLI의 힘을 활용합니다.

저장소를 탐색하고, 확장 프로그램을 사용해 보시고, 의견을 알려 주세요!

좌표 변환

결과: 네이티브 사이드바에서 우리 폴더로 원활한 드래그

디버깅 컨텍스트 무효화

질문: “Chrome MV3 확장 프로그램 컨텍스트 무효화 오류?”
Copilot 구현: 부드러운 감지 + 무음 재시도 로직
결과: 콘솔 스팸 없음, 원활한 복구

i18n 시스템

Asked: “ngx‑translate 부피 없이 가벼운 i18n?”
Copilot built: Lazy loading을 활용한 커스텀 TranslationService
Result: ~3 KB vs ~50 KB, 전체 인터폴레이션 지원

Highlights

Speed – 몇 주가 걸렸을 작업을 며칠 만에 끝냈습니다. 드래그 브리지와 같은 복잡한 기능도 며칠이 아니라 몇 시간 안에 구현되었습니다.
Architecture – Copilot이 제안한 패턴(예: iframe‑in‑shadow 접근법)은 제가 생각하지 못했던 것이었으며, 격리 문제를 우아하게 해결했습니다.
Edge Cases – MV3 quirks, Material Design 메뉴 위치 지정, SPA 내비게이션 감지 등 – Copilot이 이를 부드럽게 처리했습니다.
Learning – 모든 상호작용이 학습의 순간이었습니다 🙂. 이제 Chrome Extension 구조, Angular standalone 컴포넌트, Tailwind 커스터마이징을 이해하게 되었습니다.

예정 기능

Chrome Web Store Launch – 다듬기, 패키징, 게시
More Languages – 프랑스어, 독일어, 포르투갈어 (우리의 i18n 시스템으로 쉽게 지원)
Search & Filter – 폴더 내 노트를 즉시 찾기
Keyboard Shortcuts – 파워‑유저 기능 (예: Ctrl+Shift+N for new folder)

🤝 Open Source

This project will be open‑sourced. Want to contribute?

PRs welcome
Good first issues: translations, themes, documentation

Resources & Credits

Google for NotebookLM – an incredible research tool
GitHub Copilot CLI – turning ideas into code faster than ever <3
Tailwind CSS – making dark mode trivial
DEV.to – hosting this challenge and bringing the community together

GitHub 저장소

❤️와 GitHub Copilot CLI의 많은 도움으로 만들었습니다.

devchallenge
githubchallenge
cli
githubcopilot