질문

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

나에게 주어진 질문이다. 그리고 그 다음에 나온 내용, 위의 질문에 대답할 수 있나요?. 아니요 ㅋㅋ.. 그렇기 때문에 학습을 하고 있습니다! 여하튼, 힌트로는 Semantic Web, Semantic Tags가 주어졌다. 어떻게 접근해볼지 천천히 생각해본다.

Semantic Web

나름 언어를 전공한 사람으로서 semantic이 무엇을 의미하는지 알고 있다. 가장 간단하게 말하자면 의미를 탐구하는 학문이고, 조금 더 풀어서 얘기하면 의미의 관계를 탐구하는 학문이다. 예를 들어, 하나의 단어가 문맥에 따라 여러 의미를 가지는 것을 연구할 수 있고, 단어가 가진 속성에 대해서 연구하는 것일 수도 있다. 이러한 배경지식을 가지고 Semantic Web에 대해 생각해보면 웹에서 어떤 하나의 리소스가 가지는 의미, 다른 리소스와의 관계를 통해서 궁극적으로 의미있는 정보를 담기 위한 것이 아닐까 추측해본다.

그럼 진짜로 알아본다 ㅋㅋ!

검색

이러나 저러나 일단 시맨틱 웹으로 검색을 해보았다. 헬프미구글! 가장 간단한 정의이다.

정보의 의미를 컴퓨터가 알 수 있게 함

???
좀 더 제대로된 정의이다.

현재의 인터넷에서 리소스에 대한 정보와 자원 사이의 관계를 온톨로지 형태로 표현해서 기계가 처리하도록 하는 프레임워크이자 기술입니다.

자원을 정보화해서 관계를 짓고 그것을 기계가 활용할 수 있는 지식으로 남겨둔다는 뜻 같다. 하지만 온톨로지가 무엇인지 모르겠다. 검색해보니 기원전 인물인 아리스토텔레스 형님이 나온다. 이 형님은 모든 지식의 실체를 어떻게 규정해야 할지 궁금했다. 크.. 질문에서부터 그의 클래스가 느껴진다. 아무튼, 아리스토텔레스로 부터 온톨로지라는 개념이 생겨났다!

언어로 표현된 개념 간의 연관 관계 지식이 드러나는 망

결국 인터넷 리소스간의 관계를 조사하여 지식으로 만들고 그 지식들을 네트워크(망)로 연결하는 것이 아닐까 생각해본다. 예를 들어 위워크 라고 검색하면 검색엔진이 모든 위워크 건물의 사진과 위치 정보까지 모두 알아볼 수 있는 것이다. 왜냐하면 이런 리소스들이 모두 연결이 되어있기 때문이다.

Semantic Tags

Semantic Web을 위해 리소스를 각자의 입맛에 맞게 아무렇게나 생성한다면 이런 관계설정이 힘들 것 같다. 아마도 리소스를 좀 더 정형화된 형태로 만들어 인터넷망에 연결되어 있는 컴퓨터들이 찾기 쉽게하기 위해 Semantic Tags가 만들어진 것이 아닐까 생각해본다.

HTML5의 시맨틱 태그들

물론 웹에서 사용가능한 다른 포맷들도 있겠지만 우리에게 가장 친숙한 HTML5의 시맨틱 태그들을 알아본다. 아래 외에도 굉장히 많다!!

• <section>: 문서의 섹션을 정의한다. W3C의 HTML 문서에 따르면 섹션은 제목이 있는 내용의 주제 그룹이다. 웹 페이지는 서문, 본문, Contact Info 등의 섹션으로 나뉠 수 있다.

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

• <article>: 독립적인 내용을 명시한다. 하나의 article은 독자적으로 이해해야하며, 나머지 웹 사이트와 독립적으로 나머지 웹 사이트와 독립적으로 배포할 수 있어야한다. 다음과 같은 예시가 있다.
  - 포럼, 블로그 포스트
  - 신문 기사

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

• <header>: 도입부의 내용이나 네비게셔널 링크들의 집합을 나타낸다. 보통 다음과 같은 것들을 담고 있다.
  - 하나 또는 이상의 heading elements (<h1>-<h6>)
  - 로고나 아이콘
  - 작성자 정보

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

<header> 태그는 하나의 HTML 문서에서 여러번 사용될 수 있다. 하지만 <footer>, <address>, 같은 <header> 태그 안에서는 사용될 수 없다.

• <footer>: 문서나 섹션의 footer를 정의한다. 하나의 문서에 여러 <footer> 태그를 사용할 수 있다. 보통 다음과 같은 것들을 포함한다.
  - 작성자 정보
  - 저작권 정보
  - Contact Info
  - 사이트맵
  - 홈페이지로 돌아가는 링크
  - 웹사이트(서비스)와 관련된 문서

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

• <nav>: 네비게이션 링크를 정의한다. 모든 링크가 <nav> 태그안에 있을 필요는 없다. 주요 링크만 <nav> 태그 안에 있으면 된다.

  브라우저는 <nav> 태그를 사용하여 컨텐츠의 초기 렌더링을 생략할지 여부를 결정한다.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

• <aside>: 컨텐츠 외부에 있는 컨텐츠를 정의한다 (e.g. 사이드바). 주로 주변 컨텐츠와 간접적으로 관련이 있다.

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

태그 이름만 봐도 검색엔진이 의미를 파악하기 쉬워보인다.

시맨틱 태그의 장점

시맨틱 태그를 사용하면 다음과 같은 이점이 있다. MDN에 적혀있는 내용을 조금 더 간추려 보았다.

• 시맨틱 태그는 검색 엔진의 랭킹에 영향을 준다.
• 시각 장애인들의 웹 사용에 유용하다.
• 의미가 있는 코드 블록을 찾기가 쉽다.
• 개발자에게 태그 안에 채워질 데이터 유형을 제안해 준다.

정답?

첫 섹션의 질문을 다시 되돌아 본다.

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

정답이라기 보다는 지금까지 공부했던 내용을 기반으로 나의 생각을 얘기해본다. img 태그를 활용하는 것이 우선시 되어야한다. 태그 이름과 속성들을 보면 해당 페이지에서 어떤 역할을 하는지 알 수 있고 다른 곳에서도 관련된 내용을 찾아볼때 나타날 수 있기 때문이다. 반면에 div 태그는 이름만 보면 뭐하자는 건지 알 수가 없다. 무엇이 의미전달이 더 잘되는지 고민해보자!

무엇을 사용할까?

언제 무엇을 사용해야 할까? 스택오버플로우에서 검색해보니 답변을 발견할 수 있었다. 필요할 때 마다 읽어보고 경험을 통해 기억하는 것이 제일 좋아보인다.

img 태그를 사용할 때

• 이미지가 로고, 다이어그램 또는 인물과 같은 컨텐츠의 일부일 때 사용한다.
• 텍스트 사이즈에 맞춰 이미지를 렌더링 하고 싶을 때 사용한다.
• background-image 속성 보다 애니메이션의 성능이 좋다.

background-image 속성을 사용할 때

• 이미지가 컨텐츠의 일부가 아닌 경우 사용한다.
• 문단/헤더와 같이 텍스트를 이미지로 대체할 때 사용한다.
• 이미지가 프린팅 되지 않기 원한다면 사용한다.

위코드 11기 김현우님의 포스팅도 많은 도움이 되었다!

소감

우리는 웹에서 리소스가 가지는 의미를 연관짓고 지식화한 후 추론까지하는 세상에 살고 있다. 이러한 정보의 홍수 속에서 사람들이 원하는 서비스를 만드는 개발자들이 시맨틱 웹의 최전선에서 인간 세상에 도움이 되는 일을 하고 있는게 아닐까 생각해본다. 마지막으로 공부하면서 봤던 시맨틱 웹에 관한 짧은 동영상 하나를 첨부해본다.

피드백 반영 😁

답글로 피드백 주시는 것은 언제나 환영입니다 :D

2020-07-25

decody님께서 달아주신 답글을 토대로 내용을 정리해본다.

시맨틱 태그들은 근래에 그냥 기본으로 지켜야하는 요소입니다 - decody

그래서 종류만 살펴봤던 주요 시맨틱 태그들을 좀 더 찾아서 내용을 w3schools.com 페이지를 번역하며 보강했다. "HTML5의 시맨틱 태그들" 섹션에서 확인할 수 있다.

<figure> 와 <figcaption> 태그

decody님께서 <img> 태그에 <figure> 와 <figcaption> 태그도 같이 쓰여진 사례를 찾아보면 도움이 될것이라고 말씀해주셨다. 그래서 한 번 찾아보도록 했다.

• <figure>: 일러스트, 다이어그램, 사진, 코드 리스트같은 컨텐츠를 명시하는 태그이다.
• <figcaption>: <figure> 태그를 위한 caption(표제, 제목)을 정하는 태그이다. <figure> 태그의 첫번째 또는 마지막 자식 태그로 활용한다.

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

<img> vs. <div>'s background?

decody님께서 간단하게 말씀해주셨다.

<img> 태그를 사용할 때, 그 이미지가 의미를 가진 것으로 판단되면 태그를 그대로 사용하고, 데코레이션 개념이면 그냥 background로 쓰면 된다. - decody

소감

먼저 정말 감사드립니다 🙇‍♀️😁!!
왠지 요새는 기본이라고 하시니 시맨틱 태그들을 꼭 잘 알고 넘어가야 할 것 같았다 ㅋㅋㅋ. 이렇게 작성하니 뿌듯하다!

피드백을 반영하면서 궁금한 점이 생겼는데 "어떤 태그가 검색 엔진이 더 중요하게 생각하는가?" 이다. 옆자리에 계신 동호님께서 많은 영감을 주셨는데 이것은 후에 더 알아봐야겠다.