Skip to content

8. 키보드 입력을 통해 List UI 이동 컴포넌트 제작

heesuk kang edited this page Jun 20, 2019 · 1 revision

빅스크린(예. 스마트TV) 에서 키보드 입력을 통해 List UI 를 선택적으로 동작되는 인터렉션 컴포넌트 구현 다양한 요구사항에 맞춰 하나의 컴포넌트로 제공

[필수 구현 사항]

키보드 입력으로 아래 정의된 동작 구현

  • A Type : 캐러셀 - 선택 영역 안으로 컨텐츠가 이동되는 형태 (*선택 영역이란? 사용자가 item 을 선택 하기 위한 영역)

    • 기본 구조


    • 예시
      • 키보드 우 방향키 입력시


      • 남은 컨텐츠가 한 화면에 노출 가능한 컨텐츠 미만일때 - 키보드 우 방향키 입력시



      • 선택 영역은 고정 상태에서 컨텐츠가 이동, 다만 리스트에서 남은 컨텐츠가 한 화면에 노출 가능한 컨텐츠 미만일때 선택 영역이 이동된다. 반대로 키보드 좌 방향키 입력에 대한 대응도 필요. ​

  • B Type : 리스트 - 선택 영역이 이동되는 형태

    • 기본 구조


    • 예시
      • 키보드 우 방향키 입력시


      • 키보드 하 방향키 입력시


      • Content_6 위치에서 하 방향키 재 입력시


      • List UI 고정 상태에서 선택 영역이 이동

        • 더 많은 컨텐츠를 보기 위해 하단으로 이동시 List UI 가 상단으로 이동하며, 화면에 노출되지 않았던 Content_10 으로​ 선택 영역이 이동된다. 키보드 상/하/좌/우 방향키 입력에 대한 대응도 필요. ​

[구현시 우대사항]

  • 제안된 필수 사항 이외의 UX 에 대한 고민 및 구현

[심사기준]

  • 위 필수 사항의 두가지 type (A/B) 동작 여부 ​ - A/B type 의 초기화 기준
  • 유동적인 브라우저 사이즈 대응
  • 컴포넌트의 인터페이스를 함께 고려 했는지 여부
  • 컨텐츠 이동 또는 선택영역 이동시 환경에 따른 GPU 가속 이용 여부

[참고자료]

  • 스마트TV 유튜브 / 넷플릭스
You can’t perform that action at this time.