이번 글에서는 작은 여행을 떠나보겠습니다. 한 가지 질문에 대해 답을 찾아가는 여정입니다.
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
아직 이 질문의 답을 알 수 없습니다. 그러나 우리에게 두 가지 힌트가 주어졌습니다. 바로 Semantic Web과 Semantic Tag입니다. Semantic Web, Semantic Tag. 이게 대체 무슨 말일까요?
먼저 Semantic은 '의미의, 의미론적인' 같은 뜻을 가지고 있습니다. 그 의미를 그대로 확장시키면, Semantic tag는 의미를 가지고 있는 태그입니다. 예를 들어보겠습니다.
img ("난 이미지야!")
aside("난 사이드에 존재하는 공간이야!)"
footer("난 푸터야!")
이런 식으로 태그가 그 안의 content의 의미에 대해 명확히 설명해주고 있습니다. 그럼 semantic tag가 아닌 tag는 어떨까요?
span("...")
div("...")
이 둘은 그 안의 내용물에 대해 어떤 설명도 해주지 않습니다. 오직 사람을 위한 코드죠. 여기서 semantic tag의 강점이 드러납니다. semantic tag는 컴퓨터를 명확하게 이해시킵니다.
검색엔진은 웹사이트의 정보를 수집할 때 오직 html 코드만으로 의미를 인지해야 합니다. 예를 들어 제목을 span에 style을 줘서 꾸민 사이트와 h1 태그로 감싼 사이트가 있다고 봅시다. 둘은 사람의 눈으로 보기엔 똑같습니다. 하지만 컴퓨터에게는 h1 태그로 감싼 텍스트가 '제목'으로, 더 중요한 내용으로 인식됩니다. 그러니까 검색 엔진은 후자의 손을 들어줘서, 제목이 h1 태그로 감싸진 사이트를 더 검색결과 상위에 노출시킬 것입니다.
그럼 시맨틱 웹은 뭘까요? 시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상입니다. 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호운용성(semantic interoperability)을 실현하여, 다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 모두 잘 이해할수 있는 웹을 만드는 것이 목표죠.
자, 그럼 다시 처음 질문으로 돌아가보겠습니다.
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
img 태그를 사용해서 이미지를 넣는다면?
img 태그는 앞에서 보았듯이 semantic tag입니다. 따라서 img 태그로 삽입한 이미지는 검색엔진에 의해 인덱싱될 수 있겠죠. 또 만약 큰 용량의 이미지들을 CSS로 삽입한다면 전체 페이지가 로딩되는데 시간이 오래 걸리게 되지만, img 태그의 경우 html을 분석할 때 이미지 파일이 요청되기 때문에 보다 빠르게 페이지를 볼 수 있습니다.
div 태그에 background-image 속성을 추가한다면?
div 태그는 non-semantic tag입니다. 이미지에 대해 어떠한 설명도 해주지 않아요. 따라서 검색엔진에겐 이 이미지 파일에 대해 아무런 정보도 전달되지 않습니다. 앞서 말했듯이 이미지 용량이 클 경우 전체 페이지가 로딩되는데 시간이 오래 걸리게 만들기도 합니다.
그러니까 결론은, 되도록 img 태그를 사용하는 것이 좋습니다. 그러면 div 태그에 background-image 속성을 추가하는 건 아예 쓸모가 없을까요? 그건 아닙니다.
- 순수하게 '디자인'을 위한 이미지라면
- 이미지가 내용의 일부가 아니라면
- 사람들이 프린트(출력)를 할 때 이 이미지는 포함되지 않기를 원한다면
- 블로그 작성자 아이콘처럼 반복해서 사용된다면
div 태그에 background-image 속성을 추가하는 편이 좋습니다.
상황에 따라 두 가지 중 하나를 골라 사용하면 되겠군요! 그럼 답을 찾았으니 이번 여정은 여기서 마치겠습니다.
참조: https://blog.px-lab.com/html-img-tag-vs-css-background-image/
