지난 7편에서 우리는 리스트 태그를 통해 복잡한 정보를 깔끔하게 정리하는 법을 배웠습니다. 오늘은 블로그에 생명력을 불어넣는 시간입니다. 바로 [이미지 태그(Img)와 속성값]을 활용해 글의 가독성을 폭발적으로 높이는 법을 알아보겠습니다.
글만 가득한 블로그는 마치 설명서만 잔뜩 있는 가구 조립 세트와 같습니다. 읽기 힘들고 지루하죠. 적절한 이미지는 백 마디 글보다 더 강력하게 독자의 시선을 사로잡습니다. 오늘은 HTML에서 이미지를 불러오는 태그의 기본과 승인을 위해 꼭 알아야 할 '속성값'의 비밀을 파헤쳐 봅니다.
1. 이미지 태그의 기본 구조 (Img)
이미지 태그는 다른 태그들과 조금 다릅니다. 글자를 감싸는 것이 아니라, 컴퓨터에게 "여기 그림 하나 가져와!"라고 명령하는 것이라 여는 태그만 있고 닫는 태그가 없습니다.
사용법:
여기서 가장 중요한 두 가지 속성, 'src'와 'alt'를 반드시 기억해야 합니다.
2. 절대 빠뜨리면 안 되는 두 가지 속성
첫째, src(Source)입니다. 이건 이미지의 '주소'를 의미합니다. 내 컴퓨터에 있는 사진인지, 인터넷상의 사진인지 정확한 경로를 적어줘야 합니다. 만약 주소가 틀리면 브라우저는 이미지를 불러오지 못하고 엑스박스 표시만 띄우게 됩니다.
둘째, alt(Alternative Text)입니다. '대체 텍스트'라는 뜻인데, 이게 바로 숨은 공신입니다. 만약 인터넷이 느려 이미지가 뜨지 않거나, 시각 장애인이 화면 읽기 프로그램으로 블로그를 볼 때, 이 alt 값에 적힌 설명을 대신 읽어줍니다. 구글 검색 로봇도 이 alt 값을 통해 "아, 이 이미지는 김치찌개 사진이구나!"라고 이해합니다.
절대 "이미지1", "사진2"처럼 무의미하게 적지 마세요. "보글보글 끓고 있는 김치찌개 근접 사진"처럼 구체적으로 적는 것이 SEO(검색 엔진 최적화)의 핵심입니다.
3. 초보자가 흔히 하는 실수와 해결법
가장 흔한 실수는 이미지 용량을 무시하는 것입니다. 고화질 사진을 그대로 올리면 웹페이지 로딩 속도가 매우 느려집니다. 로딩이 3초 이상 걸리면 독자들은 뒤로가기 버튼을 누르고, 구글은 여러분의 블로그 점수를 낮게 평가합니다.
사진 크기를 줄이세요: 블로그에 올리기 전 가로 사이즈를 800~1000px 정도로 줄이는 습관을 들이세요.
파일 형식 확인: png보다는 jpg나 webp 형식이 용량 대비 화질이 좋습니다.
파일명도 전략: 사진 파일 이름을 'IMG_1234.jpg' 대신 '김치찌개-조리방법.jpg'로 바꿔서 업로드하세요. 이것도 검색 로봇이 읽는 정보 중 하나입니다.
4. 실습: 나만의 사진 배치하기
메모장에 아래 코드를 넣어보세요. 주소창에는 여러분이 가진 이미지의 경로를 넣으면 됩니다.
브라우저에서 확인했을 때 이미지가 짠! 하고 나타나면 성공입니다. 이미지가 너무 크거나 작다면 나중에 CSS로 조절할 수 있으니 지금은 태그를 제대로 쓰는 연습에 집중하세요.
[에코노트허브의 조언]
이미지를 넣을 때 저작권은 정말 조심해야 합니다. 직접 찍은 사진이 가장 좋고, 무료 이미지 사이트(픽사베이, 언스플래시 등)를 이용하더라도 출처를 남기거나 라이선스를 확인하는 습관을 들이세요. '신뢰'가 바탕이 되어야 하니까요.
핵심 요약
img 태그는 닫는 태그 없이 src와 alt 속성으로 구성된다.
src는 이미지 경로, alt는 검색 로봇에게 주는 이미지 설명문이다.
이미지 파일명과 alt 값에 핵심 키워드를 포함하면 검색 노출에 유리하다.
고해상도 이미지는 로딩 속도를 늦추므로 적절한 사이즈로 변환해서 올리는 것이 필수다.
다음 편 예고: 9편에서는 블로그의 필수 기능인 '링크의 힘', 다른 페이지로 이동하는 A 태그에 대해 알아보겠습니다.
여러분은 블로그 포스팅에 이미지를 주로 직접 찍어서 올리시나요, 아니면 무료 이미지 사이트를 활용하시나요? 팁이 있다면 댓글로 공유해 주세요!