_이 글은 Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass에 제출하는 내용입니다.
🌿 제가 만든 것
철학: 화면은 경험의 가장 짧은 부분이 되어야 한다
우리가 자연으로 나갈 때—아침 트레일 러닝을 하거나, 정원의 서리 날짜를 기록하거나, 새를 관찰하거나, 주말 하이킹을 할 때—영감이 찾아오는 경우가 많습니다. 하지만 기존의 노트 작성 앱들은 야외 활동을 즐기는 사람들이 원하는 것과는 반대되는 일을 합니다. 즉, 20분 동안 포맷팅, 정리, 오타 수정, 글머리 기호 파일링에 매달려 화면 속에 가두어 놓는 것입니다.
SmartNotes AI는 단 하나의 철학을 바탕으로 구축되었습니다: 화면 시간을 최소화하여 바로 다시 야외로 나갈 수 있게 하는 것.
이 도구는 하이커, 정원사, 트레일 러너, 현장 사유가하는 사람들을 위해 설계된 초고속의 미니멀리스트 노트 지능형 도구입니다:
- 날것의 생각 기록 (Raw Thought Dump): 깨끗하고 방해받지 않는 에디터에 거칠고 파편화된 현장 관찰, 트레일 메모 또는 정원 생각을 적어 넣습니다.
- 한 번의 클릭으로 즉시 종합 (One-Click Instant Synthesis): 단 하나의 키보드 단축키(Ctrl + Enter)나 버튼 클릭만으로, 백엔드가 사용자의 생각을 다음 내용들로 종합합니다:
- 요약 보고서 (Executive Summary): 야외 활동 세션의 핵심 요점.
- 구조화된 주요 포인트 (Structured Key Points): 실행 가능한 고영향 글머리 기호(예: 다음 주에 심을 것, 발견한 트레일 위험 요소, 달성한 마일스톤).
- 글쓰기 개선 (Writing Improvement): 서두른 오타가 없는 깔끔하고 다듬어진 산문.
- 복사 및 보관: 한 번의 탭으로 복사하고, 노트북을 닫은 다음, 다시 잔디를 만지러 나갑니다.
🌐 데모
💻 코드
👉 GitHub에서 전체 소스 코드 보기: tanush326k/Smart-Notes →
🛠️ 구축 방법 (How I Built It)
아키텍처 개요 (Architecture Overview)
SmartNotes AI는 높은 성능, 클라이언트 비밀 누출 방지(zero client secret leakage), 즉각적인 응답성을 위해 설계된 분리형 풀스택 아키텍처를 사용합니다:
1. 프론트엔드 (Vercel)
- React 19 & Vite 8: 서브초(sub-second) 로딩 시간과 누적 레이아웃 이동(Cumulative Layout Shift, CLS) 없음.
- Tailwind CSS v4: 다크 모드와 라이트 모드 지속성을 갖춘 깔끔하고 가벼운 스타일링.
- Framer Motion: 60FPS 스프링 마이크로 인터랙션 및 AI 응답 처리 중 애니메이션 스켈레톤 로딩 상태 구현.
- 더블 제출 방지(Double-Submission Guards): 야외 활동 중 발생할 수 있는 실수로 인한 이중 탭으로 API 요청이 과도하게 전송되는 것을 방지합니다.
2. 백엔드 (Render)
- Node.js 26 & Express: Render에서 활성 웹 서비스(Web Service)로 실행되는 네이티브 ES 모듈로 구축되었습니다.
- 비밀 노출 제로화(Zero Secret Exposure): AI API 자격 증명은 Render 백엔드 환경에 엄격하게 보관되며, 프론트엔드 번들이나 네트워크 요청을 통해 절대 노출되지 않습니다.
- 설정 가능한 CORS 필터: 허용된 오리진을 자동으로 검증하고 Vercel 프로덕션 도메인과 원활하게 연결됩니다.
- 공식
@google/genai SDK: gemini-2.5-flash를 활용하며, Gemma와 같은 오픈 웨이트(open-weight) 모델로 교체할 수 있도록 설정 가능한 모델 계층을 설계했습니다.
💡 개방 혁신이란 무엇이 중요한가요? (Why Does Open Innovation Matter?)
- 폐쇄형 생태계(Walled Gardens)로부터의 자유: 기존 노트 앱들은 사용자의 생각을 폐쇄적인 독점 형식, 구독 모델, 침해적인 원격 측정 기능 뒤에 가둡니다. 오픈 툴링과 투명한 API를 사용하여 구축함으로써, 사용자들은 자신의 단어와 작업 흐름을 소유하게 됩니다.
- 플러그인식 아키텍처(Pluggable Architecture): 백엔드 아키텍처가 모듈형 프롬프트 빌더를 통해 모델 실행을 격리하기 때문에, 개발자는 UI 변경 없이 런타임을 클라우드 추론(cloud inference)에서 로컬 오픈 가중치 모델(예: Gemma 또는 Ollama)로 교체할 수 있습니다.
- 데이터 개인 정보 보호 최우선: 현장 조사, 개인적인 성찰, 창의적인 아이디어는 폐쇄 플랫폼에 의해 학습되거나 추적되어서는 안 됩니다. 백엔드를 자체 인프라에 격리하여 유지하는 것은 사용자가 자신의 데이터에 대한 완전한 통제권을 갖도록 보장합니다.
🏅 수상 부문 (Prize Categories)
Render 활용 최우수 부문 ($200 USD)
- 프로젝트 역할: Render는 SmartNotes AI의 핵심 AI 런타임(core AI runtime) 역할을 합니다.
- Render를 선택한 이유:
- 네이티브 Node.js ES 모듈 지원: 빠르고 콜드 스타트가 가능하며, 지속적인 git 트리거 배포를 통해 Node 26 Express 서버를 원활하게 실행합니다.
- 보안 환경 계층: 민감한 AI 자격 증명(credentials)을 브라우저와 분리하여 보관함으로써 토큰 유출이 없음을 보장합니다.
- 운영 상태 모니터링 (Production Health Monitoring): 내장된
GET /api/health 진단 기능을 통해 실시간 상태 추적과 자동 가동 시간 모니터링을 할 수 있습니다.
- 원활한 크로스 클라우드 CORS: 엄격하고 구성 가능한 오리진 검증(origin validation)과 함께 Vercel의 정적 엣지 프런트엔드와 작동합니다.
🌲 야외 활용 (Taking It Outside)
이것을 시험하기 위해, 저는 SmartNotes를 들고 트레일 세션에 나갔습니다. 공원 벤치에 앉아 휴대폰으로 상세한 일지 기록(journal logs)을 타이핑하는 대신, 저는 간략한 3문장 분량의 트레일 관찰 메모를 작성했습니다:
_
핵심 사항:
- 북쪽 능선 트레일이 진흙투성이입니다. 등산화가 필요합니다.
- 능선 근처에서 붉은꼬리 독수리(red-tailed hawk) 목격 보고됨.
- 가을 단풍 절정기가 호박색 참나무 잎으로 시작되고 있습니다.
다듬어진 일지 기록: 깔끔하게 형식화되어 저장할 준비가 되었습니다.
화면 사용 시간: 20초 미만. 트레일을 즐기며 밖에 머무는 시간: 남은 하루 동안.
