Lomohome

티스토리 블로그 스마트폰에서 모바일페이지로 보게하기

Geunwon Mo 모근원 — Thu, 11 Feb 2010 13:18:39 +0900

아이팟이나 아이폰에서 티스토리 블로그를 보시는분들 많으시죠?
http://[일반주소].tistory.com
를 사용하시던 티스토리 블로거 님들은 신경쓰지 않으셔도
아이팟이나 아이폰에서 블로그 접근하면 모바일용 페이지로 보입니다.
스마트폰에서 블로그로 접근하면 모바일용 페이지로 보입니다.

- 수정 : 현재나와있는 거의 모든 모바일기기의 userAgent 를 검사하는 방식으로 변경했습니다.
http://en.wikipedia.org/wiki/List_of_user_agents_for_mobile_phones

그런데 저처럼 티스토리에 자신의 도메인을 연결해서 쓰시는분들은
다음 그림에서처럼 자동으로 모바일 페이지로 이동이 안되고 일반 웹페이지가 나왔었지요.

이때 자바스크립트 몇줄만 스킨에 넣어주면 모바일용 페이지로 이동하게 만들 수 있습니다.
이 방법은 저처럼 lomohome.com 이나 www.lomohome.com 등의 도메인을 티스토리에 연결하신 분께 해당됩니다.

관리자모드 - 스킨 - HTML/CSS 편집에서
HTML 의 <head></head> 태그 사이안에 다음의 자바스크립트를 넣으면

블로그 접근시 유저에이전트를 검사하여 스마트폰이면
모바일 사이트로 이동을 하게 합니다 :-)

<script language="JavaScript">
//모바일 페이지로 이동.
//http://en.wikipedia.org/wiki/List_of_user_agents_for_mobile_phones
var uAgent = navigator.userAgent.toLowerCase();
var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce',
        'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile');
for(var i=0;i<mobilePhones.length;i++)
    if(uAgent.indexOf(mobilePhones[i]) != -1)
        document.location = "http://"+ location.host +"/m" + location.pathname;
</script>

주의하실점은 위의 빨간색에 이탤릭체로 표시된 부분은
http://[원래티스토리주소].tistory.com/m
으로 해주셔야 한다는것 입니다 :-)
url 을 가져와서 가는방법으로 수정되었습니다.

* 현재 제 블로그에서 [페이지 소스보기] 로 보셔도 해당 소스를 보실 수 있습니다.

작업 후 아이팟 터치나 아이폰에서 자신의 블로그로 접근하면
작업 후 스마트폰에서 자신의 블로그로 접근하면
이렇게 모바일용 페이지로 이동합니다 :-)

모바일용 웹페이지는 작은 해상도에 맞게 이미지등도 리사이즈 해줘서
느린 모바일기기에서 최적의 상태로 블로그를 볼수 있게 합니다.

간단히 스크린샷으로 알아보는 하나은행 아이폰 뱅킹

Geunwon Mo 모근원 — Thu, 10 Dec 2009 09:55:47 +0900

국내 은행 최초로 하나은행에서 아이폰/아이팟 용 모바일뱅킹 어플이 나왔습니다.
이름은 하나 N Bank 라는군요.
아시는 바와같이 해킹 (즉 탈옥)된 아이폰/팟 (이하는 편의상 아이폰이라 하겠습니다) 에서는 사용이 되지 않는다네요. 보안을 위해서라 생각됩니다.
처음엔 한국 스토어에만 올라왔으나 현재는 미국스토어에서도 내려받기가 가능하다고 합니다.
가격은 당연히 Free 이구요.
어플스토어에서 "hanabank" 를 검색하시면 됩니다.
http://itunes.apple.com/us/app/id340826757?mt=8 [바로가기 링크]

실행하면 기동화면이 나오고 해킹여부를 확인후 공인인증센터에서 인증서를 내려받을수 있습니다.
이니텍의 모듈을 사용하기때문에 안타깝게도 Windows 기반의 PC 에서 작업을 해야하네요.
공인인증서를 아이폰에 넣는 방법은 하나은행 홈페이지에 상세히 설명 되어있습니다.
http://www.hanabank.com/smart

이제 공인인증서를 내려받았으니 기본적인 거래내역 조회와 이체화면을 알아보겠습니다.

공인인증서 작업이 완료된 후엔 이렇게 인증서 로그인을 통해 뱅킹서비스를 시작하게됩니다.

인증서 선택후 인증서 비밀번호를 입력하는 화면입니다.

12시부터 5분간은 서비스가 안된다네요 -_-;

최초 사용시엔 이렇게 약관페이지가 나오며
약관에 동의하여야 스마트폰 뱅킹 서비스를 받을 수 있습니다.

스마트폰 뱅킹 서비스를 가입하기 위해 다시 한번 공인인증서와 보안카드를 넣는
보안매채인증 작업을 합니다. OTP 이용자는 OTP 번호 입력창이 뜨겠네요.
탈옥을 하면 사용할수 없는 모바일 뱅킹이라 Backgrounder 를 사용할수 없습니다.
저처럼 아이폰에 보안카드 번호를 보안어플을 이용하여
보관하시는 분들은 조금 불행한겁니다.. 실물 카드를 가지고 다니는편이 편하겠네요.

*간단하지만 복잡한-_-팁을 하나 알려드리겠습니다.
보안카드란것은 한번 요구번호가 나오면 (위에서는 19,18) 정확한 보안카드번호를 넣어서 거래를 하기전엔 바뀌지 않습니다. 따라서 번거롭지만 아무데나 이체를 하는척해서 보안카드 요구번호를 알아내고 어플 종료후, 보안카드 어플에서 보안카드 번호를 확인한후 다시 은행어플로 와서 진행하면 아까 요구한것과 같은 보안카드 요구번호가 나올겁니다. 조금 귀찮지요..

어찌되었건 사용완료 하고 이젠 사용을 하면 됩니다 :-)

예금계좌 목록조회 화면입니다.
하나은행에 가지고있는 통장목록이 나오는군요.
탭으로 예금,펀드,대출,외환,자산의 보기가 가능합니다.
통장에서 오른쪽의 > 버튼을 누르면 해당 통장에서 할수있는 바로가기 버튼들이 나옵니다.
월급통장의 > 를 탭하니 계좌정보,거래내역,즉시이체 버튼이 나오는군요.

계좌정보를 조회한 화면입니다.
해당 통장의 상세정보가 나옵니다.

거래내역 조회를 해보겠습니다.
인터넷뱅킹과 화면이 그리 다르지 않습니다.
계좌가 여러개이신 분들은 계좌번호선택에 번호만 표기되어 불편한 점도 있을 수 있겠네요.

조회 결과입니다.
출금된 내역은 - 로, 입금된내역은 + 로 표시가 되네요.
아이폰을 이용하면 어디서든 입출금 내역을 확인할수가 있습니다.

자금이체의 첫화면입니다.
인터넷뱅킹과 화면이 다르지 않습니다 :-)
'자주쓰는 계좌' 나 최근입금계좌를 사용이 가능하네요.
자주쓰는 계좌를 눌러보겠습니다.

인터넷뱅킹에서 관리되는 자주쓰는 계좌와 완전히 동일합니다.
자주쓰는 계좌는 이렇게 등록하여 쓰면 클릭만으로 은행과 계좌번호가 자동입력 됩니다.

은행 선택화면입니다.

금액이나 계좌번호를 입력할땐 Qwerty 키보드가아닌 숫자키패드가 나타납니다.
상당히 편리한 인터페이스네요 :-) 개발자분들의 노고와 세심함이 느껴지는 부분입니다.

어찌돼었든, 이체를 진행해보겠습니다.
수취조회를 한 화면입니다. 인터넷뱅킹 이체의 step 2 에 해당하겠네요.
여기서 받는 분을 확인하고 '진행'하게되면 실제 이체 프로세스가 진행됩니다.

보안카드 입력화면이네요.
실물카드를 가지고 있지 않고 폰에 보안카드 번호가 있다면 조금 불편함이 예상됩니다.
보안카드를 입력하고 다시한번 공인인증서를 제출하게 됩니다.

이체가 완료된 화면입니다.
속도도 3G 망을 이용하여 테스트 했는데 크게 불편이 없는 속도였습니다.
10여분넘게 인터넷뱅킹을 테스트 했었는데 사용된 패킷은
일반 > 사용내역 확인시 2메가 남짓 된듯 보입니다. 2MB 정도 사용하니 웬지 찝찝하네요 -_-..

이 포스팅으로 간단히 하나은행 아이폰 뱅킹에서 거래내역 조회와 이체화면을 살펴봤습니다.
인터넷뱅킹을 사용할때 주로 하는 거래가 이 두가지 거래라고 생각합니다.
이 외에 지로/공과금 납부나 카드서비스, 외환, 펀드등의 서비스가 곧 추가될것으로 보이니 국내 은행중 첫 아이폰 뱅킹서비스를 선보이는것 치고는 굉장한 완성도를 보입니다 :-)
이로서 아이폰을 사용하는데 불편함이 하나 해소되었네요.

괴물 핸드폰 아이폰?

Geunwon Mo 모근원 — Wed, 09 Dec 2009 21:32:00 +0900

그동안 써왔던 핸드폰중에 사진이 이렇게 나오는 핸드폰은 아이폰이 처음인듯 싶다.

출근길 지하철 안에서. 꽉막히던 강변북로.

새벽에 집을 나서면서

점심먹고 나와 식당앞에서 한컷

명동에 함박눈 내리던 오후

사무실 로비에 자리잡은 크리스 마스 트리

Apple iPhone 3Gs / sRGB / Free PhotoFilters +photoshop.com / 2009. 12

애플 아이폰

Geunwon Mo 모근원 — Thu, 03 Dec 2009 09:31:15 +0900

아기다리고기다리던 아이폰이 왔습니다 :-)

드디어 왔구나~ iPhone 3Gs.

정갈한 32기가 화이트입니다. 밥주고 있지요 :-)

이날 같이 배송된 애플 "매직 마우스"
버튼과 스크롤휠이 없고 멀티터치 펑션이 들어가있습니다.

사무실 책상샷. 절반은 애플제품이군요 :-)

아이폰 구입으로 방출된 아이팟 터치 1세대.
첫월급 받아서 산이후 애지중지한게 2년이 되어가네요 :-)

안녕~

박스에 담아 고이고이 빠이빠이 ㅎ

그나저나 핸드폰 산지 5개월만의 기기변경이라 기기할부 20만원 + 위약금 12만원을 냈더니
아이폰을 구입하기 위해 출혈이 심했다는 생각도 드네요 ;-(

SIGMA DP2 / RAW / sRGB / SPP 3.3 + Photoshop CS3 / 2009. 12. 1

영등포 교보문고

Geunwon Mo 모근원 — Wed, 04 Nov 2009 15:13:17 +0900

새로생긴 타임스퀘어 안의 교보문고

교보문고 안에 까페도 있어서 책들을 가져다 커피한잔하면서 볼수있어 좋다~ ^^

공무도하 김훈작가님 싸인회

SIGMA DP2 / RAW / sRGB / SPP 3.3 + Photoshop CS3 / 2009. 11. 1

프로그래머의 자리

Geunwon Mo 모근원 — Wed, 04 Nov 2009 15:13:07 +0900

항상 깔끔하려고 노력하는 사무실에서 내 자리
살짝 설정샷

이번에 구입한 맥북. 이걸로 Objective-C 공부중~

메인 노트북에선 회사 작업용. 작업용으로 쓰기엔 너무 아깝다 ㅠㅠ

IT분사 저지!(?)

SIGMA DP2 / RAW / sRGB / SPP 3.3 + Photoshop CS3 / 2009. 11. 4

가을 북한산 등산

Geunwon Mo 모근원 — Fri, 30 Oct 2009 12:56:47 +0900

빨리 가버릴것 같은 늦은 가을에 북한산 등산

아직 초반 즐거운 등산길~

쌩얼 작렬

등산 매니아. 소영.

은평 뉴타운 바라보면서 식사하시는 분들

난 보기만해도 후덜덜 하던데 ㅠ

족두리봉에서 소영이

첫번째 봉우리에서 쩔은 저질체력 보유자

오늘의 목표(?)

머리 묶고 다시 출발 채비

간식 먹는 햄스터

다리 한번 잘못 딪으면 한방에 훅

쉴만큼 쉬고 다시 이동 전에 기념촬영

저~기 보이는곳이 방금 사진찍었던 족두리봉

향로봉 가는길

가다가 지쳐서 커피타임

럭셔리한 맥심

사실 커피마시기전에 집에서 구워온 만두도 있었는데 ㅠ

두번째 봉우리인 향로봉 찍고 비봉가는길

북한산

북한산 파노라마
* 사진을 클릭한후 크게 보시길 추천

북한산은 돌산이어서 단풍나무는 잘 없었지만 (아얘 못본것 같기도..)
그래도 울긋 불긋하니 가을분위기는 났었다~

향로봉

또 걸어걸어 비봉도착. 젊은 나이에 죽기 싫어 올라가지않았다.

사실 비봉은 119 대원님께서 못올라가게 막고 있었는듯.

세번째 봉우리인 비봉을 찍고 사모바위

단풍구경 왔다가 너무 무리하는것 같아서 승가사 찍고 저녁식사 고고싱

승가사

내려오는길에 마눌님이 싸온 도시락.
산에서 먹는 밥은 정말 너무 맛있다 :-)

내려와서 종로 청계천에와서 노숙모드

등산~ 끝~

SIGMA DP2 / RAW / sRGB / SPP 3.3 + Photoshop CS3 / 2009. 10. 25

작업환경

Geunwon Mo 모근원 — Thu, 29 Oct 2009 10:45:20 +0900

Objective-C 와 Cocoa 를 해보며 취미로 iPhone, iPod 프로그래밍을 해보려고 산 맥북.

훌륭한 테스트 베드, 동생방의 맥북 프로

가지고 다니면서 작업중인 맥북 화이트
* 사진감상 포인트는 너저분한 남자의 방들 -_-;

SIGMA DP2 / RAW / sRGB / SPP 3.5 + Photoshop CS3 / 2009. 10. 21

홈메이드 스파게티

Geunwon Mo 모근원 — Thu, 29 Oct 2009 10:41:31 +0900

400일날 저녁 조촐한 홈메이드 스파게티
찍어놓고 보니 사진은 이상한데 맛은 좋았다. 에헴.

토마토 소스

까르보나라

SIGMA DP2 / RAW / sRGB / SPP 3.5 + Photoshop CS3 / 2009. 10. 11

강화도 전등사

Geunwon Mo 모근원 — Wed, 28 Oct 2009 11:15:33 +0900

지호형네와 강화도로 슬슬 드라이브 갔던날

전등사, 형수와 소영이

형수와 지호형

마눌님 빵! 터지셨음.

귀여운 표정 작렬(?)

저돈이 내돈이었으면 -_-;;

봉황

노출증 나한

알뜰한 스님

SIGMA DP2 / RAW / sRGB / SPP 3.3 + Photoshop CS3 / 2009. 10. 10