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


Expressive Typography”


=> text one after another in any direction
Small, D. (1989). MIT
Temporal Typography


Yin Yin Wong, MIT, Master in 1995, presentation at CHI 96
Purpose



Ⓒsblim, 2011
Rapid Serial Visual Presentation (RSVP),
scrolling, marquee
Dynamic change over time
Software and scripting language
6
Early Researches

Pliant Type


Prosodic Font



Rosenberger (1998) MIT
between spoken and written
On “Kinetic Typography”


Peter Cho (1997) MIT
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
1st 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






Ⓒsblim, 2011
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.
9
Kinedict System

Affective Messages Using Dynamic Texts


Authoring tool




J. Forlizzi, Johnny C. Lee, S. Hudson, CMU, at CHI 2003
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


Communicating in Online Chat Using … Animated Text


K. Bodine & M. Pignol, CMU, CHI 2003
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
Ⓒsblim, 2011
11
Representing Emotions

Using Kinetic Typography to Convey Emotion in TextBased 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
Ⓒsblim, 2011
12
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 ...


Giving Character to Characters  Organic Typography,


B. BROWNIE, University of Hertfordshire, 2007
Richard The, MIT, 2010
Kineticons: Using Iconographic Motion in GUI Design

C. Harrison, G. Hsieh, K. Willis, J. Forlizzi, S. Hudson, CMU, CHI 2011
Ⓒsblim, 2011
14
Kinetic Typography
요소기술 및 활용분야



연구목표
연구내용
- 키네틱 타이포그래피 모션 분석
- 인터페이스 기술 및 사용자 저작도구
- 키네틱 폰트 렌더링 엔진
- 클라이언트 프로그램
활용분야
15
연구목표

소셜미디어 환경에서 다양한 의사표현 및 감성전달

Kinetic Typography 시스템의 요구사항





디자인 전문가가 아닌 일반인이 쉽게 제작
빠른 시간에 키네틱 메시지 작성
풍부한 확장을 위해 재활용 및 수정편집이 용이
협업도 가능하고, 다양한 플랫폼에서 실행
어플리케이션의 표현력/전달력이 대폭 증가




웹 및 모바일 메세징, 홍보/광고 콘텐츠, 문서 등
UCC 동영상 및 애니메이션 자막, 타이틀
전자책 및 프리젠테이션 등
인터랙티브 미디어아트
Ⓒsblim, 2011
16

Kinetic Typography 시스템의 구성
활용 분야
다양한 입력
인터페이스
키네틱 타이틀
(애니메이션/동
영상 뷰어)
리치 콘텐츠
• 뷰어/플레이
• 키네틱 폰트
렌더링 엔진
편리한
저작도구
간편한
UI
사용자
클라이언트
렌더링엔진
Ⓒsblim, 2011
실시간 메시지/
감성 전달
사용자
클라이언트
[자막, 타이틀]
[홍보,광고]
[첨단 전자책]
[모바일/웹 환경]
[미디어아트]
[메시지 시스템]
렌더링엔진
17
연구 내용

Kinetic Typography 모션 분석




소셜미디어 환경에서 의사전달에 필요한 모션 정의
Kinetic 모션 표현을 위한 시간/공간 동기화 기법
Kinetic 모션 표현 마크업 언어 및 감성 표현 방법
인터페이스 기술에 초점


GUI 뿐 아니라 스케치, 제스처, NUI 등 다양한 인터페이스 기술 적용
실시간 스케치 기반 인터페이스



글자/단어/문장 등의 멀티 객체간 시간 동기화 및 경로상 모션 표현
모바일 인스턴트 메세징 시스템에서 메시지의 빠른 제작 및 전송
모션 제스처 및 NUI

3D 공간 등 더욱 발전된 형태의 Kinetic 모션 입력 가능
GUI
Ⓒsblim, 2011
+
스케치
인터페이스
제스쳐
인터페이스
모션
인터페이스
18

간편한 사용자 저작도구




Kinetic 폰트 렌더링 엔진



Kinetic 모션의 경로와 움직임을 설정하는 인터페이스 개발
실시간 의사소통 및 감성 전달을 위한 스케치 기반 저작 인터페이스
미디어 아트의 인터랙티브 Kinetic Typography 활용 콘텐츠의 저작
벡터 폰트 엔진에 Kinetic 모션 처리 기능 포함
다양한 플랫폼에서 작동하고, Open API로 쉽게 어플리케이션에 연동
클라이언트 프로그램



전문가용이 아닌 UCC 동영상 자막 및 타이틀 저작도구
모바일 및 웹 환경에서 Kinetic 폰트엔진을 탑재한 홍보/광고물 타이틀,
웹문서, 첨단 전자책 저작도구 및 뷰어
소셜미디어에서 감성 전달이 가능한 메세징 서비스 시스템
Ⓒsblim, 2011
19
활용분야

Kinetic Typography 기반 메세징 시스템




모바일 환경의 Kinetic Typography 기반 문서 시스템



소셜미디어 메세징 시스템에서 채팅 시스템에 적용
인스턴트 메세징(IM) 시스템에서의 감성 표현 및 전달
멀티메세징서비스(MMS)의 특화 서비스
무빙 타입 홍보물 및 광고 저작 및 배포
모바일 및 웹 환경의 Kinetic 문서/전자책 및 프리젠테이션 시스템
다양한 인터페이스의 Kinetic Typo 미디어아트 시스템

제스처 및 NUI 인터페이스를 통해 사용자 인터랙션이 가능한 Kinetic
Typography 기반 미디어아트 저작 시스템 개발 및 전시 콘텐츠 제작
Ⓒsblim, 2011
20
Descargar

mm.sookmyung.ac.kr