Popular Posts

Showing posts with label chrome. Show all posts
Showing posts with label chrome. Show all posts

Friday, September 10, 2010

구글 크롬의 꿈, 그 중간의 순간검색

며칠전 선보인 구글 순간검색 (Google Instant)는 많은 개인정보문제 등 시기와 질투(?)가 있었지만 그야말로 많은 이들의 찬사가 이어졌다. '역시 구글', ''구글신', '검색의 절대 강자' 등등등. 나도 신기해서 이것 저것 많이 해보고 테스트 해봐도 음. 좋다.

[팁!] 혹시 안되는 분들은 구글 계정에 로그인 되어있고 언어가 한글로 설정되어있으면, google.com을 백날 입력해도 강제로 구글 한국어 서비스로 연결되어 안될 수 있으니, 강제로 http://google.com/en으로 입력해서 영문 사이트로 들어가서 해보시길. 영문사이트에서도 한글 검색어 입력이 가능하고 한글에 대해서도 순간검색이 가능하다. 그러니 사실 구글 코리아는 서비스를 아직 하지 않고 있다는 말은 사기에 가깝다.

그리고 오늘 크롬을 딱하니 여니 조금 다른 모습의 크롬이 떴다. 자동 업데이트를 설정해놔서 가끔씩 이런 기쁨(?)을 아침에 맞이 하곤 하는데 오늘은 눈에 띨 만큼 바뀌었다.

<Google Chrom v6.0.472.55>


1. 우선 전체 브라우저 색감이 연한 회색으로 바뀌었다. 물론 이것은 테마를 설정해서 바꿀 수 있지만 파란 기본이 좋아서 그것으로 했었는데 회색도 괜찮다. 위에 보이는 그림이 업데이트된 크롬에서 구글 메인 페이지에 들어간 모습.

[팁!] 배경에 보이는 그림은 언제부터 생긴 기능인지 모르겠지만, 배경이미지를 선택할 수 있는 링크가 좌측하단에 보인다. 그 링크를 누르면 여러 깔끔한 이미지 중에 고를 수 있다. 자기 컴퓨터에 있는 그림도 선택 가능하다. 이를 테면 이쁜 여자 사진. 로그인이 필요하고 이건 크롬하고 전혀 상관이 없다. 그런데 여기 왜쓰냐. 그냥 아시라고.
 

2. 우측 상단에 '현재페이지 관리'와 '사용잘 설정' 두개의 버튼이 하나로 통합되었다. 우측상단에 보이는 저 연장모양(?) 버튼이 하나만 보이고 연장의 방향도 오른쪽에서 왼쪽으로 바뀌었다. 연장버튼을 누르면 아래처럼 통합된 옵션 팝업이 나타난다. 두개를 하나로 합치면서 Edit 세개메뉴를 한 줄에 깔끔하게 집어넣은 것등 참 깔끔하게도 통합했다. 이쁘게 안봐줄 수 가 없다.

<하나로 통합도니 크롬 설정 창>

 
3. 작업 표시줄에 보안 정보 표시. 크롬이 등잘할 때부터 크롬 3대 모토 (Speed, Simplicity, Security)중 하나였던 Security 정보가 작업표시줄을 통해서 직접적으로 보여진다. 아래 그림에서 왼쪽은 로그인 하지 않은 naver.com을, 오른쪽은 로그인 후 mail.google.com을 브라우징한 것이다. 왼쪽에서는 어쩌고 저쩌고 인크립션이 안되있고 해서 느낌표 두개가 나와 보안상 이유가 있을 수 있다고 짐작하는 것이고, 오른쪽은 어쩌고 저쩌고 안전하고 certificate 정보는이렇다 하는 것을 보여주고 있다. 원래 있던 현재사이트를 북마크하는 별 마크는 작업표시줄 오른쪽으로 쫓겨났다. 별 마크가 있던 자리에는 보안등급에 따라 지구본 모양 동그라미가 있거나 녹색  자물쇠가 있거나 빨간색 해골이 나타난다. 그 버튼을 클릭하면 아래처럼 창이 하나 떠서 정보를 보여준다.

<페이지 보안 정보 표시 기능>


빨간색 해골이 표시된 다는 것은 조심하라는 뜻 같다.  같은 g메일에서 왔다 갔다 몇번 했더니 빨간 해골 등장. 해골을 눌러보니 느낌표가 하나밖에 안뜬다. 읽어보니 g메일에 대한 연결은 안전한데 현재 보고 있는 페이지(워드 첨부파일이 있는 메일을 보고 있었다.)가 안전하지 않은 컨텐트를 포함하고 있다는 것.

<혹시 개인정보 있나? 보셨다면 신고바람>


작업표시줄 왼쪽에 있는 이전페이지, 다음페이지, 새로고침, 홈 버튼은 버튼 모양이 사라지고 마우스 오버를 해야 버튼모양으로 보이게 바뀌었다. 이렇게 작업표시줄은 전체적으로 간소화 되고 깔끔한 인터페이스로 바뀌었다.

4. 요소 검사(inspect element) 인터페이스도 바뀌어서 훨씬 보기 편하고, element에 대해 사람의 언어(물론 영어이긴 하지만)로 설명하는 부분이 추가되기도 했다.

5. 그 외에 작지만 많이 바뀌었다. 게다가 느낌인지 뭔지 좀 빨라진 느낌이다. 페이지 전체 로딩, 이미지 로딩 등 확실히 빨라진듯. 네트웍이 빨라졌나;;;;


어떻게 바뀌었는지 잠깐 찾아봤는데 없다. 공식블로그에도 없고 공식 사이트에도 없다. 그거 찾다가 재밌는 그림을 하나 찾았다.
구글 검색에 대해 이전 구글검색과, 구글 순간검색과, 크롬 운영체제의 비교. (원문링크)

순간검색 이전에 구글 검색을 하려면 사용자는 12단계를 거쳐야 했다.
[운영체제 시동->브라우저열기->주소입력창에 포커스-> google.com입력 -> 가기 버튼이나 엔터키 누름 -> 구글 메인페이지 로딩 -> 검색박스에 포커스 ->검색어 입력->검색버튼 혹은 엔터키 누름->검색결과창 로딩->검색결과창 브라우징->결과중 링크 클릭]. 물론 사용자의 능력(!)에 따라 한 두단계를 줄일 수 있다. 예를 들어 윈도우키와 R키를 눌러 열리는 실행박스에 http://google.com이라고 입력하면 주소입력창에 포커스라는 하나의 단계를 생략할 수 있다.

어쨌든 구글 순간 검색은 검색어 입력다음의 두단계를 줄였다. 엔터키를 누르는 것과 결과페이지를 로딩하는 단계를 없앴다. 구글은 Finally 이를 크롬 OS를 이용해 5단계로 줄일 계획이라고 한다. 어서 그렇게 해라. 5단계에 낭비할 시간이 없다. ㅎㅎ

아래그림은 원문에 실린 그림이다. SERP는 Serrch Engine Results Page의 약자로 검색결과페이지를 의미.

구글은 가끔 얄미울 만큼 사용자의 마음을 파고든다. 이런게 진정 사용자 중심의 소프트웨어 개발인가?

무한도전 WM7 3경기까지 14시간 남았다. 아 기대되.

Monday, August 9, 2010

구글 크롬 '요소검사' 기능, 사이드바, 위젯개발에 짱!

엊그제 레뷰 이웃 위젯 만들다 이미지 틀어지고 여백 수정안되는 문제 때문에 짜증이 났었다.
분명 여백도, 패딩도 다 0으로 했는데 들어갔다 나왔다 난리였다. iframe으로 처리하면 좀 나으련만 내가 레뷰서버 주인이 아니라 접속해서 코드를 심어놓을 수도 없고, 그냥 블로그 태그위젯에 코드를 다 떼려넣는 수 밖에 없었다.

그러다 보니 블로그자체에서 정의된 스타일이 계속 상속이 되어 설정된 되로 되질 않고 이랬다 저랬다. 그래서 처음부터 끝까지 필요한 속성들을 다 스타일로 정의하다 보니 그 위젯하나 만들면서 스타일 코드가 길어져 버렸다.

그렇게 씨름한 것도 사실 크롬의 요소검사(inspect element) 기능을 써서 빨리 끝이 났다. 요소 검사 기능은 간단히 말하며 현재 보고 있는 페이지 소스가 어떻게 되어있는지, 어떤 리스소 (이미지, 동영상, 스크립트, 스타일 파일 등)들이 포함되어 있는지 하는 기본적인 것에서부터, 리소스별 로딩 속도, 리소스 추적 등 웹 페이지 디자인 및 디버깅에 관한 아주 편한 기능들을 제공해 준다. 다시한번 구글 소프트웨어에 경의를.

현재 페이지에서 마우스 오른쪽 버튼을 누르면 요소검사(Inspect Element) 라는 기능이 제일밑에 보이는 데 그 기능을 누르면 위 그림처럼 요소검사창이 열린다. 언제 업데이트 되었는지 모르겠는데, 이전에는 별도의 창으로 열렸었다. 직접 써보니 저렇게 같은 창에 있어야 훨씬 버그를 잡긴 쉬운 것 같다. 위 그림은 요소검사창에서 현재 선택된 라인에 해당되는 코드가 웹페이지 어디에 표시되는 가를 보여준다. 내가 만든 위젯에 대한 코드를 선택하니 위젯이 선택되었다. 그리고 선택된 부분에 대한 스타일 정보를 상세히 알려준다.

작성한 코드를 아래 레벨로 들어가서 살펴본 화면. HTML 태그 하나 하나 다 잡아주기 때문에 작은 부분의 실수를 만회할 수 있다. 오른쪽 하단에서 보는 것처럼 상속된 스타일중 어떤 것이 적용되었고 어떤것이 다시 정의되었는를 볼 수 있다. 그렘에서는 블로그 이름이 <a>태그 안에 있는데, 일반 링크처럼 보이지 않게 하기 위해 다시 정의해서 글자 색과 링크 밑줄을 없앴다.

리소스 보기 화면, 어떤 리소스가 이 페이지에 포함되어 있고, 로딩 시간이 얼만큼 걸리는 가를 표시해 준다.

뿐만 아니라 현재 페이지가 참조한 (현재 페이지에 포함되어 있지 않더라도) 스타일시트나 스크립트 파일을 열어 검토할 수 있게 해준다. 맨날 노트패드에 복사해서 붙여서 검사했었는데, 저렇게 프로그램개발툴처럼 읽기 쉽게 해노니 너무 좋다.


물론 이미지도 볼 수 있다.


이번 레뷰 위젯 개발에도 큰 도움이 되었지만. 일반 사이드바 위젯 설정할 때도 좋을 듯 하다. 사이드바에 누구나 위젯을 가져다 붙이는데 가끔 패딩이나 마진이 설정되어 있는 위젯들이 있는 경우가 있다. 블로그와 스타일 충돌인 경우도 있고, 내 블로그와 어울리지 않는 스타일을 쓰고 있을 수 있다.

그런 경우 크롬의 요소검사 기능을 이용해서 아주 세밀한 부분까지 깔끔하게 정리해보심이 어떨지!

+소스를 해당 서버에서 가져오는 위젯들은 아무리 발버둥쳐도 고칠수 없긴 하다 ㅠ.ㅠ 예를 들면 링크프라이스 .