AI Learn Hub

개요

본 프로젝트는 고등학생들이 “인공지능 수학”을 쉽게 학습할 수 있는 플랫폼을 개발하는 것을 목표로 하였습니다. 현재 교육 현장에서 인공지능 수학은 많은 학생들에게 어려움을 겪는 과목 중 하나입니다.

2020년 교육부는 “인공지능 수학” 과목 도입을 행정 예고했습니다. 행정 예고를 근거로 교육부는 2021년학년도 신입생부터 고등학교 보통 교과 진로 선택 과목으로 인공지능 수학을 포함했습니다.

그러나 교육현장의 실정은 녹록지 않습니다. “인공지능 수학” 과목은 선생님들의 기피 과목이 되었습니다. 2021년 매일경제에서는 “서울시교육청에 따르면 이번 학기에 '인공지능 기초' 또는 '인공지능 수학' 과목을 선택한 고등학교는 관내 250곳 중 단 1곳뿐인 것으로 나타났다”고 보도했습니다. 또한 인공지능 과목을 가르칠 인력이 여전히 부족하고 학생들도 관심이 적다는 의견도 있었습니다.

2022년 교육과정이 개정되며 인공지능 수학이 진로 선택과목에 포함되어 본격적으로 수업을 진행하게 되었고, 인공지능 수학에 대해 쉽게 배울 수 있는 해결책이 절실한 상태입니다.

이에 따라, 본 프로젝트는 학생들이 인공지능 수학 과목에 흥미를 잃지 않고 효과적으로 학습할 수 있는 방법을 제안하고자 하였습니다.

캡스톤디자인(2) 빌드 및 사용 매뉴얼

프로젝트명: AI Learn Hub
주제: 인공지능 수학 학습 지원 서비스
Team #7 선지훈, 이상명(19), 이상명(21)

빌드 메뉴얼

1. 기술 스택

2. 개발 환경 구축

2.1. 필수 설치 소프트웨어

JDK 혹은 OpenJDK 20 이상
MySQL
Node.js 18 이상
- Vite

2.1.1. 통합 개발 환경

아래 IDE 중 원하는 것을 선택해서 개발할 수 있습니다.

IntelliJ IDEA + Lombok
- Community 버전도 사용이 가능하지만 Ultimate 버전을 권장합니다.
Visual Studio Code + Extension Pack for Java

2.2. 개발 환경 설정

2.2.1. IntelliJ IDEA 환경 구성

IntelliJ IDEA에서 스프링 프로젝트로서 (프로젝트 루트)/LearnHub를 엽니다.
상단 메뉴에서 ‘File’ 을 클릭하고 ‘Settings’ 를 선택합니다.
설정 창이 열리면 왼쪽 메뉴에서 ‘Plugins’ 를 선택합니다.
검색창에 ‘Lombok’ 플러그인을 검색 후, ‘Install’ 버튼을 클릭하여 플러그인을 설치합니다.
프로젝트 내에서 build.gradle에 쓰인 의존성을 gradlew를 통해 설치합니다.
application.properties 설정을 마친 뒤 실행합니다.

2.2.2. Visual Studio Code 환경 구성

Visual Studio Code에서 (프로젝트 루트)/ 폴더를 엽니다.
좌측의 플러그인 메뉴에서 'Extension Pack for Java' 플러그인을 검색 후, 'Install' 버튼을 클릭하여 플러그인을 설치합니다.
(프로젝트 루트)/LearnHub/src/main/java/AIMentor/LearnHub/LearnHubApplication.java를 열고 플러그인이 Java 프로젝트를 불러올 때까지 기다립니다.
application.properties 설정을 마친 뒤 F5 키를 눌러서 실행합니다.

2.2.3. `application.properties` 설정

(프로젝트 루트)/LearnHub/src/main/resources 폴더에 application.properties 파일을 생성하고 다음 내용을 사용자의 환경에 맞게 입력합니다.

# 개발 서버 정보
server.port=50001
# 혹은 원하는 포트 번호 입력

# 데이터베이스 정보
spring.datasource.url=jdbc:mysql://localhost:3306/<데이터베이스 이름>
spring.datasource.username=<사용자명>
spring.datasource.password=<패스워드>
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# Hibernate 설정
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQLDialect

# 메일 전송 테스트용 계정
spring.mail.host=smtp.gmail.com
# 혹은 사용하고 있는 다른 SMTP 서버
spring.mail.port=587
# 혹은 해당 SMTP 서버의 포트 번호
spring.mail.username=<이메일 주소>
spring.mail.password=<패스워드, 혹은 지원할 경우 앱 패스워드>
spring.mail.properties.mail.smtp.auth=true
spring.mail.properties.mail.smtp.starttls.enable=true

# 메일 수신 테스트용 계정
test.email=<이메일 주소>

# asset을 가져올 경로
myCurrentUrl=http://localhost:50001

2.2.4. Vite 환경 구성

JavaScript를 관리하기 위한 Vite 프로젝트 환경을 구성합니다.

터미널에서 (프로젝트 루트)/LearnHub_Node/js 폴더를 엽니다.
npm i 명령어를 통해 종속성을 설치합니다.
npm run build 명령어를 통해 vite로 빌드를 실시합니다. 이후 JavaScript를 수정할 때마다 같은 방법으로 빌드를 실시합니다.
- 빌드 결과:

2.2.5. 실행

스프링 프로젝트에 대한 종속설 설치, JavaScript 프로젝트에 대한 종속성 설치 및 빌드가 끝났다면, 프로그램을 실행시킬 수 있습니다.

사용 매뉴얼

회원가입 및 로그인

회원가입

초기 화면에서 ‘회원가입’ 버튼을 클릭합니다.
필요한 정보를 입력하여 회원가입을 합니다.

학습 자료 접근

대시보드

로그인 후, 대시보드에서 다양한 학습 자료와 강의를 선택하여 접근할 수 있습니다.

학습

각 학습자료에 접근하면 AI 마법학교의 수업이 진행됩니다.
사용자는 마법학교 수업을 수강하며 다음과 같이 학습을 진행합니다.
- 학습 예제 <인공지능의 발전과정 - 인공지능과 관련된 수학>
  1. 학습 목표를 제시한 후 학습 할 내용을 소개합니다.
  2. 사용자는 인터랙티브 요소를 직접 조작하며 실습을 진행합니다.
  3. 이후 연계되는 수학적 개념인 "푸리에 변환"을 제시합니다.
  4. 사용자는 파형을 조작하며 “푸리에 변환”을 실습합니다.
    
    기존의 파형(검정색)은 기본 주파수 파동(파란색) 으로 분해됩니다.
  5. 실습을 진행한 후, 관련 개념을 학습하고 이론적 배경을 이해합니다.
- 학습 예제 <텍스트 자료의 표현과 처리>
  1. 학습 목표를 제시한 후 학습할 내용 "빈도수 벡터"를 소개합니다.
  2. 실습에 적용될 개념과 공식을 설명합니다.
  3. 실습과 관련된 예시를 제시합니다.
  4. 사용자가 직접 입력값을 입력하며 실습을 진행한 후, 코사인 유사도 결과를 확인합니다.
- 학습 예제 <Convolutional Neural Network>
  1. 학습 목표를 제시한 후 학습할 내용을 소개합니다.
  2. 사용자가 직접 원소 문양을 바꿔가며 마법신경망을 확인합니다.
  3. 실습을 진행한 후, 관련 개념을 학습하고 CNN의 이론적 배경을 이해합니다.
- 학습 예제 <2단원 - 1 텍스트 자료의 표현과 처리 - 2. 텍스트 자료의 처리와 시각화>
- 학습 예제 <2단원 - 2 이미지 자료의 표현과 처리 - 1. 이미지 자료의 표현>
- 학습 예제 <2단원 - 2 이미지 자료의 표현과 처리 - 2. 이미지 자료의 처리>
- 학습 예제 <3단원 - 1 자료의 분류 - 2. 이미지 자료의 분류>
- 학습 예제 <4단원 - 1 최적화와 의사 결정 - 2. 경사하강법>