본문 바로가기

만들기

[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, https://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, https://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


  • 이전 댓글 더보기
  • 뚝바위 2008.11.18 21:12

    핏줄사진이랑 종이컵사진에서 뒤에 종이위의 글씨가 선명해졌네요
    왜 그런거죠?

    • BlogIcon t9t9 2009.05.03 07:39 신고

      가시광선 파장대역에 의해 너무 밝아서 보이지 않던 글자와 보였더라도 하얀색에 영향을 받던게, 적외선 필터로 가시광선을 막으니 글자들이 선명하게 보이게 되었습니다. 이런 현상을 잘 이용하면 좋은 어플리케이션이 나올수 있지 않을까요?

  • 매치니코프 2008.12.24 10:12

    IR led 박스는 어디서 구입하셨나요?
    구입할려고 하는데 도통 찾을수가 없네요.

    괜찮으시다면 링크좀 부탁드려도 될까요?
    아님 키워드라도 알려주시면 감사하겠습니다

  • 2009.01.06 15:17

    비밀댓글입니다

  • BlogIcon Shallaa 2009.02.17 23:39

    멋지네요. 기회만 된다면 꼭 만들어보고싶은- :)

  • 2009.03.11 19:06

    비밀댓글입니다

  • BlogIcon 럭키스타 2009.04.23 23:46

    근데 이 글을 보고서 궁금한점이...
    분명히 FTIR을 이용한 기술을 멀티터치 인식가능한 포인트는 확실히 늘어나겠는데...
    제프 한이 나오는 동영상을 보면 스크린에서 터치를 한단말이죠...
    그러면 스크린 어딘가에 초소형 적외선 카메라가 들어있는걸까요? 아니면 다른 적외선 인식가능한 센서가 있어야 스크린에 곧바로 적용이 되는건지...(아 왠지 뻘질문;;;)

    • BlogIcon t9t9 2009.05.03 07:45 신고

      공중에서는 전혀 잡히질 않다가 스크린에 터치할때 FTIR현상에 의해 흰색 blob가 생깁니다. 이걸로 터치여부를 센싱하는 것이죠.

      본문 중간에 보시면 아크릴판에 손을 밀착시켜 흰색 blob이 생긴것을 보실수 있습니다.

  • BlogIcon 럭키스타 2009.05.06 20:27

    흠... 그러니깐... 적외선 카메라가 아크릴판에 생기는 blob을 찍어야 인식하는것 아닌가요??

    LCD나 PDP 화면에는 이런 적외선 카메라가 있는건 아닐텐데 어떻게 터치로 생기는 blob을 인식할수 있는건가요?;;;

    • BlogIcon t9t9 2009.06.12 12:04 신고

      MS ThinSight를 검색해보시면
      LCD 기반에서 멀티터치 한것 보실수 있습니다. IR Emitter/Receiver를 배열해서 터치로 생기는 blob을 받아오는 방식입니다. LCD 백라이트 뒤에 배열한 형태.

  • BlogIcon 셔기 2009.06.02 20:09

    LED를 한줄로 땜질해서 붙이면 광량이 너무 적으려나요?

    • BlogIcon t9t9 2009.06.12 12:06 신고

      패널 사이즈가 작으면 상관 없겠지만,
      아무래도 한줄만 붙이면 멀어질수록 빛이 약해지니 blob을 찾아내내는 threshold 값에 신경쓰셔야 할것 같습니다.

  • 안상우 2009.09.29 13:52

    혹시 MS 사의 LifeCam Show 도 가시광선필터 제거가 가능한가요?ㅎ

  • BlogIcon Bardisch 2009.10.15 20:27

    WOW 재밌겠다 ㅋ
    랩탑 키보드 위에 설치해볼까요? ㅋ

  • BlogIcon finisterre 2009.11.01 19:08

    반갑습니다 졸업작품으로 멀티터치 만드는데 t9t9님 블로그가 많은 도움이 되었어요~
    https://www.youtube.com/watch?v=wZdelRBYRnc
    참고만하다가 이제와서 인사드리네요 ㅇㅅㅇ

  • 2010.02.04 17:51

    비밀댓글입니다

  • BlogIcon 보스몹 2010.02.21 17:20

    이거 어떻게 만들어요? 조언좀 주세요.

  • 2010.02.23 11:43

    비밀댓글입니다

  • 통신사의노예 2011.02.19 15:36

    퍼갑니다 ^^ 신기하네요!!

  • chanyoung64 2011.05.25 15:47

    위 영상에서 손가락이 표시되는 화면을 출력하는데 별도의 프로그램이 필요한가요?

  • Blood Vessel 2012.07.19 02:39

    티구티구님 포스트 보고 저도 잘 개조 했답니다 고맙습니다 ㅎㅎ
    (아직 초보인) 제가 개조한 웹캠 모델은 PCM-007로 개당 12000원 정도의 저가형인데 렌즈의 분리도 쉽고 화질도 쓸만해서, 이정도면 연습?실습?실험?용으로 쓰실 분들께 적당하지 않나 싶어요^^
    웹캠 자체에 조명 용도로 일반LED가 3개 달려있는데, 나중에 그걸 적외선LED로 대체도 해볼려구요!ㅋㅋ

  • 궁금이 2012.11.20 19:38

    안녕하세요? 이 사이트에 좋은 정보를 매번 얻어가고 있습니다. Microsoft, LifeCam NX-3000를 이용하여 적외선 카메라를 만들어보려고 했습니다. NX-3000을 구매하여 적외선 필터 부분을 제거하여 테스트 해보았으나, 적외선 이미지가 나오지 않고 가시광 일 때와 같이 나옵니다. 혹시 다른 설정이 필요한겁니까? 답변 부탁 드릴께요.

  • 2013.08.23 18:00

    비밀댓글입니다

  • 2014.05.27 13:54

    비밀댓글입니다