[MAKE] 손쉽게 만드는 멀티터치 인터페이스 제작기

 
최근 인터페이스의 흐름은 멀티터치가 대세를 이루어가고 있다. 손을 이용한 멀티터치는 자연스러운 사용자 참여를 유도할수 있어, 컴퓨팅 환경을 처음 접하는 사용자들의 참여를 유도하는데 아주 좋은 인터페이스이다. 애플(Apple Inc.)의 아이폰, 아이팟 터치, 맥북 에(iPhone, iPod Touch, MacBook Air)등으로 대중에게 선보인 멀티터치 기술은 2006년 TED(Technology Entertainment Design) 컨퍼런스에서 컴퓨터 공학자 재미교포 2세 제프 한(Jefferson Y. Han)에 의해서 선보였다. 제프 한이 보여준 전반사 장애(FTIR:Frustrated Total Internal Reflection)현상을 이용한 기술은 상당한 반응을 일으켰고 많은 연구자들에게 영향을 끼쳤다. FTIR을 이용한 멀티터치 기술이 선보인 뒤로 많은 연구와 제품들이 나왔고 가장 대표적으로는 마이크로소프트(Microsoft)사의 MS 서피스(MS Surface)가 있다. MS Surface 는 테이블탑컴퓨터(Tabletop Computer)의 일종으로 멀티터치가 가능하고 천만원대에 상품화되어 출시되었다.

Microsoft 에서 수년간 수많은 비용을 들여 연구 개발한 서피스(Surface)와 같은 인터페이스 기술을 몇 시간 투자해서 만들어 낼 수 있는 세상이 되었다. 최근 MS에서 소프트웨어를 개발할 수 있는 Surface SDK를 배포한다는 소식도 들리니 앞으로 더욱 확산될 것으로 기대하며, FTIR 현상을 이용한 멀티터치 인터페이스를 만드는 과정을 소개하고자 한다.



o 준비물
1. 가위, 검정 테이프, 소형 드라이버, 아크릴, A4 박스
2. 카메라 : V-Gear TalkCam 또는 Point Grey Firefly MV
3. 적외선 필터(850nm) 또는 네가티브 필름
4. 적외선 발광기(Infrared LED 박스)


준비물을 준비하는 과정에서 2,3,4 가 가장 고민되었던 부분이다. 카메라는 결국 성능과 직결되기 때문이고 마찬가지로 깨끗한 영상을 얻기 위해선 적외선 필터와 적외선 발광기는 대역을 맞춰줘야 하기 때문이다.

투명 아크릴은 터치 패널로 쓰일 것이고 A4 용지 박스는 패널을 받쳐줄 기둥 역할로 쓸 것이다.
아크릴은 G마켓에 사이즈별, 두께별로 최소면적 1,000원대에서 부터 팔고 있으니 적당한 멀티터치 테이블 크기를 구매하는데 2~3만원이면 가능하다.

IR(Infrared) LED 박스 역시 온라인 쇼핑몰에서 손쉽게 구매 가능. 그러나 가격이 조금 비싼편이다. 손재주가 있다면 IR LED를 낱개로 구매해서 저항을 스펙에 맞추고 납땜질 조금 하면 5천원~1만원대로도 제작이 가능하다. 오스람 IR LED 가 성능이 좋다고 한다.


FTIR 현상을 이용할 것이기 때문에 IR LED 박스에서 사용하지 않는 부분은 가려준다. CCTV 용 적외선 발광기이다보니 이렇게 박스 형태를 하고 있다. 아크릴 옆면에 발광기를 한줄이 빛을 쏠 수 있도록 조정하여 고정시킨다.


FTIR 현상: 매질이 다른 곳에서 빛이 반사를 일으키는 현상.


o 적외선 발광기 IR LED Box
가격은 10만원대가 넘어가기 때문에 비싼편이다. 전반적인 제작 소요시간, IR LED를 낱개로 구매, 저항구매, 납땜질, 전원 아답터 구성, 내구성 등을 고려했을 때 예산이 적절하다면 구매해 볼만 하다. 단, 직사각형 박스타입이기 때문에 테이블탑 멀티터치 시스템의 FTIR 구현용으로는 적합하지 못하다.
 


o 적외선 카메라 제작
적외선 카메라라는 것이 별도의 특수한 카메라가 아니다. 이미 여러분들이 가지고 있는 웹캠도 필터하나만 제거해주면 적외선 카메라로 만들 수 있다.

- 일반 카메라를 적외선 카메라로 만들기

카메라를 분해하다보면 붉은색을 띄는 필름, 혹은 유리로된 필터가 존재하는데 이것이 적외선 차단 필터(IR Cut Filter) 이다. 간혹 적외선 차단 필터가 볼록 혹은 오목 렌즈에 흡착코팅되어 분리해 낼 수 없도록 나오는 카메라들도 있으니 웹 검색 등을 통해 카메라에서 적외선 필터 분리가 가능한지 찾아보는 것도 좋다. 모든 카메라가 검색되면 좋겠지만 제조사에서 내부 설계를 공개하는 일도 드물기 때문에 하는 수 없이 뜯업는 수 밖에 없다. 본인지 지금까지 필터 분리 여부를 검증한 카메라는 총 6대인데 그 중 적외선 카메라로 손쉽게 전환이 가능한 카메라는 4대였다.


적외선 차단 필터를 분리한뒤 재조립하고 일정 파장 이상만 통과시키는 적외선 Longpass 필터를 부착한다. 여기서는 850nm Longpass 필터를 사용했다. 필터에는 Bandpass 와 Longpass 필터가 있는데 특정 구간(Range)만 통과시키는게 Bandpass 고 특정 값 이상은 전부 통과시키는게 Longpass 필터다.

파장(Wavelength)에는 다음과 같은 종류가 있다. 우리는 이중에서 매우 작은 Visible 영역을 눈으로 보고 있는 것이다. UV-Visuble-IR 영역까지는 빛이라는 형태로 존재하고 Microwave 는 Radio 주파수 형태로 존재한다. X-ray 밑으로는 이온형태로 존재한다.


[Wavelength의 종류]

일반적으로 우리가 사용하는 카메라의 소자인 CCD, CMOS는 빛 영역인 UV-Visible-IR Wavelength 대역폭에 반응한다. 전부다 반응하는 것은 아니고 일정 구간에선 잘 반응하지만 일정 구간에선 약하게 반응하기도 한다. 소자마다, 제조사마다 특성이 있다. 우리는 눈에 보이는 가시광선(Visible Ray)만을 보면 되기 때문에 대부분의 카메라에는 적외선 차단 필터(Infrared Cut Filter)가 내장되어 있다.

Point Grey 사의 비젼캠인 Firefly MV 모델의 Wavelength 의 반응 그래프이다. 고가의 비젼캠류는 이러한 자료를 쉽게 구할 수 있지만 일반 1~5만원대의 웹캠은 찾아 볼 수 없었다. 하지만 통념적으로 CCD, CMOS 는 IR 대역폭까지는 받아들이고 있다고 알고 있으면 된다.


[Firefly MV CMOS 의 Wavelength 별 반응 에너지율(%)]

이러한 대역폭을 받아들이는 카메라에서 IR 영역만 걸러내기 위해 Bandpass 또는 Longpass 필터를 사용하게 된다.
  
[Longpass 850nm 필터와 Bandpass 735nm 필터]


준비해둔 A4 박스 뚜껑에 카메라를 고정시키고 박스를 얹힌다음 아크릴 패널을 올린다. 

 
적외선 카메라로 영상이 제대로 들어오는지만 확인하면 끝. 여기까지만 하면 기본적인 하드웨어 구성은 완성이다.

다음으로는 소프트웨어적인 영상처리가 필요하다. 알고리즘 구현은 Intel CPU 환경에서 나름 최고의 성능을 낼 수 있는 OpenCV 로 구현(http://opencv.co.kr 참고). 개략적으로 다음과 같은 과정을 통해 멀티 포인트를 얻게 된다.

(1) 이진화(Thresholding) –> (2) 노이즈 제거(Noise Removal) –> (3) 레이블링(Labeling) –> (4) 멀티 좌표추출(Multi Points)


o 컨텐츠 개발 환경에 대한 고찰
다음으로는 이러한 인터페이스 환경 위에서 동작하는 컨텐츠가 있어야 하는데,
화려한 플래시(Flash)와 액션스크립트(AS : Action Script) 노가다만으로 구현하는 방법이 있겠고, 하지만 멀티포인터 처리가 난감하다. Flash의 개발 환경인 플렉스(Flex)로 개발해서 AIR(Adobe Integrated Runtime)로 클라이언트 환경에서 돌아가게 배포하는 방법도 있겠다(AIR의 한계점, http://www.yunsobi.com/tt/subby/194). 하지만 무엇보다도 VC++ 과 OpenCV 로 개발한 영상처리 알고리즘 모듈과 연동하는게 어렵다.

(최근 Adobe 에서는 iPhone 에서 Flash 를 띄우는데 성공했고 Apple 에 승인을 기다리는 중이라고 한다. 아마도 제약이 있는 Flash Lite 버전일 듯)

여러가지 자료를 검토하고 분석한 끝에,
차세대 윈도우 개발환경인 WPF(Windows Presentation Foundation)가 멀티미디어 컨텐츠 인터페이스를 개발하는 최선의 방법이 될것이라는 결론에 다달았다[참고링크]. 현재 물리적 한계상 CPU 클럭(처리속도)의 발전은 한계에 다달아 멀티코어 말고는 답이 잘 보이질 않는다. 멀티코어도 무조건 제성능을 발휘하는 것도 아니다. 프로그램 개발시 알고리즘 상으로 Task 를 잘 배분하고 멀티쓰레드로 동작하도록 개발되어야지만 제성능이 발휘된다. 대부분의 일반 프로그램들은 싱글코어 기반으로 개발되어 있음.

이러한 상황에서 그래픽 카드의 GPU 파워를 가져다 쓰는 것이 차세대 트랜드이다. 특히 nVidia 에서 이러한 기법을 전략적으로 밀고 있다. nVidia 에서는 GPU 를 연결해서 그리드 커퓨팅을 하질 않나 GPU 를 십분 활용한 3D GUI 등을 선보이고 있다(http://itviewpoint.com/60505, http://itviewpoint.com/69978).

그런데 왜 WPF냐?
WPF는 MS가 밀고있는 차세대 플랫폼 전략이다.
WPF는 기본적으로 그래픽 카드의 GPU 힘을 쓸수 있다. 이것은 즉, 상당히 화려하고 복잡한 비주얼을 보여주면서도 부드러운 화면을 보여줄 수 있다는 것이다. 무엇보다도 C# 개발환경이기 때문에 고차원적인 프로그래밍이 가능하고 멀티쓰레드를 돌린다던지 여러 서드파티 모듈들과의 연동성이 좋다. .Net Framework 3.0 이상의 프레임워크에서 C# 언어로 개발되어 여러가지 처리가 상당히 빠른다.

Flash 로 만들어진 컨텐츠는, Flex 로 개발된 클라이언트 프로그램들도 마찬가지로 왠지 모를 느린듯한 느낌을 받게된다. 액션스크립트 기반인데다 CPU파워만으로 동작했기 때문이다. 오브젝트가 많아지거나 플래시가 포함된 웹사이트를 서너개만 띄워도 CPU 점유율이 상당히 높아지는 것을 볼 수 있다. Adobe Flash Player 10 에서 GPU 를 지원한다고 한다(http://itviewpoint.com/59664, http://jasu.tistory.com/482).

GPU 시대가 오고 있다(http://itviewpoint.com/50099, http://itviewpoint.com/71291).
개발환경에 있어서 GPU 지원은 이제 옵션이 아닌 필수가 되어가고 있고
Intel 이 아니라 nVidia 나 ATi 가 돈을 만질 차례다.
(nVidia 는 GPU, ATi 는 VPU 라고 하는데 GPU 라는 단어가 더 대세다.)


o 그외 적외선 카메라
일반 카메라를 적외선 카메라로 개조하고나면 포커스가 잘 맞질 않는 현상이 일어나는데 이는 적외선 파장의 영향에 따른 현상이다. 렌즈 조절부가 따로 있는 제품들은 돌려서 조절하면 보정이 가능하지만, 렌즈부가 고정인 제품들은 살짝 뿌연 상태로 보인다. 멀티터치 구현에 있어서 꼭 선명한 영상이 필요한 것은 아니기 때문에 크게 상관은 없다.

- V-Gear, Talkcam Tracer CCD
가격: 옥션 46,930원
가장 큰 특징은 무엇보다 CMOS 가 아닌 Sony CCD 를 사용했다. 렌즈를 분해하기도 쉬워 별도의 나사 분해 없이 앞부분 렌즈를 돌려 빼낸다음 적외선 차단 필터를 깨부수면(?) 된다. 이부분은 난이도가 좀 있는편.


크기도 적당히 작음에도 성능은 괜찮다. 정지화상은 1280 x960 (130만화소) 까지, 동영상은 640 x 480 / 30 fps 캡쳐가 가능하다. CCD 는 저조도에서 노이즈가 적어서 좋다.

  
적외선 필터를 깨기위한 노하우. 칼이나 소형 마이너스(-) 드라이버를 이용해 아무리 빼내려해도 강력접착액을 붙어있어 쉽게 빠지지 않는다. 결국 깨기로 결정했으나 바로 아래 유리 렌즈가 또 있어서 자칫 유리파편으로 흠집이 날것 같다. 007 같은 스파이 첩보 영화에서 보고 배운 것을 써먹기로 했다. 스카치테잎을 필터부분에 붙여 밀착시킨후 힘을 주어 깬다. 그래도 파편이 생기긴 하지만 적어도 조각들이 테잎에 붙어있어 뜰어내기는 수월하다.

- Microsoft, LifeCam NX-3000
가격: 옥션 50,770원
MS사의 노트북용 웹캠. 분해해보면 실질적인 동작 모듈은 상당히 소형으로 되어있다. 소형으로 시스템을 제작할 계획이라면 이 제품도 괜찮을 것 같다. 화질은 무난한편.
정지화상은 1280 x 1024 까지, 동영상은 640 x 480 / 30 fps

 
나사 부분이 고무로 감춰져 있으니 고무를 빼내고 나사를 풀어야 한다.

 
실질적인 CMOS 모듈과 마이크 부분은 상당히 소형으로 이루어져 있다. 소형 시스템을 구축하는데 적절.

  
적외선 차단 필터 부분은 강력접착되어 있어 살살 깨어 조각을 내어 빼내면 된다.


o 적외선 카메라로 본 세상 
- 사라진 만원과 모니터: 만원짜리 지폐의 글자와 그림이 사리지고 모니터화면도 사라진다.
 

- 들어나는 팔의 핏 줄: 몸에 이렇게 많은 핏줄이 지나가고 있을 줄이야..


- 일회용 종이컵의 비밀: 종이컵의 그림도 사라진다.
 

at Media System Lab., Yonsei University
http://msl.yonsei.ac.kr

Reference
[1] 적외선 카메라의 이해, http://wiki.yonsei.ac.kr/index.php?title=%EC%A0%81%EC%99%B8%EC%84%A0_%EC%B9%B4%EB%A9%94%EB%9D%BC%EC%9D%98_%EC%9D%B4%ED%95%B4
[2] Jeff Han의 Multi Touch, Feb, 2006, http://www.youtube.com/watch?v=QKh1Rv0PlOQ
[3] Jeff Han from Wikipedia.org, http://en.wikipedia.org/wiki/Jeff_Han
[4] 멀티터치 동영상들, http://r-public.tistory.com/tag/Jeff%20han
[5] MS Surface, http://www.youtube.com/watch?v=EYrJ1IkPNLc
[6] MS 윈도우즈 7, 멀티터치 기술 적용, http://www.kbench.com/digital/?no=55673
[7] 멀티터치 기술, http://blog.naver.com/acrofan?Redirect=Log&logNo=50033059327
[8] FTIR(Frustrated Total Internal Reflection), http://www.cs.nyu.edu/~jhan/ftirsense/
[9] FTIR from Wikipedia.org, http://en.wikipedia.org/wiki/Total_internal_reflection#Frustrated_total_internal_reflection
[10] 멀티터치 기본원리, http://itrustme.tistory.com/15
[11] 빠른 영상처리, http://www.opencv.co.kr
[12] 미디어시스템연구실, http://msl.yonsei.ac.kr 
[13] OpenCV 영상처리, http://www.opencv.co.kr
[14] MS Surface from Wikipedia.org, http://en.wikipedia.org/wiki/Microsoft_Surface
[15] MS Surface SDK 배포, http://www.electronista.com/articles/08/10/07/surface.sdk.available.soon/
[16] Microsoft Surface Fact Sheet (MS Word)

MSSurfaceFS.zip