[Wecode] Semantic Web과 Semantic Tag에 대한 이해

엄재홍·2022년 3월 2일
0

Semantic = 의미론적

Semantic Web의 등장배경 : Semantic Web 은 의미론적인 웹 이란 뜻으로 웹이 발전함에 따라 웹 기술은 축적된 방대한 데이터에 대하여 키워드(keyword)에 의한 정보 접근만을 허용하고 있어, 정보 검색시 무수히 많은 불필요한 정보가 돌출하여 정보 홍수를 가중시키는 상황과 더불어 컴퓨터가 필요한 정보를 추출, 해석, 가공할 수 있는 방법이 없고 컴퓨터는 정보자원의 의미를 이해하지 못한기에 모든 정보를 사용자가 직접 개입해서 처리하여야 하는 문제가 생기게 되었다.

Semantic tag

위에서 Semantic Web 에 대해 알아보았는데 그렇다면 Semantic tag는 무엇일까?

위에 그림을 프로그래밍 언어를 모르는 사람이 본다고 가정할때 사람들은 이해 할수있을까?
아마 대부분의 사람들을 직관적으로 각각의 파트가 어떤 의미를 지니는지 금방 눈치 챌것이다.

그렇다면 위에 그림은 어떤가?
전체적인 맥락은 크게 다를바 없지만 한눈에 보기에도 가독성이 떨어진다.
즉. 각 태그들이 자신의 의미를 명확히 하지 못하고 있다는 것이다.

Semantic tag란 Semantic Web (의미론적인 웹)을 구성하기 위해 HTML5 부터 등장한 태그이다.

non-semanticnon-semantic 으로 나누어 지는데 일반적으로 div, span 등이 non-semantic ( 자신의 컨텐츠를 명확히 설명해주지 못한다.) 에 해당하고 header, footer, article, nav, section 등이 자신의 컨텐츠를 명확히 설명해주는 Semantic tag 이다.

그렇다면 semantic tag 를 사용하면 어떤 점이 좋을까?

구글, 네이버와 같은 검색사이트 들은 로봇이란 검색엔진 으로 전세계에 공개되있는 웹의 정보를 수집하고 분석한다. (이것을 크롤링 이라고 부른다.)

로봇은 기본적으로 컨텐츠의 구조를 이해하지 못한다. 텍스트를 읽기만 할뿐 각 컨텐츠 들이 어떻게 연관되어져 있는지에 대해 알지 못하기에 검색어 관련된 정보를 키워드로 찾아내는 검색결과에 있어서 효율적이지 못하다.

하지만 시멘틱 태그를 사용한다면 로봇이 해석이 가능한 명확한 태그이기에 검색 결과를 냄에 있어서 더욱 정확해지고 자연스럽게 포털사이트 상위 노출이 가능하게 된다.

그리고 의미가 명확하기에 가독성도 올라가고 웹 접근성 또한 향상된다.

이렇게 효율적인 semantic tag를 사용할지 말지에 대해서 고민해본다면 어떨까?

Html 에서 이미지를 보여주는 태그는 두개가 있다. img 태그와 태그에 background-image 속성을 추가하는것이다.

Img 태그는 alt 를 이용해 이미지가 어떤 이미지인지 키워드, 설명으로 명확히 의미있게 표현이 가능하다.

반면에 background-image를 사용하면 그저 이미지만 나타낼뿐, 어떤 키워드나 설명으로 표현이 불가하다. 고로 검색엔진에 노출되기 쉽지않다는 것이다.

그렇다면 좋은게 좋은거니까 무조건적으로 img태그를 사용하는게 옳다고 말할수있을까?

그것은 아니라고 생각한다. 웹에 있는 수많은 정보, 표현들이 모두 의미있고 명확히 할 필요는 없다고 생각 하기 때문이다.

어떠한 스타일을 위해 의미없는 태그가 필요할수 있고 최대한 간결하게 의미를 전달하기 위해선 선택과 집중도 필요하다.

무조건 의미있는게 좋다 라고 말하는것 보단 보다 현명하게 개발자 본인 또는 클라이언트의 니즈와 상황을 파악하여 그에 맞게 사용해야 한다.

또 그렇게 주어진것들을 때에 맞게 적재적소로 활용할줄 아는것이 실력있는 개발자 라고 생각한다.

profile
유비무환. 고로 준비합시다.

0개의 댓글