야훔의 Front-END

K플레이어 프로젝트로 수 많은 날들을 야근으로 보내던 끝에 9월 3일이 되던 그날밤 K플레이어 서비스 베타오픈을 하게 되었습니다.
KBS에서 1M/bps급 실시간 동영상을 스트리밍으로 쏴주는 이 프로젝트는 Web, iOS, Android, Pad, Tab 까지 개발하고 있습니다. 일단 베타 오픈은 Web이었고 9월 중에 Phone, Pad 어플리케이션을 오픈할 예정에 있습니다.
그런 이유로 어플리케이션 개발자들은 피를 토하며 개발하고 있지요. ㅠㅠ( 힘내세요! 화이팅! )

이렇게 오픈한 서비스를 바로 포스팅하지 못한 까닭은 안정화 작업을 하느라 정신이 없었던 까닭인데 지금 포스팅하는 이유는 서비스가 어느정도 궤도에 오르고 서비스가 안정화되자 조금 여유가 생긴 까닭이겠지요.
하지만 바로 2차 개발을 위한 준비도 시작되서 지금이 아니면 포스팅이 힘들어지겠구나 싶어서 어서 작성해 봅니다.

아무래도 "대국민" 서비스다 보니 사용자들이 불특정 다수고 온갖 버그 트래킹이 발생할 것 같아서 매일매일 구글과 네이버, 다음을 검색하며 누가 욕이라도 써놓지 않았나.. 하고 걱정을 하다가 이런 글들을 보니 눈물이 흐르더군요.. ㅠㅠ

(스샷위치 : DC인사이드 - 이승기 갤러리 - http://gall.dcinside.com/list.php?id=leeseunggi&no=199369 )

엉엉.. DC 갤러 여러분들이 사실 제일 무서웠어요 ㅠㅠ 열심히 만들었는데 욕이라도 있었으면 어떻게 될까 ㅠ
하지만 칭찬해주시는 여러분들 감사합니다. 그 외에도 네이버, 다음에 계신 블로거 님들의 리뷰들이 하나 둘 나오면서 칭찬과 격려의 글들에 정말 깜짝 놀랬습니다. 감사합니다.ㅠㅠ

그래서 K플레이어를 좀더 잘 이용할 수 있도록 기능들에 대해서 좀 설명 드릴까 합니다.

1번 메인페이지.

일단 로그인 없이 바로 http://k.kbs.co.kr 에 들어가시게 되면 위와 같은 모습의 페이지를 만나보실 수 있으실 겁니다. 이래서는 영상을 볼 수 없죠. 로그인 하셔야겠습니다. 우측 상단의 "로그인" 버튼을 꾹 눌러주세요.

KBS 아이디를 갖고 계신분은 아이디와 비밀번호 입력하시면 되고 없으신 분을은 송구스럽습니다만 회원가입해주셔야합니다.

로그인을 하고나면 바로 실시간 스트리밍을 보실 수 있습니다.

맨 처음으로 들어오신분들은 기본적으로 KBS 1TV를 보시게 됩니다. 그 다음부터는 마지막에 보셨던 채널로 셋팅되서 나오게 되어있어요.
혹시 "로그인" 하셨지만 화면이 안나오시는 분들이 계실거라고 생각합니다.
화면이 안나오는 가장큰 원인은 Flash Player가 설치되어있지 않거나 Flash Player의 버젼이 10.1 이전 버젼이라서 안나오실 수 있습니다.
현재 만들어진 K플레이어는 10.1이후 버젼의 Flash Player를 설치가 되어있으셔야 정상적으로 동작하는데 그 이전 버젼의 Flash Player일 경우 자동으로 업데이트 해주게 됩니다.

현재 보고 계시는 화면에 설치되어있는 버젼은 Flash Player 9.277버젼입니다. 저기서 "예"를 클릭해주면 알아서 최신 Flash Player를 Adobe 서버에서 자동으로 내려받게 해줍니다. 설치도 자동! 그리고 브라우져도 알아서 껐다가 켜주기까지 합니다.
한 1분정도만 투자해주시면 됩니다. 하지만 9.16 이하의 버젼을 사용하시게 되면 아래와 같은 화면이 나옵니다.

하지만 이정도로 옛날 버젼의 Flash Player를 사용하시게 되면 Naver 같은 포털 사이트도 제대로 동작하지 않으니 속히 Flash Player 다운로드 센터로 이동해서 최신버젼을 다운로드 해주세요.
( 최신 버젼 다운로드 받기 : http://get.adobe.com/kr/flashplayer )

그런데 간혹 최신버젼을 받아서 설치했는데도 업데이트가 안되는 경우가 있습니다. 이 경우에는 모든 Flash Player를 지우고 다시 설치해야합니다. Flash Player Uninstaller를 다운 받아 실행시키고 Flash Player를 다시 설치하시면 됩니다.
( Flash Player Uninstaller 다운로드 받기 : http://kb2.adobe.com/cps/141/tn_14157.html )

그럼 이제 플레이어의 컨트롤 바에 대해서 설명해 드리겠습니다.

왼쪽부터 설명하겠습니다.
1번 - 재생, 정지 버튼입니다. 실시간 방송이다보니 일시정지 기능은 없어요.
2번 - 프로그래스 바 입니다. 현재 방송되는 프로그램의 편성정보를 기준으로 얼마나 봤는지 프로그래스 바에서 표현됩니다. 그래서 실시간 방송중에는 컨트롤 할 수 없습니다.( 당연하게도 VOD를 재생할 때에는 Seek 기능을 지원하게 됩니다.)
3번 - 현재 방송중인 프로그램의 편성시간을 알려줍니다.
4번 - 볼륨 조절입니다. 클릭을 하면 음소거가 되고 마우스를 위에 올리면 볼륨을 조절할 수 있게 패널이 나오게 됩니다.
5번 - 이름을 짓기가 애매해서 저는 Extender 버튼이라고 이름 지었습니다. 저 버튼을 클릭하면 플레이어의 사이즈가 줄어듭니다.

6번 - 전체화면 버튼입니다.

이와는 별개로 눈에 보이지 않는 기능들을 설명 드리겠습니다.

• 동영상 화면을 더블 클릭 - 전체화면기능 
• Enter키 - 전체화면(ESC 키를 누르면 원상 복귀)
• 위아래 키 - 볼륨 조절( 동영상 영역에 포커싱이 되어있을 때 )
• 마우스 휠 - 볼륨 조절( 동영상 영역에 마우스 커서가 위치되어야 함)

키보드나 마우스 컨트롤은 아무래도 전체화면에서 컨트롤 하기 쉽습니다. 작은 화면일때는 마우스 휠이나 키보드 상하 키로 컨트롤 하면 브라우져의 스크롤도 같이 동작하기 때문에 컨트롤 하시기 힘들거라고 생각합니다.
VOD를 재생중에는 좌우키로 5초 앞으로 / 뒤로 기능을 제공하고 스페이스바로 일시정지를 할 수 있습니다. 
( 제가 테스트를 하다가 불편하길래 추가한 기능들 입니다. ㅎㅎ ) 

그 외에 왼편에 Remote Control 패널을 이용해 채널 변경 및 볼륨제어가 가능합니다.

그럼 편성표 메뉴로 넘어가보겠습니다.

10개 채널에 대한 편성정보를 확인할 수 있습니다. 기본적으로 상단에 좌우로 배치된 버튼을 이용해 2시간 단위로 이동시켜 보실 수 있습니다. 그리고 하단의 스크롤 버튼을 드래그해서 시간을 이동시킬수도 있습니다.

그리고 가운데 상단의 "On Air" 버튼을 클릭하시면 다른 시간을 보시다가도 현재 날짜, 현재 시간으로 위치하게 됩니다.
우측 상단의  이 두개의 버튼을 설명하겠습니다.
버튼의 모양대로 "달력" 버튼과 "새로고침" 버튼입니다. 새로고침은 말 그대로 현재 보고있는 편성표를 새로 고침해서 확인할 수 있게 하고 달력 버튼은 과거나 앞으로의 편성정보를 확인 할 수 있도록 달력을 제공하게 됩니다.

여기서 활성화 되어있는 날짜를 클릭하면 해당 날짜의 편성표를 보게 됩니다. 그리고 각 셀을 클릭하게되면 해당 프로그램의 상세정보를 확인할 수 있습니다.

 그리고 오늘 날짜의 현재 방송되고 있는 프로그램을 확인하게 되면 "시청하기"버튼이 나타나게 됩니다. 시청하기 버튼을 클릭하게 되면 "라이브" 메뉴로 넘어가서 해당 채널을 재생하게 됩니다.


KBS K플레이어를 개발하면서 항상 "대국민"서비스라는 점에서 책임감이 무거웠습니다. 그것이 아마도 그것이 이번 1차 오픈에 크게 작용했던것 같습니다. 크로스 브라우징, 크로스 플랫폼, 모바일에서도 동작할 수 있는 웹컨텐츠를 설계해야하고 모든 브라우져에서 동일한 동작을 할 수 있도록 개발했어야 하니깐요. 그리고 이달 중에 런칭할 폰, 패드의 어플리케이션까지 개발중에 있습니다.(물론 저는 플래시 부분만 개발했어요. 어플리케이션은 다른 분들이 만드시고 계십니다.)  이 모든것들은 결국 모든 사람들이 좀 더 자유롭게 정보를 공유하고 컨텐츠를 공유할 수 있는 획을 그었길 기도합니다.

칭찬과 격려와 관심을 가져주셨던 모든 분들께 감사드립니다. 

K플레이어 바로가기 : http://k.kbs.co.kr

p.s :
그리고 지금 K플레이어 베타 런칭기념 이벤트가 진행중입니다!

많은 참여 부탁드려요!
(이벤트 페이지 : http://k.kbs.co.kr/Home/KEvent)