Semantic Web

nam2350·2021년 7월 5일
0

CheckPoint

목록 보기
1/2
post-thumbnail

Semantic Web

시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하는 것이다.

웹을 사용하는 유저는 검색 엔진을 이용하여 원하는 정보를 얻는다. 그렇기 때문에 웹사이트가 검색 엔진에 노출되는 것은 굉장히 중요한 요소이다. 노출이 되지 않는다면 아무도 사이트에 접속 하지 않을 가능성이 높기 때문이다.

SEO(검색엔진 최적화: Search Engine Optimization)같은 마케팅 도구를 사용하여 검색엔진이 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다.

검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다. 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스을 만들어 놓는다.

인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 웹사이트의 HTML 코드이다. 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다.

<font size="6"><b>Hello World</b></font>
<h1>Hello World</h1>

위의 코드는 1행과 2행은 브라우저에서 동일한 외형을 갖는다.
이는 h1 태그의 디폴트 스타일이 1행과 같기 때문이다.

그러나 1행의 요소는 의미론적으로 어떤 의미도 가지고 있지 않다. 의도가 명확하지 않다. 개발자가 의도한 요소의 의미를 명확하게 나타내지 않고 다만 폰트 크기와 볼드체를 지정하는 메타데이터만을 브라우저에게 알리고 있다.

그러나 2행의 요소는 header(제목) 중 가장 상위 레벨이라는 의미를 내포하고 있어서 개발자가 의도한 요소의 의미가 명확히 드러나고 있다.이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.

Semantic Tags

시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.

HTML 요소는 non-semantic 요소, semantic 요소로 구분할 수 있다.

non-semantic
div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.

semantic
form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.

img vs css background-image

위의 내용을 이해하고 나면 img 태그와 css의 background-image의 사용법이 좀더 명확해진다.

먼저 img와 background-image의 공통점과 차이점을 알고가자

공통점
기본적으로 두가지 방법 모두 이미지를 나타낼때 사용된다.

차이점
이미지를 불러오기에 실패 했을때 img tag는 alt속성으로 이미지가 무엇을 나타내는지 텍스트로 가이드를 해주지만 background-image는 이미지를 표시 하지 않는다.

결론
웹사이트의 컨텐츠에 들어가는 이미지일 경우 img tag를 사용하고 사이트의 디자인적인 요소이거나 이미지가 나타나는것에 대해 별로 중요하지 않을 경우에는 background-imgae를 사용하면 된다.

개인적인 생각
웹이 조금이라도 더 노출돼야 하고 컨텐츠에 이미지를 사용해야 될 때는 img 사용하고 사이트의 디자인적인 요소들 반복되는 이미지들의 경우에는 background-image를 사용해야겠다. 추가로 많은 img tag 사용은 background-image보다 퍼포먼스가 안좋을수도 있겠지만, 디바이스등 하드웨어의 계속되는 발전은 어떠한 개발을 진행 할 때 퍼포먼스에 대한 고민을 덜어줄것이라고 생각한다.

profile
호잇호잇

0개의 댓글