박종명의 아름다운 개발 since 2010.06

HTML5은 차세대 웹 표준으로 자리를 잡겠지만 현재까지는 표준안이 완성된 것은 아니다
따라서 각 브라우저에서 HTML5의 각종 태그와 API에 대한 지원이 서로 상이하다

http://www.html5test.com/ 에서는 현재 브라우저가 HTML5를 얼마나 지원하는지 검사해 준다
HTML5의 각 세부 요소별로 점수를 계산하여 300점 만점 기준으로 종합 점수를 보여준다

아래는 내 PC에 설치된 IE, 크롬, 사파리, 파이어폭스를 검사 해 본 결과이다

IE 8.0                   :  27 점
크롬 5.0                : 197점   
파이어폭스 3.6.6   : 139점
오페라 10.60         : 159점
사파리 5.0             : 207점

사파리가 가장 좋은 점수를 받았다
역시 플래시를 거부하고 HTML5 를 적극지원하겠다던 애플다운 행보인 것 같다
구글의 크롬 역시 높은 점수를 기록했으며 파이어폭스나 오페라는 그저그런 수준인 듯...
(뭐얌.. 지원할 꺼면 언능언능 지원하던지 않구선.. )

마이크로소프트의 경우 다음버전인 IE9에서는 HTML58를 전폭 지원한다고 했으니 다음에 검사한번
해 봐야 겠다

현재 프로젝트는 모바일 환경을 기반으로 한다
그리고 나에게 일차적으로 주어진 미션은 모바일 웹 개발 부문이다

개인적으로는 모바일 앱(App) 개발도 흥미를 가지고 있다
그 중에서도 구글의 안드로이드 개발을 조금씩 공부하고 있는데 프로젝트를 당장 구현하는 것이
아니라 진도가 좀 늦긴 하다. 그러나 매일 조금씩 공부하고 개인적인 앱도 한번 제작해 볼 요량이다

그런데 이.. 안드로이드.. 자바기반 개발 환경이다
이클립스로 개발하는데 비주얼스튜디오에 익숙한 나에게는 낯설기도 하고 툴의 기능이 조금 불편하기도 하다. 그리고 한글화가 안 되어 있다는 점과 MSDN 에 버금가는 완벽에 가까운 헬퍼(Helper) 문서가 없는 점도 아쉬운 부분이다

지금 책 한권 보며 진도를 빼고 있는데, 책 다보고 나서 간단한 앱 한번 구현해 볼 예정이다. 책을 아무리 보고 이해했더라도 직접 구현해 보면 많은 문제에 봉착하고 이러한 상황을 해결해 나가면서 기술이 점점 내 것이 되어가는 것이다

프로젝트에서 요구하는 것이 아니라서 진도는 좀 늦어질 것 같다

트위터를 보면 글에 인터넷 주소 링크를 심심찮게 볼 수 있다
그리고 대부분의 링크 주소는 꽤 심플하다

그런데 링크를 클릭해서 넘어가보면 다른 주소, 원래의 긴~ 주소 페이지로 이동한다
그럼 긴 URL 을 짧은 URL로 매핑 시켜주는 무엇인가가 있다는 예기인데...
트위터가 제공하는 걸까? 아니면 실제 컨텐츠 제공자가 지원하는 걸까?

팀장님으로 부터 조사 임무를 부여받고, 살펴 보게 되었다
아래는 조사 후 팀에 공유한 메일 내용이다

그나저나 이 조사 덕에 기존에 관심을 두지 않았던 트위터에 가입하게 되고 재미까지 느끼고 있다
조사하는 시간은 약 1시간 정도였는데, 트윗질은 하루 종일 했다는 ... ㅎ
------------------------------------------------------------------------------------------
아시다시피 트위터는 글 수 제한(140자)이 있습니다

외부링크주소(URL) 역시 글 수에 포함되기 때문에 URL 단축 기법이 이용됩니다

URL을 줄일 수 있는 방법이 필요한데, 현재 트위터에서 사용되고 있는 대부분의
단축 URL 기법은 트위터와는 무관한 제 3자에 의해 제공됩니다

제 3자에 의한 URL 단축 서비스 제공

기본적으로 URL을 단축해 주는 시스템은 제 3자에 의해 제공됩니다

URL을 단축해 주는 사이트가 굉장히 많으며 트위터는 물론 기사원문을 제공하는 곳과도
완전히 별개의 사이트 입니다. 아래는 단축 URL 에 대한 서비스 흐름도 입니다

단축 URL 을 제공하는 사이트 목록입니다(꽤 많네요..)

http://bit.ly http://tln.kr http://durl.kr http://tinyurl.com http://yep.it http://foldurl.com http://is.gd http://j.mp http://tr.im http://url.fm

http://qurl.net http://url123.com http://ataja.es http://lin.kz http://lnk.in http://shurl.net http://simurl.com http://tinyclink.com http://urlcut.com http://w3t.org http://2u.lc

컨텐츠 공급자가 직접 제공하는 Fancy Url

팬시 URL 기법은 이전부터 존재 했던 방식으로 유저가 URL을 기억하기 쉽도록 서비스 사에서 직접 단축 url을 제공하는 방식입니다

예를 들어, 네이버 블로그의 경우 다음과 팬시 url 이 제공됩니다

실제 주소: http://blog.naver.com/NBlogMain.nhn?blogId=mkex&

Fancy Url: http://blog.naver.com/mkex/

이는 블로그 주소는 물론 게시물 주소도 해당됩니다. 서비스를 제공하는 업체에서 직접
제공하는 방식입니다

이 개념을 적용해 컨텐츠 공급자 차원에서 트위터를 겨냥해 단축 url 을 제공해 주는 경우도
있습니다. 국내 위키트리라는 뉴스 사이트에서는 기사 원문에 대해 단축 url 을 직접 생성 해 주며 글 내용도 자동 생성해 줍니다

아래 그림과 같이 기사 원문에서 트위터 이미지를 클릭하면,

다음과 같이 트위터 글 쓰기 폼이 열리며 단축 주소와 글 내용이 자동 생성되어 열립니다

오픈 API를 이용한 연동 가능

트위터는 기능에 대한 API 를 오픈하고 있어 이를 이용하면 외부 사이트에서 트위터로 글을
등록할 수 있습니다

현재 대표적으로 트위터에 이미지를 등록하는 http://twitpic.com  에서 트위터의 Open API 를 이용해 이미지를 등록해 줍니다. 이 방식을 활용하면 우리의 서비스 글을 트위터로 올리는
편리한 프로세스를 (제한적이지만) 만들 수 있을 것 같습니다

아래는 트위터에 이미지를 등록해 주는 사이트 목록입니다

http://twitpic.com http://www.yfrog.com http://www.mobypicture.com http://www.twitgoo.com http://tweetphoto.com

이상 기본적인 조사입니다

추가 확인 사항 있으면 회신해 주세요

모바일 웹 사이트 개발을 위해 HTML5를 선택하기로 했지만, 이는 클라이언트 기술일 뿐 막상
서버측 기술은 어떤걸 쓰야 할지 고민이다

문제는 웹 표준이다. 모든 모바일 장비에서 원활히 돌아가야 하기에 표준을 준수하는게 중요하다

ASP.NET 을 사용하자니 각종 서버 컨트롤과 웸폼, 뷰스테이트, 포스트백 등의 매커니즘을 위해
닷넷 프레임워크 차원에서 자동 생성하는 HTML 태그들이 마음에 걸린다.
아직 상세히 테스트를 해 보진 않았지만 예상하기에 대략 호환성에 문제가 있지 않을까 싶다

그러면 ASP냐? 이건 뭐.. MS 자체에서도 기술지원을 그만 둔 과거 기술이기에 시대를 거스르고
싶진 않다. 그러면 JSP, PHP? 이건 내가 잘 모르는 기술이다. 물론 이 환경이 꼭 필요하다면 개발자를
채용해서 담담하도록 하면 되지만, 이 기술들이 필수로 필요하다는 이유가 없다

그러면 ASP.NET 을 ASP 처럼 구현한다?
즉 서버 컨트롤이나 자동 바인딩, 포스트 백 등등 ASP.NET 웹폼 기술은 전혀 사용하지 않고 요청에 대한 처리만 담당하고 프리젠테이션 부문의 디스플레이는 일일이 수동으로 하는 것이다

뭐, 대략 가능은 하겠으나 그리 땡기지는 않는다

우연히 회사 동료랑 예기하다가 MVC 패턴을 고려하게 되었다
닷넷에서도 MVC 프레임워크를 철저히(?) 제공해 주며 이전 서버컨트롤의 난무함(?)이 없다고 하니
일단은 가장 적합한 모델이지 않나 싶다

닷넷이 제공하는 MVC 프레임워크에서 프리젠테이션 컨트롤들과 데이터 연동을 어떤 식으로 하는지
확인해 봐야 겠다