NotionUIUX - Notion Custom Widgets
NotionUIUX는 노션(Notion) 파이버 스페이스 및 대시보드를 더욱 아름답고 효율적으로 꾸미기 위해 제작된 커스텀 위젯 모음입니다. 미려한 디자인, 다크/라이트 모드 완벽 지원, 그리고 로컬 스토리지를 활용한 독립적인 데이터 관리 기능을 제공합니다.
🌟 주요 기능 (Features)
- 픽셀 아트 & 다크/라이트 모드 완벽 지원: 레트로하면서도 깔끔한 픽셀 아트 스타일(Silkscreen 폰트)과 모던한 UI를 결합했습니다. 노션의 다크 모드는 물론 라이트 모드에서도 깨짐 없이 뚜렷하고 아름답게 표시됩니다. (
?mode=light 파라미터 자동 연동)
- API 연동 기반 자동화: 일부 위젯은 Notion API 및 외부 API(날씨 등)와 연동되어 실시간으로 정보를 불러오고 동기화합니다.
- 로컬 스토리지 기반 (Off-line 모드 지원): 브라우저의
localStorage를 적극 활용하여 데이터를 기기에 안전하게 보존하며, API 없이도 단독 실행이 가능합니다. (?offline=1 파라미터 지원)
- 위젯 간 실시간 연동 (BroadcastChannel): Todo 위젯에서 할 일을 추가하면 Clock 위젯에서 실시간으로 달성률이 변하는 등, 위젯들이 유기적으로 상호작용합니다.
📦 위젯 목록 (Widgets)
embed/ 폴더 내에 다양한 형태의 기능성 HTML 위젯들이 준비되어 있습니다. Notion에서 /embed (임베드) 블록을 생성하고 해당 URL을 입력하여 사용할 수 있습니다.
1. 투두 리스트 (Todo - todo.html)
- 디자인: 사이버펑크 & 네온 스타일
- 기능: 새로운 할 일 추가, 수정, 삭제, 완료 상태 체크.
- 특징: 노션 데이터베이스와 양방향 동기화(API 세팅 시)를 지원하며 오프라인 모드로도 동작합니다.
- 자동 동기화 방지 기능: 사용자가 텍스트를 입력/수정 중일 때는 자동 동기화를 일시 중지하여 입력 데이터 증발을 막습니다.
2. 메모 패드 (Memo - memo.html)
- 기능: 빠르고 간편하게 텍스트를 기록해두는 메모장.
- 특징: 엔터(또는 Ctrl+Enter)로 간편 추가, 수정창 확장, 삭제 기능. 브라우저 로컬 저장.
3. 프로젝트 관리 (Project - project.html)
- 기능: 칸반 보드 및 타임라인 형태의 프로젝트 진행 현황 시각화.
- 특징:
TODO, DOING, DONE 그리고 보류 상태인 HOLD 칼럼 추가 지원.
- View 전환: 리스트 뷰와 타임라인(간트 차트) 뷰를 토글하여 전체 일정을 한눈에 파악.
4. 일정 & 캘린더 (Schedule & Calendar - schedule.html, calendar.html, index.html)
- 기능: 픽셀 아트 테마의 월간 달력 및 일별 스케줄러.
- 특징: 날짜별 할 일(Task) 추가, 달성률 뱃지 표시(♥/♡/미완료 개수), 이전/다음 달 이동. 로컬 백업/복원 기능 포함.
5. 픽셀 시계 (Clock - clock.html)
- 기능: 현재 날짜와 시간(12H/24H 토글), 그리고 오늘의 일일 진행률 바를 보여주는 시스템 시계.
- 특징: 다른 위젯(Todo 등)과 연동되어 현재 진행 중인 Task의 진척도(게이지 바)를 실시간 반영합니다.
6. 포모도로 타이머 (Pomodoro - pomodomo.html)
- 기능: 집중(Focus) / 휴식(Break)을 관리하는 타이머.
- 특징: 8비트 사운드 효과음, 설정(시간 지정) 모달, 픽셀 진행 바 애니메이션. 라이트 모드에서는 친근한 초록색 테마로 변환됩니다.
7. 날씨 위젯 (Weather - weather.html)
- 기능: 현재 도시의 기온과 상태를 보여주는 시스템 느낌의 날씨 패널.
- 특징: OpenWeatherMap API를 사용하여 실시간 날씨 데이터 수신. 떠다니는 픽셀 구름 애니메이션 적용.
- 보안: API 키 유출을 방지하기 위해 Vercel Serverless Function(
/api/weather)을 경유하도록 설계되었습니다. .env 파일(또는 Vercel 환경 변수)에 WEATHER_API_KEY를 설정해야 정상 동작합니다.
💻 사용 방법 (How to Use)
- 이 저장소를 로컬환경 또는 호스팅 서버(Vercel, GitHub Pages 등)에 배포합니다.
- Notion을 열고 위젯을 띄울 페이지로 이동합니다.
- 명령어
/임베드 (또는 /embed)를 입력합니다.
- 호스팅된 위젯의 URL을 입력합니다.
- 예)
https://your-domain.vercel.app/embed/todo.html
- 라이트 모드 강제 적용시:
.../todo.html?mode=light
- 오프라인(로컬 스토리지) 전용 모드 사용시:
.../todo.html?offline=1
🛠 기술 스택 (Tech Stack)
- Frontend: HTML5, CSS3, Vanilla JavaScript (의존성 없는 순수 바닐라 JS)
- Design: CSS Variables (CSS 변수를 활용한 다크/라이트 테마 제어)
- State & Sync:
localStorage, BroadcastChannel API, fetch API
노션의 활용도를 극대화 해보세요! 🚀
