트위터와 파워포인트 매쉬업하기 – Twitter + Powerpoint Mashup

트위터 API를 활용한 국내외 다양한 매쉬업 사례에서 사용한 파워포인트 파일엔 원래 매크로를 이용한 트위터 매쉬업이 들어가 있었습니다만, Slideshare 가 매크로가 포함된 파일을 받아주지 않아서 제거하고 올렸습니다. 이번엔 이 파워포인트 + 트위터 매쉬업에 대해서 소개드리겠습니다.

파워포인트에는 꽤 오래전부터 VBA(VisualBasic for Applications) 방식의 매크로를 사용할수가 있는데요. (VBA 편집기 창 여는 단축키는 Alt + F11 입니다. ) 이걸 이용하면 간단하게 트위터에 글 남기는 함수를 만들수 있습니다. 트윗남기기 소스는 다음과 같습니다.

Function Tweet(tweetmsg, uid, pwd)
     Dim objHTTP As Object
     Set objHTTP = CreateObject("Microsoft.XMLHTTP")
          objHTTP.Open "POST", "http://twitter.com/statuses/update.xml", False, uid, pwd
          objHTTP.send "status=" & tweetmsg
          Tweet = objHTTP.responseText
     Set objHTTP = Nothing
End Function

위와 같이 8줄만 있으면 트위터 서버에 HTTP Basic Authentication 을 이용해 POST 로 간단히 트윗을 남길수 있습니다. 트위터 ID/암호 와 트윗메시지만 이 함수에 남기면 바로 트윗이 됩니다. ( 이렇게 남긴글은 트위터 클라이언트에서 볼때 via API 라고 붙습니다. )

이제 이 함수를 가지고 진짜 파워포인트를 이용한 발표시에 사용할수 있도록 만들어보죠. 기본 아이디어는 다음과 같습니다.

각 슬라이드의 발표노트 부분에 주제요약문을 적어두고, 발표시 매 슬라이드마다 자동으로 그 주제요약한 내용이 트윗되도록 한다.

이를 위해서 기본 이벤트인 OnSlideShowPageChange 이벤트를 사용합니다. 이 이벤트는 슬라이쇼 진행시 매 페이지마다 파워포인트가 한번씩 자동으로 불러주는 이벤트입니다.

' 유틸리티 함수로 A 문자열부터 B 문자열 사이의 값을 읽어옵니다.
' 나나나[a]가가가[b]다다다 일때 , [a] 에서 [b] 사이의 "가가가" 문자열만 빼올때 사용합니다.
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
Sub OnSlideShowPageChange(ByVal SSW As SlideShowWindow)
    Dim Shp  As Shape
    Dim S As String
    On Error Resume Next
    S = ""
   ' 매 페이지의 노트안에 [twitter] [/twitter] 로 묶인 문자열이 있으면 자동으로 트윗합니다.
    With SSW.View.Slide.NotesPage
        For Each Shp In .Shapes
            If Shp.Type = msoPlaceholder Then
                If Shp.PlaceholderFormat.Type = ppPlaceholderBody Then
                    S = getStringBetween(Shp.TextFrame.TextRange.Text, "[twitter]", "[/twitter]")
                    If S <> "" Then
                        strResponse = Tweet(S, "트위터 ID", "트위터 암호")
                    End If
                End If
            End If
        Next
    End With
End Sub

위 소스는 각 페이지마다 자동으로 실행되는 이벤트에서 발표 노트안에 [twitter] , [/twitter] 로 묶인 문자열이 있으면 그걸 자동으로 트윗하는 소스입니다.
이제 아래처럼 각 슬라이드의 노트에 각 슬라이드의 요약내용을 적으시면 자동으로 트윗이 됩니다.

자동으로 트윗되도록 작성한 노트 예제

이렇게 노트에 요약을 적고, 사이트의 주소까지 적어주면 트위터에서 보시는 분들은 바로 클릭해서 볼수 있어서 편리합니다.
( 이 Twumped 사이트 많이들 좋아하시더군요. 국내 도입이 시급합니다. ^^; )

그런데, 현재 소스엔 큰 문제가 하나 있습니다. 바로 소스내에 자신의 트위터 ID/암호가 노출이 된다는 것이죠. 보통 발표자료는 운영측에 먼저 제출하거나 해야하는데 자신의 암호가 노출되면 안되겠죠 ? 그래서 노출이 안되도록 해봅니다.

아래와 같이 로그인창을 하나 만듭니다. 간단하게 구현한거니 취소버튼도 없습니다 🙂

트위터 로그인창

텍스트 박스 2개의 이름을 txtUID , txtPWD 로 주고, Login 버튼의 Default 속성을 True 로 주면 끝입니다. 코딩은 필요없습니다.

이제 앞에 만든 소스를 조금 수정해 봅니다.

Sub OnSlideShowPageChange(ByVal SSW As SlideShowWindow)
    Static strUID As String
    Static strPWD As String
   ' 첫번째 슬라이드 일경우 로그인창을 띄워서 트위터 ID 와 PWD 를 얻어옵니다.
    If SSW.View.CurrentShowPosition = 1 Then
        Load frmLogin
        frmLogin.Show
        strUID = frmLogin.txtUID
        strPWD = frmLogin.txtPWD
        Unload frmLogin
    End If
    Dim Shp  As Shape
    Dim S As String
    On Error Resume Next
    S = ""
    With SSW.View.Slide.NotesPage
        For Each Shp In .Shapes
            If Shp.Type = msoPlaceholder Then
                If Shp.PlaceholderFormat.Type = ppPlaceholderBody Then
                    S = getStringBetween(Shp.TextFrame.TextRange.Text, "[twitter]", "[/twitter]")
                    If S <> "" Then
                        strResponse = Tweet(S, strUID, strPWD)
                    End If
                End If
            End If
        Next
    End With
End Sub

더 멋지게 구현하려면 SlideShowBegin 시에 물어야 하겠지만 자동 이벤트가 아니여서, 클래스 선언등의 복잡한 작업이 있는지라 그냥 편하게 첫번째 슬라이드 뜰때 묻도록 했습니다. ID/암호는 그냥 Static 에 저장해두고 쓰구요. 🙂

이제 F5 키를 눌러서 슬라이드 쇼를 실행하면 아래와 같은 로그인창이 뜨고 ID/암호를 입력할수 있습니다.

트위터 ID/암호 입력

조금 더 편하게 사용하시려면, PPT 편집시 로그인 창에 자신의 트위터 ID 는 기본으로 입력해두시고, 암호창에 tabIndex 를 0번으로 해두시면 뜰때마다 암호창에 포커스가 가니까 바로 암호만 입력후 엔터치시면 됩니다.

완성된 소스입니다.

Sub OnSlideShowPageChange(ByVal SSW As SlideShowWindow)
    Static strUID As String
    Static strPWD As String
    If SSW.View.CurrentShowPosition = 1 Then
        Load frmLogin
        frmLogin.Show
        strUID = frmLogin.txtUID
        strPWD = frmLogin.txtPWD
        Unload frmLogin
    End If
    Dim Shp  As Shape
    Dim S As String
    On Error Resume Next
    S = ""
    With SSW.View.Slide.NotesPage
        For Each Shp In .Shapes
            If Shp.Type = msoPlaceholder Then
                If Shp.PlaceholderFormat.Type = ppPlaceholderBody Then
                    S = getStringBetween(Shp.TextFrame.TextRange.Text, "[twitter]", "[/twitter]")
                    If S <> "" Then
                        strResponse = Tweet(S, strUID, strPWD)
                        If SSW.View.CurrentShowPosition = 3 Then
                            If (getStringBetween(strResponse, "", "") > 0) Then
                                MsgBox "파워포인트 자동트윗이 성공하였습니다 by @xguru"
                            Else
                                MsgBox "트위터 서버 연결에 오류가 있습니다. by @xguru"
                            End If
                        End If
                    End If
                End If
            End If
        Next
    End With
End Sub
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 Tweet(tweetmsg, uid, pwd)
     Dim objHTTP As Object
     Set objHTTP = CreateObject("Microsoft.XMLHTTP")
          objHTTP.Open "POST", "http://twitter.com/statuses/update.xml", False, uid, pwd
          objHTTP.send "status=" & tweetmsg
          Tweet = objHTTP.responseText
     Set objHTTP = Nothing
End Function

저는 발표중에 이 파워포인트+트위터 매쉬업을 사용한다는 것을 소개하기 위해 3번 슬라이드일 경우 트윗이 제대로 포스팅 되었는지 확인할수 있도록 메시지 창을 띄웠습니다.

기본적으로 약간의 VBA 지식이 있으셔야 해서 이정도로 설명이 잘 되었는지 모르겠네요.

예제로 제가 만든 트위터 API를 활용한 국내외 다양한 매쉬업 사례 파일을 올려드리니 한번 사용해 보시기 바랍니다. 꽤 많은 트윗메시지가 저장되어 있으니, 자신의 계정으로 바로 테스트 하지 마시고 테스트용 트위터 계정을 하나 만드셔서 해보시길 권해드립니다. 다운 받아서 오픈한후 보안경고 창에서 매크로 사용토록 확인해주셔야 기능이 동작됩니다.

▶ 예제파일 다운로드 : 트위터 매쉬업 매크로가 포함된 트위터 API를 활용한 국내외 다양한 매쉬업 사례 다운받기 – 제 Dropbox 입니다.

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

엉뚱한 개발자 구루였습니다. 문의사항 있으시면 트위터 @xguru 나 블로그에 남겨주세요.

트위터 API를 활용한 국내외 다양한 매쉬업 사례

1월 15일 금요일날 열린 “트위터&SNS 컨퍼런스 2010” 에서 제가 발표한 자료를 공개합니다.

발표 제목은 “Twitter API Mashups – 트위터 API를 활용한 국내외 다양한 매쉬업 사례” 입니다.
현재 트위터와 연관된 어플리케이션의 현황을 알아보고, 다양한 국내외 사례와 앞으로 트위터 매쉬업이 어떻게 발전해 갈것인지를 적어봤습니다.

  1. Twitter 어플리케이션 현황
  2. Twitter 어플리케이션의 종류
    • 단점을 보완하는 서비스들
    • 장점을 이용하는 서비스들
    • 다른 서비스의 연계
  3. Twitter Mashup 서비스 사례
    • 국외 서비스
    • 국내 서비스
  4. Twitter Mashup 어플리케이션의 전망

위와 같은 목차로 진행되었구요. 매쉬업에 대한 소개이니 제 설명이 없어도 보실수는 있습니다.
다만.. 발표 자료만으로는 제가 발표를 통해 전하고 싶었던 것을 다 보시긴 힘들듯 합니다 🙂
실제 강의에선 슬라이드에 있는 각각의 항목에 대해 좀더 알기쉽게 자세히 설명했습니다만 음.. 정말 그랬는지는 들으신 분들께 🙂

이렇게 잘 만들어진 API 만 있으면 다양한 매쉬업이 만들어질수 있다는걸 보시고 국내 개발자/업체 분들도 자극받으시기 바랍니다.
예전에 소개해드린 Slideshare 를 통해 공유합니다.

트위터 메쉬업에 대해 궁금하시거나 발표문서에 대한 문의는 트위터나 첫장에 있는 제 이메일로 부탁드립니다.

이 파일에 원래는 파워포인트와 트위터를 연동하는 것이 들어있는데, 매크로 포함파일은 공유가 안되어서..
파워포인트+트위터 매쉬업에 관한 내용은 따로 상세설명과 함께 내일쯤 포스팅 하겠습니다.

아이폰 웹 시작페이지를 마음대로 꾸며보세요 – sizac.kr

아이폰 앱이 10만개를 넘었지만 아이폰 사용량의 꽤 많은 부분은 모바일 웹 브라우징입니다.
아직도 웹에 더 많은 자료가 있기때문에 아이폰 / 안드로이드폰 같은 똘똘한 모바일 디바이스를 이용한 모바일 웹의 사용량도 점차 증가하고 있습니다.
다만 문제는 아직 모바일 전용페이지가 많지 않고, 많은 경우 이를 따로 찾아서 봐야 한다는 어려움이 있죠.

제가 1년전에 만들었던 텍스트 기반의 모바일 웹 시작페이지 iPortal 은 아직도 많은 분이 이용하고 계십니다만,
작은 화면에 많은 정보를 보여주다 보니 클릭이 쉽지 않고, 자리도 부족하고, 동적인 변화를 주기 어려워서 새로 늘어나는 사이트들을 추가하기가 힘들었습니다.
이 불편함때문인지 이 후에 비슷한 많은 모바일 웹 시작페이지가 만들어졌지만 이 소심한 개발자 구루의 마음에 맞는 형태가 잘 없더군요.

그래서 1년만에 새로운 방식의 조금 더 쓰기 편한 모바일 웹 시작 페이지를 만들어 봤습니다.
(모바일을 강조한 이유는.. 아이폰 만을 대상으로 하지 않습니다. 모든 모바일 디바이스에서 사용하기 편하도록 점차 수정해 나가겠습니다. )

이름은 “시작” 입니다. 영문으로는 “Sizac” 그냥 발음나는대로, 도메인이 빈것을 찾아봤습니다 🙂

주소는 http://sizac.kr 입니다.
( 일반 웹브라우저에서도 보이지만 예쁜화면이 아닙니다. 아이폰/아이팟 터치를 이용해 주세요. 크롬이나 사파리에선 그래도 얼추 비슷하게는 보입니다. )

모바일 웹 시작페이지 – sizac.kr

Sizac 메인 Sizac 또다른 메인

첫 화면입니다. 이건 아무것도 설정하지 않은 첫화면이고, 사용자 마음대로 설정가능합니다. 자세히 보시면 두 화면이 아이콘도 다르고, 배경도 다르고, 폰트색상도 다릅니다. 한번 만들고 나면 자기ID.sizac.kr 처럼 보기 편한 주소로 접속 가능합니다. 만들면서 염두에 둔건 다음과 같습니다.

  • 클릭하기 쉬워야 한다 – 무조건 아이콘으로, 화면에 많이 들어가도록 크기는 좀 작아도 된다.
  • 사용자가 설정가능해야 한다 – 사이트 선택가능, 아이콘 위치 조절가능, 자신만의 사이트 추가가능, 배경설정가능
  • 접속이 쉬워야 한다 – 짧은주소 제공, 각 ID 별 주소 제공 – 자기ID.sizac.kr
  • 로딩이 빨라야 한다 – 파일갯수 최소화, HTML5 오프라인 캐쉬이용, 무조건 압축!
  • 예뻐야 한다 – 매일 보는 페이지인데 그래도 좀 이뻐야 쓸맛이 난다!

그럼 이제 사용법을 하나하나 알아보도록 하겠습니다. 조금 길더라도 잘 읽어주세요 🙂

나만의 Sizac 만들기

자신만의 시작페이지를 만들기 위해서는 ID 가 필요합니다. 걱정하지 마세요. 어떤 개인정보도 필요치 않습니다. 그냥 ID 와 암호 만 있으면 됩니다.

Sizac ID 생성화면

ID 와 암호를 2번 입력하시면, 가입은 끝입니다. 이거 마저도 개인정보라고 하시면 제가 드릴말씀이.. ㅡ.ㅡ; 혹시 절 못 믿으시면 잘 사용하지 않는 비밀번호로 만들어주세요. 대신 이렇게 해놓았기에 암호 잃어버리시면 제가 찾아드릴 방법이 없습니다. 잘 기억해주세요. ^^;

가입중 ID를 한글로 적으시는 분이 있는데, 자신의 주소가 되기때문에 불가능합니다.

나만의 Sizac 페이지 꾸미기

이렇게 가입이 되면, 다음과 같이 썰렁한 페이지로 이동됩니다. 처음 가입하면 아무 아이콘도 등록되어 있지 않기때문입니다.

Sizac 페이지 설정화면

각 버튼에 대한 간단한 설명은 다음과 같습니다.

  • 추가1 : 제가 등록해놓은 136개의 모바일 사이트중에서 원하는걸 선택합니다. 이 리스트는 계속 늘어납니다.
  • 추가2 : 사용자가 직접 추가한 사이트와 다른 사용자들이 추가한 사이트중에서 인기도가 높은 사이트를 보고 추가합니다.
  • 비움 : 전체 등록한 사이트를 삭제합니다. 무시무시한 기능이기 때문에 한번 더 확인창이 뜹니다 🙂
  • 등록 : 사용자가 직접 주소/이름을 가지고 모바일 사이트를 추가합니다.
  • 설정 : 자신의 배경/폰트/암호 설정을 수정합니다
  • 시작 : 자신의 시작페이지로 갑니다. 역시 한번 확인창이 뜹니다 🙂

자신의 Sizac에 사이트 추가하기

추가1 버튼을 누르면 다음과 같은 페이지가 보입니다.

Sizac 에 사이트 추가

현재 등록된 모바일 사이트를 리스트형태로 불러옵니다. 여기서 원하는 사이트만 클릭하시면 됩니다. 2가지로 동작하는데,

  • 아이콘을 클릭하면 해당 모바일페이지로 바로갑니다.
  • 아이콘외의 하얀 부분을 선택하면 해당 사이트가 내 Sizac 에 추가됩니다.

선택하면 즉시 서버에 반영됩니다. 추가된 아이콘은 화면에서 보시다시피 우측에 붉은색 체크표시가 나옵니다.

현재 제가 미리 등록해둔 모바일 사이트는 총 136개입니다.

All Mobile Web Site in Sizac

사이트 자체 아이폰용 아이콘이 있다면 그걸 활용했고, 아니면 각 사이트 로고를 아이콘 사이즈에 맞게 약간씩 수정했습니다.
사이트가 꽤 많은지라 아이폰 웹사이트에서 사용하는 서브리스트 방식의 페이지로 만들면 스크롤하는 수고가 덜겠지만, 각 모바일 페이지로 갔다가 올때 문제가 있어서 그냥 현재처럼 스크롤하는 방식으로 두었습니다. ^^

추가2 버튼을 누르면 다음과 같은 페이지가 보입니다.

Sizac 에 사용자 사이트 추가

이건 제가 추가한게 아니라, 각 사용자들이 추가한 아이콘 리스트입니다. 먼저 자신이 추가한 아이콘이 보이고, 그 뒤에 다른 사용자가 추가한 아이콘이 뜹니다. 사용빈도순으로 소팅됩니다.

보시면 알겠지만, 아래 추가한 사람의 ID 정보가 남습니다. 사용자가 많아지면 ‘추가2’ 에 있는 걸 ‘추가1’ 으로 옮겨드립니다.
물론 추가한 사람의 ID 정보는 남긴채로요 🙂 좋은 사이트를 등록하신 분에게 드리는 작은 선물입니다.

이렇게 추가하고 나면 아까 비었던 페이지가 다음과 같이 바뀝니다.

Sizac 페이지 수정

이 화면은 아이폰의 기본 어플 위치설정 방법과 같습니다. Drag & Drop 방식으로 아이콘을 꾹 눌러서 이동하면 자리가 옮겨진후 재 정렬되며, x 표를 누르면 삭제됩니다.
역시 변경하신 내용이 바로 서버에 적용됩니다. 현재 눌러서 이동하기는 아이폰/아이팟 내에서만 됩니다.

아이콘이 많아서 페이지를 스크롤 해야할 경우는 아이콘과 아이콘사이의 빈 부분을 터치해서 드래그 하시면 됩니다.

다른 모바일 폰이나 PC 에서도 정렬기능이 되도록 점차 늘려보겠습니다. 일단 안드로이드부터 할 예정인데 먼저 넥서스원 구입부터.. ㅡ.ㅡ;;

이렇게 해서 만들어진 여러분의 시작페이지 주소는 http://여러분의ID.sizac.kr 입니다.
예를 들어, 제 페이지는 http://xguru.sizac.kr 입니다.

사용하기 편하게 하기 위해 아래처럼 사파리 아래에 + 버튼을 누르셔서 책갈피동시에 추가해주세요.

웹을 브라우징하다가 아무때나 오기 위해서는 책갈피가 편하구요, 처음 브라우저를 시작할때는 홈에 추가해논 버튼을 이용하시면 됩니다.
자신의 ID.sizac.kr에서 화면수정이 하고싶을때는 약간 스크롤해 내려보시면 아래쪽에 “내 Sizac 수정하기” 버튼이 있습니다

* 새로운 아이콘을 추가하거나 위치를 조정한 후 처음 ID.sizac.kr 을 불러오면 수정하기전 모습이 먼저 보이고, 1-2초후 자동으로 리프레시 되면서 최신설정으로 변경됩니다. 차후에 데이타요금을 줄이기 위해 아이폰안에 저장된 HTML5 오프라인 캐쉬가 업데이트 되는것이니 2초만 기다려 주세요. 🙂

그럼 이제 자신이 직접 모바일 사이트를 Sizac에 추가하는 방법을 알아보겠습니다.

Sizac에 직접 모바일 사이트 추가하기

등록 버튼을 누르시면 다음과 같은 화면이 보입니다.

사이트 등록하기

여기의 가장 윗 칸 주소필드가 중요합니다. 거기에다 모바일 웹페이지 주소를 넣어보세요.

임시로 네이버 카페중 하나를 선택해서 직접 바로가기로 만들어보겠습니다. 주 아이콘에 네이버 카페로 가기 버튼이 있지만, 카페 활동 많이 하시는분들은 자신이 관련된 카페에 바로가기를 만들어 쓰시면 편하죠. 또한 박스웹의 각 커뮤니티 게시판중 자신이 주로 가는 게시판만 바로 지정하는것도 가능합니다.

네이버 카페 모바일 버전의 주소는 m.cafe.naver.com/카페이름 입니다. 아래처럼 파워포인트 카페를 입력해보겠습니다.

네이버 카페 등록하기

사이트 주소를 입력하고 다음 필드로 넘어가면, 자동으로 해당페이지에 접속해서 정보를 읽어옵니다.
아이콘 이름은 5자가 보기가 가장 좋기 때문에 페이지 제목에서 잘라내고 보이고, 설명에 전체 TITLE 이 옵니다.
그리고 그 페이지에 지정된 아이폰용 아이콘이 있다면 위의 맨아래 예시화면 같이 표시됩니다.
아이폰 페이지용 아이콘은 57×57 사이즈이지만, Sizac 에선 44×44 를 이용하므로 실제 추가시 조금 크기가 다르게 보입니다만,
추가되면 일반 이미지라도 그림자와 반투명/반원 마스크가 붙어서 마치 아이폰 화면의 아이콘처럼 예쁘게 보이게 됩니다.

그리고 등록버튼을 누르면 바로 자신의 Sizac 화면에 추가되고, 나중에 추가2 버튼에서 아래와 같이 보이게 됩니다.

Sizac 에 사용자 사이트 추가

그 이후엔 기존 사이트들과 똑같이 사용하시면 됩니다.

Sizac 페이지 설정 바꾸기

아이폰을 탈옥하지 않고는 기본 어플 있는 페이지의 배경화면을 바꿀방법이 없죠. 그 배경화면 때문에라도 탈옥하신다는 분 들도 있는거 같구요. 그래서 Sizac 에선 배경화면 설정을 지원합니다 🙂

설정 버튼을 눌러서 들어가면 다음과 같은 페이지를 볼수 있습니다.

Sizac 설정화면

맨위 두칸은 비밀번호 설정을 변경하기 위한것입니다. 똑같이 2번 적으면 새 비밀번호로 변경됩니다.

아래 두칸이 화면설정을 위한 필드입니다. 보시다시피 폰트색상과 배경이미지 주소를 적으면 됩니다. 예로 조금 진한 이미지를 하나 적용후 폰트를 흰색으로 적용해 보겠습니다.

Sizac 배경 및 폰트 설정화면

위 이미지는 제가 가진게 아니고 웹에서 찾아온 이미지입니다. 아이폰에서 입력을 편하게 하기위해 단축URL 서비스인 3.ly 를 이용했습니다. 아이폰 배경은 아래 사이트들을 참고하시면 멋진 걸 많이 찾으실수 있습니다.

그리고 폰트 색상은 배경이 어두우면 White, 하얀색이면 Black 으로만 하셔도 되고, 아니면 원하는 색상을 골라주세요.
http://www.colorpicker.com/ 에서 고르시면 됩니다. 숫자로 된 색상의 경우 앞에 #까지 붙여주세요.

이렇게 해서 바꿔본 몇개 배경입니다. 아래 사이트들은 모바일 환경을 가꾸기 위해 노력해주는 3개사에 대한 저의 선물? 입니다. ^^

http://daum.sizac.kr , http://naver.sizac.kr
Daum Sizac
Naver Sizac

http://google.sizac.kr , http://xguru.sizac.kr
Google Sizac
XGuru Sizac

테스트 Sizac
테스트2 Sizac

빠르게 하기 위한 노력

너무 개발자적인 이야기 겠지만.. 사용자 분들을 위하여 로딩속도를 빠르게 하고, 사용하는 데이타량 절감을 위해 다양한 방법이 시도되었습니다. 이미지 파일이 여러개면 느려지기때문에 CSS 에 임베드한후 한개의 CSS 파일로 Gzip 압축으로 보내고 있구요.

개개인의 시작 페이지는 HTML5 Offline Cache 가 적용되어 있어서, 한번 받고나면 내부 사이트들 정보가 수정되기 전엔 내려받지 않습니다. 심지어 ID.sizac.kr 로 되는 여러분의 Sizac 페이지 자체는 오프라인에서도 브라우징 가능합니다 🙂

후아.. 여기까지 입니다. Sizac 많이 사용해주시고, 다양한 제안 부탁드립니다.
기능추가 될때마다 블로그에 못적더라도 트위터엔 알리고 있으니 @xguru 를 Follow 하시면 빠르게 소식을 들으실수 있습니다.

접속 주소는 http://sizac.kr 입니다.

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

아이폰에 얼굴사진으로 전화걸기 아이콘 만들기 – QuickGuru

아이폰에 여자친구/남자친구 , 아내/남편 , 애기 사진으로 전화걸기 아이콘을 만들어보세요.

아이폰은 전화기능 말고 다른 기능에 충실하다보니 전화걸기 자체가 조금 귀찮은면이 많습니다.
전화걸려고 하면 홈스크린에서 전화걸기 메뉴로 들어가야 한다는게 좀 불편하죠.
홈스크린에서 바로 전화를 거는 아이콘을 만드는 팁이 여러개 공개되었는데 아이콘이 이쁘지 않아서 쓰기가 망설여 지더군요.
그래서 아래처럼 이쁜 사진으로 전화걸기 아이콘을 만드는 웹 어플리케이션을 하나 만들어봤습니다.

얼굴사진 전화걸기 아이콘 on 아이폰

아이폰에 얼굴사진으로 전화걸기 아이콘 만들기 – QuickGuru

아이콘을 만들기 위해 PC 에서 해야할 단계와 아이폰에서 해야할 단계로 나뉘어져 있습니다.

  1. 먼저 아이폰은 옆에 놔두시고, PC 에서 웹 브라우저를 열어서 http://q.xguru.net 으로 접속합니다.

    QuickGuru for PC 첫화면

  2. 파일선택을 눌러서 전화번호 아이콘으로 사용하실 사진파일을 하나 찾아 업로드 해주세요.

    QuickGuru for PC 사진파일 업로드

    사진은 1~3 시간후 자동으로 삭제되며, 1메가 이하의 파일만 올려주세요.

  3. 올라온 이미지에서 아이콘으로 사용할 부분을 마우스로 선택해 주세요.

    QuickGuru for PC 사진 자르기

    선택후 이동도 가능하고, 다시 클릭하면 새로 크롭할 영역을 선택하게 됩니다.
    그리고 전화번호 아이콘 생성 버튼을 눌러서 아이콘을 생성합니다.

  4. 이제 생성된 아이콘은 아래와 같습니다.
    QuickGuru for PC 아이콘 완성

    빨간색으로 표시된 번호가 중요합니다. 외우실 필요는 없습니다. 이 창만 아직 닫지마시고 아이폰과정으로 넘어갑니다.

  5. 자 이제 아이폰의 사파리 브라우저를 열고 똑같이 http://q.xguru.net 으로 접속합니다. 이번에 다른화면이 보일겁니다.

    QuickGuru for 아이폰

    위와 같이 번호를 입력해주세요. 연결할 전화번호 , 아이콘의 이름, 아이콘의 번호에는 위에 PC 에서 업로드했던 빨간색 번호를 입력합니다.
    전화번호는 절대 서버에 남지않습니다. 사진은 1~3시간이후 자동으로 지워집니다. (시간당 배치작업으로 수행되기 때문입니다. ^^;)

    – 이 단계에서 다음으로 안 넘어가시는 분들은 WIFI 네트웍에서 data: 주소가 막혀서 그렇습니다. 잠시 3G 로 이용해주세요.

  6. 정보를 입력하고 [전화번호 아이콘 만들기!] 를 누르시면 아래와 같은 화면이 보이면서 팝업이 뜹니다.
    QuickGuru for 아이폰 전화번호 아이콘 생성

    화면에 써 있는대로 취소 를 눌러주세요. 그리고 아래 [+ 버튼]을 누르셔서 [홈 화면에 추가]를 눌러주세요.

    QuickGuru for 아이폰 홈화면에 추가

    아까 입력한 이름이 자동으로 아이콘이름으로 설정됩니다. 여기서도 바꾸실수 있습니다. 한글은 6자리까지 가능합니다.

    QuickGuru for 아이폰 홈화면에 추가

  7. 이제 홈화면에 즐겨찾기형태로 추가된 이쁜 아이콘을 보실수 있습니다. 누르시면 사파리가 뜨면서 저장된 웹페이지가 보이고 전화가 연결됩니다.

    얼굴사진 전화걸기 아이콘 on 아이폰
    아이폰 홈화면에 얼굴사진 아이콘 추가

    – 즐겨찾기 URL 자체에 웹페이지가 내장되어 있어서 데이타요금은 발생하지 않습니다.
    – 전화걸기위해 통화 버튼이 나오는것은 아이폰 자체에서 실수 또는 불법으로 전화연결 되는걸 막기위함이라 없앨수 없습니다.
    – 전화통화가 끝나면 다시 이 페이지로 돌아옵니다. Home 버튼누르셔서 다른 기능을 이용하시면 됩니다.

아이콘 클릭시, 통화버튼이 안 나오게 하기위해서는 아이폰 앱 형태만 가능합니다. 조만간 만들어볼 생각이 있습니다만..
현재 개발중인 다른 서비스가 여러개 있어서 아마도 좀 늦어질듯 합니다. ^^;
다음주 초 쯤엔 아이폰 사용자를 위하여 좀더 편리한 서비스가 하나 공개됩니다. 기대해 주세요.

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

아이폰 기본 전화걸기에서 초성검색하기 – ContactsGuru

제가 만든 첫번째 무료 아이폰 앱이 앱스토어에 등록되었습니다.
지난주 말에 올렸는데 꽤 빨리 승인이 났네요.

앱의 이름은 ContactsGuru [ iTunes Link ] 입니다. 제가 만들었던 TagGuru, TweetGuru 와 시리즈입니다 🙂
컨택구루는 아이폰의 기본 전화걸기 및 문자메시지 보내기창에서 한글초성검색을 가능하게 해주는 앱입니다.
현재 연락처에 등록된 사람들의 이름에서 한글초성을 추출하여 잘 사용하지 않는 필드에 복사합니다.
( 이름/First Name의 발음 필드를 사용합니다. )

한번만 실행하고 나면 그 이후엔 아이폰의 기본기능인 전화걸기나 문자메시지 사용시에 초성검색이 가능합니다.

“김광석” 같은 초성이 연속으로 겹치는 이름의 경우에는 입력의 편의를 위해 ㄲㅅ 와 같이 입력해도 검색됩니다.

새로운 연락처를 추가할때마다 한번씩만 실행해 주세요. 실행후엔 ContactsGuru를 종료하고 아이폰의 기본기능을 이용하시면 됩니다.

동작화면 입니다.



아이폰 기본 전화걸기 및 스팟라이트, 메일함에서 초성검색을 사용하는 모습입니다.



ContactsGuru의 앱스토어 링크입니다. 사용해보시고 의견주세요.

사실 올리고나서 바로 같은기능을 하는 앱이 먼저 앱스토어에 등록되어버려서 조금 늦은거 같지만, 제 첫번째 앱이니 이쁘게 봐주세요 🙂

====== 1.1 버전 예정 업데이트 기능 ======
1.1 버전이 앱스토어에 제출되었습니다.

– 입력된 초성정보 삭제가능
– 이름만으로 검색가능 : 김광석 -> ㄱㅅ

– 전화번호 국번/뒷자리등으로 검색가능

– 직장명 초성으로도 검색가능 : 신송식품 -> ㅆㅅㅍ
– 변환중 튕기는 오류수정
– 연락처 정렬시 발음순으로 정렬되던 버그수정