HTML에서 JavaScript를 사용하여 대화형 웹 페이지를 만드는 방법

프론트엔드 개발의 핵심 기술인 HTML, CSS, 그리고 JavaScript는 각각 고유한 역할을 수행합니다. HTML은 웹 페이지의 구조를 정의하는 마크업 언어이며, CSS는 이러한 구조에 시각적인 스타일을 입히는 스타일 시트 언어입니다.

JavaScript는 객체 지향 프로그래밍 언어로서, 주로 웹 및 모바일 애플리케이션의 클라이언트 측 개발에 사용됩니다. 높은 유연성과 배우기 쉬운 구조 덕분에, 이 오픈 소스 동적 언어는 가장 널리 사용되는 프로그래밍 언어 중 하나로 자리매김했습니다.

HTML5와 CSS3만으로는 정적인 웹 사이트만 제작할 수 있습니다. 이러한 사이트에 사용자와 상호작용하는 동적인 기능을 추가하려면 브라우저가 이해할 수 있는 프로그래밍 언어, 즉 JavaScript를 활용해야 합니다.

본문에서는 HTML 문서에서 JavaScript를 효과적으로 사용하는 방법, HTML에 JavaScript 코드를 통합하는 여러 접근 방식, 그리고 두 언어의 결합을 극대화하는 모범 사례를 상세히 살펴보겠습니다.

HTML에서 JavaScript를 사용하는 핵심 이유

  • 인터랙티브 기능 추가: JavaScript를 사용하면 페이지 새로고침 없이도 사용자 입력이나 동작에 실시간으로 반응하는 웹 페이지를 만들 수 있습니다. 예를 들어, 클릭할 때마다 숫자가 증가하는 카운터나, 제출 버튼 클릭 시 피드백 메시지를 표시하는 기능을 구현할 수 있습니다.
  • 클라이언트 측 유효성 검사: JavaScript를 통해 사용자가 입력한 데이터를 웹 페이지에서 즉시 검증할 수 있습니다. 이메일 형식, 비밀번호 길이, 사용 가능한 문자 조합 등을 확인하여 사용자 경험을 향상시키고 서버 부담을 줄일 수 있습니다.
  • DOM 조작: JavaScript는 DOM(Document Object Model)을 통해 웹 페이지 콘텐츠를 동적으로 변경하는 강력한 기능을 제공합니다. 사용자 상호작용에 따라 페이지 내용을 실시간으로 업데이트할 수 있어, 더욱 풍부하고 반응적인 웹 경험을 제공합니다.
  • 브라우저 호환성: JavaScript는 대부분의 최신 웹 브라우저와 호환됩니다. 따라서 HTML, CSS, 그리고 JavaScript를 사용하여 개발한 웹 페이지는 다양한 브라우저에서 일관된 모습으로 작동합니다.

필수 사전 지식

  • HTML 기본 지식: 기본적인 HTML 태그를 이해하고 버튼, 폼 등을 HTML로 만들 수 있어야 합니다.
  • CSS 기본 지식: CSS의 id, 클래스, 요소 선택자 등 기본적인 개념을 이해해야 합니다.
  • 코드 편집기: VS Code, Atom과 같은 코드 편집기를 사용하거나, 온라인 JavaScript 컴파일러를 활용할 수 있습니다.

HTML에서 JavaScript 사용 방법

JavaScript 코드를 HTML 문서에 추가하는 방법은 크게 세 가지로 나눌 수 있습니다. 각각의 방법과 가장 적합한 상황을 자세히 알아보겠습니다.

#1. <script>와 </script> 태그 사이에 코드 삽입하기

이 방법은 HTML 파일과 JavaScript 코드를 같은 파일 안에 포함시키는 가장 기본적인 방법입니다. 먼저, 작업할 프로젝트 폴더를 생성하여 시작해 보겠습니다. 다음 명령어를 사용하여 폴더를 만들고 해당 폴더로 이동합니다.

mkdir javascript-html-playground
    cd javascript-html-playground

다음으로, 두 개의 파일, 즉 index.html과 style.css를 생성합니다.

index.html 파일에 다음의 기본적인 HTML 코드를 추가합니다.

<meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
    
    
        
            <label for="name">Name:</label>
            <input type="text" id="name" />
            <br />
            <label for="email">Email:</label>
            <input type="email" id="email" />
            <br />
            <label for="message">Message:</label>
            <textarea
                id="message"
                name="message"
                rows="5"
                cols="30"
                required
            ></textarea>
            <br />
            <input type="submit" value="Submit" />
        
    

style.css 파일에는 다음 CSS 코드를 추가합니다.

.form-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
    
      label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
      }
    
      input[type="text"],
      input[type="email"],
      textarea {
        display: block;
        margin-bottom: 10px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 8px;
      }
    
      input[type="submit"] {
        background-color: #4CAF50;
        color: white;
        padding: 5px 10px;
        border: none;
        border-radius: 2.5px;
        font-size: 8px;
        cursor: pointer;
      }
    
      input[type="submit"]:hover {
        background-color: #3e8e41;
      }

웹페이지를 브라우저에서 열면 다음과 같은 화면을 볼 수 있습니다.

이제 “제출” 버튼을 클릭했을 때 “제출됨”이라는 알림창을 표시하는 간단한 JavaScript 코드를 추가해 보겠습니다. 아래는 JavaScript가 추가된 HTML 코드입니다.

<meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
    
    
        
            <label for="name">Name:</label>
            <input type="text" id="name" />
            <br />
            <label for="email">Email:</label>
            <input type="email" id="email" />
            <br />
            <label for="message">Message:</label>
            <textarea
                id="message"
                name="message"
                rows="5"
                cols="30"
                required
            ></textarea>
            <br />
            <input type="submit" value="Submit" onclick="submitted()" />
        
    
        function submitted() {
            alert("submitted");
          }
    

이제 “제출” 버튼을 누르면 다음과 같은 알림창이 나타납니다.

<script>…</script> 태그 사이에 JavaScript 코드를 삽입하는 방법의 장점

  • 빠른 구현: 같은 파일 내에서 JavaScript 코드를 작성하고 참조할 수 있으므로 개발 시간을 절약할 수 있습니다.
  • 코드 가독성: <script> 태그를 사용하여 HTML 코드와 JavaScript 코드를 명확하게 구분할 수 있어 코드 가독성을 높이고 디버깅을 용이하게 합니다.

<script>…</script> 태그 사이에 JavaScript 코드를 삽입하는 방법의 단점

  • 코드 재사용 어려움: 애플리케이션에 여러 개의 폼이 있는 경우, 각 폼마다 별도의 JavaScript 코드를 작성해야 합니다.
  • 성능 저하 가능성: HTML 문서 내에 큰 코드 블록이 존재하면 웹 페이지 로딩 속도가 느려질 수 있습니다.

#2. HTML 내부에 직접 JavaScript 코드를 삽입하여 인라인 코드 사용하기

이번에는 <script>…</script> 태그를 사용하는 대신 JavaScript 코드를 HTML 코드 내에 직접 추가해 보겠습니다. 앞서 사용한 HTML 구조와 CSS 스타일시트(style.css)를 그대로 활용합니다.

<meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
    
    
        
            <label for="name">Name:</label>
            <input type="text" id="name" />
            <br />
            <label for="email">Email:</label>
            <input type="email" id="email" />
            <br />
            <label for="message">Message:</label>
            <textarea
                id="message"
                name="message"
                rows="5"
                cols="30"
                required
            ></textarea>
            <br />
            <input type="submit" value="Submit" onclick="alert('inline submit')" />
        
    

“제출” 버튼을 클릭하면 “inline submit” 메시지가 포함된 작은 창이 브라우저에 표시됩니다.

JavaScript를 인라인 코드로 추가하는 방법의 장점

  • 빠른 구현: HTML 파일과 JavaScript 코드를 하나의 파일에서 관리하므로 편리하고 신속하게 개발할 수 있습니다.
  • 소규모 애플리케이션에 적합: 상호작용이 많지 않은 작은 규모의 애플리케이션에 적합한 방법입니다.

JavaScript를 인라인 코드로 추가하는 방법의 단점

  • 코드 재사용성 부족: 애플리케이션 내에 여러 개의 폼이 있을 경우, 각 폼에 대한 JavaScript 코드를 개별적으로 작성해야 하므로 코드 재사용이 어렵습니다.
  • 성능 저하 가능성: HTML 문서 내에 JavaScript 코드가 많아지면 웹 페이지 로딩 속도가 느려질 수 있습니다.
  • 코드 가독성 저하: 코드베이스가 커질수록 HTML 코드와 JavaScript 코드가 혼재되어 가독성이 떨어질 수 있습니다.

#3. 외부 JavaScript 파일 생성

애플리케이션이 커짐에 따라 JavaScript 코드를 HTML 파일 내에 직접 포함하는 방식은 여러 문제점을 야기할 수 있습니다. HTML 파일이 복잡해지고, 웹 페이지 로딩 속도도 느려질 가능성이 큽니다.

이러한 문제를 해결하기 위해 JavaScript 코드를 별도의 외부 파일(script.js)로 분리하여 관리하는 것이 좋습니다.

다음은 HTML 파일에서 script.js 파일을 불러오는 방법입니다.

        <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>
    

아래는 외부 JavaScript 파일을 적용한 전체 HTML 코드입니다.

<meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
    <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>
    
    
        
            <label for="name">Name:</label>
            <input type="text" id="name" />
            <br />
            <label for="email">Email:</label>
            <input type="email" id="email" />
            <br />
            <label for="message">Message:</label>
            <textarea
                id="message"
                name="message"
                rows="5"
                cols="30"
                required
            ></textarea>
            <br />
            <input type="submit" value="Submit" />
        
    

이제 script.js 파일에 다음 JavaScript 코드를 추가합니다.

document.addEventListener("DOMContentLoaded", function() {
        const form = document.querySelector("form");
        form.addEventListener("submit", function(event) {
          event.preventDefault();
          alert("external JS sheet submit");
        });
      });

위의 JavaScript 코드는 다음과 같은 작업을 수행합니다.

  • DOMContentLoaded 이벤트 발생을 감지하는 이벤트 리스너를 설정합니다.
  • DOMContentLoaded 이벤트가 발생한 후 콜백 함수가 실행됩니다.
  • querySelector를 사용하여 폼 요소를 선택합니다.
  • 폼 제출 시 기본 동작(페이지 새로고침 또는 다른 페이지로 이동)을 막기 위해 event.preventDefault()를 호출합니다.
  • 폼 제출 이벤트가 발생하면 “external JS sheet submit” 메시지를 표시합니다.

이제 “제출” 버튼을 클릭하면 다음 이미지와 같은 알림창을 볼 수 있습니다.

HTML에서의 JavaScript: 모범 사례

  • 파일 크기 최소화: 파일 크기가 클수록 브라우저에 로딩하는 데 더 많은 시간이 소요됩니다. Minification은 소스 코드에서 불필요한 문자를 제거하여 파일 크기를 줄이는 기술입니다. Yahoo YUI Compressor, HTMLMinifier 등의 도구를 사용하여 코드 크기를 최적화할 수 있습니다.
  • 코드 정리 유지: 코드를 체계적으로 정리하면 가독성을 높이고 유지보수를 용이하게 할 수 있습니다. Prettier와 같은 코드 포맷팅 도구를 사용하여 코드를 일관되게 정리할 수 있습니다.
  • 외부 라이브러리 활용: 특정 기능을 구현하기 위해 처음부터 코드를 작성하는 대신, 외부 라이브러리를 활용하여 개발 시간을 단축할 수 있습니다. 단, 동일한 기능을 제공하는 여러 라이브러리를 사용하는 것은 피해야 합니다.
  • JavaScript 코드 위치 최적화: HTML 파일에 JavaScript 코드를 추가할 때, 가능하면 HTML 콘텐츠 뒤에 위치시키는 것이 좋습니다. 즉, <body> 태그를 닫기 전에 <script> 태그를 사용하여 JavaScript 코드를 추가하는 것이 좋습니다. 이렇게 하면 HTML 콘텐츠가 먼저 로딩되어 사용자 경험을 개선할 수 있습니다.

마무리

이제 HTML과 JavaScript를 함께 사용하여 더욱 풍부하고 인터랙티브한 웹 페이지를 만들 수 있게 되었습니다. 어떤 접근 방식을 선택할지는 개발하는 웹 애플리케이션의 특성에 따라 달라집니다. 작은 규모의 앱에는 인라인 코드가 적합할 수 있지만, 큰 규모의 앱에는 외부 JavaScript 파일을 사용하는 것이 좋습니다.

다양한 JavaScript 테이블 라이브러리를 활용하여 더욱 복잡하고 효율적인 웹 페이지를 만들어 보시기 바랍니다.