hc.
← 모든 프로젝트
MULTIMODAL LEARNING / 2025 SUMMER

Smart Note

강의의 말과 화면을,
같은 페이지에 모으다.

강의 영상의 장면을 PDF 교안에 맞추고, 해당 구간의 발화와 교안 내용을 함께 정리하는 학습 서비스입니다. 4인 팀의 대표로 장면 변화 탐지, 음성과 교안의 통합 요약, 웹 아키텍처를 개발했습니다.

90%이상
VIDEO ↔ PDF

강의 영상과 교안
자동 동기화 정확도

프로젝트 최종 평가

PERIOD2025.06 — 2025.08
ROLE4인 팀 대표 / 장면 정합, 통합 요약, 웹 구조
OUTPUT한국어와 영어를 지원하는 학습 웹
PythonResNet50WhisperGemma 3OllamaFlask
01 / SYNCHRONIZED LEARNING

같은 순간의 교안과 발화를,
한 번에 찾아볼 수 있도록.

실제 처리 기록의 네 구간을 선택해 보세요.
시점에 맞춰 교안 페이지와 전사문이 바뀝니다.

TRANSFORMER LECTUREPDF 2 / 33
기계 번역의 발전을 설명하는 교안 2페이지

시연 교안: 나동빈, 자연어처리 트랜스포머

MATCHED TRANSCRIPT

저장된 교안 정합 결과와 전사문 일부를 보여주는 시연입니다.

02 / SYSTEM DESIGN

영상과 음성을 각각 분석하고,
페이지를 기준으로 다시 연결했습니다.

강의 영상과 PDF 교안을 입력받아 ‘언제 어떤 페이지를 설명했는가’를 먼저 구성했습니다. 그 결과에 발화의 타임스탬프를 연결하고, 페이지별로 묶은 텍스트를 통합 요약에 사용했습니다.

화면과 교안
영상 프레임+PDF 페이지 이미지
장면 변화 감지 → ResNet50 유사도 비교

시점별 교안 페이지 매핑

음성
강의 오디오→Whisper
한국어 전사 / 영어 번역

시작 시각 + 종료 시각 + 발화 텍스트

시각을 맞추고, 페이지별로 묶기

발화 시점에 해당하는 페이지를 찾고
같은 페이지의 대본과 PDF 텍스트를 결합

GENERATE

Gemma 3:12B

교안 내용을 발화로 보완해 통합 정리

→
DELIVER

Smart Note 웹

교안 뷰어 / 타임스탬프 대본 / AI 요약

03 / DESIGN DECISIONS

강의가 순서대로 진행되지 않을 때도,
설명과 교안의 연결을 유지하기 위해.

01

모든 프레임을 같은 비용으로 비교하지 않기

강의 화면에는 교안 전환뿐 아니라 강의자의 움직임과 판서도 나타납니다. 먼저 MSE로 픽셀 변화를 확인하고, 변화가 감지된 구간에서 ResNet50 특징을 추출해 교안과 비교하도록 구성했습니다.

픽셀 변화 확인→변화 구간 특징 추출→교안 유사도 비교
02

인접 페이지부터 찾되, 건너뛰는 강의에 대응

처음에는 이전, 현재, 다음 페이지를 비교했습니다. 이후 강의자가 약 10페이지를 건너뛴 사례를 확인하면서 탐색 범위와 계산 비용을 함께 검토했습니다. 현재 페이지 주변을 먼저 비교하고 유사도가 하락하면 탐색 범위를 넓히는 방식으로 확장했습니다.

인접 페이지 탐색
−2−1현재+1+2

유사도 하락 → 더 넓은 페이지 후보 재탐색

03

전체 강의를 한 번에 요약하지 않고 페이지에 연결

교안의 짧은 문장만으로는 강의자의 설명이 빠지고, 대본만으로는 어떤 자료를 설명하는지 구분하기 어렵습니다. 페이지가 바뀌는 시점을 기준으로 발화를 나눈 뒤 해당 PDF 텍스트와 함께 입력하도록 요약 흐름을 구성했습니다.

페이지 전환 시점→발화 구간 배정→교안 + 발화 통합
04

발화에 없는 내용을 덧붙이지 않도록 요약 지시

Gemma 3:12B에 교안과 해당 발화를 함께 제공하고, 발화에 없는 내용을 추가하지 않으면서 교안의 표현과 맥락을 보완하도록 프롬프트를 구성했습니다. 결과에는 정리된 본문을 출력하도록 지정했습니다.

요약 프롬프트의 기준

“문장1에 없는 내용은 추가하지 말고 문장2 안의 표현이나 맥락을 더 구체화하거나 풍부하게 해줘.”

05

모델 실행부터 웹 표시까지 한 흐름으로 통합

Ollama의 로컬 모델을 호출하는 서버를 구성하고, 페이지별 입력과 응답을 웹에 연결했습니다. 한국어 모드에서는 전사와 한국어 요약을, 영어 모드에서는 음성 번역과 영어 요약을 사용하도록 처리 경로를 나눴습니다.

입력 언어 설정→전사 또는 번역→언어별 요약 프롬프트
04 / SERVICE EXPERIENCE

따로 보던 자료를,
하나의 학습 화면에 담았습니다.

영상과 PDF 업로드에서 교안, 대본, 요약을 확인하는 결과 화면까지 연결했습니다. 아래 화면은 프로젝트에서 구현한 웹 서비스입니다.

교안 뷰어, 대본과 AI 요약, 재생 타임라인을 연결한 결과 화면

시점에 맞는 PDF

재생 타임라인과 교안 페이지를 연결해 설명 중인 자료를 표시했습니다.

초 단위 대본

페이지별 발화에 타임스탬프를 함께 표시해 강의의 위치를 확인할 수 있게 했습니다.

교안과 발화 통합 요약

교안 내용에 강의 설명을 결합하고 선택한 언어에 맞는 정리 결과를 제공했습니다.

TEAM SERVICE / LEARNING SUPPORT

팀 기능을 함께 연결한 학습 서비스

팀은 교재 이미지 분류와 3D 변환 기능도 구현했습니다. 분류 결과를 이용해 학습에 유의미한 이미지를 선택하고, 변환 가능한 이미지에는 3D 보기 기능을 연결했습니다.

102권

이미지 수집 교재

1,544개

라벨링 데이터

88.24%

EVA-02 이미지 분류 정확도
프로젝트 최종 평가

본인 담당: 장면 변화 탐지, 교안과 음성의 통합 요약, 웹 아키텍처

확대한 Smart Note 실제 서비스 화면