누구나 만들어서 사용해 보는 모바일 웹 서비스

누구나 통 : 간단한 모바일 소셜 네트워크 대화 서비스

앞으로는 누구나 서비스를 만들어 사용하는 시대가
도래할 것이다. 이에 최근 많이 등장하고 있는 서비스의
핵심 부분을 간단하게 구현해 보는 누구나 통 시리즈를 기획했다.
지난 시간에 만든 모바일 웹 뉴스 서비스에 이어 이 글에서는 소셜 네트워크 서비스인 ‘누구나 톡’을 만들어본다.

지난 2월 일본의 인터넷 기업인 라쿠젠이 음성통화 서비스인 바이버(Viber)을 한화로 약 1조 원에 인수했다. 이를 두고 단순히 일본 안에서의 온라인 소매회사에 머무르는 것이 아니라 소프트뱅크와 같은 세계적인 모바일 인터넷 서비스 회사로 부상하기 위한 포석이란 분석이 제기되고 있다. 바이버는 수익 구조가 없는 무료 서비스지만 193개국에 3억 명에 달하는 사용자가 확보된 만큼 라쿠젠은 이를 이용해 다양한 사업을 펼칠 전망이다.

와츠앱부터 라인까지...소셜 네트워크 메신저 앱 돌풍

이번 인수가 있은 후 얼마 지나지 않아 페이스북도 와츠앱(WhatsApp)을 20여조 원에 인수해 화제가 됐다. 카카오톡의 모태가 된 와츠앱은 전 세계 4억5,000만 명이 이용자는 세계 최대 메신저 서비스다. 와츠앱은 유료 서비스를 추구해 메시지를 무료로 제공하는 대신 게임이나 아이템 판매로 수익을 내는 카카오톡과 라인보다 메신저 본연의 기능에 충실하다는 평가를 받고 있다. 이번 인수소식이 들려오자마자 네이버의 주가가 8%나 급락하기도 했다. 그 만큼 IT 분야에서 메신저 전쟁이 본격화되는 양상이다.

누구나 톡 서비스

앞서 밝혔듯 이 시간에는 자신의 URL 서비스 주소만 알면 해당 사이트에서 서로 대화할 수 있는 소셜 네트워크 서비스를 개발해본다. 이해를 돕기 위해 누구나 톡 서비스의 결과물을 먼저 소개하니 먼저 사용해보길 바란다(<그림 2> 참조).

누구나 톡 서비스 결과물 : http://j.mp/1i2Dgaihttp://j.mp/1i2Dgai



누구나 톡 서비스는 특정 날짜에 본인이나 타인의 글을 남길 수 있고, 글을 작성한 날짜가 지나면 해당 메시지가 화면에서 사라진다. 그 대신 날짜 탭에서 이전 메시지를 확인할 수 있는 기능도 제공한다. 타인도 자신의 주소를 찾으면 글을 작성할 수 있고, 이전에 작성한 글도 확인할 수 있는 오픈 형 서비스다. 이를 좀더 응용하면 개인용 노트, 일기장, 개인화된 대화 채널 서비스로도 활용 가능하다.

누구나 톡 서비스에 사용된 라이브러리

누구나 톡 서비스에는 자바스크립트를 보다 쉽게 사용할 수 있게 돕는 프레임워크인 제이쿼리 2.x와 대표적인 모바일 웹 UX 프레임워크인 제이쿼리 모바일이 사용된다. z 프레임워크는 circul.us에서 개발 및 배포되는 프레임워크로, 서버 사이드 개발 없이 클라이언트에서 클라우드 스토리지나 웹 소켓을 손쉽게 이용할 수 있게 돕는다.

개발 과정

먼저 누구나 톡 서비스의 UI는 제이쿼리 모바일로 구성한다. 다음 글을 남길 수 있는 팝업 구성 요소와 본인과 타인이 작성한 글 위치를 조정하는 기능은 CSS 코드로 제작한다. 메시지를 저장하고 불러오는 기능은 자바스크립트 코드로 개발한다.

HTML 코드 작성(UI와 팝업 창 생성)

누구나 톡 서비스의 UI는 제이쿼리 모바일로 개발됐다. 헤더와 푸터 영역을 만든 다음 메인 콘텐츠 영역에 차후 입력된 메시지가 출력될 수 있게 구현한다. 화면 상단에는 Circulus 웹사이트의 링크 버튼과 리플레시 기능 버튼을 배치하고, 상단 타이틀 영역은 id 명을 now로 지정해 오늘 날짜가 표시되도록 설계했다. 화면 하단에는 글 작성 버튼과 날짜 선택 버튼을 추가했다. 마지막으로 글을 작성할 수 있는 팝업창과 날짜 선택 팝업창을 연결할 요소를 만들어야 하는데, 여기에 지정할 id는 차후 팝업 창을 연결하는 데에도 사용된다.

<리스트 1> 제이쿼리 모바일로 UI와 팝업창 생성< div id="social" data-role="page">
< div data-role="header" data-position="fixed" data-theme="b">
< a name="me" data-ajax="false" href="http://www.circul.us" class=
"ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left">Circul.us< /a>
< h1 id="now">Circul.us< /h1>
< a data-ajax="false" class="ui-btn-right ui-btn ui-btn-inline ui-mini
ui-corner-all ui-btn-icon-left" name="refresh">Refresh< /a>
< /div>< !-- /header -->< div class="ui-content" name="body" role="main">
< /div>< !-- /content -->< div data-role="footer" data-position="fixed" data-theme="b">
< div data-role="navbar">
< ul>
< li>< a href="#popupWrite" data-transition="pop"
data-rel="popup" data-position-to="window" data-icon="grid">Write< /a>< /li>
< li>< a href="#popupDate" data-transition="pop" data-rel="popup"
data-position-to="window" data-icon="gear">Date< /a>< /li>
< /ul>
< /div>
< /div>< !-- /footer -->
< /div>

<리스트 1>의 구성은 크게 Header, Content, Footer 영역으로 나뉜다(<그림 4> 참조). Content는 이후 DB에 저장된 메시지를 출력되는 영역이며, Footer은 버튼에 작성한 id가 팝업 창에 연결된다.





이제 서비스의 하단에 버튼으로 제작된 글 작성 창과 날짜 변경 팝업을 제작할 차례다(<리스트 2> 참조). 글 작성 창에는 사용자 이름과 메시지를 입력할 수 있는 Text Input을, 날짜 입력 창에는 Input 타입을 date로 지정해 터치 시 날짜 선택 화면이 나오도록 제작한다. Footer 영역에 배치된 버튼의 id와 popup id를 동일하게 맞춰야만 해당 버튼이 터치할 때 정상적으로 팝업 창이 출력됨에 주의하자. 메시지 작성과 날짜 선택 팝업 또한 id를 동일하게 구성해야 한다.

<리스트 2> 하단 영역의 글 작성 버튼과 날짜 변경 버튼 기능 구현< div data-role="popup" id="popupWrite" data-theme="a" class="ui-corner-all">
< div data-role="header" data-theme="b">
< h3>New article< /h3>
< /div>
< div role="main" class="ui-content">
< input type="text" name="user" id="userId" value=""
placeholder="username" data-theme="a">
< textarea name="pass" id="data" value="" placeholder="input message"
data-theme="a">< /textarea>
< a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b"
data-rel="back">Cancel< /a>
< a href="#" name="summit" class="ui-btn ui-corner-all ui-shadow ui-btn-inline
ui-btn-b" data-rel="back" data-transition="flow">Summit< /a>
< /div>
< /div>

< div data-role="popup" id="popupDate" data-theme="a" class="ui-corner-all">
< div data-role="header" data-theme="b">
< h3>Change Date< /h3>
< /div>
< div role="main" class="ui-content">
< input type="date" id="date" value="">
< a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b"
data-rel="back">Cancel< /a>
< a href="#" name="summit" class="ui-btn ui-corner-all ui-shadow ui-btn-inline
ui-btn-b" data-rel="back" data-transition="flow">Summit< /a>
< /div>
< /div>

CSS 코드 입력

지금부터는 본인과 타인이 작성한 글이 배치되는 콘텐츠 영역의 기능을 구현해보자. 본인이 작성한 글은 왼쪽으로, 타인이 작성한 글은 오른쪽으로 배치되도록 text-align 값을 설정하자(<리스트 3> 참조).

<리스트 3> 콘텐츠 영역 메시지 정렬#social div[name=me]{
text-align : left;
}#social div[name=reply]{
text-align : right;
}

자바스크립트 코드 작성

1) 메시지 데이터 보여주기

<리스트 4>의 refresh 함수는 데이터의 갱신을 담당한다. 메인 글 표시 영역에 기존 하위 데이터를 삭제하고 현재 표시된 날짜를 기준으로 데이터를 조회하는 데에는 find 함수를 사용했다. 가져온 데이터에서 자신의 id와 다른 데이터는 name을 reply 형태로 지정하고, 제이쿼리 모바일에서 제공하는 컬러테마를 b로 지정하자. 본인의 id에 해당하는 데이터의 경우 name을 me로 선택하고 컬러테마를 a로 지정해야 한다. 이렇게 작성된 내용은 콘텐츠 영역에 출력될 수 있도록 prepend 명령어를 사용했다.
<리스트 4>에는 특별한 프레임워크가 사용됐는데, 앞서 언급한 바로 z다. z 프레임워크는 클라우드 스토리지에 메시지를 저장하고 불러오기 위해 사용됐다.

<리스트 4> 메시지 데이터 로드var id = 'rippertnt'; // define your id
$('a[name=me]').text(id);

var refresh = function(){
$('div[name=body]').children().remove();

z.find($('#now').text(), function(data){

for(var i = 0; i < data.length ; i++){
var value = data[i].value;
var $me;
var $title;
var $body;

if(value.userId === undefined || value.userId.toLowerCase() !== id){
$me = $('< div/>').attr('name','reply')
.addClass('ui-corner-all custom-corners');
$title = $('< div/>').addClass('ui-bar ui-bar-b')
.append($('< h3/>').text(value.userId + ' / ' + value.time));
$body = $('< div/>').addClass('ui-body ui-body-b').append($('< p/>')
.text(value.data));
} else {
$me = $('< div/>').attr('name','me')
.addClass('ui-corner-all custom-corners');
$title = $('< div/>').addClass('ui-bar ui-bar-a')
.append($('< h3/>').text(value.userId + ' / ' + value.time));
$body = $('< div/>').addClass('ui-body ui-body-a')
.append($('< p/>').text(value.data));
}

$me.append($title);
$me.append($body);
$me.append($('< p />'));

$('div[name=body]').prepend($me);
}

}, function(data){
alert('Find Fail!');
});
};

2) 메세지 작성 기능
쓰기 팝업 창에서는 Data 함수로 구한 글 작성 시점의 연도, 날짜, 시간, 분, 초를 기준으로 메시지가 출력된다. 아울러 메시지 팝업의 사용자 id 영역과 data 영역의 데이터를 저장하기 위한 value 객체를 만들자. 이렇게 생성된 날짜 값을 키로 넣고, 객체를 저장할 값으로 지정한 다음 z 프레임워크의 save 함수를 호출하자. save 함수 실행이 성공하면 작성한 refresh 함수를 호출해 화면에 데이터를 출력하자.

<리스트 5> 메시지 작성 기능 구현$('#popupWrite a[name=summit]').click(function(){
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var seconds = currentTime.getSeconds();
var minutes = currentTime.getMinutes();
var hour = currentTime.getHours();

var time = toChar(hour) + ':' + toChar(minutes) + ':' + toChar(seconds);
var key = year + '-' + toChar(month) + '-' + toChar(day) + ' ' + time;

var id = $('#userId').val();
var data = $('#data').val();

var value = {
userId : id,
data : data,
time : time
};

$('#data').val('');

z.save(key, value, function(data){
refresh();
}, function(data){
alert('Save Fail!');
});
});

3) 이벤트 및 함수 등록

<리스트 6>의 now 함수는 날짜 버튼으로 날짜를 변경했을 때 해당 메시지를 불러와 표시해준다. Data를 이용해 현재 날짜를 구하고, 이를 제이쿼리의 text 함수로 화면 상단에 표시하자. 이후 refresh 함수를 호출해 데이터를 실제로 출력한다.
tochar 함수는 한자리 숫자인 날짜와 시간을 두 자리로 바꿔주는 함수다(1분 → 01분). <리스트 6> 코드에서 p 날짜 선택 팝업의 summit 버튼을 누르면 data input 창에 입력 받은 날짜를 현재 날짜로 표시되고 refresh를 호출해 데이터를 갱신한다. refresh 버튼을 누르면 화면 데이터를 갱신할 수 있는데 이 또한 refresh 함수를 호출한다. 마지막으로 오늘 날짜를 기준으로 프로그램 실행 시 입력된 메시지를 불러올 수 있도록 작성한 now 함수를 호출하면 된다.

<리스트 6> 이벤트 처리var now = function(){
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();

$('#now').text(year + '-' + toChar(month) + '-' + toChar(day));
refresh();
};

var toChar = function(val){
if(val < 10){
return '0' + val;
} else {
return val;
}
}

$('#popupDate a[name=summit]').click(function(){
$('#now').text($('#date').val());
refresh();
});

$('a[name=refresh]').click(function(){
refresh();
});

now();

지금까지 간단한 모바일 소셜 네트워크 대화 서비스인 누구나 톡을 개발해봤다. 우리가 현재 사용하고 있는 카카오톡이나 라인처럼 다양한 기능을 추가하기 위해서는 여기에 많은 기능을 더 추가해야 한다. 그러나 현재 기능에 간단하게 메시지를 주기적으로 확인해 화면에 존재하지 않은 데이터를 갱신해주는 기능을 추가할 수 있다. 오늘 날짜의 데이터가 없는 경우 이전 날짜의 데이터가 보이거나 새로운 메시지가 도착하면 사용자에게 알려주는 기능을 추가한다면 실생활에 보다 유용한 서비스가 될 것이다.
가장 기본적인 메신저 기능만 구현해 놓을 상황이지만, 여기에 좀더 다양한 기능을 계속적으로 추가한 과정을 circul.us 에 공유할 예정이다. 다음 시간에는 누구나 시리즈의 마지막 회로, 애니팡과 유사한 간단한 퍼블 게임을 모바일 웹 환경에 구현할 계획이다.

누구나 톡 서비스에 대한 실습은 www.curcul.us에서
직접 진행해볼 수 있다. Learn에 해당 과정이 등록돼 있다.