대학 2학년 때 위피자바로 실시간 끝말잇기 모바일 게임을 만들었었다. 끝말잇기 게임이 지금 생각하면 유치하게 생각되긴 하지만, 그 때 당시에는 쿵쿵따같은 걸 많이했다. 요새 엠티가서 하자고 하면 매장당할려나ㅋㅋ 그래도 가끔 지하철에 같은 곳에서 애들이 심심풀이로 하는거 봤는데..

어쨋든 실시간 게임 서버도 구축하고 모바일 게임 개발하고.. 프로젝트 시연 때 큰 호응도 얻어 신났었다. 그리고나서 실서비스의 꿈도 가졌었지만.. 그냥 좌절하고 말았다. 이 게임의 강점인 멀티 플레이는 무서운 데이터요금 때문에 할 사람이 있을지 의문이었고, 무엇보다 통신사를 통해 등록하는게 상당히 까다로웠다.

이 후 모바일 어플은 잊고 살다가.. 아이팟 터치 1세대를 만나게 됬다! 애플을 사랑하는 친구가 있었는데, 하드디스크 장착하고 손으로 빙빙돌리는 처음 아이팟부터 아이팟 터치 그리고 아이폰까지 사용하는 녀석이었다. 이 친구는 일본 유학 중이었고, 학생이었던 나는 친구집에 빌붙어서 정말 저렴하게 일본여행을 했었는데.. 이 때 친구 아이폰과 아이팟 터치가 너무 신기해서 여행 중 계속 만지작거렸다. 친구는 내가 안쓰러워 보였는지 여행 마치고 돌아올 때 내뜸 아이팟 터치를 내게 안겨줬다~

아이팟 터치.. 정말 장난아니었다. 아이튠스 스토어에서 별의별 어플들이 올라와있었고, 이제껏 격어보지 못한 신기하고 재미있는 어플들이 많았다. 정말 이때 학교 때려치고 아이폰 어플 재미있게 만들면서 먹고 살까 심히 고민을 했었는데.. 아이맥이 있었다면 정말 그랬을지 모른다. 그리고 구글에서 안드로이드 플랫폼을 내놓았다. 개방을 내세우는 구글의 오픈 모바일 플랫폼은 멋져보였지만, 까마득한 단말기 출시일과 초기의 개발환경은 그닥 매력적이지 못해.. 원래 꿈인 웹서비스 개발에 전념하게 됬다.

또 한번의 모바일 어플의 외면이 시작됬지만… 회사내의 안드로이드 스터디 모임으로 다시 시작되었다. 스터디 그룹 6명이 시작으로 멤버 중 과장님의 전폭적인 지지로 즐겁게 시작할 수 있었다. 출퇴근 지하철 양복 2시간동안 안드로이드 책보고, 퇴근 후 2시간 실습.. 그리고 주말을 이용하여 적극적으로 개발.. 이렇게 한달을 고맙게 끝까지 함께한 멤버 한명과 어플을 완성할 수 있었다. 어플 이름은 엣지북.. 패션정보 어플로 안드로이드 마켓에 등록되어 받을 수 있다.

역시 새로운 환경을 익히는건 귀찮은 일이지만, 그 환경이 기존 내가 알고 있는 것 보다 발전됬다면 잼있는 일이다. 안드로이드 플랫폼 잘 만들어졌다. 오래됬지만 예전 위피에 비하면 정말 뛰어난 플랫폼이다. 자바의 방대한 라이브러리와 더불어 어플개발에 기본이 되는 라이브러리가 잘 정리가 되어있어 생각한대로 구현하기 수월했다.

이번 개발의 목적은 안드로이드 어플 개발 익히는 것인데 목적은 달성한 것 같다^^. 우선 개발 기술을 익힌 다음에 괜찮은 아이디어를 바로 구현해보거나, 언제든 필요한 프로그램을 만들어 유용하게 쓸 수 있는 개발자가 참 좋다.

다시 고민하여 OpenAPI를 이용한 위젯을 구상하였데 또 약간의 고민이 생겼다. 보통 OpenAPI를 사용하려면 사용자 Key를 발급받아야 하고, 한 Key당 약 5000회 정도 요청 제한이 있다. 5000회 정도는 한 곳(프로그램)에서 사용하기 넉넉한 량이지만, 위젯은 수많은 블로그에서 등록되기에 그 요청량은 급격하게 늘어난다. 그래서 OpenAPI를 사용하여 만든 위젯을 배포할때 위젯을 퍼가는 사람들에게 API에 대한 Key를 발급받아 넣어주도록 해야한다. 또한 API를 여러개 사용하면 발급해야할 Key도 많아지는데 이렇게 된다면 상당히 번거로울 것 같다.

물론 좋은 위젯이라면 이러한 번거로움은 별 문제 없을것이고.. 이런 저런 생각을 하던 중 MediaWiki API가 생각났다. MediaWiki API를 이용하면 위키백과를 위젯으로 만들 수 있겠다는 생각이 들었고, MediaWiki API는 따로 인증 키를 발급 받을 필요도 없다!

MediaWiki는 위키백과를 위해 개발된 자유 소프트웨어 위키 패키지이다. 그러니까 위키백과는 MediaWiki로 만들어졌는데 MediaWiki 소프트웨어는 API를 제공하고 위키백과 또한 API를 제공한다. MediaWiki를 사용하면서 API를 제공하고 싶지 않으면 설정에서 변경할 수 있는걸로 알고 있다.

위키백과 API – http://ko.wikipedia.org/w/api.php

그래서 구상한 위젯은 ‘위키백과 지식상자’이다. 위키백과에 등록된 문서의 요약된 내용을 표시하고 관련된 문서를 지속적으로 계속 보여주어 사용자에게 위키백과의 유용한 지식을 전달하는 위젯이다.

이제 구현을 하는데 위키백과 문서의 요약된 내용을 표시하는데 문제가 생겼다. 위키백과 API에는 유용한 많은 정보를 제공하는 API가 있는데 정작 내가 원하는 문서 내용을 제공하는 부분이 없었다. 구글맵이나 Wikipedia Roll과 같은 위키백과를 이용한 매쉬업에서는 위키백과 문서의 내용을 표시한다. 어떻게 내용을 표시하나 궁금해서 찾아봤는데 위키백과:데이터베이스를 다운로드 받아 사용하는 것이었다. 하지만 이 데이터베이스를 받아서 운용할 서버가 없다. 방법을 찾다가 단순한 생각으로 위키백과 문서에 직접 접근하여 스크래핑하여 내용을 가져오려 했지만, 부적절한 방법인 것 같고 무엇보다 속도가 느려 다른 방법을 찾아야 했다. 어떻게 하면 위키백과 문서의 요약된 내용을 표시할 수 있을까 고민하던 중 마침 구글 검색이 떠올랐다. 모르는 용어를 구글에 검색하면 보통 위키백과에 등록된 문서의 내용의 일부분을 검색결과를 나타내고 이런 점을 응용하여 문제를 해결했다. Google AJAX Search API 이용해서ㅎㅎ

모든 기능과 외형을 개발하고 마지막으로 디자인이다. 원래 디자인 감각은 없어 디자인에 별로 신경쓰지 않지만 그래도 다른 사람들이 위젯을 퍼가기 때문에 조금은 신경써야 했다. 그래서 이미지를 넣어 디자인해보려 했는데 또 문제가 생겼다. 역시 위젯을 처음 만들어 보니까 참 문제도 많타-.- 위젯을 등록할때 xml 소스만 등록하기 때문에 이미지나 플래시는 내 계정에 올려야 하는데 내 홈페이지 계정에 올려서 나중에 트래픽 제한 걸릴 수가 있다. 당연히 트래픽 제한이 되면 위젯을 퍼간 사람도 문제가 생긴다. 넉넉한 계정을 가지고 있다면야 이미지를 사용하여 디자인 했겠지만 그냥 CSS만로 디자인했다. 사실 디자인 감각이 있었다면 계정 신경 안썼을텐데;;

디자인을 뭐 했냐고 할 수도 있겠는데 그래도 CSS가 179라인이다. 줄내림을 많이 했긴 했지만.. 쩝.. 그래도 가장 큰 특징은 위젯 박스 테두리를 둥글게 했다. CSS3에는 박스 테두리가 둥글게 표시하는 border-radius가 있지만 대부분의 브라우저에서는 지원을 안하니 약간은 트릭인 방법을 찾았다. 이 방법은 ‘css round box‘라고 검색하면 여러가지가 나오는데 Snazzy Borders를 조금 수정하여 사용했다.

자 이렇게 만든 ‘위키백과 지식상자’ 위젯=가젯이 다행히 1차 전문가 심사를 통과했다^^ 지금은 응모작 투표 진행중~

Daum Google 위젯=가젯 개발 경진대회 응모작

Source: http://muik.net/gadgets/wikipedia.xml

웹페이지에 위키백과 지식상자 가젯 추가

시작경로 설정

• 위키백과:대문 – 위키백과 대문(http://ko.wikipedia.org/wiki/위키백과:대문)에 사용되는 용어들을 시작으로 표시합니다.
• 임의 문서 – 위키백과에 등록된 임의 용어들을 시작으로 표시합니다.
• 사용자 용어 – ‘사용자 용어(,구분)’에 입력된 용어를 시작으로 표시합니다.

동작 방식

시작 경로에 의한 용어를 대기열(큐 구조)에 넣습니다. 대기열 앞부분부터 지연시간이 지나면 순차적으로 다음 용어를 표시합니다. 용어를 표시할 때마다 그 용어의 위키백과 문서에서 사용된 용어들을 가져와 대기열 뒷부분에 추가합니다. 대기열은 최대 크기가 설정 되었고, 끝까지 표시 되었을 경우 다시 처음부터 시작합니다.

사용한 APIs

관련 용어명은 MediaWiki API를 통해 정보를 얻었고, 용어에 대한 간략한 설명을 제공하기 위해 Google AJAX Search API를 사용하였습니다.

• MediaWiki API – http://ko.wikipedia.org/w/api.php
• Google AJAX Search API – http://code.google.com/apis/ajaxsearch/

동작 환경

• 다음 위젯과 구글 가젯에서 동작
• IE6-7, FireFox 3.0, Chrome 0.4, Safari 3.2 브라우저에서 CSS+Javascript 동작 확인

이번 프로젝트를 하면서 UI와 UX에 대해 많은 고민을 해보는 경험이 되었답니다:)

주요 기능

• 네이버 쇼핑 검색 API를 이용한 최저가 쇼핑 검색
• 초성 입력에 대한 상품명 추천
• 검색한 상품에 대한 관심 상품 등록/제거
• 스크롤하기 편리한 스크롤 버튼
• 자동 상품 추가 검색
• 다양한 상품 표시 스타일 변경

사이트 URL: http://muik.net/shopper

자세한 정보: http://muik.net/shopper/doc.html

아르고폰(LH-2300)으로 쇼핑 해보기

스크린샷

첫 화면

초성 입력

초성에 대한 상품명 추천

"가을신상" 검색 화면

간단 스타일로 보기

갤러리 스타일로 보기

세로 모드에서 갤러리 스타일로 보기

세로 모드에서 간단 스타일로 보기

세로 모드에서 일반 스타일로 보기

세로 모드에서 첫화면

세로 모드에서 초성에 대한 상품명 추천 화면

사이트 URL: http://muik.net/youtv

TV처럼 편리하게 사용할 수 있게 디자인에 많은 고민을 했어요. 화면 구성은 비디오가 재생될 수 있는 꽉 찬 화면에 채널선택[C], 재생을 제어하는 버튼 3개로 꼭 필요한 기능으로 구성했고, 동작도 TV처럼 한 프로그램이 끝나면 자동으로 다음 프로그램이 재생됩니다. 물론 광고는 없고요^^

채널은 YouTube RSS로 단순한 플레이리스트가 아닌 수시로 새로운 내용으로 변경됩니다.

채널 버튼[C]을 누르면 채널 목록이 나오는데 현재 보고 있는 시청수를 기준으로 정렬되서 보이고, 사용자는 그 시간대에 인기있는 채널을 쉽게 선택할 수 있어요. 또한 사용자가 원하는 채널을 검색어를 입력하여 검색할 수 도 있고요.

채널 검색 시 채널이 없다면 자동으로 채널을 추가하여 TV의 고정된 채널이 아닌 무한 채널을 가지는 특징도 있답니다.

처음엔 터치웹폰용으로 개발하였지만 YouTube Chromeless Player가 지원되지 않아 웹뷰어용이 되었습니다. 또한 다양한 기기에서 지원되도록 W3C 표준에 맞게 개발하였고, Internet Explorer 6~7, Firefox 3에서도 잘 동작하도록 크로스 브라우징을 고려하여 개발 하였습니다.

아래의 활용방법을 보고 이용해보세요.

좋아하는 가수(이효리) 채널 보기

1. YouTV 접속
2. 왼쪽의 [C]버튼을 클릭
3. 채널목록 상단 검색창에 ‘이효리’ 입력
4. 검색 결과의 ‘이효리’ 채널을 선택

‘이효리’의 동영상을 마음껏 편하게 감상할 수 있답니다.

이외에도 좋아하는 음악, 드라마, 스포츠, 뉴스 등 다양한 채널을 마음껏 즐겨보세요~!

2007 Daum-Lycos 글로벌 인턴쉽 응모작

주제는 타임머신 웹서비스이고, 이렇게 시작되었다.

“시간과 공간을 자유롭게 이동할 수 있는 가상세계에 현실세계를 그려 넣는다면 타임머신이 가능하지 않을까?”

아쉽게 최종선발 되진 않았지만, 처음으로 웹서비스를 기획해보고 잼있는 일들이 많았다. 역시 개인 프로젝트보다 팀 프로젝트가 훨씬 흥미로운 것 같다.

타임머신 웹서비스 – scopon G.pdf

Some features are hidden, but those will come out in your action. Check this out!

New features:

• Listen my favorite songs added to Playlists
• Load the page more quickly
• Use permalinks
• Fixed a refreshing bug of My Charts in IE6

You can enjoy this at:

http://muik.net/billboard/

New features:

• The number of Songs of Charts is increased.
• Display in two ways by choosing normal or simple mode
• Fixed a random play bug in version 0.1

muik Billboard is a web service that help you can easily listen to hot music issued from Billboard Music Charts.

You can enjoy this at:

http://muik.net/billboard/

Features:

• Collect the songs of Billboard Charts and the videos of YouTube in reference to them automatically
• Change the play mode (No repeat, Program play, All songs repeat, One song repeat, Random play)
• View and select new and last Billboard Charts classified by genre
• Add my loving genre to My Charts
• Use member services in despite of no login in my computer, if not deleting browser cookies

Intended features:

• View serveral videos and photos in relation to the song
• Make and delete my playlists
• Add the song to my playlists
• Add the chart to my favorite charts
• Search songs

Confirmed browsers:

• Mozila Firefox 2.0
• Internet Explorer 7.0
• Internet Explorer 6.0

일일이 가수명와 제목을 복사하여 유투브에서 검색해서 들어보는데 더이상 이렇게 불편하게 들어볼 수 없었다. 그래서 이걸 편하게 들어볼 수 있는 웹서비스를 만들기로 결정내려 우선 서비스명은 muik Billboard (뮤익 빌보드)로 제작하기로 했다!

처음엔 단순히 힙합차트 미리듣기 기능만 제작하려 했는데 만들다보니 다양한 기능들이 떠올랐다. 제작 방향은 simple and easy..

muik Billboard 0.1

muik Billboard(http://muik.net/billboard/)는 빌보드 차트의 음악을 쉽게 들어볼 수 있고 관련 정보를 얻을 수 있다.

기능들 :

• 빌보드 차트 페이지에서 새로운 빌보드 차트들 자동 수집(매주 토요일)
• 유투브 검색으로 차트의 곡들에 대한 비디오들 자동 수집
• 다양한 재생모드 제공 (한곡, 순차, 전체 반복, 한곡 반복, 랜덤 재생)
• 장르별 다양한 차트 제공
• 지난 차트 제공
• 차트들 중 원하는 차트를 선택하여 마이 차트에 추가
• 쿠키를 이용한 로그인 없이 회원서비스 (쿠키를 지우거나 다른 컴퓨터에선 초기화)

추가 예정 기능들 :

• 곡에 대한 다양한 비디오들 보기
• 곡에 대한 관련 사진들 보기
• 플레이리스트 생성/삭제
• 플레이리스트에 곡 추가
• 관심있는 차트 추가/삭제
• 노래 검색

확인된 브라우저들 :

• Mozila Firefox 2.0
• Internet Explorer 7.0
• Internet Explorer 6.0