홈페이지를 제작하거나 좋은 웹사이트를 보다 보면 한 번쯤 F12 키를 눌러본 경험이 있을 것입니다.
하지만 대부분은 검은 화면과 영어, 복잡한 코드가 나타나는 순간 바로 창을 닫게 됩니다.
저 역시 처음에는 그랬었습니다.
“이걸 어떻게 보는 거지?”
“개발자가 아니면 사용할 수 없는 도구 아닌가?”
라고 생각했었습니다.
하지만 홈페이지 제작과 블로그를 운영하면서 조금씩 사용해 보니, 모든 기능을 알 필요는 없다는 것을 알게 되었습니다.
HTML이나 CSS를 직접 작성하지 않더라도 몇 가지 기능만 알아두면 홈페이지를 분석하거나 디자인를 참고하는 데 큰 도움이 되었습니다.
이번 글에서는 개발자가 아닌 디자이너, 블로거, 홈페이지 운영자도 바로 활용할 수 있는 F12 사용법만 골라 소개해 드리겠습니다.
F12란?
F12는 크롬 개발자 도구(Chrome DevTools)를 실행하는 단축키입니다.
웹사이트의 구조와 스타일, 이미지, 네트워크, 성능 등을 분석할 수 있는 도구이며, 구글 크롬에 기본으로 포함되어 있습니다.
별도의 프로그램을 설치할 필요도 없습니다.
처음 실행하면 복잡해 보이지만, 실제로 자주 사용하는 메뉴는 몇 개 되지 않습니다.
오늘 소개하는 내용만 익혀도 홈페이지를 보는 시각이 달라질 것입니다.
언제 사용하면 좋을까요?
F12는 개발자만 사용하는 기능이라고 생각하기 쉽지만 실제로는 다양한 상황에서 활용할 수 있습니다.
예를 들어
- 홈페이지 제작
- 상세페이지 제작
- 블로그 운영
- SEO 분석
- 디자인 레퍼런스 수집
- 경쟁사 분석
등에서 매우 유용합니다.
가장 먼저 익혀야 할 기능
Elements
가장 많이 사용하는 메뉴입니다.
홈페이지를 구성하는 요소를 확인할 수 있습니다.
하지만 HTML을 공부할 필요는 없습니다.
디자이너라면 아래 정도만 보면 충분합니다.
- 버튼이 어떤 영역인지
- 이미지가 어떻게 들어가는지
- 제목이 어디인지
- 메뉴가 어떻게 구성되는지
복잡한 코드는 무시해도 됩니다.
처음에는 구조를 구경한다는 느낌으로만 사용해도 충분합니다.
마우스로 선택하기
F12를 실행하면 왼쪽 상단에 화살표 모양 아이콘이 있습니다.
이 버튼을 누른 후 홈페이지의 버튼이나 이미지를 클릭하면 해당 영역이 자동으로 선택됩니다.
이 기능 하나만 익혀도
“이 버튼은 어디에서 만들어졌을까?”
정도는 쉽게 확인할 수 있습니다.
저도 가장 많이 사용하는 기능입니다.
CSS를 몰라도 보는 방법
HTML이나 CSS를 모른다고 해서 개발자 도구를 사용할 수 없는 것은 아닙니다.
오히려 아래 정도만 보면 충분합니다.
색상(Color)
오른쪽 Style 영역에는 색상이 표시됩니다.
브랜드 컬러를 참고할 때 도움이 됩니다.
물론 ColorZilla가 더 편하지만
가끔 여러 색상이 어떻게 구성되는지 함께 보고 싶을 때 사용합니다.
폰트(Font)
글씨 크기,
굵기,
간격 등을 확인할 수 있습니다.
WhatFont보다 조금 더 자세한 정보가 필요한 경우 활용합니다.
여백(Margin / Padding)
처음에는 가장 어려운 부분입니다.
하지만 아래 정도만 이해하면 됩니다.
- Margin = 요소와 요소 사이의 거리
- Padding = 박스 안쪽 여백
홈페이지가 왜 깔끔해 보이는지 이해하는 데 가장 도움이 되었던 부분이기도 합니다.
예전에는 “디자인 감각”이라고 생각했던 것이 사실은 여백 차이라는 것을 많이 느꼈었습니다.
이미지 크기 확인하기
이미지를 클릭하면
- 크기
- 주소
- 파일명
등을 확인할 수 있습니다.
홈페이지 제작을 하다 보면
“이 배너는 어느 정도 크기로 만들었을까?”
궁금한 경우가 많은데 참고하기 좋습니다.
버튼 스타일 확인하기
CTA 버튼을 선택하면
- 배경색
- 테두리
- 그림자
- 모서리 둥글기
등도 함께 확인할 수 있습니다.
CSS를 모두 이해할 필요는 없습니다.
그냥
“이 버튼은 이런 스타일을 사용했구나.”
정도만 참고해도 디자인 공부에는 충분했습니다.
반응형 테스트
F12에서 가장 추천하는 기능입니다.
화면 상단의 휴대폰 모양 아이콘을 클릭하면 모바일 화면으로 전환됩니다.
이 기능은 Window Resizer보다 조금 더 실제 모바일 화면에 가깝게 확인할 수 있습니다.
다양한 기기를 선택할 수도 있습니다.
예를 들어
- iPhone
- Galaxy
- iPad
등 여러 화면을 확인할 수 있습니다.
홈페이지 제작을 한다면 꼭 익혀두는 것을 추천합니다.
Network는 언제 사용할까요?
처음에는 사용하지 않아도 됩니다.
다만 한 가지는 알아두면 좋습니다.
홈페이지가 느린 경우
이미지가 너무 큰지,
파일이 많이 로딩되는지
확인할 수 있습니다.
나중에 홈페이지 속도를 개선할 때 도움이 됩니다.
개발자가 아니면 Console은 볼 필요 없습니다.
처음 F12를 열면 Console이 가장 어려워 보입니다.
빨간 글씨도 나오고 영어도 많이 표시됩니다.
하지만 홈페이지 제작이나 디자인 작업을 하는 수준이라면 크게 신경 쓰지 않아도 됩니다.
JavaScript 오류를 확인하는 공간이므로
개발 작업을 하지 않는다면 거의 사용할 일이 없습니다.
저도 특별한 문제가 생긴 경우가 아니라면 Console은 거의 열지 않습니다.
실무에서 가장 많이 사용하는 기능
제가 실제로 자주 사용하는 순서를 소개하면 아래와 같습니다.
- 모바일 화면 확인
- 버튼 선택
- 이미지 크기 확인
- 여백 확인
- 폰트 확인
- 색상 확인
생각보다 이것만 사용해도 충분했습니다.
나머지 기능은 프로젝트를 진행하면서 하나씩 익혀도 늦지 않습니다.
F12보다 쉬운 크롬 확장 프로그램도 있습니다.
사실 저는 모든 작업을 F12로 하지는 않습니다.
목적에 따라 더 편한 확장 프로그램을 함께 사용하고 있습니다.
예를 들면
- WhatFont → 폰트 확인
- ColorZilla → 색상 추출
- CSS Peeper → 버튼과 여백 분석
- Page Ruler → 크기 측정
- Wappalyzer → 홈페이지 제작 기술 확인
- Detailed SEO Extension → SEO 분석
- Similarweb → 경쟁사 분석
이 도구들은 F12보다 사용하기 쉬워서 초보자에게도 추천합니다.
실무 활용 예시
좋은 홈페이지를 발견하면 저는 먼저 Similarweb으로 방문자 규모와 유입 경로를 확인합니다.
그다음 Wappalyzer로 어떤 플랫폼으로 제작되었는지 분석하고, Detailed SEO Extension으로 제목과 메타 정보를 점검합니다.
이후 F12를 열어 모바일 화면으로 전환한 뒤 버튼과 카드 UI, 콘텐츠 간격을 살펴봅니다.
필요한 경우 CSS Peeper와 Page Ruler를 함께 사용해 여백과 크기를 조금 더 자세히 확인합니다.
예전에는 예쁜 디자인만 저장했었는데, 지금은 왜 보기 편한지, 왜 사용하기 쉬운지까지 함께 분석하는 습관이 생겼습니다.
경험 나눔
처음 F12를 눌렀을 때는 솔직히 아무것도 이해하지 못했었습니다.
검은 화면에 영어와 코드가 가득했고, 괜히 잘못 건드리면 홈페이지가 망가질 것 같은 느낌도 들었습니다.
하지만 하나씩 사용해 보면서 생각이 달라졌습니다.
모든 기능을 이해하려고 하기보다 내 작업에 필요한 기능만 익히면 충분하다는 것을 알게 되었습니다.
특히 모바일 화면을 확인하거나 버튼의 여백을 살펴보는 기능은 홈페이지 제작을 하면서 정말 자주 사용하게 되었습니다.
지금도 개발자가 사용하는 수준까지는 아니지만, F12를 두려워하지 않게 된 것만으로도 홈페이지를 바라보는 시야가 훨씬 넓어졌다고 느끼고 있습니다.
마무리
크롬 개발자 도구(F12)는 개발자만 사용하는 프로그램이 아닙니다.
홈페이지를 제작하거나 블로그를 운영하는 사람이라면 웹사이트를 이해하는 가장 좋은 공부 도구가 될 수 있습니다.
처음부터 HTML과 CSS를 모두 이해하려고 하기보다, 모바일 화면 확인과 버튼 선택처럼 실무에서 자주 사용하는 기능부터 익혀보시길 추천드립니다.
작은 기능 하나를 사용할 수 있게 되는 것만으로도 좋은 홈페이지를 분석하는 방법이 달라지고, 디자인를 보는 시각도 조금씩 넓어질 것입니다.
