Saladin’s Blog

Posts Tagged ‘javascript

그러니까 결론은 뭐냐하면 롤오버 했을때 각각 다른 이미지를 로딩하여 바뀌는 것 처럼 보이는 일반적인 방법론을 탈피하고, 딱! 미리 타일화된 gif파일 하나면 로딩하고 CSS로 자리를 바꿔가며 일부분만 보여주는 방법으로 구현한다는 것이다. 이름하여 <배경 위치 변경 기법>이라는 것이다. 

캬…이 얼마나 기발하고도 철학적인 아이디어인가 말이다…!

이론상으로 한장의 그림파일만을 한번의 서버요청으로 받고 나면 캐쉬에서 계속 읽어 무한대의 롤오버 아이콘을 구현할수가 있는 것이다.

또한 이러한 패러다임을 대단히 거대하고 무거운 프로젝트에 응용한다면 사소한 아이디어 하나로 서버의 부담을 획기적으로 줄여 결국은 관리코스트가 줄고 이것은 궁극적으로 기업의 경쟁력을 쌓는 것이다. 

 아이디어 하나로 분명 이러한 결과를 도출할 수가 있는 것이다.구글의 무서운 점은 바로 이런 틀을 벗어나는 자유분방함과 창조력과 치밀함이라고 생각된다.

  

*. 출처 : 후니넷 http://hooney.net/

 

변경된 구글 코리아의 첫 화면을 뜯어 보자.

 

구글 코리아의 첫 화면이 변경됐다. 기존에는 로고에만 1개의 이미지를 제공할 정도의 텍스트 기반 페이지였는데(현재 google.com처럼), 이번에 여러가지 아기자기한 아이콘이 추가됐다. 특히 검색 영역 아래쪽에 위치한 구글 서비스로 바로 갈 수 있는 링크들을 제공하는 점이 눈에 뛴다.

구글 한

내 경우에는 구글을 검색 뿐만 아니라, GMail, Gtalk, Gcalendar, Gnote, Gdesktop, Ggroup 등 다양한 서비스 등을 이용하고 있기에 Google My Account를 시작 페이지로 구정해서 사용해오고 있었다. 하지만, 이번에 구글 코리아의 첫 화면이 변경됐기에, 시작 페이지 주소를 변경해야겠다.

추가된 바로가기 링크에 마우스를 오버할 때, 아이콘이 변경되는 것을 확인할 수 있다. 플래시를 이용하면 쉽고 빠르게 표현할 수 있는 기법이지만, CSS와 JavaScript만으로 플래시 못지 않게 부드럽게 표현한 점이 놀랍다. 플래시가 설치되지 않은 브라우저, 또는 플래시를 사용할 수 없는 텍스트 브라우저에서도 해당 텍스트와 링크를 이용할 수 있도록 배려한 점이 맘에 든다.

구글 코리아의 서비스 바로가기 아이콘에 사용된 이미지 1개

구글 코리아에서 부가 서비스 바로가기 아이콘에 사용된 이미지

1개의 배경이미지만으로 마우스가 오버될 때, Javascript로 CSS의 위치지정(position)을 바꿔주는 방법을 사용하여 부드러운 온오프 효과를 보여주고 있다. 정지된 GIF 이미지와 CSS + Javascript로도 플래시의 모션 그래픽 못지 않게 부드러운 효과를 나타낼 수 있는 것을 보여준 좋은 사례로 꼽을 수 있다. 다만, 키보드로 이동할 때를 고려하지 않은 점이 아쉽다. ㅎㅎ

이번 구글 코리아의 첫 화면 개편은 국내 웹 디자이너에게 많은 자기개발과 고민을 할 수 있는 동기를 부여했다. 시각 장애인과 같은 사람은 물론이고, 검색엔진과 같은 기계에게도 접근성 높은 사이트를 디자인하는 것이 결코 1990년대식의 초라한 웹 디자인으로 돌아가지 않아도 된다는 것을 보여줬기 때문이다.

CSS와 Javascript를 이용한 다양한 네비게이션 효과 몇개

꼬릿말1) 많은 사람들이 구글 코리아 첫 화면에 많은 이미지를 사용했다고 하는데, 시각적으로만 그럴뿐이며 실제는 3개만 사용됐다. “구글 로고, 검색 아이콘 세트, 서비스 아이콘 세트” 이렇게 3개의 이미지를 CSS의 배경 위치 변경 기법을 이용하여 여러개 처럼 보이게 한 것이다.

꼬릿말2) 사용자들은 방문한 웹 사이트가 어떻게 만들어졌는지 전혀 고민하지 않는다. 하지만 웹 개발자와 디자이너는 수많은 고민과 노력을 통해서 보다 나은 웹 사이트를 만들어가고 있다. 로딩 속도를 0.00001초라도 빠르게 하기 위해서, 시각 장애인도 접근하고 이용할 수 있도록 하기 위해서, 최고의 웹 사이트를 만들기 위해서 노력하는 그들이 진정한 챔피언이다.


일자별 보기

6월 2017
« 4월    
 1234
567891011
12131415161718
19202122232425
2627282930  

최근 사진

DSC_0056

DSC_0123

별마로 천문대

별마로천문대

추가 사진