Daum의 Ajax 개발 사례

Ajax 역시 국내외 화두가 되고 있지요. Gmail이나 Google Suggest로 부터 시작된 이 기술을 Ajax로 명명하고 많은 웹2.0 Startup Company들이 많이 이용하기 시작했습니다. 작년 9월의 Ajax 세미나에서도 국내외 Ajax 예제를 소개했습니다만 아직은 국내에서 이를 이용해 볼만한 사례가 다음과 네이버의 서제스트 기능외에는 없는 것 같아서 몇 가지를 소개합니다.

웹인가, 아웃룩인가? 한메일 주소록
이 프로젝트는 작년 6월에 개편된 한메일 서비스 중 주소록 부분을 사내 R&D센터와 메일팀이 공동으로 개발한 것입니다.

Ajax기반 한메일 주소록 전체 화면 보기

개편된 한메일 주소록은 아웃룩과 유사한 웹 어플리케이션 인터페이스를 가진 서비스로 기획되어 있습니다. 이 주소록은 페이지의 리로딩 없이도 다양한 기능을 바로 수행할 수 있는 장점이 있습니다.

– 이름, 전화번호, 이메일을 테이블에서 두번 클릭하면 바로 수정이 가능하다.
– 이름, 전화번호, 이메일을 가나다순 정렬이 바로 가능하다.
– 주소를 바로 추가 하면 페이지 로딩 없이 추가 된다.
– 주소 및 그룹 이동, 삭제 변경도 페이지 로딩 없이 추가 된다.
– Ctrl혹은 Shift 키를 이용하여 하나 또는 다중 선택이 가능하다.

한번 시도해 보세요!

사실 이 프로젝트를 하면서 Ajax와 DOM Handling을 하면서 엄청난 삽질을 경험했습니다. 그걸 참고 정적인 주소록이 이렇게 바뀔 수 있게 참아준 기획자가 감사할 따름입니다. 올해는 야후!나 MSN 메일 베타처럼 좀 더 웹 어플리케이션 다운 “한메일”이 된다고 하니 기대해 볼만 합니다.

Planet, Flickr 포토 메모 기능 구현

다음 플래닛(http://planet.daum.net)에 사진 기능 중 막강한 포토 메모 기능을 아세요? 한줄 답글로 댓글을 달지 않고 사진에 직접 댓글을 달 수 있습니다. Ajax를 사용하여 깔끔하게 만들어진 추천할 만한 기능입니다. Flickr가 부럽지 않죠?

그 밖에 Daum 카페 프렌즈에 가보시면 릴레이 노트와 오늘 하루는 이라는 메뉴를 통해 동적인 기능을 이용해 보실 수 있습니다. 모두 Ajax 기법으로 만들었답니다.

또 소개할만한 국내 사례가 있으세요?

- ;

Disclaimer- 본 글은 개인적인 의견일 뿐 제가 재직했거나 하고 있는 기업의 공식 입장을 대변하거나 그 의견을 반영하는 것이 아닙니다. 사실 확인 및 개인 투자의 판단에 대해서는 독자 개인의 책임에 있으며, 상업적 활용 및 뉴스 매체의 인용 역시 금지함을 양해해 주시기 바랍니다. 본 채널은 광고를 비롯 어떠한 수익도 창출하지 않습니다. (The opinions expressed here are my own and do not necessarily represent those of current or past employers. Please note that you are solely responsible for your judgment on checking facts for your investments and prohibit your citations as commercial content or news sources. This channel does not monetize via any advertising.)

여러분의 생각 (8개)

  1. 골빈해커 댓글:

    오오..재밋군요..뭐 올블로그도 툴바의 기능들은 거의 AJAX 로 구현되어 있고 내부에서 사용하는 것도 앞으로 많은 부분 구현해나가려구요 ㅎㅎ

  2. 하늘이 댓글:

    허헛! ㅠ_ㅜ)=b 정말 멋진데요!!

  3. 골안빈해커 댓글:

    여기 주소 가보세요. 엑섹스, 엑셀, 일정관리까지 모두 Ajax…

    http://jhmemorize.nasee.net/tt/index.php?ct1=1

  4. Shrek 댓글:

    다음 주소록은 제가 처음 웹프로그래밍을 접할때 많은 도움을 주었습니다. 로컬에 저장해 놓고 많이 이용했죠.

    Select box 이동에서 부터..
    주소록을 배열에 담아주고 찾기, 정렬 기능.
    그리고 이제 Ajax 를 배울수 있었습니다. 늘 감사드림니다.

    그리고 플래닛에서 포토메모를 보고 감탄하다.
    다음 소스 플랫닛 소스 모두 출력하여 분석했죠.
    그러다 http://prototype.conio.net/ 를 알게 되었죠

    사실 그때 조금 실망도 했습니다. 전 그게 3일동안 다음에서 만든 것인줄 알았죠….^^ 그러다 구굴에서 검색했더니
    그게 아닌더라구요..

    아직도 그게 다음에서 만든것 처럼 되어 있는지 모르겠지만. 그건 수정해 주셨으면 합니다.

    // Prototype: an object-oriented Javascript library
    // (c) 2005 Sam Stephenson
    // Copyright 2005 PLPTFT, Daum Communications Corp.

    어째든 플래닛 소스로 많은 도움을 받았습니다.

    어째든 다음은 대용량 서비스에 익숙해져 있고,
    성공할 가능성이 가장 큰 인터넷서비스업체라 생각이
    됨니다.

    다음에 입사하고 싶었지만,
    뽑아 주지 않아 다른 곳에서 일하고있지만.
    잠시 동안 아르바이트를 했지만.

    어째든 다음의 기술력은 최고라고 생각이 됨니다.

  5. tux 댓글:

    아… 멋있어요..
    하나 수정하려면 몇단계 거치고, 리로드되고 그러는 과정이 너무 싫었는데.. 즉석에서 쌰샤샥~!

  6. likejazz.COM 댓글:

    다음의 Ajax 개발사례 #2

    참고: Daum의 Ajax 개발 사례 – Channy’s Blog 차니님의 블로그에 남겨주신 Shrek님의 댓글을 보고 많은 생각을 했습니다. 오픈소스를 적극적으로 이용했고 또 그에 대한 저작권표기를 확실히 했다…

  7. yocososo 댓글:

    URL 도 넣을 수 있게 기능을 넣어 주세요^^

  8. 이상준 댓글:

    글쎄요 ㅡㅡ;; 이미 많은 업무용 프로그램에서는
    화면 리로드를 하지 않고 SCRIPT OBJECT를 사용하여
    클라이언트단에서 ROW추가,삭제등을 다양한 방법으로
    처리하고 있습니다. 위의 한메일이나 포토메모등도 얼마든지 처리가 가능하답니다.
    다만 AJAX와 다른점은 기존 자바 나 ASP,.net 기반의
    기술을 이용한다는 점과 XML을 사용하지 않느다는
    점이죠. 사용자 입장에서 똑같이 동작한다면 궅이
    AJAX를 사용할 이유가 없는것 같군요…