[241224 팀프로젝트 코딩시작]
시멘틱 웹이 뭐임?
팀프로젝트를 진행하기 위해서 HTML 골격을 만들고 css를 넣고 작업을 하던 중에 의문이 생겼다.
사전캠프 프로젝트에서는 기본 HTML, CSS, JS 코드를 제공해주고 빈곳을 채우시오.
그리고 진행 순서와 힌트를 곳곳에 두어서 찾아보며 진행하기 수월하였다.
그때에도 HTML요소들을 보면서 '왜, 이런 요소들을 사용하였을까?' 란 생각이 살짝 스쳐 지나가긴 했지만 찾아볼 생각은 못했다.
지금 내가 직접 구조를 만들고 이전 작업을 참고하여 코드생성하려니 찾아보게 되었다.
Semantic Web이란
semantic의 의미부터 보면 "의미의", "의미론적" 으로 해석된다.
어떤 웹(페이지)를 만들었을 때, 해당 웹의 의미, 의도를 파악할 수 있단 소리겠지?
그렇다면 무엇으로 파악을 한단 말일까? 내용(정보)일까?
웹페이지의 정보는 보이는 면은 사람이 해석할수 있는 부분으로 되어있고, 그 이면에는 컴퓨터가 해석할 수있는 언어로 되어있다.(컴퓨터언어로 작성한 사람도 사람이다:개발자)
사람이 작성한 언어를 컴퓨터가 어떤 규칙에 의해 해석 후 재가공 하여 보여줄수 있게 만들기 위해 의미를 부여한것? 정도로 해석하면 될까? 하는 생각이 들었다.
어차피 컴퓨터가 해석할 수 있는 언어로 작성 했는데 왜? 라는 의문의 생긴다면...
하루에 웹에 접속해서 검색을 하는 횟수가 얼마나 되는가? 어떤 단어(keyword)로 검색을 한다면 검색된 정보는 얼마나 되며, 그중에 내가 원하는 정보는 얼마나 되는가?
코딩의 시멘틱은 정보와 코드의 연결인것 같다.
문서의 한 페이지에서 특정 키워드를 찾는것과 정보가 차고 넘치는 웹상에서 특정 키워드로 검색했을 때, 그 결과의 양도 엄청날 것이고 정확성에서도 정보를 걸러내는데 한참 소요될 것이다.
이 과정에서 코드에 의미를 부여하여 웹페이지를 만들어 컴퓨터가 자료를 모으고 해석 후 원하는 정보에 근접한 사이트를 우리에게 제공할수 있게 해준다면 정보를 검색한 사용자의 수고는 좀 줄어들 것이다.(SEO:검색엔진 최적화)
내가 이전에 조금 작업해본 HTML코딩은 내가 원하는 모양으로 화면에 나타나면 됬었다.
지금은 구역을 나누고 의미를 주기위해 특정 요소들을 사용한다.
HTML에서 시멘틱 요소 : 시멘틱 태그
<h1>, <img> 태그들이 가장 이해하기 쉬웠다.
위 코드들은 표현되는 모양은 같다. 하지만 <h1>을 사용하여 제목을 작성 하였을 때와 <div>로 만든 제목, 둘중 어떤 코드가 더 제목같을까? 단순히 코드량 뿐만 아니라 많은 태그들 중에서 코드를 작성한 사람이 '이게 제목임' 하고 의도를 알려주는 부분은 <h1>으로 더 표현하기 좋다.
검색엔진에서 무언가를 검색했을때도, 코드를 보는 개발자도<h1>으로 작성한 코드를 보고 "니가 제목이구나"를 알아 챌 수 있다.
<table>, <img> 태그를 보면 어떤 생각이 드는가?
표, 이미지 바로 알수 있다. 태그만 보아도 해당 태그로 작성된 내용(content)가 무엇을 의미하는지 알수 있다. 태그가 설명을 해주는 것이다.
<div>는 보통 어떤 덩어리들을 묶어줄때 많이 사용하는 박스다. 그안에 작성된 내용이 무엇인지 직관적으로 알수 없다. 의미부여를 해주지 못하는 태그들이다.
