버튼 하나로 기능 추가하기

오늘 할 일: 예쁜 화면을 움직이게 만들기

지난 장에서 우리는 자기소개 페이지에 스타일을 입혔습니다.

이제 화면은 제법 그럴듯합니다. 가운데 놓인 카드, 읽기 편한 글자, 둥근 버튼까지 생겼을 수 있습니다.

오늘은 그 버튼에 기능을 붙입니다.

버튼을 누르면 화면이 다크모드로 바뀌고, 다시 누르면 원래 화면으로 돌아오게 만들 겁니다.

오늘의 목표는 단순합니다.

• script.js 파일을 새로 만든다.

• index.html에 script.js를 연결한다.

• 버튼을 누르면 다크모드가 켜지고 꺼지게 만든다.

• 작동하지 않으면 콘솔에서 에러를 확인한다.

• 버튼 문구도 상황에 맞게 바꾼다.

코드를 외우지 않아도 됩니다. 오늘은 "화면이 반응하는 순간"만 확실히 경험하면 됩니다.

지금 폴더 상태 확인하기

먼저 Claude Code를 엽니다.

claude

그리고 현재 파일을 확인해 달라고 말합니다.

현재 폴더에 어떤 파일이 있는지 확인해줘.

지난 장까지 잘 따라왔다면 보통 이런 파일이 있어야 합니다.

index.html
style.css

오늘 여기에 하나를 더 추가합니다.

script.js

이 파일은 버튼을 눌렀을 때 화면이 어떻게 바뀔지 적어두는 곳입니다.

쉽게 말하면 이렇습니다.

• index.html: 무엇이 있는지

• style.css: 어떻게 보이는지

• script.js: 눌렀을 때 무엇을 할지

이 세 파일이 모이면 작은 웹페이지가 움직이기 시작합니다.

첫 번째 부탁: JavaScript 파일을 연결해줘

Claude에게 아래 문장을 그대로 입력하세요.

현재 index.html과 style.css로 만든 자기소개 페이지에 JavaScript 기능을 추가하고 싶어.

script.js 파일을 새로 만들고, index.html에서 이 파일을 불러오도록 연결해줘.
페이지 안에 다크모드 버튼이 없다면 버튼도 하나 추가해줘.
버튼 텍스트는 처음에 "다크모드 켜기"로 보여줘.

아직 복잡한 기능은 넣지 말고, 버튼을 누르면 콘솔에 "버튼 클릭됨"이라고 찍히는 정도로만 먼저 연결을 확인해줘.

여기서 일부러 바로 다크모드를 만들지 않았습니다.

먼저 확인할 것은 하나입니다.

"버튼과 script.js가 제대로 연결됐는가?"

연결이 안 된 상태에서 다크모드 코드를 아무리 고쳐도 화면은 바뀌지 않습니다. 그래서 첫 단계는 작게 갑니다.

변경 파일 목록 보기

Claude가 작업을 제안하면 이런 목록이 보일 수 있습니다.

Modified index.html
Created script.js

또는 버튼 위치를 정리하면서 CSS를 조금 수정한다면 이렇게 보일 수도 있습니다.

Modified index.html
Modified style.css
Created script.js

이번 단계에서 자연스러운 변경은 세 가지 안쪽입니다.

• index.html 수정

• script.js 생성

• 필요하다면 style.css 수정

괜찮다면 승인합니다.

y

만약 갑자기 많은 파일을 만들려고 한다면 승인하지 말고 이렇게 말하세요.

지금은 index.html, style.css, script.js 세 파일만 사용하고 싶어.
다른 파일은 만들지 말고 다시 제안해줘.

초보자일수록 파일 수를 작게 유지하는 것이 좋습니다. 파일이 적으면 문제도 빨리 찾을 수 있습니다.

브라우저에서 클릭 확인하기

이제 브라우저에서 index.html을 새로고침합니다.

• Windows: Ctrl + R

• Mac: Command + R

화면에 다크모드 켜기 버튼이 보이면 눌러봅니다.

겉으로는 아무 변화가 없을 수 있습니다. 괜찮습니다. 지금은 콘솔에 글자가 찍히는지만 확인하는 단계입니다.

브라우저 개발자 도구를 엽니다.

• Windows: F12 또는 Ctrl + Shift + J

• Mac: Command + Option + J

그리고 Console 탭을 봅니다.

버튼을 눌렀을 때 아래 문장이 보이면 성공입니다.

버튼 클릭됨

이 한 줄은 작지만 중요합니다.

버튼이 script.js와 대화하기 시작했다는 뜻입니다.

두 번째 부탁: 이제 다크모드를 켜고 꺼줘

연결이 확인됐다면 이제 진짜 기능을 넣습니다.

Claude에게 이렇게 요청하세요.

좋아. 이제 버튼을 누르면 다크모드가 켜지고, 다시 누르면 꺼지게 만들어줘.

원하는 동작은 다음과 같아.
- 버튼을 누르면 body에 dark-mode 클래스를 추가해줘.
- 다시 누르면 dark-mode 클래스를 제거해줘.
- 다크모드일 때는 배경을 어둡게, 카드는 어두운 회색 계열로 바꿔줘.
- 글자는 읽기 쉬운 밝은 색으로 바꿔줘.
- 기존 카드형 디자인은 유지해줘.
- JavaScript 코드는 script.js에 작성하고, 디자인 코드는 style.css에 작성해줘.

여기서 중요한 표현은 이것입니다.

body에 dark-mode 클래스를 추가해줘

어렵게 느껴질 수 있지만 원리는 간단합니다.

버튼을 누르면 페이지 전체에 dark-mode라는 스티커를 붙입니다. 다시 누르면 그 스티커를 떼어냅니다. CSS는 그 스티커가 붙어 있을 때의 색을 따로 정해둡니다.

즉, 다크모드는 "화면 전체를 새로 만드는 것"이 아니라 "상태에 따라 색을 바꾸는 것"입니다.

승인하고 새로고침하기

이번에는 보통 두 파일이 바뀝니다.

Modified style.css
Modified script.js

버튼 구조를 조금 손보면 index.html도 함께 바뀔 수 있습니다.

Modified index.html
Modified style.css
Modified script.js

예상 범위 안이라면 승인합니다.

y

그리고 브라우저를 새로고침합니다.

이제 버튼을 눌러보세요.

화면이 어두워지면 성공입니다.

다시 눌렀을 때 밝은 화면으로 돌아오면 더 성공입니다.

오늘의 핵심 장면은 바로 여기입니다.

정적인 페이지가 내 클릭에 반응하기 시작했습니다.

작동하지 않을 때: 콘솔을 본다

버튼을 눌렀는데 아무 일도 일어나지 않을 수 있습니다.

당황하지 않아도 됩니다. 이때 보는 곳은 코드가 아니라 콘솔입니다.

개발자 도구를 열고 Console 탭을 확인하세요.

자주 보이는 에러는 이런 모습입니다.

Uncaught TypeError: Cannot read properties of null

또는 이런 메시지가 보일 수 있습니다.

darkModeButton is not defined

뜻을 전부 해석할 필요는 없습니다.

지금은 에러 메시지를 "Claude에게 보여줄 증거"로 쓰면 됩니다.

콘솔에 나온 에러를 드래그해서 복사합니다. 그리고 Claude Code에 그대로 붙여 넣습니다.

브라우저 콘솔에 아래 에러가 나왔어.

Uncaught TypeError: Cannot read properties of null

현재 index.html, style.css, script.js 세 파일을 보고 다크모드가 작동하지 않는 이유를 찾아줘.
파일 구조를 크게 바꾸지 말고, 필요한 부분만 수정해줘.

에러 문장이 다르다면 그 문장만 바꿔 넣으면 됩니다.

핵심은 마지막 문장입니다.

현재 index.html, style.css, script.js 세 파일을 보고 다크모드가 작동하지 않는 이유를 찾아줘.

이렇게 말하면 Claude가 세 파일의 연결 상태를 함께 봅니다.

초보자가 직접 찾기 어려운 문제는 대개 이런 것들입니다.

• script.js가 HTML에 연결되지 않음

• 버튼의 이름과 JavaScript에서 찾는 이름이 다름

• JavaScript가 버튼보다 먼저 실행됨

• CSS에 dark-mode 스타일이 없음

이유를 외우지 않아도 됩니다. 에러를 복사하고, 현재 파일을 함께 봐 달라고 요청하면 됩니다.

세 번째 부탁: 버튼 문구도 바꿔줘

다크모드가 켜지고 꺼진다면 마지막으로 버튼 문구를 다듬습니다.

지금 버튼은 계속 다크모드 켜기라고 보일 수 있습니다.

하지만 다크모드가 이미 켜진 상태라면 버튼은 이렇게 말하는 편이 자연스럽습니다.

다크모드 끄기

Claude에게 요청합니다.

다크모드 버튼 문구도 상태에 따라 바뀌게 해줘.

- 밝은 화면일 때 버튼 문구: 다크모드 켜기
- 다크모드일 때 버튼 문구: 다크모드 끄기

기존 다크모드 기능은 유지하고, script.js에서 필요한 부분만 수정해줘.

이번 변경은 보통 script.js 하나만 수정하면 됩니다.

Modified script.js

확인하고 승인합니다.

y

브라우저를 새로고침한 뒤 다시 눌러봅니다.

• 처음에는 다크모드 켜기

• 누르면 어두운 화면으로 변경

• 버튼 문구는 다크모드 끄기

• 다시 누르면 밝은 화면으로 복귀

• 버튼 문구는 다시 다크모드 켜기

이 흐름이 완성되면 오늘 작업은 끝입니다.

마음에 들게 한 번 더 다듬기

기능이 작동한다면 이제 감각을 조금 얹어도 좋습니다.

다크모드 색이 너무 강하면 이렇게 말합니다.

다크모드 색이 너무 검게 느껴져.
완전한 검정보다는 부드러운 남색이나 짙은 회색 느낌으로 바꿔줘.
글자는 눈이 편한 밝은 회색으로 조정해줘.

버튼이 밋밋하면 이렇게 말합니다.

다크모드 상태에서 버튼도 자연스럽게 어울리도록 색을 다듬어줘.
마우스를 올렸을 때 살짝 밝아지는 효과도 추가해줘.

전환이 너무 딱딱하면 이렇게 말합니다.

밝은 화면과 다크모드가 바뀔 때 색이 부드럽게 전환되도록 CSS transition을 추가해줘.
너무 과한 애니메이션은 넣지 말고 자연스럽게만 만들어줘.

여기서도 한 번에 많이 바꾸지 않습니다.

색, 버튼, 전환 효과. 하나씩 요청하면 결과를 확인하기 쉽습니다.

오늘의 완성 기준

이번 장은 아래 다섯 가지가 되면 성공입니다.

• script.js 파일이 있다.

• index.html이 script.js를 불러온다.

• 버튼을 누르면 다크모드가 켜진다.

• 다시 누르면 밝은 화면으로 돌아온다.

• 버튼 문구가 다크모드 켜기/끄기로 바뀐다.

여기까지 왔다면 당신의 페이지는 더 이상 보기만 하는 페이지가 아닙니다.

사용자가 누르면 반응하는 페이지입니다.

웹페이지를 만드는 재미는 여기서 시작됩니다. 작은 버튼 하나가 화면의 분위기를 바꾸고, 그 순간 페이지는 조금 살아 있는 것처럼 느껴집니다.

마지막 저장 점검

마지막으로 Claude에게 정리를 부탁합니다.

현재 index.html, style.css, script.js를 확인해서 다크모드 기능에 불필요한 코드가 있으면 정리해줘.
화면 디자인과 동작은 유지하고, 초보자가 읽기 쉽게 간단한 구조로만 정돈해줘.

변경 파일을 확인합니다.

Modified script.js

또는 필요하다면 이렇게 보일 수 있습니다.

Modified style.css
Modified script.js

예상한 파일만 바뀐다면 승인합니다.

y

그리고 마지막으로 브라우저를 새로고침합니다.

버튼을 한 번 누르고, 다시 한 번 누릅니다.

밝은 화면과 어두운 화면이 자연스럽게 오가면 충분합니다.

다음 장에서는 Claude가 제안한 변경을 승인하기 전에 무엇을 봐야 하는지 정리합니다. 이제부터는 만드는 속도만큼이나, 안전하게 확인하는 습관이 중요해집니다.