이번주에 경험한 LBS를 이용한 application, 그리고 SNS

이번주에 겪었던 일들을 정리하다 보니 공통점이 있었다. 다른 때 보다 새로운 mobile application 들을 많이 사용하게 되었는데, 그 중 대부분은 LBS (Location Based Service)를 이용하는 것들이었고 나머지는 SNS (Social Network Service)와 관련이 있다는 사실. 요즘 유행하는 것들인건 확실한가 보다. TV에서 언뜻 보니 현재 한국의 모바일 시장에서 스마트폰이 보급된게 700만대 정도 된다고 하는 것 같던데 이런 추세라면 내년초에 1000만대 이상이 보급되지 않을까?

그런데 단순히 보급률과 숫자가 늘어난다고 해서 현재 한국의 IT 시장이 금방 활성화 되리라는 기대는 할 수 없다. 주변에서 흔히 볼 수 있는 스마트폰 사용자들을 조금만 지켜봐도 단순히 feature phone 이상으로 활용하는 경우는 많지 않고 사용한다 해도 유명한 해외의 서비스들이 대부분이다. 그러니까 중요한건 스마트폰 그 기기 자체의 수가 늘어나는데 있는게 아니고 활용할만한 국내의 서비스들이 많지 않다는 사실이라고 본다. 요즘 시대에 국내와 해외, 이렇게 양분해서 생각하는 것 자체가 좀 웃기는 일이지만 아쉬운게 사실이다. 이런 문제들 논의하면 끝도 없고 생산적이지도 않은 투덜거림만 될 뿐이니 그냥 이번주에 사용해봤던 것들이나 정리하자. 이것 말고도 할 일이 많으니.


1. Foursquare & Instagram

이번주내내 즐거운 경험을 선사했던 foursquare. 단순히 뱃지 획득하는 재미 때문에 종종 사용하는게 전부였는데, 새로운 기능을 알게 되었다. Special offer. 공식 명칭인지는 모르겠지만 한국에서는 아직 사용자 수가 많지 않아 가능하지 않은 줄 알았다. 특별한 장소의 메이어에게 어떤 혜택을 주는 내용인데, 미국에서는 해당 장소에서 제공하는 서비스들을 할인해주거나 쿠폰을 지급하는 등의 특혜를 부여한다고. 그런 장소를 한국에서 우연히 발견했고 실제로 메이어가 되려고 애쓴 결과 결국은 메이어가 되어서 스타벅스 기프티콘을 받았다. 알아보니 그 분이 개인적으로 진행하는 이벤트라고 하는데 어떤 장소를 홍보하기에 좋은 듯 싶다. 홍보, 마케팅으로 인해 얻을 수 있는 수익이 매일 지급해야만 하는 키프티콘 이상이 되느냐는 계산하기 어렵지만 그래도 한국에서의 좀 새로운 마케팅 수단, 그 사실 자체만으로 의미를 가질 수 있지 않을까?

Instagram. 나온지는 좀 된 application 인데, 나의 경우엔 얼마전 우연히 트위터를 통해 알게 되었다. 그 application 사용자들이 찍은 사진들과 메세지들을 따로 확인할 수도 있고, 트위터나 페이스북에 자동으로 올릴 수 있게 구성되어 있다. 사진을 찍고 나서는 10가지 정도의 효과를 적용할 수도 있고. 그런데 아이폰에서 확인해보니 역시 위치정보는 기록되지 않는 듯 보인다. 왜 geotagging은 되지 않는 것일까? 참 유용하고 재밌는 기능인데.


2. Qroo Qroo & Rock Melt

독서에 동기부여를 해주기도 하고 읽은 책들에 대해 짧은 메세지들을 남겨놓기 위해 “유저스토리북” 이란 서비스를 사용하고 있었다. 유저스토리북에 대해서 항상 아쉽게 생각하던 것이 모바일 환경. 모바일 웹페이지를 구성하지 않는 것도 아쉬웠고, 실제 application으로 만들어 제공한다면 사용자들이 더 늘어날 수 있을 것이라고 생각하고 있었는데 Qroo Qroo가 그 역할을 어느정도 대신하고 있다는 사실을 이번주에 알았다. QR code나 bar code 리더를 좀 사용해보면 단순히 찍는 행위 이상의 재미를 느끼기는 참 힘들다는 걸 느낄 수 있다. 또 어느 리더나 다 비슷해서 경쟁 서비스보다 사용자들을 더 확보할 수 있는 수단은 깔끔한 UI. 그 이상의 수단은 없었다고 본다. 하지만 유저스토리북과 연동이 가능한 새로워진 Qroo Qroo는 좀 더 재미가 생겼다. 그러니까 나에게는 다른 리더 대신에 Qroo Qroo를 사용해야만 하는 이유가 생긴 것. 두 서비스 사이에 어느 정도 논의가 잘 되었다고 판단되는데 그 이유는 두 가지 모두 서로 없는 것을 상대방에게 얻을 수 있었다는 사실 때문이다. 유저스토리북은 모바일 사용자들을 위한 서비스를 제공할 필요성이 있었고, Qroo Qroo는 다른 리더와 차별된 feature가 필요했다고 본다. 또 책이란 것 자체를 indexing 하기 가장 좋은 방법이 ISBN 인데, 사실 그 번호가 너무 길어서 일반인들에겐 불필요한 정보에 불과했지만 그 코드를 간편하게 읽을 수 있다는 사실은 ISBN에 새로운 의미를 부여한 것과 같다. Qroo Qroo로 ISBN을 찍으면 바로 내 유저스토리북 서재에 책을 추가하고 메모를 남기거나 별점을 부여하는 등의 모든 유저스토리 북의 기능들을 사용 가능하다. 이런 모두에게 좋은 제휴나 협력 케이스가 많아졌으면 하고 기대해 본다.

Rock Melt는 SNS에 특화된 웹 브라우저인데, 아직은 초대장을 받은 사람들에게만 공개가 되는 형태라 완전히 공개된 상태는 아니지만 SNS를 사용하고 있는 사람들이라면 충분히 재미를 느낄 수 있다. 아마도 일반 사용자들이 브라우징을 하다가 어떤 페이지를 보게 되었을 때 그걸 타인과 공유하고 싶어하는 경우가 많다는 사실에 착안한 듯 하다. 사용해보니 아직 미흡한 부분들이 보이긴 하는데, 정보 공유 차원에서는 아주 편리한 듯. 일반인들에게 완전히 공개가 될 때 쯤이면 더 편리하고 새로워지리라 본다.



Balsamiq Mockups 사용해보다

꽤 전에 설치를 해두긴 했는데 계속 공부만 하느라 따로 사용할 시간이 없었습니다. 이제부터는 좀 사용해볼까 하고 있는데요. 제목처럼 Balsamiq Mockups(이하 Balsamiq)란 application 입니다. 예전에 보면 화면 디자인이나 구성하기 편하게 아이폰 모양의 메모지가 판매되기도 했었던 걸로 기억합니다. Balsamiq은 UI design을 하기 위한 tool로 별도로 아이폰에 필요한 항목도 마련해 두고 있습니다. 아이폰 모양의 메모지 같은게 필요 없는거죠. 사실 가볍게 사용하기엔 메모지가 더 좋긴 하겠습니다만, 더 마음에 드는 이유는 제공되는 이미지들이 모두 손으로 직접 그린 듯한 느낌의 이미지들이기 때문입니다. 저처럼 그림은 좋아하지만 소질이 없는 사람들에게 딱 적합한 tool이 아닐까 싶네요. :) 아무거나 이것저것 드래그해서 막 나열해본 화면은 아래와 같습니다.


그림 괜찮은가요? 이렇게 구성하는데 1분 정도 걸린 것 같습니다. 디테일한 부분들도 수정은 가능하지만 거의 건들지 않고 그냥 드래그만 했을 때의 상태랍니다. 아이폰 이외에도 일반적으로 UI 구성할 때 필요한 것들은 거의 다 템플릿으로 제공되고 있습니다. 그리고 나서 파일로 저장할 때 PNG, PDF 등으로 저장이 가능한데 근데 전 아직 데모버전을 사용하고 있어서 저장이 불가능한 상태에요. :(


정말 괜찮고 멋진 UI 디자인을 해보고 싶으시다면 아래의 공식 사이트에서 다운로드 하셔서 한 번 사용해보시면 되겠습니다.

http://www.balsamiq.com/

라이센스 비용은 $79 네요. 그냥 구매해버리고 싶은 생각도 듭니다. :)

직관에 의존해 wordpress에 mypickup 설치하기


설명을 시작하기 전에 먼저 고백을 하자면, 난 웹과 관련된 기술적인 지식이 거의 없는 상태이다. 홈페이지, 블로그라는 걸 만들었다 방치하길 수차례 반복하다가 최근에 다시 개인적인 관심이 급증해서 호스팅 서비스를 받고, 워드프레스를 설치하고, 도메인까지 구매해 지금 이 곳에 자리잡게 되었다. 자랑은 아니지만 웹과 관련된 기술을 어느 정도만 알고 있는 상태냐면, 간신히 html, xml 태그들을 읽을 수 있을 뿐이다. php, java script 같은 스크립트 언어들이 직관적이고 간단하단 얘기는 여기저기서 주워듣긴 했지만 그것들을 이용해 직접 코딩을 해본적은 단 한 번도 없다. 혹시나 나처럼 블로그를 시작한지 얼마 안되었는데 이것저것 해보고 싶지만 마음먹는 것처럼 쉽지 않은 분들이 있을까봐(없을수도…ㅠㅠ), 또 공부도 할겸 정리해보려 한다. 아래의 내용은 완전하게 fix된 상태는 아니고 어디까지나 내가 직접 이것저것 건드려본 내용이니 오해없으시길…



1. 설치형 블로그, WordPress

이 블로그 가장 첫글도 워드프레스에 대한 내용인데, 대부분 알고 있을거라 생각하지만 wordpress.com에서 서비스하는 무료(용량제한있음) 블로그도 있고, wordpress.org에서 다운받아 개인이 운영하는 웹서버나 호스팅 받은 공간에 설치할 수 있는 것도 있다. wordpress.com에서 제공되는건 보안 측면에서 테마 수정 등에 제한이 있고 플러그인 설치도 불가능하다. 나의 경우엔 이것저것 바꿔보고 수정도 해보고, 공부도 하고 싶은데 무료 블로그의 제약때문에 고민하다 결국은 호스팅을 선택해서 워드프레스를 설치하기에 이르렀고 이 글의 모든 내용은 바로 그런 분들에게만 해당되는 내용.



2. mypickup 이란 무엇?

간단히 설명하면 블로그의 글을 트위터로 올려주는 기능을 수행하는 위젯이다. 누군가의 블로그를 방문해서 글을 읽다가 내용이 좋아서 트위터의 follower 들에게 알려주고 싶을 때 보통은 해당 포스트의 주소를 복사해서 트위터 페이지를 연 후에 간략한 설명과 함께 주소를 붙여넣어야 하는데, 이런 작업이 여간 귀찮은게 아니다. 그런 작업을 좀 더 간편하게 할 수 있고 (글을 읽던 페이지에서 클릭 몇 번으로 끝. 단, 그 블로그에 설치되어 있어야…), 그렇게 여러 사람들이 ‘이거 괜찮네’ 라고 생각했던 글들은 mypickup.kr에 따로 모여서 한꺼번에 구경할 수도 있게 되어있다.



블로그에 설치가 되면, 위와 같은 위젯이 보이게 되고, ‘트위터 알리기’를 클릭하면 세부 내용을 입력할 수 있는 팝업이 열려 자신의 트위터 id/pw를 입력하고 트위터로 보낼 글을 넣어주면 트위터와 mypickup.kr로 해당 내용이 전송되고 블로그에 있는 위의 twt visitors 수가 늘어나게 된다. 아래는 ‘트위터 알리기’를 눌렀을 경우의 팝업 화면.



아직은 베타서비스 중이고, 더 자세한 내용을 알고 싶다면 이 곳을 방문하면 된다.

http://www.estorylab.com/18



3. 내 블로그에 어떻게 넣을 것인가?

티스토리, 텍스트 큐브, 제로보드 XE에 추가하는 방법은 위의 ‘이스토리랩’에 설명이 되어있다. 근데 워드프레스는?? 난 몇가지 이유때문에 워드프레스를 고집해야만 하고, 아직 워드프레스에 넣는 방법은 제공되지 않았다. 그래서 잘 모르면서도 해보려고 발버둥치게 된건데…’대충 뭐 비슷하지 않겠어?’ 라는 말도 안되는 가정에서 출발하게 되었다.


일단 워드프레스 관리자 페이지로 들어가보면, 좌측에 여러개의 메뉴가 보이는데 그 중에서 ‘테마 디자인 > 편집기’를 눌러본다. 그럼 자신이 현재 사용하고 있는 테마의 구성파일들이 보이고, 그 파일들의 세부내용을 관리자가 편집 가능하게 구성된 화면이 나타난다. 우측을 보면,



이런 부분이 보이는데, 이게 테마를 구성하고 있는 파일로 생각된다. 예를 들어 ‘사이드바’는 사이드바를 보여주는 파일일거고, ‘footer.php’는 블로그의 하단을 책임지고 있을거 같고(왠지), ‘header.php’ 파일은 왠지 블로그의 위에서 무언갈 할 거 같은 느낌이 막 온다. 근데, 그 부분에 위젯을 넣을게 아니었기 때문에 그 파일들은 열어보지도 않았다. 처음에 헷갈렸던건 ‘단일 글’과 ‘메인 인덱스 템플릿’ 이었는데, 이것저것 시도하면서 나중에 알게 된 사실은 single.php(단일 글) 파일은 글을 클릭해서 블로그에 하나의 글만 보이는 상태의 화면을 만들어주는 파일이고, index.php 파일은 블로그에 접속했을 때 처음 나타나는 화면을 구성해주는 파일이다. (모두 직접 수정해보고, 비교해보면서 알게 된…) 나의 경우엔 블로그를 열었을 떄, 글이 5개씩 나오게 설정해 두었기 때문에 두 가지 파일을 모두 수정해야만 할 것 같았다.


그래서 해당 파일들을 열어보니, 아래와 같은 부분을 볼 수 있었는데…



php 파일의 윗부분부터 차근차근 보니, 왠지 뭔가 느낌이 오는 부분들이 보였다. 로 구성된 부분 안에 있는 내용들이 함수 형태를 띄고 있는 걸로 봐서 무언가 행위를 하는 녀석들이겠구나 라는 직감이 든다. 예를 들어 가장 상단의 get_header(); 는 보나마나 헤더 부분을 보여주는 녀석일 거고, the_ID(); 는 해당 포스트의 고유 id를 표시해 줄거고, the_permalink(); 는 보나마나 포스트의 고유주소, the_title(); 은 제목을 표시할거라는…이 순진한 믿음(? :O). 하지만 실제로 브라우저에서 ‘소스 보기’를 해서 페이지의 소스와 비교한 결과 일치했다. 그래서 위의 그림처럼 글의 내용을 보여주는 the_content 아랫 부분에 mypickup 위젯을 붙이게 되었다.

mypickup 위젯을 사용하기 위한 소스는 아래와 같다.

mypickup이 내 블로그에서 가져가야 하는 데이터는 트위터 아이디, 링크를 걸어야 하는 고유주소, 글의 제목 정도로 보인다. 왜냐하면, 실제 ‘트위터 알리기’를 클릭했을 경우 팝업 화면에 기본적으로 등록되어 있는 내용이 ‘타이틀, 링크, 트위터 아이디’ 였기 때문이다. 원하면 찾아서 주면 된다. ㅎㅎ 그래서 워드프레스에서 각 부분을 보여줄 때, 사용되는 함수들을 그대로 변수에 입력하는 식으로 수정했더니…끝.

4. 기타 / 유의사항

위의 내용은 워드프레스의 Journalist 테마를 수정해서 테스트하고 만들었기 때문에, 사용하는 테마에 따라서 조금 다를수도 있다는 생각이 든다. 테마 별로 사용하는 파일의 구성이나 내용이 다를 수 있어서인데 그래도 기본적인 내용은 비슷할거라 본다. 또 위 처럼 했을 경우 모든 기능은 제대로 동작하는 것으로 보이는데, 단 하나 twt visitors에 표시되는 수가 이상하게 올라가는 현상이 있다. 아마 count 할 때 사용하는게 무엇이냐에 따라 조금 수정해야 할 수도 있을 것 같은데, mypickup 서비스를 하고 있는 estorylab의 강팀장님께 문의중이니 해결되는 대로 블로그에 추가해서 업데이트 할 예정이다. 또 나의 경우엔 테마의 설정상 index.php와 single.php 파일에 위의 소스를 붙여넣어서 사용했는데, 설정에 따라 다른 파일들도 동일하게 수정해야 할 수도 있다.

To be continued…


Daum map Open API 사용방법



부서에서 연구회 활동을 하고 있다. 조별로 나뉘어 4월 혹은 5월쯤엔 산출물을 내어놓아야 하는데, 우리가 만들기로 한 모바일용 클라이언트가 위치 정보를 지도상에 표시해 주어야 하기 때문에 open된 몇가지 중에 daum map을 사용할까 생각하고 있다. Google, Naver 등도 조금 살펴봤지만 어차피 방식은 비슷하다. 모두 웹상에서 서비스하고 있기 때문에 근간이 되는 지도에 대한 데이터는 무작정 받아와야 하고 사용자 혹은 개발자가 컨트롤 할 수 있는 부분은 java script 를 이용해야만 하는 것 같다. 국내 실정에 잘 맞고 위성 사진(스카이뷰)이 조금 더 깔끔하다고 생각하는게 daum map 이었기 때문에 시도해보고 정리할 생각이다.






1. 준비



Java script 실행에 문제가 없는 공간.
보통 업체들에서 서비스하는 블로그 혹은 게시판에선 보안 등의 이유로 java script 사용에 제한이 있다. 때문에 개인이 웹서버를 운영하던가 별도의 업체에 웹호스팅 서비스를 신청해서 그러한 공간을 마련해야 한다. 나의 경우엔 역량강화의 목적으로 시작하게 된거기 때문에 그냥 무료 웹호스팅 업체를 이용하기로 했다. (제공하는 하드와 트래픽은 좀 작지만 알아보니 쓸만한 무료 웹호스팅 업체가 꽤 되는 듯 하다. 국내뿐 아니라 다른 나라도…) 그래서 paran에 신청. 설치비 무료고, 필요한 내용 5분 정도 작성해주면 20분 안에 서비스를 받을 수 있다.






2. Open API 등록



Google, Naver 와 마찬가지로 Open API 사용을 위해서는 허가를 받아야만 한다.
http://dna.daum.net/apis/maps
위 페이지에 있는 하단에 등록하기 버튼을 누르면 아래와 같은 화면을 만나게 된다. (물론 daum 로그인이 선행되어야…)

<Daum map API 등록화면>



이용할 사이트의 URL을 넣게 되어있는데, 입력할 URL 하위의 모든 웹페이지에서는 서비스 이용이 가능한 것으로 보인다. 나의 경우엔 paran에서 제공받은 웹호스팅 주소를 입력했다. 약관 동의 후 정상적으로 처리되면 sample code와 함께 완료화면으로 이동된다.



<Sample code / 완료된 화면>



Sample code를 언뜻봐도 기본적인 html에 java script가 포함되어 있음을 알 수 있다. script 태그를 보면 본인이 등록해서 할당받은 key 값이 포함되어 있는데 apikey 뒷 부분이 key 값이다. 항상 key 라는 건 고유한거니 공개되면 좋지 않을 듯 한데, 소스보기를 하면 다 보인다. 모르겠다. 가려야 하는건지, 말아야 하는건지…



Sample code를 천천히 살펴보면,
var map = new DMap(“map”, {point:new DLatLng(37.48879895934866, 127.03130020103005), level:2}
이 부분이 간단한 java script로 된 API 사용 예로 보인다. 직관적으로 DLatLng 의 값들은 좌표고, level은 지도의 해상도(확대, 축소 정도)로 생각되는데 실제 API 설명 페이지를 봐도 그렇다. (Level은 12단계로 구분된다고 함)






3. Sample code 저장 / 사용



Sample code를 복사해서 html 문서로 저장한 후, 웹서버(나의 경우엔 호스팅 서비스 받은 공간)의 적절한 곳에 옮겨놓은 후 브라우저로 페이지를 열어보면…잘 된다. ㅎㅎ 의심스러우면 아래의 링크를 클릭



http://blurblah.hosting.paran.com/map/map_test.html