이 장에서는 크롬 개발자 도구를 활용하여 웹 요소를 찾고 수정하는 방법을 다룹니다. 요소 선택, 스타일 확인, 클래스명 찾기 등 실용적인 활용법을 배웁니다.

바이브 코딩을 하다 보면 반드시 마주하게 되는 순간이 있습니다. Code 탭이 만들어준 웹페이지에서 "이 버튼 색깔만 바꾸고 싶은데", "이 글자 크기를 조금 키우고 싶은데" 같은 생각이 들 때입니다. 물론 Code 탭에게 말해서 수정해도 되지만, 이럴 경우 몇 번이나 같은 요청을 해도 엉뚱한 곳을 고칠 때가 있습니다. "위에 그거"가 어디인지 Claude는 모르기 때문입니다. 이럴 때 크롬 개발자 도구를 사용할 수 있다면, 원하는 요소의 이름을 찾아서 정확히 말할 수 있습니다. 개발자가 아니어도, 최소한 이 도구를 사용해서 요소를 찾고 확인하는 방법은 알아두시면 바이브 코딩이 훨씬 수월해집니다.

1. 개발자 도구 열기

크롬 개발자 도구를 여는 방법은 여러 가지가 있습니다. 가장 쉬운 방법은 웹페이지에서 마우스 오른쪽 버튼을 클릭한 후 '검사'를 선택하는 것입니다.

키보드 단축키를 선호하신다면 F12를 누르거나, Windows에서는 Ctrl+Shift+I, Mac에서는 Cmd+Option+I를 누르면 됩니다. 개발자 도구가 열리면 화면이 두 부분으로 나뉘는데, 한쪽은 원래 웹페이지이고 다른 한쪽은 개발자 도구입니다.

처음 개발자 도구를 열면 복잡해 보이는 코드들 때문에 겁을 먹을 수 있습니다. 하지만 우리가 필요한 것은 이 중에서 극히 일부분입니다. 상단의 탭들 중에서 'Elements'(요소) 탭이 기본적으로 선택되어 있을 것입니다. 이 탭이 바로 우리가 주로 사용할 공간입니다.

2. 요소 선택하기

개발자 도구의 가장 강력한 기능 중 하나는 웹페이지의 특정 요소를 쉽게 찾을 수 있다는 것입니다. 개발자 도구 왼쪽 상단을 보면 마우스 커서 모양의 아이콘이 있습니다. 이것이 바로 '요소 선택' 도구입니다. 이 아이콘을 클릭하세요.

선택 모드가 켜지면 웹페이지 위에 마우스를 올릴 때마다 해당 요소가 하이라이트됩니다. 파란색이나 초록색으로 요소의 영역이 표시되는 것을 볼 수 있습니다. 수정하고 싶은 버튼이나 텍스트 위에 마우스를 올리고 클릭하면, 개발자 도구의 Elements 패널에서 해당 요소의 HTML 코드가 자동으로 선택됩니다.

이렇게 찾았다면 개발자도구의 상단에서는 HTML코드를, 하단에서는 적용되어 있는 CSS 코드와 파일명, 라인을 함께 알 수 있습니다. 8장 첫 절에서 네이버 로또 번호를 고쳐 봤던 바로 그 화면입니다.

3. 스타일 확인하기

Elements 패널 오른쪽에 하단을 보면 Styles 패널이 있습니다. 여기서는 선택한 요소에 적용된 모든 CSS 스타일을 볼 수 있습니다. 배경색, 글자 크기, 여백 등 모든 스타일 정보가 표시됩니다. 더 흥미로운 것은 이 값들을 실시간으로 수정해볼 수 있다는 점입니다.

예를 들어 background-color: blue;라고 되어 있다면, blue를 클릭해서 red로 바꿔보세요. 웹페이지에서 즉시 색이 바뀌는 것을 볼 수 있습니다. 만약 원하는 스타일이 없다면 빈 공간을 클릭해서 추가할 수도 있습니다. color라고 입력하고 엔터를 치고, red라고 입력하고 엔터를 치면 됩니다.

이것은 임시 변경이므로 페이지를 새로고침하면 원래대로 돌아갑니다. 파일이 바뀐 것이 아니라 지금 보고 있는 화면만 바뀐 것입니다. 하지만 이렇게 실험해보면서 원하는 스타일을 찾을 수 있습니다.

특히 바이브 코딩을 할 때 유용한 것이, 조화로운 글자 크기를 찾는 데 유용합니다. Claude는 화면상에 어울리는 폰트 크기를 눈으로 보고 찾아내지 못합니다. 단지 지정되어 있는 font-size를 보면서 유추할 뿐이죠. 여기서 font-size 값을 여러 번 바꿔 보세요. 크기를 바꾸면 글자가 커지거나 작아지는 것을 바로 확인할 수 있습니다. 그리고 원하는 값을 찾았다면 Code 탭에게 그 값으로 수정해달라고 얘기하세요.

hero-title 클래스의 font-size를 36px에서 42px로 바꿔줘.

"제목을 조금만 키워줘"보다 이 한 줄이 열 배 빠릅니다. 몇 번을 왔다 갔다 할 일이 한 번으로 끝납니다.

4. 클래스명과 ID 찾기

바이브 코딩에서 가장 중요한 것 중 하나는 수정하고 싶은 요소의 클래스명이나 ID를 정확히 아는 것입니다. Elements 패널에서 요소를 선택하면 <div class="card-container" id="main-card"> 같은 형태로 표시됩니다. 여기서 class는 클래스명, id는 아이디입니다. 8장 첫 절에서 본 선택자 표를 떠올리시면 됩니다.

클래스명은 여러 요소에 동일하게 적용될 수 있고, ID는 페이지에서 유일해야 합니다. Code 탭에게 수정을 요청할 때 "card-container 클래스의 배경색을 회색으로 바꿔줘" 또는 "main-card 아이디를 가진 요소의 테두리를 추가해줘"라고 구체적으로 요청할 수 있습니다.

때로는 요소에 여러 개의 클래스가 적용되어 있을 수 있습니다. class="btn btn-primary large"처럼 공백으로 구분된 여러 클래스가 있다면, 각각이 다른 스타일을 담당합니다. 이런 정보를 알면 더 정확한 수정 요청이 가능합니다. 어떤 클래스가 무엇을 맡는지 모르겠다면 Styles 패널에서 각 클래스 이름 옆에 적힌 속성을 보면 됩니다. 그것도 어렵다면 클래스 이름들을 그대로 복사해서 Code 탭에 "이 클래스들이 각각 무슨 역할인지 설명해줘"라고 물어보세요.

5. 콘솔 활용하기

Elements 탭 옆의 Console 탭도 유용합니다. 여기서는 JavaScript 코드를 직접 실행해볼 수 있습니다. 예를 들어 document.querySelector('.page-title').innerText = '새로운 제목'을 입력하고 엔터를 누르면 페이지의 제목이 즉시 바뀝니다. 이 책의 독자가 여기서 코드를 칠 일은 거의 없습니다.

대신 콘솔은 에러 메시지를 확인할 때 중요합니다. Code 탭이 만든 페이지에서 버튼이 눌리지 않거나 아무 반응이 없다면, 콘솔에 빨간색 에러 메시지가 표시될 것입니다. 이 에러 메시지를 그대로 복사해서 Code 탭에게 "브라우저 콘솔에 이런 에러가 나는데 고쳐줘"라고 붙여 넣으면 더 정확한 해결책을 받을 수 있습니다. 증상만 말하는 것보다 에러 메시지를 함께 주는 것이 한 번에 해결될 확률을 크게 올립니다.

개발자 도구는 처음에는 복잡해 보이지만, 요소 선택과 클래스명 찾기만 할 줄 알아도 바이브 코딩의 효율이 크게 올라갑니다. 웹페이지를 보면서 "저 부분을 파란색으로 수정하고 싶다"고 막연하게 생각하는 대신, "header-nav 클래스의 background-color를 #333으로 바꾸고 싶다"고 구체적으로 요청할 수 있게 되는 것입니다. 10장에서 다룰 검토 단계에서 이 도구가 가장 자주 쓰입니다.