Add JavaScript to your web page

김동현·2026년 3월 2일

mdn 학습 번역 - HTML

목록 보기

31/31

웹 페이지에 JavaScript 추가하기 (Add JavaScript to your web page)

자바스크립트에 대하여 (About JavaScript)

자바스크립트(JavaScript)는 웹페이지를 상호작용 가능하게(interactive) 만들기 위해 주로 클라이언트 측(client-side)에서 사용되는 프로그래밍 언어예요. 자바스크립트 없이도 멋진 웹페이지를 만들 수는 있지만, 자바스크립트를 사용하면 완전히 새로운 차원의 가능성이 열린답니다.

참고 (Note):
이 글에서는 자바스크립트가 동작하도록 하기 위해 필요한 'HTML 코드'에 대해 중점적으로 다룰 거예요. 자바스크립트 언어 자체를 배우고 싶다면 자바스크립트 기초(JavaScript basics) 문서를 먼저 보시는 걸 추천해요.

💡 강사의 팁: 만약 이미 C++이나 TypeScript 같은 다른 프로그래밍 언어에 대한 배경지식이 있으시다면, 기초보다는 바로 자바스크립트 안내서(JavaScript Guide)로 넘어가시는 걸 적극 추천합니다! 언어의 패러다임 차이만 빠르게 캐치하면 훨씬 속도감 있게 학습하실 수 있을 거예요.

HTML에서 자바스크립트를 실행하는 방법 (How to trigger JavaScript from HTML)

브라우저 내에서 자바스크립트는 혼자서 아무것도 하지 못해요. 여러분이 만든 HTML 웹페이지 안에서 실행되어야 하죠. HTML 내부에서 자바스크립트 코드를 호출하려면 <script> 요소가 필요합니다. script를 사용하는 방법은 두 가지가 있는데요, 외부 스크립트 파일을 연결할 것인지, 아니면 웹페이지 안에 스크립트를 직접 삽입할 것인지에 따라 달라져요.

외부 스크립트 연결하기 (Linking an external script)

보통 실무에서는 스크립트를 독립적인 .js 파일로 작성하게 될 거예요. 웹페이지에서 이 .js 스크립트를 실행하고 싶다면, 해당 스크립트 파일의 URL을 가리키는 src 속성과 함께 <script> 태그를 사용하면 됩니다.

<script src="path/to/my/script.js"></script>

💡 강사의 팁: React나 Next.js 같은 모던 프론트엔드 프레임워크를 다루기 전, 이렇게 순수 HTML에 외부 스크립트를 불러오는 원리를 정확히 아는 것은 매우 중요합니다. 나중에 웹팩(Webpack) 같은 번들러가 빌드한 결과물이 결국 이런 <script> 태그 형태로 HTML에 주입된다는 걸 이해하는 핵심 기반이 되거든요!

HTML 내부에 자바스크립트 작성하기 (Writing JavaScript within HTML)

src 속성을 사용하는 대신 <script> 태그 사이에 자바스크립트 코드를 직접 넣을 수도 있어요.

<script>
  console.log("Some code");
</script>

아주 적은 양의 자바스크립트만 필요할 때는 편리한 방법이지만, 자바스크립트를 별도의 파일로 분리해서 유지하면 아래와 같은 장점들이 있어 작업하기가 훨씬 수월해집니다.

개발 작업에 더 집중할 수 있어요. (관심사의 분리)
스스로 동작하는 독립적인 HTML을 작성할 수 있어요.
구조화된 자바스크립트 애플리케이션을 만들 수 있어요.

참고 (Note):
인라인 스크립트나 defer 또는 async 속성이 없는 외부 스크립트의 경우, 브라우저가 HTML을 파싱(해석)하다가 <script> 요소를 만나는 즉시 스크립트가 실행됩니다. 이 말은, 스크립트가 아직 파싱되지 않은 (문서 아래쪽에 있는) HTML 요소에는 접근할 수 없다는 뜻이에요. 그런 요소들에 접근하려면, 스크립트를 문서의 본문 맨 끝(</body> 닫는 태그 바로 앞)으로 옮기거나, 외부 스크립트에 defer 속성을 사용하는 것을 고려해야 합니다.

💡 강사의 팁: 주목하세요! 프론트엔드 개발자 기술 면접에서 브라우저 렌더링 과정과 함께 단골로 나오는 질문이 바로 이 defer와 async의 차이점입니다. 브라우저가 파싱을 멈추는지, 스크립트 실행 순서가 보장되는지를 명확히 구분해서 설명할 수 있도록 꼭 한 번 더 정리해 두세요!

스크립트를 접근성 있게 사용하기 (Use scripting accessibly)

소프트웨어 개발에서 웹 접근성(Accessibility)은 아주아주 중요한 문제입니다. 자바스크립트를 현명하게 사용하면 웹사이트의 접근성을 높일 수 있지만, 부주의하게 사용하면 오히려 접근성을 완전히 망쳐버리는 재앙이 될 수도 있어요. 자바스크립트가 여러분에게 유리하게 작용하도록 하려면, 자바스크립트를 추가할 때 지켜야 할 몇 가지 중요한 모범 사례들을 알아두는 것이 좋습니다.

💡 강사의 팁: 포트폴리오 프로젝트(예: 기술 블로그나 문서 번역 뷰어 등)를 만드실 때 이 접근성을 고려해서 코드를 짜보세요. 단순히 동작하는 코드를 넘어서 '사용자 경험과 웹 표준을 깊게 고민하는 개발자'라는 인상을 줄 수 있어 서류나 면접에서 엄청난 가산점이 됩니다.

모든 콘텐츠를 (구조화된) 텍스트로 제공하세요. 콘텐츠는 최대한 HTML에 의존하는 것이 좋습니다. 예를 들어, 자바스크립트로 멋진 진행률 표시줄(progress bar)을 구현했다면, HTML 내부에 그에 맞는 퍼센트(%) 텍스트도 함께 제공해야 해요. 마찬가지로, 드롭다운 메뉴도 링크(links) 항목들을 담은 순서 없는 목록(unordered lists)으로 올바르게 구조화되어야 합니다.
모든 기능을 키보드만으로도 접근할 수 있게 하세요.
- 사용자가 모든 컨트롤(예: 링크나 폼 입력창)을 논리적인 순서에 따라 Tab 키를 눌러 이동할 수 있도록 해야 합니다.
- 만약 포인터 이벤트(마우스 이벤트나 터치 이벤트 등)를 사용했다면, 키보드 이벤트로도 똑같이 동작할 수 있도록 기능을 중복으로 구현해 주세요.
- 마우스를 치워두고 오직 키보드만 사용해서 직접 사이트를 테스트해 보세요.
시간 제한을 설정하거나 추측하지 마세요. 스크린 리더로 콘텐츠를 읽거나 키보드로 내비게이션하는 데는 일반적인 예상보다 훨씬 더 많은 시간이 걸립니다. 사용자나 브라우저가 특정 프로세스(특히 리소스를 불러오는 것과 같은 비동기 작업)를 완료하는 데 시간이 얼마나 걸릴지 정확히 예측하기란 거의 불가능해요.
애니메이션은 깜빡임 없이 은은하고 짧게 유지하세요. 화면 깜빡임은 사용자를 짜증 나게 할 뿐만 아니라 광과민성 발작을 일으킬 수도 있습니다. 또한, 애니메이션이 2~3초 이상 지속된다면 사용자가 애니메이션을 취소할 수 있는 수단(버튼 등)을 제공해야 합니다.
사용자가 상호작용을 직접 시작하게 하세요. 즉, 사용자 동의 없이 콘텐츠를 자동으로 업데이트하거나, 페이지를 리디렉션하거나, 새로고침하지 마세요. 경고 없이 캐러셀(슬라이더)을 자동으로 넘기거나 팝업을 띄우는 것도 피해야 합니다.
자바스크립트가 없는 사용자를 위한 플랜 B를 준비하세요. 속도나 보안 문제 때문에 자바스크립트를 꺼두는 사람들도 있고, 네트워크 문제로 스크립트를 아예 다운로드하지 못하는 경우도 종종 발생합니다. 게다가 서드파티 스크립트(광고, 추적 스크립트, 브라우저 확장 프로그램 등)가 여러분이 정성껏 작성한 스크립트를 망가뜨릴 수도 있어요.
- 최소한 <noscript> 태그를 활용해 짧은 안내 메시지라도 남겨주세요. 예: <noscript>이 사이트를 이용하려면 자바스크립트를 활성화해주세요.</noscript>
- 가장 이상적인 방법은, 자바스크립트 기능이 없더라도 HTML과 서버 사이드 스크립트를 활용해 가능하면 동일한 기능을 할 수 있도록 모방해 두는 것입니다.
- 단순한 시각적 효과만을 원한다면 자바스크립트보다 CSS를 사용하는 것이 더 직관적이고 훌륭하게 작동할 때가 많아요.
- 거의 모든 사람들이 자바스크립트를 켜두고 있다고 해서, 그것이 접근성 없는 스크립트를 대충 작성해도 된다는 핑계가 될 수는 없습니다.