아이폰 웹 시작페이지를 마음대로 꾸며보세요 – 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 입니다.

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

Leave a comment ?

192 Comments.

  1. http://jhj.sizac.kr/ 입니다
    아이디는 jhj8701 이고요 삭제부탁드릴께요

  2. 확실히 텍스트버젼 때는 사용빈도가 낮았는데 이젠 기본적으로 사파리아이콘이 아니라 시작아이콘을 누르게 되네요. 그런데 아직 사용자추가아이콘 수정/삭제는 안되는거죠? 그리고 개인이 추가한 홈페이지가 모두 공개가 될 수 있다는 것인가요? 개인적인 홈피나 업무적인 문제로 추가한 홈피도 다른 사람들의 ‘추가2’에 뜰 수 있다는 것인가요?

  3. 정말 잘 사용하고 있습니다. 혹시나 해서 사파리로 PC에서 들어와 봤는데 편집 가능한 것 같군요.
    여기서 편집해서 아이폰에서 사용하면 될거 같아요. 고맙습니다~ 잘 사용할께요.

  4. 3.ly를 사용해서 배경화면 등록하는 건 잘 안되네요..
    컴터 사파리로 봤을땐 되는데 폰에서는 안되더라구요…

    그래서 컴터 사파리에서 그냥 주소 복사해서 하니깐 되네요…

  5. 너무너무 감사해요 이쁘게 잘 쓸게요! :))

  6. 등록시 아이콘이안뜨네요….m.naver.com으로도 안되고..왜 이렇까요??맥으로 해도 안되고 ㅠㅜ

  7. 안녕하세요, 시작 페이지 만들어서 잘 쓰고 있습니다.
    그런데 추가2에서 개인이 만들어서 올린 모바일 링크요, 수정하거나 삭제할 수는 없는 건가요?
    기능 추가하신다고 하셨는데 바쁘신지 아직 안 바뀌었네요. 기다리고 있습니다..

  8. 안녕하세요.
    감사하게 잘 사용하고 있습니다.

    http://jeongyeonjo.sizac.kr/

    삭제 좀 부탁 드립니다.

  9. 정말 감사합니다, 유용하게 잘 쓰겠습니다!

  10. 님은 천재이십니다.!! 굳

  11. 너무 잘 사용하고 있습니다. 감사합니다.
    기상청의 동네날씨를 주로 사용하는데 접속할 때마다 지역 설정을 해줘야 합니다.
    http://m.xguru.net/ifr.html?scale=1.0&sn=기상청&url=http://pda.kma.go.kr/pda/for/for_02.jsp?s1=1100000000&s2=1129000000&s3=1129066000&mypoint=Y
    뒷쪽의 기상청 URL로 접속하면 제대로 동작하는데 전체 URL로 접속하면 항상 강남구 개포동으로 초기화됩니다.
    다음번 업데이트시 고려해 주시면 감사하겠습니다.

    기상청 사이트가 PDA 용인것 같은데 정말 PDA용이 맞나 모르겠습니다. 윈도모바일폰에서는 제대로 보이는지 궁금하네요. 적어도 아이폰용에서 봤을때는 아닌것 같습니다.

  12. 안녕하세요. 홍콩판 언락폰으로 영어를 기본 언어로 설정해서 쓰고 있는데(여긴 중국이구요)
    sizac 사이트 들어갔더니 글자들이 전부 다 깨져서 나오네요.
    웹브라우저에서 코딩 안맞을 때 처럼요.
    어떻게 해야 한글을 제대로 볼 수 있을까요?
    다른 한국 사이트들 접속에는 아무런 문제가 없구요.

  13. 좋은 페이지 감사드립니다 ^^

    다름이 아니라 혹시 추가2에서 사용자가 아이콘 추가할때 아이콘을 지정할수는 없을까요??

    이부분에 관한 언급이 없기에 여쭤봅니다.

    보니까 아유공의 경우는 기본 카페 아이콘이 아닌 아이폰을 손에 든 이미지더군요

    아이폰상에서 수정이 힘들다면 PC에서라도 수정이 가능하다면(이게 더 편하긴 합니다 ㅋ) 좋겠습니다.

    어려운 작업인지 여쭙고 싶으며 어려운거라면 어렵다는 답변 부탁드려요 ^^
    (상콤하게 포기하고 쓰려구요 ㅋ 이게 어딘데 투정이겠습니까 ㅋㅋ)

    ※ 주로 카페를 등록시켜두고 쓰려는데 아이콘이 죄다 똑같아질것 같아서 좀..;;

  14. 헛소리해서 죄송합니다 -ㅁ-;;;

    질문올리고 만지작하다보니 아주 쉽게 되는군요..;;

    이런 어이없는 댓글..;;

    짜증을 가라앉히시고 감사의 댓글이라 보아주세요 ^^;;;;;

  15. 좋은프로그램 감사합니다!

  16. 와 제가생각한 것들인데 이제야발견 ~
    정말좋아요 부디 오랫동안유지해주시길 바래요~
    몇가지기능제안할께요
    1 분류별로지정하고싶은데요 구분선추가기능있으면정말좋겠어요
    2새로운주소만들고 거거 수정기능이있었으면좋겠어요 아이콘을바꾼다거나. 개인링크를 많이등록했는데 야이콘이안나와도걍했더니 아이콘바꾸고싶어도 지우고다시해야하는번거로움이..
    3아이콘은 기본 여러가지아이콘으로 제공했으면좋겠어요 간단히색깔만 다른아이콘이라든지 이니셜 아이콘등 게시물올러주시고 해당 아이콘 링크주소를 복사할수있게해주시면 구인 시작페이지도 아주깔끔해질거같아요~현재는 뭐가문젠지 아이콘들이 새로추가한건 안나오네요
    3 배경화면뎌깔끔한걸로 몇가지올려주시고 가능링크도좀알려주시면 좋겠어요~
    이정도~

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>