데보션앱 소개페이지 바로가기
로그인 선택

신고하기

CLOSE
신고사유 (대표 사유 1개)
상세내용 (선택)
0/200
  • 신고한 게시글은 더 이상 보이지 않습니다.
  • 이용약관과 운영정책에 따라 신고사유에 해당하는지 검토 후 조치됩니다.
  • 허위 신고인 경우, 신고자의 서비스 이용이 제한될 수 있으니 유의하시어 신중하게 신고해 주세요.
(이 회원이 작성한 모든 댓글과 커뮤니티 게시물이 보이지 않고, 알림도 오지 않습니다.)

미리보기

커뮤니티

      1,234

      badge 23.06.15

      글 등록

      카테고리를 선택해주세요.

      DEVOTEE를 활성화 시키면
      지금 작성한 커뮤니티 글에 대해 1개의 댓글을 달아줍니다.

      버튼을 누르면 글 수정 시 ChatGPT가 작성한 댓글이 수정됩니다.

      임시저장함에 저장되었습니다. 저장일시 : 2022.5.17 14:29:08

      임시저장함

      제목을 선택하시면 이어서 작성이 가능하며,
      최대 20건까지 저장합니다.
      컨텐츠 유형, 제목, 저장일시, 삭제로 이뤄진 임시저장 목록
      컨텐츠 유형 제목 저장일 삭제

      데보션 블로그 게재 요청

      CLOSE
      • *
      • *

      본인인증

      효율적인 데보션 서비스 이용 및
      고객님의 소중한 개인정보보호를 위해
      본인인증을 진행해주세요. 본인인증 미 진행 시 로그인이 제한됩니다.
      본인인증 실패

      본인인증 로그인에 실패하였습니다.
      회원이 아니시거나 본인인증 등록이
      완료되지 않은 사용자입니다.

      회원정보 연결

      빠르게 실행해 볼 수 있는 AI 시대 - 개인 맞춤형 학습 앱

      broccoli 25.06.19
      2,027 7 1
      DEVOTEE 요약
      AI 기술로 개인 맞춤형 학습 앱(GRE Mind)을 개발한 사례를 중심으로, AI가 기획부터 개발까지 혁신적인 변화를 가져오는 과정을 설명하고 있습니다. GRE Mind는 에빙하우스 망각곡선 이론을 적용하여 GRE 단어 학습과 복습 주기를 최적화해 학습 효율성을 높이며, 사용자 맞춤형 데이터 분석과 UI 설계를 통해 체계적인 자기주도 학습을 돕는 기능들을 포함합니다. 이를 통해 AI 도구가 프로토타입 개발을 단시간에 완성하고, 반복적인 작업을 최소화하여 의사결정과 혁신적인 사용자 경험 설계에 집중할 수 있는 새로운 개발 패러다임을 제시합니다.
      DEVOTEE 추천 블로그

      들어가는 말

      AI 기술의 발전으로 누구나 쉽게 도구를 활용해 복잡한 문제를 해결할 수 있는 시대가 열렸습니다. 아이디어가 있다면 AI 도구로 개발을 바로 실행해 볼 수 있습니다.

      이번 글에서는 교육 분야의 개인 맞춤형 학습 앱(가칭 GRE Mind) 개발을 예시로 들어 AI 도구 활용의 잠재력에 대해 공유하고자 합니다.

      LLM을 활용한 기확과 클로드와 파일시스템 MCP를 활용한 기획안의 구현을 통해 초기 결과물을 신속하게 얻어 낼 수 있습니다.


      아이디어 기획과 LLM의 역할

      에빙하우스 망각곡선 이론을 기반으로 한 GRE 학습 앱 개발 사례를 통해 AI 도구의 잠재력을 탐구합니다.

      GRE Mind의 기획은 LLM(Large Language Model)을 활용해 시작해 볼 수 있습니다.

      프롬프트

      "GRE 공부", "망각곡선" 과 같은 키워드를 입력해 초기 아이디어를 제시하면 이를 바탕으로 상세 기획안을 도출해 줍니다.

      핵심적인 아이디어만 있다면 복잡하지 않은 프롬프트로도 효과성이 있다는 걸 확인해 볼 수 있습니다.

      프롬프트: 
         gre 공부를 위한 앱을 만들어 줘. 에빙하우스 망각곡선 이론을 적용해서

      image.png

      LLM이 제시한 기획안 결과

      LLM은 수험생의 주요 Pain Point(단어 암기, 복습 관리, 취약점 분석)를 분석해 앱의 핵심 컨셉—스마트 망각곡선 단어장 & 문제은행—을 제안했습니다.

      생각하고 있던 아이디어 대비 크게 나쁘지 않아 그대로 진행해 볼 수 있습니다.

      기획안 결과:
      
      GRE 학습을 위한 스마트 앱 기획안: GRE Mind
      
      에빙하우스의 망각곡선 이론을 적용하여, 단순 암기가 아닌 '지속 가능한 기억'을 목표로 하는 GRE 학습 앱 **"GRE Mind"**를 제안합니다.
      
      1. 앱 컨셉 및 목표
      
      앱 이름: GRE Mind: 스마트 망각곡선 단어장 & 문제은행
      
      핵심 컨셉: 사용자의 학습 데이터를 분석하여 에빙하우스 망각곡선에 따른 최적의 복습 주기를 자동으로 알려주는 개인 맞춤형 GRE 학습 코치
      
      주요 타겟:
      
      수천 개의 GRE 단어 암기에 어려움을 겪는 학생
      
      체계적인 학습 계획과 복습 관리가 필요한 수험생
      
      자신의 취약점을 파악하고 집중적으로 보완하고 싶은 수험생
      
      2. 에빙하우스 망각곡선 적용 원리 (핵심 기능)
      
      이 앱의 가장 큰 차별점은 '스마트 복습 시스템'입니다.
      
      최초 학습: 사용자가 새로운 단어, 공식, 문제 유형을 학습합니다.
      
      망각 시작점 기록: 학습이 완료된 시점을 시스템이 기록합니다.
      
      1차 복습 (단기 기억 강화): 망각이 가장 급격하게 일어나는 학습 후 10분 ~ 1시간 사이에 첫 번째 복습 알림을 보냅니다. (간단한 퀴즈 형태)
      
      2차 복습 (장기 기억 전환): 1차 복습을 성공적으로 마치면, 1일 후에 2차 복습 알림을 보냅니다.
      
      주기적 복습 (기억 굳히기): 이후 3일 후, 7일 후, 15일 후, 30일 후와 같이 복습 주기를 점차 늘려가며 알림을 보냅니다. 이 주기는 사용자의 정답률에 따라 유동적으로 조절됩니다.
      
      정답 시: 다음 복습 주기를 예정대로 늘립니다.
      
      오답 시: 복습 주기를 더 짧게 재설정합니다. (예: 7일 후 복습 예정이었으나 틀렸다면, 3일 후로 다시 설정)
      
      학습 상태 시각화: 단어/개념마다 '학습 중', '단기 기억', '장기 기억', '마스터' 와 같이 상태를 시각적으로 보여주어 성취감을 높입니다.
      
      3. 주요 기능 상세 설명
      
      가. 대시보드 (홈 화면)
      
      오늘의 학습 (Today's Study):
      
      "새로운 단어 학습": 오늘 새로 배워야 할 단어 개수
      
      "스마트 복습": 망각곡선 알고리즘에 따라 오늘 복습해야 할 단어 및 개념 목록
      
      "취약점 극복": 자주 틀리는 문제 유형 연습
      
      학습 진행률: 전체 단어/개념 대비 나의 학습 현황을 퍼센트로 표시
      
      학습 스트릭(Streak): 연속 학습일수를 보여주어 동기 부여
      
      나. Verbal Section
      
      스마트 단어장 (Voca):
      
      학습 모드: 어원, 예문, 동의어/반의어, 사진 등 다양한 정보를 활용한 플래시카드 형태 학습
      
      퀴즈 모드: 객관식, 주관식(스펠링 입력), 뜻 맞추기 등 다양한 퀴즈 제공
      
      나만의 단어장: '헷갈려요', '완벽히 외웠어요' 등 사용자가 직접 단어 상태를 관리하고, 따로 모아볼 수 있는 기능
      
      독해 (Reading Comprehension):
      
      지문 유형별(과학, 역사, 예술 등), 문제 유형별(Main Idea, Inference, Detail 등) 문제 풀이
      
      오답 노트 자동 생성: 틀린 문제와 관련된 개념/전략을 복습 주기에 포함
      
      다. Quantitative Section
      
      개념/공식 카드:
      
      필수 수학 공식과 개념을 플래시카드 형태로 제작
      
      단어장처럼 망각곡선 알고리즘을 적용하여 주기적으로 복습 퀴즈 제공
      
      문제은행:
      
      난이도별, 유형별(대수, 기하, 데이터 분석 등) 문제 풀이
      
      자주 틀리는 유형을 '취약점'으로 자동 분석하여 대시보드에서 집중 학습 추천
      
      라. Analytical Writing (AWA)
      
      주제 라이브러리: Issue, Argument 최신 기출 및 예상 주제 제공
      
      브레인스토밍 템플릿: 논리적인 글쓰기를 위한 구조(서론-본론-결론) 템플릿 제공
      
      타이머 및 쓰기 연습: 실제 시험 환경처럼 시간제한을 두고 쓰는 연습 기능
      
      (고급 기능) AI 첨삭: AI를 활용하여 문법 오류, 논리 구조에 대한 기본적인 피드백 제공
      
      마. 통계 및 리포트
      
      망각곡선 시각화: 특정 단어가 내 머릿속에서 어떻게 기억되고 있는지 그래프로 확인
      
      정답률 분석: 섹션별, 문제 유형별 정답률을 상세히 분석하여 나의 강점과 약점을 명확히 파악
      
      예상 점수: 학습 데이터를 기반으로 예상 GRE 점수 범위를 예측하여 학습 목표 설정에 도움
      
      4. 수익 모델 (Monetization)
      
      Freemium 모델:
      
      무료 버전:
      
      필수 단어 500개 제공
      
      망각곡선 알림 기능 (하루 10개 제한)
      
      기본적인 문제 풀이 및 통계 기능
      
      유료 구독 (GRE Mind PRO):
      
      모든 단어(3000개 이상) 및 문제은행 무제한 이용
      
      망각곡선 알림 무제한
      
      상세 분석 리포트 및 예상 점수 기능
      
      AWA AI 첨삭 기능 (월 3회 등)
      
      광고 제거
      
      5. 기대 효과
      
      학습 효율 극대화: 맹목적인 암기 시간을 줄이고, '잊어버릴 때쯤' 다시 상기시켜주는 방식으로 장기 기억을 효과적으로 형성합니다.
      
      자기주도 학습 습관 형성: 매일 '오늘의 학습'만 따라가면 자연스럽게 체계적인 공부가 가능해집니다.
      
      약점 집중 공략: 데이터 기반으로 자신의 취약점을 정확히 파악하고 보완하여 점수를 전략적으로 상승시킬 수 있습니다.
      
      GRE Mind는 단순한 학습 도구가 아니라, 사용자의 두뇌 활동에 맞춰 함께 움직이는 **'개인 맞춤형 학습 파트너'**가 될 것입니다.

      이 과정에서 LLM은 시장 조사, 사용자 니즈 분석, 기능 제안을 단 몇 분 만에 수행하며 기획 속도를 획기적으로 단축했습니다.


      프롬프트 기반 개발의 힘

      GRE Mind의 코딩은 프롬프트 기반으로 진행하였습니다.

      프롬프트: 
         아래 기획안에 따른 앱을 만들어줘 : html, js, css, sqlite, json, 200라인이 넘지 안도록 모듈 분리, 파일 시스템에 프로젝트 구조 만들어서 파일 생성 
         ----
         GRE 학습을 위한 스마트 앱 기획안: GRE Mind
         ...
         중간 생략
         ...
         

      코딩 구성에 직접적으로 영향을 주는 프롬프트는 첫 줄에 표현해서 전체 구성에 대한 요구사항을 전달할 수 있습니다.

      • 핵심사항 : 코딩 언어 구성(html, js, css), 데이터 처리(sqlite, json), 모듈화(200라인 넘지 않도록 정의: 일반적인 LLM은 200라인을 넘으면 넘어서는 코드를 하지 못하고 반복적인 재 작성을 하는 빈번한 실수를 사전에 차단), 파일 시스템 MCP 활용, 로컬에 프로젝트 구조를 직접 만들어서 파일을 생성해 가면서 개발을 진행하도록 지시

      그 다음 줄에 기획안을 포함하여 기능별 요구사항(대시보드, 단어장, 퀴즈, 통계)을 명확히 제공해서 시행착오를 줄이고, 즉시 구현에 집중할 수 있도록 했습니다.

      이는 전통적인 개발 방식 대비 시간을 대폭 단축시켜 줄 뿐만 아니라 자동화 수준을 높일 수 있었습니다.


      MCP 파일 시스템 도구의 강력함

      AI 도구(Claude)는 MCP(Model Context Protocol) 파일 시스템을 활용해 프로젝트 구조를 자동 생성했습니다.

      GRE Mind의 경우, index.html, css/main.css, js/dashboard.js 등 필수 파일을 체계적으로 구성하고, LLM이 각 파일의 초기 코드를 생성했습니다.

      이를 통해 로컬 환경에서 프로젝트 초기 설정이 단 몇 분 만에 완료되었으며, 개발자 입장에서는 즉시 코딩 결과를 검토하고, 의사결정을 진행하는 단계로 바로 돌입할 수 있었습니다.

      gre-mind/
      ├── index.html              # 메인 HTML 파일
      ├── css/
      │   ├── main.css            # 기본 스타일
      │   ├── dashboard.css       # 대시보드 스타일
      │   └── study.css          # 학습/퀴즈 스타일
      ├── js/
      │   ├── app.js             # 메인 애플리케이션
      │   ├── database.js        # IndexedDB 관리
      │   ├── forgetting-curve.js # 망각곡선 알고리즘
      │   ├── quiz.js            # 퀴즈 기능
      │   ├── vocabulary.js      # 단어 관리
      │   ├── dashboard.js       # 대시보드 관리
      │   └── navigation.js      # 페이지 네비게이션
      ├── data/
      │   └── sample-data.json   # 샘플 데이터
      └── README.md


      웹앱 완성과 테스트

      GRE Mindindex.html은 대시보드, 단어 학습, 복습 퀴즈, 통계 페이지를 포함한 완전한 웹앱 구조를 제공합니다.

      AI는 HTML과 JavaScript 코드를 생성하며, 망각곡선 알고리즘을 적용한 복습 시스템과 UI를 구현했습니다.

      테스트 단계에서는 AI가 생성한 더미 데이터를 활용해 단어 퀴즈, 학습 진행률 표시, 통계 시각화를 검증했습니다.

      예를 들어, 대시보드의 "오늘의 학습" 카드는 새로운 단어, 스마트 복습, 취약점 극복을 표시하며, 사용자가 클릭 시 즉시 학습 또는 퀴즈로 전환됩니다.


      몇 분 만에 동작하는 웹앱

      GRE Mind는 AI 도구를 활용해 단 몇 분 만에 동작 가능한 프로토타입으로 완성되었습니다.

      index.html은 네비게이션, 대시보드, 단어 학습, 퀴즈, 통계 페이지를 포함하며, 각 페이지 간 전환은 js/navigation.js로 부드럽게 처리됩니다.

      개발자는 입장에서는 AI가 생성한 코드를 검토하고, UI 스타일(css/main.css)이나 학습 데이터와 같은 세부 사항만 보정하면 완성도 높은 앱을 얻을 수 있었습니다.

      image.png


      데이터 생성과 통합

      LLM은 GRE Mind에 필요한 GRE 단어(초기: 5개 단어), 예문, 퀴즈 데이터를 생성해 앱에 통합했습니다.

      예를 들어, 단어 "abate"에 대해 뜻, 어원, 예문, 동의어/반의어를 생성하고, 이를 플래시카드와 퀴즈 형식으로 제공했습니다.

      또한, 사용자의 학습 데이터를 기반으로 망각곡선에 따라 복습 주기를 계산하는 JavaScript 로직(js/forgetting-curve.js)도 AI가 제안해 빠르게 구현했습니다.

      초기 데이터:
      "greWords": [
          {
            "id": "1",
            "word": "abate",
            "meaning": "줄어들다, 완화되다",
            "pronunciation": "/əˈbeɪt/",
            "partOfSpeech": "verb",
            "etymology": "Latin: ab- (away) + battuere (to beat)",
            "synonyms": ["decrease", "diminish", "reduce"],
            "antonyms": ["increase", "intensify", "amplify"],
            "example": "The storm began to abate after midnight."
          },
          {
            "id": "2",
            "word": "aberrant",
            "meaning": "일탈한, 정상에서 벗어난",
            "pronunciation": "/æˈberənt/",
            "partOfSpeech": "adjective",
            "etymology": "Latin: aberrare (to wander away)",
            "synonyms": ["deviant", "abnormal", "irregular"],
            "antonyms": ["normal", "typical", "conventional"],
            "example": "His aberrant behavior worried his friends."
          },
          {
            "id": "3",
            "word": "abeyance",
            "meaning": "정지, 중단",
            "pronunciation": "/əˈbeɪəns/",
            "partOfSpeech": "noun",
            "etymology": "Old French: abeance (expectation)",
            "synonyms": ["suspension", "dormancy", "postponement"],
            "antonyms": ["continuation", "activity", "operation"],
            "example": "The project was held in abeyance pending further funding."
          },
          {
            "id": "4",
            "word": "abscond",
            "meaning": "도망치다, 잠적하다",
            "pronunciation": "/æbˈskɑnd/",
            "partOfSpeech": "verb",
            "etymology": "Latin: abscondere (to hide away)",
            "synonyms": ["flee", "escape", "depart"],
            "antonyms": ["remain", "stay", "appear"],
            "example": "The cashier absconded with the company's money."
          },
          {
            "id": "5",
            "word": "abstemious",
            "meaning": "절제하는, 금욕적인",
            "pronunciation": "/æbˈstimiəs/",
            "partOfSpeech": "adjective",
            "etymology": "Latin: abs- (away) + temetum (intoxicating drink)",
            "synonyms": ["temperate", "moderate", "frugal"],
            "antonyms": ["indulgent", "excessive", "gluttonous"],
            "example": "He lived an abstemious lifestyle, avoiding all luxuries."
          }
      ]

      추가로 100개의 데이터를 더 생성해 달라고 다음과 같이 손쉽게 LLM에게 요구할 수 있습니다.

      생성된 데이터를 코드에 통합하면 100개의 데이터를 기반으로 학습할 수 있는 앱으로 확장을 할 수 있게 되었습니다.

      프롬프트: 
      
      아래의 형식으로 gre학습 데이터를 100개를 생성 
      {
        "greWords": [
          {
            "id": "1",
            "word": "abate",
            "meaning": "줄어들다, 완화되다",
            "pronunciation": "/əˈbeɪt/",
            "partOfSpeech": "verb",
            "etymology": "Latin: ab- (away) + battuere (to beat)",
            "synonyms": ["decrease", "diminish", "reduce"],
            "antonyms": ["increase", "intensify", "amplify"],
            "example": "The storm began to abate after midnight."
          },
          {
            "id": "2",
            "word": "aberrant",
            "meaning": "일탈한, 정상에서 벗어난",
            "pronunciation": "/æˈberənt/",
            "partOfSpeech": "adjective",
            "etymology": "Latin: aberrare (to wander away)",
            "synonyms": ["deviant", "abnormal", "irregular"],
            "antonyms": ["normal", "typical", "conventional"],
            "example": "His aberrant behavior worried his friends."
          }
         ]
      }


      지속적인 개선과 혁신

      앱 완성 후, 사용자의 피드백을 반영해 추가 기능을 구현할 수 있습니다. 예를 들어, "나만의 단어장" 기능을 추가해 사용자가 "학습중" 또는 "마스터"로 단어를 분류할 수 있도록 할 수 있습니다.

      지금 부터는 다양한 새로운 아이디어와 함께 요구사항을 분석하고, 의사결정에 집중해서 지속적인 개선과 혁신을 통해 완성도를 높여 갈 수 있습니다.


      결론: AI 시대의 새로운 개발 패러다임

      GRE Mind 개발 사례는 AI 도구가 아이디어 기획, 코드 생성, 데이터 통합, 테스트까지 전 과정을 가속화할 수 있음을 보여줍니다.

      LLM과 MCP 파일 시스템을 활용하면 몇 분만에 동작하는 앱을 만들고, 사용자의 요구에 맞춰 지속적으로 개선할 수 있습니다.

      AI 시대의 개발 자체는 더 이상 전문가만의 영역이 아닙니다. 누구나 아이디어를 빠르게 현실로 구현할 수 있는 이 패러다임은 다양한 분야에서 혁신을 가속화할 것입니다.


      앞으로 개발자 또는 엔지니어의 역할은 무엇일까요?

      어쩔 수 없이 진행해야 했던 프로젝트 기본 구조를 생성하고, 다른 프로젝트이지만 동일한 모듈을 작성해야 했던 반복적인 구현 작업에서 벗어나거나 해방 시켜줘서 의사결정이 필요한 영역에서 역할을 더 할 수 있을 것으로 예상해 볼 수 있습니다.

      이번 글에서 소개시켜 드린 파일시스템MCP 활용의 강력함은 높은 코드 생산성을 체감할 수 있게 해 주었습니다.

      최근 우연히 본 보고서에서 산업혁명 때도 늘어나는 일자리가 더 많았다는 것과 최근 통계에서도 AI 노출 비중이 높은 분야에서도 일자리 증가율은 30% 이상으로 나타나고 있다는 사실을 확인할 수 있었습니다.

      AI 활용을 통해서 새로운 일자리와 함께 새로운 비즈니스 모델을 만들어 내는 기회를 누릴 수 있는 희망적인 기대해 봅니다.



      부록1. 파일시스템 MCP 예시

      # claude_desktop_config.json
      {
       "mcpServers": {
         "filesystem": {
           "command": "npx",
           "args": [
             "-y",
             "@modelcontextprotocol/server-filesystem",
             "~/ws/claude-project"
           ]
         }
       } 
      } 


      부록2. 소스코드와 앱

      ㅇ 소스코드: https://github.com/jeonck/gremind

      ㅇ 앱: https://jeonck.github.io/gremind/

      댓글 0

      DEVOTEE를 활성화 시키면
      지금 작성한 댓글에 AI가 댓글을 달아줍니다.

      broccoli 님의 최신 블로그

      더보기

      DEVOTEE 추천 블로그

      동영상 기고하기