웹 프로젝트 기초집LESSON 08

이미지와 에셋: 경로·용량·대체 텍스트를 안전하게 관리하기

난이도입문

예상 시간40분

선수지식7강 색상·타이포그래피

8강. 이미지와 에셋: 경로·용량·대체 텍스트를 안전하게 관리하기

1. 이번 강의에서 해결할 문제

원본 스크린샷을 그대로 올리면 첫 화면이 느리고, 경로가 틀리면 빈 아이콘만 보입니다. 이미지 목적, 표시 크기와 대체 경로를 정합니다.

2. 학습 목표

3. 핵심 개념

프로젝트 스크린샷은 내용을 전달하므로 장면을 설명하는 alt가 필요합니다. 주변 텍스트와 완전히 중복되는 장식은 빈 alt=""를 사용합니다. 표시 크기보다 지나치게 큰 원본은 편집해 별도 웹 파일로 내보내고 라이선스와 출처를 기록합니다.

4. 단계별 실습

HTML · 프로젝트 카드 내부

game-dev-portfolio/index.html
<img
  class="project-card__image"
  src="./assets/images/parcel-rush.webp"
  alt="컨베이어 위 파란 택배를 분류하는 Parcel Rush 플레이 화면"
  width="800"
  height="450"
  loading="lazy"
/>

CSS · 파일 경로: css/style.css

game-dev-portfolio/css/style.css
.project-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.5rem;
  background: #dfe5e3;
}

JavaScript · 파일 경로: js/app.js

game-dev-portfolio/js/app.js
document.querySelectorAll('.project-card__image').forEach((image) => {
  image.addEventListener('error', () => {
    image.src = './assets/images/project-placeholder.webp';
    image.alt = '프로젝트 이미지 준비 중';
  }, {once: true});
});

개발자 도구 확인: Network의 Img 필터에서 파일 크기와 상태를 봅니다. 경로를 일부러 틀리면 404 뒤 placeholder가 나타나야 합니다. 대체 이미지도 누락되면 반복하지 않도록 {once: true}를 사용합니다.

5. 코드가 동작하는 이유

고유 크기 속성은 이미지가 내려오기 전 공간을 예약해 레이아웃 이동을 줄입니다. 화면 아래 이미지는 loading="lazy"로 필요할 때 가까워져서 요청합니다. error 이벤트는 실패한 요소만 한 번 대체합니다.

6. 자주 하는 실수와 해결법

7. 직접 실습

8. 이해 점검 질문 3개

9. 핵심 요약

MINI QUIZ