img VS background-image

mgm-dev·2020년 9월 14일
12

📚TL;DR

  1. Semantic Elements : 브라우저와 개발자가 알아보기 편한 엘리먼트
  2. SEO : Search Engine Optimization(검색 엔진 최적화). 구글, 네이버 등의 검색 엔진에, 웹사이트가 잘 검색 되도록 하는 일련의 작업
  3. img VS background-image : img는 스크랩북에 사진을 붙이는 것. background-image는 스크랩북의 종이에 그림을 그리는 것

1. 제목에 쓰여있는 질문...

  당신은 웹사이트에 이미지를 넣어야한다. img 태그를 사용하거나, 엘리먼트의 background-image를 변경하면 될 것이다. 그런데 두개의 차이가 무엇이고, 무엇이 옳은 방법인 것일까? 본 포스팅에선 조금 빙둘러서 대답을 해보겠다.


2. 시작하기 전에

  웹 스타일링에는 정답이 없다고 생각한다. 파고들면, 개발에서 명확한 정답이 있는게 무엇이 있겠냐 싶지만. html과 css는 특히 더 그렇다. 똑같은 것을 구현하기 위해 온갖 방법이 존재한다. 과거에 내가 작성한 css를보면 "도대체 왜 내가 이렇게 짰을까?"라는 생각이 간간히 들정도로.

  정답은 업지만 효율의 유무는 존재한다고 생각한다. 그러면 어떤 면에서 효율성을 따져야할까. 우선 코드는 읽기 쉬워야한다. 가독성에서 나오는 효율이다. 여기서 Semantic Element가 등장한다

semantic : Of or relating to semantics or the meanings of words.
➡️ (형용사) 의미론적인

  semantic을 번역하면 의미론적인이라는 다소 난해한 뜻이 된다. 그래도 어려운 개념이 아니다. 요는 명명을 의미론적으로 한다는 것이다!


3. 극단적 예시 : 인간의 입장에서

<!--의미론적이지 않은 클래스 명명-->
<div class="a"></div>

<!--의미론적인 클래스 명명-->
<div class="article"></div>

  위에 두가지 div 태그가 있다. 과연 두가지 태그 안에 무엇이 들어갈까? 후자의 경우 대충 "아 게시글 같은 것을 랩하는 태그구나" 라고 유추 할 수 있다. 그런데 전자는? 도무지 찍어서 맞출 수가 없다. 왜냐? 클래스 명을 지을 때 의미를 제대로 부여하지 않았기 때문이다.


4. Semantic Web? Tag? : 기계의 입장에서

  위에서 살펴본 예시는 고기덩어리 두뇌를 가진 인간의 입장에서 본 것이다. 그러면 전자두뇌를 가진 킹봇이 본 입장에서는 어떨까. 다음 예시를 보자.

<!--non semantic tag-->
<div class="time"></div>
<div class="tm"></div>
<div class="date-time"></div>

<!--semantic tag-->
<time></time>

  사람이라면 시간이라는 단어를 time라 쓰던, tm라고 쓰던, date-time라 쓰던 뜻을 유추 가능하다. 그런데 이 유추라고 하는 것이 콤-퓨-타에겐 어렵다. 물론 불가능한 것은 절대 아니다. 하지만 생각해보자.

자연어를 처리하는게 쉬울까? time이라는 태그를 이해하는게 쉬울까?

  당연히 time이라는 태그를 이해하는 것이 쉽다. 이해하기 쉬운 태그를 Semantic Tag라고 부른다. Semantic Tag로 작성되어 기계가 쉽게 이해 할 수 있는 웹을 Semantic Web이라고 부른다.


5. 기계에게 이해시킬 이유가?

  그래서 기계에게 이해시키면 뭐가 좋을까? 일상에서 예시를 찾아보자. 당신이 이 포스트를 보고 있다면, 당신은 개발자일 것이다. 구글링은 당신의 친구고 스택오버플로우는 든든한 아군이다. 그러면 구글에 개떡같이 질문을 해도 찰떡 같이 스택오버플로우의 답글을 찾아주는 이유가 무엇일까? 똑똑하신 검색 엔진 덕분이다. 설마 사람이 검색 처리를 수기로 했겠습니까? 미치셨습니까 휴먼?

  기계가 처리한 다는 것은 조작이 가능 하다는 것이다. 나쁜의미로의 조작은 아니고, 알고리즘을 효율적으로 사용하는 것이다. 이것도 예시를 들어보자. 유튜버들이 좋댓구알, 좋댓구알 노래를 부르는 이유가 있다. 좋댓구알이 많으면 유튜브 알고리즘이 더 많은 사람에게 해당 영상을 추천하기 때문이다. 비슷한 개념으로 SEO가 있다.

검색 엔진 최적화(영어: search engine optimization, SEO)는 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다.


6. 그래서 img냐 background-image냐?

  비유를 들어서 설명하겠다. 당신은 스크랩북을 작성하고 있다.스크랩북을 꾸미고 싶다. 사진을 페이지에 붙일 수 있을 것이고, 페이지에 예쁜 그림을 그릴 수 있을 것이다. 전자는 img태그를 사용하는 것이고, 후자는 background-image를 사용하는 것이다.

  스크랩북에 붙은 사진은 대놓고 "나는 중요한 추억이다" 라고 노래를 부른다. 반면 이쁘게 그려놓은 그림은 애매모호하다. 내가 기부니가 좋으라고 꾸며놓은 것이었나? 뭔가 숨은 의미가 있었나?

  그래서 대표적인 SEO의 방법 중 하나로, 페이지 내 img태그 안의 alt 속성을 적절하게 사용하는 것이다.


  스크랩북을 어떻게 만들지는 당신의 자유다. 정답은 없다. 하지만 난 명확한 아이템을 기록하기 위해서는 사진을 사용하고, 스크랩북을 이쁘게 꾸미기 위해서는 그림을 사용할 것 같다.

참고자료

MDN
PoiemaWeb

profile
never stop learning

0개의 댓글