Kinetic Typography Kinetic Typography
기술 기술 과 활용 과 활용
2011.12.18
숙명여자대학교
임순범
배경
과제 제안
“ 소셜미디어 환경에서 감성전달을 위한 키네틱 타이포그래피 기술개발”
필요성
무빙 타입 개념은 시각•영상 디자인 분야에서 많이 활용
애니메이션 / 타이틀 저작 시스템은 개발되었으나 많은 시간과 노력 필요
소셜미디어 환경에서 메시지 전달 효과
다양한 사용자 의사표현이나 감성 전달에 대한 욕구 증대
연구목표 및 내용
감성표현을 위한 키네틱 모션 분석 및 다양한 입력 인터페이스 기술
다양한 플랫폼에서 실행 가능한 키네틱 폰트 렌더링 엔진
스케치기반 저작도구 , 실시간 키네틱 메세징 시스템 등 활용 기술
Kinetic Typography Kinetic Typography
관련 연구 동향 관련 연구 동향
History
Early Researches
Kinetic Typography Engine
Applications: Message, Emotions
Recent Research: Kinetic Engine 2
More than Kinetic Typography
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
Production Tools
Adobe Flash, Adobe After Effect, Apple Motion
Applications
Movie, Title, Advertisement, Web Pages, Visual Design, Visual Art
Motion Graphics: General Animation Tools
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
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
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
Johnny Lee’s Website for Kinetic Typography
http://johnnylee.net/kt/ http://johnnylee.net/kt/
Kinetic Typography Engine
Download to develop your own applications
Examples Created by the Engine
Early SamplesEarly Samples
Tech Demos: cartoon effectsTech Demos
Hop-In Effect: reusable composite effect Hop-In Effect
UIST '02: video proceedings of UIST’02UIST '02
Live out loud: showcase the offline output capabilitesLive out loud
CHI '03: Kinedit, a simple editor for non-professionals toCHI '03 easily create kinetic type.
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
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
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
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)
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
Kinetic Typography Kinetic Typography
요소기술 및 활용분야 요소기술 및 활용분야
연구목표
연구내용
- 키네틱 타이포그래피 모션 분석
- 인터페이스 기술 및 사용자 저작도구 - 키네틱 폰트 렌더링 엔진
- 클라이언트 프로그램
활용분야
연구목표
소셜미디어 환경에서 다양한 의사표현 및 감성전달
Kinetic Typography 시스템의 요구사항
디자인 전문가가 아닌 일반인이 쉽게 제작
빠른 시간에 키네틱 메시지 작성
풍부한 확장을 위해 재활용 및 수정편집이 용이
협업도 가능하고 , 다양한 플랫폼에서 실행
어플리케이션의 표현력 / 전달력이 대폭 증가
웹 및 모바일 메세징 , 홍보 / 광고 콘텐츠 , 문서 등
UCC 동영상 및 애니메이션 자막 , 타이틀
전자책 및 프리젠테이션 등
인터랙티브 미디어아트
Kinetic Typography 시스템의 구성
다양한 입력 인터페이스
편리한 저작도구
사용자 클라이언트 간편한
UI
• 뷰어 / 플레이
• 키네틱 폰트 렌더링 엔진
렌더링엔진
사용자 클라이언트 렌더링엔진 ( 애니메이션 /
동영상 뷰어 ) 키네틱 타이틀
실시간 메시지 / 감성 전달 리치 콘텐츠
[ 자막, 타이틀 ]
[ 홍보 , 광고] [ 첨단 전자책] [ 모바일 / 웹 환경]
[ 메시지 시스템] 활용 분야
[ 미디어아트]
연구 내용
Kinetic Typography 모션 분석
소셜미디어 환경에서 의사전달에 필요한 모션 정의
Kinetic 모션 표현을 위한 시간 / 공간 동기화 기법
Kinetic 모션 표현 마크업 언어 및 감성 표현 방법
인터페이스 기술에 초점
GUI 뿐 아니라 스케치 , 제스처 , NUI 등 다양한 인터페이스 기술 적용
실시간 스케치 기반 인터페이스
글자 / 단어 / 문장 등의 멀티 객체간 시간 동기화 및 경로상 모션 표현
모바일 인스턴트 메세징 시스템에서 메시지의 빠른 제작 및 전송
모션 제스처 및 NUI
3D 공간 등 더욱 발전된 형태의 Kinetic 모션 입력 가능
스케치 제스쳐 모션
간편한 사용자 저작도구
Kinetic 모션의 경로와 움직임을 설정하는 인터페이스 개발
실시간 의사소통 및 감성 전달을 위한 스케치 기반 저작 인터페이스
미디어 아트의 인터랙티브 Kinetic Typography 활용 콘텐츠의 저작
Kinetic 폰트 렌더링 엔진
벡터 폰트 엔진에 Kinetic 모션 처리 기능 포함
다양한 플랫폼에서 작동하고 , Open API 로 쉽게 어플리케이션에 연동
클라이언트 프로그램
전문가용이 아닌 UCC 동영상 자막 및 타이틀 저작도구
모바일 및 웹 환경에서 Kinetic 폰트엔진을 탑재한 홍보 / 광고물 타이틀 , 웹문서 , 첨단 전자책 저작도구 및 뷰어
소셜미디어에서 감성 전달이 가능한 메세징 서비스 시스템
활용분야
Kinetic Typography 기반 메세징 시스템
소셜미디어 메세징 시스템에서 채팅 시스템에 적용
인스턴트 메세징 (IM) 시스템에서의 감성 표현 및 전달
멀티메세징서비스 (MMS) 의 특화 서비스
모바일 환경의 Kinetic Typography 기반 문서 시스템
무빙 타입 홍보물 및 광고 저작 및 배포
모바일 및 웹 환경의 Kinetic 문서 / 전자책 및 프리젠테이션 시스템
다양한 인터페이스의 Kinetic Typo 미디어아트 시스템
제스처 및 NUI 인터페이스를 통해 사용자 인터랙션이 가능한 Kinetic Typography 기반 미디어아트 저작 시스템 개발 및 전시 콘텐츠 제작
