크롬 개발자 도구
8. 크롬 개발자 도구
바이브 코딩을 하다 보면 반드시 마주치게 되는 순간이 있습니다. Claude Code가 만들어준 웹페이지에서 "이 버튼 색깔만 바꾸고 싶은데", "이 글자 크기를 조금 키우고 싶은데" 같은 생각이 들 때입니다. 물론 Claude Code에게 질문해서 수정해도 되지만, 이럴 경우 몇 번이나 같은 질문을 해도 수정을 못할 때가 있습니다. 이럴 때 크롬 개발자 도구를 사용할 수 있다면, 원하는 요소를 찾아서 수정할 수 있습니다. 개발자가 아니어도, 최소한 이 도구를 사용해서 요소를 찾고 확인하는 방법은 알아두시면 바이브 코딩이 훨씬 수월해집니다.
1. 개발자 도구 열기
크롬 개발자 도구를 여는 방법은 여러 가지가 있습니다. 가장 쉬운 방법은 웹페이지에서 마우스 오른쪽 버튼을 클릭한 후 '검사'를 선택하는 것입니다.
키보드 단축키를 선호하신다면 F12를 누르거나, Windows에서는 Ctrl+Shift+I, Mac에서는 Cmd+Option+I를 누르면 됩니다. 개발자 도구가 열리면 화면이 두 부분으로 나뉘는데, 한쪽은 원래 웹페이지이고 다른 한쪽은 개발자 도구입니다.
처음 개발자 도구를 열면 복잡해 보이는 코드들 때문에 겁을 먹을 수 있습니다. 하지만 우리가 필요한 것은 이 중에서 극히 일부분입니다. 상단의 탭들 중에서 'Elements'(요소) 탭이 기본적으로 선택되어 있을 것입니다. 이 탭이 바로 우리가 주로 사용할 공간입니다.
2. 요소 선택하기
개발자 도구의 가장 강력한 기능 중 하나는 웹페이지의 특정 요소를 쉽게 찾을 수 있다는 것입니다. 개발자 도구 왼쪽 상단을 보면 마우스 커서 모양의 아이콘이 있습니다. 이것이 바로 '요소 선택' 도구입니다. 이 아이콘을 클릭하세요.
선택 모드가 켜지면 웹페이지 위에 마우스를 올릴 때마다 해당 요소가 하이라이트됩니다. 파란색이나 초록색으로 요소의 영역이 표시되는 것을 볼 수 있습니다. 수정하고 싶은 버튼이나 텍스트 위에 마우스를 올리고 클릭하면, 개발자 도구의 Elements 패널에서 해당 요소의 HTML 코드가 자동으로 선택됩니다.
이렇게 찾았다면 개발자도구의 상단에서는 HTML코드를, 하단에서는 적용되어 있는 CSS 코드와 파일명, 라인을 함께 알 수 있습니다.
3. 스타일 확인하기
Elements 패널 오른쪽에 하단을 보면 Styles 패널이 있습니다. 여기서는 선택한 요소에 적용된 모든 CSS 스타일을 볼 수 있습니다. 배경색, 글자 크기, 여백 등 모든 스타일 정보가 표시됩니다. 더 흥미로운 것은 이 값들을 실시간으로 수정해볼 수 있다는 점입니다.
예를 들어 background-color: blue;라고 되어 있다면, blue를 클릭해서 red로 바꿔보세요. 웹페이지에서 즉시 색이 바뀌는 것을 볼 수 있습니다. 만약 원하는 스타일이 없다면 빈 공간을 클릭해서 추가를 할 수 도 있습니다.
여기에 color: red라고 입력하겠습니다. color라고 입력하고 엔터를 치고, red라고 입력하고 엔터를 쳤습니다.
이것은 임시 변경이므로 페이지를 새로고침하면 원래대로 돌아갑니다. 하지만 이렇게 실험해보면서 원하는 스타일을 찾을 수 있습니다.
특히 바이브 코딩을 할 때 유용한 것이, 조화로운 글자 크기를 찾는데 유용합니다. Claude Code는 화면상에 어울리는 폰트 크기를 찾아내기가 매우 어렵습니다. 단지 지정되어 있는 font-size를 보면서 유추할 뿐이죠. 여기서 font-size와 같은 값들을 수정해보세요. font-size 값을 수정하면 됩니다. 크기를 바꾸면 글자가 커지거나 작아지는 것을 바로 확인할 수 있습니다. 그리고 원하는 값을 찾았다면 Claude Code에게 그 값으로 수정해달라고 얘기하세요.
4. 클래스명과 ID 찾기
바이브 코딩에서 가장 중요한 것 중 하나는 수정하고 싶은 요소의 클래스명이나 ID를 정확히 아는 것입니다. Elements 패널에서 요소를 선택하면 <div class="card-container" id="main-card"> 같은 형태로 표시됩니다. 여기서 class는 클래스명, id는 아이디입니다.
클래스명은 여러 요소에 동일하게 적용될 수 있고, ID는 페이지에서 유일해야 합니다. Claude Code에게 수정을 요청할 때 "card-container 클래스의 배경색을 회색으로 바꿔줘" 또는 "main-card 아이디를 가진 요소의 테두리를 추가해줘"라고 구체적으로 요청할 수 있습니다.
때로는 요소에 여러 개의 클래스가 적용되어 있을 수 있습니다. class="btn btn-primary large"처럼 공백으로 구분된 여러 클래스가 있다면, 각각이 다른 스타일을 담당합니다. 이런 정보를 알면 더 정확한 수정 요청이 가능합니다.
8. 콘솔 활용하기
Elements 탭 옆의 Console 탭도 유용합니다. 여기서는 JavaScript 코드를 직접 실행해볼 수 있습니다. 예를 들어 document.querySelector('.page-title').innerText = '새로운 제목'을 입력하고 엔터를 누르면 페이지의 제목이 즉시 바뀝니다.
콘솔은 에러 메시지를 확인할 때도 중요합니다. Claude Code가 만든 코드가 제대로 작동하지 않는다면, 콘솔에 빨간색 에러 메시지가 표시될 것입니다. 이 에러 메시지를 복사해서 Claude Code에게 "이런 에러가 발생하는데 수정해줘"라고 요청하면 더 정확한 해결책을 받을 수 있습니다.
개발자 도구는 처음에는 복잡해 보이지만, 요소 선택과 클래스명 찾기만 할 줄 알아도 바이브 코딩의 효율이 크게 올라갑니다. 웹페이지를 보면서 "저 부분을 파란색으로 수정하고 싶다"고 막연하게 생각하는 대신, "header-nav 클래스의 background-color를 #333으로 바꾸고 싶다"고 구체적으로 요청할 수 있게 되는 것입니다. 이것이 바로 개발자 도구가 주는 힘입니다.