태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

'youminkim'에 해당되는 글 19건

  1. 2010/02/16 개방형 생태계와 Web Squared by 김유민 (1)
  2. 2009/12/28 [Natural User Interface] 2. 다양한 신체부위를 활용하는 제스처 인터랙션 by 김유민 (5)
  3. 2009/11/30 [Natural User Interface] 1. 멀티터치 입력기술 by 김유민 (6)
  4. 2009/11/09 BALANCE: 다양한 의견을 포함하는 뉴스 수집하기 by 김유민 (4)
  5. 2009/09/21 Urban Pixels: 도시를 빛으로 그리다 by 김유민 (7)
  6. 2009/09/14 HCI, Interaction Design, 그리고 UX 관련 연구들 by 김유민 (4)
  7. 2009/08/10 만질수 있는 홀로그래피 by 김유민 (5)
  8. 2009/07/14 프로토타이핑에 사용할 수 있는 1달러짜리 제스처 인식기 by 김유민 (2)
  9. 2009/06/29 Scratch Input: 긁는 소리를 활용한 입력방법 by 김유민 (3)
  10. 2009/06/08 OctoPocus: 제스처 입력을 돕기 위한 동적 가이드 시스템 by 김유민 (7)
  11. 2009/05/01 일곱가지 사용자 연구 방법들 by 김유민
  12. 2009/04/24 CHI 2009 학회에 발표된 재미난 연구들 #1 by 김유민 (10)
  13. 2009/03/14 터치 스크린에서 손가락 제스쳐를 활용해 레이어들을 정돈하는 방법 by 김유민 (12)
  14. 2009/01/29 2009년 모바일 웹 트렌드 by 김유민 (2)
  15. 2008/12/26 FishTank, 노래 부르는 물고기 by 김유민 (1)
  16. 2008/12/19 Emoti-pot, 화분이 감정을 지니고 있다면? by 김유민 (3)
  17. 2008/10/20 K-Menu: 키워드를 활용한 동적 메뉴 인터페이스 by 김유민 (3)
  18. 2008/09/28 유비쿼터스 기술과 연구의 장, Ubicomp2008 by 김유민 (2)
  19. 2008/09/12 게스트 블로거, 김유민을 소개합니다 by 김유민 (3)
지난달 보광 피닉스파크에서 한국 HCI2010 학회 (@hci2010)가 열렸습니다. 그 중에서도 "Open ecosystem and Web squared" 패널토의를 흥미롭게 들었습니다. 개방형 생태계에 대한 좋은 이야기와 영감을 얻을 수 있었는데요, 학회 책자에는 아래와 같은 소개글이 있었습니다:

 웹과 인터넷 기술, 그리고 네트워크 기술의 빠른 진화는 개방형 생태계를 급속하게 확산시키고 있다. 70~80년 대의 개방형 기술과 개방형 아키텍처, 90년대의 개방형 SW 와 개방형 네트워크, 2000년대의 개방형 플랫폼, 개방형 API, 개방형 인증체계등을 거치며 개방형 생태계가 만개하고 있다. 개방형 생태계는 빠른 기술 발전에 따른 위험을 나누며, 이익들을 공유하는 형태를 주요 특징으로 하고 있다.

 본 패널토의에서는 국내외 유무선 인터넷 환경에서의 변화되는 환경과, 그 속에서 다양하게 펼쳐지고 있는 개방형 생태계에 대해 이야기 하고, 한국에서의 개방형 생태계가 자리잡기 위해 필요한 사항들에 대해 토의한다.

좌장으로 ETRI 의 전종홍 님(@hollobit), 그리고 패널 리스트로 LG전자의 황병선(@marsnine), 서울대학교의 윤석찬 님 (@channyun), 다음커뮤니케이션의 김승렬 님(@mobizenpekr), 그리고 KAIST 의 한상기 교수님 (@steve3034) 이 참여 하였습니다. 패널토의를 들으며 인상깊은 이야기 들을 메모 해두었는데, 아래에 그 이야기와 종합해 본 내용을 적어 보았습니다.

전종홍
"Eco-system 이란 먹이를 나누며 살아가는 '계'이다. 그리고 함께 살아갈 수 있는 세상이다"
"인터넷은 본래 적극적인 개방을 염두에 두고 설계 되었다."
"인터넷은 긴 테이블의 한 쪽에서 다른 한 쪽으로 에서 맥주를 전달하는 일과 같으며, 인터넷은 수백만 사람들의 사심없는 친절과 호기심으로 지속되어지고 있다"
한상기
"어디까지 개방해야 할 것인가는 중요한 문제이다. Open Standard 와 Open Source 는 명백히 다르다. Facebook Connect 와 같은 형식의 개방은 우리에게 어떤 가치를 생산하였는가?"
윤석찬
"좋은 개방형 플랫폼의 구성 뿐만 아니라 사람들의 참여도 중요하다. 참여에도 연습이 필요하며, 사람들이 잘 참여할 수 있도록 유도하는 방향에 대해 고민 해야 한다"
황병선
"모바일 환경에서 개방형 생태계는 통합을 통해 시장을 확대시킨다는 점에 의미가 있다. 구글의 안드로이드 OS 는 이러한 전략 중 하나이다. 그러나 아주 하나로 시장이 통합되는 것에도 문제가 있다. 향후 세개 정도의 큰 시장이 만들어질 것으로 예상한다"
김승렬
"개방형 생태계는 상호 연동을 통해 새로운 가치를 생성할 수 있는 환경이다. 단순히 정보의 Distribution channel 수준을 뛰어 넘는 무엇인가로 발전해 나가야 할 것이다"

그리고 방청석으로 부터의 다음과 같은 질문이 있었습니다:

"의료정보 등 개인정보는 매우 가치있고 있는 정보이다. 그러나 그것의 사업화는 프라이버시 문제를 야기 할 수 있고, 기득권층의 정보독점으로 인해 정보 불평등을 심화 시킬 수 있다. 개인정보는 과연 누가 관리해야 할까?"

그리고 다음과 같은 답변들이 있었습니다:

"신뢰할 수 있는 기업이어야 할 것"
"만약 기업이 맡게다면 관계에 대한 신뢰가 동반 되어야 할 것이라 본다. end-user 와의 신뢰를 우리는 '브랜드' 라고 부른다"
"비슷하게 정부의 공공정보 또한 매우 가치있는 정보로 볼 수 있다. 그러나 이러한 정보들이 한 곳에 편중되는 것보다는 분산되는것이 옳다고 본다"

종합해 보면, 개방형 생태계는 Web Squared 의 참여와 공유의 문화를 잘 반영하여 새로운 시장과 가치를 이끌어 낼 수 있는 환경입니다. 개방의 형태는 크게 Open Standard 와 Open Source 로 나뉠 수 있습니다. Facebook Connect 와 같은 Open Standard 형태의 개방은 Social game 시장을 개척했을 뿐만 아니라 Facebook 자체의 큰 성장 또한 이끌어 냈습니다. 구글이 추진하는 안드로이드 모바일 OS 는 Open Source 형태의 개방이라 할 수 있습니다. 구글은 안드로이드를 통해 모바일 환경을 통합하고, 궁극적으로는 관련 시장을 통합하고 확대하려고 합니다. 두 사례를 통해 개방형 생태계는 개방을 통해 새로운 시장을 적극적으로 개척하는 방향성을 지니고 있는 것을 알 수 있습니다.

한편, 사용자 입장에서는 다양한 자원의 상호 연동을 통해 편리한 서비스를 이용할 수 있게 되기 때문에 좋습니다. 하지만, 개방형 생태계는 단순히 정보를 전달하는 플랫폼 수준에서 그치지 말고 사용자의 니즈, 상황(context), 참여를 반영할 수 있는 형태를 고민해야 할 것입니다. 또한, 개방형 생태계에는 사용자(end-user) 를 포함한 다양한 이해관계자들(stake holders) 존재 합니다. 좋은 개방형 생태계를 만들어 나가기 위해서는 모두 함께 그 필요성을 공감하고 적극적으로 참여해 나가야 할 것입니다.

그리고 공유해주신 발표자료들 입니다:

http://bit.ly/bCUTIu

http://www.mobizen.pe.kr/908
http://www.futurewalker.kr/645

좋은 이야기 들려주신 패널 리스트 분들께 감사드립니다. 그리고 UX Factory 구독자 분들, 새해 복 많이 받으세요 :)

web squared

황병선님께서 찍은 전종홍님의 발표 중 한 장면. (CCL)



* 제가 UX Factory 에 써온 글은 여기에서 다시 보실 수 있습니다.
저작자 표시

안녕하세요, 김유민 (@youminkim) 입니다. 졸업심사 받느라 오랜만에 찾아뵈어요. 오늘은 지난 멀티터치 입력기술 소개에 이어 제스처 인터랙션에 관련한 몇가지 사례들에 대해 리뷰하도록 하겠습니다. Designing Gestural Interfaces 라는 책에 따르면 제스처 인터페이스는 크게 터치 기반 인터페이스와 자유형태의 인터페이스로 나눌 수 있습니다. 터치 기반의 제스처 인터페이스는 멀티터치 관련 제스처 인터랙션과 같이 장치를 직접적으로 누르며 입력을 하고, 자유형태 인터페이스의 경우 장갑이나 컨트롤러 (Wii), 혹은 아무 컨트롤러 없이도 몸으로 제스처 입력을 할 수 있도록 합니다. 한편, 제스처 인터페이스가 발전해온 큰 계기로는
  • 마우스/터치 스크린등을 이용해 디스플레이의 물체를 Direct manipulation 할 수 있게 된 것
  • 멀티터치 입력 장치를 통해 두 손/여러손가락을 동시에 사용해 인터랙션 할 수 있게 된 것
  • 온 몸을 사용하는 인터랙션 (whole-body interaction) 을 할 수 있게 된 것
를 뽑을 수 있습니다. Natural User Interface 의 맥락에서는 온 몸으로 자유형태의 인터페이스를 사용하는 인터랙션이 흥미롭게 다가옵니다. 아래에는 기존의 전형적인 입력방식에서 벗어나 사람들의 다양한 신체부위를 사용해 제스처 인터랙션 하는 연구들을 소개해 드립니다 (UIST 2009 학회에서 발표된 사례들 중 골라 보았습니다).


팔 근육을 이용한 제스처 입력
이 연구는 팔에 근육의 변화를 감지할 수 있는 EMG (Electromyography, 근육이 움질일 때 발생하는 미세한 전기신호를 감지하는 기술입니다) 센서를 이용해 손가락의 움직임을 감지하고 그것을 기기 조작에 응용가능하게 하는 인터랙션에 대한 연구입니다. 예를 들어, 조깅을 하고 있을 때 음악 플레이어를 조작하는 상황을 가정해 보면 뛰는 것을 멈추지 않은 채 지정된 몇가지 손가락 제스처를 이용해 플레이어를 조작해 낼 수 있습니다. 아래 동영상을 보시면 자세한 내용 확인 하실 수 있습니다.







방향감지가 가능한 모바일 기기를 활용한 가상 책장 시스템
모바일 기기에서 좀 더 빠르고 손쉬운 입력을 위해 몸 주변의 가상책장 개념을 도입한 연구입니다.작은 디스플레이를 보며 버튼을 누르는 식의 전형적인 입력방식에서 벗어나 몸 주변에 가상의 책장 (혹은 아이콘) 이 있다 가정하고, 그것을 모바일 기기로 가리키는 것으로 입력을 가능하게 하고 있습니다. 상하좌우에 대한 방향을 감지해 낼 수 있는 모바일 기기를 활용할 수 있을 것이구요, 이 연구에서는 6 개의 카메라와 휴대폰에 붙은 마커를 활용하는 영상처리 방식으로 방향을 감지 하였습니다. 방향감지 방법에 개선할 여지가 많이 있어 보이지만, 제스처 인터랙션을 활용해 몸 주변으로 인터랙션영역을 확장하는 어플리케이션을 제시하였다는데 의미가 있는 연구입니다.






혀의 움직임을 컴퓨터 입력에 활용하기 
처음에 보고 매우 놀랐던 연구입니다. 전신마비 장애인들의 입력장치로는 기존 eye-tracking 이나 음성인식쪽 연구가 많았었는데 이 연구에서는 혀의 움직임 또한 좋은 대안이 될 수 있다 보았습니다. 그래서 아래 그림과 같은 프로토타입을 만들고 혀의 제스처를 인식하는 시스템을 개발하였습니다. 아래 프로토타입은 비장애인을 포함한 사용자들이 실제 입에 장착할 수 있도록 제작되었다고 합니다. 센서는 광학식 거리센서의 한종류로 저번에 리뷰해 드린 멀티터치 입력기술 소개의 ThinSight 에서 사용되었던 센서입니다. 네가지 간단한 제스처를 인식할 수 있는 시스템을 개발했고, 정확도는 90% 이상 나왔다고 하네요. 프로토타입 다음에 나오는 그림은 혀 제스처를 이용해 실험참여자에게 테트리스도 해 볼 수 있도록 하였네요. 장애인들을 위해 여러 장치에 응용될 수 있을것으로 생각됩니다.



 
세 가지 최신의 제스처 인터랙션 연구들을 살펴보았습니다. 아직 NUI 를 비롯한 제스처 인터랙션 연구가 시작단계이긴 하지만 대부분의 연구가 대안적인 용도로만 제안되어 온 것이 아쉽습니다. 일반 사용자들의 생활 속에 좀 더 스며들 수 있는 인터랙션이 연구되어야 할 것이라 봅니다. 이를 위해서는 사용자의 생활속에서 제스처 인터랙션이 필요한 구체적인 상황과 니즈를 정확히 파악하고, 간편하고 직관적인 인터랙션의 제안, 그리고 그것을 안정적으로 인식해 내는 시스템 개발이 동반되어야 할 것입니다. 마지막으로, 아래에는 그 동안 제가 UX Factory 에 리뷰한 연구중에 제스처 인터랙션에 관한 것들을 모아보았습니다:

다음 연재는 제가 이번 석사 졸업연구로 진행했던 '책상 맨 바닥에서 멀티터치 입력을 가능하게 하는 입력장치'에 대해 리뷰해 드릴게요. 그럼 즐거운 연말되시기 바랍니다 :)

저작자 표시

안녕하세요, 김유민 (@youminkim) 입니다. 근래 MS Surface, 아이폰의 멀티터치, Wii 등 새로운 형태의 인터랙션들이 등장하고 있습니다. 제가 생각하는 이들의 공통적인 특징은 새로운 입력장치를 개발하고 이에 적절한 인터랙션을 제안 함으로써 사용자의 자유도와 경험을 긍정적으로 확장시키고 있다는 점입니다. 이러한 경향을 Natural User Interface 의 움직임으로 고려해 보며, 이에 대한 기반기술들을 앞으로 세번에 걸쳐 연재해볼 생각입니다. 

오늘은 그 첫번째로 멀티터치 입력기술에 대해 알아보려 합니다. 이 포스팅에서는 2000년 이후 주목받은 세가지 멀티터치 입력 기술의 원리를 중심으로 리뷰해 드립니다. 

SmartSkin, 2001
Sony 연구소에 계시는 Jun Rekimoto 의 2001년 연구로 사용자 손을 전기가 흐르고 있는 곳으로 가져갔을 때 생기는 전자기적 변화를 감지해 멀티터치를 인식해 내는 기술입니다. 아래에 보시는 것과 같이 전선을 격자로 배치해 둔 뒤 그 전선에 전기적 파동을 주기적으로 보내게 되고, 수신부에서는 그 전기적 파동의 미세한 변화를 잡아내게 됩니다. 이 변화가 가장 큰 곳을 계산해 냄으로 손의 위치를 추정하게 됩니다.


프로젝터가 천정에 매달려서 아래쪽으로 영상을 쏘는 구조를 통해 아래와 같은 테이블탑 환경을 구축해 낼 수 있었습니다. 



Jeff Han's FTIR, 2005
쉽고 싼, 그리고 정확한 멀티터치 기술을 개발하여 주목받은 연구입니다. TED 에서 연구를 발표하여 더욱 유명해 졌었구요.


이 기술의 원리는 FTIR (Frustrated Total Internal Reflection) 이라는 물리적 현상에서 시작합니다. 플라스틱 판 안에 들어간 빛은 계속해서 전반사를 일으키게 되어 바깥으로 빠져나오지 못합니다. 하지만 아래 그림과 같이 사람 손이 플라스틱 표면에 닿게 되면 빛이 산란되어 바깥으로 빠져나오는 빛이 생기게 됩니다. 이것을 멀리 떨어져서 카메라로 찍어보면 사람손이 닿은 부분에서만 동그란 점 (blob) 이 맺혀있는 것을 확인 할 수 있습니다. Jeff Han 의 멀티터치는 이 동그란 점의 위치를 기반하여 멀티터치를 인식하게 됩니다. 




ThinSight, 2007
MS Research 의 Bill Buxton 의 연구인데요, 앞에 소개해 드린 두 기술이 가진 문제 - SmartSkin 은 천장으로 부터의 영상이 손에 가려지는 문제와 정확도 문제가 있었고, Jeff Han 의 멀티터치의 경우 카메라 화각을 확보하기 위해 공간이 필요합니다 - 를 해결하기 위해 시작되었습니다. 


위 그림에서 보는 것과 같이 LCD 패널과 함께 동작하는 기술로, LCD 뒷면에 아래와 같은 광학적인 센서들을 배치하여 손가락을 감지해 냅니다. 


 눈에는 보이지 않는 적외선 발광소자와 그 적외선을 감지해 낼 수 있는 센서를 조합하여 LCD 뒷면에 수십개의 센서가 부착됩니다. 작은 카메라가 수십게 달려있는 형태로 생각하셔도 되는데요, 사용자의 손이 가까이 오게 되면 적외선이 반사되는 양이 많아지게 되고 센서는 그것을 감지하게 됩니다. 그렇게 해서 얻은 센서들의 정보를 모아서 아래와 같이 영상처리를 하게 되고, 여기에서 찾은 동그란 점들을 기반으로 손가락 위치를 추정해 냅니다. 


결과적으로 노트북 디스플레이에 붙을 수 있을 만큼 크기가 줄어든 멀티터치 입력기술이 가능해졌습니다. 

세가지 기술에 대해 살펴보았지만, 사실 이외에도 다양한 멀티터치 기술들이 개발되어 왔습니다. Microsoft Research 에 계시는 Bill Buxton 의 웹페이지에 관련 내용이 잘 정리가 되어 있는데 참고하시기 바랍니다. 

다음 연재로는 Natural User Interface 에서 중요한 영역을 차지하고 있는 제스처 인터랙션과 관련한 내용을 다뤄볼 예정입니다. 그럼 평안한 한 주에 되세요!

* 아래에는 본 리뷰를 작성하며 참고한 논문들 입니다:

SmartSkin: An Infrastructure for Freehand Manipulation on Interactive Surfaces.


ThinSight, Microsoft Research Cambridge (UK)  http://www.billbuxton.com/UISTthinSight.pdf



저작자 표시

안녕하세요, UX 팩토리 블로거 김유민 (@youminkim) 오랜만에 인사드립니다. 오늘은 지난주 11월 2일 부터 이틀간 코엑스에서 진행되었던 SymCT 에서 인상 깊게 들었던 연구 한가지를 리뷰 합니다. Paul Resnick 박사님의 BALANCE 라는 연구 프로젝트 인데요, 기존 단순 '추천' 수 기반으로 뉴스를 수집해 보여주는 방식은 다양한 의견을 반영하지 못해 한쪽으로 편향될 수 있다는 것을 문제점으로 보고 있었습니다. 서비스 상단에 올라오는 뉴스들이 항상 보수성향만 보이고 있다거나 혹은 그 반대의 경우라면 사용자들은 불쾌감을 느낄 것입니다. 뉴스를 추천 수 기반으로 분석해 보여주는 서비스로는 대표적으로 Digg, 그리고 우리나라에는 Daum view 가 있습니다.

이 프로젝트에서 사용자에게 다양한 관점을 지닌 뉴스들을 제공하기 위해 사용한 방법은 Sidelines 이라는 알고리즘 입니다(논문, 발표자료). 발표자료에서 제시한 예시와 함께 어떻게 알고리즘이 동작하는지 알아보도록 하겠습니다. 


위 그림은 두 그룹(푸른사람들 vs. 붉은사람들)의 총 여섯 명의 사람들 이 ABCDEF 기사에 대해 '추천' 한 예시입니다. 단순 추천 수 기반(Approval voting)으로 상단에 배치할 네가지 뉴스를 골라보면 B,A,D,F 가 골라지게 되는데, 이 결과는 푸른 사람들이 추천한 뉴스로 편향 된 것이라 볼 수 있을 것입니다. 이를 해결하기 위해 Sidelines 알고리즘은 아래와 같이 동작합니다.



먼저 가장 추천 수가 많은 뉴스였던 B 를 선택하고, 그것을 선택한 사람들을 제외 시킵니다. 그리고 나머지 사람들이 추천한 뉴스 가운데 추천 수가 많은 것을 고르게 됩니다. 그 결과 붉은 사람들이 골랐던 C 가 선택되었습니다. 



이전에 선택되었던 C를 추천한 사람들을 제외한 뒤 그 중에서 추천 수가 많은 A 를 선택합니다. 



같은 방식으로 이번에는 E 가 선택되었습니다. BCAE 가 선택되었고, 결과적으로 푸른 사람들의 의견만을 반영했던 단순 추천 수 방식에 비해 Sidelines 알고리즘은 붉은 사람들의 의견도 잘 반영시키고 있습니다. 

사람들의 '추천' 이라는 행위 자체가 뉴스 내용의 성향을 완전히 대변해줄 수 있는 것이 아니기 때문에 뉴스의 의미적 다양성이 확보된 것이라고 단언할 수는 없지만 최소한 소수에 의해 지지받던 무엇인가가 주류로 올라올 수 있는 기회가 확보되었다는 점, 그리고 유명하기 때문에 유명해지는 현상에서 생각해볼 수 있는 의견 쏠림문제(tipping problem) 의 해결에 이바지 했다는 점은 의미가 깊은 듯 합니다. 

뉴스의 의미적 다양성을 확보하기 위한 연구로 우리나라 연구자 분들이 CHI2009 에서 소개했던 NewsCube 가 있습니다. 뉴스들이 지니고 있는 성향(bias) 을 시스템이 자동으로 분석하여 비슷한 관점의 뉴스들을 묶어 보여주는 방법에 대해 다루고 있습니다. 

그리고 이러한 소셜 컴퓨팅 관련 연구에 관심 있으시다면, 이 발표세션의 좌장으로 계셨던 한상기 교수님 (@steve3034) 연구들도 참고해보시기 바랍니다.

그럼 다음에 재미있는 연구와 함께 찾아뵙겠습니다 :)

* 제가 UXFactory 에 써왔던 리뷰들은 이 링크에서 확인하실 수 있습니다. 
저작자 표시

안녕하세요, UX 팩토리 블로거 김유민 (@youminkim) 입니다. 오늘은 CHI2009 에 소개된 "Urban Pixels: Painting the City with Light" 라는 논문을 소개해 드립니다. MIT Media Lab 의 Smart Cities Group 에서 진행된 프로젝트로 LED 불빛을 내는 물리적인 픽셀을 통해 도시를 하나의 거대한 디스플레이로 발전시키고자 하는 프로젝트입니다. 논문에서는 벽 크기의 규모 (wall-size scale) 로 구현된 작업을 설명하고 있으며, 본 리뷰에서는 이 프로젝트에서 각 픽셀을 어떻게 개발하였는지, 그리고 관련 프로젝트 위주로 소개해 드립니다. 

Urban Pixels with Launch from Susanne Seitinger on Vimeo.


각 픽셀은 다음과 같은 하드웨어 구성요소를 지니고 있습니다:
  • 마이크로 컨트롤러
  • RF 송수신기
  • LED 모듈 (흰색)
  • 다시 충전가능한 리튬-이온 배터리 팩
  • 적외선 센서 
  • 태양전지 (optional)

멀리 떨어져있는 수십개의 픽셀들을 어디에나 쉽게 설치하고, 조작하기 위해서는 안정적이고 빠른 무선통신이 필수적입니다. 이 프로젝트에서 통신방법은 RF 송수신 모듈을 통한 중앙통제 방법을 사용하고 있습니다. 각 픽셀들은 고유 주소를 지니며, 노트북으로 부터 오는 신호에 반응하여 특정무늬나 행동을 하게 됩니다. 그러나 실제 도시규모가 되었을 때, 일반적인 RF 통신모듈의 전송거리와 픽셀수(node) 를 고려해보면 궁극적으로는 분산 네트워크가 고려되어야 할 것이라 생각됩니다. 


또한, 각 픽셀들은 백열등이 달린 손전등으로 켜고 끌 수 있습니다. 이를 위해 적외선 센서가 사용되었습니다. 850nm 영역을 수신할 수 있는 적외선 센서와 10비트 ADC 가 내장된 마이크로 컨트롤러를 이용해 빛을 감지하게 되는데요, 주변광 (environment light) 의 변화에 알맞게 threshold 가 동적으로 변하는 기능까지 구현되었다고 합니다. 그런데 요즘 나오는 LED 광원을 사용하는 손전등에는 동작하기 어려울 것 같다는 생각도 듭니다. 백열등이 내뿜는 빛은 적외선 영역 (850 nm) 을 포함하고 있어서 감지가 가능하나, LED 광원을 사용한 손전등은 가시광선 영역대만을 지니고 있어서 적외선 센서가 감지하지 쉽지 않을 것입니다. 그리고 이외 인터랙션 기능으로는 호스트 컴퓨터에 문자메시지에 숫자를 적어 보내면 해당하는 무늬를 만들어주는 기능이 있다고 합니다. 

아래에 본 논문에서 참고한 관련 연구/프로젝트들을 소개함으로 이번 리뷰를 마치려 합니다. 이번 리뷰에서는 실제로 관련 작업하시는 분들께 도움이 될수 있을까 해서 기술적인 부분을 위주로 다루어 보았는데, 우리 블로그를 찾아주시는 분들께서 필요로 하는 내용인지 잘 모르겠어요. 기술적인 부분을 필요로 하시는 분들이 계시면 앞으로 리뷰할 논문에서 기술적인 부분을 좀 더 포함해보려고 하는데, 피드백 주시기 바랍니다. 논문원문이 필요하신 분은 ym_kim@kaist.ac.kr 로 메일 한통 주시구요. 그럼 다음에 또 찾아 뵐게요 :)

관련 연구/프로젝트 보기


저작자 표시

안녕하세요, UX 팩토리 블로거 김유민 (@youminkim) 입니다. 여러분들과 함께 재미난 연구들을 공유하고 함께 공부해 나가겠다는 생각으로  HCI, Interaction Design, 그리고 UX 관련 연구들 이라는 큰 주제로 블로깅을 해왔는데, 어느덧 1년이 훌쩍 넘었습니다. 오늘은 그 동안 공유했던 글들을 정리 해보고 (앞으로 올릴 글들도 이 곳에 정리될 예정입니다), 정보를 얻은 학회에 대한 간략한 설명을 덧붙이려고 합니다.


Natural User Interface 연재

연구논문들
디지털미디어연구소의 연구들

그 밖에...

정보를 얻는 주요 학회들
오래전 부터 학계는 연구자들 간의 활발한 연구정보 공유를 통해 발전해 왔습니다. 크게 저널과 학회(conference) 를 통해 연구자들은 정보를 공유해 왔는데, UX 관련 분야들은 그 기술의 변화속도가 빠르고 학문적으로도 크게 성숙해있지 않은 상황이기 때문에 저널보다는 1년에 한번 정기적으로 한자리에 모여 연구성과를 공유하고 토론 할 수 있는 학회가 영향력이 더 큽니다. 아래에 최근 주요 학회들의 홈페이지를 링크 시켜두었으니 참고하시기 바랍니다:


저작자 표시

안녕하세요, 게스트 블로거 김유민입니다. 오늘은 SIGGRAPH 2009 에 소개된 ‘만질 수 있는 홀로그래피’ 를 리뷰해 드립니다.



 햅틱(haptic) 기술은 사용자에게 실제감과 재미를 줄 수 있기 때문에 Wii 컨트롤러, 휴대폰 등에 활발히 적용되어 왔습니다. 적용된 전형적인 햅틱기술은 사용자의 살갗에 닿아있는 기계장치가 힘이나 진동을 만들어 내어 사용자에게 인위적인 감각을 만들어내는 방식이었습니다. 이번에 소개된 ‘만질 수 있는 홀로그래피’ 에는 멀리 떨어진 사용자의 살갗에 인위적인 힘을 만들어낼 수 있는 햅틱기술이 사용되었습니다.

사용자는 빗물이 손에 떨어지는 느낌을 받을 수 있다고 합니다. 참고로 Wii 컨트롤러를 이용해서 손의 위치를 인식하였다고 하네요


논문에 간단히 설명된 바에 의하면 초음파의 Acoustic Radiation Pressure 현상을 이용했다고 하는데, 이것은 초음파가 공기중으로 퍼져나가는 도중 물체를 만나면 초음파의 에너지가 압력으로 변하는 현상이라고 합니다. 그래서 사용자의 손에 ‘압력’ 과 같은 느낌을 줄 수 있다고 하구요. 아래 사진과 같은 장비를 사용했는데, 놀랍게도 만들어낼 수 있는 정확도가 20mm 까지 확보 되었다고 하네요 (위 사진에는 위쪽 부분에 붙어 있네요.) 응용할 수 있는 어플리케이션으로는 비디오 게임, 3D CAD 프로그램 등을 제안하였습니다.


제가 생각하는 이 기술의 가장 큰 장점은 사용자에게 아무 기기도 걸치지 않고 사용할 수 있도록하는 자유도를 주는 햅틱기술이라는 점 입니다. MS 의 Natal 과 같은 게임 인터페이스에 적용되면 더욱 멋질 것이라 생각하구요. 그럼 다음번에 재미난 이야기와 함께 다시 찾아뵙겠습니다.

참고자료
  1. 동경대 프로젝트 웹 페이지
  2. Stane1y 님 리뷰

저작자 표시

안녕하세요, 게스트블로거로 활동중인 김유민입니다. 오늘은 UIST'07 에 소개된 Gestures without libraries, toolkits or training: a $1 recognizer for user interface prototypes 을 리뷰해 드립니다.

근래 제스처 인터랙션이 주목받고 있습니다. Microsoft Surface 를 비롯하여 iPhone, 공간 마우스 등 제스처 인터랙션을 지원할 수 있는 기기의 사용이 늘고 있고 제스처 인터랙션 특유의 자연스러움과 높은 자유도가 긍정적으로 평가되고 있기 때문입니다. 제스처 인터랙션과 같이 사용자에게 새로운 소재에 대한 디자인의 경우 빠르고 반복적(iterative) 인 프로토타이핑을 통한 디자인 프로세스가 효과적일 수 있는데요 (왜 프로토타입을 만들까?), 그러나 제스처 인식기를 새로 만드는 데에는 까다로운 프로그래밍 스킬을 필요로 하기 때문에 빠른 프로토타이핑에 걸림돌이 될 수 있습니다. 그래서 이 연구는 디자이너들이 쉽고 간단하게 사용할 수 있는 제스처 인식방법을 제공해주고자 합니다.


위 그림에 보이는 16가지 제스처를 Flahs, JavaScript 등에 적용할 수 있도록 하는 라이브러리 및 예제를 아래 사이트에서 제공하고 있습니다.
http://depts.washington.edu/aimgroup/proj/dollar/
위 사이트에서 JavaScript 로 직접 해볼 수 있는 예제도 있으니 한번 체험해보시기 바랍니다 (Firefox 3.5 에서는 동작하지 않네요. Safari 에서는 동작합니다)


자세한 알고리즘 개발과정은 논문을 참고하시기 바랍니다. 이 연구는 빠른 프로토타이핑을 위한 방법을 제공하는데 있어 디자이너의 시각에서 접근해 보았다는 점, 그리고 개발된 라이브러리 자체도 높은 인식률을 보였다는데 의의를 둘 수 있을 것 같습니다. 하지만, 실제 디자인 프로세스에서 유용하게 쓰일 수 있을지에 대한 검증은 시간을 두고 좀 더 지켜봐야 할 듯 싶네요 ;)

그럼 다음 포스팅에서 재미난 UX 관련 이야기와 함께 찾아 뵐게요.

* 본 리뷰의 '디자이너'는 '인터랙션 디자이너' 의 맥락에서 사용하였습니다.
저작자 표시

안녕하세요, 게스트 블로거로 활동중인 김유민입니다. 오늘은 UIST '08 학회에서 소개된 논문 - Scratch input: creating large, inexpensive, unpowered and mobile finger input surfaces - 을 리뷰해드립니다.


본 논문의 목표는 사용자가 손가락으로 바닥이나 벽을 긁는 소리를 냈을 때 그것을 인식하여 새로운 기능을 만들어내는데 있습니다. 아직 사용성 면에서 접근할 만한 어플리케이션 수준의 완성도를 보여주진 못했지만, 새로운 정보가전 조작방법의 가능성을 잘 보여주고 있습니다. 아래 동영상에서 이 기술의 컨셉과 접근방법을 확인하실 수 있습니다:



 전자 청진기에서 많이 사용하는 소리 증폭 센서를 사용하여 벽을 긁는 소리를 녹음한뒤, 몇개의 제스처 중 패턴인식 결과가 가장 근접한 제스처를 골라내게 됩니다. 실험한 결과 여섯개의 제스처에 대해 90% 정도의 정확도를 보여주었다고 합니다. 자세한 내용은 저자 (Chris Harrison) 홈페이지의 논문을 참고하시기 바랍니다.

값싸고 폭넓게 응용될 수 있는 센서 기술을 제시하였다는데 의의가 있어 보입니다. 하지만, 가능한 인터랙션의 예시를 제시하는 수준을 넘어 실제 제품에 응용되었을 때 발생할 수 있는 문제점들 - 제스처 인터랙션의 직관성/메타포, 사용하고자 하는 기기를 파악하는데 생길 수 있는 애매함, 의도치 않은 조작의 가능성 등, 넘어야 할 산도 많은듯 합니다 ;)

 본 논문의 저자인 Chris Harrison 의 프로젝트 페이지도 방문해보시기 바랍니다. CMU HCII 소속 박사과정 연구원으로 학계에서 아주 활발히 활동하고 있는 모습을 보실 수 있습니다. 그럼 다음에  재미난 이야기와 함께 찾아뵐게요 :)
저작자 표시

안녕하세요, 게스트 블로거 김유민입니다. 오늘은 OctoPocus 라는 이름의 제스처 입력 도우미 시스템을 소개해 드립니다. 2008년 UIST 에 소개된 논문으로 근래 제스처 기반의 인터랙션이 많이 시도되고 있는 반면, 사용자에게는 제스처 명령들을 학습해야 하는 부담이 있다는 점을 문제로 정의하고 있습니다. 제 경험상으로도 파이어폭스의 마우스 제스쳐 add-on 과 같은 인터랙션을 쓰는데 있어서 제스처 학습은 가장 부담이 되는 이유 중 하나였습니다. 오늘 소개해드리는 연구에서는 사용자가 제스처 (stroke 기반의) 를 쉽게 학습해 나갈 수 있는 방법을 제시하고 있습니다.


기본 아이디어는 사용자의 입력에 맞춰서 가능한 제스처 목록과 예상경로를 시각화 해주는 것입니다. 왼쪽 그림은 사용자가 처음 클릭을 했을 때 가능한 제스처 목록을 보여주는 모습을, 오른쪽 그림에서는 사용자가 오른쪽 상단으로 마우스를 이동했을 때 "paste" 의 경로와는 크게 벗어났으므로 해당 목록을 보여주지 않고 있습니다. 아래 동영상에서 더 상세한 동작모습을 보실 수 있습니다.

OctoPocus from olivier bau on Vimeo.



제가 생각하는 본 연구의 장점은 1) 초보 사용자에게 제스처 입력을 학습해 나갈 수 있는 친절한 가이드를 제공해 준 점, 2) 동일한 인터페이스를 통해 능숙한 사용자에게도 효과적인 쓰임새를 제공했다는 점이라 생각합니다. 원문을 살펴보면 더 자세한 구현방법과 사용자 테스트를 보실 수 있습니다. 위 링크 접근이 여의치 않으신 분은 ym_kim@icu.ac.kr 로 메일 주시면 논문 보내드릴게요. 그럼 다음에도 재미난 이야기와 함께 찾아 뵙겠습니다 :)
저작자 표시

안녕하세요, 게스트 블로거 김유민입니다. 오늘은 User research tools (http://www.userresearch.co.uk/userresearchtools.htm) 에 소개된  일곱가지 사용자 연구 방법 (User Research Tool)에 대해 리뷰해 드립니다.

사용자 연구 (User research) 는 프로젝트 구성원들에게 사용자 특성에 대한 정보를 전달하고, 그것을 통해 대상이 되는 서비스 혹은 기기를 사용자의 실생활로 쉽게 응용해볼 수 있도록 하는데 목적을 두고 있습니다. 이러한 정보를 구성하기 위해서 다양한 연구방법이 사용되고 있는데요, 그 중 대표적인 연구방법들은 다음과 같습니다.

Diary studies

Diary studies

일지연구 (Diary study)

일상생활에서 사용자에게 카메라와 일정형식의 일지를 제공하고, 사용자 스스로 수행하는 일이나 생각, 감정, 그리고 접하게 되는 매체등을 기록하게 합니다. 장시간 연구를 상대적으로 값싸게 진행할 수 있고, 시각적인 정보 또한 쉽게 얻을 수 있습니다. 사용자 동기(해당사항을 일지에 기록하고자 하는)에 따라 얻을 수 있는 정보가 크게 달라진다는 단점이 있고, 이런 부족한 부분은 추후 인터뷰를 통해 보완 해야 할 것입니다.

사용자 관찰 (Participant observation)
사용자 관찰은 사용자의 동기, 요구사항, 태도, 사용패턴, 브랜드 소비행태, 과업, 의사결정 등을 이해하는데 좋은 정보를 제공합니다. 연구자들이 직접 사용자를 관찰하는 방법이기 때문에 사용자의 실생활에서 일어나는 있는 그대로의 모습을 알 수 있는 좋은 방법입니다. 이때, 연구자는 사용자의 행동에 영향을 주지 않는방법으로 사용자를 관찰해야 할 것입니다. 노트, 사진, 비디오 등의 매체로 기록을 남길 수 있으며, 이 기록들은 분석되어 추후 사용자 인터뷰에서 이야기를 이끌어내는 좋은 정보로 사용됩니다. 또한, 이런 시각기록들은 프로젝트 구성원 들에게 공유하기도 용이 할 것입니다.

Contextual in-depth interview

Contextual in-depth interview

사용자 심층 인터뷰 (Depth interviews in context)

포커스 그룹 등의 형식적인 환경에서 벗어나 인터뷰를 실시하면 사용자가 좀 더 편하게 인터뷰에 응할 수 있습니다. 특히, 사용자의 집이나 사무실에서 인터뷰를 진행하게 되면 더욱 효과적일 수 있는데, 그 이유는 사용자가 자신이 설명하고자 하는 바를 직접 보여줄 수 있기 때문입니다.

관계도 조사 (Network mapping)
이 방법은 사람들이 어떻게 사회적 (그리고 전문적인)  네트워크와 관계를 맺고 소통하는지에 대한 대략적인 모습을 시각적인 정보로 보여줍니다. Facebook 이나 LinkedIn 는 사람들로 하여금 새로운 관계를 맺고 기존의 관계를 돈독히 할 수 있게 해주는 서비스인데, 이런 서비스들을 이용하면 쉽게 유용한 관계도를 그려볼 수도 있을 것입니다.

가택 및 일터 조사 (Home and workplace tours)
이 방법은 사용자의 집이나 일터를 돌아보며, 제공된 기기가 어디서 사용되고 있고 수납되고 있는지 등을 살펴보는 방법입니다. 이 과정을 통해 사용자가 제공된 기기를 실제로 어떻게 사용하고 있는지, 어떻게 변형을 시키는지, 혹은 어떤 결과물을 만들어냈는지 등을 알아낼 수 있습니다. 자료를 모으고 분석하는데 시간이 많이 소요되는 방법이긴 하지만, 사용자들로 부터 뜻밖의 중요한 문제점/해결책을 얻어낼 수 있는 좋은 사용자 조사 방법입니다. 

부가조사 (Secondary research)
본 조사에 들어가기 전에 사용자에 대해 인터넷이나 책을 이용해 폭넓게 사전조사를 해보는 것은, 그들의 경제적, 사회적, 그리고 문화적 배경을 아는데 도움을 줄 수 있습니다.

문자메시지 조사 (SMS studies)
사용자들에게 휴대폰을 제공하고, 연구자는 그들에게 문자메시지를 보내어 설문에 답하게 하거나 사진을 찍도록 하는 방법입니다. 이 방법은 사용자들이 언제, 어디서, 어떻게 행동하는지에 대한 모델을 구성하는데 도움을 주는데, 특히 일시적이고 공간적인 모델을 구성할 수 있다는 장점을 지니고 있습니다. 예를 들어, 특정 기술과 브랜드에 대한 경험을 폭넓게 조사하려고 할 때, 연구자들은 문자메시지 조사방법을 통해 상대적으로 적은 시간과 비용을 들여 다수의 사용자들에 대해 조사를 실시할 수 있습니다. 그리고 사용자들을 성실히 조사에 응할 수 있도록 동기부여 하는 것도 중요한 이슈 중 하나 입니다.

지금까지 다양한 사용자 연구방법들에 대해 소개해 드렸는데요, 각 방법들의 형태와 목적이 매우 다양하였습니다. 성공적인 사용자 연구를 위해서는 대상이 되는 사용자와 연구목적/상황을 명확히 한 뒤, 이에 따른 각 사용자 연구방법들의 장단점을 잘 이해하고 선택하는 슬기가 필요하겠네요. 다음번에도 재미난 UX 관련 정보와 함께 찾아 뵐께요 :)

덧붙여,
* participants 를 문맥상 참여자가 아닌 사용자로 해석하였습니다.
** 사용된 사진은 http://www.userresearch.co.uk/userresearchtools.htm 을 참고하였습니다.







저작자 표시

안녕하세요, 게스트 블로거 김유민입니다. 오늘은 HCI 관련 학회중 가장 영향력 있는 학회인 CHI 2009 에 소개된 재미난 연구 두가지를 간략한 설명과 함께 소개해 드립니다. 워낙 큰 학회라 아직 보지못한 연구들이 많이 있는데, 재미난 연구를 발견하는대로 다음편을 계속해서 올리도록 하겠습니다 :)

동적으로 변해 만질 수 있는 버튼을 만들어내는 디스플레이
(Providing Dynamically Changeable Physical Buttons on a Visual Display)

계산기나 휴대폰의 키패드와 같이 물리적인 버튼 (physical button) 을 포함하는 기기들은 만질 수 있다는 점에서 사용자에게 직관적이고 쉬운 인터랙션을 제공하고 있습니다. 이에 반해 터치스크린에 의해 만들어지는 소프트 버튼들은 덜 직관적이고 오류도 많이 만들어 냅니다. 하지만 터치스크린을 사용한 기기들은 넓은 디스플레이와 다양한 UI 를 제공해줄 수 있다는 점이 큰 장점입니다. 요즘 아이폰이나 T-옴니아와 같이 터치스크린 기반 장치들이 대세를 이루는 것을 봐도 잘 알 수 있을 것입니다. 본 연구는 터치스크린의 장점과 물리적인 버튼의 장점을 포함하는 UI 를 개발하는데 목적을 두고 있습니다.


하드웨어는 레이어 사이에 압축공기를 넣을 수 있는 기기와 버튼 형태를 만들 수 있는 틀, 그리고 고무재질의 덮개를 씌워 버튼의 물리적인 형태를 만들어내는 구조입니다. 압축공기의 유무에 따라 덮개의 모양이 변하게 되고, 사용자에게 적절한 피드백을 주겠다는 의도로 보입니다.


위 그림과 같은 버튼/디스플레이가 현금인출기의 터치스크린에 적용된다면 좀더 직관적으로 (그리고 즐겁게) 현금을 뽑을 수 있을 것 같네요 :)



노인 운전자를 위한 증강현실이 적용된 자동차 앞유리 네비게이션
(Simulated augmented reality windshield display as a cognitive mapping aid for elder driver navigation)

기존 네비게이션 장치는 운전자의 시선을 분산시키는 경향이 있습니다. 전방을 바라봐야 할 운전자가 핸들옆에 붙어있는 네비게이션의 도로정보를 보게 될 때, 사용자의 시선은 아래로 향하게 되고 이는 교통사고로 이어지기도 합니다. 노인들의 경우는 일반인에 비해 더욱 위험한 상황이구요. 이를 해결하기 위해 제안된 방법은 자동차 앞유리에 지도를 덧붙여 보여주는 것입니다. 시뮬레이션 환경을 갖추어 두고 노인들을 대상으로 실험한 결과, 기존 네비게이션에 비해 제안된 방법은 확연히 노인들에게 도로정보를 잘 전달해주고 있었고, 사고위험도 줄여 주었다고 합니다.



그리고 저작권 문제 때문에 해당 논문은 공개 하지 못했습니다. 학교나 연구소에 계신분들은 아마 글 내용중 영문제목에 달린 링크 따라 가시면 논문과 동영상 확인하실 수 있구요, 따로 필요하신 분은 ym_kim@icu.ac.kr 로 메일 보내주세요. 그럼 다음에도 재미난 UX 관련 연구와 함께 찾아뵙겠습니다 :)

저작자 표시

안녕하세요, 게스트 블로거 김유민입니다. 며칠전에 UIST 학회 08년도 논문집에서 발견한 재미난 기술을 한가지 소개해 드릴려고 합니다. 

본 논문 ("Extending 2D Object Arrangement with Pressure-Sensitive Layering Cues") 에서는 소프트웨어에서 레이어들을 위아래로 정돈하는 방법이 꽤나 불편하다는 점을 문제점으로 제기하고 있습니다. 기존에는 단순히 최근에 선택된 레이어를 가장 앞으로 가져오거나 (e.g. 윈도우 창이 여러개 겹쳤을 때 쓰는 방법) 마우스 오른쪽 버튼을 눌러서 '맨 앞으로 가져오기' 혹은 '맨 뒤로 보내기' 와 같은 기능을 수동으로 선택하는 방법 (e.g. 포토샵) 등이 있었는데 자유도와 직관성 면에서 개선할 점이 있을 것으로 보았습니다.



그래서 논문에서 제안하는 방법은 사람들이 진짜 종이들을 위아래로 정돈할 때의 손가락 움직임을 터치 스크린에 떠 있는 레이어들을 정돈하는 메타포로 사용하는 것입니다. 터치스크린을 사용할 때,  사용자들이 기존 종이를 만진다는 기분으로 스크린을 이리저리 누르면, 사용자가 의도한대로 레이어들이 위아래로 정돈되도록 하는 방식입니다.



사람들은 종이를 위아래로 정돈할 때 위 그림에서 볼 수 있는 것처럼 특정한 손가락 움직임을 보이게 됩니다. 그리고 이러한 움직임은 바닥면으로 특정한 압력패턴의 형태를 보이게 되고 본 시스템에서는 그 패턴을 인식해 사용자에게 선택한 레이어를 위아래로 위치할 수 있게 합니다. 아래 그림과 동영상에서 그 일련의 과정을 보여주고 있습니다.
 
 
저는 이 논문이 레이어를 정돈하는 문제에 대해 실생활의 메타포를 활용해 사용자에게 직관적이고 친절한 해결책을 제시하고 있다 생각합니다. 인터랙션 디자인 분야에 있어서도 이와 같이 사용자 실생활과의 연속성을 고려해 문제를 풀어나가는 슬기가 필요할 것 같네요. 

그럼 다음에도 재미난 UX 이야기와 함께 찾아뵙겠습니다 :)

저작자 표시

안녕하세요, 게스트 블로거 김유민입니다. 오늘은 Smashing Magazine 에서 소개한 2009년 모바일 웹 트렌드를 리뷰해 드립니다. 본 리뷰는 모바일 기기들의 웹 접근성을 높일 수 있는 방법에 대한 현재의 트렌드, 극복해야 할 사항 및 고려할 사항, 그리고 예제 등의 내용을 포함하고 있습니다.

모바일 웹 디자인 트렌드 2009

1. 간단함
모바일 환경은 데스크탑 환경에 비해 한 화면에 보여줄 수 있는 내용이 제한되고 (작은 스크린 크기 때문에) 인터넷 연결이 원활하지 않습니다. 그래서 중요한 내용과 기능을 압축해서 간단하게 보여줄 수 있는 방법이 사용되고 있습니다.

Digg 의 모바일 웹 사이트 버전


2. 적절한 공백의 사용
웹 디자인에서 공백은 보여줄 정보를 조직화 하고 그 흐름을 조절하는데 중요한 요소로 활용됩니다. 스크린 크기가 작아진 모바일 환경에서는 웹 사이트를 잘 정돈하여 사용자에게 보여주는 것이 더욱 중요하다고 합니다.

3. 이미지 사용 줄이기
원활한 인터넷 연결이 보장되는 데스크탑 환경과는 달리 모바일 웹 사용자들은 느린 속도 때문에 과도한 이미지 사용을 선호하지 않습니다.

4. 서브 도메인의 사용
모바일 전용 웹 사이트의 도메인을 추가하기 위한 방법으로 크게 독립적인 도메인 사용 (예. http://me2day.mobi)과 서브도메인 사용 (http://m.me2day.net) 두가지가 있습니다. 보통 사용자의 혼동을 줄이기 위해 기존 웹 사이트의 도메인의 서브 도메인을 사용한다고 합니다. me2day 는 서브도메인을 사용하고 있네요 :) 

5. 우선순위가 높은 컨텐츠 중심으로
한번에 보여줄 수 있는 정보가 제한되기 때문에 모바일 웹 사이트들은 우선순위가 높은 컨텐츠 중심으로 내용을 구성합니다. 그래서 배너광고와 같은 부가적인 컨텐츠는 보통 내용으로 구성되지 않으며, 주 컨텐츠 중에서도 중심 내용을 간추려 보여주게 됩니다. 그 예로, 아래 두 사이트 (TheOnion 의 일반/모바일 용 웹 사이트) 를 비교해보시기 바랍니다.

- TheOnion.com
- Mobile version of The Onion

모바일 웹 디자인의 극복해야 할 사항들

모바일 웹 디자인 분야에서 도전해볼 만한 과제로 제시한 다섯가지 문제를 소개합니다.

1. 다양한 스크린 크기
모바일 기기의 스크린 크기문제는 데스크탑  모니터 크기문제와는 또 다른 방법이 필요합니다. 모바일 기기의 스크린 크기는 아래 그래프를 보면 알 수 있듯이 다양한 크기로 존재하고, 또 항상 변하고 있습니다. 이 스크린 크기 변화에 대한 추가내용은 "Mobile screen size trends" 를 참고하시기 바랍니다.

연도별 모바일 기기의 스크린 크기 변화


2. 새로운 디자인에 대한 사용자의 이해부족
많은 디자이너들이 직면하고 있는 문제로 새로운 디자인에 대한 사용자의 이해부족을 들 수 있습니다. 모바일 웹 브라우징은 데스크탑과 꽤나 다른 환경이기 때문에 새로운 인터랙션의 도입이 필요함에도 불구하고, 무턱대고 도입할 수 없는 상황입니다. 그 이유로 사용자가 모바일 웹 브라우징 환경을 데스크탑 환경의 연속이라 인식하는 경향을 들 수 있겠습니다. 디자이너들에게 사용자의 기존 경향을 최대한 보존하며 새로운 인터랙션을 창조하는 지혜가 필요할 것입니다.

3. 기술의 빠른 변화
모바일 기기에는 다양한 기술이 빠르게 도입되고 있습니다. 좋은 예로, 오페라 브라우저에서 활용되고 있는, 기울기 센서를 활용해 화면을 위와 옆으로 기울일 수 있는 기술을 들 수 있겠습니다. 디자이너들은 빠르게 변화하는 기술에 맞서 부지런히 새로운 트렌드를 만들어 나가야 할 것입니다. 

그리고 극복해야 할 사항 4,5 번 내용으로 "테스트 환경"과 "어떤것이 가장 중요한 내용인지를 결정하기" 가 제시되고 있습니다. 자세한 내용은 원문(2009년 모바일 웹 트렌드) 을 참고하시기 바랍니다.

모바일 웹 디자인에서 고려해야 할 사항들
지금까지 현재의 모바일 웹 디자인 트렌드와 극복해야 할 사항에 대해 살펴보았습니다. 이번에는 모바일 웹 디자인에 있어 고려해야 할 아홉가지 세부지침을 소개합니다.

1. 깔끔한 Markup 구현하기
2. CSS 를 활용한 내용/디자인의 분리하기
3. ALT 태그의 사용함으로 이미지를 볼 수 없는 사용자 배려하기
4. Form filed 라벨링 하기
5. Headings 을 사용함으로 사용자가 웹 페이지의 흐름을 이해할 수 있도록 돕기
6. Floats 사용을 자제하기
7. Margin 과 Padding 을 최대한 줄이기
8. Navigation 메뉴를 가능한 꼭 필요한 것으로만 구성하기
9. 사용자가 내용을 쉽게 읽을 수 있도록 배경/글자 색을 결정하기

이 밖에도 SitepointDesigning for the Mobile Web  에서 모바일 웹 디자인에 대한 추가적인 지침을 소개하고 있으니 참고하시기 바랍니다.

모바일 웹 예제들

마지막으로 아래 링크에 대표 모바일 웹 사이트 링크와 스크린 샷들을 첨부합니다. 이번 리뷰가 모바일 웹 디자인을 이해하는데 조금이나마 도움이 되었길 바라겠습니다 :) 그럼, 다음번에도 UX의 재미난 주제와 함께 찾아 뵐께요.

사이트 보기


저작자 표시

안녕하세요, 게스트 블로거로 활동중인 김유민 입니다. 오늘은 2004년 장선연 연구원님이 디지털미디어연구소 에서 연구 했었던 "Fish Tank" 를 소개해 드립니다.



보통 집에서 어항은 단순 관상용으로 많이 쓰이고 있습니다. 그래서 인지 어항의 물고기들은 개나 고양이와는 달리 주인과 밀접한 관계를 만들어내지 못하고 있는것 같구요. 
Fish Tank 는 디지털 음악 기술을 이용해 물고기와 사람들간의 인터랙션을 풍성하게 만들어 주는 어항입니다.



 이 시스템은 크게 색깔 인식을  통해서 물고기들의 위치를 추적하는 모듈, 그리고 각 상황에 알맞은 음악을 생성해내는 모듈로 이루어져 있습니다. 그리고 어항에 들어있는 물고기의 색깔과 위치에 따라 각기 다른 악기와 가락을 만들어 내도록 구현되었습니다. 예를 들어, 빨간 물고기는 피아노 소리를 내며, 높낮이에 의해 음높이가, 좌우 위치에 따라 특정 리듬을 설정하게 됩니다. 위 동영상을 보면 고도의 자동 음악생성 기술을 적용하지 않았음에도 재미난 음악을 만들어내는 물고기들을 볼 수 있습니다.

이 프로젝트에는 어떤 의의가 있을까요?
Fish Tank를 통해 사용자와 물고기간에는 음악이라는 새로운 커뮤니케이션 채널이 생겨났다고 볼 수 있을 것 같습니다. 주인은 책을 보다가도 어항에서 들리는 음악소리를 통해 어항에서 어떤 변화가 일어나고 있는지 알 수도 있고, 주인이 먹이를 줄 때 들리는 물고기의 특이한 반응을 인지할 수도 있습니다. 기존에 알 수 없었던 물고기들의 다양한 반응들을 듣고 느끼며 사람들은 물고기에게 좀 더 애완동물 같다는 생각을, 혹은 누군가와 함께 하고 있다는 생각을 할 수 있지 않을까요?

그럼 다음에도 재미난 연구들과 함께 찾아뵙겠습니다~
저작자 표시

안녕하세요, 게스트 블로거로 활동중인 김유민 입니다. 오늘은 디지털미디어연구소 에서 2007년에 연구했었고 2008년 한국 HCI 학회 Creative Award 에 전시됐었던 박승순 석사 연구원의 "Emoti-pot" 에 대해 소개해 드립니다.


사무실 책상 옆에 놓여있는 화분과 몇 그루의 식물들. 그들은 제게 단순한 장식 이상의 존재인 것 같습니다. 가끔 물을 주며 대화를 나누기도 하고, 잘 지내고 있는지 이파리를 쓰다듬어 주기도 합니다. 특히, 정말 해결할 수 없을 것 같은 버그들을 해결해준 은인? 이기도 합니다. 최강의 디버깅 도구 BEAR 처럼요 ;)

이런 사랑스러운 식물들을 키우다 보면, 쓰다듬어 주면 웃기도 하고, 물이 고프면 보채기도 하는 그런 식물을 상상해 보게 됩니다. Emoti-pot 프로젝트는 우리가 상상하듯 자신의 감정표현에 능동적인 식물을 만들기 위해 시작되었습니다.

더보기



저작자 표시

안녕하세요. 게스트 블로거로 활동중인 김유민입니다. 오늘은 저희 연구소에서 2007년에 연구했었던 "K-Menu" 라는 모바일 기기용 메뉴 인터페이스에 대해 소개해 드립니다.

보통의 메뉴시스템은 Tree 구조나 디렉토리 기반으로 되어있습니다. 예를 들면, 윈도우에서는 "시작" 을 누르면 여러가지 목록이 나오고, 그 다음 "프로그램" 을 누르면 선택할 수 있는 프로그램 리스트가 나오게 됩니다. 그런데 "계산기" 를 실행시키기 위해 "시작"->"프로그램"->"보조프로그램"->"계산기" 를 단계적으로 눌러야 한다는데 불편함을 느끼시진 않았나요?  특히 모바일 기기 환경에서는 정보를 보여줄 수 있는 디스플레이의 크기가 제한되어있기 때문에 Tree 구조 기반의 메뉴시스템은 사용자에게 불폄함을 주고 있습니다.

기존 Tree 메뉴의 또 한가지 문제점은 사용자는 사용하고자 하는 어플리케이션의 분류를 예측해야 한다는 점입니다. 한 어플리케이션을 분류할 수 있는 방법은 매우 다양해서 사용자는 자주 실수를 저지르곤 합니다. 제 휴대폰을 예로 들면, "전자사전" 이라는 어플리케이션은 "다이어리" 란 범주 아래 위치하고 있지만 저는 빈번히 "편리한 기능" 의 범주로 들어가 전자사전 기능을 찾곤합니다.

사용자 삽입 이미지

자세한내용 ..



참고자료
  1. "K-menu: a keyword-based dynamic menu interface for small computers", CHI 2007 (extended abstracts)
  2. 디지털미디어연구소 블로그



안녕하세요, 게스트 블로거 김유민 입니다.

세계적으로 영향력있는 학회중 하나인 Ubicomp2008 이 9월 21일 부터 24일까지 4일간 우리나라 코엑스에서 열렸습니다. Ubicomp 학회는 유비쿼터스 컴퓨팅 (Ubiquitous Computing) 과 관련된 다양한 연구들이 발표되고 논의되는 자리로 올해 10번째를 맞이 했습니다. 올해는 MIT, Georgia Tech, CMU, UC Berkeley, Intel 등 해외 대학 및 기관들과, 우리나라에서는 저희 연구소(디지털미디어연구소) 를 비롯해 성균관대학교, GIST, 연세대학교, ETRI 등이 참여하였습니다.

230920081646
Ubicomp2008 학회 진행 중 한 장면

수십편의 논문 및 포스터가 발표가 되었는데, 그 중 인상적인 연구 몇편을 소개합니다 :)
(UX 관점에서 이야기 해볼 만한 3가지 어플리케이션을 선정하셨습니다)

- 똑똑한 바닥 시스템
- Spyn: 뜨개질과 스토리텔링
- 만화스타일의 강조 효과를 프레젠테이션에 추가하기

자세한 내용



안녕하세요? 이번에 새로운 게스트 블로거로 활동하게 된 김유민입니다.
저는 현재 디지털미디어연구소에서 HCI 를 공부하고 있습니다. 기발하고 쓸모있는 기기를 만드는 것을 목표로 오늘도 열심히 공부하고 있습니다. UX 라는 새로운 분야에 겁도 많이 나지만, 열심히 하겠습니다 :)




조금 더 자세한 이야기