해외 멘토를 AI로 도플갱어 구축 - lilys AI 벤치마킹 & 클론코딩하여 학습노트 구축해보기.

ALT

저번주에 만든 채팅 인터페이스, rerank 붙이고 속도 최적화 진행 완료!

저번 글에서 크리에이터의 대본의 vector DB와 RAG 채팅까지는 만들어뒀습니다. 질문하면 답변이 잘 나오는 것도 확인을 했습니다. 하지만 이런 도플갱어를 만들었다고 해서, 원본 맥락을 보면서 공부하고 싶을 때가 있고 도메인 지식이 부족하면 애초에 어떤 질문을 해야할 지 모릅니다.

채팅은 top-down 식 방식으로 학습하고 botton-up 방식으로 학습할 방식이 필요했습니다. 영상을 다 볼 수 없는 노릇이니 요약노트를 좀 만들어야겠다고 생각했습니다. 또한 영상을 보다가 중요한 부분이 나오면 일시정지하고, 노션에 타임스탬프와 함께 정리해야 했습니다. 나중에 복습하려면 "그 내용이 몇 분쯤이었지?" 하면서 영상을 처음부터 훑어봐야 했습니다.

ALT

lilys ai 예시

lilys.ai를 보고 생각했습니다. 오랜만에 lilys 를 들어가보니 정말 많이 발전이 되어있더군요. 우선 저는 영상 요약하는 부분만 기획을 레버리지 받고 싶었습니다. 영상 + 대본 + 요약 리포트가 한 화면에 있고, 타임스탬프 클릭하면 바로 이동하는 구조. 이거면 되겠다 싶었습니다. 그래서 이를 참고하여 직접 만들기로 했습니다.

🔧 작업 과정

1. 벤치마킹: outer HTML로 구조 파악

말로 설명하기보다 직접 보여주는 게 빠릅니다. lilys.ai에서 개발자도구를 열고, 마음에 드는 페이지의 outer HTML을 복사해서 Claude에게 던졌습니다. 보통 토큰이 길기 때문에 별도로 저장하고, 해당 파일 경로를 참고해서 개발하라고 합니다.

ALT

수염 난 남자의 사진이 포함된 한국 웹사이트의 스크린샷

(plan mode) 다음은 outer html 파일(경로) 을 참고하여 입니다. 아래 내용을 파악해서 어떤 방식의 요약들이 들어가야할지 고민해보셔야합니다. (후략)

<div class="panelGroupWrapper" data-panel-group="" data-panel-group-direction="horizontal">
  <!-- 왼쪽: 비디오 + 대본 -->
  <!-- 오른쪽: 요약 리포트 + Q&A -->
</div>

Claude에게 plan mode로 시작한 이유는 lilys 같은 경우에는 요약하는 component가 다양하게 있기 때문에 prompt 기획 부분도 중요하기 때문에 우선 HTML 구조를 분석해서 레이아웃을 파악할 필요가 있었습니다.

• 왼쪽 패널: 비디오 플레이어 + 대본 뷰어

• 오른쪽 패널: 요약 리포트 + 핵심 Q&A

• Resizable 패널로 좌우 비율 조절 가능

기존 코드 구조 분석 후 레이아웃 파일들을 수정하기 시작했습니다. 스크린샷보다 HTML이 더 정확한 정보를 전달합니다. 어떤 컴포넌트가 어떤 구조로 들어가는지 명확하게 알 수 있습니다.

2. 요약 리포트 파이프라인 설계

영상 대본을 통째로 LLM에 넣으면 토큰 제한에 걸립니다. 1시간짜리 영상 대본은 꽤 깁니다.

요약 리포트 생성 부분에서 프롬프트와 요약을 하기 위한 기술들을 기획하고 싶습니다. 대본이 길 수도 있고 짧을 수 있기 때문에 어떠한 길이가 등장함에 따라서도 요약에 대한 전략들이 다양해질 것 같습니다. (map reduce 등등..)

Claude와 함께 Map-Reduce 방식의 요약 전략을 설계했습니다:

1. Map 단계: 대본을 여러 청크로 나누어 각각 요약

2. Reduce 단계: 개별 요약들을 합쳐서 최종 요약 생성

추가로 구현한 것들:

• 목차 자동 생성: 영상의 주요 섹션을 타임스탬프와 함께 추출

• 핵심 Q&A 추출: "이 영상에서 답할 수 있는 질문"을 자동 생성

gpt-5-mini/nano 같은 빠른 모델을 활용해서 비용과 속도를 최적화했습니다.

또한 요약 결과 샘플을 여러개 주입하여 리버스프롬프트 방식으로 프롬프트 템플릿을 뽑았습니다. 아래 내용은 그 중 이해를 돕기 위한 유저 프롬프트 일부입니다.

USER_TEMPLATE = """Create a structured summary report from this transcript.

## Source Information
Title: {title}
Creator: {source_name}
Duration: {duration}
Source URL: {source_url}

## Full Transcript
{transcript_text}

## Requirements

### 1. Overview (개요)
Write 2-3 sentences capturing the main value proposition of this content.
- What will learners gain?
- What's the key message?

### 2. Key Q&A (핵심 Q&A)
Extract 5-10 most important questions that this content answers.
- Each Q&A should be self-contained and valuable
- Include timestamps when the answer is given (MM:SS format)
- Focus on actionable insights, not generic information
- For each Q&A, provide a concise main answer AND additional bullet points for details

### 3. Table of Contents (목차)
Create logical sections based on the content flow.
- Major sections at level 2 (h2): distinct topics or phases
- Subsections at level 3 (h3): sub-topics within a section
- Include timestamps (MM:SS format) and duration text (e.g., "(2분)")
- Use hierarchical IDs: "section-1", "section-1-1", "section-2", etc.

### 4. Sections (섹션별 상세 내용)
For each section in the table of contents:
- Summarize the key points in markdown format with bullet points
- Include specific examples, frameworks, or techniques mentioned
- Preserve the creator's unique perspective and terminology
- Reference timestamps [MM:SS] within the content
- Include subsections with their own content where appropriate

### 5. Follow-up Questions (꼬리 질문)
Generate 3-5 questions for deeper exploration:
- Questions that extend beyond what was covered
- Questions that connect to related topics
- Each with brief context explaining its relevance

## Important Guidelines
- Use timestamps from the transcript in MM:SS format (e.g., "02:30")
- Extract SPECIFIC information, not generic summaries
- Maintain the creator's unique voice and terminology
- Format content in Markdown for readability
- IMPORTANT: Write the ENTIRE report in Korean (한국어). If the transcript is in English, translate and summarize in Korean."""

3. 타임스탬프 딥링크 구현

처음 결과가 조금 마음에 안 이뻤어서 따로 추가 프롬프트 요청을 진행했습니다. 요약 리포트에 타임스탬프가 나오는데, 클릭하면 해당 시점으로 영상이 이동했으면 했습니다.

3가지 요청사항이 있습니다.

1. 모든 출력 한글로만 해주세요.

2. 핵심 Q&A 부분 스크롤이 있어야 전체 내용이 보이겠습니다.

3. 모든 타임스탬프 딥링크를 달아주세요. 뱃지 아이콘도 조금 더 개선해주세요.

구현 과정:

• 목차의 [00:01~00:18] 같은 타임스탬프를 클릭 가능한 버튼으로 변환

• 클릭하면 React Player의 seekTo 함수로 해당 위치로 이동

중간에 playerRef.current.seekTo is not a function 에러가 발생했습니다. React Player의 ref 연동 문제였는데, 에러 로그 보여주니까 Claude가 useImperativeHandle 수정으로 해결했습니다.

이제 요약 리포트에서 관심 있는 부분을 클릭하면 바로 해당 구간으로 이동합니다.

✅ 결과 (After)

Before vs After

결과물

Learning 탭에서 영상, 대본, 요약 리포트를 한 화면에서 볼 수 있게 됐습니다. 우측에는 요약 노트의 목차를 구성했고, 타임스탬프 클릭하면 비디오가 해당 위치로 이동합니다. 학습하는 데 이제 저작 운동까지 다해서 저에게 가져다 줍니다!

ALT

검은색 화면에 표시된 YouTube 앱의 스크린샷

💬 TIPs

1. outer HTML 활용: 스크린샷보다 HTML 구조를 던지는 게 더 정확합니다. 컴포넌트 구조, 클래스명, 데이터 속성까지 파악 가능합니다.

2. 요약 영역은 chatgpt 나오기 이전에 엄청나게 많은 전략들이 있습니다. 이를 참고 공부하여 적합한 것을 골라 적용해보시는 것이 좋습니다.

🚀 앞으로의 계획

당장은 현재 구현된 정도로 사용하면서 요약 리포트 품질을 개선할 예정입니다. 조금 더 긴 영상에 대해서 정성적인 요약 결과도 살펴볼 생각입니다.

🎯 이런 분들께 도움돼요

• lilys.ai 같은 요약 서비스를 클론코딩하여 만들어보고 싶으신 분들

ai가 85% 정도 작성한 글 입니다.