7. 보이는 재미 더하기: 이미지와 파일 다루기

2026-04-14Views 120약 8분

7. 보이는 재미 더하기: 이미지와 파일 다루기

텍스트만 가득한 페이지는 정갈하고 좋지만, 어딘가 조금 심심합니다. 그런데 이미지를 한 장 넣는 순간 분위기가 확 달라집니다. 제목이 더 눈에 들어오고, 설명이 더 쉽게 이해되고, 내가 만든 페이지가 갑자기 "진짜 웹페이지"처럼 보이기 시작합니다.

이번 장에서는 HTML에서 이미지를 넣는 <img> 태그를 배웁니다. 특히 가장 많이 쓰는 src, alt, width, height를 중심으로 익히고, 이미지를 불러올 때 꼭 같이 따라오는 파일 경로 감각도 함께 익혀 보겠습니다.¹

이미지는 `<img>`로 넣는다

HTML에서 이미지를 넣을 때는 <img> 태그를 사용합니다. 이 태그는 문단처럼 내용을 감싸는 태그가 아니라, 혼자서도 일하는 태그입니다. 즉, 닫는 태그가 없습니다.

가장 기본 형태는 이렇게 생겼습니다.

<img src="cat.jpg" alt="창가에 앉아 있는 고양이">

이 한 줄 안에 핵심이 들어 있습니다. 브라우저는 src를 보고 이미지를 어디서 가져올지 찾고, alt를 보고 이미지를 볼 수 없는 상황에서 어떤 텍스트를 대신 보여줄지 판단합니다.¹

쉽게 말하면 이렇습니다.

img는 이미지를 넣는 태그
src는 이미지 주소
alt는 이미지 대신 읽어 줄 설명

HTML이 "문서의 구조"를 만드는 언어라면, 이미지는 그 구조 안에 들어가는 시각 자료라고 생각하면 됩니다. 벽에 액자를 거는 것과 비슷합니다. 액자를 걸려면 먼저 어느 액자를 걸지 주소를 알려 줘야 하겠죠.

`src`: 브라우저에게 "이 그림 가져와!"라고 말하는 속성

src는 source의 줄임말입니다. 이름 그대로 이미지의 위치를 적는 자리입니다. <img> 태그에서 가장 먼저 챙겨야 할 속성이기도 합니다.¹

예를 들어 현재 HTML 파일과 같은 폴더에 pizza.jpg가 있다면 이렇게 쓸 수 있습니다.

<img src="pizza.jpg" alt="치즈가 듬뿍 올라간 피자">

브라우저는 이 코드를 읽고, "아, 같은 폴더 안에 있는 pizza.jpg 파일을 가져오라는 뜻이구나" 하고 이해합니다.

그런데 여기서 중요한 사실이 하나 있습니다. HTML 문서 안에 이미지 데이터가 직접 들어가는 것은 아닙니다. 브라우저가 src에 적힌 위치를 보고 이미지를 따로 불러오는 것입니다.² 그래서 파일 이름이 틀리거나 위치가 잘못되면 이미지가 보이지 않습니다.

예를 들어 이렇게 적으면 어떨까요?

<img src="pizaa.jpg" alt="치즈가 듬뿍 올라간 피자">

파일 이름을 pizza.jpg가 아니라 pizaa.jpg로 잘못 썼다면, 브라우저는 이미지를 찾지 못합니다. 그때 등장하는 구세주가 바로 alt입니다.

`alt`: 이미지가 안 보여도 의미는 남게 하기

alt는 alternative text, 즉 대체 텍스트입니다. 이미지가 로드되지 않거나, 사용자가 스크린 리더 같은 보조 기술을 사용할 때 이미지를 대신 설명하는 역할을 합니다.¹³

예를 들어 아래 코드를 보겠습니다.

<img src="dog.jpg" alt="빨간 목줄을 한 강아지가 잔디밭을 달리고 있다">

이미지가 잘 보일 때는 화면에서 alt 텍스트가 직접 보이지 않을 수도 있습니다. 하지만 이미지를 불러오지 못하면 브라우저가 이 텍스트를 대신 보여 줄 수 있고, 화면 읽기 도구는 이 내용을 읽어 줄 수 있습니다.¹

즉, alt는 단순한 옵션처럼 보이지만 사실은 페이지의 의미를 지켜 주는 안전장치입니다.

좋은 `alt`는 어떻게 쓸까?

좋은 alt는 "사진이 있다"를 말하는 것이 아니라, 그 이미지가 전달하는 의미를 짧고 분명하게 알려 줍니다.¹³

예를 들어 이런 차이가 있습니다.

<!-- 아쉬운 예시 -->
<img src="logo.png" alt="이미지">

<!-- 더 좋은 예시 -->
<img src="logo.png" alt="HTML 기초 블로그">

첫 번째는 너무 막연합니다. 두 번째는 그 이미지가 무엇을 뜻하는지 알려 줍니다.

또 이런 식도 좋지 않습니다.

<img src="cat.jpg" alt="cat.jpg 파일">

파일 이름은 사람에게 친절한 설명이 아닙니다. 브라우저의 입장에서는 주소일 뿐이고, 사람에게 필요한 것은 의미입니다.¹

장식용 이미지는 어떻게 할까?

가끔 이미지는 정보 전달보다 분위기를 위해 들어갑니다. 예를 들어 본문 옆에 작은 별 아이콘을 붙이거나, 이미 같은 뜻의 글자가 옆에 또 적혀 있다면 그 이미지는 장식에 가까울 수 있습니다. 이런 경우에는 alt=""처럼 빈 값으로 두는 방식이 쓰입니다.¹³

<img src="star.png" alt="">

초보자 단계에서는 이렇게 기억하면 충분합니다.

내용에 중요한 이미지라면 alt를 의미 있게 쓴다.
단순 장식이라면 alt=""를 고려한다.
파일 이름이나 "사진", "이미지" 같은 애매한 말만 적지 않는다.

`width`와 `height`: 이미지 크기를 정하는 손잡이

이미지는 원본 크기 그대로 들어올 수도 있지만, HTML에서 width와 height 속성으로 크기를 지정할 수도 있습니다.¹⁴

<img src="cake.jpg" alt="딸기가 올라간 케이크" width="300" height="200">

이 코드는 브라우저에게 이 이미지를 가로 300, 세로 200 크기로 보여 달라고 말하는 것입니다.

여기서 숫자 뒤에 px를 쓰지 않았죠. HTML의 width와 height 속성은 보통 이런 식으로 숫자만 적습니다.⁴

이미지 크기를 지정하면 좋은 점이 있습니다. 브라우저가 이미지를 완전히 다운로드하기 전에도 "여기에 이만한 공간이 필요하겠구나" 하고 미리 자리를 잡아 둘 수 있습니다. 그래서 페이지가 덜 덜 흔들리듯 바뀌는 현상을 줄이는 데 도움이 됩니다.¹²

하나만 바꾸면 어떻게 될까?

가로만 바꾸는 경우도 자주 있습니다.

<img src="cake.jpg" alt="딸기가 올라간 케이크" width="300">

이런 방식은 간단하지만, 상황에 따라 표시 모양이 달라질 수 있습니다. 그리고 가로와 세로를 원본 비율과 맞지 않게 억지로 지정하면 이미지가 납작해지거나 길쭉해질 수 있습니다.⁵

예를 들어 원래 정사각형 사진인데 이렇게 쓰면,

<img src="profile.jpg" alt="웃고 있는 프로필 사진" width="300" height="100">

사람 얼굴이 마치 거울방에 들어간 것처럼 눌려 보일 수 있습니다. 이미지가 찌그러져 보이면 대부분 크기 비율이 맞지 않는 것입니다.

처음에는 이렇게 생각하면 좋습니다.

원본 비율을 모를 때는 크기를 너무 과하게 바꾸지 않기
가로와 세로를 둘 다 넣을 때는 자연스러운 비율인지 확인하기
아주 큰 이미지를 작게만 보이게 하는 것보다, 애초에 적절한 크기의 파일을 쓰는 것이 좋기

파일 경로, 이번에는 이미지로 익혀 보자

지난 장에서 링크를 만들며 경로의 기본 개념을 배웠습니다. 이번 장에서는 그 경로를 이미지에 붙여 보는 연습을 합니다. 링크에서는 href가 목적지를 가리켰다면, 이미지에서는 src가 파일 위치를 가리킵니다.

즉, 경로를 읽는 감각은 똑같고, 쓰는 자리가 다를 뿐입니다.

같은 폴더에 있는 이미지 불러오기

가장 쉬운 경우입니다. index.html과 photo.jpg가 같은 폴더에 있다면 파일 이름만 적으면 됩니다.⁶

my-page/
├─ index.html
└─ photo.jpg

<img src="photo.jpg" alt="바다 위로 지는 노을">

브라우저는 현재 HTML 파일이 있는 자리에서 photo.jpg를 찾습니다.

이 방식은 초보자에게 가장 이해하기 쉽습니다. 그래서 처음 연습할 때는 HTML 파일과 이미지 파일을 같은 폴더에 두고 시작하면 훨씬 덜 헷갈립니다.

하위 폴더에 있는 이미지 불러오기

실제로는 이미지를 따로 정리하는 경우가 많습니다. 예를 들어 images 폴더를 만들어 그 안에 그림 파일을 모아 둘 수 있습니다.⁶

my-page/
├─ index.html
└─ images/
   └─ photo.jpg

이때는 폴더 이름까지 같이 써 줍니다.

<img src="images/photo.jpg" alt="바다 위로 지는 노을">

이 코드는 "현재 위치에서 images 폴더로 들어가서 photo.jpg를 찾아라"라는 뜻입니다.

많은 초보자가 여기서 imagesphoto.jpg처럼 슬래시를 빼먹습니다. 폴더와 파일은 /로 구분한다는 점을 꼭 기억해 두세요.

한 단계 위 폴더의 이미지 불러오기

조금 더 복잡한 구조도 볼까요?

my-page/
├─ images/
│  └─ photo.jpg
└─ pages/
   └─ about.html

지금 편집 중인 파일이 pages/about.html이고, 이미지는 위쪽에 있는 images 폴더에 있다면 먼저 한 단계 올라가야 합니다.⁶

<img src="../images/photo.jpg" alt="바다 위로 지는 노을">

여기서 ../는 "한 단계 위로 올라가라"는 뜻입니다. 그래서 전체 흐름은 이렇습니다.

먼저 pages 폴더에서 한 단계 위로 올라가고, 그다음 images 폴더로 들어가서 photo.jpg를 찾습니다.

처음 보면 미로 지도처럼 느껴질 수 있지만, 천천히 읽으면 규칙은 단순합니다. 현재 위치를 기준으로 움직인다는 점만 기억하면 됩니다.

외부 주소에 있는 이미지 불러오기

이미지는 내 컴퓨터 폴더 안의 파일만 쓸 수 있는 것이 아닙니다. 인터넷에 있는 이미지 주소를 그대로 넣을 수도 있습니다.²⁶

<img src="https://example.com/images/sunset.jpg" alt="노을이 비치는 해변">

이처럼 전체 주소를 다 적는 방식을 절대 경로 또는 절대 URL이라고 부릅니다.⁶

그래서 연습용이나 내 프로젝트 안의 이미지라면, 가능하면 내 폴더에 넣고 상대 경로로 연결하는 습관이 좋습니다.⁶

실전 예제: 텍스트 페이지에 이미지 넣기

이제 정말 웹페이지다운 예제를 만들어 봅시다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>내가 좋아하는 음식</title>
</head>
<body>
  <h1>오늘의 주인공: 딸기 케이크</h1>

  <p>글만 쓰려다가, 참지 못하고 사진도 가져왔습니다.</p>

  <img
    src="images/cake.jpg"
    alt="생크림 위에 딸기가 올라간 케이크"
    width="320"
    height="240"
  >

  <p>이미지를 넣으니 갑자기 디저트 소개 페이지처럼 보이지 않나요?</p>
</body>
</html>

이 코드에서 눈여겨볼 부분은 세 가지입니다.

첫째, src="images/cake.jpg"는 images 폴더 안의 케이크 사진을 찾습니다. 둘째, alt는 이미지를 못 봐도 무슨 사진인지 이해할 수 있게 해 줍니다. 셋째, width와 height는 이미지가 차지할 자리를 어느 정도 정해 줍니다.

이 정도만 익혀도 당신의 페이지는 더 이상 텍스트 메모장이 아닙니다. 슬슬 "내 사이트" 같은 얼굴이 생기기 시작합니다.

초보자가 자주 하는 실수

이미지를 처음 넣을 때는 비슷한 실수가 자주 나옵니다.

파일 이름을 다르게 쓰는 경우: Cake.jpg와 cake.jpg는 서버에 따라 다른 파일일 수 있습니다.⁶
슬래시 방향을 헷갈리는 경우: 웹 경로는 ``가 아니라 /를 사용합니다.⁶
alt를 빼먹는 경우: 이미지를 못 보는 사용자에게 중요한 정보가 사라질 수 있습니다.¹
크기를 무리하게 지정하는 경우: 이미지가 찌그러질 수 있습니다.⁵

특히 파일 이름 대소문자는 생각보다 자주 발목을 잡습니다. 내 컴퓨터에서는 되는 것 같았는데 서버에 올리니 안 보이는 경우가 여기서 많이 생깁니다. logo.png라고 저장했으면 HTML에서도 정확히 logo.png라고 써야 합니다.

이미지가 안 나올 때 확인할 것

이미지가 보이지 않는다고 해서 당황할 필요는 없습니다. 대부분은 몇 가지 단순한 이유 때문입니다.¹

먼저 src 경로가 맞는지 확인해 보세요. 파일이 같은 폴더인지, 하위 폴더인지, 한 단계 위 폴더인지부터 다시 봅니다. 그다음 파일 이름 철자가 정확한지, 확장자가 .jpg인지 .png인지 확인합니다. 마지막으로 이미지 파일이 실제로 그 위치에 존재하는지도 살펴보면 됩니다.

이럴 때는 브라우저를 원망하기보다, 브라우저가 길을 잃었구나 생각하면 마음이 편합니다. 우리는 그저 더 정확한 주소를 적어 주면 됩니다.

작지만 중요한 감각: 이미지는 내용일까, 장식일까?

앞으로 HTML을 더 배우다 보면 이미지도 두 종류로 보이기 시작합니다.

하나는 내용을 전달하는 이미지입니다. 예를 들어 상품 사진, 프로필 사진, 설명용 그림이 여기에 해당합니다. 이런 이미지는 alt가 중요합니다.

다른 하나는 분위기를 위한 이미지입니다. 예를 들어 본문에 의미를 더하지 않는 장식 아이콘, 배경 느낌의 그림이 그렇습니다. 이런 경우는 alt=""가 어울릴 수 있습니다.³

이 차이를 조금씩 구분하기 시작하면, HTML을 단순히 태그 문법으로만 보는 것이 아니라 사용자 입장에서 생각하게 됩니다. 그게 바로 좋은 웹페이지의 출발점입니다.

핵심 정리

이번 장에서 꼭 기억할 것은 다음입니다.

이미지는 <img> 태그로 넣고, 닫는 태그는 쓰지 않는다.¹
src는 이미지 파일의 위치를 적는 속성이다.¹
alt는 이미지가 보이지 않을 때를 대비한 대체 텍스트이며, 접근성에도 중요하다.¹³
width와 height로 이미지 크기를 지정할 수 있고, 브라우저가 미리 공간을 잡는 데 도움이 된다.¹²
같은 폴더는 photo.jpg, 하위 폴더는 images/photo.jpg, 한 단계 위는 ../images/photo.jpg처럼 경로를 쓴다.⁶
이미지가 찌그러져 보이면 가로세로 비율이 맞는지 먼저 의심해 본다.⁵