Vanilla JavaScript로 직접 구현하는 Notion

📒 Vanilla JS로 Notion 앱 만들기

이 강의는 Vanilla JavaScript만으로 Notion 스타일의 문서 관리 앱을 처음부터 끝까지 직접 구현하는 과정입니다. React, Vue 같은 프레임워크를 쓰지 않고 순수 JS, HTML, CSS로만 완성하기 때문에, 프론트엔드의 근본 원리를 제대로 이해할 수 있습니다.

요즘 클론 코딩 강의들은 프레임워크로 UI를 흉내 내는 경우가 많습니다. 물론 도움이 되지만, 결국 React나 Vue도 내부에서는 DOM 조작과 상태 관리, 이벤트 시스템을 Vanilla JS로 처리합니다.
따라서 프레임워크를 제대로 이해하고 디버깅까지 잘하려면, 근본적인 JS 동작 원리와 브라우저 렌더링 구조를 알아야 합니다. 이 강의는 바로 그 기초를, 실무에서 쓸 수 있는 완성 프로젝트를 만들면서 자연스럽게 익히도록 설계되었습니다.

🚀 왜 Vanilla JS로 Notion인가?

우리가 매일같이 쓰는 Notion, 그 내부는 어떤 원리로 돌아갈까요?
React나 Vue 같은 프레임워크로 클론하는 강의는 많지만, 결국 그 밑바닥에는 Vanilla JS와 DOM이 있습니다. 이 강의에서는 프레임워크 없이, HTML·CSS·JavaScript만으로 실제 Notion 스타일 앱을 처음부터 끝까지 구현하면서 그 원리를 제대로 배우게 됩니다.

단순히 UI를 흉내 내는 것이 아니라, 문서 데이터 계층, UI 렌더링, 이벤트·라우팅 상호작용이라는 세 축으로 아키텍처를 설계하고, 실제로 동작하는 앱을 완성합니다.

✨ 강의 소개

앱은 크게 세 가지 층위에서 동작합니다.

첫째는 데이터 계층으로, 문서 목록, 즐겨찾기, 휴지통, 현재 활성 문서, 사이드바 상태 등을 하나의 state 객체에서 관리합니다. 이 데이터는 localStorage와 연결되어, 새로고침 후에도 동일한 상태를 그대로 복원합니다.

둘째는 렌더링 계층입니다. 사이드바 트리, 본문 영역, 휴지통 목록, 즐겨찾기 모달 등은 모두 상태를 기반으로 DOM을 다시 그려내는 구조로 되어 있습니다. 원칙은 언제나 “상태 → 화면”이며, 이 단방향 흐름 덕분에 복잡한 부분 업데이트 없이도 데이터와 화면이 일관되게 유지됩니다.

셋째는 상호작용 계층입니다. 클릭, 입력, 단축키, 라우팅, 모달 열림/닫힘, 사이드바 드래그 같은 동작이 모두 이벤트 리스너를 통해 발생합니다. 이벤트는 상태를 바꾸고, 다시 렌더링 계층이 반응하는 순환 구조 속에서 앱이 안정적으로 동작합니다.

이 강의의 핵심은 단순히 “버튼이 동작한다”가 아니라, 그 동작이 어떤 원리로 가능해지는지를 코드 단위로 이해하는 데 있습니다.

• 사이드바 폭 조절은 mousedown → mousemove → mouseup 흐름과 CSS 커스텀 속성이 어떻게 맞물리는지,

• 검색 모달은 입력 이벤트와 키보드 내비게이션, ESC·배경 클릭 처리까지 UX 전체가 어떻게 완성되는지,

• 테마 전환은 체크박스 하나와 data-theme 속성, localStorage 저장이 어떻게 결합하는지,

이 모든 과정을 눈으로 확인하며 따라가게 됩니다.

🔑 구현 기능

이 강의에서 직접 구현해보는 기능들은 모두 실무 앱의 뼈대를 이루는 요소들입니다.

📂 문서 트리 구조 & 중첩 문서 생성: 부모-자식 관계를 가진 계층적 사이드바 구현

✏ 인라인 이름 바꾸기: 더블클릭/F2로 제목을 즉시 수정

🗑 휴지통 관리: 문서 삭제 → 휴지통 이동 → 복원/영구삭제 전체 흐름 구현

⭐ 즐겨찾기 모달: 중요 문서를 빠르게 고정하고 접근

🔍 검색 모달: 입력 즉시 필터링, 키보드 화살표/엔터 탐색 지원

⚙ 설정 모달: 라이트·다크 테마 전환, localStorage 영구 저장

⌨ 키보드 단축키: Ctrl/Command+K 검색, Ctrl/Command+Shift+N 새 문서,
F2 이름 바꾸기

📏 사이드바 폭 제어: 버튼 접기/펼치기, 드래그 리사이즈, 모바일 자동 접힘

🔄 라우팅 & 상태 복원: 해시 기반 내비게이션, 새로고침 시 동일 상태 유지

💾 데이터 저장 & 불러오기: localStorage 자동 저장, Export/Import 지원

🧭 라우팅 초기화: 앱 첫 진입 시 “Welcome” 문서로 이동 또는 해시 동기화

📅 메타 정보 표시: “마지막 편집 날짜” 자동 업데이트

🛠 Confirm 모달: 영구 삭제 등 되돌릴 수 없는 작업 확인 절차

🎨 에디터 영역 연동: 제목·본문 입력 즉시 state와 동기화

🔗 상태-렌더링-이벤트 순환 구조: 앱 아키텍처의 핵심 원리 직접 체득

🔑 구현 기능

이 강의에서 직접 구현해보는 기능들은 모두 실무 앱의 뼈대를 이루는 핵심 요소들입니다.

• 📂 문서 트리 구조 & 중첩 문서 생성: 부모-자식 관계를 가진 계층적 사이드바 구현

• ✏ 인라인 이름 바꾸기: 더블클릭/F2로 제목을 즉시 수정

• 🗑 휴지통 관리: 문서 삭제 → 휴지통 이동 → 복원/영구삭제

• ⭐ 즐겨찾기 모달: 중요 문서를 빠르게 고정하고 접근

• 🔍 검색 모달: 입력 즉시 필터링, 키보드 화살표/엔터로 탐색

• ⚙ 설정 모달: 라이트·다크 테마 전환, localStorage 영구 저장

• ⌨ 키보드 단축키: Ctrl/Command+K 검색, Ctrl/Command+Shift+N 새 문서, F2 이름 바꾸기

• 📏 사이드바 폭 제어: 버튼 접기/펼치기, 드래그 리사이즈, 모바일 자동 접힘

• 🔄 라우팅 & 상태 복원: 해시 기반 내비게이션, 새로고침 시 동일 상태 유지

• 💾 데이터 저장 & 불러오기: localStorage 기반 자동 저장과 export/import

• 🧭 라우팅 초기화: 앱 첫 진입 시 “Welcome” 문서로 이동하거나 해시 동기화

• 📅 메타 정보 표시: “마지막 편집 날짜” 자동 업데이트

• 🛠 Confirm 모달: 영구 삭제 등 되돌릴 수 없는 작업에 사용자 확인 절차 추가

• 🎨 에디터 영역 연동: 제목과 본문 입력이 즉시 state와 동기화

• 🔗 상태-렌더링-이벤트 순환 구조: 전반적인 앱 아키텍처 학습

🎯 이 강의를 통해 배우는 것들

1. 중첩 문서 트리 구조를 직접 설계하고 렌더링하기

2. 라우팅 원리와 URL 해시를 통한 페이지 전환 이해

3. 상태 관리와 영속화: localStorage를 이용해 앱 데이터 저장·복원

4. 모달 패턴: 오버레이, ESC 닫기, 배경 클릭 처리, 접근성 고려

5. 검색 기능: 입력 즉시 필터링, 키보드 내비게이션 로직 구현

6. 테마 시스템: 라이트·다크 테마 전환과 전역 CSS 변수 관리

7. 단축키 로직: 키보드 이벤트와 플랫폼별 ctrl/metaKey 처리

8. 파일 API: Blob과 FileReader를 활용해 JSON 데이터 내보내기/불러오기

9. 휴지통 복원/삭제 흐름: 데이터 무결성을 지키는 안전 패턴

10. Confirm 모달: 되돌릴 수 없는 작업 전에 확인 받는 UX 패턴

11. 사이드바 드래그 리사이즈: 실무에서 자주 쓰이는 레이아웃 제어 기법

12. 상태 기반 렌더링: "상태 → 화면" 단방향 흐름으로 예측 가능한 UI 보장

13. 초기화 로직 설계: init() 함수로 앱 실행 전 과정 자동화

14. 디버깅 방법론: 상태 → 렌더링 흐름을 따라가며 버그 원인 빠르게 찾기

15. 프레임워크 이해도 상승: React/Vue의 Virtual DOM과 상태 관리가 왜 필요한지 체감

📈 이 강의로 얻을 수 있는 것

• 상태, DOM, 이벤트를 하나의 시스템으로 연결하는 감각

• 브라우저 저장소(localStorage)와 상태 동기화 원리 이해

• 사이드바/모달/검색창 같은 UI 패턴을 처음부터 끝까지 구현하는 경험

• 이벤트 버블링, stopPropagation, preventDefault를 적재적소에 활용하는 능력

• CSS 변수와 커스텀 속성을 통해 레이아웃과 테마를 제어하는 방법

• 반응형 UI와 미디어쿼리를 JS와 결합해 제어하는 기법

• 실제 Notion 앱에서 볼 수 있는 UX 흐름을 Vanilla JS로 복원하는 경험

• 프레임워크의 추상화 뒤에 있는 “원래 동작”을 눈으로 확인하는 힘

• 문제 상황에서 DOM과 이벤트 흐름을 추적하고 디버깅하는 방법

• 작은 기능 단위에서 전체 앱 아키텍처로 확장해 가는 설계 경험

• 단축키, 팝오버, 오버레이 같은 실무 인터랙션 구현 능력

• 새 문서 생성부터 삭제까지 이어지는 전체 문서 수명주기 관리 감각

• 단순 코드 따라하기가 아니라 “왜 이렇게 동작하는지”를 설명할 수 있는 힘

👩‍💻 이런 분께 추천합니다

• 단순 기능 따라하기가 아니라 앱의 구조를 깊이 이해하고 싶은 분

• 프레임워크 이전에 Vanilla JS의 기초 체력을 다지고 싶은 분

• React/Vue를 배우기 전에 “왜 그렇게 동작하는지” 원리를 알고 싶은 분

• 클론 코딩을 넘어 자신의 포트폴리오 앱을 직접 만들고 싶은 분

• 웹 브라우저의 DOM, 이벤트, 저장소 동작을 실무적으로 이해하고 싶은 분

• 사이드바, 모달, 검색창 등 실무 UI 패턴 구현법을 배우고 싶은 분

• 작은 프로젝트를 직접 완성하며 프론트엔드 자신감을 얻고 싶은 분

• 서비스 운영 환경에서 발생하는 UI 문제를 디버깅하고 설명할 수 있는 능력을 기르고 싶은 분

• Vanilla JS를 기반으로 추후 TypeScript, React, Vue로 자연스럽게 확장하고 싶은 분

• “코드가 왜 이렇게 돌아가는지” 명확히 설명할 수 있는 개발자가 되고 싶은 분

📌 수강 전 참고 사항

• HTML/CSS 기본 구조와 자바스크립트 기초 문법을 알고 계시면 원활하게 따라오실 수 있습니다.

• 특히 addEventListener, if/else, forEach, 객체 접근 방식 정도는 알고 있는 것이 좋습니다.

• Mac/Windows 환경 모두 수강 가능하며, 별도의 설치 없이 최신 크롬 브라우저만 있으면 바로 실습할 수 있습니다.

✨ 마무리

이 강의는 단순한 클론 코딩을 넘어, 프론트엔드 아키텍처의 원리와 실무 패턴을 동시에 익히도록 설계되었습니다. 49강을 모두 마치고 나면, Notion 스타일 앱이 손 안에 완성될 뿐 아니라, React/Vue 같은 프레임워크의 내부 동작을 더 깊게 이해하고 디버깅할 수 있는 눈이 생깁니다.

이제 여러분이 직접 Vanilla JS로 Notion을 만드는 경험을 통해, 프론트엔드 개발자로서 한 단계 성장할 차례입니다. 강의에서 뵙겠습니다. 🚀