최근에 수행했던 기술 과제에서 다음과 같은 피드백을 받았다.
🙄 시맨틱한 html에 대해 조금 더 고민하면 좋을 것 같습니다.
시맨틱한 html? 그게 뭐야..? HTML은 그냥 화면에 보여지도록 만들기만 하면 되는게 아닌가 👀
언제부턴가 코드를 작성할 때, 화면에 보여지는 요소에 소홀해지고 기능 구현에만 초점을 맞추고 코드를 작성하게 된 것 같다. 이번 기술 과제에서도 이러한 문제들이 많이 보여졌고, 정곡을 찌르는 평가들이었다.. 😂
이력서에서 말씀하신 사용자 중심의 디자인 이해, 사용자 경험 최적화가 과제에서 드러나지 않습니다. 사용자 중심적으로 생각해 개선할 수 있는 UX 포인트가 많습니다.
Figma를 이용하여 와이어프레임을 작업한 점이 인상적이나, 실제 작업물과 유사하지 않아 평가가 어렵습니다.
react-hook-form을 이용하여 유효성을 검증하나, 유저에게 어떤 부분이 유효하지 못한지 구체적으로 알려주지 못하는 점에서 UX가 매끄럽지 못합니다.
시맨틱한 html에 대해 조금 더 고민하면 좋을 것 같습니다.
위에 작성한 내용을 제외하고도 다양한 피드백을 받았지만 가장 기본적인 것이지만 잘 지키고 있지 못하는 시맨틱한 html 이라는 것에 대해서 알아보려고 한다.
01. Sementic Markup
시맨틱(Sementic)이란?
시맨틱 단어 그 자체에는 ‘의미의, 의미론적인’ 라는 뜻이 담겨있습니다. 이로 유추해보았을 때, 시맨틱 태그는 태그 내용에 의미를 부여하는 태그라고 할 수 있습니다. 시맨틱 태그는 웹 페이지에 보이는 것 이상의 정보를 제공합니다.
웹 기술이 발전함에 따라 태그의 내용은 정보로서 높은 가치를 포함해야 한다는 점이 점점 더 중요해지고 있습니다. 그래서 개발자들은 유용한 형태의 데이터로 웹을 만들기 위해 노력해야 합니다. 그러한 노력 중 하나가 바로 시맨틱 태그를 사용하는 것입니다. 이를 통해 사람들은 코드를 읽는 것이 훨씬 쉬워지고, 검색엔진 즉, 기계 입장에서는 콘텐츠를 더 쉽게 이해할 수 있습니다. 따라서 SEO (검색엔진최적화) 성능을 더욱 향상할 수 있습니다.
시맨틱 태그 (Semantic Tag)란?
인터넷의 발전으로 방대한 양의 웹문서가 생기면서, 제각기 일관적이지 않게 생성된 문서 구조로 우리는 웹에서 원하는 정보를 찾을 때 점점 어려움을 겪게 되었습니다.
시맨틱 태그 (Semantic Tag)는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그입니다. 기존 HTML <div> 태그의 기능과 마찬가지로 block element이면서 사이트의 구조(레이아웃)을 설계하기 위해 존재합니다. 시맨틱 태그의 요소로는 <header>, <nav>, <article>, <section>, <footer>, <main> 등이 존재합니다. 이러한 시맨틱 태그 요소는 콘텐츠를 논리적 섹션으로 구성하고 각 부분의 역할과 기능을 전달하는 데 도움이 됩니다.
다시 말해, 시맨틱 태그는 HTML의 구조를 설계하는데 있어 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와주기 위해 만들어진 것입니다.
HTML5 이전에는 <div>, <span>과 같이 콘텐츠 보유 역할은 하지만, 포함된 콘텐츠의 유형이나 해당 콘텐츠가 페이지에서 수행하는 역할에 대해서는 별도로 표시하지 않는 태그를 사용했습니다. 구조를 구분하기 위해 <div> 태그에 id 또는 클래스 등으로 구분하며 구조를 설계했으나, HTML5에서는 시맨틱 태그의 등장으로 좀 더 명시적이면서 직관적인 구조의 설계가 가능해진 것 입니다.
시맨틱 태그 요소의 종류
먼저, 콘텐츠의 의미와 기능에 따라 콘텐츠의 각 부분에 적합한 요소들을 선택해야 합니다. 예를 들어, 로고나 제목 등이 포함된 페이지 상단에는 <header>를 사용하고, 저작권이나 연락처, 소셜 미디어 계정 링크가 포함된 하단에는 <footer>를 사용해야 합니다. 다음으로는 요소가 명확한 계층 구조와 구조를 형성하도록 요소들을 올바르게 중첩해야 합니다. 예를 들어, 페이지의 주요 콘텐츠를 통틀어 둘러싸려면 <main>을 사용해야 하고, 페이지를 여러 주제나 하위 제목 등 목록을 형성하려면 <section>을 사용해야 합니다. 마지막으로는, 스타일 지정이나 스크립팅 목적으로 필요한 경우를 제외하고는 <div>와 같은 의미가 없는 요소나 속성을 사용하지 않아야 합니다.
<header>, <footer>, <section>, <nav>, <article>과 같은 요소들은 HTML5에서 기존의 <div>보다 더 많은 기능을 수행합니다. 이러한 주요 요소는 매크로 구조의 시맨틱 HTML로 작용하여 일반적인 HTML 태그들을 적절한 순서와 위치로 유지하는 데 도움을 줍니다.
<article>
<article> 태그는 독립적인 글을 다루는 데 사용하는 태그입니다. 블로그 게시물, 뉴스 기사, 제품 리뷰 등 독립적으로 배포하거나 재사용할 수 있는 독립형 콘텐츠를 정의합니다.
<aside>
<aside> 태그는 옆에 위치하는 콘텐츠를 담는 태그로, 페이지 콘텐츠를 제외한 콘텐츠를 정의합니다. 주로 문서에서 사이드바를 놓기 위해 사용합니다.
<details>
<details> 태그는 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그입니다. 사용자와 상호작용이 가능하다는 점이 특징이며, 사용자는 버튼을 통해 열고 닫을 수 있습니다. 기본적으로 닫은 상태에 있고, 클릭하면 내용이 보이면서 확장되는 성질을 가집니다.
추가로, <details> 태그와 함께 쓰이는 <summary> 태그는 <details> 에서 보이는 부분을 담당합니다. <summary> 태그는 <details> 태그의 첫 번째 하위 항목이어야 합니다.
<figure> & <figcaption>
<figure> 태그는 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정합니다.
<figcaption> 태그는 <figure> 요소에 대한 캡션을 정의하며, 문서에서 사진의 설명을 추가하기 위해 사용됩니다. 'Caption'이라는 단어 자체가 이미지에 대한 간략한 설명을 의미하는 만큼, <figcaption>은 <figure>에 대한 간략한 설명입니다.
<footer>
<footer> 태그는 문서 또는 섹션의 바닥글을 지정하며, 문서의 아래쪽에 위치합니다. <footer>의 요소에는 일반적으로 연락처 정보, 사이트 맵, 웹사이트를 하나로 묶고 SEO를 강화하는 데 도움이 되는 소셜 미디어 사이트에 대한 링크와 같은 추가 링크가 포함됩니다.
<header>
<header> 태그는 문서나 섹션의 머릿글을 지정하며, 로고, 탐색, 제목 및 기타 소개 정보가 포함된 페이지 상단 부분을 정의합니다. 여기에는 메타 태그 정보, 키워드, 심지어 가져온 CSS 파일이나 스타일 시트도 포함되는 경우가 많습니다.
<main>
<main> 태그는 메인 내용을 담는 태그로, 웹사이트의 텍스트 본문이나 콘텐츠를 나타냅니다. <main> 태그는 문서에서 유일해야 하고, <article>, <aside>, <footer>, <header>, <nav> 등 모든 페이지의 태그 앞에 옵니다.
<nav>
<nav> 태그는 웹사이트의 메뉴, 탭, 탐색경로 등 탐색 링크가 포함된 페이지 부분을 정의합니다.
성공적인 웹사이트를 개발하려면 액세스 가능하고 업데이트된 탐색 섹션이 필요합니다. 어떤 종류의 웹 사이트를 구축하든 사용자가 웹사이트를 적절하게 탐색할 수 있도록 탐색 링크를 추가해야 합니다. <nav> 태그를 사용하면 탐색 링크용으로 지정된 사이트의 특정 섹션을 구성하는 데 도움이 됩니다.
<section>
<section> 태그는 문서의 부분을 의미하는 태그로, 기본 콘텐츠 내의 특정 주제 또는 부제목과 관련된 주제별 콘텐츠 그룹을 정의합니다. <section> 안에 <section>을 넣을 수도 있고, <article>을 이용해 내용을 넣을 수도 있습니다.
시맨틱 태그를 사용해야 하는 이유
의미론적 HTML 태그가 읽고 이해하기 더 쉽다는 분명한 이유(예를 들어 웹 개발자가 코드를 검토하는 경우) 외에도 항상 의미론적 태그를 사용해야 하는 두 가지 구체적인 이유가 있습니다.
읽기 쉬움
웹사이트에서 의미론적 HTML 태그를 사용할 때 가장 매력적인 측면 중 하나는 웹사이트 백엔드의 가독성이 향상된다는 점입니다. 웹 사이트의 코딩이 적절하게 형식화되고 구성되면 눈에 보이는 마크업을 탐색하여 웹 사이트의 다양한 페이지에서 특정 섹션과 특정 영역을 찾는 것이 훨씬 쉽습니다.
웹 사이트를 구축하는 데 사용된 프로그래밍 언어 에 관계없이 웹 사이트 의미 체계를 사용하면 웹 사이트를 최대한 체계적이고 읽기 쉽게 유지할 수 있습니다. 또한 의미론적 HTML 태그를 사용하면 클래스와 ID를 사용할 필요가 없으므로 시간이 절약되고 웹 사이트 코드의 현재 형식을 정리하는 데 도움이 됩니다.
접근성
일반적인 사용자의 경우 웹페이지의 다양한 부분을 쉽게 식별할 수 있습니다. 머리글, 바닥글 및 주요 내용이 모두 시각적으로 즉시 표시됩니다. 하지만 시각 장애가 있거나 스크린 리더에 의존하는 사용자들에게는 이런 것들이 쉽지 않습니다.
하지만 HTML 의미 체계 태그를 적절하게 사용하면 화면 판독기가 콘텐츠를 더 정확하게 전달하므로 독자가 콘텐츠를 더 잘 이해할 수 있습니다.
검색엔진 최적화
시맨틱 태그를 사용하여 적절하게 코딩 된 웹사이트는 Google, Bing, Yahoo! 및 DuckDuckGo와 같은 검색 엔진에서 가상으로 크롤링 및 감지될 가능성이 훨씬 더 높습니다. 검색 엔진은 가상 스파이더를 사용하여 웹을 크롤링하므로 가능한 최상의 결과를 얻으려면 HTML5 의미 체계를 올바른 순서로 유지하는 것이 필수적입니다.
위에서 살펴보았던 바와 같이 시맨틱 태그 (Semantic Tag)는 웹페이지의 접근성을 향상시켜주고, 검색엔진에 더 친화적으로 만들어 주기도 합니다. 또한 콘텐츠의 명확하고 일관된 흐름과 구조를 만들어 웹페이지의 가독성까지 향상된다.
마무리
오늘 배운것들을 정리하면서 “와 내가 지금까지 시맨틱 태그, 일반적인 태그들도 상황을 고려하지도 않고 코드를 그냥 x나 대충 짰구나 💩” 라는 것을 느끼게 되었던 것 같다…
그렇다고 다음부터는 항상 상황에 맞는 태그를 사용해서 접근성을 높이고 뭐 SEO를 향상시키고 할 수는 없겠지만, 이전보다는 코드가 더 나아졌으면 또한 내가 사용한 태그를 왜 사용했는지에 대해서 누군가에게 설명할 수 있는 그런 사람이 되면 좋겠습니다 😀