2011. 9. 27. 11:27

jQuery Template

요전에 프로젝트 할 당시에 이런식의 코드를 많이 작성했더랬는데 많은 귀찮음이 따르는 작업이었다.
 
function displayItems( list )
{
	var i;
	var n = list.length;
	var table = $("#sampleTable");

	for( i = 0; i < n; i++ )
	{
		var html = table.html();
		html += '<tr>';
		html += '<td>';
		html += '<img src="'+ list[i].image + '" height="150" />';
		html += '</td>';
		html += '<td>';
		html += list[i].title;
		html += '</td>';
		html += '<td>';
		html += list[i].width + ' * ' + list[i].height;
		html += '</td>';
		html += '</tr>';
		
		table.html( html );
	}
} 

저번 crossdomain 이슈를 해결한 소스에 위와 같은 코드를 넣어서 아래와 같은 화면을 만들었다.
(검색어는 '아이유')


 뭐 간간히 깨진 이미지도 있지만 뭐 링크가 깨졌으니 어쩔 수 없을듯. (그래도 아이유는 이쁘다) 지금 그게 중요한게 아니라 이런 단순히 Table에 게시판처럼 쭉 나열하는 코드를 넣었는데 영 보기도 힘들고 영 만들기도 힘들다. 게다가 코드가 맘에 안들게 지저분해진다. Flex의 ItemRenderer 같이 깔끔하게 들어가게할 방법이 없을까.. 라고 생각하고 있다면 jQuery Template 를 추천한다.

우연찮은 기회에 알게된 jQuery Template는  Flex의 ItemRenderer같이 Template을 만들어두면 자동으로 채워준다. 짧은 말로 설명하긴 어려우니까 일단 기반 지식부터 차근이 알아가자.

참고로 이야기하자면 jQuery Template는 아직 Beta버젼으로 Microsoft에서 만들어준 plug-in 이다. 소문에는 차기에 나올 jQuery에는 jQuery Template가 포함될거라는 소문도 있으나 아직은 사실 무근이며 이런 소문이 도는 까닭은 이 jQuery Template라는게 너무 잘만들어져서가 아닐까 생각된다. 어쨌든 여기저기 검색하다 보면 jQuery 홈페이지에 jQuery Template를 소개하는 페이지가 있다.(http://api.jquery.com/jQuery.template/)


 일단 jQuery Template은 plug-in이므로 jQuery.template.js 파일을 다운로드 받아야한다. jQuery Template을 소개하는 그 페이지를 잘 살펴보면 받아올 수 있는 링크를 찾을 수 있지만 영어 울렁증 및 숨은그림찾기에 능하지 않은 사람들을 위해 링크를 제공합니다.(https://github.com/jquery/jquery-tmpl)

링크를 따라가도 영어천지고 다운로드 버튼을 찾을 수 없는 분들을 위해 그림으로 설명을 이어가겠다.


 저기서 "Download.zip"을 클릭하면 다운로드 받을 수 있다. tar.gz 파일이 좋다면 그걸 받아도 된다. 뭘 받든 상관없지만 아무래도 zip이 통상 많이 쓰이는 거니 저걸 받도록 하자. 압축을 풀면 요상한것들 많은데 일단 우리에게 당장 필요한건 jquery.tmpl.js 파일이다. 간혹 파일 뒤에 "min"이라고 이름이 다른건 뭐냐고 물어보시는 분들 계시는데 그냥 jquery.tmpl.js 파일의 필요없는 공백, 변수명등등을 축약해서 파일크기를 줄여놓은거다. 그냥 jquery.tmpl.js랑 동작하는 내용은 같으니 뭘 쓰든 상관없다.



그리고 HTML코드를 이렇게 작성한다. jQuery Template은 Plug-in 이므로 jQuery를 추가한 뒤에 jQuery Template을 추가시킨다.


<script type="text/javascript" language="javascript" src="js/jquery1.6.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.tmpl.js"></script>

이렇게 하면 기본적으로 준비는 마쳐졌고 jQuery 홈페이지의 jQuery Template의 소개페이지에선 뭔가 javascript로만 템플릿을 만들어 처리하는 방법을 소개해놓았는데 그 방법은 다음과 같다.

template라는 명령어에 템플릿의 이름과 템플릿을 String 값으로 등록을 한다. 그 이후에 tmpl() 이라는 메서드를 이용해 화면에 렌더링하면 된다. 어떻게 하면 되는 예제를 보면서 따라해보자.
var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
  { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
  ];

$.template(
  "detailTemplate",
  "<tr>" +
  "<td colspan='2'>${Name}</td>" +
  "<td>Released: ${ReleaseYear}</td>" +
  "<td>Director: ${Director}</td>" +
  "</tr>"
);

$.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );

일단 JSON 형태의 Array데이터가 있고 템플릿을 등록해준 다음에 $.tmpl 메서드를 이용해 화면에 넣어준다는 이야기. 보기엔 쉬워 보이지만 템플릿을 등록하는데에는 영 맘에 안든다. 좀 더 편하게 이용할 방법은 없을까 하고 고민하고 검색을 해봤더니 javascript가 아니라 HTML로 템플릿을 적용하는 예가 나와있었다.(링크: http://blog.outsider.ne.kr/532 - Outsider님의 블로그 )

이 블로그의 설명을 들어보아하니 jQuery팀은 이미 이런것과 같은 맥락으로 Templating, Data Linking, Globalization과 같은 공식 플러그인을 발표했다고 한다;; 그것도 작년 10월에.. 크흐.. 이렇게 시대에 뒤떨어져서야.. 쓰겠냐마는.. 일단 Data Linking 같은건 나중에 다시 이야기 하고 어서 Template를 보다 편리하게 쓰는 방법을 이야기 하면 아래와 같은 방법으로도 사용이 가능하다고 한다.


HTML영역에 아래와 같이 HTML 스크립트를 작성한다.
<script id="detailTemplate" type="text/x-jquery-tmpl">
<tr>
   <td colspan='2'>${Name}</td>
   <td>Released: ${ReleaseYear}</td>
   <td>Director: ${Director}</td>
</tr>
</script>


그리고 Javascript에서는 아래와 같이 코딩한다.
var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
  { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
  ];

$.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );

아까 작성한 코드와 비슷하지만 적어도 이 방법은 javascript로 문자열로 작성된것이 아니라 HTML코드로 작성되어 작성하는 것도, 편집하는 것도 수월해 졌다.

일단 jQuery Template 사용하는 방법은 여기까지. 다음 시간엔 crossdomain을 해결해 아이유 이미지들을 불러온 소스에 접목시켜 보도록하자. 

'HTML/Javascript' 카테고리의 다른 글

속성 alt와 title의 차이  (2) 2012.02.20
jQuery - Ajax - crossdomain 이슈 #2  (1) 2011.09.26
jQuery - Ajax - crossdomain 이슈  (1) 2011.09.17
Jquery Conference개최  (0) 2011.08.04
2011. 9. 26. 19:00

jQuery - Ajax - crossdomain 이슈 #2

이전에 이야기 했던 JSONP 방법과는 다르게 좀더 정석적인 방법으로 jQuery를 다뤄 Crossdomain을 해결한 것은 검색이라는 삽질과 수많은 테스트 코드를 낳고서야 해결점이 보이기 시작했다.(물론 결국 찾아낸건 회사 차장님의 덕택이었지만)

일단 몇가지 문서들을 봐야만 했는데  jQuery.ajaxPrefilter() 부분이었다. 이 ajaxPrefilter() 메서드는 ajax의 low-level 메서드로 jQuery를 통해 ajax통신을 하게 될때 콜백함수로 호출되어 통신을 위한 밑작업들을 수행하게 되는데 cross-domain또한 이 메서드 중간에서 차단하여 막는것도 여기서 처리하게된다. 이 사실을 어떻게 알았냐면 Extending Ajax: Prefilters, Converters, and Transports 라는 문서를 보고 나서 알게 되었다.

이 문서에 따르면 이 기능(?)들은 jQuery 1.5 .$ 버젼부터 지원하기 시작한 것으로 ajax 요청의 "보내기", "받기", 그리고 "관리하기"에 관련된 내용을 담당한다고 설명되어있다.


일단 여러가지로 우리가 봐야할 것은 보낼 때 cross-domain을 막는 부분을 해결해야 하므로 보내는 쪽 담당인 Prefilters 부분을 살펴보도록 하자.
Prefilters는 ajax의 옵션처리, 호출등을 담당하는데 실제 소스 코드를 확인해보면 다음과 같다.
 

$.ajaxPrefilter( function( options, originalOptions, jqXHR )
{
  // Modify options, control originalOptions, store jqXHR, etc
});

 
각 파라미터의 설명들이 있는데 내용은 다음과 같다.
  • options : 요청을 보내는 옵션들  
  • originalOptions : ajaxSettings에서 기본적으로 수정되어지지 않는 ajax 메서드에서 제공되는 옵션들. 
  • jqXHR : jQuery HTTP Request
이렇게 되며 이 메서드를 Extending해주면 ajax통신을 manual 하게 셋팅할 수 있는데 그 내용중에서 아래의 내용을 확인해 볼 것.
Prefilters can also be used to modify existing options. For example, the following proxies cross-domain requests through http://mydomain.net/proxy/:
이 이야기는 무슨 이야기냐 하면 기존의 옵션을 수정할 수 있다면서 프록시서버를 통해 크로스도메인 요청을 보낼수 있다는 이야기를 하며 아래의 코드를 소개해 놓았다.
$.ajaxPrefilter( function( options )
{
  if ( options.crossDomain )
 {
    options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url );
    options.crossDomain = false;
  }
});
그럼 우리가 유추해볼 수 있는건 다음과 같다.
  1. 통신을 하기전엔 무조건 $.ajaxPrefilter()를 거친다.
  2. ajaxPrefilter() 내부를 변조해 처리하면 cross-domain도 통과할 수 있다. 
라는 것인데 그래서 여태껏 "jQuery ajax crossdomain" 이라는 검색어로 검색하던 것을 "jQuery ajaxPrefilter crossdomain"으로 바꿔 검색해봤다. 그랬더니 서광처럼 등장한 "http://craveytrain.com/posts/cors" 페이지.
여기에 등장한 소스 코드는 

$.ajaxPrefilter('json', function(options, orig, jqXHR) {
    if (options.crossDomain && !$.support.cors) return 'jsonp'
});

이것인데 이 소스를 적용해 테스트 해봤더니 인터넷 익스플로러에선 되고 크롬에선 안되고 하는 크로스브라우징 문제가 발생했는데 이걸 어쩐다.. 하고 고민하다가 어차피 그냥 통신 자체를 'jsonp'로 속여서 내보내면 해결될 문제라고 생각해 아래와 같이 수정했다.
$.ajaxPrefilter('json', function(options, orig, jqXHR) {
    return 'jsonp'
});

이렇게 테스트 해보니 잘된다.
테스트 코드는 아래와 같이.

 
$(document).ready(function(){
	loadData();
});
	 
function loadData()
{
	var data ={};
	data.q = 'test';
	data.apikey = '947f96c9d2518613faae766eed75bca030ad67d7';
	data.result = '10';
	data.output = 'json';

	$.ajaxPrefilter('json', function(options, orig, jqXHR) {
		return 'jsonp';
	});
 
	$.ajax({
		url: "http://apis.daum.net/search/image"
		, crossDomain: true
		, dataType: "json"
		, type: 'GET'
		, data: data
		, success: function( data, textStatus, jqXHR )
		{
			alert("sccess : " + data.channel.item.length );
		}
		, error: function( jqXHR, textStatus, errorThrown )
		{
			alert( textStatus + ", " + errorThrown );
		}
	});
}

이렇게 ajax 통신하기 전에 ajaxPrefilter를 수정해주면 해결이 된다.
 


위의 테스트 결과는 크롬, 사파리, 인터넷 익스플로러, 오페라까지 테스트한 결과로 현재 테스트 해볼 수 있는 브라우저에서는 다 해본 결과다. 결국 jQuery를 extending해야 해결할 수 있는 이슈라니.. 어지간한 파워유저가 아니고서는 해결보기 힘든 이슈일듯 하다.

다음엔 저런 결과물로 jQuery Template를 이용해 화면에 뿌려주는 작업을 진행해 보자. 

'HTML/Javascript' 카테고리의 다른 글

속성 alt와 title의 차이  (2) 2012.02.20
jQuery Template  (0) 2011.09.27
jQuery - Ajax - crossdomain 이슈  (1) 2011.09.17
Jquery Conference개최  (0) 2011.08.04
2011. 9. 17. 11:44

jQuery - Ajax - crossdomain 이슈

jQuery 최신 버젼을 갖고 Ajax통신 기능을 이용하려고 하면 종종 직면하게 되는 이슈는 crossdomain 이슈다. crossdomain 이슈가 뭐냐고 물어보는 사람들을 위해 잠깐 설명하자면

- crossdomain 이슈사항 정리 -
1. 전제조건 
- 조건 1: 내가 보고 있는 페이지의 주소는 http://www.aaa.com 이다.
- 조건 2: http://www.aaa.com의 페이지가 http://www.bbb.com의 rest api 를 호출하여 데이터를 JSON으로 가져오려고 한다.

2. 결론
 조건 1의 내가 이용하는 페이지의 주소의 도메인과 조건 2의 데이터를 가지고 오기위한 서버의 도메인이 서로 상이할 경우 crossdomain이라고 부른다. 이러한 crossdomain은 서버 공격 및 보안 취약성을 갖게 되므로 서로 신뢰할 수 있는 경우에만 이를 허용하는 서비스를 구축하는 것이 일반적이다.

 라고 합니다.
jQuery 1.5.0 이후의 버젼부터는 이러한 crossdomain 을 원천 봉쇄해버렸다. 그래서 이런 메시지를 띄운다.

 

$(document).ready(function(){
		loadData();
});

function loadData()
{
	$.ajax({
		url: "http://apis.daum.net/search/image?q=test&" +
                       "apikey=947f96c9d2518613faae766eed75bca030ad67d7"
		, sucess: function( data, textStatus, jqXHR )
				  {
					  alert("success");
				  }
		, error: function( jqXHR, textStatus, errorThrown )
				 {
					alert( textStatus + ", " + errorThrown );
				 }
	});
}

하지만 HTML과 자바스크립트로 OpenAPI를 이용한 매쉬업 컨텐츠 페이지를 만들고 싶다면 이런 crossdomain을 어떻게 처리할지. 그게 문제가 된다. 일단 여러가지 테스트 결과 jQeury에서는 "http://"부터 그 다음 "/"가 나올때까지의 도메인 문자열이 현재 보고 있는 페이지의 도메인 문자열이 상이하면 crossdomain 문제를 일으킨다.
(예를 들어 현재 블로그 주소인 igna.tistory.com과 igna1.tistory.com도 다른 도메인 취급한다.)
게다가 도메인 문자열이 동일해도 포트번호가 서로 달라도 crossdomain 문제를 일으키니 정말 답이 없다.
그런 문제들에 대해 아무리 검색해봐도 뾰족한 수가 나오는거 없이 JSONP라는 방법을 이용하라고 한다.
물론 JSONP라는 방법은 이런 crossdomain을 우회할 수 있는 하나의 "꼼수"로써 사용할만 하다.
혹시 JSONP라는 것을 정확히 모르는 분들을 위해 짧막 설명을 하자면  

 <img src="http://aaaa.com" />
 
위와 같은 html 코드가 있을 때 저 src라는 attribute가 JSONP 역할을 하는거다. 저 src속성은 어떤 도메인을 넣든 크로스도메인 이슈를 발생시키지 않으니까 저 꼼수를 이용해 크로스도메인을 처리하는 방법이 JSONP방법이다.
(좀더 자세한 내용은 : http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/ )

그렇다면 위에서 만든 코드를 아래와 같이 수정해보자.

 

$(document).ready(function(){
	loadData();
});

function loadData()
{
	var data ={};
	data.q = 'test';
	data.apikey = '947f96c9d2518613faae766eed75bca030ad67d7';
	data.result = '10';
	data.output = 'json';
	data.callback = "jsonp_callback";
			

	$.ajax({
		url: "http://apis.daum.net/search/image"
		, crossDomain: true
		, dataType: "jsonp"
		, type: 'GET'
		, data: data
		, error: function( jqXHR, textStatus, errorThrown )
		{
			alert( textStatus + ", " + errorThrown );
		}
		
	});
}

function jsonp_callback( data )
{
	alert("!!!");
}

위와같이 코드를 작성하고 브라우져에서 확인하면 두가지 alert 창이 뜨는데 하나는 "!!" alert이 뜰테고 하나는 아래와 같은 창이 뜨게 된다.

 이것은 jQuery가 jsonp로 데이터를 호출하기 위해 주소 끄트머리에 붙여놓은 자동 생성 스크립트인데 그 내용을 파싱하지 못하겠다고 에러를 띄운것이다. 사실 alert코드를 심어놔서 확인할 수 있었던 것이지 alert없었어도 사실 아무런 상관이 없다. 그리고 "!!" 이 뜨는 시점에 data를 확인해보면 아래와 같이 확인할 수가 있다.

 데이터가 아주아주 순조롭게 잘 들어왔다. 저걸로 화면에 표시해주면 되겠다. 하고 생각하긴 했는데 다만 문제는 이 방법에 아주아주 큰 취약점이 있다. Error를 처리 할 수 없다는 점인데 결국 JSONP라는 방법은 꼼수에 불과하기 때문에 정석적인 방법과는 거리가 있다.
간혹 1.4 버전의 jQuery를 사용하면 되지 않느냐는 말씀을 하시는 분들이 있는데 그것은 시대에 역행하는 방법으로 문제를 해결한다는 것은 결국 정체하자는 이야기밖에 되질 않으므로 패스.
어떻게 처리하는게 좋을까 하다가 회사의 차장님의 끈질긴 연구와 검색 덕분에 알게된 해결책.
 
다음 시간에 공개합니다. 

'HTML/Javascript' 카테고리의 다른 글

속성 alt와 title의 차이  (2) 2012.02.20
jQuery Template  (0) 2011.09.27
jQuery - Ajax - crossdomain 이슈 #2  (1) 2011.09.26
Jquery Conference개최  (0) 2011.08.04
2011. 9. 9. 17:39

K플레이어 베타 오픈!



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)