Skip to content
hansol, park edited this page Jul 16, 2023 · 8 revisions

Project Purpose

The Queue 는 애니메이션에 특화된 프레젠테이션 편집 도구입니다.


프레젠테이션의 목적은 한정된 시간 안에 청중의 마음을 사로잡는 일 입니다. 이를 위해선 언변도 중요하지만 청중의 눈을 집중하게 만들 수 있는 시각적인 자료 역시도 중요합니다.

그래서 제가 프레젠테이션에서 주로 사용하는 기능은 '애니메이션'입니다. 도식도나 다이어그램을 애니메이션 형태로 보여주면 청중의 이해도를 높이는 데 도움이 되기 때문입니다.

하지만 기존의 프레젠테이션 도구로는 이러한 컨텐츠를 작성하는 것은 쉽지 않습니다. 다음은 제가 실제 사내 세미나에서 발표했던 프레젠테이션 자료 중 일부입니다.

Screenshot 2023-07-16 at 6 40 20 PM

위 프레젠테이션을 표현하기 위해 사용된 애니메이션은 물체의 이동과 Fade In/Out 효과가 대부분입니다. 하지만 이를 작성하기 위해 실제 작성된 PPT 파일을 열면 아래와 같은 형태로 작성되어 있습니다.

Screenshot 2023-07-16 at 6 40 20 PM

우리가 사용하는 PowerPoint / Keynote 등 대부분의 도구에서, 물체의 애니메이션은 해당 페이지 내에서 한번에 관리 / 표시되도록 제공하고 있습니다. 하지만 이는 특정 '씬(Scene, 장면)'에서의 모습은 편집 과정 중 확인하기 어렵습니다. 이 때문에 조금만 애니메이션이 복잡해지더라도 수정이 어려울 정도로 UI 가 난잡해지게 됩니다.


애니메이션 위주의 프레젠테이션을 기존보다 더 쉽고 효율적으로 작성하는 것을 목표로 합니다.


The Queue 는 이러한 애니메이션 관리 문제를 해결하기 위해 기존의 페이지가 아닌 애니메이션의 씬을 단위로 프레젠테이션을 작성하기 위한 도구입니다. 그리고 이러한 각각의 씬을 ‘큐(Queue, 대기열)’ 라는 용어를 사용해 관리합니다. 아래의 이미지는 실제 편집중인 문서의 예시입니다.

Screenshot 2023-07-16 at 6 40 20 PM

가장 중요한 목표 중 하나는 프레젠테이션 문서에서 특정 페이지를 기준으로 문서를 수정하는 것이 아니라, 위처럼 애니메이션 씬 별로 해당 위치에서 편집이 가능하도록 만드는 것 입니다. 이러한 접근 방식은 사용자가 문서의 흐름을 정확히 알고 제어할 수 있으며, 보다 복잡한 애니메이션 동작도 쉽게 정의할 수 있게 합니다.


Target Users & Critical User Journeys

프레젠테이션 도구와 영상 편집 도구의 중간을 원하는 사용자


생각보다 많은 발표 세션과 영상 컨텐츠들은 프레젠테이션 도구를 통해서 만들어집니다. 영상 편집 소프트웨어보다는 애니메이션을 다루기 쉽고, 강연자가 원하는 시점에 장면을 전환할 수 있기 때문입니다. 그래서 MS Office 는 녹화 기능도 함께 지원하고 있습니다.

하지만 기존 프레젠테이션 도구들의 애니메이션은 별도 강의 영상도 제작될 만큼 쉽게 사용할 수 있는 환경이 아닙니다. 심지어 사용자가 이를 잘 익혀 사용하더라도 곧 원하는 것을 표현하기는 까다롭다는 것을 느끼게 됩니다.

이러한 사용자들이 더 복잡한 애니메이션을 표현하기 위한 선택지는 영상 편집 도구 뿐 입니다. 하지만 이러한 도구들은 러닝 커브가 훨씬 더 높으며 컨텐츠 제작의 시간적 비용을 크게 증가시킵니다.


프레젠테이션 도구보다는 더 낫고, 영상 편집 도구보다는 더 간편하게


The Queue 이러한 수요의 사용자 층을 목표로 합니다. 복잡한 애니메이션도 수월하게 표현하며 영상 편집 도구의 도움을 최소화하여 양질의 컨텐츠를 쉽고 빠르게 제작할 수 있게 합니다.


아래는 주요 사용자 층의 예시입니다.

  • 프레젠테이션을 통한 강의 컨텐츠를 녹화 또는 발표하는 교육 종사자
  • 지식 정보를 공유하는 개인 유튜버

또한 아래와 같이 기존의 프레젠테이션 도구 사용자 층도 함께 수용합니다.

  • 학교에서 발표 자료를 준비하는 학생
  • 웹 사이트에 PPT 자료나 GIF 이미지를 첨부하고 싶은 블로거
  • 제품의 UX 플로우를 전달하려는 IT 기획자 또는 디자이너

Functional Requirements & Limitations

페이지가 아닌 장면을 기준으로 문서를 편집하며, 기존 프레젠테이션 도구의 기능을 함께 포함합니다.


프로젝트는 주요 목적을 달성하기 위해 아래의 기능이 가능해야 합니다.

  • 기존 도구들 처럼 페이지 내 애니메이션이 모두 재생된 다음 페이지가 전환됩니다.
  • 페이지가 아닌 특정 장면(Queue)을 기준으로 문서 편집이 가능합니다.
  • 특정 장면에서 요소를 추가 / 수정 / 제거할 수 있습니다.
  • 특정 장면에서 요소의 애니메이션을 추가 / 수정 / 제거할 수 있습니다.
  • 특정 장면에서 존재하는 여러 요소를 동시에 편집할 수 있습니다.
  • 발표 모드와 재생 모드를 사용할 수 있습니다.
  • 웹사이트에 Embed 되어 재생할 수 있습니다.
    • GIF 처럼 사용될 수 있도록 자동 재생 여부를 지정할 수 있어야 합니다.

기존 프레젠테이션 사용자 층도 수용하기 위해서 아래의 요구사항도 함께 구현되어야 합니다.

  • 기존 도구의 ‘페이지’ 개념 역시 동일하게 지원합니다.
  • 기존의 프레젠테이션 도구들이 지원하는 편의 기능(자석, 되돌리기 등)을 지원합니다.

다만, 프로젝트는 서버가 없는 구조를 채택하고 있어 아래의 구현 제약사항을 가집니다.

  • 백엔드 서버를 사용할 수 없음
  • 회원가입 등의 인증 서비스는 구현할 수 없음
  • 클라우드 동기화 기능을 사용할 수 없음
  • 작성된 문서는 파일로 저장 및 관리되어야 함

Deployment & Business Model

현재의 프로젝트 목표는 제품을 상업화 하지 않고 app.diagram.net 처럼 장기적으로 발전 가능한 오픈소스 프로젝트로 성장시키는 것 입니다. 수익 없이 목표를 달성하기 위해서 프로젝트는 별도의 백엔드 서버를 두지 않고 Github Pages 의 무료 호스팅을 통해 배포됩니다.


하지만 무상 서비스 유지가 어려워진 경우 구상한 최종 비즈니스 모델은 slides.com 과 같은 B2C 판매 전략입니다. 이는 기본 기능은 무료로 제공하고 아래의 유료 기능을 월 구독으로 판매하는 전략입니다.

  • 클라우드 동기화
  • 첨부 파일 저장소 제공
  • 티어별 저장소 용량
  • 실시간 협업 지원

Related Projects

  • Microsoft Powerpoint
  • Apple Keynote
  • Prezi
    • 웹 기반 애니메이션 페이지 기반 프레젠테이션 도구
  • Slides.com
    • 웹 기반 심플한 프레젠테이션 도구
  • Diagram.net (https://app.diagrams.net/)
    • 현재의 UI / UX 는 위 프로젝트를 참고합니다.