두리미 Just Do IT

오픈 : 2012 1월
범위 : 개발 100% (1인개발)
기술 : client 기술만으로 구현 (html + jQuery + facebook javascript sdk)

작년 여름쯤 Facebook과 같이 일해볼 기회가 있었습니다.

멋진 기획자,  멋진 개발자... 한국 페이스북 개발자는 어떤 분들일까 내심 궁금했었는데 역시 소수정예는 포스가 다릅니다. 첫 회의때 이쁜 페이스북 로고가 인상적인 명함을 받았는데 주소가 캘리포니아 본사로 적혀있더라구요. 한국 사무실로 찾아갈려면 기억을 더듬어 찾아가야하는...

원래 계획은 2011년 9월 중 오픈으로 잡고, 개발이나 검수 일정이 너무 빠듯해 일주일 내로 개발가능한 범위만 잡고 실제로 개발에 걸린 시간도 5~6일 (그중 70%는 Facebook API를 뒤지다 보낸 시간) 이었는데요.

구현을 다 해놓고도 이런저런 이유때문에 페이스북 타임라인 공식 오픈 일정에 맞춰 반 년 가까이 오픈을 미뤘는데, 그 사이에 JTBC 프로젝트에 투입되서 실제로 이 코드에 관심을 가진 시간은 거의 없는 셈입니다.
(묵혀둔 된장같이 급하게 짠 냄새가 솔솔나는 코드... OTL)

기능
1. 내가 클립한 기사를 따로 모아볼 수 있습니다. (일종의 스크랩 기능) - 페이스북 타임라인에서 노출
2. 내가 클립한 기사를 이 앱을 쓰는 내 친구들과 공유할 수 있습니다. 친구들이 최근에 클립한 기사를 모아보거나, 해당 친구가 어떤 기사를 클립했는지 전부 찾아보는 것이 가능합니다.

관심있는 기사를 스크랩하고, 공유하고, 페이스북에서 덧글을 달거나 좋아요를 눌러주면서 뉴스컨텐트를 SNS쪽으로 가져오는 다리 역할을 하는 셈입니다.

- 친구들이 클립한 기사를 보다가 마음에 드는 기사가 있으면, 바로 클립해 올 수도 있습니다. -

 처음에는 내가 읽은 기사까지 페이스북과 연동되어 공유하는 모델을 생각했는데, 만약 그런 경우
내가 읽었는지 밝히고 싶지 않은 기사까지 친구들과 공유되어 버리는 불상사(?!)가 발생할 우려가 있죠...(섹시,치명적매력의...볼륨,아찔... 남자라면 무심코 제목에 낚여 클릭하게 되는 기사를 읽은 사실을 페이스북친구들과 공유되길 원하는 사람은 아마 거의 없을거예요.) 
그래서 보류했습니다. 아마도 그 기능은 앞으로도 안쓸 것 같아요.

사실 오픈해놓고 나니 너무 간단한 기능이라 이런것도 써야하나 싶을정도로 민망한 수준이지만..
어쨌든 페이스북 오픈그래프 런칭 파트너 국내 3사 (네오위즈인터넷의 벅스뮤직, 인터파크의 소셜위시, JoinsMSN의 뉴스클립) 중 한곳이고 개발에 투입한 시간 대비 효과는 어느정도 있는 듯 합니다.

유의미한 통계를 위해서는 오픈그래프 액션 발생시 별도의 로그를 남기고 분석을 통해 패턴을 추출할 수도 있지만, 애초의 목적인 No DB, No Server Application 으로 가벼운 웹앱을 만들자는 제한하에서
구현된거라 분명히 한계가 있습니다.  (API로 못뽑아 오는 데이터는 구현못한다는 확실한 제약;;)

아티클 부분에는 iframe 플러그인 형태로 구현해놔서 페이스북 API 응답이 없다거나 하는 상황이 발생하면 클립버튼만 안보이고 뉴스서비스에는 이상이 없도록 분리 해놨는데 그것때문에 페이스북 API 응답이 정상적으로 올 때까지 버튼을 가려놔야 하는 이슈가 있어서 기사면에서 공유 버튼이 약간 늦게 나타납니다.

 

jQuery CDN의 로딩 속도는 홍콩에서 땡겨오는 MS 것이 전반적으로 빠르다.

얼마동안 실제로 활용해본 결과 아~~~~~~~~~주 가끔 로딩실패가 뜨는 경우가 있으나 무시할만한 수준.
jQuery를 쓰고있고 웹서버 캐싱설정이 잘되어있지 않다면, 웹페이지 로딩성능 개선을 위해 고려할만하다.

아래 리스트에서 확인해서 필요하면 가져다 쓸 수 있다.

http://www.asp.net/ajaxlibrary/CDN.ashx
 

JTBC 종편 개발

기간 : 11.09 ~ 11.12
담당파트 : 뉴스 DB SP,인프라,CMS,서비스페이지,VOD, jquery 공통 ui script 작업
개발툴 : Visual Studio 2010
환경 : .Net Framework 4.0 + IIS 7.5 + MS-SQL 2008

이래저래 말많던(?) JTBC 종편 프로젝트

동시에 네군데의 회사에서 각자 서로의 종편사이트가 12월을 목표로 개발되었을거다.
대충하면 왠지 비교당할수도 있겠다는 생각 + 이젠 방송사 사이트도 만들어보는구나 라는
설레임

컨텐트 수급이 가장 큰 이슈였다.
개국일은 잡혔지만, 시간이 가도 채널 번호도 결정되지 않았고 프로그램도 확실히 정해진게 없었다.

담당했던 부분은 뉴스파트, 나중에 추가로 다른 파트에서 쓸 플레이어 부분 작업을 했다.

- 플레이어

방송사이트에서 동영상 플레이어가 차지하는 비중이 크다.
애초에 자체개발을 했어야 했지만, 개발에 주어진 프로젝트 기간 두달반내에 모든 인프라를 구성할 수는 없었다.  결국 유명한 jwplayer + plugin 를 구매해 도입하기로 했다.

스킨의 자유도도 있고, 쓸만한 광고 플러그인이 있어 나쁘지 않은 선택이었다.
덕분에 올초에 개발되었던 Display Ad 솔루션을 약간 수정해 동영상 광고도 커버할 수 있게 하고 두개를 연결시켜 동영상 광고 수익을 발생시킬 수 있는 환경을 큰 비용없이 구축할 수 있게 됐다.

이번 jtbc 프로젝트의 특징 중 하나는 패드의 접근성을 충분히 고려했다는거다.
(모바일용은 따로 만들었지만 아이패드나 갤럭시탭에서 보기엔 너무 광활하다)
플래시 대신 메뉴나 쇼케이스의 effect를 javascript로 구현했다. 다행히 복잡한 효과가 아니라 가능했다. iPad로 사이트에 들어왔을때 플래시 기반의 jwplayer 대신 html5의 video 태그를 활용해 거의 동일한 사용자 환경을 제공한다. 물론 갤럭시탭도 마찬가지...

- One-Time URL

CDN에서 영상소스를 url로 받아올 때 one-time url 솔루션을 거쳐 인증키를 파라미터로 같이 받아온다.
이렇게 해놓으면 해당 주소로는 호출이 설정에 따라 다르겠지만 1~3회 정도로 제한하거나 유효시간을 걸 수 있어 영상 url의 노출되어도 직접 재생을 막을 수 있다.

인증키를 받아 오는 방법은 소켓통신.
CDN에서 dll 하나와 샘플소스를 보내줬지만, 동작은 잘 됐지만 SVN에 커밋하려고 보니 연결된 모든 개발자가 해당 dll를 자기 pc의 레지스트리에 따로 등록해야 빌드가 깨지지 않았다. 이룬..
결국 유지보수 이슈를 고려해 비슷한 역할을 하는 모듈을 새로 만들기로 했다.
System.Net.Sockets를 참조해 별도의 dll import  없이 구현했다.
이래야 나중에 편하다.

 

- 뉴스

뉴스쪽 개발인원은 3+3.
따로 6층 회의실을 하나 전세(?)내서 모였다.
솔직히 처음에 걱정이 됐었다. 3+3이라고 쓴 이유는 3명이 아직 졸업을 앞둔 대학생 신입들이었기 때문.
"기존인력 셋, 신입사원 셋" 라고 해서 기존 3명을 프로젝트 초반에 바짝 긴장하게 만들었다.
결론부터 얘기하자면 3명의 신입들은 예상보다 잘해줬다.

이런저런 이유때문에 처음 목표는 일정도 일정이니 기존 중앙일보 신문사의 테이블 구조를 그대로 어떻게 잘 한번 묻어가서 UI쪽만이라도 어떻게 잘 마무리 해보자였으나....
기존 구조가 몇년동안 조금씩 조금씩 개선되어가는 과정에서 분석하고 변경하는데 시간이 너무 걸릴 것 같았다.  결국 기획서를 기준으로 모든 뉴스 테이블을 다시 설계했다. 
(내가 아니라 훌륭한 DBA느님께서)

물론 테이블 명세서와 기획서를 참고해 필요한 프로시저는 직접 만들었다.

기사면 html에 플레이어 호출 스크립트를 넣는 것은 jQuery 의 extends 를 활용해 기존의 컨텐트 소스를 건드리지 않으면서 옵션을을 추가할 수 있는 식으로 구현해봤다.

프로젝트 초반에 약간 부지런을 떨어 뉴스쪽 탭네비를 간단하게 구현할 수 있는 jQuery 기반의 공통 플러그인을 개발해놨다. 덕분에 프론트 ui쪽 스크립트 작업 시간을 많이 단축시켰다.

뉴스의 건당로그는 파일기반으로 구현했다.
처음엔 그냥 건당 insert 라는 만용을 부려볼까 했지만,
그러다 네이버 홈에 기사가 노출되었을때 DB가 죽으면 바로 대형사고다.
이런 백엔드 작업까지 모두 처음부터 할려니 힘들었지만 할 수 없다.

파일 로그를 쌓고 분석서버에서 처리후 주기적으로 로그DB에 업데이트한다.
이걸로 많이본기사, 많이본VOD 등의 데이터를 통계낼 수 있다.

이번에 특히 신경쓴 건 운영툴 쪽이었다. 기존 기획서보다 더 편한 방법이 생각나면
운영자들에게 이런건 어떠냐고 물어보고, 꼼수를 부려댔다.
(고백하자면 코딩도 그게 더 간편했다)
 
아무튼 정해진 기간내에 큰 문제없이 오픈한 프로젝트.