친구들이 책을 읽다가 길을 잃는 것을 보고 앱을 만들게 된 계기
요약
책을 읽다가 막히는 친구들을 위해 책 내용에 대해 질문하고 답변을 얻을 수 있는 React 기반의 웹 앱을 개발했습니다. 이 앱은 MERN 스택(React, Node.js/Express.js, MongoDB)을 사용하여 구축되었으며, AI 모델과의 대화 기능을 제공합니다.
핵심 포인트
- 책 내용을 기반으로 질의응답이 가능한 학습 보조 앱 제작
- MERN 스택을 활용하여 웹 애플리케이션 구현 경험 공유
- AI 모델 연동을 통해 사용자 맞춤형 콘텐츠 소비 지원
제가 만든 것
제 친구들은 보통 책을 읽다가 막히면 저에게 질문합니다. 그래서 그들이 읽고 있는 책에 대해 질문하고 답을 얻을 수 있도록 간단한 React 앱을 만들기로 결정했습니다.
데모
제가 사용하는 AI 모델은 로컬에서 실행되기 때문에 웹 앱이 호스팅될 때는 작동하지 않겠지만, 스크린샷과 GitHub 저장소를 아래에 올리겠습니다.
스크린샷
히스토리 불러오기 (Loading History)

책 선택하기 (Selecting a book)

AI와의 대화 (Conversation with AI)

코드
GitHub logo 1noahark / RedRise
RedWiki
어떻게 만들었는지 (How I Built It)
저는 자신 있지는 않지만(아직 배우는 중입니다), MERN 스택을 사용했습니다. 프론트엔드는 React로, 서버/백엔드는 Node.js와 Express.js로 구축했고, MongoDB를 데이터베이스로 사용하여 대화 내용과 선택된 책 제목을 저장했습니다. 책 제목은 Open Library의 API를 통해 가져옵니다.
AI 모델의 경우, gemma3:1b-it-q4_K_M을 선택하고 Ollama의 API를 사용하여 구축한 Express 서버와 통합했습니다. 이 모델이 제가 원했던 만큼 완벽하지는 않았지만, 컴퓨터 저장 공간이 부족해서 사용해야 했습니다. 다른 Gemma 모델보다 크기가 작았기 때문에 이것을 골라 주변 기능을 구축했습니다.
React
|
v
...
Open Innovation이 왜 중요할까요?
저는 Ollama를 사용해서 AI 모델을 로컬에서 실행했는데, 덕분에 모델에 대한 통제력이 더 커졌습니다. 폐쇄적인 API에 의존하지 않고도 제가 다운로드한 로컬 모델로 원할 때마다 원하는 것을 할 수 있습니다. 마음에 드는 대로 실행하고 실험해 볼 수 있어요.
수상 부문
MongoDB Atlas 활용 최우수: 모든 대화 내용은 시작된 후 MongoDB 데이터베이스에 저장되므로 나중에 검색할 수 있습니다.
Gemma 활용 최우수: gemma3:1b-it-q4_K_M 모델이 책에 대한 질문에 답변하는 데 사용되었습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기