img태그와 background-image속성의 차이는 무엇일까?

웹페이지에 이미지 넣는 2가지 방법

웹페이지에 이미지를 넣는 방법은 2가지가 있다.

• <img>태그 사용
• background-image 프로퍼티 사용

이 둘의 차이를 알기 위해서는 우선 검색엔진과 시맨틱 태그, 시맨틱 웹의 이해가 필요하다.

검색엔진

검색 엔진은 컴퓨터 시스템에 저장된 정보를 찾아주는 것을 도와주도록 설계된 정보 검색 시스템이다.
우리가 구글에 키워드를 입력하고 엔터를 탕! 누르면 관련된 웹페이지들의 목록을 볼 수 있는데 이것이 바로 검색엔진이 일하고 있다는 증거다.

• 색인: 구글에서 알고 있는 모든 웹페이지를 색인에 저장한다. 각 페이지의 색인 항목은 해당 페이지의 콘텐츠 및 위치(URL)를 명시한다.
• 크롤링: 신규 또는 업데이트된 웹페이지를 찾는 프로세스다. 구글은 링크를 따라가거나, 사이트맵을 읽거나, 다른 여러 방법으로 URL을 찾아낸다.
• 크롤러: 웹에서 페이지를 크롤링(가져오기)한 다음 색인을 생성하는 자동 소프트웨어다.
• 구글봇: 구글 크롤러의 일반적 이름이다. 구글봇은 웹을 끊임없이 크롤링한다.
• SEO: 검색엔진 최적화, 즉 검색엔진에서 찾기 쉽도록 사이트를 개선하는 프로세스다.

구글 검색 작동 방식

1. 구글을 사용자가 검색어를 입력하면 아래 이미지처럼 웹페이지를 뒤져서 가장 좋은 결과물을 10개로 추린다.
   
2. 데이터 베이스에 각 웹페이지의 정보를 저장해두고 알고리즘을 이용해 무엇을 보여줄지 정한다.
3. 구글의 알고리즘은 인터넷상의 모든 웹페이지를 데이터베이스에 저장하는 것으로 시작된다.
4. 웹페이지를 크롤링하며 색인작업을 실행하는데 현재 웹페이지의 외부링크를 따라가 또 새로운 웹페이지를 색인에 추가한다. 더는 새로운 웹 페이지를 찾을 수 없을 때까지 반복한다.
5. 기존의 웹페이지에 변동사항이 있으면 그것 역시 색인에 반영한다.
6. 사용자가 검색어를 입력하면 구글은 색인을 샅샅이 뒤져 연관성이 큰 웹페이지를 찾는다.
7. 이때 사용하는 알고리즘은 페이지랭크와 SEO 검색엔진 최적화 기술이다.

여기 SEO 검색엔진 최적화 기술적 방향이 바로 키워드다!

만약 내가 커피에 관련된 웹페이지를 운영하고 사용자가 "커피"를 검색했을 때 내 웹페이지가 나오길 바란다면 이 키워드를 어떻게 설정할 수 있을까? 시맨틱 태그로 사용하면 된다.

시맨틱 태그와 시맨틱 웹

Semantic은 코드의 조각의 의미다.
이 태그가 가진 목적이나 역할이 무엇인지 나타내는 것이다.

HTML 시맨틱 태그

HTML에서 Semantics tag란, 이 요소가 가진 목적과 역할은 무엇인지를 설명해준다.
예를 들어, 아래 두 코드는 우리 눈에 똑같은 시각적 결과를 보이지만 컴퓨터는 전혀 다르게 알아듣는다.

<h1>커피를 추출하는 이상적 시간</h1>
<div id="header" style="font-size: 32px; margin: 21px 0; font-weight: bold">커피를 추출하는 이상적 시간</div>

• h1 태그는 태그 안 텍스트 요소를 "이 페이지에서 최상위 제목"이라는 의미를 나타내는 역할을 담당한다.
• div는 컨테이너로서 아무것도 표현하지 않는다. 즉, 의미적 가치(semantic value)가 없다.

검색엔진의 입장에선 아래와 같은 이미지로 비유할 수 있을 것 같다.

때문에 알맞은 시맨틱 태그를 사용하는 것은 검색엔진에도 개발자에게도 중요하다.

시맨틱 태그의 사용 중요성 정리

• 검색 엔진은 시맨틱 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다.
• 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 시맨틱 마크업을 푯말로 사용할 수 있다.
• 의미 있는 코드 블록을 찾기가 훨씬 쉽다.
• 의미 있는 이름 짓기는 코드의 가독성을 높이고 유지보수를 쉽게 한다.

✅ HTML은 채워질 데이터를 나타내도록 코딩해야 한다. 어떻게 보여져야 하는지는 CSS의 역할이다.

시맨틱 웹

과거 웹은 키워드 중심으로만 정보의 접근을 허용했다. 그 때문에 무수히 많은 불필요한 정보도 함께 나왔었다.
또한 컴퓨터가 필요한 정보를 추출, 해석, 가공할 방법이 없어, 모든 정보를 사용자가 직접 개입해서 처리하여야 하는 문제도 있었다.

기존 웹을 확장하여 컴퓨터가 이해할 수 있는 잘 정의된 의미(메타태그)를 기반으로 다양한 정보들의 처리를 자동화하고 데이터의 통합 및 재사용 등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 모두 잘 이해할 수 있는 웹을 만드는 것이 목표로 둔 것이 바로 시맨틱 웹이다!

img태그와 background-image속성의 차이

아래 코드는 우리 눈에 똑같은 시각적 결과를 보이지만 컴퓨터는 전혀 다르게 알아듣는다.

<img src="dog.png" alt="강아지" />
<div class="dog"></div>

.dog {
  width: 226px;
  height: 300px;
  background-image: url(./dog.png);
  background-size: 100%;
}

이제 우리는 HTML은 데이터의 역할을 담고 있고, CSS는 어떻게 보여줄지 스타일을 집중한다는 것을 알 수 있다!

img 태그

• 문서에 이미지를 넣는다는 HTML 태그다.
• 시맨틱 HTML 마크업으로 크롤러가 이미지를 찾고 처리할 수 있다.

background-image속성

• CSS 속성이다.
• 프로퍼티명처럼 말 그대로 배경이미지다! 즉, 스타일로서 이미지를 보여준다.

따라서 만약 지금 사용하려는 이미지가 사용자에게 보다 나은 이해를 돕는 중요한 부분이라면 검색엔진이 이 이미지를 저장할 수 있도록 img 태그로 설정해야 한다.
하지만 그와 반대로 만약 이 이미지가 단순히 꾸밈의 용도라면 div 태그를 활용해 CSS에서 background-image속성으로 이미지를 넣어야 한다.

+) 이미지를 넣을 때 팁

• img 태그에 loading="lazy" 속성을 사용하면 사용자가 페이지를 더 빠르게 로드할 수도 있다.
• alt 속성을 사용해 이미지를 표시할 수 없을 때 대신 표시할 텍스트를 지정할 수 있고,
  스크린 리더와 보조 기술을 사용하여 사이트를 보고 있을 때 그림에 관한 정보를 제공한다.
• 이미지를 링크로 사용하는 경우 해당 이미지의 대체 텍스트가 텍스트 링크의 앵커 텍스트와 비슷하게 취급되기 때문에 alt 속성을 사용한다.
  이렇게 되면 링크하려는 페이지에 대해 더 잘 이해할 수 있다.
• 간단하지만 설명이 담긴 파일 이름과 대체 텍스트를 사용한다.
  image1.jpg 와 같은 일반적인 파일이름을 사용을 피해라!

마지막으로, 컴퓨터는 인간처럼 눈과 귀가 없으며 하나하나 설명해줘야 한다는 사실을 항상 기억하자!

참고자료

• MDN Semantics
• MDN SEO
• Google 검색엔진 최적화(SEO) 기본 가이드
• poiemaweb 시맨틱 요소와 검색 엔진
• IT좀 아는 사람