운동이 끝나고 닭가슴살을 먹으며 Youtube를 보려다가, 유명한 사이트는 어떻게 만들어졌는지 살펴나보자 싶어서, Nike 사이트를 접속했습니다.
개발자 도구를 켜자 Chrome의 확장프로그램 중 Vue.js devtools이 활성화되는 것이 너무 반가웠습니다. 잠시 반가운 마음은 뒤로 하고 구조를 살펴보았습니다.
📌 <figure> 태그
중첩된 session들이 보이고 생소한 태그인 figure를 발견했습니다. 검색해보니 MDN 페이지에서는 아래와 같이 figure 태그를 설명하고 있습니다.
HTML <figure> 요소는 독립적인 콘텐츠를 표현합니다. <figcaption> 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다
"왜 굳이 생소한 figure 태그를 사용하지?"라는 생각이 먼저 들었습니다. header, footer, session, article, aside나 nav 같은 시맨틱 태그는 익숙하지만, figure 같이 생소한 태그를 사용하면 여러 개발자들과 협업할 때 힘들지 않을까 라는 생각이 들어, 다른 개발자분들은 익숙히 사용하고 있는지 오픈톡방에 어떨때 사용되는지 질문을 했습니다.
우문에 대한 현답을 들으며 생각한 것은, 결국 아직도 제 자신이 HTML5를 잘 활용하지 못하고, non-semantic 태그들을 주로 사용하고 있는 것을 깨달았습니다. 그럼 왜 non-semantic한 태그들을 사용하는 것보다 semantic한 태그들을 사용해야하는 지 스스로를 고칠 이유가 필요했습니다.
🤷♂️ Semantic Tag란
semantic tag란 무엇일까요? 우선 semantic이라고 하는 것은 Chrome 확장 프로그램 "Tooltip Dictionary"에 따르면 "의미의", "의미론의"라는 뜻이라고 합니다.
non-semantic 요소인 div 태그나 span 태그를 생각해보면, 해당 태그들은 내포한 내용에 대해 어떠한 설명도 해주지 못합니다. id나 class를 통해 식별할 수 있지만 semantic 태그들에 비하면 직관성이 떨어집니다. 예를 들어, header, footer 같은 태그는 포함된 내용을 명확히 나타내고 있습니다.
이것은 검색엔진에게도 더 나은 직관성을 제공합니다. 검색엔진은 non-semantic한 div 태그나 span 태그보다 semantic한 태그에서 더 많은 정보를 해석할 수 있습니다.
결국 시맨틱 태그는 검색엔진 뿐만 아니라 개발자에게 보다 명확히 의미를 설명해 줄수 있습니다. 앞으로는 적절하게 시맨틱 태그를 활용하도록 지향해보아야 겠습니다. 물론 팀장님이 안된다고 하면 안되요
다양한 태그들은 이 문서를 참고하세요.
👏 회고
fact
- Nike 홈페이지를 살펴보았습니다.
feeling
- 아직도 HTML5에 익숙하지 않은것 같아 슬픕니다.
finding
- figure 태그를 알았습니다.
- semantic 태그에 대해 복기하였습니다.
future action
- 진행중인 이모봇 프로젝트에 시맨틱 태그들을 활용하겠습니다.
feedback
- 이번주 토요일날 프로젝트 리뷰를 진행하겠습니다.
