블로그를 웹 어플로
크롬 확장을 보면 확장 외에 Web Apps이라는 것이 있다. HTML이 계속 발전하면서 과거 원시 코드로만 가능하던 것들이 자바스크립트와 HTML만으로 구현할 수 있게 바뀌었기 때문에 등장한 웹 어플이다. 그런데 블로그도 이런 웹 어플처럼 만들 수 있다. 텍스트큐브는 이미 아이폰 페이지를 지원하기 때문에 실행할 때 필요한 화면과 아이콘만 있으면 가능하다. 이 글에서는 블로그를 웹 어플처럼 만드는 방법을 소개한다.
블로그 웹 어플
오늘 아이폰(iPhone)에서 쉽게 티브를 볼 수 있는 사이트[1]를 만들었다. 처음에는 책갈피 개념(Bookmark)으로 간단히 사이트 목록만 출력하는 사이트를 만들 생각이었다. 실시간 주소를 알면 MoSS에 등록해 사용하면 된다. 그런데 사이트로 만든 이유는 일부 채널은 실시간 주소에 세션 ID가 포함되어야 하기 때문이다. 즉, 실시간 주소만으로는 시청이 불가능하며, 추가로 시청하는 시점에 세션 ID가 있어야 하기 때문에 실시간 주소와 현재 시점의 세션 ID를 결합한 채널 목록을 만드는 것이 목적이었다.
모든 일이 다 마찬가지지만 일단 이렇게 사이트를 만들고 나니 욕심이 생겼다. 아이폰에서 시청 가능한 사이트이니 이왕이면 아이폰에서 잘 동작하는 사이트를 만들고 싶었다. 아이폰에서 잘 동작하는사이트를 만들고 나니 이번에는 아예 웹 어플(Web Apps)처럼 만들고 싶어졌다. 그래서 결국 오늘 만든 아이폰 TV(iPhone TV)라는 사이트를 아예 웹 어플로 만들었다. 다음 동영상을 보면 알 수 있지만 웹 사이트지만 일반 아이폰 어플처럼 스프링보드의 아이콘을 터치하면 시작화면이 뜨며 어플이 실행되는 것을 알 수 있다.
블로그 아이폰 웹 어플
블로그를 웹 어플로 만들었다. 아이폰으로 접근할 수 있는 아이폰 전용 UI에 어플용 아이콘과 시작화면을 더한 것이다. 그러나 외형적으로는 진짜 아이폰 어플처럼 동작한다.
블로그 웹 어플 만들기
최근 앱 스토어(App Store)에 올라온 어플을 보면 블로그 어플도 상당수 된다. 이 블로그에서 리딤코드 이벤트를 한 잠들 수 없는 밤의 기묘한 이야기는 아예 유료 앱으로 판매되고 있다. 그런데 텍스트큐브[2]를 사용하는 사람이라면 굳이 이런 앱을 만들 필요가 없다. 텍스트큐브 자체에서 이미 아이폰 UI를 제공하기 때문이다. 따라서 텍스트큐브(TextCube)에서 지원하는 아이폰 UI와 오늘 소개하는 기능을 더하면 자신의 블로그를 쉽게 웹 어플로 만들 수 있다. 방법도 상당히 간단하다. 자세히는 모르겠지만 시간이 지나면 이 기능 역시 텍스트큐브의 기본 기능이 되지 않을까 하는 생각[3]도 든다.
좋아하는 편집기(예: EditPlus)로 다음 파일을 불러온다.
/library/view/iphoneView.php'printIphoneHtmlHeader' 함수를 찾아 <head>...</head> 사이에 다음 내용을 추가한 뒤 저장한다.
<link rel="apple-touch-icon" href="<?php echo $service['path'];?>/image/iPhone.png" /> <link rel="apple-touch-startup-image" href="<?php echo $service['path'];?>/image/iPhoneStart.png"/> <meta name="apple-mobile-web-app-capable" content="yes"/>
태그 설명
<link rel="apple-touch-icon" href="http://host.dom/이미지경로/iPhone.png" >
먼저iPhone.png라는 이미지를 만들어 서버의/image폴더에 올려야 한다. 파일 이름이나 경로를 바꾸려고 하면 태그의 경로를 바꾸면 된다. 아이폰 사파리(Safari)에서 '홈 화면 추가'를 터치하면 스프링보드에 추가될 아이콘의 경로를 설정하는 항목이다. 아이폰 3GS(iPhone 3GS)에서 '57x57' 크기의 이미지였지만 아이폰 4(iPhone 4)를 지원하기 위해서는 '114x114' 크기의 이미지를 만들어 올리면 된다. 이 태그를 쓰지 않고apple-touch-icon.png라는 이미지를 루트 폴더에 올려도 된다. 또apple-touch-icon대신에apple-touch-icon-precomposed를 사용할 수도 있다.<meta name="apple-mobile-web-app-capable" content="yes">
웹 어플을 전체화면으로 실행할 수 있도록 만든다. 이 항목을 추가하지 않으면 홈 화면에 추가한 뒤 웹 어플을 실행하면 화면 가장 위에 주소 표시줄이 표시된다. 이 태그를 추가하면 주소표시줄이 사라지기 때문에 진짜 아이폰 어플처럼 보인다. 한가지 주의 할 것은 이 방식으로 웹 어플을 만들고 일부 링크를 클릭하면 웹 어플이 종료되며 사파리가 실행된다. 즉, 외형적으로 아이폰 어플에 더 깝게 만들 수 있지만 조금 더 불편한 셈이다.<link rel="apple-touch-startup-image" href="http://host.dom/이미지경로/iPhoneStart.png">
<meta> 태그를 이용해서 진짜 아이폰 어플처럼 전체화면으로 실행되도록 했다면 이 태그를 이용해서 초기화면까지 지정하는 것이 좋다. 역시iPhoneStart.png라는 파일을 만들어 올려야 한다. 이미지의 크기는 꼭 '320x460'여야 한다. 한가지 주의할 것은 이 태그는 위의 <meta> 태그를 지정해야지만 의미를 갖는다.
블로그 웹 어플 추가하기
텍스트큐브 소스에 위에서 설명한 세개의 태그를 추가하면 이제 블로그를 진짜 웹 어플처럼 스프링보드에 추가할 수 있다. 이미 아이폰에서 공중파 및 케이블 보기라는 글에서 한번 소개한 내용이지만 다시 한번 설명하면 다음과 같다.
- 블로그 아이폰 UI(https://offree.net/i)에 접속한 뒤 '즐겨찾기' 단추를 터치하고 '홈화면에 추가' 단추를 터치한다.
- 블로그 이름을 적당히 바꾼 뒤 '추가' 단추를 터치한다.
- 스프링보드(SpringBoard)에 추가한 아이콘을 터치하면 다음 그림처럼 블로그가 웹 어플(Web Apps)처럼 실행된다.
가끔 달리는 댓글 중 "블로그에서 모바일을 지원하지 않느냐?"는 글을 종종본다. 이 블로그도 모바일 페이지를 지원한다. 다만 아이폰으로 접속할 때 자동으로 아이폰 페이지로 이동하는 페이지를 죽여놓았을 뿐이다. 자동 접속 기능을 죽여놓은 이유는 아이폰으로 블로그를 관리하며 이 자동접속 기능이 오히려 불편하기 때문이다. 이 블로그에서 지원하는 모바일 페이지는 다음과 같다.
남은 이야기, 아이폰 TV
아이폰에 DMB가 없다는 것이 단점인지 모르겠다. 주변에 아이폰을 사용하는 사람이 참 많다. 그러나 이런 사람들 중 DMB가 없다고 불편해 하는 사람은 별로 보지 못했다. 그러나 DMB가 아예 필요없는 것은 아니다. 며칠 전 한나라당의 날치기 예산 단독처리가 있었다. 이명박 정부가 들어선 뒤 3년 내내 날치기 로만 예산을 통과시키고 있다. 이런 소식은 아무래도 신문 보다는 YTN과 같은 뉴스 전문 채널이 빠르다. 따라서 이럴 때는 DMB가 필요하다. 시사에 관심없어도 관심사가 다른 사람이라면 케이블이나 공중파가 더 궁금할 것이라고 생각한다.
바로 이런 수요를 생각해서 쓴 글이 아이폰으로 TV를 시청하는 모든 방법라는 글이다. 이 글을 쓸 당시에는 아이폰으로 TV를 시청할 수 있는 방법이 많았다. 전용 어플을 써도 되고, 웹 어플[4]을 써도 된다. 또 실시간 주소를 이용해서 MoSS에 등록해서 보는 것도 편하다. 그런데 이 글의 여파인지 모르겠지만 이 글을 쓴 뒤 전용 어플을 제외한 나머지 방법이 대부분 막혔다. 많은 사람들에게 추천한 i라이브는 폐쇄됐고 비슷한 기능의 트랜드 TV는 원래의 사이트 링크나 어플 추천으로 바뀌었다. 이렇다 보니 내가 불편했다.
그래서 만든 사이트가 아이폰 TV라는 사이트이다. 공중파, YTN, 케이블등 약 39개의 채널을 시청할 수 있는 사이트이다. 물론 이 사이트를 공개할 생각은 없다. 공개하면 i라이브나 트랜드TV와 같은 전철을 밟을 것이 뻔하기 때문이다. 이런 이야기를 하면 블로그나 트위터 DM으로 사이트나 실시간 주소를 알려 달라는 글이 날라온다. 그러나 한 가지 중요한 것이 있다. 난 블로그를 통해 공개할 수 없는 내용은 누구라도 알려주지 않는다는 점이다. 즉, 이런 사이트를 만들고 실시간 주소를 알고 있어도 블로그의 비밀댓글, 트위터의 DM으로 요청해도 아무 소용이 없다.
특히 난 트위터의 DM을 통한 질문이나 비밀댓글을 통한 질문을 아주 싫어한다. 여기에 '비밀댓글로 질문하고 전자우편으로 알려 달라'고 하면 난 이런 사람을 블로그 진상으로 본다. 내가 가장 싫어하는 질문이 비밀댓글로 질문하고 전자우편으로 답을 요구하는 경우이기 때문이다. 물론 다른 이유나 개인적인 연락을 위해 비밀댓글과 전자우편을 남기는 것은 말리지 않으며 질문이 아니라면 대부분 전자우편으로 연락하고 그 사실을 댓글로 달아 준다.
Trackback
Trackback Address :: https://offree.net/trackback/3392
Comments
-
뗏목지기™ 2010/12/12 13:28
근데 사람이란 게, '그런 게 있다'는 얘길 들으면 알고 싶어지는 게 인지상정인지라. ㅎㅎ
도아님이 아이폰TV 만들었단 얘길 들으니 차라리 만들었다는 얘기도 하지 마시지 하는 원망이. 어흑.
전 그냥 기억에서 지울라구요. ㅋ
암튼 몇 시간 안 남은 주말 잘 보내셔요~ ^^ -
-
도아 2010/12/12 14:31
아무 내용이 없어서 뭔소린지 모르겠군요.
http://offree.net/3392 접근 가능합니다.
http://offree.net/m/3392 접근 가능합니다.
http://offree.net/i/entry/3392 접근 가능합니다.그런데 뭐가 메인으로 넘어간다는 것인지요? 원 블로그 페이지, 모바일 페이지, 아이폰 페이지 모두 엔트리로 바로 접근하는 것이 가능합니다. 본문의 링크는 시스템이 만드는 것이 아니라 사용자가 달아주는 것이니 이것까지 처리하기는 힘들고요.
-
-
나비 2010/12/12 15:27
저도 NAS로 돌리는 웹서버에 저렇게 해두고 지인몇몇이랑 쓰고 있어요.. ㅎㅎ 그나저나 방송사이트는 참 아쉽죠. 족족 다 막혀서... 정 보고픈 사람들은 그냥 오만원정도하는 모듈하나 사서 보는게 나을지도 모르겠습니다. 티빙어플로 보시는 분도 꽤 있더군요. :)
-
홀릭 2010/12/13 01:39
최근 동영상을 시청하던도중 간지나는 도아님의 테마를 보았습니다. 락화면에서 테마가 움직이던데 너무 예뻐서 움직이는것에대한것을 강의 해주실생각은 없는지 궁금하네요 ^^;
-
-
-
-
-
ㅡㅡ 2010/12/14 20:10
죄송한데 그럼 혼자쓸 블로그라면 비공개로 혼자쓰면 되는건데 공개처리를 햇다는건 다른사람과 소통을 하고싶다는 것밖에 이해가 안되고 그럼 나만 알고잇는 정보는 혼자서 꿀빨겟다는심보밖에 안뵈네요 ㅎㅎ 어차피 그런 티비사이트류는 트래픽많이걸리면 보는데 제한이 많이 생기는지라 뭔뜻인진 이해하겟다만 참 블로그관리 이쁘게 하시네 ㅋㅋ
-
도아 2010/12/15 06:13
죄송한데 그럼 혼자쓸 블로그라면 비공개로 혼자쓰면 되는건데 공개처리를 햇다는건 다른사람과 소통을 하고싶다는 것밖에 이해가 안되고 그럼 나만 알고잇는 정보는 혼자서 꿀빨겟다는심보밖에 안뵈네요 ㅎㅎ
니가 쓴 글 니가 읽어 보렴. 무슨 뜻인지는 알고 썼니?
혼자쓸 블로그라면 비공개로 혼자쓰면 공개처리를 햇다는건 다른사람과 소통을 하고싶다는 것밖에 이해가 안되고
머리는 장식이 아니란다... 혼자 쓸 블로그가 아니지. TV 사이트와 블로그가 뭔지 모르니? 또 블로그는 공개를 했으니 너 처럼 머리를 망치로만 사용하는 사람도 댓글을 달 수 있는 것이지? 그런데 모르겠지? 벌써 12월 중순이 지났는데 이해는 여전히 먼산이지?
어차피 그런 티비사이트류는 트래픽많이걸리면 보는데 제한이 많이 생기는지라 뭔뜻인진 이해하겟다만 참 블로그관리 이쁘게 하시네 ㅋㅋ
트래픽이 무슨 뜻인지는 아니? 아이폰 TV 사이트는 링크만 제공하기 때문에 트래픽은 아주 미미하단다. 그런데 공개하지 않는 것은 트래픽 때문이 아니라 다른 이유때문이지. 그런데 역시 무슨 뜻인지 모르겠지? 한가지만 묻자. 네 엄마 너 낳고 미역국 드셨니? 참고로 너 같은 아이들 때문에 나라가 병드는 것이란다. 이런 것을 병국이라고 하지.
-
술픈남자 2011/01/15 16:02
전에 도아님 블로그에 방문했다가 손가락만 좀 팅기고 결국 답글 하나 못 달았는데 이렇게 용기내서 글 답니다. 좋은 정보 감사합니다.. 말씀하신 텍스트 큐브 할고 여타 웹블로그 사이트에서도 위와 같이 쓸 수 있는지 궁금하네요.. 무지한 글 올려 죄송합니다
-
후끈달끈 2011/03/25 14:57
안녕하세요?
아이폰에 적합한 웹 개발을 검색하다 우연히 들르게 되었습니다. 좋은 글 잘 보고 갑니다.^^
Facebook