TIL32 - Semantic Web

Peter D Lee·2020년 9월 15일

CSS Semantic Elements TIL WeCode html semantic tags semantic web

HTML

목록 보기

4/4

면접 질문으로 자주 등장한다는 semantics 관련 문제:

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

위 질문에 답하기 위해 Semantic Web에 대해 알아보자!

Semantic이란?

semantic:
- relating to meaning in language or logic (Oxford Languages)
- 의미의, 의미론적인 (네이버사전)

따라서 semantic은 '의미에 중점을 둔' 이라고 해석할 수 있겠다.

개발하는데 있어 semantic이란 단순히 layout이나 structure만 생각하고 코드를 작성하는 것이 아닌, 해당 코드의 실질적인 '의미'를 고려한 코딩을 하는 것.

이러한 semantic 코딩을 위해 W3C 규정에 따른 World Wide Web의 extension으로 Semantic Web이 있다.

Semantic Web 이란?

Semantic Web은 W3C standards의 일환으로, 목적은 머신이 읽을 수 있는(machine-readable) 인터넷 데이터를 만드는 것 이다.

Machine-readable 인터넷 데이터를 만드는 것? 그게 무슨 뜻이지?

모두 잘 알다시피, machine, 즉 컴퓨터는 데이터를 해석하는 능력/방식이 인간과는 다르다.

우리(인간)의 사고는 일차원적이지가 않다. 우리는 한가지를 보고도 여러가지 생각을 할 수 있고 우리가 본 그 한가지와 관련된 다른 것들을 알아서 생각해내고 연관지어 더 큰 뜻을 해석할 수가 있다.
예를 들어, '까르보나라 파스타 만들기' 라는 문구를 봤을때, 우리가 기존에 알고있는 까르보나라 레시피가 이미 있다면 우리는 저 문구만 보고도 따로 우리가 아는 레시피를 이와 연관지어서 까르보나라 파스타를 만들어 낼 수 있다.
컴퓨터는 반면 직접 본 것만, 사전적 의미와 원칙에 따라 이행한다.
'까르보나라 파스타 만들기' 라는 문구 자체는 컴퓨터에게 의미가 없고, 이에 해당하는 세부 레시피를 컴퓨터에게 하나하나 알려주지 않으면 컴퓨터는 파스타를 만들어 낼 수 없다.

이렇게 컴퓨터는 특정 코드의 사전적으로 지정된 의미와 지정된 원칙에 따라서만 해당 코드를 실행하기 때문에, 컴퓨터가 코드를 쉽고 빠르게 이해하고 실행하도록 하기 위해 semantic web을 활용하는 것이다.

Semantic Web은 더 많은 코드에 semantic 개념을 적절히 부여하고 이렇게 컴퓨터가 바로바로 이해할 수 있는 사전적 "의미"를 지니고 있는 semantic 코드를 활용하므로써 더욱 효율적인 코딩이 가능해 진다.

Semantic Elements

HTML5 부터 특정 "의미"가 부여된 여러 semantic tags가 새로 추가되어 <div>와 같은 기존의 tag 대신 이러한 semantic tags를 사용하므로써 Semantic Web에 걸맞는 코드를 쓸 수 있다.

다음은 HTML5에서 추가된 semantic tags 목록이다:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

Semantic Tags 활용법

기존에는 웹페이지 섹션을 나눌때 <div> tag에 class나 id를 지정해 해당 element에 인위적(?)으로 의미를 부여했다면,
HTML5의 semantic tags를 활용하면 해당 tag 자체에 의미가 지정돼 있기 때문에 해당 element가 어떤 역할을 하는 element인지 자동적으로 의미가 부여된다.

예를 들어, 위 그림에서 보는 것 처럼 네비게이션바 섹션을 만들때 <div> tag로 일단 해당 섹션을 위한 구간을 만들고 여기에 우리는 이 섹션을 네비게이션바로 활용할 것이라는 의미를 "nav"라는 class로 부여하는 대신, 사전적으로 네비게이션바 섹션이라는 의미를 가지고 있는 <nav> semantic tag를 사용하므로써 우리는 컴퓨터가 더 효율적으로 이해하고 실행할 수 있는, semantic한 코드를 작성하게 되는 것이다.

`<img>` vs. `<div>`+`background-image`

이제 우리는 이 포스트 맨 처음에 던져진 <img> tag vs. <div> tag + background-image property 문제에 대한 답을 할 수가 있다!

Semantic Web에 대한 이해를 바탕으로 보아

<img> tag는 semantic tag로써 해당 element는 "이미지"라는 사전적 의미를 갖고 있으므로 웹페이지 내에서 특정 이미지를 강조하고 싶을때, 여러 이미지를 나열해서 보여주고 싶을때와 같이 해당 이미지가 해당 element의 핵심일 때 사용 할 것이다. 이렇게 설정한 이미지는 그 이미지 자체가 해당 element의 핵심이기 때문에 이미지 크기 등을 변경하고 싶다면 <img> tag 자체의 속성을 업데이트 해서 해당 이미지를 직접 컨트롤 할 수 있다.
- 컴퓨터 입장에서는 <img> tag를 보는 순간 "이건 이미지 element!" 라고 바로 인식할 것이고, 그렇게 해석한 대로 즉각 실행해서 브라우저에 해당 이미지를 뛰워줄 것이다.
반면 <div> tag에 background-image property 추가를 통한 이미지 설정의 의미는 특정 구역을 설정하고(<div>), 그 구역의 "배경이미지"를 설정한다(<background-image>)는 의미가 되므로 말 그대로 이미지가 핵심이 아닐때, 즉 해당 element는 다른 주된 용도가 있지만 그 구간에 이미지를 설정하므로써 해당 구역에 extra effect를 줄 때 사용 할 것이다. 이렇게 설정한 이미지는 해당 element에서 보조적인 역할의 성격을 띄기 때문에 이미지 크기 등을 변경하고 싶다면 <div>의 크기 등을 설정하면 이미지도 이에 맞춰 바뀌는 모습이 될 것이다.
- 컴퓨터 입장에서는 먼저 <div> tag를 보고 "이건 그냥 한 구역!"으로 인식하고 실행해서 웹페이지에 해당되는 구역을 설정할 것이고, 해당 <div>에 대한 background-image property를 확인하고 "이 구역에 배경이미지를 해당 이미지로 설정!"이라고 해석하고 실행해서 해당 구역의 배경이미지를 설정해서 브라우저에 보여줄 것이다.