도아 :: 블로그를 아이폰 웹 어플로 만들 수 있을까?

블로그를 아이폰 웹 어플로 만들 수 있을까? by 도아

2010-12-12 12:30 :: 컴퓨터
https://offree.net/entry/Making-Web-Apps-for-Blog

블로그를 웹 어플로

크롬 확장을 보면 확장 외에 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을 통한 질문이나 비밀댓글을 통한 질문을 아주 싫어한다. 여기에 '비밀댓글로 질문하고 전자우편으로 알려 달라'고 하면 난 이런 사람을 블로그 진상으로 본다. 내가 가장 싫어하는 질문이 비밀댓글로 질문하고 전자우편으로 답을 요구하는 경우이기 때문이다. 물론 다른 이유나 개인적인 연락을 위해 비밀댓글과 전자우편을 남기는 것은 말리지 않으며 질문이 아니라면 대부분 전자우편으로 연락하고 그 사실을 댓글로 달아 준다.