Semantic Web과 Semantic Tag의 차이

박근우·2022년 7월 18일
0

Semantic Web과 Semantic Tag의 차이를 알아보기 전에 Semantics라는 단어의 의미를 알아야한다.

Semantic이라는 단어 자체는 '의미의', 또는 '의미론적인' 이라는 뜻을 가진 형용사이다.

그래서, Semantic Tag 라는 용어는 HTML을 섹션별로 구분지어 HTML 코드 자체의 가독성을 높여주는 문법을 의미한다.

예를 들어, Semantic tag를 사용하지 않는다면,

<head>
	<div id='main'>
    	<div id='lowerMain'>
    		<p> Hello World! </p>
        	<ol>
        		<li> Name: </li>
            	<li> Age:  </li>
        ...
</head>

처럼 가독성은 높지만 문장이 길다.

하지만, Semantic tag를 사용한다면,

<head>	
    <main>
    	<lowerMain>
        <p> Hello World! </p>
        <ol>
        	<li> Name: </li>
            <li> Age:  </li>
        ...
</head> 

처럼 간결하게 쓸 수 있는 태그들은 간결하게 쓰고 넘어갈 수 있게 된다.

예로 든 코드는 짧기 때문에 '이게 정말 간결해지나?'라는 생각이 들 수 있다. 하지만 우리가 수백, 수천개의 id를 사용한다고 생각해보면 그만큼의 <div id=...>를 치지 않고 넘어갈 수 있는 것이고, 한번의 태그를 작성할 때 1초가 걸린다고 생각하면 몇 백초, 몇 천초를 아낄 수 있는 것이다.

Semantic Web 이라는 용어는 Web3.0. 즉, World Wide Web Consortium(W3C)에 따라 규격을 나눠놓은 World Wide Web의 연장선이다. 문장이 복잡하다. 간단하게 설명하자면 인터넷 상의 정보들을 컴퓨터가 읽고 처리할 수 있도록 만들어 주는 것이다.

예를 들어, semantic web page가 아닌 tag는

<item>Non-semantic Web</item>

으로 단순히 사용하기 쉽고, 일을 수행만 하기에 적합한 형태이다.

하지만, semantic web page의 tag는

<item rdf:about="https://semantic.org/web">Semantic Web</item>

처럼 인간보다는 기계를 위한, 기계가 이해하기 쉽게 만드는 형태이다.

기계가 처리할 수 있는 형태를 Machine readable 이라 칭하는데, 이런 형태의 장점은 간결하고 처리 속도가 빠르다는 것이다.

Semantic web page의 tag를 사용하느냐, 안 하느냐의 차이는 이미지를 로딩할 때 극명하게 드러난다. 예를 들어, 1000개의 이미지를 담은 페이지가 있다고 생각해보자. <div>를 사용하여 백그라운드 이미지를 로딩하는 페이지는 CSS 이미지 파일들을 사용자가 보고 있던, 보고 있지 않던 다운로드하고 있기 때문에 사용자가 50번째 이미지를 보고 싶다면 전체 1000개의 이미지가 전부 다운로드 될 때까지 보이지 않을 수도 있고, 보일 수도 있다.

하지만, HTML img tag를 사용한다면 사용자가 보고 있는 이미지만 다운로드하고 아직 보지 않은 이미지는 다운로드 하지 않는다. 그래서, 위의 예와 똑같이 사용자가 50번째 이미지를 보고 싶고, 첫번째 이미지부터 보면서 스크롤한다고 가정했을 때도 50개의 이미지만 다운로드 되면 볼 수 있다.

profile
데이터 사이언티스트가 되어가는 중

0개의 댓글