“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
마크업이란?
마크업(Mark up)이란 마크(Mark)로 둘러 싸인 언어로 태그(Tag)로 둘러싸여있다고 표현하기도 합니다.HTML, XML 등의 마크업 언어들은 문서의 구조를 정의합니다. 쉽게 말하면 문서의 골격에 해당하는 부분을 작성하는데 사용합니다.
시멘틱 마크업 (Semantic markup)
시멘틱(Semantic)사전적 뜻은 "의미론적인" 으로 해석할 수 있는데, 이것은 마크업을 할 때 의미에 부합하는 태그를 사용하라는 뜻을 가지고 있습니다. 시멘틱한 마크업을 사용하는 이유는 HTML 문서들은 보통 시각적인 방법으로 사용자들에게 정보를 전달하지만, 모든 사람들이 정보를 동일하게 받아들일 수 있는 환경이 아닐 수 있다는 점을 유의해야 합니다.
예를 들어 시각장애인의 경우 HTML 문서의 콘테츠 정보를 음성으로 전달해 주어야 하는데 이런 경우 전달하려는 태그를 적절해야 합니다.
실제 마크업 작업자마다 콘테츠의 의미를 해석하는 차이가 조금 있을 수 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것이 중요합니다.
시멘틱 마크업의 특징은 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리합니다. 또한 장애를 가진 사람과 장애를 가지지 않는 사람 모두가 이용할 수 있는 방식인 웹전근성 측면에서 의미를 훨씬 잘 파악할 수 있습니다. 개발자 측면에서단순한 div, span으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 좋고 유지와 보수를 쉽게 만들어 줄 수 있는 특징을 가지고 있습니다.
시멘틱 마크업의 태그
- 헤더 <header> : 대부분 기업의 로고나 주요한 정보를 담을 때 사용한다.
- 네비 <nav> : 메뉴가 여러개 모여있을 때 사용한다.
- 메인 <main> : 전체 컨테츠를 나타낼 때 사용한다.
- 메인 안 <section> <article> : 주로 중요 컨테츠를 나타낼 때 사용한다.
- <article> : 독립적인 컨테츠를 나타낼 때 사용한다. ex) 광고,연관링크,정보 등
- 맨 아래 <footer> : 부가정보나 링크를 나타낼 때 사용한다.
이처럼 시멘틱 마크업 태그는 용도에 맞게 사용해야 합니다. 시멘틱 마크업은 모두가 편히 볼 수 있는 사용자 중심의 가독성으로 이루어져 있습니다. 시멘틱 마크업을 통해 우리가 보고자 하는 것들을 한눈에 볼 수 있고 깔끔하게 정돈된 느낌을 받을 수 있습니다.
논리적 순서 마크업 (Logical sequence markyp)
시멘틱한 마크업과 함께 논리적인 순서에 의해 마크업을 하는 것도 매우 증요합니다. 논리적 순서에 의한 마크업은 키보드나 터치패드와 같은 입력 장치만으로 HTML 문서와 모든 콘테츠를 논리적 순서로 이동하여 사용할 수 있도록 하는 입력장치 접근성과 밀접한 관련이 있습니다.
디자인의 시각적인 흐름보다는 내용에 대한 논리적 흐름 순서를 잘 파악하여 마크업을 하는 것이 중요합니다.
이미지에 나와 있는 것처럼 먼저 메인 에서 위쪽 오른쪽 상단에 있는 메뉴를 클릭하면 메뉴를 포함한 컨테츠가 뜨면면서 닫을 수 있는 닫기 버튼도 등장합니다. 그런데 메뉴를 클릭 했는데 닫기 버튼이 나오는 상황이 발생한다면 사용할 때 매우 불편을 겪을 것 입니다. 이처럼 논리적 순서 마크업을 사용하는 이유는 사용자가 이용할 때 불편을 겪지 않고 엉뚱한 방향성으로 흘러가지 않도록 올바른 길잡이를 해주기 때문입니다.