Search Results for '분류 전체보기'

16 POSTS

  1. 2010.07.28 ㅅㄷㄴㅅ 6
  2. 2008.01.22 Nullable<T> 1
  3. 2007.12.12 [두번째] Javascript를 사용한 rich Editor. 2
  4. 2007.12.09 [첫번째] Javascript를 사용한 rich Editor. 1
  5. 2007.10.30 Webware가 선택한 사이트 #3 - Friendster 2
  6. 2007.10.13 무료 음원 스트리밍 사이트 - Musicovery.com 1
  7. 2007.09.19 Revu스타일의 슬라이딩 로그인 패널 만들기 (1)
  8. 2007.09.12 Social Network Service로의 웹하드 4
  9. 2007.09.09 [Ajax.Net] JavaScript로 Animation 제어하기
  10. 2007.09.07 SKT의 출발. Tossi 12

ㅅㄷㄴㅅ

Posted onionmen : 2010. 7. 28. 11:50, Filed under: 카테고리 없음
ㅅㄷㄴㅅ
Posted by : onionmen
Response : ,

Nullable<T>

Posted 알 수 없는 사용자 : 2008. 1. 22. 11:44, Filed under: 개발

데이터베이스 프로그래밍을 할 때 어떤 필드가 null로 초기화 되어있을 경우, 가끔씩 Primitive type에 null값을 넣고 싶을 때가 있다. 예를 들면 이런 코드이다.

DataSet ds = GetDataSet();
object obj = ds.Tables[0].Rows[0]["NullField"];
int value = 0;

if(obj != null)
{
  value = (int)obj;
}

이럴 땐 Nullable타입을 사용하면 된다. 사용법은 간단하다. 

DataSet ds = GetDataSet();
int? value = (int?)ds.Tables[0].Rows[0]["NullField"];

int?타입은 Nullable<T>를 상속받고 있다. 이런 형태의 Nullable타입은 bool이나 double과 같은 C#에서 사용 가능한 모든 타입들에 대해 구현되어 있다.

Nullable타입은 다음과 같은 프로퍼티와 메소드가 존재한다.

HasValue 값이 존재하는지 검사한다.
Value 값을 리턴한다. 만약 값이 없으면 Exception을 발생시킨다.
GetValueOrDefault(T defaultValue) 존재하는 값 또는 기본값을 리턴한다.

다음과 같이 쉽게 사용할 수 있다. 

int? i = 10;
if (x.HasValue)
{
  Console.WriteLine(x.Value);
}
else
{
  Console.WriteLine("NullValue");
}

이렇게 매번 if나 GetValueOrDefault를 사용하면 코드가 복잡해 보일 수 있기 때문에, Nullable타입과 함께 추가된 ??연산자를 사용할 수도 있다.

int? i = null;
Console.WriteLine(i ?? 10);

??연산자는 C에서부터 계승되어 오던 ?연산자를 사용하는 (i == null) ? i : 0 형태를 축약한 것으로 보면 된다.

참고자료:
http://msdn2.microsoft.com/en-us/library/2cf62fcy.aspx

'개발' 카테고리의 다른 글

[두번째] Javascript를 사용한 rich Editor.  (2) 2007.12.12
[첫번째] Javascript를 사용한 rich Editor.  (1) 2007.12.09
Revu스타일의 슬라이딩 로그인 패널 만들기 (1)  (0) 2007.09.19
[Ajax.Net] JavaScript로 Animation 제어하기  (0) 2007.09.09
ExtremeSwank OpenID Consumer For ASP.Net 2.0  (3) 2007.09.03
Posted by : 알 수 없는 사용자
Response : ,

[두번째] Javascript를 사용한 rich Editor.

Posted onionmen : 2007. 12. 12. 11:39, Filed under: 개발
2007/12/09 - [개발] - [첫번째] Javascript를 사용한 rich Editor.


이전에 우리는 아래와 같은 화면을 보여주는 코드를 작성한 적이 있습니다.
사용자 삽입 이미지


이제 여기에 좀 더 기능을 추가해 보도록 하겠습니다.

우선 가장 기본적으로, 굵게, 기울임체, 밑줄긋기 의 세 버튼을 추가해보겠습니다.

<input type="button" value="기울임" onClick="doCommand('italic');"/>
<input type="button" value="밑줄" onClick="doCommand('underline');"/>

위와 같은 코드를 추가해서 효과를 얻을 수 있습니다.

doCommand 메소드안에 인자값으로 italic 과 underline 을 주었습니다.
인자값의 자세한 내용은 다음 링크를 참조 하세요.


사용자 삽입 이미지


효과가 적용되는것을 확인할 수 있습니다.
이제 우리가 원하는 대로 조금씩 가까워 지고 있습니다.

이제 원하는 글씨체를 넣어볼 차례입니다.
웹 페이지를 제작하면서 글꼴은 화면을 보는 사람 입장에서 생각해야 합니다. 자신의 컴퓨터에 상용글꼴들이 설치되어 있다고 상용글꼴을 사용하면, 정작 그것을 읽는 사용자 입장에선 기본폰트로 보여지기 때문에 디자인에 영향을 줄 수 있습니다. 이는 지금 이 강좌에서도 동일하게 적용됩니다.

그렇기 때문에 우리는 윈도우 기본 글꼴을 사용해서 코드를 작성할 것 입니다. 기본글꼴의 수만해도 굉장히 많이 있지요. 우선은 간단하게 굴림체와 바탕체와 궁서체만 등록을 해 보겠습니다.

<input type="button" value="바탕" onClick="doCommand('fontname','바탕');"/>
<input type="button" value="굴림" onClick="doCommand('fontname','굴림');"/>
<input type="button" value="궁서" onClick="doCommand('fontname','궁서');"/>

위와 같은 코드를 넣음으로 해서 다음과 같은 결과를 얻을 수 있습니다.

사용자 삽입 이미지


글꼴이 추가되면 계속 버튼을 추가해서 넣어야 합니다. 글꼴을 20개 넣는다면, 너무 길어져서 디자인을 제대로 할 수 없습니다.

우리는 <select> 라는 태그를 사용해서 이것을 해결할 수 있습니다.

<select>
    <option>바탕</option>
    <option>굴림</option>
    <option>궁서</option>
</select>

다음과 같은 공간활용이 가능한 결과물을 얻었습니다.

사용자 삽입 이미지


이제 셀렉트 박스(SELECT BOX) 의 선택값으로 글자체를 바꾸는 코드를 넣어보도록 합시다.

<select onChange="doCommand('fontname',this.value);">
    <option value="'Batang'">바탕</option>
    <option value="'Gulim'">굴림</option>
    <option value="'Dotum'">돋움</option>
</select>

화 면은 동일하지만 내용물이 좀 바뀌었습니다. 버튼의 경우 클릭 이벤트를 받아야했기 때문에 onClick 이벤트를 사용했는데, 셀렉트박스의 경우 내용이 바뀌는 경우를 받아야 하기 때문에 onChange 이벤트를 사용했습니다. doCommand 의 경우 이번엔 인자값이 두개인데, 하나는 폰트를 바꾼다고 알려주는 것이고, 두번째는 어떤 폰트로 바꿀지 알려주는 것 입니다. this.value로 현재 선택된 value 값을 인자값으로 넘겨줄 수 있도록 합니다.

<select onChange="doCommand('fontname',this.value); this.selectedIndex=0;">
    <option>글자체</option>
    <option value="'Batang', 'Serif'">바탕</option>                                                 <option value="'BatangChe', ' Serif'">바탕체</option>                                   
    <option value="'Gulim', 'Sans-serif'">굴림</option>                                   
    <option value="'GulimChe', 'Sans-serif'">굴림체</option>                       
    <option value="'Dotum', 'Sans-serif'">돋움</option>                           
    <option value="'DotumChe', 'Sans-serif'">돋움체</option>               
</select>

코드를 넣고 각각의 option에 style="font-family: 'Batang';" 과 같은 스타일을 주어 직접 보여지는 보습의 폰트를 변경 할 수 도 있습니다.

사용자 삽입 이미지


동일한 방법으로 크기에 대한 코드를 넣습니다.

사용자 삽입 이미지


이제 얼추 기능이 추가된 것 같습니다.
좀 더 세심한 기능을 원하시는 분은 위 링크에 들어가셔서 기능을 연구해 보세요. Tistory의 편집창도 직접 만드실 수 있을 거예요.

'개발' 카테고리의 다른 글

Nullable<T>  (1) 2008.01.22
[첫번째] Javascript를 사용한 rich Editor.  (1) 2007.12.09
Revu스타일의 슬라이딩 로그인 패널 만들기 (1)  (0) 2007.09.19
[Ajax.Net] JavaScript로 Animation 제어하기  (0) 2007.09.09
ExtremeSwank OpenID Consumer For ASP.Net 2.0  (3) 2007.09.03
Posted by : onionmen
Response : ,

[첫번째] Javascript를 사용한 rich Editor.

Posted onionmen : 2007. 12. 9. 21:17, Filed under: 개발

4년~5 년 전만 해도, 게시판에 글을 쓸 때 폰트의 크기를 키우거나, 색상을 변경하고 싶으면, 사용자가 직접 HTML 태그를 사용해서 글을 작성해야 했습니다. 그나마도 게시판에서 HTML을 지원해 줘야 가능한 일이었습니다. 그러다가 점점 기술이 발전해 나가고, 사용자의 편의를 신경 쓰게 되니, ActiveX를 사용한 웹게시판이 포털사이트를 중심으로 등장했습니다. 귀여운 아이콘도 넣을 수 있도록 말이죠. 하지만 최근 반ActiveX 지향적인 바람이 불면서, MS IE에서만 동작하는 이러한 게시판에 대한 원성이 높아지고 있습니다. ActiveX를 도입했던 많은 곳에서 이제 ActiveX 를 제거하고, javascript를 사용한 에디터 게시판으로 전향했습니다. 별도의 프로그램을 설치하지 않아도 되는 rich 게시판은 사용자에게 유용하게 사용될 수 있습니다. 물론 이전에도 이런 기술은 존재 하였고, 몇몇 곳에서 이미 도입하여 사용하고 있었지만, 조명을 받기 시작한 건 얼마 되지 않았습니다.

본 포스팅에서 크로스브라우징이 가능한 RICH Editor를 제작해보도록 하겠습니다.

보통 게시판을 제작할 때, 글 내용을 입력하는 부분은 <textarea> 라는 태그를 사용합니다. 하지만 <textarea>는 text 외에 어떤 html도 입력할 수 없고, 입력하더라도 단지 입력만 될 뿐 외관상 아무런 영향을 미치지 않습니다. 그래서 이 부분은 frame 의 designMode 라는 DOM을 사용하여 처리하게 됩니다. 그럼 코드를 작성해 보도록 하겠습니다.

<html>

    <head>

        <title>simple rich editor</title>

    </head>

    <body>

        <iframe id="richEditor"></iframe>

    </body>

</html>

Html 코딩이 끝났습니다. 추가한 것은 iframe 태그가 전부입니다. 이 상태로 화면을 확인해 봐도 아무것도 할 수 없으니 다음 코드를 작성해 보겠습니다.

<head>

    <title>simple rich editor</title>

    <script langauge="javascript">

    function load()

    {

        document.frames['richEditor'].document. designMode = "On";

        }

    </script>

</head>

<body onload="load();">

    <iframe id="richEditor"></iframe>

</body>

페이지가 열린 후 iframe 안에 내용을 편집 가능하게 하려면 designMode 가 on 이 되어야 합니다. 그러기 위해서 <body> 안에 onload 이벤트를 사용하여, 페이지가 로드 되면 자동으로 designmode를 on 시키는 코드를 넣었습니다.

이제 코드를 작성하고 Explorer 를 실행시켜 동작시켜보면 Iframe안에 글씨를 써넣을 수 있게 됩니다. 그런데 위 코드는 파이어폭스(FF)에서는 제대로 실행이 되지 않는다는 큰 문제가 있습니다. 애써서 자바스크립트로 새로 코딩하는데, FF에서 제대로 실행되지 않으면 ActiveX를 사용하는 것과 큰 차이점이 없겠지요?

크로스 브라우징을 위해 코드를 조금 개선시켜 보겠습니다.

function load()

{

    if (document.getElementById('richEditor').contentDocument)

    {

        return document.getElementById('richEditor').contentDocument.designMode = "On";

    }

    else

    {

        return document.frames['richEditor'].document.designMode = "On";

    }

}

나머지 부분은 그대로 놔두고, 자바스크립트 부분만 바꾼 모습입니다. 이러면 IE와 FF 모두 잘 동작하는 모습을 볼 수 있습니다. 코드가 지저분해 보이니 리펙토링을 조금 해보면.

function load()

{

    getIFrameID("richEditor").designMode = "On";

}

function getIFrameID(aID)

{

    if (document.getElementById(aID).contentDocument)

    {

        return document.getElementById(aID).contentDocument;

    }

    else

    {

        return document.frames[aID].document;

    }

}

이렇게 해서 조금은 깔끔한 코드가 완성되었습니다.

이제 글씨들의 스타일을 변경할 수 있는 버튼들을 만들어 넣을 차례입니다.

Html:

<input type="button" value="굵게" onClick="doCommand('bold');"/>

선택된 곳을 굵게 표시할 수 있는 버튼을 만들었습니다. onClick 이벤트로 클릭하면 doCommand 가 실행됩니다.

Javascipt:

function doCommand(command, args)

{

    getIFrameID('richEditor').execCommand(command,false,args);

    document.getElementById('richEditor').contentWindow.focus()

}

doCommand 메소드 입니다. 좀 전에 리펙토링 하면서 만들었던 getIFrameID 메소드와 execCommand 메소드를 사용합니다.

execCommand메소드는 두개의 인자를 갖습니다. 다음 페이지를 참고 하세요.

doCommand(command, args)의 인자 값 중 처음 command는 굵게 만들지, 이텔릭체로 만들지, 언더라인을 그을지 등을 결정합니다. 두번째 args는 첫번째 인자에 따라서 결정되는데, 굵게 만들기와 같은 작업엔 사용하지 않고, 폰트종류나 크기를 결정할 때 입력합니다.

Html :

<input type="button" value="궁서" onClick="doCommand('fontname','궁서');"/>

위 코드를 추가하고 테스트를 해보면, 어떤 의미인지 잘 알 수 있을 것 입니다.

완성된 코드 입니다.

<html>

<head>

    <title>simple rich editor</title>

    <script langauge="javascript">

    function load()

    {

        getIFrameID("richEditor").designMode = "On";

    }

    function getIFrameID(aID)

    {

        if (document.getElementById(aID).contentDocument)

        {

            return document.getElementById(aID).contentDocument;

        }

        else

        {

            return document.frames[aID].document;

        }

    }

    function doCommand(command, args)

    {

        getIFrameID('richEditor').execCommand(command,false,args);

        document.getElementById('richEditor').contentWindow.focus()

    }

</script>

</head>

<body onload="load();">

    <p>

        <input type="button" value="굵게" onClick="doCommand('bold');"/>

        <input type="button" value="궁서" onClick="doCommand('fontname','궁서');"/>

    </p>

    <iframe id="richEditor"></iframe>

</body>

</html>

다음에는 위 코드에, 기능을 좀 더 추가하고, 페이지의 값을 넘겨 스크립트언어에서 받는 방법을 소개해보도록 하겠습니다.

'개발' 카테고리의 다른 글

Nullable<T>  (1) 2008.01.22
[두번째] Javascript를 사용한 rich Editor.  (2) 2007.12.12
Revu스타일의 슬라이딩 로그인 패널 만들기 (1)  (0) 2007.09.19
[Ajax.Net] JavaScript로 Animation 제어하기  (0) 2007.09.09
ExtremeSwank OpenID Consumer For ASP.Net 2.0  (3) 2007.09.03
Posted by : onionmen
Response : ,

Webware가 선택한 사이트 #3 - Friendster

Posted onionmen : 2007. 10. 30. 21:17, Filed under: SNS

2007/08/31 - [SNS] - Webware가 선택한 사이트 #1 - bebo
2007/09/04 - [SNS] - Webware가 선택한 사이트 #2 - digg
2007/10/30 - [SNS] - Webware가 선택한 사이트 #3 - Friendster

이 글을 읽고 계시는 여러분 중 혹 싸이월드에 계정을 갖고 계시는 분들이 있을 것이라 생각합니다.

싸이월드의 성공요인은 그 당시 일반인들에겐 조금 어려웠던 웹을 쉬운 공간으로 만들어 준 것이 아닐까 라고 생각합니다.

사진을 보여주기 위해서는 그 때 당시만 해도 개인 홈페이지 라는 것이 있어야 했고, 이를 위해서 각종 포털 사이트에서 제공하는 5메가에서 10메가 사이의 무료 계정을 할당 받아야만 했습니다. 뿐만 아니라, HTML이라는 조금은 전문적인 지식도 있어야 했습니다. 물론 네띠앙이나, 하이홈과 같은 곳에서 기본적인 템플릿을 제공해주고, 사용자들이 쉽게 홈페이지를 만들 수 있도록 지원해주긴 했습니다만 크게 활성화 되지 못했습니다. 활성화 되지 못한 가장 큰 이유는 "어려워서" 일 것이고, 몇 가지 원인들은 "예쁘지 않아서." "용량이 작아서." 가 아닐까 추측해 봅니다.

사용자는 점점 쉬운 것만 찾고 있는데 웹 서비스들은 점점 복잡해지고 있습니다. 쉬운 서비스를 만들려고 하면 할수록 점점 복잡해 지는 것 같습니다.

"이렇게 자세한 매뉴얼을 만들어 놨는데, 왜 같은 질문을 반복하고, 서비스를 제대로 사용하지 못하는 거지?" 라고 테크니컬 라이터는 이야기 합니다. 정답은 간단합니다. "읽지 않으니까."

매뉴얼과 같은 따분한 글은 읽기 싫어하고, 매뉴얼이 자세하면 자세할수록(길면 길수록) 사용자는 더욱 보지 않게 됩니다. 그냥 스스로가 5분 정도 사용해보고 뭔가 모르겠다면 그냥 떠나가 버립니다. 이런 점에서 오늘 소개할 사이트는 성공한 것 같습니다. 적어도 사용자가 사용하고 싶게끔 흥미를 유발합니다.

오늘 소개 해드릴 사이트는 Friendster 라는 해외 유명 소셜네트워크 서비스입니다.

처음 사이트에 접속 한 모습입니다. Sign Up 버튼이 강렬한 빨간색으로 강조되고 있고, 사진 몇 장이 나열되어 있습니다. 로그인 하지 않아도, 사진 주인의 페이지를 둘러보는 것은 가능합니다만 당연히 친구를 맺거나 팬이 되는 것은 불가능합니다.

사용자 삽입 이미지

간단한 회원가입 절차를 끝내면, 개인화 페이지로 이동됩니다.

사용자 삽입 이미지

이제 본격적인 서비스의 사용이 가능합니다. 일단 화면이 나오면 어떻게 해야 할지 조금 망설여집니다. 타인과 관계를 맺는데 있어서 가장 우선적으로 해야 할 일은 자신을 알리는 일 입니다. 화면에서 Edit Profile 이라는 메뉴를 찾아서 적절히 수정합니다.

사용자 삽입 이미지

맨 상단의 Shoutout라는 부분은 싸이월드의 예로 들자면 프로필 사진 밑에 나타나는 글입니다. 차근차근 나에 대해서 작성하다 보면, 마지막에 위 이미지와 같은 부분이 나타납니다. About Me 의 경우는 프로필보기를 눌러야만 나타나는 것이 Shoutout과의 차이점입니다. 이 부분은 내가 누군지, 내가 어떤 사람과 만나고 싶은지에 대해서 제한된 HTML TAG를 사용하여 작성 할 수 있습니다. 관심 있는 사람 종류를 체크할 수 있는데, Activity Partners 라는 인상적인 부분도 보입니다.

사용자 삽입 이미지

기본적인 정보를 입력하고 난 뒤, 좀 더 끈끈한 관계를 맺기 위한 한가지 방편으로 모교를 설정 할 수 있습니다. 단, 대한민국은 아직 지원되지 않고 있습니다. 학교를 선택하면 학교별로 사람들을 찾아 다닐 수 있습니다. 학연과 지연은 온라인이나 오프라인이나 빼놓을 수 없는 커넥션 같습니다.

사용자 삽입 이미지

상단 메뉴의 Explore 라는 메뉴를 보시면 여러가지 메뉴를 확인할 수 있습니다. 처음 Friendster를 사용하는 사람이 자주 애용할 만한 메뉴라 생각합니다. People는 최근 가입한 사람과 인기인등을 한눈에 보여주고, Photo의 경우 최근 올라온 사진을 기본으로 하여 친구사진이나, 인기있는 사진등의 메뉴를 이용할 수 있습니다. 싸이월드의 일촌방문이 좀 더 세분화 되었다고 생각하시면 쉬울 것 같습니다.

재미있는 것은 Featured Fan Profiles 라는 메뉴입니다. 이곳엔 각종 유명한 것들이 리스트화 되 있습니다. 인물, Tv Show, 음악 등등 각종 아이템들이 존재하고, 좋아하는 아이템의 홈에 들어가 팬으로 등록할 수가 있습니다. 레뷰(revu.co.kr) 에서 아이템을 등록하는 것 과 같은 느낌을 받았습니다. 좀 살펴보니 미국 드라마인 Prison Break가 보였습니다. 제가 즐겨보는 드라마이기도 하였기에 냉큼 클릭하였습니다.

사용자 삽입 이미지

혹시 모르시는 분이 계실까봐 제가 검은색 테두리로 강조표시까지 했습니다(살짝 그라데이션도 넣어봤는데, 티 좀 나나요?).

사용자 삽입 이미지

이번 시즌3에 맞춰서 새롭게 등장하는 등장인물들과 함께 멋진 스킨을 만들어 놨습니다. 팬이 되겠어요. 라고 Become Fan 메뉴를 누르면 등록페이지로 이동합니다.

사용자 삽입 이미지

친구가 되는 것과 달리 팬이 되는 것은 매우 쉽습니다. 마우스 두번만 클릭하면 완성됩니다.

Friendster에서 팬은 아무나 될 수 있지만 친구는 아무나 될 수 없습니다. 오프라인에서도 "난 네 팬할래." 라는 것은 일방적인 행동이 가능하지만, "난 네 친구가 될래." 라고 하는 것은 명시적이든, 암묵적이든 상호 협의가 있어야 하죠.

사용자 삽입 이미지

South 플로리다 대학교에 다니고 있는 22살의 싱글인 안젤리나양이 마음에 들었다면, 친구신청을 클릭할 수 있을 것 입니다.

사용자 삽입 이미지

다음페이지에 나타나는 메시지는 이제 어찌 할 수 없는 부분입니다. 안젤리나의 성을 알고있거나, 메일주소를 알고 있다면 시도는 해볼 수 있겠습니다만, 정확하지 않은 정보를 입력해 놓았다면 쉽사리 친구가 되기는 힘들겠지요. 그녀의 팬이 되거나, 북마크를 해서 친분을 쌓는 방법이 있습니다. 그 후에 친구를 맺자고 한다면, 키워드를 알려주겠죠.

사용자 삽입 이미지

간혹가다 언제든지 친구를 맞을 준비가 되어있는, 소개글이 참 마음에 드는 우리 앤양처럼 메일주소를 공개해놓은 사람들도 만날 수 있습니다. 이 메일 주소를 사용하여 친구신청을 하니, 쉽사리 친구로 등록이 되었습니다. 하지만 이런 사람이 그리 많지 않다는 것입니다.

미투데이(me2day.net) 의 경우 친구신청을 할 경우, 그 사람이 수락할지 말지 결정함으로서 일방적인 친구관계형성을 막습니다. 문제는 거의 대부분의 회원들이 우선 친구신청이 들어오면 대부분 받아들인다는 것이고, 한번 형성된 친구관계는 탈퇴를 하지 않는 이상 끊을 수 없다는 것 입니다. 또한 수많은 친구신청이 한번에 들어왔을 때, 이것을 일일이 수락하는 것도 일 이라는 것 입니다. 일전에 가수 이적씨가 가입했을 때 이적씨께서는 아마도 백건이 넘는 친구신청을 수락 하시느라 고생좀 하셨을 것이라 생각합니다.

이러한 Friendster의 기능을 도입 할 경우 생길 수 있는 장점은 좀 더 친분 있는 사람들과의 친구관계를 형성 할 수 있다는 것 입니다. 조금은 베타적인 시스템으로 돌아갈 수 도 있지만, 이러한 문제점을 북마크와 팬 기능으로 적절히 보완했습니다.

리뷰를 작성 하면서 많은 사람들의 페이지에 들어가봤는데, 참 재미있는 사람들 많습니다. 국내에도 물론 재미있는 분들 많이 계십니다만.

이렇게 외국인들의 사생활을 조금씩 엿보다 보니, 왠지 모를 기분이 들었습니다. 비슷한 또래의 외국인 친구를이 생활하는 모습을 보니, 마치 내 친구같이 느껴지고, 괜히 영어로 말이라도 한마디 걸어보고 싶은 마음이 들었습니다. 오래전 유행하던 외국인과의 펜팔하는 기분이 아마 이런 것 이었겠지요?

이 포스트에는 극히 일부 기능만이 소개되었습니다. 제가 소개하지 않은 기능들을 한번 직접 체험해보시는 것은 어떨까요?

'SNS' 카테고리의 다른 글

무료 음원 스트리밍 사이트 - Musicovery.com  (1) 2007.10.13
Social Network Service로의 웹하드  (4) 2007.09.12
SKT의 출발. Tossi  (12) 2007.09.07
Webware가 선택한 사이트 #2 - digg  (2) 2007.09.04
Webware가 선택한 사이트 #1 - bebo  (2) 2007.09.01
Posted by : onionmen
Response : ,

무료 음원 스트리밍 사이트 - Musicovery.com

Posted onionmen : 2007. 10. 13. 19:24, Filed under: SNS

컨셉이 확실한 카페나 상점을 예로 드는 것이 빠를 지 모르겠습니다. 예전 의류매장에서 아르바이트를 해본 경험이 있습니다. 그 곳 에서는 언제나 사장님이 음악을 선곡 하셨습니다.

제가 봤을 때 사장님의 선곡에는 두 가지 정도의 문제점이 있었습니다.

첫 번째 20대를 타깃으로 한 유명 브랜드 매장이었음에도 불구하고 음악은 20대도 안 듣고, 30대도 안 듣는 철 지난 유행가 라는 것.
두 번째 이 철 지난 유행가들이 12곡 담긴 CD 3장으로 매장의 음악을 유지하고 계셨던 것.

하루 12시간 가량 이런 노래들만 듣고 있자니 뇌가 마비되고, 과거에 같힌 사람이 될 것만 같아 직접 선곡을 해오겠다고 사장님께 말씀 드리는 실수를 범하고 말았습니다.

점심시간에 무엇을 먹을지 고민하는 것만큼 힘든 것이, 음악 선곡이라고 생각합니다. 어울리는 장르의 노래들을 선별해야 하고, 사장님의 취향도 어느 정도 고려해야 했기 때문에, 정말 쉬운 일이 아니었습니다. 한동안 매장에서는 철 지난 유행가 보다는 조금 최신의 곡들이 들려왔습니다만, 몇 개월 지나면 이 것도 마찬가지로 옛 것이 되어 매장에서 흘러나오겠지요.

다른 이의 미니홈피로 이동 할 때마다 음악이 바뀌는 싸이월드. 조용한 밤에 누군가의 미니홈피에 슬쩍 들어갔다가 갑작스럽게 들려오는 쿵쿵거리는 음악소리에 놀라본 적 한번쯤은 있을 것 이라 생각합니다. 음악이 나오기 전 바로 ESC버튼을 누르면 플레이는 중지 되지만, 꽤 귀찮은 일 입니다.

전 그럴 때 가끔 이런 생각을 했습니다.

첫 번째 "음악 좀 안나오게 할 수 없나."
두 번째 "안 나오게 할 수 없다면 차라리 내가 원하는 노래만 플레이 되게 할 수 없나."

첫 번째야 음악 플러그인을 제거 하거나 IE가 아닌 웹브라우저를 사용하는 것만으로 쉽게 해결 가능하지만, 두 번째 방법은 싸이월드 내에선 거의 불가능 합니다.

얼마 전 웹 서핑을 하면서 재미있는 사이트를 발견 하였습니다.

http://musicovery.com/

Random 음원 스트리밍 서비스


그냥 한번 보면 "이게 뭐야." 라고 하실지 모르겠지만, 약 3분만 투자해서 살펴보시면 즐겨찾기에 추가하실 것이라 생각합니다.

사용자 삽입 이미지

접속 후 처음 화면

맨 처음 접속 하면 위와 같은 리모컨 같은 화면을 볼 수 있습니다. (플래시 기반이기 때문에 플래시 플러그인을 설치 하셔야 합니다.)메뉴를 하나하나 자세히 살펴보겠습니다.

사용자 삽입 이미지

리모컨의 기능별 분석

  1. 로고와 국가선택입니다. 영국, 프랑스, 포르투갈 그리고 스페인의 4개국 선택이 가능합니다. 물론 나라를 선택 한다고 그 나라의 곡만 연주된다거나 하는 것은 아니고, 단지 언어만 변경 될 뿐입니다. 수 개월 전만 해도 영국과 프랑스 두개의 국기만 제공 되었었는데, 지금 현재 포르투갈과 스페인이 추가 된 것을 보면 앞으로 더 많은 다국어 지원을 기대해 볼 만 합니다.

  2. 노래의 대중성을 선택하는 부분입니다. 매우 대중적인 곡, 조금 대중적인 곡 그리고 많이 대중적이지 못한 곡으로 분류합니다.

  3. 노래의 출시연도를 설정 할 수 있습니다. 슬라이드를 움직여 기간별 설정이 가능합니다.

  4. 자신이 듣고 싶은 분위기의 범위를 클릭하면 그 정도의 노래가 흘러 나옵니다. 현재 내 상태가 매우 우울하여 발랄한 노래를 듣고 싶다면, 1사분면 쪽으로 마우스를 클릭해보세요. 발랄한 팝송이 기분을 업 시켜드릴 것 입니다. 이 부분은 보시는 바와 같이 "Mood, Dance, Me" 세가지 탭으로 구성되어 있습니다. 이 부분에 대해서는 뒤에 다시 이야기 하도록 해 보겠습니다.

  5. 별도의 설명이 필요 없을 듯 한 부분입니다. 음악의 장르를 선택하여 플레이 되도록 할 수 있습니다.

사용자 삽입 이미지

재생되는 음악의 상태

Mood 부분에 자신이 선호하는 위치에 마우스를 클릭하면 위 그림과 같은 화면이 나타납니다. 파이프와 같은 라인을 따라서 음악이 재생되고, 각각의 색은 장르를 나타냅니다. 음악을 듣다보면 친숙한 노래도 들리고, 전혀 처음 듣는 노래도 들립니다.

사용자 삽입 이미지

상세이미지

지금 현재 Damien rice 의 The Blower's Daughter 라는 곡이 재생 되고 있습니다. 영화 클로져의 삽입곡으로 쓰였던 곡이기도 합니다. 개인적으로 좋아하는 곡인데, 마침 딱 재생이 되어 아주 잠시나마 기쁨을 느꼈습니다.


사용자 삽입 이미지

상세이미지

우선 기본적으로 컬러를 통해 장르를 구분해 주고, 앨범 커버아트, 음악가 그리고 곡 제목을 제공해줍니다.

또한 아마존과 eBay에서 앨범 구매가 가능하고, iTunes 를 통한 다운로드도 지원 하고 있습니다. 듣고, 구입하고 싶은 마음이 들면 힘들여 따로 검색하지 말고 클릭 한번으로 해결 하라는 편리함이 있습니다.

마지막으로 볼륨조절, 일시정지, 다음곡, ban, favorite 메뉴를 제공합니다. 다음 곡을 누르면 음악은 파이프에서 사라지고, 다음 라인으로 넘어가 재생이 됩니다. 두개의 하트는 로그인 사용자에게만 지원되는 메뉴입니다. Musicovery.com은 굳이 가입하지 않더라도 음원을 즐길 수 있습니다만, 회원가입을 한다면 좀 더 다양한 기능들을 사용할 수 있습니다.

깨진 하트의 경우 Ban songs 로 다신 듣고싶지 않은 음악으로 등록하여 관리 할 수 있고, 붉은 하트는 favorite songs로 선호하는 음악 리스트에 넣어 관리할 수 있습니다. 이렇게 favorite songs 로 관리되는 음악은 Me 탭으로 들어가 개인적인 취향으로 플레이 할 수 있도록 되어 있습니다.

각각의 음악을 클릭하면 클릭한 음악 중심으로 파이프가 새로 형성이 됩니다. 어떠한 기준으로 파이프가 형성되는지는 쉽게 파악할 수 없을 것 같습니다. 음악을 클릭 할 때마다 순서는 뒤섞입니다.


위에서 제대로 설명하지 못하고 내려온 부분을 이야기 하고 이번 포스팅을 마칠까 합니다.

"Mood, Dance, Me" 세가지 탭으로 구성되어 있는 곳이 있습니다.

음악을 클릭하고 Mood 탭을 보면 이 음악이 어떤 분위기의 음악인지 보여줍니다. 그리고 바로 옆에 있는 Dance 탭을 클릭하면 어느 정도의 리듬에 속한 음악인지도 한눈에 보여주어 처음 듣는 곡이라 해도 대충 분위기의 파악이 가능합니다. 이 음악이 몇 년도 출시 곡인지 보여주는 것은 물론입니다.

사용자 삽입 이미지

Mood의 모습

 사용자 삽입 이미지

Dance의 모습

Musicovery.com은 무료회원과 프리미엄 회원으로 구분하여 회원 가입을 받고 있습니다.

무료회원은 라디오음질 정도의 Lo-Fi 로 음악 감상이 가능합니다. 구글의 AdSense를 채용하고 있어서 무료 사용자에겐 광고도 보입니다.

무료회원에겐 Favorite songs의 직접적인 접근이 불가능합니다. 한마디로 직접 플레이 리스트를 작성한 후 듣는 것은 안 된다는 것 입니다.

사용자 삽입 이미지

프리미엄 회원과 무료회원과의 차이

한달에 4us달러면 프리미엄 회원이 등록 가능한데, 무료사용자에 비해 혜택은 CD음질로의 향상 정도 입니다. 개인사용자라면 무료회원가입으로도 충분히 즐기실 수 있을 거라 생각합니다. 하지만 매장을 운영하고 계시거나 하신다면 프리미엄 회원의 가입도 한번 고려해볼 만 하겠습니다.

몇 년 전 이 사이트가 있었고, 또 알았다면, 그 옷가게 사장님에게 이 사이트를 추천해드렸을 텐데 말입니다.

즐거운 음악생활 즐기시길 바랍니다.

'SNS' 카테고리의 다른 글

Webware가 선택한 사이트 #3 - Friendster  (2) 2007.10.30
Social Network Service로의 웹하드  (4) 2007.09.12
SKT의 출발. Tossi  (12) 2007.09.07
Webware가 선택한 사이트 #2 - digg  (2) 2007.09.04
Webware가 선택한 사이트 #1 - bebo  (2) 2007.09.01
Posted by : onionmen
Response : ,

Revu스타일의 슬라이딩 로그인 패널 만들기 (1)

Posted 알 수 없는 사용자 : 2007. 9. 19. 22:19, Filed under: 개발

요즘은 인터넷이 재밋습니다. 웹 2.0이다 뭐다 해서 수많은 재밋는 사이트들이 쏟아져 나오고 있기 때문입니다. 이런 서비스들 중에선 미투데이와 같은 SNS서비스 뿐만 아니라 펌핏과 같은 이슈플랫폼도 있습니다. 혹시 이런 웹 2.0사이트들 중에서 Revu라는 사이트에 대해 들어 보셨는지요. 짧게 요약하자면 '세상 모든 것에 대한 리뷰'를 모토로 사용자들간의 리뷰를 공유하는 웹 2.0 서비스 입니다.

이것도 직업병에 해당하는지는 모르겠지만, 저도 나름 html을 끄적이고 있는지라 이런 훌륭한 서비스들을 볼 때마다 '이 부분은 어떻게 처리했을까?', '이 효과는 어떻게 준걸까?' 하는 생각을 많이 합니다. 그래서 이따금씩 따라해보곤 합니다. 뜬금없이 왠 '헛소리'라고 생각하셔도 좋습니다. 이번 주제는 Revu의 로그인 패널 만들기 이니까요. ^^

대부분의 사용자들이 로그인 패널을 페이지 상단이나 우측 위쪽에서 찾기 때문에 대부분의 로그인 패널은 그 위치에 자리잡게 됩니다. 이와 마찬가지로Revu의 로그인 버튼도 페이지 상단에 자리잡고 있습니다. 하지만 다른 사이트들과는 약간 다르게, 해당 버튼을 클릭하게 되면 로그인 페이지로 이동되는 것이 아닌 로그인 패널이 Slide down되면서 나타납니다.

저는 이 이펙트가 상당히 신선하다고 느껴졌습니다.

사용자 삽입 이미지

Revu의 로그인 패널

Revu의 로그인 패널의 이펙트는 script.aculo.us라는 Prototype기반의 UI라이브러리를 사용했습니다. (어떤 이유에선지는 모르겠지만 특이하게도 Revu가 사용하는 UI라이브러리는 상당히 많습니다. script.aculo.us뿐만 아니라, rico, YUI도 사용하고 있습니다. 이렇게 비슷한 역할을 하는 프레임웍을 중첩시켜서 사용하면 전체 시스템 복잡도는 자연히 높아질 수 밖에 없습니다. 그렇기 때문에 개인적으로는 별로 좋아하지 않습니다. ) script.aculo.us에는 Slide Up/Down외에도 쓸만한 이펙트들이 많이 있습니다. 더 자세한 정보를 원하시면http://script.aculo.us/ 를 방문해 보시길 바랍니다. (클릭하시면 데모사이트로 이동합니다.)

사용자 삽입 이미지

script.aculo.us데모


Slide Animation을 구현하기 위한 방법은 크게 두 가지로 요약할 수 있습니다.

  1. 여러장의 레이어를 겹쳐서 구현합니다. (간단하게 요약하자면 바닥을 깔고 로그인 박스를 위에 둔 후에 그 윗부분을 다른레이어로 덮는 방식입니다. )
  2. CSS의 Clip 프로퍼티를 이용합니다.

첫번째 방법은 여러장의 레이어를 제어해야 하기 때문에 구현하기 복잡하고, 모든 상황에 적용하기 힘듭니다. 두 번째 방법은 Clip영역으로 잘라내기 때문에 해당 오브젝트의 실제 크기와 화면에 출력되는 크기가 다르다는 단점이 있습니다. 어떤 방식을 사용하던 정답은 없습니다. 하지만 Clip영역을 사용하는 것이 다른 방법보다 훨씬 개발하기 쉽고, 어떤 상황에서던 유연하게 동작하기 때문에 이 방법을 선택하도록 하겠습니다.

Clip 프로퍼티는 4각형의 박스를 지정한 수치만큼 잘라내는 프로퍼티 입니다. Clip되는 박스는 반드시 { position: absolute; } 로 지정되어 있어야 합니다. CSS로 Clip영역을 주는 방법은 다음과 같습니다.

{
position: absolute; // 반드시 absolute로 지정되어 있어야 합니다.
clip: rect(0px, 10px, 10px, 0px); // top right bottom left의 순서입니다.
}

해제하시려면 { clip: rect(auto); } 로 지정하시면 됩니다. CSS와 Clip Property의 사용법에 대한 설명은 이 강좌의 범위를 넘는 부분이기 때문에, 더 자세한 설명을 원하시면 http://www.cadvance.org/?leftmenu=doc/include/total_menu.asp&mainpage=doc/css/positioning/clip.asp 를 방문해 보시길 바랍니다.

우선 화면에 100x200의 작은 박스를 만들겠습니다. 배경색은 red로 주시고, 화면에 떠 있어야 하기 때문에 {position: absolute; }를 설정해 둡니다. 좌표는 (100px, 100px) 정도면 괜찮겟네요. 그리고 마지막으로 clip영역을 {clip: rect(0px,100px,200px,0px);} 정도로 설정합니다.

코드는 다음과 같습니다.

<head>
<title>Slide Animation</title>
<style type="text/css">
#box {
    position: absolute; // 반드시 absolute로 지정되어 있어야 합니다.
    clip: rect(0px, 100px, 200px, 0px); // top right bottom left의 순서입니다.
    top: 100px;
    left: 100px;
    width: 100px;
    height: 200px;
    background-color: red;
}
</style>
</head>
<body>
    <div id="box">
        box
    </div>
</body>
</html>

사용자 삽입 이미지

실행결과


테스트는 http://66.232.144.57/suda/slide.htm 에서 하실 수 있습니다.

다음엔 이 div를 제어하는 script를 만들어 보도록 하겠습니다.

ps: 이거 code는 어떻게 붙여넣죠?? 컴맹이라-.-;

'개발' 카테고리의 다른 글

Nullable<T>  (1) 2008.01.22
[두번째] Javascript를 사용한 rich Editor.  (2) 2007.12.12
[첫번째] Javascript를 사용한 rich Editor.  (1) 2007.12.09
[Ajax.Net] JavaScript로 Animation 제어하기  (0) 2007.09.09
ExtremeSwank OpenID Consumer For ASP.Net 2.0  (3) 2007.09.03
Posted by : 알 수 없는 사용자
Response : ,

Social Network Service로의 웹하드

Posted onionmen : 2007. 9. 12. 04:25, Filed under: SNS

자사에서 제공하는 웹 서비스를 UX담당자분과 함께 직접 사용해보고 이 사이트가 얼마나 사용하기 편리하게 제작이 되었는지를 평가하는 방법을 사용성 평가라고 합니다. 보통 웹 서비스를 개발 할 때는 자신이 편리한 방향으로 사이트를 제작하기 마련입니다. 어느 정도 규모 있는 웹 서비스는 한 사람이 제작하는 경우가 거의 없기 때문에, 제작자들(개발자, 기획자, 디자이너) 간의 상충되는 의견을 잘 조율하여, 하나의 서비스가 나오게 됩니다.

웹 서비스는 최대한 사용자들의 편의성을 고려하여 제작을 한다고 하지만, 의견조율 과정에서 제작의 편의성 위주로(또는 개인의 주관적인 생각 위주로) 제작되기 마련입니다. 이러한 과정이 있기 때문에, 정식 서비스 이전에 사용자들의 의견을 수렴하기 위한 베타서비스가 존재하는 것 입니다. (물론 이 과정은 개발상의 문제점을 찾아내기 위한 단계이기도 합니다.)

베타서비스를 통해 사용자의 의견을 받아들이는 행동은 수동적인 모습이라고 볼 수 있습니다. 반면에 사용성 평가 라는 행동은 상대적으로 능동적인 모습이죠. 이런 사용성 평가를 전문적으로 해주는 기업도 있습니다만, 분석능력이 있는 회사라면 일반 사용자들을 대상으로 하여 직접 평가하는 것이 훨씬 효율적 이라 생각합니다.

지난 월요일, 지인의 소개로 ㈜나우콤 에서 서비스 중인 PDBOX의 사용성(usability) 평가를 위해 방배동에 다녀왔습니다. 30분 정도 평가를 마친 후 담당자 분이 질문을 하셨습니다. 자세한 질문 내용은 기억이 나지 않습니다만, 아마 "PDBOX가 Social Network Service(이하 SNS) 서비스라고 볼 수 있는지" 에 대한 질문이었던 것 같습니다. 상당히 긴장 했던 상태에서, 그런 갑작스런 질문에 조금 당황하여, 대답을 횡설수설 하였는데, 제 대답의 결론은 "PDBOX는 SNS라고 보기 힘들 것 같다."였습니다. 그 당시에는 핵심을 "개인적인 생활의 공유" 에 두었던 터라 파일 공유와 같은 "이기적 소비" 에 대한 관계는 SNS라고 보기 힘들다. 라는 생각이었습니다. 다시 생각해보니 한정된 사고에서 생겨난 오류가 아니었나 생각합니다.

SNS는 웹2.0의 한 부분요소 입니다. 웹2.0은 참여와 공유, 그리고 개방이라는 각각의 톱니바퀴가 잘 맞물려 돌아가는 하나의 시계이고, SNS는 서로 관계를 맺고 소통하는 시계바늘 입니다.

이렇게 생각해보면 "몇몇 웹하드들도 SNS로 볼 수 있겠다." 라는 생각이 듭니다. 웹하드도 일단 사용자가 컨텐츠를 생산하고(비록 2차 가공 일지라도), 그 컨텐츠에 메타데이터를 추가하는 것이 가능하고, 이러한 컨텐츠를 다른 사람과 쉽게 나눌 수 있습니다. 또한 서로 친구를 맺거나, 즐겨찾기로 등록을 하고, 그 후 쪽지와 방명록 등으로 최신자료에 대한 대화를 나누며 소통을 합니다. 웹하드 에서는 관계를 맺기 전 검색으로 상대(파일)를 찾아 낸 뒤 소통 없이 소비를 하는 경우도 있습니다만, 이는 대표적 SNS인 싸이월드 에서도 마찬가지 현상이라고 볼 수 있습니다. 타인의 미니홈피에 접속 한 뒤 별다른 관계 / 소통행위 없이 둘러보고만 가는 경우가 이에 해당 됩니다. 단지 필요로 하는 정보의 종류가 다를 뿐이지요. 이런 웹하드들은 집단지성을 잘 나타내 주기도 합니다. 코멘트를 통해 정보에 대한 평가를 내리고, 이를 바탕으로 그 신뢰도를 판단합니다.

물론 모든 웹하드가 여기 속한 다는 것은 아닙니다. 어떤 웹하드의 경우 자체적인 서비스 내의 소통이 불가능 하여, 새로운 커뮤니티를 구축하여 서로 교류를 합니다. 그럼 여기서 굳이 웹하드가 SNS플랫폼을 제공할 필요가 있는가 에 대한 의문점이 생기게 됩니다. 웹하드의 소셜화는 타 서비스들과의 경쟁에서 살아남기 위해 꼭 필요한 일이기도 하지만, 웹 자원의 효율적인 사용을 위해서라도 긍정적으로 검토해 봐야 할 필요가 있다고 생각합니다.

인간적인 관점에서 SNS를 바라본다면 웹하드들은 SNS라고 부를 수 없을 것 입니다. 하지만 좀 더 포괄적으로 SNS를 바라본다면 현재 일부 웹하드들은 충분히 Social Network Service 로 볼 수 있을 것 입니다.

'SNS' 카테고리의 다른 글

Webware가 선택한 사이트 #3 - Friendster  (2) 2007.10.30
무료 음원 스트리밍 사이트 - Musicovery.com  (1) 2007.10.13
SKT의 출발. Tossi  (12) 2007.09.07
Webware가 선택한 사이트 #2 - digg  (2) 2007.09.04
Webware가 선택한 사이트 #1 - bebo  (2) 2007.09.01
Posted by : onionmen
Response : ,

[Ajax.Net] JavaScript로 Animation 제어하기

Posted 알 수 없는 사용자 : 2007. 9. 9. 18:28, Filed under: 개발

시작하기

Ajax.net 에서 Animation을 제어 할 수 있는 방법은 두 가지가 있습니다. 첫 번째는 AnimationExtender를 사용하는 방법이고, 다른 한 방법은 JavaScript 로 직접 제어 하는 방법입니다.

 

Ajax가 대중적으로 확산됨과 함께 Ajax.Net도 덩달아 많은 관심을 받고 있습니다. 이에 따라 AnimationExtender와 같은 ControlToolkit의 자료 또한 많이 공개되어 있습니다. 그래서 저는 JavaScript 로 Animation을 직접 제어하는 방법을 설명하겠습니다.

 

Ajax.Net을 사용하기 위해선 다음과 같은 프로그램들이 설치되어 있어야 합니다.

 

1.     VisualStudio 2005 혹은 Visual WebDeveloper Express 2005 이상의 버전이 설치되어 있어야 합니다. (이곳에서 무료로 다운로드 받을 수 있습니다.)

2.     ASP.NET Extension v1.0 이상의 버전이 설치되어 있어야 합니다. (이곳에서 무료로 다운로드 받을 수 있습니다.).

3.     ASP.NET AJAX Control Toolkit이 설치되어 있어야 합니다. (이곳에서 무료로 다운로드 받을 수 있습니다.)


Animation Hierarchy

Ajax.Net의 Animation은 다음과 같은 계층으로 구성되어 있습니다.

 

Animation --- Parent Animation   --- Parallel Animation      --- Move Animation
                                                                              --- Resize Animation
                                             --- Sequence Animation  --- Pulse Animation
                                             --- Selection Animation   --- Condition Animation
                                                                              --- Case Animation
              --- Fade Animation      --- FadeIn Animation
                                             --- FadeOut Animation
              --- Property Animation --- Discrete Animation
                                             --- Interpolated Animation
              --- Color Animation   
              --- Length Animation 
              --- Scale Animation
              --- Action                 --- Enable Action
                                            --- Hide Action
                                            --- Style Action
                                            --- Opacity Action
                                            --- Script Action

 

 크게 3가지로 분리할 수 있는데, SequenceAnimation이나 parallelAnimation과 같이 Animation들의 순서를 제어할 수 있는 Container클래스와, Fade In/Out 과 같은 실질적으로 화면을 구성하는 클래스, 그리고 시간을 기준으로 동작하는 Animation과는 달리 실행한 그 시점. 단 한번만 효력을 발휘하는 Action이 있습니다.

 

다음 URL에서 각각의 Animation을 테스트 해 보십시오.

http://66.232.144.57/suda/animation.aspx

 

사용자 삽입 이미지

Animation Example

 
사용자 삽입 이미지

FadeIn, FadeOut, Color 실행결과













Hello Ajax

간단한 Hello Ajax라는 글씨를 FadeIn하는 Animation을 작성해 보도록 하겠습니다.

 

1.     새 웹 사이트 생성합니다.

2.     폼에 TookitScriptManager를 등록합니다. 혹시 ToolkitScriptManager가 없다면, 도구상자에서 우클릭 -> 항목선택 -> 다운받은 ControlToolkit 디렉토리안의 /SampleWebsite /Bin /AjaxControlToolkit.dll 을 선택하여 추가하십시오.

3.     폼에 아무런 ControlToolkitExtender가 없으면 Animation관련 자바스크립트가 로드되지 않기 때문에 임의로 아무 Extender나 폼에 올려둡니다.

<!-- AjaxControlToolkit 라이브러리를 사용하기 위해 아무 extender나 폼에 올려 두어야 함 -->

         <asp:Panel ID="Panel1" runat="server" Width="1px" Height="1px" Visible="false" />

        <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">

            <Animations>

                <OnHoverOver>

                    <FadeIn MinimumOpacity="0.1"/>

                </OnHoverOver>

            </Animations>

        </cc1:AnimationExtender>

4.     FadeIn시킬 Div를 추가하고 Text를 설정합니다.

<div id="fadein" style="opacity:0;">

<h2>Hello Ajax</h2>

</div>

5.     <head></head>태그 사이에 다음과 같은 자바 스크립트를 추가합니다.


<script language="javascript">

function FadeIn()

{

// Animation을 재생합니다.

    AjaxControlToolkit.Animation.FadeInAnimation.play($get('fadein'), 1, 25);}

 

function Initialize()

{

    $addHandler($get('fadein'),"click",FadeIn);

}

</script>

6.     Initialize를 호출하기 위해 body태그에 onload이벤트를 설정합니다.


<body onload="Initialize();">


코드설명

AjaxControlToolkit.Animation.FadeInAnimation.play()  

FadeInAnimation을 재생하는 메소드 입니다. Play외에도 Stop과 Pause와 같은 제어 메소드들과, onStart, onStep, onEnd와 같은 이벤트리스너들도 등록할 수 있습니다. API Reference는 다음 사이트를 참고하시길 바랍니다.

http://asp.net/AJAX/Control-Toolkit/Live/Walkthrough/AnimationReference.aspx

 

$get(‘fadein’)

 Sys.UI.DomElement.getElementById() 메소드의 축약 형태입니다. $get() 외에도 다른 축약형을 알고 싶으시면 다음 사이트를 참고하시길 바랍니다.

http://asp.net/AJAX/Documentation/Live/ClientReference/default.aspx

 

.play($get(‘fadein’), 1, 25)

 두 번째 인자인 1은 duration입니다. Duration은 해당 Animation이 몇 초간 진행될 것인지를 결정하는 단위 입니다. 세 번째 인자인 25는 fps입니다.

 

$addHandler($get(‘fadein’),”click”,FadeIn)

 $addHandler는 Sys.UI.DomEvent.addHandler()메소드의 축약형 입니다. 인자로 3개를 받는데, 첫 번째 인자는 이벤트를 핸들링할 DomObject입니다. 두 번째 인자는 이벤트의 이름입니다. 세 번째 인자는 이벤트가 발생할 시 호출할 함수 이름입니다.

 

 

결론

이것으로 대략적인 Javascript로 Animation을 제어하는 방법에 대해 알아 보았습니다. 혹시 제가 잘못 알고 있는 내용이나, 추가할 점이 있으시면 댓글 혹은 트랙백으로 남겨 주십시오.

ps: 워드 2007에서 바로 포스팅 하니까 다 깨지는군요-_-;;

첨부

invalid-file
invalid-file

'개발' 카테고리의 다른 글

Nullable<T>  (1) 2008.01.22
[두번째] Javascript를 사용한 rich Editor.  (2) 2007.12.12
[첫번째] Javascript를 사용한 rich Editor.  (1) 2007.12.09
Revu스타일의 슬라이딩 로그인 패널 만들기 (1)  (0) 2007.09.19
ExtremeSwank OpenID Consumer For ASP.Net 2.0  (3) 2007.09.03
Posted by : 알 수 없는 사용자
Response : ,

SKT의 출발. Tossi

Posted onionmen : 2007. 9. 7. 02:24, Filed under: SNS

여러분 혹시 미투데이 라는 서비스를 알고 계시는지 모르겠습니다.

비록 사용은 해보시지 않으셨다고 해도, SNS가 무엇을 뜻하는지 알고 계시는 분들은 한번쯤 들어봤을 만한 서비스일 텐데요. 간단한 설명을 하자면 올해 2월부터 베타서비스를 시작하여, 현재 웹2.0 세계에서 주목을 받고 있는 서비스 입니다.

150자 이내로 글을 남기고, 그에 대한 반응을 댓글과 미투[각주:1] 로 확인하는 시스템입니다. 이것만 보시면 '뭐 별거 없네.' 라고 느끼실 지도 모르겠습니다. 하지만 핸드폰 게임 중에서도 가장 인기 있는 게임은 단순한 원버튼 게임이듯, 미투데이도 이런 단순함으로 사용자를 유혹합니다.

개인적으로 미투데이를 사용한지 벌써 7개월 이라는 시간이 지났습니다. 초창기 회원들은 IT업계 종사자 분들이 대부분이었지만, 요즘은 정말 다양한 분야의 회원들이 왕성한 활동을 하고 있습니다. 덕분에 서비스를 이용하면서 많은 정보를 얻고, 또 정말 좋은 많은 사람들을 만났습니다. 따로 미투데이에 가입하고 싶으신 분들은 다음 링크를 클릭하시면 쉽게 가입 하실 수 있습니다.

요즘 한창 미투데이 같은 한줄블로그(마이크로블로그, 미니블로그) 서비스가 쏟아져 나오고 있습니다. 내년쯤 되면 마이크로 블로그 서비스의 춘추전국시대가 되지 않을까? 라는 생각을 조심스럽게 해봅니다. 대기업에서도 이런 추세에 따라서 마이크로 블로그 라는 서비스에 눈을 돌리기 시작했습니다. 그 첫 시작으로 SKT의 tossi 라는 서비스가 클로즈베타로 서비스를 시작했습니다.

사용자 삽입 이미지

SKT – Tossi의 메인 화면 입니다. 700명의 회원이 각각 다섯명의 친구를 초대할 수 있기 때문에 이번 클로즈 베타 서비스는 3500명의 회원을 대상으로 진행합니다. 물론 실사용자는 이 숫자의 60%도 못 미칠 것이라 생각됩니다. 서버관리자가 동시접속자의 수를 미쳐 고려하지 못했는지 처음 접속시 엄청나게 느린 성능을 보여주었습니다. 페이지 한번 로딩하는데 최대 5분까지 걸리는 경우가 있었습니다만, 23시 현재는 큰 문제가 없을 정도로 서비스가 원활하게 제공되고 있습니다.

첫인상은 "이거 왜이리 복잡해." 라는 느낌이었습니다. 약 5분 정도 이 메뉴 저 메뉴 뒤져본 후에야 조금 감이 오기 시작했습니다. 원초적인 기능만 생각한다면 그저 하고 싶은 말을 쓰고 그 글에 대한 반응(댓글)을 확인하는 것이 전부 입니다. 그 외에 좀 더 회원들과 친밀한 관계형성을 위한 몇 가지 장치들을 마련해 놓았습니다.

그 중에 가장 눈에 띄는 부분이 RQ(Relation Quotient) 라는 것 입니다.

사용자 삽입 이미지

상대방과 나의 태그나 지금까지의 기분상태, 그리고 댓글 등의 교류를 통한 친밀도를 계산하여 나타내주는 서비스입니다. 아직 초창기라 많은 데이터베이스가 쌓이지 않은 관계로 좀 더 자세한 내용을 알 수 없었지만, SKT 가입자의 경우 상대방과 나의 생활패턴까지 분석하여 준다고 하니, 잘만 활용하면 좋은 서비스가 나올 듯 합니다.

타 서비스와 차별화 된 기능으로 공유 라는 것이 있습니다.

글을 쓰고 공유 설정을 하여 글을 공유할 회원을 선택 한 후 확인을 누르면 그 회원에게 공유 글로 전송이 됩니다. 살펴보니, 회원이 작성하는 모든 글은 "함께만드는 tossi" 라는 아이디를 가진 회원에게 자동으로 공유가 됩니다. 아마 나중에 이 기능을 활용하여 플레이톡의 라운지 기능을 대체할 수 도 있을 것 같다는 생각을 하였습니다.

사용자 삽입 이미지

처음 메인화면에서 개인페이지로 이동하게 되면 다음과 같이 tossi에 대한 소개글이 자동으로 등록되어 보여집니다. 이 글을 수정하거나 삭제하여 자신의 첫 번째 글을 작성 할 수도 있고, 아니면 그냥 글쓰기 버튼을 눌러서 신규 글을 작성 할 수도 있습니다.

개인페이지의 전체적인 레이아웃은 아래 사진과 같습니다.

사용자 삽입 이미지

화면 맨 상단에 개인의 아이덴티티를 나타내는 정보들이 보이고, 가장 중요한 자신이 쓴 글이 보입니다. 그리고 몇 가지 숨겨진 화면을 호출하는 버튼들을 볼 수 있습니다. 화면 맨 하단에 친구목록과 친구의 업데이트 된 글, 그리고 나에게 달린 댓글을 확인 할 수 있는 창이 보입니다.

이제 글쓰기 버튼을 눌러서 글쓰기 창을 보겠습니다. 기본적으로 숨겨져 있는 글쓰기 창은 이미지와 파일을 쉽게 첨부할 수 있도록 디자인 되어 있고, 핸드폰으로의 글 전송 지원(MMS)을 확실하게 하기 위해서 1000자 까지 쓸 수 있도록 지원합니다. 또한 각종 아이콘으로 글의 종류를 지정 할 수 있는데요, 아마 이 부분은 개인적으로 아이콘을 지정 할 수도 있도록 업데이트 될 것 같습니다.

사용자 삽입 이미지

파일의 첨부를 테스트 해보았는데, 용량이 작은 txt 파일의 경우 쉽게 등록이 되었습니다만, 11메가의 mp3의 경우는 등록은 되었으나 목록에서 보이지 않는 현상이 발생했습니다. 필터링 인가 하는 생각에 17메가바이트의 exe 파일을 등록하였는데 정상적으로 등록되었습니다. 하지만 확장자를 변경하여 등록하니 정상적으로 등록되었습니다. 파일의 용량도 제한이 크게 없는 것을 보니(정식오픈 전에 어떠한 정책이 세워지겠지만) 악용의 소지가 충분히 보입니다.

조금 놀랐던 부분은 IE6사용자는 글을 등록할 수 없었던 부분입니다.

사용자 삽입 이미지

IE6에서는 테스트 해보지 않았던 것 일까요? (물론 지금은 건의하여 수정되었습니다.)

다음은 개인 설정 부분입니다.

사용자 삽입 이미지

스킨과 폰트를 설정 할 수 있는데, 내가 작성한 글에 대한 배경을 설정 할 수 있다는 점이 독특했습니다. 설정한 배경이 순서대로 돌아가며 보여집니다. 지원되는 스킨도 얼마 안되고, 사용자가 직접 수정하는 것도 불가능합니다. 이 부분에 대해선 사용자의 요청이 있다고 하더라도, html등의 수정은 불가능 할 것으로 보입니다. SKT에서 사용자에게 그런 자유도를 허락 할 것 같지도 않고, 또한 충분히 수익모델을 찾을 수 있는 부분이기 때문입니다.

사용자 삽입 이미지

NateOn과 Gtalk 그리고 MSN으로도 글을 등록 / 수신 할 수 있기 때문에 메신저 설정을 할 수 있습니다. 또한 핸드폰으로 글을 전송 할 경우, 현재의 위치가 자동으로 태그에 들어가는 위치태그 기능도 설정 할 수 있고, 조금 전에 말씀드린 RQ에 대한 설정도 할 수 있습니다.

다음은 친구 목록을 볼 수 있는 기능입니다. 친구리스트보다는 친구 만들기를 먼저 보겠습니다.

사용자 삽입 이미지

특별한 것은 없고, 자신의 MSN과 Gtalk메신저에 등록된 친구들을 초대할 수 있습니다. 아직은 베타이기 때문에 최대 다섯명 까지만 초대가 가능합니다. 또한 Email직접입력 방식으로 친구를 초대하는 것도 가능합니다.

처음에 보이는 휴대폰 주소록 친구 의 경우 아직까지는 SKT 가입자만 사용 가능한 메뉴입니다. 저도 사용해보지 않아 정확한 기능을 말씀드리긴 어렵지만, 휴대폰으로 사용할 경우 자신의 핸드폰 주소록에 등록된 친구에게 쉽게 초대장을 전달 할 수 있는 기능으로 추측됩니다.

다음 친구리스트 사진입니다.

사용자 삽입 이미지

자신의 친구 신청목록과 현재 친구현황의 확인이 가능합니다. 조금 특이한 사항을 굳이 찾아보자면 친구에 대한 태그 등록이 가능하게 디자인 되어 있어서 친구를 그룹으로 묶는 대신 그냥 태그로 정의해 놓아서 관리 할 수 있습니다. 사용자의 사용하기 나름이겠지만 개인적으로 참 마음에 드는 부분입니다. 이는 공유 글 작성에서도 활용 할 수 있습니다.

전반적인 tossi 에 대한 설명이 어느정도 정리가 된 듯 합니다. SKT에서 제공하는 웹 서비스 인만큼 타 서비스와의 차이점으로 휴대폰에서의 사용성에 초점을 맞추고 있습니다.

SMS와 MMS, 그리고 무선인터넷. 이들을 활용하여 서비스를 제공한다면, 휴대폰과의 그 시너지 효과는 대단할 것이라 생각합니다. 또한 SKT의 홍보로 조금만 밀어준다면 핸드폰 없이 못사는 10대들에게 미칠 파급효과는 제가 굳이 어떤 말을 하지 않아도 다들 예상하실 것이라 생각합니다.


2007년 9월 7일 브루펜시럽님의 요청으로 친구관계에 대한 내용  덧붙임 내용입니다.

tossi는 자신을 표현하는 방법으로 두가지를 채택했습니다.

  1. 그때 그때 자신의 기분을 표현할 수 있는 내 기분 쓰기
  2. 기본이 되는 글쓰기

의 두 가지가 그 것 입니다.

사용자 삽입 이미지
글쓰기에 대해서는 이미 이야기 했고, 기분/쓰기 라는 메뉴를 클릭하면 다음과 같은 화면이 보입니다.
사용자 삽입 이미지

클릭하면 커져요

메신저에서 한줄로 자신의 상태를 남기는 것과 비슷한 맥락에서 생각하시면 될 것 같습니다.
이렇게 자신의 기분을 나타내면, 친구의 아이덴티티패널에 자신의 상태가 나타납니다.

사용자 삽입 이미지

마찬가지로 내 패널에는 [양치기소년] 두근 두근 첫 만남            [rath] (づ^.^)づ~♡ 

이렇게 친구들의 현재 기분(상태)이 나타납니다. 시간이 지나면 자동으로 다음 친구들의 상태가 나타나고, ▲▼ 네비게이션으로 직접 다른 친구들의 상태확인도 가능합니다. more 버튼으르 누르면 좀 더 자세한 상황을 확인 할 수 있습니다.

사용자 삽입 이미지

먼저 자신의 친구로 등록된 회원의 기분을 볼 수 있고, 현재 내 기분상태와 일치하는 친구를 찾을 수도 있습니다.

그리고 아래 tossi 회원의 현재 상태를 등록순으로 보여줍니다. 마찬가지로 자신의 기분과 일치하는 사람들 도 볼 수 있고, 그사람의 tossi로 들어가 친구신청도 가능합니다.친구들의 글 목록은 살짝 비중이 작은 듯 합니다.
사용자 삽입 이미지
친구 UP 이라는 부분에 현재 친구가 마지막으로 남긴 글 확인이 가능합니다. 이 점에 대해서는 따로 필터링이 불가능하고, 전부 보여지는것 같습니다. ◀▶ 의 네비게이션으로 다음페이지로의 이동이 가능합니다.

사용자 삽입 이미지

내 친구 옆에 ▼ 버튼을 누르면 친구로 등록된 사람들을 리스트로 보여줍니다. 친구가 300명 400명 될 때는 찾기 좀 힘들듯 합니다. 이 부분에 대해서는 자신이 따로 친구들을 지정하여 바로가기 형식으로 만들 수 있다면 좋았을 텐데, 건의해봐야 겠습니다.



다음은 개인적인 의견입니다.



  1. 공감 가는 글이라고 생각되면 Metoo 버튼을 눌러 공감 갯수를 하나 늘린다. [본문으로]

'SNS' 카테고리의 다른 글

Webware가 선택한 사이트 #3 - Friendster  (2) 2007.10.30
무료 음원 스트리밍 사이트 - Musicovery.com  (1) 2007.10.13
Social Network Service로의 웹하드  (4) 2007.09.12
Webware가 선택한 사이트 #2 - digg  (2) 2007.09.04
Webware가 선택한 사이트 #1 - bebo  (2) 2007.09.01
Posted by : onionmen
Response : ,

Notice

  1. 팀블로그 시작합니다.

Tag cloud

Recent Posts

Recent Comments

Recent Trackbacks

Calendar

«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

Bookmarks

  1. 신선한바람
  2. onionmen
  3. onionmen 미투데이
  4. 신선한바람 미투데이
  5. 횸피그
  6. 횸피그 미투데이

Site Stats

TOTAL HIT
TODAY HIT
YESTERDAY HIT

티스토리툴바