윈도우 라이브 메신저 웹 툴킷 – 라이브 메신저의 모든 것을 웹에서
이번 글에서는 간단한 예제를 만들어 보면서 라이브 메신저 툴킷의 웹 컨트롤들을 자세히 살펴봅니다.
앞서 두 번째 포스팅(Part2)에서 메신저 UI 컨트롤 각각에 대해 소개해 드렸습니다만, 실제 구현에 대해서는 이번 글을 통해 알아 보도록 합니다.
이 글을 통한 구현에 앞서 여러 컨트롤들을 동적으로 조작해 보면서 익힐 수 있는 Messenger Interactive Toolkit을 미리 살펴 두시는 것도 도움이 될 것 입니다.
(링크를 따라 사이트에 가셔서 learn 을 클릭하시면 각 컨트롤들의 기능들에 대해 직접 값들을 변경해 가면서 쉽게 익힐 수 있는 페이지를 찾을 수 있습니다.)
[그림처럼 learn 을 클릭!]
이 글을 통해 구현해 볼 것은 사용자가 메신저에 로그인을 해서 현재 온라인 상태의 메신저 친구들을 나열하고, 이 친구들을 클릭하면 Live home Profile 페이지로 이동하는 기능을 가진 페이지 입니다.
아래의 동영상에서 보시는 기능을 구현 합니다.
이제 아래의 순서에 따라 차례로 구현을 시작해 봅니다.
Step 1. 기본 설정
지난 테스트에서 사용했던 예제 프로젝트를 기준으로 진행합니다.
기본적으로 필요한 파일들을 꼽아 보자면,
> Channel.html
> Privacy.html
> RefreshMessengerToken.aspx
> Web.config
다음과 같은 파일들이 필요합니다. 각각의 기능들이 뭐냐고 물어보시는 분은 없겠죠? [ 있어요? => 클릭 ]
Step 2. AppVarifier를 생성 위한 페이지 설정
프로젝트에 새로운 웹 폼을 추가해 주시고 페이지 이름을 MyOnlineBuddies.aspx 로 해 줍니다.
그리고 페이지의 vb 혹은 c# 파일에 다음과 같이 코드를 추가합니다. 이 글에서 .net 을 사용한다고 해서 여러분들 역시 그럴 필요는 없습니다.
앞서 소개해 드린 것처럼 Java/Ruby/Phython/Pearl/php 어떤 언어든 상관없이 구현이 가능합니다.
[VB.net 코드]
1: Imports WindowsLive
2: Partial Class MyOnlineBuddies
3: Inherits System.Web.UI.Page
4:
5: Private wll As WindowsLiveLogin = New WindowsLiveLogin(True)
6:
7: ''' <summary>
8: ''' Gets an application verifier token.
9: ''' </summary>
10: ''' <returns>The application verifier token</returns>
11: Protected ReadOnly Property ApplicationVerifier() As String
12: Get
13: Return wll.GetAppVerifier()
14: End Get
15: End Property
16: End Class
[C# 코드]
1: using System;
2: using System.Web;
3: using System.Web.Configuration;
4: using WindowsLive;
5:
6: /// <summary>
7: /// Class for handling Default.aspx code behind.
8: /// </summary>
9: public partial class MyOnlineBuddies: System.Web.UI.Page
10: {
11: private WindowsLiveLogin wll = new WindowsLiveLogin(true);
12:
13: /// <summary>
14: /// Gets an application verifier.
15: /// </summary>
16: public string ApplicationVerifier
17: {
18: get
19: {
20: return wll.GetAppVerifier();
21: }
22: }
23: }
Step 3. HTML 페이지 기본 설정
메신저 툴킷의 HTML UI 컨트롤은 XHTML 형식으로 구현되어 있다고 말씀 드린 것 기억하시죠?
이 컨트롤들을 사용하기 위해 우리는 HTML 정의부에 네임스페이스를 추가해 주어야 합니다.
1. 다음과 같이 HTML 선언부를 변경해 줍니다. (이건 다 이미 우리가 살펴 본 내용들이죠)
1: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:msgr="http://messenger.live.com/2009/ui-tags">
2. 이어서 UI 컨트롤들이 사용하게 될 자바스크립트 라이브러리들을 로딩합니다.
1: <head runat="server">
2: <title></title>
3: <script type="text/javascript" src="http://www.wlmessenger.net/api/3.0/loader.js"></script>
4: <script type="text/javascript" language="javascript">
5: Microsoft.Live.Core.Loader.load(['messenger.ui', 'messenger.ui.styles.core']);
6: </script>
7: </head>
3. 그리고 마지막으로 메신저 AppTag를 추가해 줍니다.
1: <body>
2: <msgr:app id="appTag"
3: application-verifier-token="<%= ApplicationVerifier %>"
4: privacy-url="Privacy.html"
5: channel-url="Channel.html"
6: token-url="RefreshMessengerToken.aspx">
7: </msgr:app>
8: </body>
여기까지는 제 앞선 글을 순서대로 읽어 주신 분들이라면 쉽게 이해하실 수 있는 부분입니다.
여기에다가 <msgr:bar></msgr:bar> 태그만 붙어주면 페이지 하단에 웹 메신저를 호스팅 할 수 있었습니다.
이번에는 이 웹바 컨트롤 대신 로그인 기능, 온라인 친구목록 가져오기 기능등을 직접 구현해 보고자 합니다.
Step 4. 컨트롤 추가하기
메신저 AppTag 뒤에 다음과 같이 Sign In 컨트롤을 추가해 줍니다.
1: <msgr:sign-in></msgr:sign-in>
여기까지 진행 한 상태에서 한번 페이지를 실행해 봅니다.
Sign In 버튼이 보이고, 클릭 하여 로그인을 진행하면 갑자기 Sign In 버튼이 사라져 버린 것을 확인 하셨나요?
Sign In 버튼은 사용자가 메신저에 로그인 되어 있지 않은 경우 로그인을 하도록 유도하는 버튼입니다.
내부적으로는 앞서 살펴 보았던 msgr-consent-token 과 msgr-delegation-token 유무를 체크하여 이 쿠키들이 없는 경우에만 로그인 버튼을 보이는 로직이 구현되어 있을 것 이죠
로그인 성공과 함께 로그인 버튼이 보이지 않는 것은 당연합니다.
자, 이제 브라우저를 닫고 이어서 Profile 컨트롤을 추가해 봅니다. cid 값에 $user를 지정해 주었습니다.
1: <msgr:profile cid="$user"></msgr:profile>
cid 값에 특정 사용자의 cid를 지정해 주면 해당 사용자의 대화명과 오늘의 글이 그리고 메신저 이미지가 보이며, Profile 정보 페이지로 이동할 수 있는 링크가 보입니다. 여기서 $user 란 현재 로그인 한 사용자를 뜻 합니다.
즉, 나의 Profile을 보여주겠다는 뜻이죠.
컨트롤을 페이지에 추가하셨다면 다시 페이지를 실행해 봅니다.
처음에는 No name(Offline) 이라고 쓰여진 화면이 Sign In 버튼 아래로 보이다가, 로그인을 하면 Sign In 버튼은 사라지고 여러분의 메신저 대화명과 이미지가 보이는 것 확인 하셨나요?
Sign In 컨트롤의 경우에는 로그인 전에 보이다가 로그인과 함께 사라지는 것처럼 Profile 컨트롤의 경우에는 사용자의 로그인 이후에 나타나게 하는 것이 좋을 것 입니다. 좀 썰렁해 보이는 것이 차라리 보이지 않는 편이 나을 테니까요.
[썰렁한 로그인 전에 보이는 Profile 컨트롤 – 영 어색하다. 차라리 로그인 이전에는 보이지 않는 편이 낫다.]
로그인 전에는 Sign In 버튼만 보이다가, 로그인과 동시에 Profile 컨트롤이 보이게 하면 깔끔하게 떨어지는 UI가 나오게 될 껍니다.
[로그인 전에는 Sign In 버튼만 보이다가 로그인과 함께 Profile 컨트롤이 보임]
그래서 고안된 컨트롤이 바로 “If 컨트롤” 입니다.
바로 적용 들어갑니다.
1: <msgr:sign-in>
2: </msgr:sign-in>
3: <msgr:if cid="$user" condition="online">
4: <msgr:profile cid="$user">
5: </msgr:profile>
6: </msgr:if>
위의 HTML Tag 와 같이 Profile 태그를 <msgr:if> 태그로 감쌉니다.
그리고 이 태그에도 역시 cid 를 $user로 지정하고, condition 값을 “online”으로 설정합니다.
말 그대로 “로그인 한 사용자가 온라인이라면 보여줘라” 라고 하는 이야기가 되겠지요.
이와 같이 수정 하신 후 다시 실행 시키시면 로그인 전에는 Sign In 버튼만, 로그인 이후에는 Profile 컨트롤만 보이게 됩니다.
이 Profile 컨트롤은 사용자의 Presence 정보를 변경하거나 로그 오프를 할 수 있는 기능 그리고 “오늘의 한마디” 를 변경해 줄 수 있는 기능을 제공합니다.
Profile 컨트롤의 cid는 현재 로그인 한 사용자 $user 로 설정되어 있지만 이 값을 커뮤니티의 회원들의 CID로 바꿔 줄 수 있다면?
아래 그림과 같은 재미있는 기능들을 쉽게 구현 할 수 도 있습니다.
위의 그림은 사진 공유 사이트에 메신저 웹 툴킷의 UI 컨트롤을 구현해 놓은 예제입니다. 댓글을 단 커뮤니티 회원들의 메신저 사진 이미지와 대화 명들이 보입니다. 사용자들의 메신저 사진들이 보이는 것이기 때문에 사용자가 자신의 메신저 사진을 변경하면 이에 따라 동적으로 변경된 사진과 대화명 등이 보이게 됩니다.
여기까지의 구현으로 일단 간단히 메신저 웹 툴킷의 컨트롤을 통해 웹 상에서 메신저 상에 로그인 하고, 로그인이 성공하면 나의 Profile 컨트롤이 보이는 기능까지 완성되었습니다.
자 이제는 로그인과 함께 메신저에서처럼 내가 등록한 친구들 중 현재 온라인인 친구들의 목록을 얻어내어 동적으로 리스트 하는 기능을 구현할 차례 입니다.
지금까지는 간단히 태그를 배치하는 것 만으로 쉽게(?) 기능을 구현했습니다만, 이번 기능들부터는 약간의 주의가 요구됩니다.
일단 아래와 같이 HTML 을 구성해 줍니다.
1: <body>
2: <msgr:app id="appTag" application-verifier-token="<%= ApplicationVerifier %>" privacy-url="Privacy.html"
3: channel-url="Channel.html" token-url="RefreshMessengerToken.aspx" onauthenticated="OnAuthenticated"
4: onsignedout="OnSignout">
5: </msgr:app>
6: <div id="layout" style="text-align: center; font-family: Tahoma, 맑은 고딕">
7: <table style="border-width: medium; width: 500px; border-style: solid;" align="center">
8: <tr align="center">
9: <td>
10: <!-- Show display picture -->
11: <msgr:if cid="$user" condition="online">
12: <msgr:profile cid="$user">
13: </msgr:profile>
14: </msgr:if>
15: <!-- Show sign-in control -->
16: <msgr:sign-in>
17: </msgr:sign-in>
18: </td>
19: </tr>
20: <tr align="left">
21: <td>
22: <div id="list" style="font-size: 8pt; padding-left: 7px; height: 500px; overflow: auto">
23: </div>
24: </td>
25: </tr>
26: </table>
27: </div>
28: </body>
기본적으로 우리가 앞서 구현한 Sign In 컨트롤과 Profile 컨트롤이 If 컨트롤과 함께 배치된 것은 변함이 없습니다. 좀 예쁘게 다듬기 위해서 컨트롤들을 Table 내부에 배치 시켜 두었습니다.
주의 깊게 보셔야 할 부분은 먼저 appTag 부분입니다.
이전의 appTag와는 달리 onauthenticated 와 onsignedout 이라고 하는 부분이 추가 되었습니다.
appTag는 기본적으로 요구되는 application-verifier-token, privacy-url, channel-url, token-url 이외에 사용자가 인증을 받고, 로그인을 하는 과정상에서의 이벤트들을 처리할 수 있는 기능이 지원됩니다.[기능 전부 보기]
우리는 이 기능들 중 인증이 성공적으로 완료되었을 경우의 이벤트와 로그 오프(SignOut) 할 경우의 이벤트를 사용할 예정입니다.
두 이벤트들에 대해 소스에서는 OnAuthenticated 와 OnSignout callback 함수들이 지정 되어 있는 것을 보실 수 있습니다.
그러면 이제 각 이벤트 콜백 함수들과 이와 함께 HTML 요소들을 동적으로 구성하기 위한 기능들을 구현할 스크립트 코딩을 완성해 봅니다.
HTML 부분과 마찬가지로 일단 스크립트 부분의 전체 소스를 아래와 같이 구성합니다.
1: <head runat="server">
2: <title></title>
3: <script type="text/javascript" src="http://www.wlmessenger.net/api/3.0/loader.js"></script>
4: <script type="text/javascript" language="javascript">
5: Microsoft.Live.Core.Loader.load(['messenger.ui', 'messenger.ui.styles.core']);
6:
7: onlineContacts = []; //online contacts 들을 담을 배열
8: timerID = null;
9:
10: /// 인증이 완료되면 호출 된다.
11: /// 인증이 되면 User 객체를 받아서 로그인 한 사용자의 온라인 Contact들을 배열에 담을 수 있도록 collectionChanged 이벤트에 Subscription
12: function OnAuthenticated(sender, e) {
13: _user = Microsoft.Live.Messenger.UI.Tags.TagsFactory.get_user();
14: _user.get_onlineContacts().add_collectionChanged(onOnlineContactsChanged);
15: /// collectionChanged 마다 Display를 변경하게 되면 너무나 빈번하게 호출이 되는 문제가 있어,
16: /// 특정 Interval을 명시적으로 정의하여 온라인 사용자들을 갱신하도록 한다.
17: /// 이 예제에서는 5초마다 Refresh 한다.
18: timerID = setInterval(displayBuddies, 5000);
19: }
20:
21: function OnSignout(sender, e) {
22: clearInterval(timerID);
23: clearlist();
24: }
25:
26: /// 온라인 사용자들을 Display 한다.
27: function displayBuddies() {
28: clearlist();
29: for (var i = 0; i < onlineContacts.length; i++) {
30: if (onlineContacts[i].length != undefined)
31: addlist(onlineContacts[i][0].get_cid());
32: }
33: }
34:
35: ///온라인 사용자들에 대한 CollectionChanged 이벤트가 발생 시 호출됨
36: ///onlineContacts 배열에 사용자 정보를 추가,삭제, 갱신함.
37: function onOnlineContactsChanged(sender, e) {
38: switch (e.get_action()) {
39: //추가
40: case Microsoft.Live.Core.NotifyCollectionChangedAction.add:
41: onlineContacts.splice(e.get_newStartingIndex(), 0, e.get_newItems());
42: break;
43: //삭제
44: case Microsoft.Live.Core.NotifyCollectionChangedAction.remove:
45: onlineContacts.splice(e.get_oldStartingIndex(), e.get_oldItems().length);
46: break;
47: //재갱신
48: case Microsoft.Live.Core.NotifyCollectionChangedAction.reset:
49: onlineContacts = new Array(sender.get_count());
50: for (var i = 0; i < sender.get_count(); i++) {
51: onlineContacts[i] = sender.get_item(i);
52: }
53: break;
54: }
55: }
56:
57: /// DIV tag 내의 Child 요소들을 삭제
58: function clearlist() {
59: var node = document.getElementById("list");
60: if (!node) {
61: return;
62: }
63:
64: while (node.hasChildNodes()) {
65: node.removeChild(node.firstChild);
66: }
67: }
68:
69: /// Messenger Web Toolkit UI 요소를 동적으로 생성하여 추가한다
70: function addlist(contactID) {
71: if (contactID == '') return;
72: var tag = Microsoft.Live.Messenger.UI.Tags.TagsFactory.createTag('display-name', { cid: contactID });
73: document.getElementById("list").appendChild(tag);
74: tag = Microsoft.Live.Messenger.UI.Tags.TagsFactory.createTag('personal-message', { cid: contactID });
75: document.getElementById("list").appendChild(tag);
76: document.getElementById("list").appendChild(document.createElement('br'));
77: }
78: </script>
79: </head>
앞 서 작성한 HTML Tag 부분과 위의 Script 부분을 모두 완성시키면 앞서 동영상 클립에서 본 것과 같은 예제 어플리케이션이 구동되는 것을 확인 하실 수 있습니다.
그러면 이제 자바 스크립트 소스를 자세히 살펴보도록 합니다.
가장 먼저 AppTag 중에서 OnAuthenticated 이벤트의 Callback 함수인 OnAuthenticated 의 내부를 살펴 봅니다.
사용자가 로그인 버튼을 클릭하고 로그인을 정상적으로 마치면 가장 먼저 호출되는 콜백 함수가 바로 OnAuthenticated 입니다.
1: /// 인증이 완료되면 호출 된다.
2: /// 인증이 되면 User 객체를 받아서 로그인 한 사용자의 온라인 Contact들을 배열에 담을 수 있도록 collectionChanged 이벤트에 Subscription
3: function OnAuthenticated(sender, e) {
4: _user = Microsoft.Live.Messenger.UI.Tags.TagsFactory.get_user();
5: _user.get_onlineContacts().add_collectionChanged(onOnlineContactsChanged);
6: /// collectionChanged 마다 Display를 변경하게 되면 너무나 빈번하게 호출이 되는 문제가 있어,
7: /// 특정 Interval을 명시적으로 정의하여 온라인 사용자들을 갱신하도록 한다.
8: /// 이 예제에서는 5초마다 Refresh 한다.
9: timerID = setInterval(displayBuddies, 5000);
10: }
이렇게 얻어낸 사용자 객체의 onlineContacts (온라인 사용자 리스트) 프로퍼티의 collectionChanged 이벤트에 onOnlineContactsChanged callback 함수를 지정해 주고 있습니다.
하루에도 몇 번씩 메신저에 로그인/ 로그오프를 빈번하게 하기 때문에 당장 로그인 했을 당시의 사용자 목록이 계속 유지될 수는 없습니다.
그렇기 때문에 메신저 친구들의 온라인, 오프라인 정보가 변경 될 때 마다 새롭게 보여줄 온라인 친구 목록을 재 구성해 주어야 합니다.
우리 소스의 appTag에 지정된 collectionChanged 이벤트의 콜백인 onOnlineContactsChanged 함수가 바로 온라인 친구 목록을 재구성 해 주는 기능을 담당하게 될 것 입니다.
그런데 난데없이 다음 코드에 있는 setInterval 선언은 뭘까요?
원래 정확하게 메신저 친구들의 온/오프라인 변경에 따른 온라인 친구목록 구성과 목록 디스플레이의 코드는(displayBuddies) 모두 collectionChanged 이벤트의 콜백함수인 onOnlineContactsChanged 내에서 수행 되야 합니다.
하지만 워낙 빈번하게 이벤트가 발생하기 때문에 목록을 디스플레이 하기 위한 코드를 실행하기에는 적합하지 않습니다. 그래서 콜백함수에서는 온라인 친구목록의 컬렉션인 배열요소(onlineContacts)에 대한 처리를 담당하는 기능을 수행하고 부득이 디스플레이 하는 로직은 setInterval 함수를 통해 매 5초마다 업데이트(디스플레이)를 해 주는 방식으로 구현되어 있습니다.
1: ///온라인 사용자들에 대한 CollectionChanged 이벤트가 발생 시 호출됨
2: ///onlineContacts 배열에 사용자 정보를 추가,삭제, 갱신함.
3: function onOnlineContactsChanged(sender, e) {
4: switch (e.get_action()) {
5: //추가
6: case Microsoft.Live.Core.NotifyCollectionChangedAction.add:
7: onlineContacts.splice(e.get_newStartingIndex(), 0, e.get_newItems());
8: break;
9: //삭제
10: case Microsoft.Live.Core.NotifyCollectionChangedAction.remove:
11: onlineContacts.splice(e.get_oldStartingIndex(), e.get_oldItems().length);
12: break;
13: //재갱신
14: case Microsoft.Live.Core.NotifyCollectionChangedAction.reset:
15: onlineContacts = new Array(sender.get_count());
16: for (var i = 0; i < sender.get_count(); i++) {
17: onlineContacts[i] = sender.get_item(i);
18: }
19: break;
20: }
21: }
위의 코드는 온라인 친구 목록을 동적으로 재구성하는 로직이 구현된 collectionChanged 이벤트의 콜백인 onOnlineContactsChanged 함수입니다.
코드의 설명처럼 온라인 되는 친구, 오프라인 되는 친구, 초기에 재구성되는 경우에 따라 onlineContacts 로 선언된 외부의 배열 변수를 조작하는 코드임을 쉽게 확인할 수 있습니다.
다음으로 흥미롭게 살펴볼 코드는 동적으로 사용자 목록에 따라 메신저 웹 툴킷 UI를 구성하여 추가해 주는 로직이 담겨있는 addList 함수입니다.
1: /// Messenger Web Toolkit UI 요소를 동적으로 생성하여 추가한다
2: function addlist(contactID) {
3: if (contactID == '') return;
4: var tag = Microsoft.Live.Messenger.UI.Tags.TagsFactory.createTag('display-name', { cid: contactID });
5: document.getElementById("list").appendChild(tag);
6: tag = Microsoft.Live.Messenger.UI.Tags.TagsFactory.createTag('personal-message', { cid: contactID });
7: document.getElementById("list").appendChild(tag);
8: document.getElementById("list").appendChild(document.createElement('br'));
9: }
이 코드를 주위 깊게 살펴야 할 이유는 일반적인 HTML 태그와 달리 우리가 사용하고 있는 메신저 웹 툴킷의 UI 들은 XHTML 구성요소를 사용하고 있기 때문에 동적 생성을 위해서는 생성기(Factory)를 거쳐야만 가능하기 때문입니다.
이 때문에 생성기의 사용법을 주의 깊게 살펴 봐야 합니다. 메신저 웹 툴킷의 UI에서 사용되는 태그 생성기는
Microsoft.Live.Messenger.UI.Tags.TagsFactory 입니다.
우리의 코드에서는 동적으로 <msgr:display-name> 태그와 <msgr:personal-message> 태그를 생성하고 있습니다. 또 흥미로운 것은 이 태그에서 사용하는 속성값들(attribute)을 지정하는 방식으로 JSON 데이터 표현 방식을 사용하고 있습니다.
마지막으로 로그 오프시에 발생하는 SignedOut 이벤트의 콜백 함수인 OnSignout 함수에서는 인증 성공 시에 설정했었던 타이머를 해제하고, 동적으로 추가된 사용자 목록 UI를 청소해 주는 기능을 가진 코드가 추가되어 있습니다.
1: function OnSignout(sender, e) {
2: clearInterval(timerID);
3: clearlist();
4: }
간단한 자바스크립트 코드 몇 줄과 HTML 태그를 통하여 간단히 나의 온라인 친구들 목록을 구성하는 예제를 구성해 보았습니다.
메신저 웹 툴킷은 재미있는 컨트롤들과 이들을 쉽게 연결시켜 줄 수 있는 라이브러리들을 지원하기 때문에 아이디어에 따라서는 얼마든지 훌륭한 기능들을 가진 어플리케이션들을 구현해 낼 수 있습니다.
반드시 데스크탑에 메신저가 설치되어 있지 않은 환경이라도 친구와 대화를 나누거나 친구에게 메시지를 전달 할 수 있으며, 메신저라는 강력한 커뮤니케이션 수단을 통해 웹 사이트를 보다 Socal 하게, 보다 많은 트래픽이 넘쳐나는 사이트로 만들 수 있습니다.
Social 한 사이트에서 사용자의 트래픽을 유발시킬 수 있는 수단으로는 수동적인 Feed 보다는 적극적인 사용자와 사용자간의 메시지가 더 큰 힘을 발휘할 수 있습니다.
왜 우리가 이 Windows Live Web Messenger Toolkit 에 관심을 가져야 하는지에 대한 보다 현실적인 이유를 느끼게 되실 것이라 생각합니다.
간단히 소개 드리려 시작한 포스트가 다섯 번째에 와서야 일단락을 짓게 되는 것 같습니다.
그래도 아직 Javascript 라이브러리와 Presence/ IM Control 과 관련된 기능은 제대로 맛도 보여드리지 못했는데 말이죠.
일단 Windows Live Web Messenger Toolkit과 관련된 블로그 포스팅은 이것으로 마무리 짓겠습니다.
다음 번 글에서는 윈도우 라이브 서비스에 대한 글을 써 보려 합니다.
아직도 윈도우 라이브가 마치
Microsoft 사의 전유물인양,
Microsoft의 플랫폼만을 위한 배타적인 서비스로 알고 계신 분들이 많은 듯 싶어 이러한 오해를 불식시키기 위해 윈도우 라이브 서비스 전반적인 소개와 앞으로의 방향에 대해 정리해 보도록 하겠습니다.