스마트TV 실습 기본형 Hands Frame의 구현 (4회차)

상세페이지

  • HOME > 리뷰 & 하우투

스마트TV 실습 기본형 Hands Frame의 구현 (4회차)



Smart TV 05. 실습 기본형 Hands Frame의 구현 이달에는 천혜림 연구원이 간단한 조회형 애플리케이션 ‘Hands Frame’을 실제 구현하고 관련 기능을 소개한다. Hands Frame 애플리케이션은 핸드스튜디오의 핵심 가치, 기업 문화 활동 등을 담은 VOD를 조회할 수 있는 갤러리 앱. 구조는 간단하지만 스마트TV 애플리케이션에서 가장 중요한 화면 레이어(scene)나 포커스(focus), 플레이어(player) 기능을 포함한다.


핸드스튜디오
2010년 2월 1일 창업한 4년 차
스마트TV 콘텐츠 및 서비스 제작 스튜디오.
153개 국가의 200여 개 스마트폰, 스마트패드,
스마트TV 앱 개발 및 서비스.
2012년 ‘TV 앱 스타트업 어워드’ 대상.
‘대한민국 TV앱 이노베이션 대상’ 최우수상 및 장려상.


Hands Frame 애플리케이션의 구조를 간단히 설명하면 상단엔 자사 슬로건이나 로고를 표현하는 헤더(header)가 있고, 왼쪽에는 카테고리 리스트, 오른쪽에는 포커스된 카테고리가 있다. 그리고 해당 VOD를 노출하는 섹션(conte nts) 영역이 있다. 이 모든 기능은 메인 화면 레이어 위에서 구현하며, 정보키(info. key)에 따라 회사 정보를 노출하는 서브 화면 레이어가 따로 존재한다. 이번에 구현해볼 Hands Frame 애플리케이션의 대략적인 모습은 다음과 같다.




메인 화면

Hands Frame 애플리케이션은 이벤트를 포함한 대부분 기능을 메인 화면 레이어에서 행하며, 크게 왼쪽 카테고리 리스트와 오른쪽 콘텐츠 영역으로 구성됐다. 여기서 설명하는 모든 HTML의 요소는 index.html 안에 선언했으며 자바스크립트 코드는 Main.js, 스타일은 Main.CSS 안에 있다는 점을 먼저 기억하자. 우선 메인 화면 요소를 index.html에 다음과 같이 선언하자.


헤더 영역

헤더 영역은 핸드스튜디오의 슬로건이나 애플리케이션 이름 등 정적인 정보를 제공한다. 화면 레이어가 아니므로 간단히 퍼블리싱하면 된다. 메인 화면 요소 안에 다음과 같이 헤더 요소를 추가한다.
     
헤더는 배경과 합쳐지며 이미지로 통째로 처리되기 때문에 별다른 스타일을 지정할 필요가 없다. 카테고리 리스트

웹 서비스의 경우 상단이나 왼쪽에 메뉴 내비게이션을 두고 마우스 클릭으로 이벤트를 처리해 해당 콘텐츠를 조회한다. TV 애플리케이션에도 같은 UX를 적용하는데, 마우스 클릭 대신 메뉴가 포커스되면 콘텐츠를 조회한다. Hands Frame에서는 카테고리 리스트가 메뉴 내비게이션의 역할을 한다. 레이아웃을 구성하는 index.html 파일에 헤더 요소에 이어서 카테고리 구성 요소를 다음과 같이 추가한다.
                  카테고리 요소는 div 요소 안에 리스트 타입의 ul 요소를 포함한 형태며, 적절히 id와 class를 부여했다. 더불어 해당 요소의 이벤트 처리와 포커스에 필요한 카테고리 앵커를 선언했다. HTML에 이어서 카테고리 스타일을 구성하는 CSS를 다음과 같이 구현한다.



‘#category.focus ul li.focus’라는 스타일은 메뉴를 포커스할 경우 포커스하지 않은 메뉴 요소와 스타일을 구분하기 위해 정의한 것이다. 자세히 살펴보면 focus를 두 번 선언했는데, 이 경우 첫 번째 .focus는 카테고리 외에 다른 구성요소(헤더, 섹션, content 영역)로부터 포커스를 전환했음을 구분하는 데 필요하고, 두 번째 .focus는 카테고리 안 각 리스트 요소의 포커스 변경을 구분하는 데 필요하다.
카테고리 요소는 이후 자주 사용할 요소기에 다음과 같이 객체로 선언하면 쉽게 호출해 사용할 수 있다. 메인 화면 레이어 안에 포함되므로 다음과 같이 Main 변수의 하위 객체로 선언하자.





카테고리 요소 외에도, 포커스 처리를 위해 앵커요소가 필요하며 자주 호출하는 요소가 있다면 이처럼 화면 레이어 변수의 하위 객체로 선언해서 관리하면 수월하다. 카테고리 앵커의 포커스를 처리하는 이벤트 함수는 다음과 같다.





위 HTML 코드에서 선언한 카테고리 앵커(id=”anchor_category”)가 포커스되고 리모컨의 키 이벤트가 발생하면 onkeydown 핸들러
를 통해 위의 Main.category.keyDown 함수가 실행된다. Main.category.keyDown 함수는 event.keyCode 객체를 통해 리모컨의 키 코드를 받아오며 switch 문을 통해 각 키에 해당하는 코드를 실행한다. 위 소스 코드에선 Hands Frame의 사용자 환경을 고려해 카테고리 앵커에서 유효한 키 이벤트만 선언했다. 카테고리 요소 하위 리스트 요소에서 어떻게 포커스를 처리하는지 살펴보자.
이를 설명하기 위해선 다음과 같은 몇 가지 상황을 가정해야 한다.


∙ 애플리케이션을 실행했고, 카테고리 앵커가 포커스됨
∙ 카테고리 앵커가 포커스됐고 하위 첫번째 li 요소가 selected 상태
∙ 하위 li 요소는 앵커가 따로 존재하지 않음


위 같은 상황에서 하위 li 요소들 사이의 포커스 처리를 구현하려면 선택(selected)한 li 요소의 순서를 반영하는 인덱스(index) 개념을
도입해야 한다. 카테고리 앵커를 포커스한 상태에서 아래 혹은 위 방향키에 따라 인덱스 값이 변경된다. 이에 맞춰 해당 리스트 요소의
스타일을 구분해주면 된다. 카테고리 앵커를 포커스한 상태에서 우방향키를 누르면 현재 카테고리에 해당하는 콘텐츠 영역으로 포커스
가 이동해야 한다. 위 방향키를 누를 때 이전(인덱스 순서상) li 요소가 선택돼야겠지만 선택된 요소가 만약 첫 번째 li 요소라면 어떠한
이벤트도 발생하지 않아야 한다. 반대로 마지막 li 요소를 선택한 경우 아래 방향키를 누를 때도 마찬가지다. 포커스가 아닌 선택(selec
ted)이라 설명한 이유는 각각의 리스트 요소마다 앵커가 존재하진 않기 때문이다. 이처럼 인덱스 개념을 도입하면 앵커 없이도 포커스
처리를 구현할 수 있다. 인덱스를 도입해 카테고리 요소 하위 리스트에 대한 포커스 시나리오를 구현하면 다음과 같다. 위 방향키와 아래
방향키만 우선 처리했다.




카테고리 리스트에서는 좌 방향키를 통해 포커스할 수 있는 대상이 존재하지 않으므로 아무런 변화도 일어나지 않으며, 대신 우 방향키
를 통해 섹션 영역의 콘텐츠 앵커를 포커스해야 한다. jQuery의 내부 함수인 addClass와 removeClass를 사용하는 까닭은 앵커의
포커스 이동과 함께 포커스했음을 보여주는 스타일을 구분할 필요가 있기 때문이다. 이로써 카테고리에 해당하는 처리 내용을 완성했다.
약간의 예외 처리를 넣어서 완성하면 소스 코드는 다음과 같다.





콘텐츠 영역

일반적인 웹페이지에서는 사용자가 메뉴를 선택함에 따라 콘텐츠 영역에 해당 메뉴 페이지가 자연스럽게 로드된다. 이러한 사용자 환경은 Hands Frame 애플리케이션에서도 필요하다. 이를 구현하기 위해 카테고리 요소에 이어서 콘텐츠 영역의 요소도 index.html 파일에 다음과 같이 추가한다.
   
       
카테고리가 조회됨에 따라 해당 콘텐츠 요소가 노출되거나 감춰진다. 서브 화면 레이어 정도로 생각하면 쉽게 이해할 수 있으며, 각각의 콘텐츠 영역은 VOD 콘텐츠를 포함한다. 콘텐츠 요소에 대한 스타일은 다음과 같다.




#content  > div 요소에서 display: none;인 까닭은 콘텐츠 영역도 화면 레이어와 같이 동작하기 때문이다. 포커스된 카테고리에 해당하는 콘텐츠 영역을 제외하고 나머지 콘텐츠 영역은 모두 감춰야 한다.

위와 같은 기능은 다음 함수를 선언해 처리할 수 있다.

해당 함수를 카테고리 이벤트 처리 함수에서 위 방향키와 아래 방향키 이벤트 처리 로직 끝에 추가하면 카테고리 변경에 따라 콘텐츠 영역이라는 서브 화면 레이어를 제어할 수 있는 간단한 조회형 애플리케이션이 만들어진다.





단순히 콘텐츠 영역을 노출하거나 감추는 것을 넘어 콘텐츠 앵커로 포커스를 이동하고 콘텐츠 앵커로 포커스함에 따라 콘텐츠 영역의 글자를 빨간색으로 바꾸는 기능을 추가하려 한다. 이때 필요한 스타일 요소는 다음과 같다.





카테고리 앵커를 포커스한 상태에서 우 방향키를 통해 콘텐츠 앵커에 포커스를 이동할 수 있다. 이를 구현한 코드는 다음과 같다.



정상적으로 해당 코드를 구현했다면 콘텐츠 앵커를 포커스함에 따라 글자가 빨간색으로 변하는 것을 확인할 수 있다. 다시 좌 방향키를 통해 카테고리로 포커스를 주는 이벤트까지 구현하면 다음과 같다.





소스 코드를 살펴보면 jQuery의 addClass 함수와 removeClass 함수를 통해 포커스 이동에 따른 요소의 스타일을 구분함을 알 수 있다. 지금까지 잘 따라왔다면 Hands Frame 애플리케이션의 레이아웃과 화면 전환, 기본적인 포커스 정책은 어느 정도 완성했다고 볼 수 있다. 개발 절차를 설명하기 위해 부분적인 자바스크립트 소스와 레이아웃에 해당하는 CSS 스타일만 사용했다.  
VOD 플레이어

콘텐츠 영역에 대한 이전 설명에선 단순히 포커스됨에 따라 글자가 빨갛게 변하는 간단한 포커스 처리만 구현했다. 하지만 실제 Hands Frame 애플리케이션의 콘텐츠 영역은 VOD를 재생할 수 있는 플레이어 기능을 포함한다. VOD는 스마트TV 내장 모듈인 AV플레이어를 통해 재생할 수 있다. 애플리케이션에 해당 기능을 추가하는 방법을 알아보자.
우선 플레이어 모듈을 구현하기 전에 플레이어 컨테이너를 다음과 같이 선언해야 한다.



플레이어 컨테이너는 스크린 화면을 애플리케이션의 화면 레이어보다 앞에 위치할 수 있도록 돕고, 스크린 화면의 스타일을 쉽게 제어할 수 있게 해준다. 플레이어 컨테이너의 스타일은 다음과 같다.




이어서, index.html 파일에 다음과 같이 AV플레이어를 포함하는 Web API 라이브러리를 선언하고 플레이어 앵커를 추가한다.




선언한 플레이어 앵커는 VOD를 재생하는 동안의 이벤트를 한다. 예를 들면, 재생키나 멈춤키를 처리해 플레이어 재생이나 정지를 구현할 수 있다. 플레이어 앵커를 통해 호출되는 핸들러 함수는 다음과 같다.



소스 코드 중 event.preventDefault 함수는 이전키와 종료키로 애플리케이션이 종료되는 것을 막는다.



플레이어 객체(Player Object)

임의의 화면 레이어 안에 포함한 형태로 플레이어 모듈을 구현할 수 있지만, 별도의 자바스크립트 파일을 만들어 독립적인 화면 레이어로 플레이어를 관리할 수도 있다. 이는 VOD 재생을 하는 화면 레이어라고 생각하면 이해하기 쉽다. 재생에 필요한 복잡한 이벤트를 관리하거나, 창 모드 전환, 플레이어 상태창(Remote), 자막 등 플레이어에 추가할 수 있는 복잡한 기능들을 생각하면 이처럼 하나의 화면 레이어로 관리하는 편이 더욱 수월할 수 있다. 그러나 Hands Fra me 애플리케이션의 플레이어는 단순 재생과 정지 기능만 추가할 예정이므로 메인 화면 레이어 안에 포함한 모듈로 구현하겠다.



소스 코드를 보면 Main.AVPlayer.init 함수로 플레이어 모듈을 초기화할 때 콜백 객체를 넘겨주는 부분을 확인할 수 있다. 이는 앞서 선언한 플레이어 컨테이너에 바인딩한 형태로 플레이어 모듈을 호출하기 위함이다. 구현한 플레이어 모듈은 재생과 멈춤 기능만 제공한다. 재생할 대상인 VOD의 주소는 임의로 한가지 경로만 선언했다. 선언한 플레이어 객체에서 다음의 함수를 호출해 VOD를 재생할 수 있다.



재생 말고도 VOD를 정지/일시 정지하거나, 다시 이어보기 하는 기능도 플레이어 객체 하위에 추가하면 쉽게 구현할 수 있다. 하지만 여기서는 단순 재생과 정지만 다루고 있으므로 이에 해당하는 이벤트 처리 함수만 설명하겠다.
플레이어 정지 시 메인 화면 레이어의 콘텐츠 앵커를 포커스하는 까닭은 VOD의 재생을 종료한 후 기존 콘텐츠 영역으로 포커스를 되돌리기 위해서다.

지난달 ‘플레이어’ 원고를 살피면 플레이어를 개발하는 데 도움되는 내용을 보다 상세하게 확인할 수 있을 것이다. 혹은 관련 소스(bitbu cket.org/handstudio/handsframe)를 참고할 것을 추천한다. 이로써 기본형 Hands Frame 애플리케이션을 대부분 완성했다. 여기서 다루지 않은 정보 화면 레이어(info scene)나 URL의 동적인 관리 역시 위에 공개한 소스코드를 통해 확인할 수 있다.


Inspector






SDK 4.5는 크롬 브라우저의 Web Inspector를 지원한다. 앱을 테스트하거나 디버깅할 때 큰 도움을 준다. 위와 같은 방식으로 실행한다.

tags 핸드스튜디오 , 스마트TV 앱 , 앱 제작

저작권자 © 웹스미디어 무단 전재-재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다.
본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은
반드시 기사의 출처(로고)를 붙여주시기 바랍니다.
영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라
그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

URL 복사 출력하기 목록보기 스크랩하기

관련기사

최신뉴스
리뷰 & 하우투
스마트TV 포커스와 화면 레이어
핸드 스튜디오 마케팅 커뮤니케이션팀 팀장 김소현
리뷰 & 하우투
스마트TV 실습 기본형 Hands Frame의 구현 (4회차)
리뷰 & 하우투
스마트TV SDF와 앱 배포 (5회차)
프로젝트 & 프로모션
마인드브릿지: 뜻밖의 퇴근

정기구독신청