사용자

사용자 체험 중심의 문화콘텐츠 기술(CT)

유동홖 교수, Ph.D. 건국대학교 문화콘텐츠학과 philsm88@gmail.com

facebook.com/pouyoossam

- 참고서적

UI 디자인을 잘하기 위핚 테크닉 80=User interface design technic 80 /노주홖 저 노주홖 비비컴

UIDESIGN. CO. KR:사용성을 고려핚 웹사이트 기획하기 / 팀인터페이스 편 팀인터페이스 비 비컴 2002

아이폰 UI 디자인 프로젝트 /데이빗 바나드 [외] 지음 ;김홍중 옮김 Barnard, David 에이콘

사용자 경험 스케치:창의적 디자인을 고민하는 모든 디자이너의 방법롞/빌 벅스턴 지음;고 태호,유지선 [공]옮김 Buxton, William 인사이트

심리를 꿰뚫는 UX 디자인:재미있는 UX 심리학의 원리와 클릭을 이끌어내는 성공 웹사이트 의 비결/수잒 웨인쉔크 지음;심규대 옮김 Weinschenk, Susan 에이콘

INDEX

1. UI 란 무엇인가?

2. UI 기술 소개

3. UI 의 미래

사용자 인터페이스(User Interface)는 사람과 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 핛 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어짂

물리적, 가상적 매개체를 뜻핚다.

1/31

Web 2.0: Social

- 집단지성과 참여문화

Facebook, Twitter, and Next?

2/31

2D 3D

Zoom VR

Object VR

Panorama VR

Simulation

Web VR Web 3D

Digital Based content

Display Control

입체영상

Cyber Glove Data Glove Pinch Glove

Digital Based content

1) Vision UI

- UI 변천사

- GUI 구성요소 및 발젂사

2) Voice UI

- 음성 입력 Part - 음성 출력 Part

3) Gesture UI

- 영상 인식 Part - 모션 장비 Part

4) Tangible UI

- Touch UI

- 하드웨어 디바이스

3/31

1. PUI (Physical User Interface) 2. CUI (Character User Interface) 3. GUI (Graphic User Interface)

1) Vision UI – UI 변천사 (1/5)

4/31

1. 윈도우 2. 아이콘 3. 메뉴 4. 포인터 4. 메타포

1) Vision UI – GUI 의 구성요소 (2/5)

5/31

초기의 MAC OS

• 윈도우, 아이콘, 마우스, 메뉴, 스크롟로 이루어짂 가장 기초적인 형태의 OS

• 폴더의 이름은 바꿀 수 있지만

폴더 앆에 새로운 폴더는 만들 수 없음

• 멀티태스크 기능 지원 불가

1) Vision UI – GUI 발젂사 (3/5)

6/31

현재의 MAC OS X

1) Vision UI – GUI 발젂사 (4/5)

7/31

• 기존의 2D방식이 아닊 미래에는 3D 방식의 GUI가 주를 이룰 것이라 예측

1) Vision UI – GUI 발젂사 (5/5)

8/31

• 기존의 터치방식이나 마우스, 키보드 등의 입력방식을 음성 인식기능을 이용하여 새로운 인터페이스를 제공핚다.

• Voice UI에는 크게 음성을 입력 받아 제어 하는 방식이 있고 원하는 출력을 음성으로 내보내는 방식의 2가지로 나뉘어 짂다.

• 시각장애인에게 편리핚 서비스를 제공하거나 운젂중인 사용자에게 앆젂하게 교통서비스를 제공하는데 유용하다.

2) Voice UI (1/6)

9/31

• Voice UI 보다 큰 개념인 Auditory UI라는 개념앆에 Voice UI와 Sound UI 두 가지로 나눌 수 있다.

• Voice UI 에는 언어를 말하는 Speech UI와 언어가 아닊 음성으로 나눌 수 있다.

• Sound UI는 음성이 아닊 소리를 인식하는 것이다.

2) Voice UI (2/6)

10/31

<아이폰의 음성명령 프로그램 기능>

2) Voice UI 음성입력 Part (4/6)

• 프로그램을 실행하기 위한 음성 입력 방법

• 아이폰의 Voice Control라는 프로그램을 실행하면 원하는 어플리케이션을 음성으로 명령하여 실행 핛 수 있다.

12/31

• 내장된 영상인식장비가 사람의 제스처 의도를 얼마나 정확히 판독하느냐가 이 기술의 관건

3) Gesture UI 영상인식 Part (1/8)

• 사람의 손동작만으로도 TV를 작동할 수 있는 기술

<카메라를 이용핚 모션 감지 TV>

15/31

3) Gesture UI 영상인식 Part (2/8)

16/31

<Wii 게임기의 리모콘을 이용핚 게임>

3) Gesture UI 모션장비 Part (3/8)

• 3축 가속도센서를 이용한 모션 제어 장비

• 닊텐도 Wii 와 같은 게임기에서 모션 장비를 이용하여 게임을 즐길 수 있다.

17/31

3) Gesture UI 모션장비 Part (4/8)

• 3축 가속도센서를 이용한 모션 제어 장비 기술

• 리모콘에 탑재된 3축 가속도 센서를 이용하여 여러 가지 모션을 제어핛 수 있다.

18/31

3) Gesture UI 모션장비 Part (5/8)

<TV의 리모콘으로 사용 가능핚 지팡이>

• 적외선 센서를 이용한 모션 제어 장비

• 지팡이 끝의 적외선 센서를 사용하여 TV의 수싞부에 입력 받아 찿널 변홖, 볼륨조젃 등의 제어가 가능하다.

19/31

3) Gesture UI 모션장비 Part (6/8)

<장갑에 장착된 센서와 적외선 카메라를 이용하여 컴퓨터를 조작>

• 적외선 카메라와 AR기술을 이용한 모션 제어 장비

• 마이너리티 리포트의 영화에서 나왔던 기술인 손동작을 이용하여 컴퓨터를 조작핛 수 있는 기술이 개발 되었다.

20/31

3) Gesture UI 모션장비 Part (7/8)

• 적외선 카메라와 AR기술을 이용한 모션 제어 장비

21/31

<카메라 및 디스플레이장치의 위치> <장갑의 손등에 위치핚 마커> <젂체적인 알고리즘>

제스쳐 기술을 설명핚 특허

[System and method for gesture based control system]

3) Gesture UI 모션장비 Part (8/8)

• 적외선 카메라와 AR기술을 이용한 모션 제어 장비

22/31

캐나다 Dean Mark - Air Mouse

MIT G-speak

http://blog.naver.com/jegalcsh?Redirect=Log&logNo=80101008692

Kinect – gun smith

1. 개발 환경

4) Tangible UI – Touch UI (1/6)

• 장점 : 손가락 이외의 어떤 물체로도 압력으로 입력가능하며 저비용으로 제작가능, 세밀핚 터치가 가능

• 단점 : 낮은 투과율, 표면에 스크래치 발생

• 터치방식 – 감압식 (Resistive)

23/31

1. 개발 환경

4) Tangible UI – Touch UI (2/6)

• 터치방식 – 정젂압식 (Capacitive)

• 장점 : 높은 투과성과 강화유리 사용으로 내구성이 좋음, 멀티터치에 유리함

• 단점 : 접촉핚 두 손가락 사이가 너무 가까우면 인식 못함, 장갑, 손톱 등에 반응 못함

24/31

1. 개발 환경

4) Tangible UI – Touch UI (3/6)

• 터치방식 – 적외선방식 (Infrared)

• 장점 : 100% 투과율을 보임, 대형 사이즈에 유리함

• 단점 : 높은 비용, 멀티터치 불가능함

25/31

1. 개발 환경

4) Tangible UI – Touch UI (4/6)

• Haptic : 촉각 감각을 통해 힘이나 짂동, 움직임을 가함으로써 사용자와 인터페이스하는 기술

• Haptic Technology

26/31

VR

Haptic 기술

Force Feedback

Tactile Haptic

Suit

Virtual Skin

가상물체의 질감 표현

가상물체로부터 느낄 수 있는 반력감 표현

촉각기관을 통한 특정 정보 ( 위치, 위험경보 ) 표현 사용자 Hand/Arm 모션센싱 처리

가상물체와 실시간 충돌처리 표현

촉각기관을 이용한 User interface를 좀 더 쉽고 정 확하며, 직관적인 조작을 가능하게 하기 위한 기술

“The science of feeling”

▶

- UI의 사용 : BMW 의 GUI시스템

• 컴퓨터 화면 하나로 TV·라디오

·CD·DVD·온도 등을 조젃하고 엔짂오일 등 자동차의 상태를 핚눈에 파악이 가능.

• 화면의 선택항목을 컴퓨터와 비슷핚 구조로 구성하고, 조젃 방식도 PC의 마우스와 비슷핚 손잡이(조그 다이얼)를 돌리도 록 해, 컴퓨터를 다루는 느낌을 준다.

<BMW의 ‘헤드업 디스플레이’의 모습>

운전석 앞 유리에 내비게이션 화면을 띄워, 운전자의 편의성과 안전성을 높였다.

- UI의 사용 : Microsoft 의 Surface

• 멀티 터치 스크릮 컴퓨터.

• 물체를 인식하고, 손짒과 감촉 을 인식하는 시스템을 사용.

• 사용자는 스크릮에 손가락을 대는 조작만으로 각종 형태의 문서를 불러오고 처리가 가능.

• 기존의 터치스크릮 방식과 달리 여러명이 동시에 컴퓨터 조작이 가능.

• 디지털카메라나 MP3플레이어, 휴대젂화 등을 화면에 올려놓 으면 컴퓨터가 이를 인식

• http://www.youtube.com/watch?v=rP5y7yp06n0

49

<MicroSoft – Surface>

http://blog.naver.com/gpdudqldtls?Redirect=Log&logNo=120105015963&jump

4) Tangible UI – H/W 디바이스 (6/6)

• 3개의 적외선 센서를 이용한 가상 키보드

• 3개의 센서가 내장되어, 하나는 키보드 이미지를 비추고, 2개는 손가락 위치를 X,Y좌표축으로 인식하는 방식이다.

28/31

• 홀로그램, Flexible 디스플레이 등의 미래 싞기술을 통핚 새로운 형태의 UI가 선보일 예정

• 현실과 가까운 직관적인 User Interface로 발젂

29/31

• 1:1 인터페이스 설계의 한계 :

홖경젂체를 고려하는 Environmental User Interface 필요

30/31

1. 개발 환경

# UI & UX 관련사이트

http://interaction.tistory.com http://uxfactory.com

http://pxdux.tistory.com

문화콘텐츠기술 CT

• 가상현실 VR Virtual Reality

• 증강현실 AR Augumented Reality

• 혼합현실 MR Mixed Reality

컴퓨터를 이용해 구축한 가상공간 내에서 시각·청각·촉각 등 인간의 오감을 활용한 상호작용을 통하여 실제와 같이 몰입 할 수 있는 환경

가상공간

가상현실

시각/청각/촉각

생체신호(뇌파/근전도)

3차원 입체영상 정신질환 치료용 VR시스템

가상 품평용 VR 시스템

VR

개 요

VR

Visual 기술

입체영상 생성 기술

멀티 프로젝션 및 렌더링 클러스터 기술

Personal Display (HMD) Matrix Display

BOOM CAVE

▶

Desktop Display Curved Display

형태 해상도 비용 활용 사례

Desktop Display 반 몰입형 저해상도 저가 저가용 가상현실 시스템 구축 시 BOOM 반 몰입형 저해상도 저가 천체 관측 및 시뮬레이션 등 Personal Display 완전 몰입형 저해상도 저가 가상 치료 ( 고소 공포증 치료 ) 등

CAVE 완전 몰입형 저해상도 고가 자동차 충돌 실험, 해석 데이터 ( 의학, 분자구조, 기상 ) 가시화 등 Matrix Display 반 몰입형 고해상도 고가 자동차 품평 등

Curved Display 반 몰입형 저해상도 고가 공군 군사 훈련 ( Flight simulators ) 등

Active Stereo ( Mechanical Shutter )

디스플레이

입체영상 기술

Active Stereo ( Optical Shutter )

Passive Stereo ( Polarized Glasses )

Autostereoscopy ( 3D without Glasses )

▶

가상환경에 참여한 사용자에게 시각적인 정보를 제공하여 몰입감을 높이는 기술

VR

Auditory 기술

Mono/Stereo

▶

▶

▶ 컴퓨터를 이용해 구축한 가상공간 내에서 청취자가 시

각정보와 더불어 음향을 들었을 때 방향감, 거리감 및 공간감을 지각할 수 있도록, 음향에 공간 정보를 부가 하는 기술

기술 내용 시장 제품 기술

성숙도 적용분야

Mono/Stereo 모노/스테레오 방식의 원음 재생

각종 이퀄라이져 등 특수 음향효과 DirectSound 고 일반적인 데스크톱 VR 컨텐츠

입체음향 2채널 방식의 입체음향(녹음, 필터링) 멀티채널 입체음향(AC-3, AAC, DTS)

EAX, A3D, RSX, QSound3D

Dolby Digital, THX

중 고

wearable VR, 게임 몰입형 VR(CAVE 등), 영화

실감음향

인터렉티브 3차원 VR 컨텐츠를 위한

영상 변위에 따른 음원 동기화 연구실 수준의 개발 저 인터렉티브 3차원 VR 컨텐츠

특수음향 효과 기술 2채널 입체음향 기술 멀티채널 입체음향 기술

실감음향 생성 기술(영상음향 동기화)

응용 I/F 기술

Exo-skeleton기반 사용자 전신 동작 추적 인터페이스 (motion capture)

탑승형 기체의 사실적인 모션을 시뮬레이션하는 인터페이스 (surfing training)

일상 생활의 사물을 이용한 현실과 가상 공간의 상호작용 인터페이스 (digital story telling) 생체 신호 획득 및 실시간 분석을 이용한 사용자 명령 입력 인터페이스 (brain I/F)

실시간 동작 추적 기술

콘텐츠-모션 플랫폼 실시간 동기화 기술 실시간 실사-영상 정합 및 상호작용 기술

사용자 편의성을 고려한 상호작용 방법 설계 기술

VR

동작입력 I/F Motion Simulator Tangible I/F Bio-Feedback I/F

다양한 입력 센서를 이용하여 사용자의 의도를 파악하고, 다양한 출력 엑츄에이 터를 용하여 사용자에게 피드백을 전달하 는 기술

▶ ▶ ▶ ▶

증강현실 : 현실 + 정보

http://blog.nav er.com/bandi16 49?Redirect=Lo g&logNo=12021 2981020

www.bandiapp.co.

kr

시스템 특징 및 범위

대형영상 · 종류 : 거대평면 – IMAX, 젂천주 / 젂천 – OMNIMAX, 입체험 / 젂조 - Circlevision

· Electronic 계의 대형 시스템 개발에 의해 Live 핚 영상연출도 가능하다

멀티영상 · 소화면의 집적에 의해 거대화면과 같은 효과와 함께 가변적인 화면구성가능

· 다사상의 동시짂행 가능, 다양핚 시스템, 다찿로운 영상표현

· 풍부핚 영상소스, 밝고 선명핚 영상

· 크게 필림계와 Electronic 계 Multi 로 나누어짐

3D 입체영상 · 스크릮 저쪽면에서부터 튀어나오는 듯핚 2 차원 영상이 줄 수 없는 새로운 체험가능

Interactive 영상 · 기존의 방식에서 탈피하여 일방적인 정보젂달이 아니라 관객도 참여하는 쌍방향성 영상시스템 특수 젂시영상 · 영상은 스크릮에 영상을 비추는 것이라는 개념에서 탈피해 영상자체가 하나의 젂시물, 연출장

치로서 젂시장치와 영상시스템이 요소가 통합된 시스템

시뮬레이션 영상 · 최근의 첨단기술 (화상합성 , Interactive 제어 등 ) 을 부가하여 스크릮 이외의 요소를 더핚 시스 템으로 , 가상체험을 보다 강하게 줄 수 있다

무빙 영상 · 기존의 고정된 공갂 , 좌석 , 프로젝터 개념에서 벗어나 좌석도 프로젝터로 스크릮도 움직이고 영상장치가 Event 젂시회장 가운데를 돌고 짂동하는 시스템 이다 .

영상 시스템 정리

Imax 영상관

8층 높이의 대형 스크린을 활용하여 관객이 영상의 프레임을 볼 수 없도록 하여 현존감(혹은 몰 입감)을 극대화 시키는 Future Film 형태이다. 캐나다의 Imax 사에서 현존감을 극대화 시킬 수 있는 스크린 사이즈와 화질을 표준화 하였으며 그 표준을 구현 할 수 있는 시스템도 기술 표준 으로 정하여 보급 하고 있어, Imax Large Format Film 으로 불린다. 이런 대형 스크린을 활용 한 영화는 이후 돔 상영관등 특수 영상 영역에 널리 활용 되고 있으며, 현재는 라이드나 입체영 화와 접목시켜 활용되기도 한다.

국내에는 63 빌딩 등 특수 영상관 형태로 도입되었으나 최근 멀티플랙스에서 도입 운영하고 있 음.

Ride Film

관람석이 상영 영상에 맞춰 상하 전후 좌우 동작을 한다. 좌석은 시뮬레이터 위에 고정 되어 영상에 맞춰 프로그래밍 된 시뮬레이터의 동작에 의해 움직이며 시뮬레이터는 유 압식과 기계식의 두 종류가 있다. 1985년 최초의 Motion Simulation극장 2곳이 개장 되었다. 그 중 한곳이 Toronto에 위치한 Show Scan 의 "STAR TOURS" 이였다.

초기 6년간 RIDE FILM업계는 성공하지 못하였으나 80년대 말 Florida 의 Universal Studio에서 개장된 「BACK TO THE FUTURE : The Ride」의 대성공으로 Ride Film 은 전 세계의 테마파크, Location Based Entertainment Center 등의 주요 시설에 중요 한 수익사업으로 간주되어 90년대 이후 전 세계 Motion Simulation 극장의 수는 폭발 적으로 증가하였다. 시각과 청각 외의 다른 감각 체험을 할 수 있는 최초의 체험형 영 화형태라 할 수 있다.

다양한 라이드 시뮬레이터 : 1~2인승부터 40인승 까지 다양한 시뮬에이터

가 있음.

일본 SEGA사 제품

4D Attraction Film

Future Film

3D 입체 영화에 대한 시각과 청각 체험과 동시에 또 다른 인간의 감각 기관-촉각, 후각, 미각-을 체 험할 수 있도록, 스크린 영사 시스템 외에 다양한 체험 시설 혹은 장치를 연동시킨 영상 콘텐츠 + Theater System을 말한다. 현재까지 Future Film형태 중 가장 기술적 진보를 이룬 형태로 아직 기술 개 발이 진행 중이다. Future Film의 다른 형태인 Large Format Film이나 Ride Simulation Film이 이 4D Attraction Film 형태에 접목되어 활용되는 현재 Future Film 영역의 표현 기술의 정점이라고 할 수 있다.

한편 최근에는 기존 테마파크 콘텐츠 제작 기술 영역이 접목되어 발전하는 트랜드를 보이고 있다. (예:

오사카 유니머설 스튜디오, The Amazing Adventure of SPIDER MAN, The Ride : Ride Simulation + 4D Attraction Film +전시 퍼포먼스 & 트랙 라이드)

4D Attraction Film 극장 전체에 콘텐츠를 담아내는 표현기술이다. 기존 영화와 달리 스크린과 사운드 설비뿐만 아니라 좌석이나 벽이나 천정 기타 극장내 다양한 시설이나 장치를 활용해 영상 콘텐츠를 극 대화 시켜내는 복합적이고 종합적인 표현 기술인 것이다. 4D Theater 설비와 System 자체가 영상 콘텐 츠를 담아내는 표현 기술인 것이다.

I 19

- 페르시아 젂시를 찾은 관람객들에게 페르시아 제국 의 왕도였던 페르세폴리스를 디지털 재현하여 보여줌

• 국립중앙박물관 황금의 제국 페르시아 특별젂 : 페르세폴리스 3D영상

국립중앙박물관 페르시아 특별젂 내부에 젂시중인 페르세폴리스 재현 3D영상 2300년젂 페르시아 제국 페르세폴리스궁 3D재현 국립중앙박물관

페르시아 특별젂 앆내판

Reality Theater - 복원 유물의 다감각 체험