Spatial Navigation을 활용한 웹 앱 개발

프로젝트 배경

• 현재 브라우저에서 탭키를 입력하여 웹페이지 내 콘텐츠를 선택하는 것이 일반적인 콘텐츠 네비게이션 방법임
• TV, 차량 기기 등의 입력방식으로 4방향(top, bottom, left, right)키가 많이 사용되고 있음(대표적인 예: TV 리모콘)
• 웹이 활용되는 영역이 TV, 차량 등으로 확대되면서 4방향(top, bottom, left, right)의 콘텐츠 네비게이션, 즉 Spatial Navigation 기능이 필요해짐
• 최근 그리드 형태의 웹 페이지 디자인이 많이 활용되고 있는데, 이 경우에도 Spatial Navigation 방법이 유용하게사용될 수 있음

프로젝트 목표

• Spatial Navigation 알고리즘을 설계하여 구현하고 이 장점을 잘 살릴 수 있는 웹 애플리케이션 설계 및 개발 (HTML/CSS/JS)

Spatial Navigation

Chrome 동작

• "--enable-spatial-navigation"로 Chrome 브라우저 실행

활용 사례

• YouTube on TV: https://www.youtube.com/tv
• Pinterest: https://www.pinterest.co.kr/explore/color-combinations/?lp=true

참고

• Spatial Navigation in Android TV: https://developer.android.com/training/tv/start/navigation.html
• Spatial Navigation in Apple TV: https://developer.apple.com/library/content/documentation/General/Conceptual/AppleTV_PG/WorkingwiththeAppleTVRemote.html
• React spatial navigation: https://github.com/SatadruBhattacharjee/react-spatial-tv-navigation