바로 14 자바스크립트를 더해서 기능 추가하기

이제 자바스크립트를 이해할 차례입니다. 자바스크립트를 설명한 글을 보면 늘 ‘동적인 웹사이트를 만들 때 사용하는 기술’이라는 표현이 등장합니다. 이제 이 개념을 자기소개 페이지에 직접 적용하며 이해해볼 차례입니다. 자바스크립트는 흔히 웹사이트에서 볼 수 있는 기능이 있는 버튼을 생각하면 됩니다. 예를 들어 메뉴를 누르면 아래로 주르륵 펼쳐지는 드롭다운 메뉴, 라이트 모드와 다크 모드를 전환할 수 있는 버튼 등이 있습니다. 그 외에도 사용자가 아이디나 비밀번호를 입력할 때 양식에 맞게 입력했는지 검사하는 기능도 자바스크립트로 구현할 수 있습니다. 그럼 자기소개 페이지에 몇 가지 기능을 추가하면서 자바스크립트가 무엇인지 이해해봅시다.

1. 커서에게 자기소개 페이지에 다크 모드, 라이트 모드로 전환하는 버튼을 추가하고, 이것을 눌렀을 때 동작하게 해달라고 하겠습니다.

프롬프트

다크 모드, 라이트 모드로 전환하는 버튼과 기능을 추가해줘.

AI 답변

CSS에 다크 모드 스타일 추가 중입니다. ...생략... HTML에 다크 모드 토글 버튼 추가 중입니다. ...생략... JavaScript 파일 생성 및 모드 전환 로직 구현 중입니다.

그러면 커서가 CSS, HTML을 수정한 뒤, 자바스크립트로 로직이라는 것을 작성합니다. CSS, HTML 수정은 자연스럽게 이뤄집니다. 앞에서 다크 모드, 라이트 모드로 전환하는 버튼을 추가한 적이 없기 때문이죠. 버튼 뼈대는 HTML로 작성해야 하고, 버튼을 꾸며야 하니 CSS를 작성하는 겁니다. 그렇게 뼈대와 옷을 입히고 버튼을 눌렀을 때의 모드 변환 기능을 자바스크립트로 구현하는 겁니다. 이 과정을 이해해야 자바스크립트에 대한 감을 잡을 수 있습니다.

1. 결과를 살펴보면 잘 동작합니다. 보통 오른쪽 위에 모드 전환 버튼을 만들어주는데, 버튼을 누르면 모드 전환이 잘 될 겁니다.

   

2. 앞으로 여러분이 코드를 볼 일은 거의 없겠지만, 도대체 자바스크립트가 무엇을 했길래 이런 기능이 구현되었는지 알아보기 위해 script.js와 같이 .js로 작성한 파일을 눌러 확인해봅시다.

   

코드를 자세히 보면 테마 불러오기와 같은 주석과 함께 코드가 작성되어 있습니다. 이처럼 자바스크립트는 버튼을 누르는 등의 사용자 동작에 대응하는 코드를 구성합니다. 바이브 코딩 시대가 되면서 이렇게 기술을 분리해서 웹사이트를 만들어보는 과정이 아주 쉬워졌습니다. 에이전트가 요구 사항에 맞춰서 모든 기술을 종합하여 사이트를 만들어주니까요. 하지만 우리는 웹 기술이 무엇이고 어떤 역할을 하는지 알아야 합니다. 그래야 제대로 된 지시를 할 수 있습니다. 이 과정을 통해 HTML, CSS, 자바스크립트의 역할을 잘 이해했으리라 생각합니다.

NOTE

주석이란 코드를 설명하는 문장을 말합니다. 코드 작동에는 영향을 주지 않습니다. // 또는 #으로 시작하는 경우가 많습니다. AI가 만든 코드를 이해하고 싶다면 이 주석을 잘 참고해보세요.

바로 핵심 요약

• HTML은 텍스트, 이미지 등 웹사이트의 뼈대와 내용을 담당합니다. CSS는 그 뼈대에 옷을 입혀 디자인을 예쁘게 꾸며줍니다. 자바스크립트는 웹사이트에 움직임이나 기능을 추가하는 역할을 합니다.
• HTML은 단순히 화면에 글자를 보여주는 것을 넘어, 과 같은 요소를 사용해 정보에 의미를 부여합니다. 이렇게 구조를 잘 잡으면 구글이나 네이버 같은 검색 엔진이 중요한 정보를 쉽게 찾을 수 있어 검색 엔진 최적화(SEO)에 도움이 됩니다.
• 바이브 코딩 시대에는 복잡한 코드를 직접 짤 필요는 없습니다. 하지만 이 세 가지 기술이 각각 어떤 역할을 하는지 이해하고 있어야 커서에게 원하는 사항을 명확하게 지시할 수 있습니다.