네이버, 검색 페이지 UI 변경(시퀀스 검색 적용)
2010년 04월 10일에 작성된 포스트입니다.

2010년 4월 10일,
네이버가 시퀀스 검색을 오픈했습니다.

크게 변한 점은 무엇보다도 메뉴입니다.
상단(탭 모양) 의 검색 메뉴가 좌측(큰 버튼 모양) 으로 이동했습니다.

메뉴는 블로그, 지식in, 이미지, 동영상, 뉴스, 사이트 에 대한 검색을 기본으로 두고,
예전에 있던 나머지 메뉴는 더보기 영역으로 숨겨져있네요.
글꼴은 전부 나눔글꼴로 처리되었고,
필요없는 부분에는 이미지를 사용하지 않으려고 노력한 것으로 보여집니다.
좋아하는 스타일입니다. 깔끔하네요.

일반 검색과 이미지는 UI 가 조금 다른데요.
기본적으로 블로그, 지식iN, 뉴스, 사이트에 대한 검색결과는 위와 같이 나옵니다.

이미지와 동영상에 대한 검색 결과는 위와 같이 보입니다.
배경을 회색톤으로 처리하여, 이미지나 동영상에 대한 가독성을 높였다고 합니다.
누구 생각인지 정말 괜찮네요.

HTML 소스를 살펴볼까요?

네이버 메인 페이지는 HTML을 잘 정리해놓았는데,
새로운 검색 페이지는 HTML을 마치 구글처럼 정렬을 풀어서 서비스하고 있습니다.
HTML을 정리하는데 5초도 안걸릴 뿐 더러 정렬을 풀어서 서비스 한다고 해서
정렬이 된 페이지와 특별한 차이가 있는 건 아닙니다만,
이렇게 정렬을 풀어서 서비스를 내보내니 괜히 멋져보이네요.

아래와 같은 방식으로 브라우저별로 CSS 를 다르게 적용한 것 같습니다.
<html class=”ie7 win” lang=”ko”>
<html class=”webkit safari chrome win” lang=”ko”>
개인적인 생각으로는 동일 CSS 를 사용하는 방향으로 가는 것이 좋았을 듯 한데,
네이버라는 큰 포털이 뭔가 이유가 있었나 봅니다.

프론트는 순수자바스크립트로만 되어있는 것 같은데요.
네이버의 오픈 프로젝트 중 하나 인 Jindo가 기본 js프레임웍으로 include 되어있습니다.
과연 Jquery가 날라다니고 있는 이 상황에 활성화될 수는 없겠지만
활성화 될 가능성이 보인다면 공부해보아야 겠습니다.

2010년 4월 10일 현재 기준으로 눈에 보이는 js 파일은 3가지 정도인데요.
방금 말씀드린 Jindo 와 또 하나는 좌측에 있는 기간 메뉴에 대한
슬라이더를 위한 js 파일인 것 같고,
또 하나는 최상단 GNB(Global Navigation Bar) 에 대한 js 파일로 보입니다.

상단 오른쪽 부분의 사전/뉴스/증권/부동산/지도/영화/ 더보기 부분에 보면
더보기를 눌러서 My메뉴를 설정할 수 있는데 그 부분 때문에
상단 GNB를 위한 js 파일 하나를 따로 만든 것으로 보입니다.

서버단 소스를 보고 있는게 아니라서 정확히 어떻게 구성되어있는지는 볼 수 없어서 아쉽네요.
GNB를 위한 js와 슬라이더를 위한 js는 $로 도배를 한 것으로 보아
jindo 를 열심히 사용한 것으로 보여집니다.

구글 메인은 <!DOCTYPE html> 로 HTML5 로 우선 선언을 해놓았는데,
네이버는 HTML5는 아닙니다. HTML5를 쓰기에는 구글 메인보다 코드가 길어서 문제가 있었을 것이고,
아직 HTML5를 사용하기에 조금 이르기는 합니다.

본 블로그, HyunsikLog 도 가끔 진행하는 포스트에 HTML5 관련 태그나 js 를 사용하기 때문에
HTML5로 헤더 선언을 해놓았는데요.
큰 의미가 있는지는 모르겠습니다.

캐릭터 셋은 EUC-KR 을 사용하였네요.
네이버 메인이 UTF-8 을 사용하고 있는데요.
꼭 같은 캐릭터 셋을 사용해야 하는 건 아니지만
그래도 왜 다른 캐릭터 셋을 사용했는지 궁금해지네요.

차이가 많이 있네요.
서로 다른 팀이 개발한 것일까요?

조금 더 깊이 보고 싶은데, 어떻게 구성되어 있는지,
파일 캐시가 안되는 상황에서 검색 결과를 어떻게
빨리 뿌릴 수 있는 건지 자세히 보고 싶은데 아쉽네요.

개인적으로는 이번 네이버의 검색 개편이 좋아 보입니다.
이 포스트에 대해 각종 댓글 환영합니다.

좋은 시간 되십시오.
감사합니다.

- hyunsik.me -

관련 있는 글

  • HTML5 오픈 컨퍼런스 열린다. * 2010년 7월 2일
  • jQuery와 prototype을 이용한 AJAX 구현
  • MS 인터넷 익스플로러 9 베타, 테스트 후기
  • [OPEN API] H Naver AJAX Search 0.1 : 네이버 검색 API 활용 워드프레스 플러그인
  • [OPEN API] H Naver AJAX Search 0.51 : 네이버 검색 API 활용 워드프레스 플러그인
  • [OPEN API] H Naver AJAX Search 0.9 : 네이버 검색 API 활용 워드프레스 플러그인
  • [정보] 초간단 로또 번호 생성 웹 프로그램(특이한 방법)
  • 구글 애널리틱스(Google Analytics)를 사용해보며
  • 기초대사량/비만도(BMI지수)를 구하는 웹 프로그램
  • 네이버 모바일 웹 서비스는 괜찮았다.
  • 마이크로소프트의 웹 오피스, 오피스 웹 앱스(Office Web Apps on SkyDrive)
  • 맥용 곰플레이어, Gom for Mac 미리보기
  • 아이폰 웹 개발을 위한 HTML5 와 자바스크립트
  • 아이폰과 워드프레스 사이, 워드프레스II의 활약
  • 아이폰용 게임 WE RULE을 통해 보는 SNS 와 모바일 게임

    • 현식로그 홈 정보기술(IT) 목록
    No Comments

    방문해 주셔서 감사합니다. 답글을 남겨주시면 잊지 못할 것입니다.

    현식로그 홈 정보기술(IT) 목록

     
    이 글의 방문자수는 170 입니다. (젯팩이 측정)