Kinetic Typography 기술 과 활용

2011.12.18

숙명여자대학교 임순범

1

배경

  

과제 제안

 “ 소셜미디어 환경에서 감성전달을 위한 키네틱 타이포그래피 기술개발 ”

필요성

   무빙 타입 개념은 시각 • 영상 디자인 분야에서 많이 활용 애니메이션 / 타이틀 저작 시스템은 개발되었으나 많은 시간과 노력 필요  소셜미디어 환경에서 메시지 전달 효과 다양한 사용자 의사표현이나 감성 전달에 대한 욕구 증대

연구목표 및 내용

   감성표현을 위한 키네틱 모션 분석 및 다양한 입력 인터페이스 기술 다양한 플랫폼에서 실행 가능한 키네틱 폰트 렌더링 엔진 스케치기반 저작도구 , 실시간 키네틱 메세징 시스템 등 활용 기술 Ⓒ sblim, 2011 2

Kinetic Typography 관련 연구 동향

      History Early Researches Kinetic Typography Engine Applications: Message, Emotions Recent Research: Kinetic Engine 2 More than Kinetic Typography 3

History

 Animated Text in Movie, by Saul Bass   Opening credits to North by Northwest, by Alfred Hitchcock, 1959 Opening credits to Psycho, by Alfred Hitchcock, 1960  Categories Ⓒ sblim, 2011 4

 Production Tools    Adobe Flash, Adobe After Effect, Apple Motion  Applications Movie, Title, Advertisement, Web Pages, Visual Design, Visual Art Motion Graphics: General Animation Tools Ⓒ sblim, 2011 5

Early Researches

   Rapid Serial Visual Presentation (RSVP)  Potter, M. (1984). MIT media arts and science   A Method for Studying Language Processing => text one after another in any direction Expressive Typography”  Small, D. (1989). MIT Temporal Typography   Yin Yin Wong, MIT, Master in 1995, presentation at CHI 96    Purpose Rapid Serial Visual Presentation (RSVP), scrolling, marquee Dynamic change over time Software and scripting language Ⓒ sblim, 2011 6

Early Researches

 Pliant Type  Peter Cho (1997) MIT  Prosodic Font   Rosenberger (1998) MIT between spoken and written  On “Kinetic Typography”  Suguru Ishizaki (1997)  Kinetic Typography   S. Ford, J. Forlizzi, S. Ishizaki, CMU, demo at CHI 97 Design Issues to use time-based presentation of kinetic typography Ⓒ sblim, 2011 7

Kinetic Typography Engine

  An Extensible System for Animating Expressive Text  Johnny C. Lee, J. Forlizzi, S. Hudson, CMU, at UIST’02  1 st step to provide efficient tool for kinetic typography  Small set of components for a wide range of expressions Kinetic engine architecture   Uniform change (behavior) to string objects Behavior library using time filter Ⓒ sblim, 2011 8

 Johnny Lee’s Website for Kinetic Typography    http://johnnylee.net/kt/  Kinetic Typography Engine Download to

develop your own applications

      Examples Created by the Engine Early Samples Tech Demos : cartoon effects Hop-In Effect : reusable composite effect UIST '02 : video proceedings of UIST’02 Live out loud : showcase the offline output capabilites CHI '03 : Kinedit, a simple editor for non-professionals to easily create kinetic type. Ⓒ sblim, 2011 9

Kinedict System

   Affective Messages Using Dynamic Texts  J. Forlizzi, Johnny C. Lee, S. Hudson, CMU, at CHI 2003 Authoring tool    Visual form: visual appearance of the display Transitional form: change over time Effect: applying one or more forms Kinedict engine + Kinedict Interface Ⓒ sblim, 2011 10

Application to Messaging Systems

   Kinetic Typography-Based Instant Messaging  K. Bodine & M. Pignol, CMU, CHI 2003 Communicating in Online Chat Using … Animated Text  H. Wang, H. Prendinger, T. Igarashi, Tokyo Univ. CHI 2004 A UI Framework for Kinetic Typography Messaging Appl.

 Gregor Möhler, Martin Osen, Heli Harrikari, Sony Europe, CHI 2004 11 Ⓒ sblim, 2011

Representing Emotions

   Using Kinetic Typography to Convey Emotion in Text Based Interpersonal Communication  J. Lee, S. Jun, J. Forlizzi, and S. Hudson, CMU, DIS 2006 Emotional Instant Messaging with KIM, Z. Yeo, CMU, CHI 08 Representing Emotions with Animated Text  R. Rashid, Univ. of Toronto, Master, 2008 12 Ⓒ sblim, 2011

Recent Research

  KTE2: An Engine for Kinetic Typography     Z. Yeo, S. Hudson, CMU, CHI 2009 Java  ActionScript 3 Constraint based architecture: two-way constraint Kinectic objects  Sequences  Timeline object Future Works  ‘decorator’ utility to convert XML marked text to kinetic sequence  Kinetic Typography Markup Language(KTML) Ⓒ sblim, 2011 13

More Than Kinetic Typography

   One form, many letters: Fluid and transient letterforms ...

 B. BROWNIE, University of Hertfordshire, 2007 Giving Character to Characters  Organic Typography,  Richard The, MIT, 2010 Kineticons: Using Iconographic Motion in GUI Design  C. Harrison, G. Hsieh, K. Willis, J. Forlizzi, S. Hudson, CMU, CHI 2011 14 Ⓒ sblim, 2011

Kinetic Typography 요소기술 및 활용분야

   연구목표 연구내용 키네틱 타이포그래피 모션 분석 인터페이스 기술 및 사용자 저작도구 키네틱 폰트 렌더링 엔진 클라이언트 프로그램 활용분야 15

연구목표



소셜미디어 환경에서 다양한 의사표현 및 감성전달

 Kinetic Typography

시스템의 요구사항

    디자인 전문가가 아닌 일반인이 쉽게 제작 빠른 시간에 키네틱 메시지 작성 풍부한 확장을 위해 재활용 및 수정편집이 용이 협업도 가능하고 , 다양한 플랫폼에서 실행 

어플리케이션의 표현력

/

전달력이 대폭 증가

    웹 및 모바일 메세징 , 홍보 / 광고 콘텐츠 , 문서 등 UCC 동영상 및 애니메이션 자막 , 타이틀 전자책 및 프리젠테이션 등 인터랙티브 미디어아트 Ⓒ sblim, 2011 16

 Kinetic Typography

시스템의 구성

다양한 입력 인터페이스 키네틱 타이틀 활용 분야

(애니메이션/동 영상 뷰어) [자막, 타이틀]

편리한 저작도구 간편한 UI 사용자 클라이언트 렌더링엔진 리치 콘텐츠 실시간 메시지/ 감성 전달

• •

뷰어/플레이 키네틱 폰트 렌더링 엔진

[홍보,광고] [첨단 전자책] [모바일/웹 환경] [미디어아트]

사용자 클라이언트 렌더링엔진

[메시지 시스템] 17 Ⓒ sblim, 2011

연구 내용

 Kinetic Typography

모션 분석

   소셜미디어 환경에서 의사전달에 필요한 모션 정의 Kinetic 모션 표현을 위한 시간 / 공간 동기화 기법 Kinetic 모션 표현 마크업 언어 및 감성 표현 방법 

인터페이스 기술에 초점

     GUI 뿐 아니라 스케치 , 제스처 , NUI 등 다양한 인터페이스 기술 적용 실시간 스케치 기반 인터페이스 글자 / 단어 / 문장 등의 멀티 객체간 시간 동기화 및 경로상 모션 표현 모바일 인스턴트 메세징 시스템에서 메시지의 빠른 제작 및 전송  모션 제스처 및 NUI 3D 공간 등 더욱 발전된 형태의 Kinetic 모션 입력 가능

GUI + 스케치 인터페이스 제스쳐 인터페이스 모션 인터페이스

Ⓒ sblim, 2011 18

  

간편한 사용자 저작도구

   Kinetic 모션의 경로와 움직임을 설정하는 인터페이스 개발 실시간 의사소통 및 감성 전달을 위한 스케치 기반 저작 인터페이스 미디어 아트의 인터랙티브 Kinetic Typography 활용 콘텐츠의 저작 Kinetic

폰트 렌더링 엔진

  벡터 폰트 엔진에 Kinetic 모션 처리 기능 포함 다양한 플랫폼에서 작동하고 , Open API 로 쉽게 어플리케이션에 연동

클라이언트 프로그램

   전문가용이 아닌 UCC 동영상 자막 및 타이틀 저작도구 모바일 및 웹 환경에서 Kinetic 폰트엔진을 탑재한 홍보 / 광고물 타이틀 , 웹문서 , 첨단 전자책 저작도구 및 뷰어 소셜미디어에서 감성 전달이 가능한 메세징 서비스 시스템 Ⓒ sblim, 2011 19

활용분야

 Kinetic Typography

기반 메세징 시스템

   소셜미디어 메세징 시스템에서 채팅 시스템에 적용 인스턴트 메세징 (IM) 시스템에서의 감성 표현 및 전달 멀티메세징서비스 (MMS) 의 특화 서비스 

모바일 환경의

  Kinetic Typography

기반 문서 시스템

무빙 타입 홍보물 및 광고 저작 및 배포 모바일 및 웹 환경의 Kinetic 문서 / 전자책 및 프리젠테이션 시스템 

다양한 인터페이스의

 Kinetic Typo

미디어아트 시스템

제스처 및 NUI 인터페이스를 통해 사용자 인터랙션이 가능한 Kinetic Typography 기반 미디어아트 저작 시스템 개발 및 전시 콘텐츠 제작 Ⓒ sblim, 2011 20