이전 포스팅에서 잠시 언급되었던
다음(Daum)의 캘린더 서비스를 오늘은 한 번
돋보기를 들고서(;;;) 집중탐구 해보도록 하겠습니다.

역시나 제 블로그는 스크롤에 대한 개념을
상실해 버린지 오래이기 때문에
이 포스트를 보시는 분들은 미리 마음의 준비(혹은 저에 대한 자비?)를
해 주시면 감사하겠습니다. (꾸벅)

우선, 첫화면을 보실까요?
접속주소는 아시는 분들도 계시겠지만 http://calendar.daum.net 입니다. :)



첫화면에서는 플래시를 통해서
서비스의 간단한 사용법등을 보여주고 있습니다.
실제로 써 보게 되면 정말 단순하게 사용이 가능함을 알 수 있는데요,
그럼 한 번 로그인을 해서 실제로 화면을 보도록 하겠습니다.



전체적으로 깔끔하고 직관적인 달력의 모습을 볼 수 있습니다.
왼편에 배치되어 있는 패널은 숨길 수가 있습니다.

위 쪽에 메뉴들을 보게 되면 일정 / 할일 / 기념일 세가지로 나누어서
챙겨야 할 것들을 정의하고 있고 우측에는 지역별 날씨가 보이도록
해두고 있습니다. (지방 출장이 계획된 분들에게는 해당 지역의 날씨를
한 눈에 알 수 있겠금 해주고 있습니다.)

달력은 지금 보시는 것이 "월" 단위 보기이며
이는 일일 단위부터 주 단위 등으로 변경해서 볼 수 있도록 되어 있습니다.
좌측을 훑어보게되면 할 일을 상단에 배치해서 급하게 할 것들과
오늘 해야 할 일들을 기록해두고 자주 볼 수 있도록 배치를 했고
그 밑에 미니달력을 배치해서 계속되는 일정들의 전체적인 기간 등을
한 눈에 알 수 있도록 해주고 있습니다.

하단 부분에 보이는 메뉴중 아웃룩(Outlook) 싱크는
우리가 평소 자주 쓰는 아웃룩에 현재 캘린더의 저장정보를 보내어서
서로 연동시키는 기능입니다. 아웃룩을 연동시키기 위해서는
가져오기/내보내기 를 통해서 수동으로 연동하는 방법과
Active X 를 이용해서 Internet Explorer 를 통해 바로 연동하는 방법이
있습니다. 불여우 사용자인 저로서는 어떤 방법이든 사실
입맛만 다실 수 밖에 없는 기능이긴 합니다.
(Active X 는 불가피한 선택으로 여겨집니다. 사실 무슨 수로 순수 HTML 기술로
로컬에 설치된 프로그램과 연동을 할 수 있을까요? 수동으로 연동할 수 있는
방안을 마련한 것은 좋은 선택으로 생각할 수 있겠습니다.)

캘린더 미니는 PC에 직접 설치를 해야 하는 프로그램입니다.
브라우저를 띄우지 않은 상태에서도 자신의 일정과 할 일등을 챙기고 싶은 사용자에게
하나의 길을 제공해 주고 있습니다.



캘린더 미니를 실행하면 보이는 첫화면 입니다.
역시 로그인을 하라고 나옵니다.
여러 명이서 같이 사용하는 PC의 경우 로그인 하단 옵션 부분에 있는
"비밀번호 저장" 과 같은 기능은 사용하지 않도록 합시다. (보안 캠페인?!)
(이런 부분은 기본 선택 안함 상태에서 설명을 해주었으면 하는 바램입니다. ^^)



미니는 생각보다도 더 단순하게 구성되어 있습니다.
오늘 스케쥴을 보면서 오늘 할 일이 얼마나 되는지 확인 할 수 있고
(저는 아무 것도 할 일이 없군요. -_ㅠ)
일정 관리 도구로 많은 분들이 사용하시는 아웃룩과 싱크하는 버튼도
우측 상단에 배치해서 쉽게 연동할 수 있도록 하고 있습니다.
자, 잠깐 빠지긴 했습니다만
다시 브라우저로 돌아와서, 계속해서 일반적인 기능들을 한 번
본격적으로(...) 파헤쳐 보도록 하겠습니다. (무릎팍도사냐... -_-+)



오잉?! 이건 뭥미?
본격적으로 파헤쳐 산산히 분해해 보려는 저의 야심찬 욕망을
미리 눈치채고 누군가가 방해공작을 하는 것 같습니다.
흔하게 볼 수 없는 에러 메시지 입니다. (혹시 저에게만 보이는 건... ?!!!)



할 일을 등록하지 못해서 (사실 등록할 것도 없었지만 ㅠㅠ;)
일단 기념일을 한 번 등록해 보았습니다.
보시다시피 위 쪽에 배치된 메뉴를 통해서 입력하게 되면
위와 같은 화면을 만나실 수가 있습니다.

남은 날짜가 바로 보여져서 언제까지는 미리 준비를 해야 겠다 등의 계산이
바로 가능합니다. 사실 기념일 안 챙기기로 유명한 저의 경우에는
저런 기능이 있어도 그만 없어도 그만 입니다만(...) 대다수의 건전한
네티즌 여러분들에게는 꼭 필요하면서도 세심한 배려가 돋보이는 부분이라
할 수 있습니다.


위 쪽 메뉴가 아닌 달력상에서 바로 할 일이나 기념일을 등록하려 했을 때의
모습입니다. 할 일 간단히 쓰기 상태로 가면 중요도 등은 나오지 않고
오로지 할 일만 나오는 것을 볼 수 있습니다. (할 일이 실제로 저장되지는 않았습니다.
리뷰를 쓸 당시 아까의 방해공작이 아직 끝나지 않은 상태여서... 잊지 않겠다 Daum +__+;;)
할 일은 그렇다치고(...그냥 넘어가기?)
중요한 일정 입력을 한 번 보도록 하겠습니다.
일정 입력하는 방법은 매우 직관적으로 되어 있습니다.
마치 실제로 달력을 쓸 때 처럼 보이는 대로 이해하고 사용이 가능 합니다.
아래의 스크린샷을 한 번 같이 봅시다.


17일자에 마우스를 가져다대고
19일까지 마우스를 이동했습니다. 그러면 화면상에서 19일까지 자동으로
드래그가 된 것처럼 보여집니다. 19일에서 다시 클릭을 하면
"간편한 일정 입력" 화면에는 17일부터 19일까지 3일간의 일정에 대해서
입력을 할 수 있도록 되어 있습니다. (Ajax 로 보여주는 사용성의 극대화라고
말씀드리고 싶습니다.)

일정 입력은 자세히 입력하길 원하시는 분들이라면
우측 하단의 "일정 자세히 입력" 을 통해서 입력을 하실 수가 있습니다.
친구에게 내 일정을 알려주는 기능도 있긴 한데
제가 보았을 땐 친구 보다는 업무상 서로의 일정을 반드시 알아야 하는
사람들 간에 필요한 기능으로 보여집니다. 이메일을 통해서
서로의 일정을 알려준다고 하는데 초기부터 이메일 서비스를 통해서
이름을 알렸던 한메일의 의지가 읽혀지는 대목입니다.
등록된 일정은 아래와 같이 나타납니다.



깔끔한 파란색 색상의 얇은 띠가 달력에 칠해집니다.
아차, 그런데 일정을 막상 입력하고나서 이 일정을 이동해야 할 경우가
생길 경우 어떻게 해야 할까요?
지우고 나서 다시 입력? 아니면 수정 패널에서 날짜 재입력...?
다음 캘린더에서는 Ajax 를 통한 말 그대로 '직관적인'
일정 변경을 제공합니다. 아래의 스크린샷을
한 번 보시겠습니까?



제가 입력한 일정을 클릭하여 마우스로 드래그 한 후,
위쪽으로 이동하여 다시 일정을 내려 놓았습니다.
그렇게 하면 일일이 일정을 수정하거나 날짜를 변경할 필요 없이
바로 수정이 됩니다. Ajax 를 통한 사용자 편의성 향상에
나름대로 고심한 모습을 엿 볼 수 있습니다.
(이런 소소한 부분에서 사용자는 큰 만족감을 느낍니다.)

일정이나 기념일등을 보면
달력에 굵은 색선을 긋고 그 위에 하얀색 글씨로 일정을 쓴 것처럼
보여짐을 알 수 있습니다. 기본으로 세팅된 띠 색도 이쁘지만
나만의 컬러를 통해서 확인하고 싶다면 어떻게 해야 할까요?
가령 불 같은 적색과 하얀색 글씨를 통해서
저의 살인적 일정을 보며 자학이라도 하고 싶다면 ?! (...변태냐;;;)



그럴 경우 하단에 있는 "환경설정" 에 들어가서
위와 같이 설정을 하시면 됩니다.
그럼 간단하게 테스트도 해 볼 겸 직접 '불 같은 적색' 으로
저의 '살인적 스케쥴' 을 자학해 보도록 하겠습니다. (...)



색상을 붉은색 계열로 바꾸고(이상하게 완전 적색이 선택이 안됩니다. 약간 문제가 있는 듯...)
다시 달력으로 돌아가니 색상이 바뀌어서 나타나고 있습니다.
색상도 엄연히 개인의 취향이 존재하고 하니 이런 색상 바꾸는 것은
불특정 다수에게 제공하는 서비스에서는 나름대로 개인화 지원이라 여길 수 있겠습니다.
다시 첫화면으로 돌아와서,
이번에는 월 단위가 아닌 주 단위로 일정을 보도록 하겠습니다.
일단 아래의 화면을 봅시다.



위의 화면을 보시면 주 단위로 일정을 입력할 수 있도록 되어 있습니다.
일정이 있는 날의 특정 시간대를 클릭하면 일정 입력창이 나오고
거기서 일정을 입력할 수 있도록 되어 있는데,
간혹 시작 시간과 종료 시간을 클릭하면 입력상자가 나타났다가 사라졌다가 하는
문제가 있습니다. (간혹 생기는 문제입니다만 아마도 문제의 소지가 있지 않나 생각 됩니다.)
주 단위 화면을 보았으니 이번에는 일일 단위 화면을 보도록 하겠습니다.
일일 단위는 위 화면에서 하루치 열을 좌우로 확대한 것으로 생각하시면 되겠습니다.



화면 디자인이나 색상, 아이콘 등이 정말 눈에 잘 들어오도록 되어 있습니다.
더군다나 Ajax 사용이 자칫 불필요하게 보여질 수도 있는 부분들도
특유의 부드러운 사용성으로 필요성을 납득시키는 것을 볼 수 있습니다.
이건 제가 착각한 것일수도 있겠습니다만 다음 캘린더를 보면 브라우저에서
제일 많이 사용하는 기능인 "뒤로가기" 기능이 정상적으로 사용 가능함을 알 수 있습니다.

Ajax Hack 등을 통해서 히스토리를 누적시켜 이동 혹은 보여줄 위치를 저장하는 방법이
공개되고 있는데 어떤 식으로 구현을 해두었는지 흥미가 생깁니다. (흐흐흣)
전체적으로 기능적인 면을 중심으로 한 번 훑어 보았습니다.
인상적인 Ajax 사용이나 사용자를 위한 세심한 배려가 곳곳에서 돋보이는 서비스라고
감히 평할 수 있겠습니다.
그럼 막간을 이용해서 한 번 기술적인 부분도 살펴 보도록 하겠습니다.
(이미 스크롤 압박이니 테러니 할 단계도 지났구나... 에혀라 디여~)



소스코드 보기를 해보면 엄청난 스크롤 압박을 경험하실 수가 있습니다. (사돈 남말?)
위 스크린샷은 그 일부인데요, 빈 줄 까지 포함해서 약 3,425줄의 코드가 작성된 것을
알 수 있습니다. 외부에서 불러들이는 것들까지 포함해서 그 보다 많으면 많았지
결코 적지는 않을 것입니다.

자바스크립트는 Prototype.js v1.5.1.1 을 기반으로 했음을 base.js 파일을 보면
알 수 있습니다. 자바스크립트의 활용능력을 극대화 했다는 평을 듣는 프레임워크이니만큼
다음 캘린더를 만든 팀에서도 직접 제작하느니 기존에 검증받은 것을 그대로 쓰자는
생각이었을 겁니다.

자바스크립트 소스를 보면 MVC 패턴을 적용해서 개발을 했음을 알 수 있는데요,
아래의 증거자료를 한 번 같이 보도록 하겠습니다.



옅은 파랑색으로 된 부분에 그 때 그 때 필요한 글자가 매칭되어서
화면상에 뿌려지도록 되어 있습니다. 실제로 파일도 calendar_model.js, calendar_view.js 등으로
구성되어 있습니다. 보여주는 부분과 비즈니스 로직, 그리고 제어 부분을 분리해서 개발하여
각각 독립적이고 또 효율적으로 개발이 가능하도록 했음을 알 수 있습니다.
(위의 코드들은 어줍잖은 하찮은 꼬맹이인 저에게는 그저 후덜덜덜 입니다. ~_~;;; )

소위 Web 2.0 형 웹서비스들이 인터넷이라는 들판 곳곳에
저마다의 색깔을 지닌 채 만개하고 있습니다.
위의 Daum 캘린더 역시 Ajax 기반의 웹서비스로서 초기 다음의 부흥을 견인했던
한메일팀이 메일과의 연관성이 높으면서도 새로운 서비스로 '캘린더(플래너)'를
선택하고 보인 야심작입니다.

결과는 뚜껑을 열어봐야 아는 것이겠지만
현재 베타 서비스로 테스트가 진행중인 Daum 캘린더는 비교적 성공적인 서비스로
보여집니다. 특히 기존 사용자들이 주로 사용하는 아웃룩을 외면하지 않고
연동 기능을 통해서 양 쪽 다 번갈아가며 사용할 수 있도록 한 점은 높이 사고 싶습니다.
다만 위의 리뷰 중간에 보여진 것처럼 서비스 에러가 꽤 시간이 지났음에도
아직 복구되지 않은 점은 아쉬운 부분으로 남네요. (빠른 쾌유 빕니다! Daum 서버군!)

무지막지한 스크롤 압박과
너무 낱낱히 파헤쳐 너덜너덜해지진 않았나 걱정도 되는
다소 잔혹한(?) 리뷰를 끝까지 봐주신 여러분들께 감사드립니다.
(사실 여기까지 읽어주신 분이 없으리라 저는 감히 확신하고 있습니다.)