웹 개발자용 FAQ

소개

Google 크롬에는 어떤 기능이 있나요?
다른 브라우저에 대한 정보는 어디서 구할 수 있나요?

사용자 에이전트

Google 크롬의 User-Agent 문자열은 무엇인가요?

언어 인코딩

Google 크롬에 문자가 올바로 표시되지 않습니다.
자바스크립트를 사용한 인코딩 선언(document.write)이 작동하지 않습니다.
Google 크롬에 2개의 중국어 문자 대신 '%B1%C1%C3%E5'이(가) 표시됩니다.

스크립트 및 웹 애플리케이션

ActiveX 컨트롤이 로드되지 않습니다.
자바스크립트가 제대로 실행되지 않습니다.

웹 페이지 표시 및 브라우저 동작

내 웹사이트가 Google 크롬과 Internet Explorer에서 다르게 렌더링됩니다.
Google 크롬에서 내 웹사이트를 어떻게 테스트하나요?
외부 스타일 시트에 있는 글꼴 사양이 적용되지 않습니다.
웹사이트 팝업이 Google 크롬에 나타나지 않습니다.
SSL 보안 웹사이트가 Google 크롬에 자물쇠 모양이 아닌 느낌표로 표시됩니다.
HTML5 데이터베이스 API가 Google 크롬에서 지원되지 않습니다.
내 웹페이지로 연결되는 Google 크롬 바로가기의 모양과 기능을 원하는 대로 만들려면 어떻게 하나요?
웹페이지에서 별도의 프로세스에 새 탭이 열리도록 하려면 어떻게 하나요?

검색

인트라넷 웹사이트 주소를 입력하면 인트라넷 사이트가 아니라 검색 결과 페이지가 나타납니다.
Google 크롬의 검색 옵션에 내 웹사이트 검색을 포함시키려면 어떻게 하나요?

소개

1. Google 크롬에는 어떤 기능이 있나요?

Google 크롬에는 웹마스터가 향상된 사용자 경험을 전달하는 데 활용할 수 있는 다양한 기능이 포함되어 있습니다. Google 크롬에는 Google Gears가 기본으로 제공되므로 웹마스터는 오프라인 저장소와 같은 API를 활용할 수 있습니다. 또한 사용자가 제목 표시줄만을 나타내는 미니 UI를 사용하는 모드로 Google 크롬을 시작할 수 있기 때문에 Google 크롬을 사용하면 웹 애플리케이션을 데스크탑 애플리케이션과 유사한 모양으로 만들 수 있습니다.

Google 크롬은 기존의 자바스크립트 인터프리터보다 한결 속도가 빨라진 새로운 자바스크립트 엔진(V8)을 사용합니다. 따라서 속도나 처리 능력에 대한 제약 없이 더 복잡하고 광범위한 AJAX 애플리케이션도 제작할 수 있습니다. 마지막으로 Google 크롬은 Webkit를 기반으로 구축되므로 Google 크롬 사용자는 WebKit에 추가된 CSS3 기능을 통해 다양한 혜택을 누릴 수 있습니다.

2. 다른 브라우저에 대한 정보는 어디서 구할 수 있나요?

브라우저의 종류는 다양합니다. 다음은 가장 널리 사용되고 있는 브라우저들로 웹사이트를 클릭하면 자세한 내용을 알아볼 수 있습니다.

사용자 에이전트

3. Google 크롬의 User-Agent 문자열은 무엇인가요?

Google 크롬의 사용자 에이전트 문자열은 다음과 같습니다.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.X.Y.Z Safari/525.13.

Google 크롬은 WebKit 렌더링 엔진을 사용합니다. 이 엔진은 Apple Safari와 같은 다른 브라우저에서도 사용되고 있습니다. 웹페이지는 다른 WebKit 기반 브라우저와 Google 크롬에서 똑같은 모양으로 표시되어야 합니다. Google 크롬이나 Safari 같은 특정 브라우저 이름을 타겟팅하기 보다는 webkit 를 사용자 에이전트 문자열에서 찾아 해당 브라우저를 타겟팅할 수 있습니다.

언어 인코딩

4. Google 크롬에 문자가 올바로 표시되지 않습니다.

브라우저에서 콘텐츠를 올바로 렌더링할 수 있도록 문서 소스 상단에 항상 콘텐츠 및 문자 인코딩 정보를 제공해야 합니다. frame이나 iframe을 사용하는 경우에는 frame 소스 상단에 인코딩을 지정해야 합니다. Google 크롬을 비롯한 일부 브라우저에서는 문서의 헤드 섹션에 있는 CSS 또는 스크립트 다음에 나오는 인코딩 선언은 인식하지 못할 수 있습니다.

적절한 charset 선언의 보기:

<html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
      <script type="text/javascript">
      ... your JavaScript code ...
      </script>
      .......

웹 서버가 페이지 내부의 charset 선언과 상충하는 charset을 HTTP 헤더를 통해 보내지 않도록 합니다. 웹 서버가 내보내는 HTTP 헤더가 페이지 내부 선언보다 우선해서 적용됩니다.

5. 자바스크립트를 사용한 인코딩 선언(document.write)이 작동하지 않습니다.

Google 크롬은 document.write()를 사용하여 선언되는 인코딩 정보는 읽지 않습니다. 예를 들어 이 메서드를 사용하여 iframe에서 인코딩을 선언하는 경우, iframe이 렌더링될 때 문자가 깨져 보일 수 있습니다. 다음 인코딩 방법은 권장하지 않습니다.

frame1.js

document.write("<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">");
      ... other JavaScript code ...

다음 인코딩 방법을 권장합니다.

frame1.html

<html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
      <script type="text/javascript">
      ... your JavaScript code ...
      </script>
      ...

6. Google 크롬에 2개의 중국어 문자 대신 '%B1%C1%C3%E5'이(가) 표시됩니다.

Google 크롬은 URL에서 검색어 매개 변수를 퍼센트 인코딩으로 표시합니다. 서버측 스크립트가 데이터를 처리하기 전에 퍼센트 인코딩으로 표시된 문자를 제대로 디코딩해야 합니다.

스크립트 및 웹 애플리케이션

7. ActiveX 컨트롤이 로드되지 않습니다.

NPAPI 버전의 플러그인을 지정해야 합니다.

ActiveX는 Windows의 Internet Explorer(및 Internet Explorer를 기반으로 구축된 브라우저)에서만 지원됩니다. Google 크롬, Mozilla Firefox, Apple Safari 등은 ActiveX를 지원하지 않습니다. 대신 NPAPI(Netscape Plugin Application Programming Interface)를 사용합니다.

8. 자바스크립트가 제대로 실행되지 않습니다.

Google 크롬에 자바스크립트 오류를 표시하여 디버깅하는 방법에는 다음 두 가지가 있습니다.

자바스크립트 콘솔: 페이지 메뉴 아이콘을 클릭하고 개발자 > 자바스크립트 콘솔을 선택합니다. 여기에서 자바스크립트 실행 오류를 볼 수 있고 추가 자바스크립트 실행 명령을 입력할 수 있습니다.
자바스크립트 디버거: 페이지 메뉴 아이콘 > 개발자 > 자바스크립트 디버깅에서 이용할 수 있는 디버거는 breakpoints, backtrace 등을 설정할 수 있는 명령 프롬프트를 제공합니다. 디버거 명령줄에 help 를 입력하면 시작됩니다.

웹 페이지 표시 및 브라우저 동작

9. 내 웹사이트가 Google 크롬과 Internet Explorer에서 다르게 렌더링됩니다.

Google 크롬은 Internet Explorer와 다른 렌더링 엔진을 사용하므로 웹페이지가 다르게 표시됩니다. 그러나 Apple Safari는 Google 크롬과 같은 렌더링 엔진(WebKit)을 사용하므로 웹페이지가 똑같이 표시되어야 합니다.

어느 브라우저에서건 웹사이트가 제대로 렌더링되지 않을 경우 HTML 및 CSS를 http://validator.w3.org/ 페이지에서 테스트하여 유효한지 확인합니다.
웹사이트가 Google 크롬 또는 Apple Safari에서 제대로 렌더링되지 않을 경우 http://webkit.org/quality/reporting.html 페이지에 설명된 대로 webkit.org에 버그를 신고합니다.
웹사이트가 Apple Safari에서는 제대로 렌더링되지만 Google 크롬에서는 렌더링되지 않을 경우 http://code.google.com/p/chromium/issues/list 페이지에 Google 크롬 버그를 신고합니다.

10. Google 크롬에서 내 웹사이트를 어떻게 테스트하나요?

Google 크롬에서 웹사이트를 테스트하는 데 유용한 다음과 같은 몇 가지 도구가 있습니다.

웹 검사기
웹페이지에서 마우스 오른쪽 버튼으로 아무 컴포넌트나 클릭하면 웹 검사기가 시작됩니다. DOM 및 자바스크립트 콘솔의 계층 구조 보기를 포함하여 클릭한 컴포넌트와 관련된 요소와 리소스를 볼 수 있습니다.
작업 관리자
페이지 메뉴 아이콘을 선택한 다음 개발자 > 작업 관리자를 선택하거나 Shift+Esc 키를 누릅니다. 작업 관리자에는 실행 중인 모든 Google 크롬 프로세스와 함께 메모리, CPU, 네트워크 등 사용 중인 리소스가 표시됩니다.
자바스크립트 디버거
페이지 메뉴 아이콘을 선택한 다음 개발자 > 자바스크립트 디버깅을 선택합니다. 그러면 자바스크립트 디버거가 실행되어 기존 프로세스에 연결하여 사용할 수 있습니다.

11. 외부 스타일 시트에 있는 글꼴 사양이 적용되지 않습니다.

외부 스타일시트가 올바른 charset 및 content-type과 함께 제공되어야 합니다. 즉, text/css 또는 text/css;charset=X로 제공되어야 합니다.

HTTP 헤더에서 스타일시트에 대한 charset를 지정하지 않는 것이 좋습니다. 대신 CSS 스타일시트의 맨 앞(공백, 줄바꿈 등을 포함하여 선행하는 문자가 없는 경우)에 다음과 같이 선언을 추가할 수 있습니다.

@charset "xxx"

인코딩 정보를 지정하지 않으면 스타일시트가 제대로 구문 분석되지 않을 수 있습니다.

본 항목에 대해 자세히 알아보려면 World Wide Web Consortium에서 제공하는 설명서(http://www.w3.org/TR/CSS21/syndata.html#charset)를 참조하시기 바랍니다.

12. 웹사이트 팝업이 Google 크롬에 나타나지 않습니다.

Google 크롬의 기본 동작은 팝업의 제목 표시줄을 최소화하여 브라우저 창의 오른쪽 하단에 표시하는 것입니다. 사용자는 제목 표시줄을 다른 위치로 드래그해야만 팝업 콘텐츠를 볼 수 있습니다. 이렇게 하면 웹사이트의 기능은 중단되지 않은 상태에서 팝업 창을 로드할 수 있을 뿐만 아니라, 원하지 않는 팝업 창이 페이지를 가리거나 사용자를 현혹하는 일도 방지할 수 있습니다.

13. SSL 보안 웹사이트가 Google 크롬에 자물쇠 모양이 아닌 느낌표로 표시됩니다.

이는 웹페이지에서 SSL을 사용하는 데 문제가 있음을 나타냅니다. Google 크롬에 표시된 느낌표를 클릭하면 이 문제에 대해 더 자세히 알 수 있습니다. 그러나 페이지에 콘텐츠가 혼합되면 이러한 문제가 발생하는 경우가 종종 있습니다. HTTPS를 통해 제공되고 SSL 보안이 적용된 최상위 웹페이지에 이미지와 스크립트, CSS 같은 요소를 HTTP를 통해 포함시킨 경우가 그 예가 될 수 있습니다. 모든 콘텐츠는 HTTPS를 통해 제공되어야만 제대로 표시됩니다.

14. HTML5 데이터베이스 API가 Google 크롬에서 지원되지 않습니다.

Google 크롬 팀은 향후 출시되는 버전에서는 WebKit가 지원하는 API뿐 아니라 HTML5 데이터베이스 API도 지원할 계획입니다.

15. 내 웹페이지로 연결되는 Google 크롬 바로가기의 모양과 기능을 원하는 대로 만들려면 어떻게 하나요?

Google 크롬 사용자는 페이지 메뉴 아이콘에서 애플리케이션 바로가기 만들기를 선택하여 웹페이지로 바로 연결되는 바로가기를 만들 수 있습니다. 기본적으로 새로운 바로가기는 페이지 제목이나 파비콘을 사용합니다.

문서의 <head> 섹션에 특정 메타태그를 삽입하여 웹페이지로 연결되는 Google 크롬 바로가기의 제목과 설명 및 URL을 지정할 수 있습니다.

지정 대상	태그	예
바로가기 제목	application-name	`<meta name="application-name" content="Gmail"/>`
설명(환경설정 창에서와 같이 공백이 더 필요할 때 사용)	description	`<meta name="description" content="Google's approach to email"/>`
바로가기를 클릭할 때 열리는 URL	application-url	`<meta name="application-url" content="http://www.gmail.com"/>`
바로가기 아이콘		`<link rel="icon" href="gmail_32x32.png" sizes="32x32"/> <link rel="icon" href="gmail_48x48.png" sizes="48x48"/>`

예제:

<head>
      <meta name="application-name" content="Gmail"/>
      <meta name="description" content="Google's approach to email"/>
      <meta name="application-url" content="http://www.gmail.com"/>
      <link rel="icon" href=gmail_32x32.png sizes="32x32"/>
      <link rel="icon" href=gmail_48x48.png sizes="48x48"/>
      </head>

이 태그는 Gears Desktop API의 태그와 거의 일치합니다. 자세한 내용은 Gears Desktop API 설명서를 참조하시기 바랍니다.

16. 웹페이지에서 별도의 프로세스에 새 탭이 열리도록 하려면 어떻게 하나요?

Google 크롬에는 멀티 프로세스 아키텍처가 포함되어 있습니다. 따라서 탭이 기본 브라우저 프로세스와 다른 별도의 프로세스에서 실행될 수 있습니다. 그러나 웹페이지에서 파생된 새로운 탭은 일반적으로 동일한 프로세스에서 열리므로 원래의 페이지에서는 자바스크립트를 사용하여 새 탭에 접근할 수 있습니다.

새 탭이 별도의 프로세스에서 열리도록 하려는 경우 다음과 같이 합니다.

about:blank를 타겟으로 하여 새 탭을 엽니다.
새로 열린 탭의 opener 변수를 null로 설정합니다. 그러면 원래 페이지에 접근할 수 없습니다.
새로 연 탭의 URL을 원하는 주소로 변경합니다. 이 주소는 새 탭을 여는 본래 페이지와는 다른 도메인에 있거나 다른 포트 혹은 다른 프로토콜을 써야 합니다. 예를 들어 새 탭을 연 (부모) 웹페이지가 http://www.example.com/인 경우, 다른 도메인, 포트, 프로토콜을 쓰는 주소의 보기는 아래와 같습니다.
- 다른 도메인: http://www.example.org
- 다른 포트: http://www.example.com:8080
- 다른 프로토콜: https://www.example.com

Google 크롬은 이러한 액션을 새로운 페이지와 기존 페이지를 분리하는 힌트로 인식하며, 새로운 페이지를 별도의 프로세스에서 로딩합니다.

다음 코드를 사용하면 이러한 모든 단계를 완료할 수 있습니다.

var w = window.open();
      w.opener = null;
      w.document.location = "http://different.example.com/index.html";

검색

17. 인트라넷 웹사이트 주소를 입력하면 인트라넷 사이트가 아니라 검색결과 페이지가 나타납니다.

사용자 검색주소창에 하나의 단어를 입력하면 Google 크롬에서는 사용자의 기본 검색엔진을 통해 검색을 수행하고 그 결과를 제공합니다. 동시에 Google 크롬은 http://term에 대한 HEAD 요청을 발행하여 유효한 웹사이트인지 확인합니다. Google 크롬에 HTTP/2xx 응답(HTTP/200 OK 등)이 수신되는 경우 사용자에게 사이트를 방문할지 질문합니다. 프롬프트를 통해 사이트를 클릭하면 웹사이트가 향후 동일한 검색어에 대한 기본 검색결과로 설정됩니다.

또한 다음과 같은 메시지를 수신하는 경우에도 Google 크롬에 프롬프트가 표시됩니다.

HTTP/401 또는 HTTP/407 응답
상기 응답이 있는 페이지에서 종료되는 HTTP/3xx 리디렉션

웹 서버에서는 페이지에 대한 GET 요청이 아니라 HEAD 요청에 바로 응답해야 합니다.

예를 들어, 사이트 URL이 http://project.intranet.example.com인 사내 네트워크 사용자가 검색 주소창에 project를 입력하면

Google 크롬은 project에 대한 검색 결과를 표시합니다.
동시에 Google 크롬은 http://project가 유효한 웹사이트인지 확인합니다. 유효한 웹사이트인 경우
사용자가 http://project 사이트를 방문할지 여부를 묻는 프롬프트가 표시됩니다.
사용자가 http://project를 클릭하면, Google 크롬은 향후 검색 주소창에 project가 입력될 때마다 항상 http://project를 .입력한 것으로 간주합니다.

사용자는 project/ 또는 http://project를 직접 입력하거나 검색 주소창 아래에 나오는 후보 중에서 'project 검색' 대신 'project/' (슬래시가 끝에 있음을 유의하십시오)를 선택하여 'project'를 검색하는 기본 동작 대신 해당 주소로 바로 이동할 수 있습니다.

18. Google 크롬의 검색 옵션에 내 웹사이트 검색을 포함시키려면 어떻게 하나요?

OSDD(OpenSearch Description Document)를 제공하면 Google 크롬에서 브라우저의 검색엔진 목록에 개발자의 웹사이트를 포함시키도록 할 수 있습니다. OpenSearch에 대해 자세히 알아보려면 http://www.opensearch.org 페이지를 참조하시기 바랍니다.