야훔의 Front-END

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를 사용하면 되지 않느냐는 말씀을 하시는 분들이 있는데 그것은 시대에 역행하는 방법으로 문제를 해결한다는 것은 결국 정체하자는 이야기밖에 되질 않으므로 패스.
어떻게 처리하는게 좋을까 하다가 회사의 차장님의 끈질긴 연구와 검색 덕분에 알게된 해결책.
 
다음 시간에 공개합니다. 

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)
 

Jquery에서 컨퍼런스가 개최됩니다. 스피커 목록도 나왔습니다.
스피커들 보니까 덜덜.. Jquery 코어 개발자들 부터 JqueryMobile 코어 개발자까지. 
Jquery를 만들던 주요 개발자들과의 만남이 계획되어 있습니다.
상상만해도 좋습니다만... 컨퍼런스가 보스턴에서 개최되니.... 보러갈 수 없음이 가슴이 아프군요 ㅠㅠ
자세한 내용은 Jquery 홈페이지를 참고해 주세요.
http://events.jquery.org/2011/boston/