구글 크롬은 자체적으로 웹 개발자를 위한 개발자도구를 제공하고 있습니다. 크롬으로 웹 서핑을 하다가 키보드의 F12 키를 누르면 웹브라우저 하단에 개발자 도구가 나타납니다. 대충 보면 이게 개발자에게 무슨 도움이 될 수 있을까 하는 의구심이 들 수도 있겠지만, 자세히 들여다보면 사실 이 도구는 웹 개발자에게 매우 유용한 기능을 제공합니다.

웹 개발에 필요한 많은 기능을 제공하는데 그 중에서도 HTML 구조를 마음대로 바꿀 수 있는 기능이 가장 대표적이고, 많이 사용됩니다. 이 글에서는 일반인도 일상생활에서 매우 유용하게 사용할 수 있는 구글 크롬 개발자도구의 웹 편집 기능에 대해서 소개하도록 하겠습니다.

구글 크롬 다운로드
http://www.google.com/chrome/

구글 크롬 개발자도구란?

구글 크롬 개발자도구는 개발자들을 위하여 구글에서 제공하고 있는 개발 도구입니다. 일명 개발 도구는 구글 크롬 뿐만 아니라 인터넷익스플로러, 파이어폭스 등 대부분의 웹브라우저에서 지원하고 있는 기능입니다. 개발 도구가 웹 표준으로 자리잡아가고 있는 것으로 보입니다. 그런데 이 중에서 구글 크롬의 개발자도구가 가장 속도가 빠르고 기능도 뛰어납니다. 이러한 이유 때문에 많은 웹 개발자가 웹브라우저에서 실시간으로 웹 사이트를 분석해야 하는 필요가 있는 경우에는 주로 크롬 개발자도구를 사용합니다.

개발자도구의 엘레먼트 편집기는 개발자뿐만 아니라 일반 블로거에게도 매우 유용합니다. 특히 스킨을 직접 만드는 블로거에게 매우 유용합니다. 왜냐하면 크롬 개발자도구를 이용하면 스킨을 테스트할 때 직접 스킨 파일을 수정하지 않고도 속성 값을 변경하고, 속성이 변경된 모습을 직접 화면에서 곧바로 확인할 수 있기 때문입니다.

스킨을 만들 때에는 레이아웃의 크기나 위치 등을 설정하기 위하여 정확한 수치를 입력해야 하는 경우가 종종 발생하는데, 이 때 크롬 개발자도구를 이용하면 매우 편리합니다. 특히 애드센스 새로고침 문제를 피할 수 있기 때문에 구글 개발자도구는 매우 유용하다고 할 수 있습니다.

구글 크롬 개발자 도구에서 제공하는 기능 중 하나인 엘레먼트 편집기는 HTML을 편집하는데에 있어서 매우 막강한 기능을 제공합니다. 도대체 구글 크롬 개발자도구 엘레먼트 편집기가 무슨 기능을 가지고 있길래 필자가 막강하다고까지 표현을 했을까요? 지금부터 엘레먼트 편집기가 어떤 기능을 제공하는지 차근차근 알아보도록 하겠습니다.

엘레먼트 편집기의 HTML 실시간 편집 기능

구글 크롬 개발자도구의 엘레먼트 편집기를 이용하면 사용자 마음대로 HTML 태그를 추가하거나 수정하고, 스타일 속성을 추가하거나 수정할 수도 있습니다. 특히 변경된 사항들에 대해서는 웹 브라우저를 통하여 변경된 모습을 곧바로 확인할 수 있습니다. 크롬 개발자도구를 이용하면 웹 개발을 할 때 많은 시간을 절약할 수 있는 이유입니다.

먼저 아래의 스크린샷을 보도록 하겠습니다. 아래의 스크린샷은 필자의 계정으로 국민은행에 로그인했을 때 나타나는 화면이며, 잠깐 설명을 해보자면, 펀드를 포함한 총 예금 잔액은 약 1조 1,834억 원입니다. 필자가 국민은행과 처음 거래한 날짜는 1940년 9월 29일이입니다. 그런데 아래의 스크린샷이 정말 사실일까요? 바로 아래에서 설명하겠습니다.

결론부터 말씀드리자면 위의 스크린샷은 조작되었습니다. 만약 필자가 1조 원 이상을 보유한 자산가였다면, 지금처럼 블로그를 운영하는 것이 아니라 투자회사를 만들었을 것입니다. 그런데 다시 보고 또 봐도 위의 화면은 국민은행 인터넷뱅킹 사이트에서 캡처한 스크린샷입니다. 어떻게 웹 사이트 화면을 조작할 수 있었을까요?

위의 스크린샷이 포토샵을 활용한 사진은 절대로 아닙니다. 키보드의 Print Screen 키를 이용하여 화면을 캡쳐한 후 바로 업로드한 매우 깨끗한 스크린샷입니다. 물론 포토샵의 사진 자르기 기능은 이용하였습니다. 그 방법을 말씀드리자면, 필자는 구글 크롬의 개발자도구를 이용하여 위와 같은 결과를 만들 수 있었습니다. 구글 개발자도구 중에서도 엘레먼트 편집기를 사용하였습니다.

엘레먼트 편집기는 구글 크롬 개발자도구에서 가장 많이 사용되는 기능입니다. 엘레먼트 편집기를 사용하면 현재 자신이 보고 있는 웹페이지의 HTML과 CSS 속성들을 마음대로 바꿀 수 있습니다. 위의 경우에서처럼 어느 상황에서는 엘레먼트 편집기가 불순한 의도로 사용될 수도 있겠지만, 웹 개발에 있어서는 엘레먼트 편집기가 매우 긍정적인 결과를 가져올 수 있습니다. 자신이 바꾸고자 하는 속성을 FTP 업로드 없이, 실제 웹사이트에 주는 영향 없이 바로 확인할 수 있기 때문이죠.

엘레먼트 편집기 사용 방법

엘레먼트 편집기는 티스토리 블로거들이 스킨을 개발할 때 매우 자주 사용됩니다. 또한 이미 만들어져있는 스킨을 수정할 때에도 엘레먼트 편집기는 유용하게 사용될 수 있습니다. 인터넷을 돌아다니다보면 블로거들이 엘레먼트 편집기를 이용하여 스킨을 개발하는 모습이 종종 눈에 띕니다. 필자 역시도 엘레먼트 편집기를 사용하여 이 블로그의 스킨을 개발했었습니다.

엘레먼트 편집기를 사용하면 본인이 원하는 위치에 있는 HTML 요소를 삭제하거나 수정할 수 있습니다. 물론 CSS 속성을 변경하는 것도 가능합니다. 엘레먼트 편집기를 사용하는 방법은 매우 쉽기 때문에 초보자도 빠르게 따라할 수 있습니다.

먼저 아래의 스크린샷에서 볼 수 있는 것처럼 속성을 바꾸고 싶은 요소 위에서 오른쪽 마우스 버튼을 누릅니다. 그리고 난 후 나타나는 메뉴에서 [검사]를 클릭하면, 화면 하단에 엘레먼트 편집기가 나타납니다. 엘레먼트 편집기에서는 현재 출력되고 있는 모든 HTML 요소의 속성을 바꿀 수 있습니다. 만약, 엘레먼트 편집기가 아닌 다른 창이 나타난다면, 개발자도구 상단 탭 메뉴에서 [Elements] 탭을 선택하면 됩니다.

검사 메뉴를 통하여 개발자도구가 실행된 경우에는 현재 커서가 위치하고 있는 곳의 HTML 태그가 나타납니다. 따라서 수정하고 싶은 요소가 있을 때에는 꼭 해당 요소 위에서 오른쪽 마우스를 누르면 나오는 메뉴에서 [검사]를 이용하십시오.

이 글에서는 이 블로그의 제목을 바꿔보도록 하겠습니다. 텍스트를 바꾸는 작업은 매우 간단합니다. 그냥 엘레먼트 편집기에서 수정하고자 하는 HTML 요소를 더블클릭하면 HTML을 수정할 수 있습니다. 위의 국민은행 인터넷뱅킹 화면도 이와 같은 방법을 사용한 것입니다.

아래의 스크린샷은 블로그 제목을 마우스로 더블클릭하여 HTML 수정 기능이 활성화된 것을 보여줍니다. 그냥 수정하고자 하는 텍스트인 “Erzsamatory Weblog”를 더블클릭하면 됩니다. 태그를 수정하고 있다면 그 태그를 더블클릭하면 됩니다. 텍스트가 수정되고 있는 아래의 상태에서 그냥 텍스트만 입력할 수도 있고 다른 HTML 태그들을 넣을 수도 있습니다. 새로운 HTML을 넣을 수도 있다니 정말 놀랍지 않습니까?

위 스크린샷과 같이 원하는 영역에서 [검사]를 실행하면 해당 요소가 자동으로 선택된 상태로 개발자 도구가 열립니다. 이 상태에서 해당 태그에 포함되어 있는 텍스트를 변경하고 싶다면 그 텍스트를 더블클릭하여 수정하면 됩니다. 이 글에서는 블로그의 제목인 “Erzsamatory Weblog” 텍스트를 찾아 더블클릭합니다. 엘레먼트 편집기를 이용하면 텍스트뿐만 아니라 태그의 속성을 변경할 수도 있습니다.

아래의 스크린샷은 블로그의 타이틀 텍스트를 “적당히 정보가 많은 블로그”로 변경한 후의 블로그 모습입니다. 엘레먼트 편집기를 이용한 HTML의 변경 사항이 웹브라우저에 그대로 반영되었음을 확인할 수 있습니다. 이렇게 개발자가 수정한 요소를 화면에서 곧바로 볼 수 있으니 블로그 스킨을 개발할 때 개발자 도구가 매우 유용하게 사용될 수 있는 것입니다.

위에서는 단순히 HTML 태그 내부의 텍스트만 변경했지만, 위에서도 언급했듯이 엘레먼트 편집기는 HTML뿐만 아니라 CSS 속성도 변경할 수 있습니다. CSS 속성을 변경하면 실시간으로 웹페이지에 적용된 모습이 나타납니다. 이 때 반드시 명심해야 하는 점은 자신이 엘레먼트 편집기를 통해서 어떤 사이트의 속성을 변경한다고 해서 그 속성이 서버에 반영되는 것은 아니라는 점입니다. 엘레먼트 편집기는 웹 개발자가 사이트에 속성을 추가하거나 수정, 삭제하면서, 속성을 어떻게 설정해야 가장 이상적인 결과물을 가져오는지를 테스트할 때 주로 사용됩니다.

하지만 크롬의 개발자도구가 무조건 웹 개발자에게만 도움이 되는 것은 아닙니다. 앞에서도 설명했듯이 스킨을 만드는 블로거에게 많은 도움이 될 수도 있고, 위에서 봤던 은행 사이트 예시와 같이 친구들에게 자신의 잔고를 부풀릴 때 사용될 수도 있으며, 어떤 입력 양식에서 문자열 길이를 제한한 경우에는 이를 해제하여 더 많은 값을 입력할 수도 있게 해줍니다.

블로거에게 도움되는 기능은? CSS 속성 변경 기능

구글 크롬 개발자도구에서 블로거에게 가장 큰 도움이 되는 기능은 CSS 속성 변경 기능입니다. 왜냐하면 우리나라 블로거는 블로그 스킨에 대한 많은 관심을 많이 가지고 있는데, 스킨을 수정하거나 개발할 때에는 CSS 속성을 자주 수정해야 하는 필요가 있기 때문입니다.

필자도 역시 이전 블로그의 스킨을 개발할 때 개발자도구의 CSS 속성 변경 기능을 자주 사용했었습니다. CSS 속성 변경 기능의 가장 큰 장점은 스타일 속성을 변경했을 때 웹브라우저에서 변경된 내용을 바로 확인할 수 있다는 점입니다. 웹브라우저에서 바로 확인할 수 있는 기능은 HTML 편집 기능의 그것과 동일합니다.

개발자도구에서 CSS 속성을 변경하는 방법은 위에서 설명했었던 HTML 태그를 수정했던 방법과 같습니다. CSS(스타일) 속성을 변경하고자 하는 요소 위에서 오른쪽 마우스 버튼을 누른 후 나타나는 메뉴에서 [검사]를 클릭하면 됩니다. 개발자도구의 엘레먼트 편집기가 나타나는데, CSS 속성을 변경하거나 추가하기 위해서는 엘레먼트 편집기 창에서 오른쪽 영역에 있는 CSS 설정 옵션을 사용해야 합니다.

※ [검사] 메뉴를 클릭한다고 모든 요소가 정확하게 선택되는 것은 아닙니다. 만약 원하는 요소가 선택되지 않았다면 좌측의 엘레먼트 구조도에서 HTML 태그를 직접 선택한 후 해당 태그의 속성을 변경하면 됩니다.

위 스크린샷은 개발자도구의 CSS 속성 편집 기능을 이용하여 이 블로그의 상단 메뉴 색상을 바꾼 모습을 보여줍니다. 개발자 도구에서 CSS 속성을 수정하였을 경우에는 웹 브라우저를 통하여 변경된 속성의 결과물을 곧바로 확인할 수 있습니다.

이 기능은 블로거가 스킨을 개발할 때 매우 유용하게 사용될 수 있습니다. 그 이유는 스킨을 개발할 때에는 HTML 각 요소들의 위치들을 정확하게 설졍해주어야 하는 상황이 종종 발생하는데, 바로 이때 CSS 속성들을 조금씩 바꿔가면서 가장 마음에 드는 결과물을 찾을 수 있다면, 시간적으로도 비용적으로도 매우 효율적인 작업을 할 수 있기 때문입니다. 또한 어떤 블로그를 방문하였을 때, 해당 블로그의 스킨이 마음에 드는 경우에는 그 스킨의 구조 및 CSS를 직접 확인해볼 수도 있습니다. 소스보기보다 직관적이라 훨씬 유용합니다.

마무리 – 블로거에게 꼭 필요한 구글 크롬 개발자 도구

블로그 스킨을 구성하는 요소 중에서 CSS가 절반 이상을 차지하고 있다고 말할 수 있을 정도로 블로그 디자인에 있어서 CSS의 영향력은 매우 절대적입니다. 블로그 스킨 디자인에 조금이라도 관심이 있는 모든 분들에게 필자는 꼭 구글 크롬 엘레먼트 편집기를 사용해보라고 권유하고 싶습니다. 구글 크롬 개발자도구의 엘레먼트 편집기를 이용한다면 누구나 멋진 블로그 스킨을 만들 수 있습니다.

또한 다른 블로그의 스킨 구조를 연구할 때에도 구글 크롬 개발자 도구는 매우 유용하게 사용될 수 있습니다. 마음에 드는 블로그 스킨을 발견했다면 개발자 도구를 바로 이용해보세요!

타이틀 이미지: Mr Seb, Google Chrome (LCD screen), Flickr. CC BY 2.0.