HTML 이미지 (HTML images)
웹페이지에 이미지를 어떻게 넣을까요? (How do we put an image on a webpage?)
웹 페이지에 이미지를 넣기 위해서는 이미지 요소를 사용합니다. 이 태그는 자식 콘텐츠를 가질 수 없고 종료 태그도 없는 빈 요소(Void element)입니다.
이 태그가 제 역할을 하려면 두 가지 필수 속성인 src와 alt가 필요합니다. src 속성은 페이지에 삽입하려는 이미지를 가리키는 URL을 포함합니다. 링크 요소의 href 속성처럼 src 속성도 상대 URL이나 절대 URL이 될 수 있어요. 만약 src 속성이 없다면 요소는 로드할 이미지가 없게 됩니다.
alt 속성에 대해서는 아래 대체 텍스트 섹션에서 자세히 설명할게요.
참고: 계속 진행하기 전에 상대 URL과 절대 URL에 대한 기억을 되살리기 위해 URL과 경로에 대한 빠른 입문(A quick primer on URLs and paths)을 읽어보시는 것을 권장합니다.
예를 들어, 이미지 이름이 dinosaur.jpg이고 HTML 페이지와 같은 폴더에 있다면 다음과 같이 이미지를 삽입할 수 있습니다.
<img src="dinosaur.jpg" alt="공룡" />만약 이미지가 HTML 페이지와 같은 폴더 안에 있는 images 하위 폴더에 있다면, 아래처럼 삽입해야 해요.
<img src="images/dinosaur.jpg" alt="공룡" />이런 식으로 경로를 맞춰주시면 됩니다.
참고: 검색 엔진은 이미지 파일의 이름도 읽어서 SEO(검색 엔진 최적화) 점수에 반영합니다. 따라서 이미지에는 설명이 잘 담긴 파일명을 지정하는 것이 좋습니다.
img835.png보다는dinosaur.jpg가 훨씬 낫죠!
[프론트엔드 강사의 실무 Tip 💡]
의미 있는 파일 이름 규칙(Naming Convention)을 지키는 것은 실무 프로젝트 관리의 기본이에요. 나중에 컴포넌트를 분리하고 수많은 에셋을 다룰 때, 소문자와 하이픈(-)을 섞어 쓴 직관적인 이름(예:main-banner-dinosaur.jpg)을 지어두면 협업할 때 동료들이 아주 좋아합니다.
물론 절대 URL을 사용해서 이미지를 삽입할 수도 있습니다.
<img src="https://www.example.com/images/dinosaur.jpg" alt="공룡" />하지만 절대 URL을 통한 이미지 연결은 추천하지 않아요. 여러분이 사용할 이미지는 여러분의 사이트에서 호스팅하는 것이 좋습니다. 단순한 설정에서는 웹사이트용 이미지를 HTML과 동일한 서버에 보관한다는 뜻이죠.
또한, 유지보수 측면에서도 절대 URL보다 상대 URL을 사용하는 것이 더 효율적입니다. 사이트를 다른 도메인으로 옮기게 될 경우 상대 경로를 쓰면 모든 URL을 새 도메인으로 일일이 업데이트할 필요가 없거든요. 더 고도화된 시스템에서는 이미지를 전송하기 위해 CDN (콘텐츠 전송 네트워크)을 사용할 수도 있습니다.
만약 여러분이 직접 만든 이미지가 아니라면, 해당 이미지가 배포된 라이선스 조건에 따라 사용할 권한이 있는지 반드시 확인해야 합니다.
경고: 절대로 허락 없이 다른 사람의 웹사이트에 호스팅된 이미지로
src속성을 연결하지 마세요. 이를 "핫링크(hotlinking)"라고 부릅니다. 누군가 내 페이지를 방문할 때마다 상대방의 대역폭을 갉아먹게 되므로 비윤리적인 행위입니다. 또 원본 사이트에서 이미지를 삭제하거나 당황스러운 사진으로 바꿔버려도 여러분이 막을 방법이 없어요.
앞서 보여드린 예제 코드는 다음과 같은 결과를 화면에 보여줍니다.
참고: 이미지나 비디오 요소들은 때때로 대체된 요소(replaced elements) 라고 불립니다. 이 요소들의 내용과 크기가 HTML 자체의 코드가 아니라 외부 리소스(이미지 파일 등)에 의해 정의되기 때문이죠. 자세한 내용은 대체된 요소(replaced elements)에서 확인할 수 있습니다.
대체 텍스트 (Alternative text)
다음으로 살펴볼 속성은 alt입니다. 이 속성은 이미지를 눈으로 볼 수 없거나 화면에 표시되지 않을 때, 또는 인터넷이 느려서 로딩이 오래 걸릴 때 보여줄 이미지에 대한 텍스트 설명을 담습니다. 위 코드를 다음과 같이 수정해볼 수 있어요.
<img
src="images/dinosaur.jpg"
alt="공룡 뼈대의 머리와 몸통; 길고 날카로운 이빨이 있는 큰 머리를 가졌습니다." />대체 텍스트가 잘 작동하는지 확인하는 가장 쉬운 방법은 이미지 파일명을 일부러 틀리게 적어보는 거예요. 만약 파일명을 dinosooooor.jpg로 잘못 적었다면, 브라우저는 이미지를 표시하는 대신 아래처럼 alt 텍스트를 보여줍니다.
그렇다면 언제, 왜 이 대체 텍스트를 보게 되거나 필요로 하게 될까요?
- 접근성(Accessibility): 시각 장애가 있는 사용자가 화면을 읽어주는 스크린 리더(screen reader)를 사용할 때 이 텍스트를 소리내어 읽어줍니다.
- 파일 이름이나 경로의 철자가 틀려서 이미지가 깨졌을 때 정보 누락을 막아줍니다.
- 브라우저가 해당 이미지 포맷을 지원하지 않거나, 텍스트 전용 브라우저(예: Lynx)를 사용할 때 유용합니다.
- SEO: 검색 엔진이 이미지를 이해하고 분류할 수 있도록 정보를 제공합니다.
- 데이터 소모량을 줄이거나 산만함을 피하기 위해 사용자가 브라우저 설정에서 이미지를 강제로 꺼두었을 때 텍스트로 내용을 파악할 수 있게 해줍니다.
[프론트엔드 강사의 실무 Tip 💡]
나중에 채용 면접에서 "웹 접근성(Web Accessibility) 개선 경험이 있나요?" 혹은 "시맨틱 마크업을 어떻게 하시나요?" 같은 질문을 종종 받으실 텐데요, 이alt속성을 상황에 맞게 올바르게 사용했다고 대답하는 것만으로도 면접관들에게 큰 점수를 딸 수 있습니다!
그렇다면 alt 속성 안에는 정확히 무엇을 적어야 할까요? 이미지가 그 자리에 왜 있는지에 따라 다릅니다.
- 장식용 (Decoration): 순수 장식용 이미지라면 뒤에서 배울 CSS 배경 이미지를 쓰는 게 제일 좋습니다. 부득이하게 HTML을 쓴다면 빈 텍스트
alt=""를 넣으세요. 쓸데없는 정보로 스크린 리더가 시간을 낭비하지 않게 배려하는 겁니다. - 콘텐츠 (Content): 이미지가 중요한 정보를 담고 있다면, 해당 내용을 간결하게
alt속성에 적으세요. 단, 본문 내용과 똑같은 말을 반복해서 적지 마세요. 본문에 이미 정보가 다 있다면alt=""로 두셔도 됩니다. - 링크 (Link): 앵커 태그 안에 이미지를 넣어 링크 버튼처럼 만들었다면, 이동할 목적지를 알려주는 접근성 있는 링크 텍스트를 제공해야 합니다.
- 텍스트 (Text): 텍스트에 멋진 효과를 주겠다고 글씨를 이미지로 구워서 넣는 짓은 피하세요. 요즘은 웹 폰트와 CSS 속성으로 웬만한 디자인은 다 구현 가능합니다. 하지만 정말 어쩔 수 없다면, 그 이미지 안에 적힌 글귀를
alt속성에 그대로 적어주어야 합니다.
너비와 높이 (Width and height)
width와 height 속성을 사용해 이미지의 너비와 높이를 픽셀(px) 단위의 정수로 지정할 수 있습니다.
<img
src="images/dinosaur.jpg"
alt="공룡 뼈대의 머리와 몸통; 길고 날카로운 이빨이 있는 큰 머리를 가졌습니다."
width="400"
height="341" />이렇게 크기를 명시하는 데는 아주 중요한 이유가 있습니다. 페이지의 HTML 문서를 다운받으면 브라우저는 즉시 화면을 그리기 시작합니다. 하지만 이미지 파일은 아직 서버에서 다운로드 중일 확률이 높죠. 브라우저는 빈 공간을 확보하지 않고 밑에 있는 텍스트들을 빽빽하게 위로 올려서 먼저 렌더링합니다.
그러다 나중에 무거운 이미지가 도착하면 어떻게 될까요? 브라우저는 뒤늦게 이미지 공간을 확보하느라 기존에 예쁘게 배치해 둔 텍스트와 레이아웃을 몽땅 아래로 밀어내 버립니다!
여러분이 기사나 블로그 글을 읽고 있는데 갑자기 화면이 번쩍이며 글씨가 밑으로 도망가버린 경험, 다들 있으시죠? 사용자에게 엄청난 불쾌감을 주고, 브라우저가 화면을 다시 계산해서 그려야(Re-render) 하므로 성능에도 쥐약입니다.
하지만 width와 height로 이미지의 실제 크기를 미리 알려주면, 브라우저는 이미지가 도착하기도 전에 미리 듬직하게 빈 공간을 예약해 둡니다.
[프론트엔드 강사의 실무 Tip 💡]
면접관이 제일 좋아하는 개념이 등장했네요! 방금 설명한 이 짜증나는 현상을 CLS (Cumulative Layout Shift, 누적 레이아웃 이동) 라고 부릅니다. 브라우저 렌더링 최적화와 직결되는 핵심 개념이에요. 나중에 React 나 Next.js에서 최적화된<Image>컴포넌트를 쓸 때도 결국 내부적으로는 렌더링 전 빈 공간을 할당하여 CLS를 막아주는 원리가 들어있답니다!
이미지 리사이징 (Resizing images)
주의할 점! HTML 속성은 원본 이미지의 크기를 브라우저에게 '알려주는' 용도이지, 원본 크기를 작게 '리사이징(수정)'하기 위해 쓰면 안 됩니다. 4K 해상도의 무거운 이미지를 가져와서 HTML 속성으로 100px로 작게 줄여 표시하면, 사용자는 눈에 보이지도 않는 초고화질 이미지를 다운받느라 데이터를 낭비하게 됩니다. 반대로 작은 이미지를 억지로 늘리면 이미지가 다 깨지거나 찌그러지겠죠.
이미지 크기는 웹에 올리기 전에 Figma 나 포토샵 같은 에디터 툴을 사용해 적절한 크기로 미리 다듬어서 업로드해야 합니다. 웹페이지의 레이아웃에 맞춰 이미지 크기를 유연하게 조정해야 한다면 CSS를 사용하세요.
이미지 제목 (Image titles)
title 속성을 추가하면 마우스를 이미지 위에 올렸을 때 툴팁으로 추가 정보를 보여줄 수 있습니다.
<img
src="images/dinosaur.jpg"
alt="공룡 뼈대의 머리..."
width="400"
height="341"
title="맨체스터 대학교 박물관에 전시된 티렉스" />하지만 이 방법은 권장하지 않습니다. 스크린 리더 환경마다 title을 읽어주는 방식이 제각각이고, 마우스를 사용할 수 없는 키보드 사용자나 모바일 환경에서는 툴팁을 볼 수 없기 때문입니다. 부가 정보가 필요하다면 꼼수 쓰지 말고 본문 텍스트 안에 당당하게 포함시키는 것이 가장 좋습니다.
이미지 임베딩 실습 (Image embedding practice)
이제 배운 걸 직접 타이핑해 볼 시간입니다!
1. <img> 태그를 직접 작성해보세요.
2. 아래 URL을 복사해 src 속성에 넣어 이미지를 연결해 보세요.
https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg참고: 아까 다른 서버에 핫링크 걸지 말라고 했지만, 이 이미지는 학습을 위해 GitHub에 열어둔 것이니 괜찮습니다!
alt속성을 추가해 대체 텍스트를 적어보세요. (주소 철자를 틀리게 적어서 대체 텍스트가 나오는지도 실험해 보세요.)- 이미지의 올바른
width와height를 설정하세요. (힌트: 너비는 200px, 높이는 171px입니다.) title속성도 한번 달아보며 마우스를 올려 툴팁을 확인해 보세요.
미디어 자산과 라이선스 (Media assets and licensing)
웹을 돌아다니다 발견한 이미지를 여러분의 사이트에 덜컥 가져다 쓰면 법적 문제가 발생할 수 있습니다.
- 모든 권리 보유 (All rights reserved): 저작권자의 허락이나 비용 지불 없이는 절대 쓸 수 없습니다. 인터넷에 떠도는 아무런 고지가 없는 이미지는 이 상태라고 가정하는 게 안전합니다.
- 허용적 라이선스 (Permissive): MIT, BSD, 크리에이티브 커먼즈(CC) 등은 무료로 쓸 수는 있지만, '출처 표기', '상업적 이용 금지', '변경 금지' 등 라이선스별 세부 조건을 반드시 지켜야 합니다.
- 퍼블릭 도메인 / CC0 (Public domain/CC0): 저작권이 포기되어 누구나 마음대로 쓸 수 있는 무료 이미지입니다. 그래도 안전을 위해 출처에서 CC0 라이선스 문구를 캡처해 두는 증빙 습관을 들이세요.
Pixabay, Unsplash 같은 이미지 저장소나 구글 이미지 검색의 '도구 > 사용 권한' 옵션을 활용하면 무료 라이선스 이미지를 쉽게 찾을 수 있습니다.
Figure와 Figure caption으로 이미지 주석 달기
이미지에 캡션(설명글)을 다는 방법 중 가장 안 좋은 예시는 <div> 로 대충 묶는 겁니다.
<div class="figure">
<img src="images/dinosaur.jpg" alt="공룡" />
<p>맨체스터 대학교 박물관에 전시된 티렉스.</p>
</div>CSS로 디자인하기엔 편하겠지만, 여기에는 치명적인 문제가 있습니다. 스크린 리더 같은 접근성 기기 입장에서는 저 <p> 태그가 위의 이미지를 설명하는 글인지, 아니면 그냥 지나가던 본문인지 기계적으로 판단할(Semantic) 연결고리가 없습니다.
더 나은, 아니 '정답'에 가까운 해결책은 HTML의 <figure> 와 <figcaption> 요소를 사용하는 것입니다.
<figure>
<img src="images/dinosaur.jpg" alt="공룡" />
<figcaption>
맨체스터 대학교 박물관에 전시된 티렉스.
</figcaption>
</figure><figcaption>은 브라우저와 보조 기기에게 "나는 지금 내 위(또는 아래)에 있는 <figure> 요소를 정확하게 설명하고 있다!" 라고 명확하게 선언해 줍니다.
[프론트엔드 강사의 실무 Tip 💡]
div태그로만 떡칠된(Div-soup) 코드는 면접관들이 가장 기피하는 코드 양식입니다. "저는 이미지와 캡션을 묶을 때 시맨틱 웹 표준을 준수하기 위해 figure와 figcaption을 의도적으로 사용했습니다." 라고 어필하시면 시니어 개발자분들 입가에 미소가 번질 겁니다.
피규어 만들기 실습 (Creating a figure)
앞서 실습했던 <img> 태그를 이 <figure> 구조로 직접 감싸보고, title 속성에 있던 텍스트를 <figcaption> 안으로 옮겨 적어 시맨틱한 마크업을 완성해 보세요!
CSS 배경 이미지 (CSS background images)
HTML이 아니라 CSS의 background-image 속성을 이용해서도 페이지에 이미지를 넣을 수 있습니다.
p {
background-image: url("images/dinosaur.jpg");
}CSS 배경 이미지는 배치가 자유롭고 다루기 편합니다. 하지만 오직 장식용(Decoration) 으로만 써야 한다는 것을 명심하세요. CSS로 그린 이미지는 문맥적인 의미를 전혀 가지지 않고, 시각 장애인을 위한 대체 텍스트(alt)도 달 수 없으며, 이미지 검색 결과에도 잡히지 않습니다.
결론: 이 이미지가 화면의 핵심 정보와 의미를 담고 있다면 HTML의 <img>를, 그저 화면을 예쁘게 꾸며줄 패턴이나 배경 스킨에 불과하다면 CSS 배경 이미지를 사용하세요!
