HTML에서 이미지, 영상, 오디오 넣기

HTML에서는 이미지, 영상, 오디오 같은 멀티미디어 파일을 웹페이지에 넣을 수 있습니다.

텍스트만 있는 페이지보다 이미지나 영상이 함께 있는 페이지가 정보를 더 쉽게 전달할 수 있습니다.

이 글에서는 HTML에서 멀티미디어를 다룰 때 자주 사용하는 태그를 정리합니다.

이 글에서 다루는 내용

• img
• video
• audio
• source
• 멀티미디어 태그 사용법

멀티미디어 태그란?

멀티미디어 태그는 웹페이지에 이미지, 영상, 소리 같은 파일을 넣을 때 사용하는 태그입니다.

예를 들어 블로그 글에 설명 이미지를 넣거나, 소개 페이지에 영상을 넣거나, 음악 파일을 재생하게 만들 수 있습니다.

HTML에서 대표적으로 사용하는 멀티미디어 태그는 다음과 같습니다.

img 태그

img 태그는 웹페이지에 이미지를 넣을 때 사용합니다.

<img src="tortoise.jpg" alt="호스필드 육지거북" />

img 태그에서 중요한 속성은 src와 alt입니다.

src는 어떤 이미지를 보여줄지 알려주는 속성입니다.

alt는 이미지가 보이지 않을 때 대신 보여줄 설명입니다.

또한 스크린 리더 같은 보조 기술이 이미지를 설명할 때도 사용합니다.

img 기본 예시

<img src="profile.png" alt="블로그 프로필 이미지" />

이 코드는 profile.png 이미지를 화면에 보여줍니다.

이미지가 제대로 불러와지지 않으면 블로그 프로필 이미지라는 설명이 대신 사용됩니다.

이미지를 넣을 때 alt를 비워두는 경우도 있지만, 의미 있는 이미지라면 설명을 적는 것이 좋습니다.

alt 속성을 쓰는 이유

alt는 단순한 옵션이 아닙니다.

이미지를 이해하기 어려운 상황에서 중요한 역할을 합니다.

예를 들어 이미지 파일 경로가 잘못되면 이미지는 보이지 않습니다.

<img src="wrong-path.jpg" alt="회원가입 화면 예시" />

이때 사용자는 이미지를 볼 수 없지만, alt를 통해 어떤 이미지였는지 알 수 있습니다.

또한 검색 엔진과 보조 기술도 alt를 참고할 수 있습니다.

그래서 블로그에 이미지를 넣을 때는 alt를 대충 쓰지 않는 것이 좋습니다.

좋은 예시는 다음과 같습니다.

<img src="html-form-example.png" alt="아이디, 비밀번호, 이메일 입력칸이 있는 HTML 폼 예시" />

나쁜 예시는 다음과 같습니다.

<img src="html-form-example.png" alt="이미지" />

이미지라고만 쓰면 어떤 이미지인지 알 수 없습니다.

video 태그

video 태그는 웹페이지에 영상을 넣을 때 사용합니다.

<video src="intro.mp4" controls></video>

여기서 controls 속성을 넣으면 사용자가 재생, 일시정지, 음량 조절 같은 기본 조작을 할 수 있습니다.

controls가 없으면 브라우저에 기본 재생 버튼이 보이지 않을 수 있습니다.

video 기본 예시

<video src="sample.mp4" controls width="600"></video>

이 코드는 sample.mp4 영상을 화면에 보여줍니다.

width는 영상의 가로 크기를 지정합니다.

다만 실제 웹사이트에서는 크기 조절을 HTML 속성보다 CSS로 처리하는 경우가 많습니다.

video에서 자주 사용하는 속성

예시는 다음과 같습니다.

<video controls muted poster="thumbnail.jpg">
  <source src="intro.mp4" type="video/mp4" />
</video>

poster는 영상이 재생되기 전에 보이는 대표 이미지입니다.

유튜브 썸네일처럼 생각하면 쉽습니다.

audio 태그

audio 태그는 웹페이지에 오디오 파일을 넣을 때 사용합니다.

음악, 녹음 파일, 효과음, 음성 설명 등을 재생할 수 있습니다.

<audio src="music.mp3" controls></audio>

audio도 video처럼 controls를 넣어야 사용자가 재생 버튼을 볼 수 있습니다.

audio 기본 예시

<audio src="podcast.mp3" controls></audio>

이 코드는 podcast.mp3 오디오 파일을 재생할 수 있게 합니다.

오디오 파일은 화면에 영상처럼 크게 보이지 않고, 보통 재생 바 형태로 표시됩니다.

audio에서 자주 사용하는 속성

예시는 다음과 같습니다.

<audio controls loop>
  <source src="background-music.mp3" type="audio/mpeg" />
</audio>

이 코드는 오디오를 반복 재생할 수 있게 합니다.

하지만 사용자가 원하지 않는 자동 재생은 불편할 수 있으므로 조심해서 사용해야 합니다.

source 태그

source 태그는 video나 audio 안에서 여러 파일 후보를 지정할 때 사용합니다.

브라우저마다 지원하는 파일 형식이 다를 수 있습니다.

그래서 여러 형식의 파일을 준비해두고, 브라우저가 재생 가능한 파일을 선택하게 할 수 있습니다.

<video controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  브라우저가 video 태그를 지원하지 않습니다.
</video>

브라우저는 위에서부터 확인하면서 재생할 수 있는 파일을 사용합니다.

만약 둘 다 재생할 수 없다면 마지막 문장이 표시될 수 있습니다.

source를 audio에 사용하는 예시

<audio controls>
  <source src="sound.mp3" type="audio/mpeg" />
  <source src="sound.ogg" type="audio/ogg" />
  브라우저가 audio 태그를 지원하지 않습니다.
</audio>

이렇게 작성하면 브라우저가 지원하는 오디오 파일을 선택해서 재생합니다.

source는 단독으로 사용하는 태그가 아닙니다.

보통 video나 audio 안에서 사용합니다.

img와 source 차이

처음에는 img와 source가 헷갈릴 수 있습니다.

간단히 정리하면 다음과 같습니다.

img는 그 자체로 이미지를 화면에 표시합니다.

<img src="cat.jpg" alt="고양이 사진" />

하지만 source는 혼자서 화면에 무언가를 보여주지 않습니다.

<video controls>
  <source src="cat-video.mp4" type="video/mp4" />
</video>

즉, source는 video나 audio에게 “이 파일을 사용해보세요”라고 알려주는 역할입니다.

멀티미디어 태그 사용 시 주의할 점

멀티미디어 파일은 웹페이지의 용량을 크게 만들 수 있습니다.

이미지나 영상이 너무 크면 페이지 로딩 속도가 느려질 수 있습니다.

특히 모바일 환경에서는 큰 이미지와 영상이 사용자 경험을 나쁘게 만들 수 있습니다.

그래서 멀티미디어를 사용할 때는 다음을 신경 쓰는 것이 좋습니다.

• 이미지 용량을 너무 크게 만들지 않기
• 의미 있는 이미지에는 alt 작성하기
• 영상에는 가능하면 썸네일 역할의 poster 사용하기
• 자동 재생은 조심해서 사용하기
• 사용하지 않는 큰 파일을 불필요하게 넣지 않기

자동 재생은 조심하기

autoplay 속성을 사용하면 영상이나 오디오가 자동으로 재생될 수 있습니다.

<video src="intro.mp4" autoplay controls></video>

하지만 자동 재생은 사용자에게 불편할 수 있습니다.

갑자기 소리가 나거나 데이터 사용량이 늘어날 수 있기 때문입니다.

또한 일부 브라우저에서는 소리가 있는 자동 재생을 제한하기도 합니다.

자동 재생이 꼭 필요하다면 보통 muted와 함께 사용하는 경우가 많습니다.

<video src="intro.mp4" autoplay muted loop></video>

그래도 무조건 쓰기보다는 사용자 경험을 먼저 생각하는 것이 좋습니다.

블로그에서 이미지 넣는 예시

블로그 글에서는 설명 이미지를 넣는 경우가 많습니다.

<img src="/images/html-table-example.png" alt="HTML table 태그로 만든 표 예시" />

이미지 경로는 프로젝트 구조에 따라 달라질 수 있습니다.

예를 들어 Next.js 프로젝트에서 public/images 폴더에 이미지를 넣었다면 /images/파일명 형태로 접근할 수 있습니다.

중요한 것은 이미지 파일 경로가 실제 위치와 맞아야 한다는 점입니다.

영상과 오디오를 함께 정리한 예시

아래는 영상과 오디오를 넣는 기본 예시입니다.

<video controls width="600" poster="thumbnail.jpg">
  <source src="intro.mp4" type="video/mp4" />
  <source src="intro.webm" type="video/webm" />
  브라우저가 video 태그를 지원하지 않습니다.
</video>

<audio controls>
  <source src="voice.mp3" type="audio/mpeg" />
  <source src="voice.ogg" type="audio/ogg" />
  브라우저가 audio 태그를 지원하지 않습니다.
</audio>

처음에는 source를 여러 개 넣는 구조가 복잡해 보일 수 있습니다.

하지만 목적은 간단합니다.

브라우저가 재생할 수 있는 파일을 고르게 하기 위한 구조입니다.

정리

HTML에서 이미지를 넣을 때는 img 태그를 사용합니다.

img 태그에서는 src와 alt가 중요합니다.

영상을 넣을 때는 video 태그를 사용합니다.

오디오를 넣을 때는 audio 태그를 사용합니다.

source 태그는 video나 audio 안에서 여러 파일 후보를 지정할 때 사용합니다.

멀티미디어 파일은 페이지 용량과 사용자 경험에 영향을 줄 수 있습니다.

그래서 이미지에는 적절한 alt를 작성하고, 영상과 오디오는 자동 재생을 조심해서 사용하는 것이 좋습니다.