Gemma, React 및 Render를 사용해 친구를 위한 AI 노트 간소화 도구 제작기
요약
이 글은 Gemma 모델을 활용하여 학생들이 긴 강의 노트를 효과적으로 복습할 수 있도록 돕는 AI 학습 도우미 'Noteform' 제작 과정을 소개합니다. 이 애플리케이션은 노트 요약, 시험 대비 질문 생성, 구두 발표 예상 질문 등 다양한 기능을 제공하며, React와 Node.js 스택으로 구현되었습니다.
핵심 포인트
- Gemma 모델을 활용한 실용적인 AI 학습 도구 개발 사례입니다.
- 긴 노트를 요약하고 핵심 질문을 생성하는 기능이 포함됩니다.
- React(프론트엔드)와 Node.js/Express(백엔드)로 구성되어 있습니다.
Gemma를 활용하여 친구를 위한 AI 노트 간소화 도구 제작
이 글은 Hacktoberfest 주말 챌린지: 친구를 위해 만들기(Build for a Friend)에 대한 제출물입니다. 🤝
제가 만든 것 (What I Built)
제 친구는 강의 노트가 길고 복습하기 어려워 시험 준비에 자주 어려움을 겪습니다. 시험 전에 페이지 가득한 노트를 읽는 것은 시간이 오래 걸리고, 가장 중요한 개념을 찾는 것이 항상 쉬운 일은 아닙니다.
이 문제를 해결하기 위해 저는 Noteform이라는 AI 기반 학습 도우미를 만들었습니다. 이 도구는 학생들이 방대한 분량의 노트를 단 몇 초 만에 유용한 학습 자료로 변환할 수 있도록 돕습니다.
이 애플리케이션은 다음 기능을 수행할 수 있습니다:
- 긴 노트에서 간결한 요약본 생성
- 중요도가 높은 시험 대비 질문 생성
- 구두 시험(viva) 준비를 위한 예상 질문 생성
- 학생들이 더 빠르고 효과적으로 복습하도록 도움
목표는 공부하는 과정을 덜 부담스럽고 더 생산적으로 만드는 것이었습니다.
데모 (Demo)
라이브 애플리케이션 (Live Application)
https://ai-notes-simplifier.vercel.app/
백엔드 API (Backend API)
https://ai-notes-simplifier.onrender.com/
GitHub 저장소 (GitHub Repository)
https://github.com/Banshraj1/ai-notes-simplifier

제작 과정 (How I Built It)
프론트엔드 (Frontend)
- React
- Vite
- Tailwind CSS
- Axios
백엔드 (Backend)
- Node.js
- Express.js
AI 스택 (AI Stack)
- Google Gemma
- Hugging Face Inference API
배포 (Deployment)
- Vercel (프론트엔드)
- Render (백엔드)
기능 (Features)
스마트 요약 (Smart Summaries)
긴 노트를 간결하고 복습 준비가 된 요약본으로 변환합니다.
중요 질문 (Important Questions)
학생들이 어떤 부분을 우선적으로 복습해야 할지 파악하는 데 도움을 주기 위해 노트에서 시험 중심의 질문을 생성합니다.
구두 발표 대비 (Viva Preparation)
구술 시험 전에 학생들이 연습할 수 있도록 구두 발표(viva) 스타일의 질문을 만듭니다.
깔끔한 인터페이스 (Clean Interface)
학습 워크플로우를 중심으로 설계된 단순하고 방해 요소가 없는 인터페이스입니다.
오픈 혁신이 중요한 이유 (Why Does Open Innovation Matter?)
이 프로젝트는 Hugging Face를 통해 오픈 AI 모델인 Gemma로 구동됩니다.
오픈 모델을 사용함으로써 애플리케이션에 AI를 통합하는 방식에 더 많은 유연성을 얻었고, 프로젝트가 단일 독점(proprietary) AI 제공업체에 완전히 종속되는 것을 방지할 수 있었습니다.
또한 오픈 접근 방식은 다양한 모델로 실험하기 쉽게 만들고 미래에는 자체 호스팅 추론(self-hosted inference)으로 나아갈 수 있는 경로를 프로젝트에 제공합니다.
학생이 만든 프로젝트로서, 이는 아키텍처를 유연하게 유지하면서도 최신 AI를 실험하는 진입 장벽을 낮춘다는 점에서 특히 유용합니다.
피드백 (Feedback)
저는 이 애플리케이션을 친구에게 공유했고, 친구는 중요 질문 기능이 시험 전에 무엇을 복습해야 할지 빠르게 파악하는 데 특히 유용하다고 느꼈습니다.
수상 부문 (Prize Categories)
- 친구를 위한 제작 (Build for a Friend)
- 오픈 소스 AI의 최적 활용 (Best Use of Open Source AI)
- Render의 최적 활용 (Best Use of Render)
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기