2009년 이후로 HTML5 는 예전 AJAX 때와 비슷하게 웹 개발의 대세 처럼 인식되고 있습니다. 이 추세는 애플/구글 이 HTML5 에 대한 적극적인 지원을 표명하면서 더욱 활발해 지고 있는데요. 애플/구글 둘다 모바일에서 아이폰/안드로이드로 대결구도가 펼쳐지면서 앞서거니 뒷서거니 HTML5 를 이용한 혁신을 이끌어 내고 있습니다.

전 개인적으로 모바일 웹 어플리케이션에 관심을 가지고, 모바일 시작페이지인 m.xguru.net sizac.kr을 비롯하여 , 지름도우미 with RedLaser 처럼 앱과 웹을 연동하거나, 아이폰에 사진으로 전화걸기 아이콘 만들기 – QuickGuru 처럼 데스크탑/모바일이 연동된 아이폰 웹 어플리케이션을 테스트해 왔습니다.

이제 HTML5 를 이용해서 좀 더 네이티브 앱과 비슷한 웹 앱(Web App)을 만드는 방법을 소개합니다.

아래 자료는 6월12~13일간 열린 KT 의 Econovation 개발자 캠프에서 먼저 발표를 했는데요. 아직은 국내 아이폰 앱 개발자분들이 Objective-C 를 이용한 네이티브 앱에 관심들이 많으셔서 그런지, 조금 생소한 주제였던듯 합니다. 하지만 모바일에서의 HTML5 를 이용한 어플리케이션 개발은 분명한 장점을 가지고 있습니다. 한번만 작성하면 아이폰/안드로이드/블랙베리/심비안등 여러개의 플랫폼에 큰 문제없이 바로 적용이 가능하다는 것이죠. 강의에서는 이 모바일에서의 HTML5 를 이용한 개발의 장점에 대해 설명하고 어떻게 앱을 만드는지를 소개하려고 노력했습니다.

HTML5 로 iPhone App 만들기

자료의 내용은 4가지 주제로 이루어 집니다.

• HTML5 – HTML5 자체의 기능에 대한 설명입니다. 이건 따로 웹사이트에 HTML5 slide 오픈소스를 수정해서 자료를 만들어 두었습니다. http://dev.xguru.net/html5 에서 보실수 있습니다.
• iPhone Web Application 아이폰의 웹 어플리케이션 작성방법에 대한 간략한 소개입니다. 기존 웹 사이트 관리자들도 참고하실만 합니다
• jQTouch, iUI , WebApp.Net 웹에서 아이폰 UI 스타일을 표현하기 위한 UI 프레임워크 들을 간략히 소개합니다.
• PhoneGap 웹 어플리케이션을 아이폰 네이티브 어플리케이션으로 만들어주는 Phonegap 프레임워크를 소개합니다.

기본적으로 HTML,CSS,Javascript 에 대한 약간의 지식은 있다고 가정하고 작성을 했구요. ^^;

강의는 먼저 HTML5 의 기능중에서 모바일에 중요한 기능들을 설명하고, 아이폰에서 웹 앱을 만드는 방법에 대한 소개, 그리고 웹에서 아이폰 스타일의 UI 를 작성하는 방법 , 그리고이렇게 작성된 웹 앱을 네이티브 앱으로 만들어주는 Phonegap 을 소개하는 순으로 진행됩니다. 제가 말이 좀 많고 빠른편이라 슬라이드에는 설명은 그리 많지 않습니다. ^^;

아무래도 발표용 자료로 만든것이라 슬라이드만 보고 전체를 이해하시기에는 조금 어려울듯도 한데요. 궁금한 부분 있으시면 저에게 문의 주세요.
앞으로 미진한 부분을 조금씩 보강해 나가겠습니다. 혹시 필요하시다면 이 주제에 대한 세미나 요청은 메일로 보내 주세요 🙂

제가 트위터에서 공유하는 각종 링크들에 좀 더 설명을 달고, 나중에 볼수 있도록 블로그에 재 포스팅 하려고 합니다.
이런 URL 링크 포스팅의 모델로 잡은건 DaringFireball 과 O’Reilly 의 Radar 의 Four Short Links 입니다.
전 그냥 GuruLinks 라고 붙여봤습니다. 링크는 한개또는 여러개로 될수 있습니다.

오늘은 약간 흥미있는 주제를 먼저 다루기 위해.. 재미난 YouTube 동영상 모음입니다.

• 구글 SearchStories – Toy Story 편
  구글이 슈퍼볼광고때 방영했던 가슴뭉클한 광고 Search Stories 의 토이 스토리 편입니다.
  영화홍보와 적절히 섞여서 재미와 정보를 동시에 주고 있네요. 혹시 못보셨다면 슈퍼볼 광고때 나왔던 Parisian Love 도 필감입니다.

• Contra 와 Tetris : Mashup
  오락실에서 주로 하던 곤두라(Contra) 와 테트리스 기억하시나요? 두개를 적절히 조합한 매쉬업 동영상입니다. 맨뒤까지 보시면 한개의 게임이 더 나옵니다 🙂

• 최고의 랩탑 – Best Laptop Ever
  누구나 꿈꾸던 최고의 랩탑. 저도 한대만 있었으면 합니다 🙂

• Azureus Rising
  디지탈 영화들이 많이 나오고 있는데, Proof of Concept 으로 만든 디지탈 영화 동영상입니다. 멋지네요.
  전체화면으로 사운드 크게 하고 보시길 권해드립니다.

앞으로 종종 트위터에서 소개한 링크를 재 소개 하도록 하겠습니다. 아무래도 트위터는 딱 그때 안보면 못보는 경우가 많더군요.
제 블로그를 구독 하시면 편하게 보실수 있습니다. 피드주소 : http://feeds.feedburner.com/xguru 입니다.
구독하시는 분들을 위해서 트위터에서는 소개 안한 몇몇 추가적인 링크도 올릴예정입니다. 위의 Azureus Rising 같은.. 많은 구독바랍니다! ^^;

트위터 및 RSS 리더 등을 통해 여러가지 정보를 접하다 보면, 사이트를 기억해두고 싶을때가 많습니다.
전 주로 구글 리더 와 트위터를 통해 정보를 얻는데요. 이때 정보에 따라 조금씩 사이트 정보의 저장방법이 달라집니다.

• 내용을 저장해두고 다시 읽어보고 싶은 좋은글 – Instapaper 서비스 이용하여 저장
• URL 저장해두고 언젠가 찾아보고픈 글 ( 주로 기술정보 ) – 북마크로 기록
• 트위터 에서 본 좋은 트윗 – Favorite 체크

이때 URL 북마크를 브라우저에 하는건 아무래도 검색도 어렵고 관리가 복잡해 지는거 같아서
제 트위터를 통해서도 소개해드린 Pinboard ( http://pinboard.in ) 을 사용중입니다.

Delicious 랑 비슷한 타입의 소셜 북마크 서비스인데요. 안티소셜 북마킹 이라고도 합니다.
딜리셔스처럼 소셜형태로 막 등록해서 공유하는게 아닌 자신만을 위한 북마크 모음? 이라고 생각하시면 될듯합니다.

단, 무료사이트는 아닙니다. 처음 가입시 딱 한번 돈을 내야하는데, 이 금액이.. 현재 유저수 * 0.001 로 올라갑니다.
그래서 현재 $6.34 이구요. 제가 가입할때는 $6.1 정도였던거 같습니다.
작년 6월엔가는 $2 였고 8월에 $4 였다고 하더군요. 하여튼 금액은 계속 올라가겠죠.
아주 신선한 수익모델이어서, 저도 나중에 뭐 만들면 따라해볼까 합니다. ^^;

이거 외에 1년 단위 결제가 가능한 Archive 멤버도 있는데 이건 북마크를 하면 그 사이트를 아예 내려받아서 저장해줍니다.
혹시나 북마크 해놓고 나중에 글이 지워져서 못보는 경우를 대비하는 서비스라고 보심 됩니다. 1년에 25불 입니다.

Simple & Fast 북마킹을 표방하는 서비스라, 사용해보면 정말 깔끔한 화면을 보여줍니다. 이미지가 거의 없습니다.

가입비를 받기때문에 다른 글을 찾아보는데 좋은 Recent 나 Popular 에도 스팸성 북마크는 잘 보이지 않구요.
( 딜리셔스는 스팸성 & 광고성 북마크가 너무 많아서, 그걸 통해 좋은 사이트를 발견하는건 많이 귀찮아졌습니다. )

이미지 전혀없는 깔끔한 인터페이스라 정말 빠르고, 각종 서비스와 연계가 잘 됩니다.

제가 주력으로 사용중인 아이폰 RSS 리더 Reeder 에서도 바로 연됩니다. 그냥 Post to Pinboard 클릭만 해주면 태그입력하고 바로 등록

북마크 사이트가 뭐가 다르겠어 라고 생각되는데 안에 보면 참 세세하게 신경을 많이 썼습니다.

1. Twitter 와의 연동
   • 특정 사용자의 트윗을 계속 보면서 링크가 있으면 그걸 모두 북마크에 추가하기
   • 특정 사용자의 Favorite 를 모두 북마크에 추가하기
   • * 여러명은 안되지만, 어떤 트위터 클라이언트에서든 그냥 Favorite 하는것만으로 북마크로 추가됩니다.
2. Delicious , Instapaper , Read It Later , Google Reader
   각각의 서비스에 등록되는 북마크를 자동으로 Pinboard 에 추가해 줍니다. 이거 연동이 너무 잘되어 있어서 모든 북마크를 모아두기에 딱 좋습니다.
3. 이메일로 북마크 등록도 가능 – 아이폰/블랙베리에서 링크만 그냥 메일로 던지면 됩니다.
4. 일반 북마크가 아닌 Note 형태로 등록도 됩니다. 특정 URL 에 대해서 아예 노트를 적어 놓을수 있어서 나중에 정리도 가능합니다.

현재로선 가장 큰 단점이.. 북마크 검색시 한글이 안됩니다. 개발자에게 문의했는데, 예전에 중국어 지원하면서 잘 되게 해놨는데 현재 또 오류가 난다고 합니다. 확인해서 수정해주겠다고 회신이 왔습니다.
수정되어서 한글 검색 아주 잘됩니다.

돈주고 사용하는 서비스가 조금 부담이 있긴 했는데, 써보고 나니 깔끔한 사용에 반해서 다양하게 쓰게됩니다.
수익모델도 신선하고, 텍스트기반의 깔끔한 인터페이스가 사용자에겐 더 편하게 다가올수 있다는걸 보여주는 좋은 서비스 Pinboard 입니다.

전 문제를 해결하는걸 좋아합니다. 제가 만든 프로그램들중 꽤 많은 것들은 특정 문제를 해결하기 위한 것들이구요.
문제를 해결하기 위한 정보검색도 좋아합니다. 그러면서 알게되는 어떤 종류의 지식이라도 머리에 담아두면 언젠가는 다 쓸모가 있더군요 🙂

최근에는 블로그와 트위터를 통해 많은 분들과 알게되면서 트위터 나 아이폰 및 각종 소프트웨어 개발에 관련해서 이런 저런 다양한 질문을 받게 되는데, 계속 되는 질문들에 대해 찾아 보기 쉬운 데이타 베이스가 있으면 어떨까 해서 사이트를 하나 구축해봤습니다.

구루에게 물어보세요 http://ask.xguru.net

제 도메인이 제 닉네임으로 되어있는지라, 서브도메인으로 ask 를 붙여서 http://ask.xguru.net 으로 만들었습니다.
사이트 이름은 그냥 구루에게 물어보세요 ( Ask XGuru ) 입니다. ^^

제가 사용하는 아이디 Guru (구루) 는 ‘빛‘을 의미하는 산스크리트어입니다. 이 빛은 어둠에서 길을 인도하는 존재란 뜻으로 큰 지식을 가진 스승님을 지칭합니다. 그래서 xguru는 모든걸(x) 잘하는, 많은 사람에게 도움이 되는 사람이 되어보자라는 의미로 지은 것입니다. 그냥 구루 또는 엑스구루 라고 불러주시면 됩니다 🙂

보시다 시피 화면의 구성은 최근에 개발자들 사이에 널리 알려진 StackOverflow 와 비슷합니다. StackOverflow 는 StackExchange 를 이용하면 비슷하게 구축은 가능합니다만, 호스팅 기반이고 영문에다 돈이 드는지라 ^^; PHP 기반의 오픈소스인 Question2Answer를 도입하여 한글화한 후 트위터 연동을 위해 약간의 수정을 하였습니다.

제가 답변을 주로 하겠지만, 혹시 저랑 같은 취미를 가지신 분들은 질문에 마음대로 답변 남겨주셔도 좋습니다 🙂

1. 질문만 할 때는 가입이 필요없습니다. 물론 회원가입후 질문하게 되면 질문/답변이 자신의 계정에서 관리되어 보기가 좋습니다 🙂
2. 회원 가입시에는 아이디/암호/이메일 만으로 가능합니다.
3. 회원으로 가입하면 질문/답변에 덧글&답변 등록이 가능합니다.
4. 이메일 알림기능을 지원하며, 질문에 대한 답변 등록/자신의 답변에 덧글 등록/자신의 답변이 선택 되는것 등을 알려줍니다.
5. 이메일 수신은 개별 질문마다 받기/안받기 선택 가능합니다.
6. Twitter 연동기능이 있습니다. 트위터 ID가 있으시면 회원 가입후 자신의 계정정보 화면에서 트위터 ID 연동이 가능합니다. (OAuth를 이용합니다)
   • 공식 트위터 계정은 @AskXGuru 입니다.
   • 질문 등록시 @AskXGuru 계정에 등록되며, 질문자가 트위터 아이디 인증된 사용자라면 by @ID 형태로 질문자도 알려줍니다.
   • 답변 등록시 @AskXGuru 계정에 질문자/등록자의 트위터 ID 가 기재되어 트윗되므로 질문자는 답변 등록시 바로 트위터로 알수있습니다.
   • 이 사이트의 회원ID 는 트위터 ID와는 다릅니다. 트위터 사용자가 아니라도 사용이 가능하게 하기 위해서입니다.
7. 질문자는 자신의 질문에 대한 답변중 최고의 답변 (추천 답변)을 선택할수 있습니다.
8. 각 활동내역은 점수로 관리되며, 차후에 제가 만들 다른 서비스와 연계할 예정입니다.
9. 아이폰에서도 잘 보입니다. 혹시 CSS 만으로 더 이쁘게 해주실 수 있는분은 도움주세요! 🙂

그냥 혼자 질답 리스트를 만든다는게 일이 약간 커져서 작업이 좀 오래걸렸지만, 깔끔한 오픈소스를 도입해서 계속 잘 사용할수 있을듯 합니다.
저에게 트위터나 메일로 질문주시는 내용들은 제가 정리해서 질문/답변으로 등록할 예정입니다.
많이 질문들 해주시고, 아시는 내용이 있으시면 답변도 달아주셔서 좋은 지식창고로 활용되길 기대합니다.

엉뚱한 개발자 구루 입니다.

트위터를 사용하다보면 동시에 여러명에게 DM을 보내야할 일이 가끔 생깁니다. 모임을 진행한다던지, 몇몇 지인들에게만 중요정보를 알린다던지 할때 말이죠. 공개트윗으로 날리긴 곤란하고, DM 으로 각각보내자니 힘들고.. 그래서 예전에 TweetGuru 의 MultiDM 이라는 서비스를 만들었는데요. 서버의 제약 문제 때문에 동시에 12명까지밖에 보낼수가 없게 되어있습니다. 그리고 계정정보들을 따로 저장해놨다가 하는등의 작업들이 필요했는데요. 많이들 쓰시는 Microsoft Excel 을 이용해서 DM 을 여러명에게 편하게 보낼수 있는 매쉬업을 공개합니다.

Excel 과 Twitter 매쉬업하기

지난번 파워포인트와 트위터 매쉬업하기 에서 사용했던 소스를 거의 그대로 활용합니다. VBA 코드로 되어있습니다. 아래와 같은 화면입니다.

너무 간단해서 보시면 사용법은 다 아실듯 합니다. ID 칸에 보낼사람 트윗ID를 @ 없이 적고, 메시지를 적으면 됩니다. 메시지가 빈칸이면 위칸것을 재활용합니다. 캡쳐에 있는 대로라면 @clien_net 과 @tweet_id8 까지는 “즐거운 설날되세요!” 를 받고, 나머지 @tweet_id9-16 은 “즐거운 설날되세요! 새해 복많이 받으세요!” 를 받게 됩니다. 버튼을 누르면 작은창이 떠서 트위터 ID 와 암호를 물어봅니다.

주의하실 점은 화면에 있는 대로 트위터 자체의 제한인 일일 DM 250 개 제한과 시간당 API 150번 호출제한을 염두에 두세요.
이 파일로 150명에게 DM 보내고 나면 트위터 클라이언트가 바로 리밋걸리게 됩니다. 한시간동안 웹으로 밖에 못쓰시게 되는거죠.

그리고 정말 중요! 트위터의 정책상 같은 DM 을 반복해서 보내면 스팸으로 인식되어 계정사용에 문제가 생길수도 있습니다. 조심해서 사용하세요.
혹시 이 파일로 인해 생기는 문제는 제가 책임지지 않습니다.

아래는 이 엑셀+트위터 매쉬업의 코드입니다.

Declare Sub Sleep Lib "kernel32" (ByVal dwMilliseconds As Long)
Function DM(touser, tweetmsg, uid, pwd)
     Dim objHTTP As Object
     Set objHTTP = CreateObject("Microsoft.XMLHTTP")
          objHTTP.Open "POST", "http://twitter.com/direct_messages/new.xml", False, uid, pwd
          objHTTP.send "user=" & touser & "&text=" & tweetmsg
          DM = objHTTP.responseText
     Set objHTTP = Nothing
End Function
Function getStringBetween(str, sstart, send)
    PosStart = InStr(str, sstart)
    PosEnd = InStr(str, send)
    If (PosStart > 0) And (PosEnd > 0) Then
        getStringBetween = Mid(str, PosStart + Len(sstart), PosEnd - PosStart - Len(sstart))
    Else
        getStringBetween = ""
    End If
End Function
Function Send_DM()
    Load frmLogin
    frmLogin.Show
    strUID = frmLogin.txtUID
    strPWD = frmLogin.txtPWD
    Unload frmLogin
    If Len(strUID) = 0 Or Len(strPWD) = 0 Then Exit Function
    ' Twitter Limits 250 DM per day. You can't exceed this
    Application.Cursor = xlWait
    For i = 2 To 151
        TweetID = Cells(i, 1)
        If Len(Cells(i, 2)) > 0 Then
            tweetmsg = Cells(i, 2)
        End If
        If Len(TweetID) > 0 Then
            res = DM(TweetID, tweetmsg, strUID, strPWD)
            Cells(i, 5) = res
            If (Len(getStringBetween(res, "id", "/id")) > 0) Then
                Cells(i, 3) = "성공"
            Else
                Cells(i, 3) = "실패"
            End If
        Else
            Exit For
        End If
        ' 혹시 몰라서 한건의 DM당 1초씩 딜레이를 뒀습니다. 트위터 서버측에 부하를 줄이기 위함입니다.
        ' 시간이 문제가 안되시는분은 5000 정도로 해서 5초 딜레이를 주시면 전혀 무리없을듯 합니다.
        Sleep 1000
    Next i
    Application.Cursor = xlDefault
End Function

가지고 계신 트위터 사용자들 주소록이 있다면, 간단히 ID 부분에만 복사하셔서 쉽게 메시지 보내시면 됩니다.
주의! 다운 받아서 오픈한후 보안경고 창에서 매크로 사용토록 확인해주셔야 기능이 동작됩니다.

▶ 엑셀파일 다운로드 : Excel + Twitter Multi DM 엑셀 다운받기 – 제 Dropbox 입니다.

( 혹시 Dropbox 사용 안해보신분들은 꼭 만들어 두세요 윈도우/맥/아이폰 모두 연동되는 쓰기편한 웹하드로 2 Giga 까지 무료입니다. )

어떻게 사용하시느냐에 따라 좋은 전달도구가 될수도, 나쁜 광고용 도구로 전락될수도 있습니다.
국내 트위터 사용자분들을 믿습니다. 이걸 광고 및 나쁜용도로 사용하지 말아주세요.

엉뚱한 개발자 구루였습니다.