Kinetic Typography 기술 과 활용 숙명여자대학교 임순범 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

Ⓒ sblim, 2011 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 4

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

Ⓒ sblim, 2011 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 6

Ⓒ sblim, 2011 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 7

Ⓒ sblim, 2011 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 8

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

Ⓒ sblim, 2011 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 10

Ⓒ sblim, 2011 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

Ⓒ 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,

Ⓒ 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) 13

Ⓒ sblim, 2011 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

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

Ⓒ sblim, 2011 연구목표 소셜미디어 환경에서 다양한 의사표현 및 감성전달 Kinetic Typography 시스템의 요구사항  디자인 전문가가 아닌 일반인이 쉽게 제작  빠른 시간에 키네틱 메시지 작성  풍부한 확장을 위해 재활용 및 수정편집이 용이  협업도 가능하고, 다양한 플랫폼에서 실행 어플리케이션의 표현력 / 전달력이 대폭 증가  웹 및 모바일 메세징, 홍보 / 광고 콘텐츠, 문서 등  UCC 동영상 및 애니메이션 자막, 타이틀  전자책 및 프리젠테이션 등  인터랙티브 미디어아트 16

Ⓒ sblim, 2011 Kinetic Typography 시스템의 구성 17 다양한 입력 인터페이스 편리한 저작도구 사용자 클라이언트 간편한 UI 뷰어 / 플레이 키네틱 폰트 렌더링 엔진 사용자 클라이언트 렌더링엔진 ( 애니메이션 / 동 영상 뷰어 ) 키네틱 타이틀 실시간 메시지 / 감 성 전달 리치 콘텐츠 [ 자막, 타이틀 ] [ 홍보, 광고 ] [ 첨단 전자책 ] [ 모바일 / 웹 환경 ] [ 메시지 시스템 ] 활용 분야 [ 미디어아트 ]

Ⓒ sblim, 2011 연구 내용 Kinetic Typography 모션 분석  소셜미디어 환경에서 의사전달에 필요한 모션 정의  Kinetic 모션 표현을 위한 시간 / 공간 동기화 기법  Kinetic 모션 표현 마크업 언어 및 감성 표현 방법 인터페이스 기술에 초점  GUI 뿐 아니라 스케치, 제스처, NUI 등 다양한 인터페이스 기술 적용  실시간 스케치 기반 인터페이스  글자 / 단어 / 문장 등의 멀티 객체간 시간 동기화 및 경로상 모션 표현  모바일 인스턴트 메세징 시스템에서 메시지의 빠른 제작 및 전송  모션 제스처 및 NUI  3D 공간 등 더욱 발전된 형태의 Kinetic 모션 입력 가능 18 GUI 스케치 인터페이스 제스쳐 인터페이스 모션 인터페이스 +

Ⓒ sblim, 2011 간편한 사용자 저작도구  Kinetic 모션의 경로와 움직임을 설정하는 인터페이스 개발  실시간 의사소통 및 감성 전달을 위한 스케치 기반 저작 인터페이스  미디어 아트의 인터랙티브 Kinetic Typography 활용 콘텐츠의 저작 Kinetic 폰트 렌더링 엔진  벡터 폰트 엔진에 Kinetic 모션 처리 기능 포함  다양한 플랫폼에서 작동하고, Open API 로 쉽게 어플리케이션에 연동 클라이언트 프로그램  전문가용이 아닌 UCC 동영상 자막 및 타이틀 저작도구  모바일 및 웹 환경에서 Kinetic 폰트엔진을 탑재한 홍보 / 광고물 타이틀, 웹문서, 첨단 전자책 저작도구 및 뷰어  소셜미디어에서 감성 전달이 가능한 메세징 서비스 시스템 19

Ⓒ sblim, 2011 활용분야 Kinetic Typography 기반 메세징 시스템  소셜미디어 메세징 시스템에서 채팅 시스템에 적용  인스턴트 메세징 (IM) 시스템에서의 감성 표현 및 전달  멀티메세징서비스 (MMS) 의 특화 서비스 모바일 환경의 Kinetic Typography 기반 문서 시스템  무빙 타입 홍보물 및 광고 저작 및 배포  모바일 및 웹 환경의 Kinetic 문서 / 전자책 및 프리젠테이션 시스템 다양한 인터페이스의 Kinetic Typo 미디어아트 시스템  제스처 및 NUI 인터페이스를 통해 사용자 인터랙션이 가능한 Kinetic Typography 기반 미디어아트 저작 시스템 개발 및 전시 콘텐츠 제작 20