스마트폰 때문에 손가락과 손목이  아픈 적 있으신가요?

채팅, 통화, 음악, 영상, 심지어 웹툰이나 책읽기까지! 스마트폰으로 못하는 것이 없는 시대입니다. 아침부터 저녁까지 손에서 놓지 않는 스마트폰 때문에 생기는 증상도 있는데요. 바로 손목 터널증후군입니다. 스마트폰을 할 때는 손가락과 손목이 오랫동안 꺾여 있어서 마치 굳은 것처럼 느껴지는 경우가 많죠. 건강보험심사평가원에 의하면 스마트폰 보급률이 높은 우리나라의 최근 5년간 스마트폰 관련 질병 진료비는 무려 2조에 달한다고 합니다.

그래서 이번 포스팅에서는 고생했던 손에게 휴식을 주는 비주얼캠프의 데모앱, EyeScroll과 SeeSoBook의 작동 원리를 소개하고자 합니다. 이 데모앱들의 기본 원리만 이해한다면 SeeSo SDK로 누구나 손쉽게 눈으로 스크롤링하고 클릭하는 앱을 개발 할 수 있습니다.

(혹시 아직 데모앱을 체험해보지 못하셨다 이곳에서 확인하세요!)

 

1. 아이 스크롤링(Eye Scrolling)

 

아이 스크롤링은  시선의 움직임을 이용하여 화면을 위/아래로 스크롤링하는 기능을 가지고 있습니다. 실제로 오프라인 전시회 참관객들에게도 가장 반응이 좋은 앱입니다.

 

 

재미있게도 이 데모앱을 처음 체험하시는 분들은 대부분 얼굴을 위아래로 움직이는데요.  손 대신 얼굴을 움직여야 한다면 편리한 기술이 아니겠죠?  그냥 위 동영상처럼 얼굴을 고정한 채  ‘시선'(눈동자)만 위 아래로 움직이면 손 하나 까딱하지 않고 스마트폰의 화면이 스크롤링됩니다.

그럼 이 앱은 어떤 원리로 작동하는 걸까요?

세부 동작 방법을 이해하기 위해서는 SeeSo SDK가 생성하는 시선좌표값에 대해 먼저 알아야 합니다.

SeeSo SDK의 1차 시선데이터 좌표값

SeeSo SDK는 스마트폰이나 태블릿 전면 카메라에 찍히는 사용자의 얼굴이미지를 실시간으로 처리하여 화면 내 시선 좌표값(x,y)으로 변환해주는 소프트웨어 입니다. 보통 최신  스마트폰에서 SDK는 초당 25-30장의 사진을 찍습니다. 그리고 1장의 이미지를 1개의 시선 좌표값으로 변환하는데요. 이 좌표값이 시선추적 기능을 구현하기 위해 가장 기초가 되는 1차데이터라고 생각하시면 됩니다. Raw data라고도 불리죠.

아이스크롤링앱은 사용자의 시선 좌표값이 화면의 특정영역(AOI: Area of Interest)에서 인지되면 움직이도록 개발되었습니다.

앱을 간단히 살펴보면 아래 사진과 같이 구성되어 있습니다. 스크롤링 액션을 취하게 만들고 싶은 AOI를 미리 설정하고 시선좌표값이 AOI 범위에 들어올 때, 움직임이 발생하도록 명령을 내리는 구조입니다.

 

잠깐, 그런데 시선이 찍히는 위치는 어떻게 값으로 나오고 특정영역의 넓이는 어떻게 알지?

시선 좌표값과 AOI 넓이 계산

SeeSo SDK에는 아래 그림과 같이 모바일 디바이스에 대해 SDK가 인식하는  화면의 x축과 y축이 약속되어 있습니다.  이 축들을 기반으로 시선의 위치가  x,y 좌표값으로 표현됩니다. AOI도 마찬가지로 설정하고자 하는 범위의 꼭짓점을 좌표값으로 변환하여 계산하면 영역을 표현할 수 있게 됩니다.

SeeSo SDK가 인지하는 디바이스 화면 상의 x,y축

 

이제 여기까지 이해가 되었다면 아이 스크롤링 업/다운 기능을 만들 수 있습니다.

 

위로 스크롤링 할 때,

 

아래로 스크롤링 할 때,

 

스크롤링 액션을 위해 설정하는 AOI는 얼마든지 자유롭게 변경할 수 있는 값입니다. 위/아래가 아니라 좌/우 로 설정하고 스크롤링을 할 수도 있습니다. 화면이 스크롤링 되는 속도도 스크롤링하고자 하는 앱 콘텐츠의 유형에 따라 다르게 설정할 수 있습니다.

더 나아가서는 AOI 영역을 세분화하여 세부 영역별로 가속도를  다르게 주거나, 사용자가 자유롭게 조정할 수 있도록 AOI나 속도를 관리하는 별도의 UI를 만들어 제공 할 수도 있습니다. 아이 스크롤링에 대한 기본적인 이해만 있다면 얼마든지 더욱 편리하고, 간편한 형태로 기능으로 업그레이드가 가능합니다.

 

2. 시소 북 (SeeSo Book) – Eye Click

 

 

시소 북은 전자책을 읽는 사용자의 시선패턴을 분석하다가 만들게 된 아이 페이지 터닝 앱입니다.  아이클릭( Eye Click) 기능이 적용되었습니다. 스마트폰으로 책을 읽으면 보통은 손으로 화면 아래나 오른쪽 부근을 터치해야 다음페이지로 넘어가지만, 시소 북은 손 터치 없이 미리 설정된 AOI영역에 시선이 고정되어 일정시간동안 머무는 것 만으로도 페이지가 넘어가도록 개발되었습니다.

 

여기서 ‘시선 고정’은 Fixation이라는 시선추적 용어로 시선 좌표값이 특정 부분에 1000ms이상 고정되어 있는 경우를 말합니다. 1차 데이터를 가공한 2차데이터지만, SeeSo에서 API로 제공하고 있기 때문에 얼마든지 손쉽게 활용하실 수 있습니다.

 

시선 응시값 Fixation

Fixation값은 시선좌표값과 어떻게 다른거지?

시선 좌표값은 단어 그대로 시선의 위치를 나타내는 ‘좌표’이고 Fixation값은 시선의 주체인 사용자가 특정부분을 응시하는  ‘행동’이라고 볼 수 있습니다. 그래서 시선좌표값은 사용자가 큰 의미없이 화면을 이리저리 둘러볼 때도 계속해서 생성됩니다. Fixation값은 사용자의  행동양식을 알려주기 때문에 사용자가 관심이 생겼다거나, 꼼꼼히 보고 싶은 부분이라던가, 아니면 이 부분을 응시함으로서 어떤 액션을 취하게 만들고 싶다는 등의 의미를 내포하고 있는 데이터입니다. 따라서 Fixation값은 시선추적 인터페이스를 개발하거나 시선 분석에 있어 중요한 지표로 사용됩니다.

 

AOI영역에서 Fixation값이 일정 시간동안(Duration) 생성된다면 다음페이지로 넘어간다

 

 

시소 북앱의 작동 프로세스를 찬찬히 살펴보면 위 그림과 같이 3가지 단계로 나눌 수 있습니다.

  1. 시선 좌표값(Gaze Coordinate)이 AOI 영역에 머무는지 확인한다.
  2. 시선 좌표값이 AOI(NEXT)영역에 고정되어 Fixation값이 되었는지 확인한다.
  3. Fixation값이 2초(Fixation Duration)동안 발생하면 페이지를 넘긴다.

위 그림의 AOI와 Fixation Duration값은 커스터마이징 할 수 있는 값들입니다. 클릭을 유도하는 버튼의 위치에 따라, 클릭으로 인식하고 싶은 응시시간에 따라 자유롭게 조정하실 수 있습니다.

페이지를 넘기는 방법에 대해서는 시소 북의 방식만이 정답이 아니기 때문에 사용자 테스트(User Testing)을 거쳐 디자인과 AOI, 그리고 Fixation Duration을 수정하면 지금보다 더 향상된 사용자 경험(User Experience)을 제공할 수 있습니다. 또한 인공지능을 통해 개인의 행동패턴을 학습시킨다면, 향후에는  각 개인의 책 읽는 특성이나 환경에 따라 다르게 작동하는 개인화된 인터페이스로도 발전시킬 수 있습니다.

 

그런데, 왜 클릭을 ‘눈 깜박임’이 아니라 ‘시선 응시 시간(Fixation Duration)’으로 하는거지?

많은 분들이 시선으로 클릭 한다고 했을 때 가장 먼저 ‘눈 깜박임’을 떠올립니다. 눈을 이용한 가장 직관적인 시그널이기 때문이죠. 그러나 실제로 전자책 페이지를 넘기기 위해 의도적인 눈 깜박임을 하는 것은 생각만큼 쉽지 않습니다. 심지어 책을 읽는데 방해가 됩니다. 책 페이지를 넘기기 위해 눈을 감았다 떴다를 반복한다면 책 읽다가 머리가 어지러울 겁니다. 비주얼캠프는 시소 북을 개발하기 위해 여러번의 가설과 검증의 실험을 거쳤습니다.  그 결과로,  AOI에서 Fixation Duration을 이용하여 클릭하는 인터페이스를 적용했습니다.

이와 같이,  시선추적기능을 제대로 활용하기 위해서는 시선추적기술과 SDK에 대한 올바른 이해 뿐 아니라 사용자의 환경에 맞춘 테스트가 필수적입니다. 아무래도 생소한 방식이다보니 터치나 음성인식과 같은 현재의 인터페이스보다는 적용과 적응에 시간이 좀 걸릴 수 있지만, 시선 인터페이스는 그 어떤 방법보다  편리하고 혁신적인 소통수단이 될 수 있습니다.

특히, 손 사용과 언어 사용에 어려움이 있던 사람들에게는 새로운 세상이 열리게 됩니다. 눈으로 만나는 세상에서는 더 많은 사람들이 함께 소통하고, 함께 재미있는 콘텐츠를 즐길 수 있게 될 것입니다.

 

눈으로 만나는 새로운 세상 만들어보기 –SeeSo SDK Console

SeeSo SDK Console/Pricing에 대해 알아보기 –SeeSo SDK 국문 가이드

 

문의하기