HTML 이미지·동영상 넣는 방법과 alt 속성이 중요한 이유

HTML 이미지·동영상 넣는 방법과 alt 속성이 중요한 이유

지난 글에서는 header, nav, main, section, footer 같은 시맨틱 태그로 웹페이지의 구조를 의미 있게 나누는 방법을 알아보았습니다. 이번에는 글자만으로는 전달하기 어려운 정보를 보여주는 이미지와 동영상을 다뤄보겠습니다. 사진 한 장, 짧은 영상 하나가 긴 설명보다 훨씬 많은 것을 전달할 때가 많습니다. 오늘은 이미지와 동영상을 넣는 기본 방법부터 파일 경로 지정, 유튜브 영상 삽입, 그리고 많은 초보자가 대수롭지 않게 넘기는 alt 속성이 왜 중요한지까지 꼼꼼하게 정리해 보겠습니다.

1. 이미지 넣기의 기본 – img 태그

웹페이지에 이미지를 넣을 때는 <img> 태그를 사용합니다. img 태그는 감쌀 내용이 없기 때문에 닫는 태그 없이 단독으로 작성합니다.

<img src="images/coffee.jpg" alt="하얀 컵에 담긴 따뜻한 아메리카노" width="400" height="300">

• src : Source의 약자로, 불러올 이미지 파일의 경로입니다. 반드시 필요한 속성입니다.
• alt : Alternative text(대체 텍스트)의 약자로, 이미지를 설명하는 글입니다. 이 글의 핵심 주제이며 뒤에서 자세히 다룹니다.
• width / height : 이미지의 가로·세로 크기를 픽셀 단위로 지정합니다.

width와 height는 생략해도 이미지가 표시되지만, 미리 적어 두는 것이 좋습니다. 브라우저가 이미지를 다 불러오기 전에 그 크기만큼 자리를 확보해 두기 때문에, 페이지를 읽는 도중 이미지가 뒤늦게 나타나면서 글이 아래로 밀려나는 현상을 막을 수 있습니다. 둘 중 하나만 지정하면 나머지는 원본 비율에 맞춰 자동으로 조절됩니다.

2. 이미지 경로 지정하기: 상대 경로와 절대 경로

이미지가 안 보이는 문제의 대부분은 경로를 잘못 적어서 생깁니다. 경로 지정 방법은 크게 두 가지입니다.

① 상대 경로 – 현재 HTML 파일의 위치를 기준으로 이미지 위치를 적는 방법입니다.

<!-- HTML 파일과 같은 폴더에 있을 때 -->
<img src="cat.jpg" alt="...">

<!-- 하위 폴더 images 안에 있을 때 -->
<img src="images/cat.jpg" alt="...">

<!-- 한 단계 위 폴더에 있을 때 -->
<img src="../cat.jpg" alt="...">

여기서 ../는 “한 단계 위 폴더로 올라간다”는 뜻입니다. 폴더 구조를 그림으로 그려 보면 경로를 훨씬 쉽게 이해할 수 있습니다.

my-site/
├── index.html
└── images/
    ├── cat.jpg
    └── dog.png

위 구조에서 index.html에 cat.jpg를 넣으려면 src="images/cat.jpg"라고 적으면 됩니다.

② 절대 경로 – https://로 시작하는 전체 주소를 적는 방법입니다. 다른 웹사이트에 올라가 있는 이미지를 불러올 때 사용합니다. 다만 남의 사이트 이미지를 무단으로 가져다 쓰면 저작권 문제가 생길 수 있고, 원본이 삭제되면 내 페이지에서도 이미지가 사라지므로 가능하면 직접 촬영하거나 사용이 허락된 이미지를 내 폴더에 저장해 쓰는 것이 안전합니다.

3. 상황에 맞는 이미지 파일 형식 고르기

이미지 파일에도 여러 형식이 있고, 각각 장단점이 있습니다. 용도에 맞게 고르면 화질은 지키면서 페이지 속도를 높일 수 있습니다.

이미지는 웹페이지 용량의 대부분을 차지하는 경우가 많습니다. 스마트폰으로 찍은 수 MB짜리 사진을 그대로 올리면 페이지가 매우 느려지므로, 업로드 전에 적당한 크기로 줄이거나 압축하는 습관을 들이는 것이 좋습니다.

4. alt 속성이 중요한 이유

alt 속성은 화면에 보이지 않는 경우가 많아 대충 넘기기 쉽지만, 실제로는 매우 중요한 역할을 합니다. 그 이유를 세 가지로 정리해 보겠습니다.

① 시각장애인을 위한 웹 접근성
화면 낭독기는 이미지를 볼 수 없기 때문에 alt에 적힌 글을 소리로 읽어 줍니다. alt가 없으면 “이미지”라고만 읽거나 파일 이름인 “IMG_20261018.jpg”를 그대로 읽어, 사용자는 그 이미지가 무엇인지 전혀 알 수 없습니다. 이미지가 중요한 정보를 담고 있다면 그 정보를 통째로 놓치게 되는 것입니다.

② 이미지를 불러오지 못했을 때의 대비
경로가 잘못되었거나 인터넷이 느려 이미지가 표시되지 않으면, 그 자리에 alt 글이 대신 나타납니다. 아래는 이미지가 깨졌을 때 alt가 있는 경우를 흉내 낸 예시입니다.

alt가 없다면 이 자리에는 깨진 아이콘만 남아 독자가 무엇을 놓쳤는지조차 알 수 없습니다.

③ 검색 엔진 최적화(SEO)
검색 엔진 로봇은 이미지 속 내용을 사람처럼 정확히 이해하지 못하기 때문에 alt 글을 참고해 이미지의 의미를 파악합니다. 알맞은 alt를 적어 두면 이미지 검색 결과에 노출될 가능성이 높아지고, 페이지 전체의 주제를 이해하는 데도 도움이 됩니다.

5. 좋은 alt 작성법

alt는 “이 이미지를 볼 수 없는 사람에게 전화로 설명한다면 어떻게 말할까?”를 떠올리며 작성하면 됩니다.

몇 가지 원칙을 덧붙이면 다음과 같습니다. “~의 사진”, “~의 이미지”라는 표현은 화면 낭독기가 이미 이미지라고 알려 주므로 생략하는 것이 자연스럽습니다. 버튼이나 링크로 쓰이는 이미지는 생김새보다 기능을 적어야 합니다. 예를 들어 돋보기 아이콘 버튼이라면 “돋보기”가 아니라 “검색”이라고 적습니다. 반대로 단순히 꾸미기 위한 장식용 이미지라면 alt=""처럼 비워 두어 화면 낭독기가 불필요하게 읽지 않도록 합니다. 이때 alt 속성 자체를 빼는 것이 아니라 빈 값으로 남겨 두는 것이 중요합니다.

6. 이미지에 설명 붙이기 – figure와 figcaption

이미지 아래에 사진 설명을 붙이고 싶을 때는 <figure>와 <figcaption>을 사용합니다. 지난 글에서 배운 시맨틱 태그의 일종으로, 이미지와 설명이 한 묶음이라는 의미를 전달합니다.

<figure>
  <img src="images/jeonju.jpg" alt="기와지붕이 늘어선 전주 한옥마을 골목">
  <figcaption>가을에 방문한 전주 한옥마을</figcaption>
</figure>

alt와 figcaption은 역할이 다릅니다. alt는 이미지를 볼 수 없는 사람을 위한 대체 설명이고, figcaption은 모든 독자가 보는 사진 캡션입니다. 따라서 두 내용을 똑같이 적기보다는 각자의 목적에 맞게 작성하는 것이 좋습니다.

7. 페이지 속도 높이기 – loading=”lazy”

이미지가 많은 페이지는 처음 열 때 모든 이미지를 한꺼번에 불러오느라 느려질 수 있습니다. 이때 loading="lazy" 속성을 추가하면, 사용자가 스크롤을 내려 이미지가 화면에 가까워졌을 때 비로소 불러옵니다.

<img src="images/photo5.jpg" alt="..." loading="lazy">

단, 페이지 맨 위에서 바로 보이는 대표 이미지에는 lazy를 쓰지 않는 것이 좋습니다. 첫 화면 이미지가 오히려 늦게 나타날 수 있기 때문입니다.

8. 동영상 넣기 – video 태그

예전에는 웹페이지에서 동영상을 재생하려면 별도의 플러그인이 필요했지만, HTML5부터는 <video> 태그 하나로 간단하게 넣을 수 있습니다.

<video width="640" controls poster="images/thumbnail.jpg">
  <source src="videos/intro.mp4" type="video/mp4">
  <source src="videos/intro.webm" type="video/webm">
  이 브라우저는 동영상 재생을 지원하지 않습니다.
</video>

video 태그에서 자주 쓰는 속성은 다음과 같습니다.

• controls : 재생, 일시정지, 음량 조절 버튼을 표시합니다. 이 속성이 없으면 사용자가 영상을 조작할 수 없으니 꼭 넣어 주세요.
• poster : 영상을 재생하기 전에 보여줄 썸네일 이미지를 지정합니다.
• autoplay : 페이지가 열리면 자동으로 재생합니다. 대부분의 브라우저는 소리가 나는 자동 재생을 막기 때문에 muted와 함께 써야 작동합니다.
• loop : 영상이 끝나면 처음부터 반복 재생합니다.
• muted : 소리를 끈 상태로 시작합니다.

여러 개의 <source>를 넣는 이유는 브라우저마다 지원하는 영상 형식이 조금씩 다르기 때문입니다. 브라우저는 위에서부터 차례로 확인해 재생 가능한 첫 번째 파일을 사용합니다. 요즘은 MP4가 거의 모든 브라우저에서 지원되므로 MP4 하나만 넣어도 대부분 문제없습니다. 맨 아래의 안내 문구는 아주 오래된 브라우저처럼 video 태그를 지원하지 않는 환경에서만 표시됩니다.

참고로 소리만 재생하고 싶다면 사용법이 거의 같은 <audio controls> 태그를 사용하면 됩니다.

9. 유튜브 영상 삽입하기 – iframe

동영상 파일을 직접 올리면 용량이 커서 서버에 부담이 됩니다. 그래서 실제로는 유튜브에 영상을 올리고 웹페이지에 삽입하는 방식을 더 많이 사용합니다. 방법은 간단합니다.

1. 유튜브에서 원하는 영상 아래의 공유 버튼을 누릅니다.
2. 퍼가기를 선택하면 iframe으로 시작하는 코드가 나타납니다.
3. 그 코드를 복사해 HTML의 원하는 위치에 붙여넣습니다.

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/영상ID"
  title="HTML 기초 강의 영상"
  allowfullscreen>
</iframe>

<iframe>은 웹페이지 안에 또 다른 웹페이지를 넣는 태그입니다. 이때 title 속성에 영상 내용을 적어 두면 화면 낭독기 사용자도 어떤 영상인지 알 수 있습니다. 이미지의 alt와 같은 역할이라고 생각하면 됩니다.

10. 이미지가 화면 밖으로 넘칠 때 – 반응형 처리

width를 800처럼 크게 지정하면 스마트폰에서는 이미지가 화면 밖으로 삐져나옵니다. 이럴 때는 아래 CSS 한 줄로 해결할 수 있습니다.

<style>
  img, video {
    max-width: 100%;
    height: auto;
  }
</style>

max-width: 100%는 “화면보다 커지지 말라”는 뜻이고, height: auto는 가로가 줄어든 만큼 세로도 비율에 맞게 줄이라는 뜻입니다. 이 코드는 거의 모든 웹사이트에서 기본으로 사용하는 설정이니 꼭 기억해 두세요.

11. 자주 하는 실수와 해결 방법

• 이미지가 엑스(X) 표시로 나와요 : 경로나 파일 이름이 틀린 경우입니다. 특히 웹 서버는 대소문자를 구분하므로 Cat.JPG와 cat.jpg는 다른 파일로 인식됩니다. 파일 이름은 영어 소문자로 통일하는 것이 안전합니다.
• 파일 이름에 한글이나 띄어쓰기를 사용 : 환경에 따라 이미지를 불러오지 못할 수 있습니다. my photo.jpg 대신 my-photo.jpg처럼 하이픈을 사용하세요.
• 자동 재생이 안 돼요 : autoplay만 쓰고 muted를 빠뜨린 경우입니다. 소리가 나는 영상의 자동 재생은 브라우저가 기본으로 차단합니다.
• 이미지가 찌그러져 보여요 : width와 height를 원본 비율과 다르게 지정한 경우입니다. 하나만 지정하거나 원본 비율에 맞게 적어 주세요.
• alt를 아예 생략 : 장식용 이미지라도 alt 속성 자체는 남기고 값만 비워 두세요(alt="").

마무리하며

오늘은 img 태그로 이미지를 넣는 방법과 상대·절대 경로, 이미지 형식 고르는 법, figure와 figcaption, lazy loading, 그리고 video 태그와 유튜브 iframe으로 동영상을 넣는 방법까지 살펴보았습니다. 무엇보다 기억해야 할 것은 alt 속성입니다. alt는 눈에 잘 띄지 않지만 시각장애인 사용자, 이미지가 깨진 상황의 독자, 그리고 검색 엔진 모두에게 이미지의 의미를 전달하는 중요한 역할을 합니다. 앞으로 이미지를 넣을 때마다 “이 사진을 말로 설명한다면?”을 한 번씩 떠올려 보세요.

이번 글로 HTML 기초 시리즈의 핵심 내용을 모두 다뤘습니다. 다음 글부터는 지금까지 만든 페이지를 보기 좋게 꾸미는 CSS 기초를 시작하겠습니다. 첫 번째 주제는 HTML에 CSS를 적용하는 3가지 방법입니다. 궁금한 점은 댓글로 남겨 주세요!