월별 글 목록: 2010년 1월월

GoodReader 2.4 버전 이상에서 USB 전송기능 해제하기

제가 강력히 추천해드리는 아이폰용 문서뷰어 앱 GoodReader 는 엄청큰 PDF 파일도 잘 읽어내고, DOC,XLS,PPT,TXT 등 많은 포맷을 지원하는 파일뷰어입니다. 내부에 정말 많은 기능을 가지고 있어서 파일관리 및 웹브라우저 기능까지도 가지고 있습니다. 0.99달러로 계속 할인중이므로 문서보는일이 많으시다면 구입하셔도 좋을듯 합니다. [iTunes 링크]

***************************** 중요공지 ************************************

GoodReader 가 다시 USB 전송기능을 정식으로 지원합니다. 예전처럼 편법이 아니기때문에 이 포스팅에서 하는 작업들이 필요없습니다.

http://www.goodiware.com/gr-man-tr-usb.html 에 가면 자세한 설명이 있습니다만, 간단한건 새 버전의 GoodReaderUSB 를 다운로드 하고 실행하면 쉽게 파일전송이 가능합니다.

아래 포스트내용은 그냥 예전기록을 위해 남겨둡니다.

*****************************************************************

굿리더는 2.3버전까지는 USB 연결기능까지도 제공해서 복잡한 WIFI 연결없이 Windows/Mac 상에서 쉽게 파일을 복사할수 있었습니다만, 애플의 요청으로 해당기능이 삭제되었습니다. 하지만 이 기능이 완전히 삭제된것이 아니고, 설정값으로 기능을 제한해 둔거라 설정값만 바꾸면 다시 USB 복사기능이 가능합니다. ( Jail Breaking 하셨다면 더 쉽게 가능한 방법이 많습니다. 이 포스팅은 순정 아이폰/아이팟 유저분들을 위한 방법입니다. )

원문은 일본어 포스팅인 [非JB]新規GoodReader v2.4でUSB転送を可能にさせる方法 입니다.

* 주의!!! : 아래 방법은 동기화된 파일을 수정하여 복원하는 방법으로 진행되므로 아이폰의 데이타가 잘못될수 있습니다. 꼭 아이튠스에서 아이폰의 백업을 받아두세요. 이 방법을 이용하다 잘못되는 경우에 대해서는 제가 책임지지 않습니다.

먼저 2개의 유틸리티가 필요합니다.

  • iBackupBot – iTunes 의 백업파일을 수정할수 있게 도와주는 유틸리티 입니다. (윈도우용만 있음)
  • GoodReaderUSB – iPhone Explorer 의 수정버전으로 GoodReader 에 파일복사를 도와주는 유틸리티입니다. (윈/맥 모두 지원)
  • GoodReaderUSB 는 배포가 중단되었습니다. i-Funbox 나 원본 iPhone Explorer를 이용하세요.

맥 사용자분들은 맥에서는 iBackupBot 과 똑같은 일을 해주는 어플이 현재 없기때문에 다른 윈도우PC에서 진행하셔야 합니다. 일단 수정만 되면 그다음부터는 맥에서도 GoodReaderUSB 를 이용해서 파일복사 가능합니다.

GoodReader 를 최신버전으로 업데이트 한후 iTunes 와 동기화 합니다. 그리고, 일단 iBackupBot을 먼저 설치합니다. GoodReaderUSB 는 그냥 실행파일 하나라 설치가 필요없습니다.
iBackupBot을 설치하고 실행하면, 아래와 같이 하드에 설치된 iTunes 의 정보를 분석하여 백업정보를 읽어냅니다.

전 터치와 아이폰, 그리고 풀백업이 하나 있어서 3개의 자료가 보입니다.

그중에서 가장 최신의 iPhone/Touch 백업자료를 선택합니다. 전 중간것이네요. 안에 내용로드가 조금 걸립니다. 그리고 왼측 자료를 더블클릭해서 연후에 왼쪽트리에서 GoodReader 를 찾습니다.

그리고 위에서 보는것처럼 우측에서 Library/Preferences/com.goodiware.GoodReader.plist 파일을 찾습니다.
더블클릭하면 Shareware 니까 등록하라는 창이 뜹니다만.. 그냥 Cancel 누릅니다. 🙂

그럼 XML 파일로된 내용이 나오는데.. 아래항목을 찾습니다.

fUSBIsAllowedfUSBWasShownOnce 항목 이름만으로도 아시겠죠 ? 이걸 아래처럼 true 로 바꿔줍니다.

그리고 위에 툴바에 저장버튼 눌러서 저장한 후 창을 닫습니다. 그리고 아래처럼 왼쪽의 체크표시를 클릭해서 체크합니다.

그리고 왼쪽의 트리창에서 GoodReader 항목을 찾아 마우스 우측버튼을 클릭합니다.

Restore 를 누르고 아래처럼 “Restore only checked files” 를 선택합니다.

그리고 확인을 누르면 아래처럼 Restoring 화면이 나옵니다. 이 화면이 나오고 한참 있다가 iPhone 이 “복원중” 상태로 들어가며 부분복원을 진행하게 됩니다.

그리고 또 한참 기다리면 복원이 끝나고 아이폰이 재부팅 됩니다. 그럼 일단 수정작업은 끝입니다.

그리고 나서 부팅한후에 GoodReader 를 실행해보면 아래처럼 2.3에서만 보이던 USB Folders 가 보입니다.

이제 GoodReaderUSB 를 실행시킵니다. EXE 하나로 되어있습니다. 화면에서처럼 우측에 아무파일이나 던져넣으면 끝입니다. 폴더 단위로도 복사됩니다.

조금 귀찮긴한데 한번 업뎃하고 나면 편하게 파일복사가 가능합니다. 2.5 에서 적용한후 2.5.1로 업그레이드 하여도 바로 사용됨을 확인했습니다.

* 다시 한번 주의!!! : 이 방법은 동기화된 파일을 수정하여 복원하는 방법으로 진행되므로 아이폰의 데이타가 잘못될수 있습니다. 꼭 아이튠스에서 아이폰의 백업을 받아두세요. 이 방법을 이용하다 잘못되는 경우에 대해서는 제가 책임지지 않습니다.

애자일 소프트웨어 개발을 위한 사용자 스토리 : User Stories Applied

예전에 썼던 ‘사용자 스토리 II – XP 를 XP 답게 만드는 것‘ 에서 만들었던 슬라이드 자료를 공개합니다.

좀 지난 글이긴 하지만, 이 주제는 소프트웨어 개발자들에게 계속 논의하고 공부해둘만한 가치가 있는것 같습니다.

국내에 출판된 사용자 스토리 : 고객 중심의 요구사항 기법 (원제 User Stories Applied : For Agile Software Development ) 번역본의 저자이신 심우곤 님께서 자료 공유를 문의하셔서, 몇몇 부분을 빼고 공유합니다.

사용자 스토리 는 Agile(애자일) 개발을 공부하거나 적용중이시라면 꼭 한번 읽어보실만한 책입니다.

아이폰 무료 오디오북으로 영어공부를!

잘 사용하지 않는 아이폰기능중에 AudioBook 이라는 기능이 있습니다. 이 오디오북은 음성으로 책을 읽어준다는 개념인데요. 실제로 외국에서는 이 형식으로된 책들이 꽤 많이 팔리고 있습니다. 차로 출퇴근이 많은 미국인들이 운전중에도 책을 읽는게 가능하도록 하는거죠. 아이폰용 오디오북은 M4b 라는 파일확장자를 가지고 있습니다.

아이폰에서 이 M4b 형식의 파일이 다른 음악파일보다 나은 장점은 2가지 입니다.

  • 속도 조절이 가능하다 ( 느리게/보통/빠르게 , 아이폰에선 1/2x,1x,2x 와 같이 보입니다)
  • 듣다가 멈추고 다른작업을 하고 와도 듣던곳부터 들을수 있다 ( 자동 북마크 )

영어공부에 많이 사용하시는 특정구간반복(찍찍이)가 되면 좋겠는데 그건 안되더군요.

오디오 북을 플레이하는 기능화면은 아래와 같습니다. 음악 들을때와 마찬가지로 iPod 버튼안에 들어있습니다.

iPod Audiobook Audiobook playing

우측화면이 실제 오디오북 플레이 화면입니다. 음악과 마찬가지로 앨범커버를 지정하면 표지가 입력되고 가사입력하듯이 입력하면 스크립트를 보실수 있습니다. 물론 스크립트 자동 스크롤 같은 기능은 제공되지 않습니다. 좀더 나은 기능을 위해서는 유료 오디오북 앱을 이용하셔야 합니다.
가운데 30이라고 써있는 버튼은 30초 뒤로 되돌리기 입니다. 듣다가 잠깐 놓쳤을때 쉽게 되돌아갈수 있습니다.

커버와 스크립트를 샘플로 입력해본 화면입니다.

아이폰용 무료 오디오북 다운받기

오디오북무료로 구할수 있는곳이 몇군데 있습니다.

  • LibriVox : 자원 봉사자들에 의해 녹음된 무료 오디오 북들 2600개. MP3와 OGG 포맷으로 제공. PodCast 도 제공
  • Books Should Be Free : MP3 파일 다운가능. iTunes 링크는 각 책을 Podcast 형태로 등록하여 다운로드 가능
  • Free Classic Audio Books : 오디오북을 MP3 와 M4B 두가지 포맷으로 제공합니다.

위 3개 사이트만 이용 하셔도 영문 오디오 북을 꽤 많이 구하셔서 들어보실수 있습니다.

각 챕터당 파일이 여러개 일때는 Firefox 용 확장인 DownThemAll 을 이용하시면 쉽게 한번에 다운받으실수 있습니다.

MP3 파일을 M4B 오디오북 파일로 변환하기

혹시 기존에 가지고 계신 영어교육 MP3 같은 자료가 있으시다면 다음과 같은 방법으로 M4B파일로 변환가능합니다.
또한 위의 사이트들에서 내려받은 개별 MP3 를 하나의 파일로 합치는 것도 가능합니다.

http://www.freeipodsoftware.com/에서 제공하는 무료 변환기인 AudioBookConverter 를 받아서 실행하시면 다음과 같은 화면이 뜹니다.

MP3 to M4b Audio Book Converter

여러개의 파일을 하나로 합쳐서 변환하거나, 각각을 M4b 파일로 변환할수 있습니다. 여러개의 파일을 하나로 합칠때는 Tag Editing 도 가능합니다. 일반적인 이용패턴은 다음과 같습니다.

  1. DownThemAll로 MP3 파일 한번에 다운
  2. AudioBookConverter 로 한개의 파일로 합치기
  3. 커버입력 및 태그정리 – 가능하면 스크립트도 복사
  4. iTunes 로 아이팟에 동기화

이제 오디오북을 이용해서 아이폰으로 영어 듣기 공부를 해보세요! 🙂
아 ! English as a Second Language [아이튠스 링크] 같은 기존의 PodCast 들을 이용하시는것도 추천합니다.

트위터와 파워포인트 매쉬업하기 – 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 버튼누르셔서 다른 기능을 이용하시면 됩니다.

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

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