이미지 파일을 태그에 바로 담는 것과, background-image 속성을 추가해서 담는 것은 어떤 차이가 있을까
시간이 지날수록 semantic web을 지향하는 추세가 강해지고 있다. (당연한 것이겠지만...)
처음 html을 접했을 때 배웠던 html 발전 과정이 그러했고, 궁극적으로 semantic web은 인공지능과도 결을 같이 하기 때문이다.
semantic web은, 다양한 정보 자원들 사이의 관계와 의미를 컴퓨터가 이해할 수 있는 web이다.
Ontology는 우리가 일상 생활에서 사용하는 용어를 컴퓨터가 그대로 이해하고 처리하는 형태로 만드는 것이며, semantic web은 ontology를 기반으로 하고 있다. semantic 이라는 단어도 '의미론적인' 이란 뜻이다.
semantic web을 만들기 위해서는 semantic tag를 사용해야 한다.
예를 들어, 1) html 과 2) css 2개 영역으로 나뉘어진 콘텐츠를 html로 먼저 작성한다고 가정해보자. 가장 기본적인 방법은 div로 각 영역을 만들고 각각 id나 class를 통해 "section"이라고 이름을 부여하는 것이다. div 태그 자체에는 아무 의미가 없고 컴퓨터는 의미나 관계를 읽을 수 없기 때문이다.
<div id="section">1)html
...
</div>
<div id="section">2)css
...
</div>
하지만 semantic tag를 활용하면, 아래와 같이 작성하면 된다.
<section>1)html
...
</section>
<section>2)css
...
</section>
section태그를 사용하면, id나 class를 통한 부가 설명 없이도 컴퓨터는 해당 태그의 contents와 role을 이해할 수 있다.
A semantic element clearly describes its meaning to both the browser and the developer. (출처: w3school)
semantic tag에는 대표적으로 header,nav,section,article,form,table,footer 등이 있다. 쇼핑몰 첫 화면에 보이는 메뉴바가 대부분 nav태그로 작성된 것도 이와 같은 이유다.
또한, semantic tag 사용은 효과적인 검색/크롤링을 가능하게 해 접근성, SEO(검색한 자료에 도달하기까지의 트래픽의 양과 질을 개선하는 것)에도 기여한다.
다시 첫 질문으로 돌아가서, 웹 화면에 이미지를 띄우는 방법을 생각해보자. 2가지 방법이 있다.
- html에서
img태그 사용 (img src="이미지 소스" alt="설명 문구")- css에서
background-image속성 사용
img 태그는 태그 이름 그대로 이미지 파일을 웹 화면에 띄울 때 사용한다. 그리고 이 태그는 src(source)와 함께 alt(alternative)를 같이 작성해야 한다. 처음 배웠을 때와 마찬가지로, 나는 개인적으로 img태그를 적재적소에 사용하는 것은 중요하다고 생각하고 특히 alt 작성은 필수다.
img태그는 html에서 작성된다. 태그 이름 그대로 이미지 파일 자체가 핵심인 태그다.alt를 통해서 설명 캡션을 작성할 수 있다. (이미지가 안 보이면, 설명 문구 display로 대체 가능)
-> 접근성 높임 (항상 '접근성'을 고려해야 한다)- 특히
alt를 통해, 검색 유입량을 증가시켜 SEO에 기여할 수 있다.
반면, background-image 는 css상에서 작성되는 것으로, 디자인적인 요소다.
- css에서 추가되는 속성이기 때문에, div 등 영역을 html상에서 먼저 만들어줘야 한다.
- 이미지 위에 텍스트 등의 속성이 들어가야 할 때 사용한다. 즉, 이미지가 보이지 않아도 콘텐츠 이해에 문제가 없는 상황을 말한다.
- 같은 이유로, 마우스 hover 시 이미지를 바꾸고 싶을 때도
background-image를 사용한다.
따라서, semantic 관점에서 봤을 때 이미지를 보여주기 위해서는 img 태그를 사용하는 것이 가장 적합하고 semantic web이 추구하는 방향과 맞다고 할 수 있겠다. background-image는 어디까지나 디자인 속성으로 역할하기 때문이다.
결국 가장 중요한 것은 '이 이미지를 왜 삽입하는가?'다.img 태그가 우선순위겠으나 background-image 속성을 사용하는 것이 더 적합하다면 후자를 택하는 것이 맞겠다.
참고 사이트
1) 구글 검색 유입 증가에 도움되는 img태그 alt 속성 추가
2) Why Image Alt Text is Important for SEO
