Document to Video

Document to Video

Document to Video

LLM(Large Language Models)의 응용 분야는 채팅을 넘어 블로그, 음악, 영상 등 창의적인 영역으로 확장되며 기업들의 LLM 기반 AI 툴 수요에 맞춘 문서를 Video Presentation으로 자동 변환하는 B2B AI D2V(Document to Video) Video Editor

Contribution:

Contribution:

Contribution:

100%

My Role:

My Role:

My Role:

Product Designer

Product Designer

Product Designer

Period:

Period:

Period:

2024 Sep - Dec

2024 Sep - Dec

2024 Sep - Dec

*기획 - 개발완료까지의 전체 프로젝트 기간

*기획 - 개발완료까지의 전체 프로젝트 기간

*기획 - 개발완료까지의 전체 프로젝트 기간

01

Background

01

Background

01

Background

AI Voice를 중심으로 한 AI Video Tool “Genny”를 만들면서 수집한 다양한 인사이트, VoC(Voice of Customer)와 타 AI Video Editor를 사용하는 타켓유저들 인터뷰를 기반으로 기획.

Insight #1

비주얼 및 상호작용 요소의 중요성

최근 직원들의 데이터 처리 가능 길이가 짧아지면서, 단순히 긴 텍스트보다는 비주얼 요소, 오디오, 텍스트가 혼합된 동영상 형태의 콘텐츠가 필수적인 역할을 함.

Insight #2

스토리보드와 스크립트 작성에 가장 많은 시간 소요

문서로 전달하던 단순한 텍스트 형태의 정보가 동영상 형태로 전달되면서 작업 시간이 증가했으며, 이 과정에서 초안 작성과 스크립트 작성이 전체 작업 시간의 40~50%를 차지함.

Insight #3

하나의 결과물을 만들기 위해 여러가지 툴을 사용함

동영상 콘텐츠 제작의 모든 단계를 하나의 툴에서 처리하지 못하고 각각 다른 툴을 사용한 뒤 하나로 합치는 번거로운 과정은 작업자의 효율성 저하뿐만 아니라 비용까지 증가시킴.

LLM을 이용해 부족한 내용은 보완하고 완성된 문서는 정리해 프레젠테이션 비디오를 만들어주는 AI Tool

LLM을 이용해 부족한 내용은 보완하고 완성된 문서는 정리해

프레젠테이션 비디오를 만들어주는 AI Tool

LLM을 이용해 부족한 내용은 보완하고

완성된 문서는 정리해 프레젠테이션 비디오를 만들어주는 AI Tool

Key #1

LLM을 활용한 스토리텔링 최적화

AI가 데이터와 슬라이드 구조를 분석하여
가장 효과적인 스토리텔링 흐름으로 설계

Key #2

사용자 맞춤형 예쁜 템플릿

주제, Use Case, Target Audience에 따라
최적화된 템플릿과 콘텐츠 구조를 만듬

Key #3

AI 기반 내레이션과 스크립트 생성

스토리텔링 흐름에 맞춘 자연스러운 스크립트를
생성하고, 이에 맞는 다양항 AI Voice 제공

Key #4

이 모든걸 하나의 툴에서 All-in-One

모든 기능을 하나의 프로덕트에 통합해

번거로운 과정을 하나의 자연스러운 프로세스로

02

Process

02

Process

02

Process

① Research

Document를 Video Presentation으로 변환하는 AI 툴이 많지 않은 상황에서, 단순히 Document to Video 기능 자체보다 사용자 경험(UX)에 초점을 맞추는 것이 중요하다고 판단했습니다.

이를 기반으로 리서치를 시작했으며, 타겟 사용자들이 비디오 툴보다는 PPT에 익숙하다는 점을 고려해 PPT 툴의 다양한 요소를 참고했습니다.

② 화면 설계

리서치를 통해 나온 UX 집중 포인트는 Outline과 Scene based editing이었습니다.

Outline

프로젝트가 생성되기 전, D2V(Document to Video)에서 슬라이드를 제작하는 과정에서 import된 문서를 기반으로 생성될 Scene의 Outline을 미리 제공하여 사용자가 의도한 결과물을 얻을 수 있도록 기획했습니다. 또한, LLM 리서치와 테스트를 통해 AI의 한계를 명확히 파악하고, 예상되는 AI 오류를 outline 단계에서 사용자가 사전에 수정할 수 있도록 하는 UX를 설계했습니다.

Scene Based Editing

PPT 툴에서 제공하는 Slide 개념을 차용하여, 영상 편집에 Scene Based Editing 방식을 도입했습니다. Scene 내부의 에셋은 Timeline을 통해 타이밍 조절 등 세부적인 편집이 가능하지만, Scene 자체는 PPT의 Slide처럼 좌측에 Scene 리스트를 배치해 관리할 수 있도록 설계했습니다. 이를 통해 PPT에 익숙한 사용자들이 Scene 개념을 직관적으로 이해하고 별도의 학습 없이도 쉽게 사용할 수 있도록 했습니다.

③ Template 작업

D2V는 LLM 및 기술 디펜던시가 큰 기능으로, 기능 기획과 화면 설계가 완료된 후 사용자들에게 제공될 템플릿 작업이 중요한 과제로 떠올랐습니다. 이를 위해 디자인이 완료된 템플릿을 LLM의 포맷과 글자수에 맞게 조정하며, 최소한의 디자인 수정으로 최종 결과물을 얻을 수 있도록 여러 번 테스트와 수정 작업을 반복했습니다.


또한 Genny의 레거시 중 하나인 Timeline과 Preview 기술의 한계를 명확히 파악한 후, 템플릿 내부의 에셋 레이어를 UX 관점에서 수정하여 기술적 한계를 보완했습니다. 이를 통해 사용자 경험을 향상시키는 동시에 기술적 제약을 극복하는 솔루션을 구현했습니다.

03

Features

03

Features

03

Features

Feature #1

Doc 2 Vid Step 1: Document Import

Document를 업로드할 수 있는 세가지 옵션과 Document 없이 바로 시작할 수 있는 Start from Scratch 옵션 제공

Feature #2

Doc 2 Vid Step 2: Analyzed Document

mport된 문서를 LLM 분석을 통해 자동으로 제목, Use Case, Target Audience, Tone을 생성하여 제공함으로써,

사용자가 필요한 정보를 쉽게 이해하고 입력 및 수정할 수 있도록 함.

Feature #3

Doc 2 Vid Step 3: Auto Outlined

프레젠테이션 형식의 비디오를 만들기 위해 Outline을 추출하여 각 Scene에 간략한 내용을 제공하고,
사용자가 필요에 따라 Outline을 목적에 맞게 수정, 추가, 삭제할 수 있도록 함.

Feature #4

Doc 2 Vid Step 4: Template Gallery

Step 2 (Analyzed Document)에서 추출되거나 사용자가 선택한 Use Case를 기반으로 Template을 추천.

Feature #5

Scene Based Editing Project

Scene Based Editing을 기반으로 하는 프로젝트
사용자가 Import한 문서의 내용과 Step 3 (Auto Outline)에서 생성된 Outline을 바탕으로 각 Scene을 구성하며,
Step 2 (Analyzed Document)에서 얻은 Target Audience와 Tone을 기반으로 Voice Script가 자동으로 작성

04

Design System

04

Design System

04

Design System

AI Video Editor Genny를 만들면서 B2B 사용자들에게서 사장 많이 받은 피드백 중 하나는 바로 Light Mode에 대한 수요였습니다. 그래서 Professional 함을 표현하기위해 Dark Mode를 가져갔던 Genny와는 다르게, B2B SaaS 툴인 ‘Keytake’에서는 Light Mode로 만들어 사용자들에게 더욱 쉽고 친한 무드로 다가가기로 결정했습니다.

Semantic Token 적용 시, 여러 이점이 있다 생각해 개발팀을 설득해 Light Mode로 디자인 하면서 기존의 컬러시스템을 기반으로 Semantic Token을 적용하기로 했습니다.

Pros #1

Dark Mode

Semantic Token을 적용한 Light Mode 작업을 진행하며, 추후 Dark Mode까지 Token을 활용해 손쉽해 대비해 프로덕트의 확장성을 확보.

Pros #2

강력한 디자인 시스템 구축

Semantic Token을 통해 색상의 목적과 의미를 명확히 하여 디자인 팀의 일관성을 높이고, 개발팀의 컬러 시스템 이해도를 높여 팀 간 소통 오류를 줄임

Pros #3

디자인 시스템 유연성

디자인 시스템의 유연성을 높여 브랜딩과 개발이 병렬로 진행될때도 색상 변경을 Semantic Token으로 중앙 관리가 가능해 컴포넌트를 일괄 수정하고 중복 작업을 줄이며 코드 유지보수를 간소화

04

Retrospective

04

Retrospective

04

Retrospective

Keytake는 Auto Subtitles, AI Generator, AI Voice 등 Genny에서 많은 AI 기능을 기획하고 디자인하면서 개발팀과의 소통 방식, AI Open Source와 API 사용 시 필수적으로 고려해야 하는 케이스 등 많은 노하우를 쌓았다. 이 경험 덕분에 빠르게 진행할 수 있었던 프로젝트였지만, 이번 D2V 프로젝트는 LLM과 템플릿이라는 새로운 시도와 부족한 LLM 테스트 변수들로 인해 어려움이 많았다.


LLM 자체는 똑똑했지만, LLM 기반의 프로덕트를 만드는 일은 정말 고려해야 할 것이 많았다. 솔직히 너무 어려웠다. 똑같이 LLM 기반의 프로젝트였지만, AI Writer를 기획할 때와는 전혀 다른 느낌이었다. 정말 사소하게는 Import URL로 페이지를 HTML로 가져올 때도 AIt Text 나 기타 요소들을 어떻게 처리해야 더 좋은 결과가 나올지 고민하며 테스트 결과를 보고 수정하고, 또 수정하며 흐름을 만들어 나가는 과정이 너무 힘들었다. 특히 템플릿이라는 정해진 포맷에 LLM 데이터를 문법에 맞게 위치시키는 부분은 정말 프로덕트 오픈 직전까지도 테스트를 반복하고 템플릿 디자인을 수정하며, 마지막까지 LLM 포맷팅 관련 문제를 해결하는 데 모든 기력을 쏟았다.


그래도 LLM 테스트 결과에 따라 새로운 흐름을 고민하고 새로운 에러 케이스를 고려하면서, AI 기능의 한계를 어떻게 사용자 친화적으로 풀어낼 수 있을지를 고민할 수 있었던 시간이라서 재밌기도 했다. (과연 그랬을까…그래도 "이야!! 또하나 배웠따아!!!" 라고 자신있게 말할 수 있는 프로젝트이지 않았을까..)

  • Let's work together

gina97813@gmail.com

  • Let's work together

gina97813@gmail.com

  • Let's talk

gina97813@gmail.com