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