개발자 도구(F12)
화면 뒤편에 브라우저가 적어 둔 기록을 열어 보는 점검구예요. 사장님도 F12 한 번으로 열 수 있고, "이상해요" 대신 증거를 보낼 수 있어요.
쉽게 말하면
천장에서 물이 새는데 기사님한테 "물이 새요"라고만 전화하면 언제 올지 몰라요. 그런데 점검구를 열어서 "두 번째 이음새에서 똑똑 떨어져요"라고 사진까지 보내면 그날 옵니다. 웹사이트에도 점검구가 있어요. F12 키가 그 뚜껑이에요. 열어 보면 화면 뒤에서 무엇이 실패했는지 브라우저가 적어 둔 기록이 그대로 나와요.
사장님이 고칠 필요는 없어요. 여는 것과 베껴서 보내는 것까지가 사장님 몫이에요. 그것만 해도 고치는 사람이 원인을 찾는 시간이 크게 줄어요.
고치는 사람은 사장님 컴퓨터를 볼 수 없어요. "어떤 브라우저세요?", "다시 해 보셨어요?" 하는 되묻기가 며칠 반복돼요.
어디서 끊겼는지 한 줄로 드러나요. 왕복 한 번으로 끝나는 경우가 많아요.
여는 법, 30초면 돼요
- 1윈도우에서 크롬이나 엣지를 켜고 F12를 눌러요. 화면 오른쪽이나 아래에 낯선 창이 붙어요. 그게 개발자 도구예요.
- 2F12가 안 먹으면 Ctrl + Shift + I를 눌러요. 노트북은 F12 자리가 음량 조절로 잡혀 있어서, Fn 키를 같이 눌러야 하는 기종이 있어요.
- 3맥은 Command + Option + I예요. 사파리는 설정에서 개발자용 메뉴를 먼저 켜야 나타나요.
- 4마우스만 쓰고 싶으면 문제되는 부분에 우클릭 → 검사를 눌러요. 그 부분이 선택된 상태로 열려서 찾기가 편해요.
닫는 것도 같은 키예요
F12를 다시 누르면 닫혀요. 창이 화면 절반을 먹어서 답답하면, 창 오른쪽 위 점 세 개 메뉴에서 아래쪽이나 별도 창으로 옮길 수 있어요. 무엇을 눌러도 사이트가 망가지지 않아요. 이 창은 보기와 임시 실험만 하고, 저장 버튼이 없어요.
다섯 칸만 알면 충분해요
위쪽에 탭이 여러 개 붙어 있어요. 이름이 영어라 겁이 나는데, 사장님이 실제로 쓸 건 다섯 개예요.
| 탭 이름 | 무엇이 보이나 | 언제 여나 |
|---|---|---|
| Console (콘솔) | 브라우저가 남긴 메모. 빨간 줄은 실패, 노란 줄은 주의 | "버튼을 눌러도 아무 일이 없어요" |
| Elements (요소) | 화면을 만든 재료. 글자·색·여백을 임시로 바꿔 볼 수 있어요 | "글자가 잘려요", "여백이 어긋났어요" |
| Network (네트워크) | 주고받은 파일 목록. 각각 크기와 걸린 시간이 나와요 | "사이트가 느려요", "사진이 안 떠요" |
| Application (저장용량) | 이 브라우저에 남아 있는 로그인 흔적과 저장값 | "로그아웃이 안 돼요", "옛 화면이 계속 떠요" |
| 기기 모드 | 화면을 휴대폰 크기로 줄여서 보기(Ctrl + Shift + M) | "제 폰에서만 깨져요" |
탭 이름이 한국어로 보이는 컴퓨터도 있어요. 브라우저 언어 설정 차이일 뿐이고, 순서와 위치는 같아요.
콘솔: 빨간 줄 한 줄이 지도예요
콘솔에는 이미 여러 줄이 쌓여 있을 거예요. 그중 대부분은 지금 문제와 관계없는 옛 기록이에요. 그래서 비우고 다시 재현하는 순서가 중요해요.
- 1Console 탭을 열고, 왼쪽 위 금지 표시 아이콘을 눌러 쌓인 줄을 다 비워요.
- 2문제되는 동작을 그대로 다시 해요. 버튼 누르기, 글 저장하기, 결제 시도하기 같은 것을요.
- 3방금 새로 생긴 빨간 줄을 화면 캡처해요. 줄 오른쪽 끝의 파일 이름과 숫자까지 함께 담아요. 그게 몇 번째 줄에서 멈췄는지를 가리켜요.
- 4그 캡처를 고치는 사람에게 보내요. 빨간 줄에 적힌 말을 사장님이 해석하고 싶으면 에러 메시지 읽기를 보세요.
콘솔에는 절대 코드를 붙여넣지 마세요
"이걸 콘솔에 붙여넣으면 유료 기능이 풀린다", "인증이 통과된다" 같은 안내를 받으면 예외 없이 사기예요. 콘솔은 내 계정으로 로그인된 상태에서 명령을 그대로 실행하는 자리라, 붙여넣는 순간 계정과 손님 정보까지 남에게 넘어갈 수 있어요. 브라우저가 콘솔에 경고 문구를 띄우는 이유가 이것 때문이에요.
네트워크: 느린 게 누구 탓인지 나와요
Network 탭은 열어 둔 뒤에 새로고침해야 채워져요. 열기 전에 오간 것은 안 잡혀요. 빈 목록을 보고 고장 났다고 오해하는 분이 많아요.
목록에서 볼 건 두 가지예요. 크기와 상태 번호요. 크기가 몇 MB인 사진 한 장이 사이트 전체를 느리게 만드는 경우가 제일 흔해요. 그건 사진 용량 줄이기로 대개 해결돼요.
| 상태 번호 | 뜻 | 보통 이런 상황 |
|---|---|---|
| 200 | 잘 주고받았어요 | 정상이에요. 대부분 이 번호예요 |
| 404 | 그런 파일이 없어요 | 사진 경로가 틀렸거나 파일을 지웠어요 |
| 401 / 403 | 권한이 없어요 | 로그인이 풀렸거나 연결한 키가 잘못됐어요 |
| 500 | 받는 쪽이 넘어졌어요 | 내 서버나 연결한 회사 쪽 문제예요. 내 화면 탓이 아니에요 |
| 취소·실패 표시 | 요청이 아예 막혔어요 | 광고 차단 확장 프로그램이나 보안 설정이 막은 경우가 많아요 |
목록 맨 아래에는 파일 개수와 전체 전송량이 나와요. "체감상 느리다"가 "첫 화면에 8MB"라는 숫자로 바뀌는 자리예요. 숫자가 되면 고칠 것도 정해져요. 더 파고들려면 사이트 속도를 보세요.
사장님이 실제로 겪는 장면
장면 1 · 외주 개발자가 말했다
“이쪽 컴퓨터에서는 재현이 안 돼요. F12 눌러서 콘솔 캡처 한 장 보내 주실 수 있을까요?”
귀찮게 하려는 게 아니에요. 브라우저 종류, 설치된 확장 프로그램, 인터넷 상태가 사람마다 달라서 사장님 화면에서만 나는 오류가 실제로 있어요. 캡처 한 장이 며칠짜리 왕복을 한 번으로 줄여요. 요청받기 전에 미리 보내면 더 좋아요.
장면 2 · 요소 탭에서 가격을 고쳤는데 원래대로 돌아갔다
“Elements에서 가격을 9,900원으로 고쳤는데, 새로고침하니까 다시 19,900원이에요.”
정상이에요. 요소 탭에서 바꾼 것은 내 화면에만 그린 낙서예요. 손님 화면도, 저장된 값도 안 바뀌어요. 그래서 마음껏 실험해도 안전하고, 반대로 진짜로 바꾸려면 편집 화면에서 고쳐야 해요. 실험은 여기서, 확정은 편집에서요.
자주 묻는 것
- Q. 제가 잘못 눌러서 사이트가 망가지지 않을까요?
- 안 망가져요. 이 창은 보기와 임시 실험만 하고 저장 버튼이 없어요. 새로고침하면 만진 것이 전부 사라져요. 유일하게 조심할 것은 콘솔에 남이 준 코드를 붙여넣는 것이고, 그건 잘못 누르는 실수가 아니라 속아서 하는 일이에요.
- Q. 손님도 이 창을 열 수 있나요? 그러면 제 코드가 다 보이는 건가요?
- 네, 누구나 열 수 있어요. 화면을 그리는 코드는 원래 손님 컴퓨터로 내려가서 그려지니까 숨길 수 없어요. 그래서 비밀은 애초에 화면에 두지 않는 것이 원칙이에요. 비밀키와 손님 명단은 서버 쪽에 두고, 화면에는 결과만 내려보내요.
- Q. 휴대폰에서만 깨지는데 폰에는 F12가 없어요.
- 컴퓨터에서 기기 모드(Ctrl + Shift + M)로 화면을 폰 크기만큼 줄여 보면 대부분 잡혀요. 다만 크기만 흉내 낸 것이라 실제 폰과 완전히 같지는 않아요. 손가락 터치나 폰 전용 기능은 결국 폰으로 확인해야 해요. 화면 크기 문제는 반응형과 같이 보면 좋아요.
- Q. 고쳤는데 옛 화면이 계속 떠요.
- 브라우저가 이전에 받은 파일을 보관해 두고 다시 쓰기 때문이에요. 개발자 도구를 열어 둔 상태에서 새로고침 버튼을 길게 누르면 "캐시 비우기 및 강력 새로고침" 같은 항목이 나와요. 그걸 누르면 새로 받아 와요.
- Q. 콘솔에 빨간 줄이 몇 개 있는데 사이트는 잘 돌아가요. 급한가요?
- 다 급하지는 않아요. 광고나 확장 프로그램이 내는 오류가 섞여 있어요. 구분하는 방법은 시크릿 창으로 같은 주소를 다시 열어 보는 거예요. 확장 프로그램이 꺼진 창이라, 여기서도 같은 빨간 줄이 나면 내 사이트 문제예요.
- Q. 고치는 사람에게 뭘 보내면 제일 좋아요?
- 네 가지예요. 무엇을 눌렀는지, 콘솔 캡처, 네트워크 탭 캡처, 그리고 주소창의 주소요. 여기에 "몇 시쯤이었는지"까지 적으면 기록을 뒤져 찾을 수 있어요. 외주로 맡기고 있다면 이 습관 하나가 기간과 비용을 줄여 줘요.
확인해 보세요
결제 버튼을 눌러도 아무 반응이 없어요. 가장 먼저 할 일은?
하나 더
Elements 탭에서 가격 글자를 100원으로 바꿨어요. 손님 화면은 어떻게 되나요?
직접 해보기
내가 만든 화면에서 F12를 눌러 보세요
스튜디오에서 만든 결과 화면을 열고 F12를 눌러 보세요. Console 탭에 빨간 줄이 없으면 지금은 실패한 것이 없다는 뜻이에요. 정상일 때의 모습을 한 번 봐 두면, 나중에 빨간 줄이 생겼을 때 바로 알아차려요.
스튜디오 열기더 깊이 (안 읽어도 괜찮아요)
왜 이름이 개발자 도구인가 · 브라우저 회사가 개발자를 위해 만들어 넣은 창이라 그래요. 그래서 처음 열면 낯선 말이 가득해요. 그런데 사장님에게 필요한 부분은 그중 극히 일부고, 그 일부의 역할은 딱 하나예요. 증거 수집이요. 나머지는 몰라도 아무 손해가 없어요.
느린 인터넷을 흉내 내 보기 · 네트워크 탭에는 속도를 일부러 낮춰서 보는 기능이 있어요. 지하철이나 신호가 약한 곳에서 들어온 손님이 어떤 화면을 보는지 미리 볼 수 있어요. 첫 화면이 몇 초씩 비어 있으면 손님은 기다려 주지 않고 나가요. 사무실 와이파이에서만 확인하면 이 문제를 영원히 못 봐요.
저장용량 탭이 로그인 문제를 푼다 · "로그아웃이 안 돼요", "자꾸 옛 계정으로 들어가요" 같은 증상은 브라우저에 남은 로그인 흔적 때문인 경우가 많아요. Application 탭에서 이 사이트의 저장값을 지우고 새로고침하면 손님이 처음 방문한 상태와 같아져요. 새로 만든 회원가입 흐름을 점검할 때도 이 방법으로 매번 새 손님이 되어 볼 수 있어요.
이것만 기억하세요
- ·F12를 누르면 화면 뒤편 기록이 열려요. 사장님도 열 수 있고, 눌러도 안 망가져요
- ·콘솔은 비우고, 문제 동작을 다시 하고, 새로 생긴 빨간 줄을 캡처해요
- ·네트워크 탭은 열어 둔 뒤 새로고침해야 채워져요. 크기와 상태 번호만 보면 돼요
- ·요소 탭에서 바꾼 것은 내 화면 낙서예요. 손님 화면은 안 바뀌어요
- ·콘솔에 남이 준 코드는 절대 붙여넣지 않아요. 계정이 넘어가요