Semantic tag에 빠지게 되는 이유

옛 취미에서 새로운 취미로

 아주 옛날 PHP, MySQL로 웹 게시판을 만드는 취미(라기 보다는 모방)을 가졌지만 이제는 AI를 통해 간단한 웹사이트를 제작해 보는 것이 취미이다. 그런데 요즘 Semantic HTML이라는 것에 빠져 있다. 이유는 가독성이 향상되고 구글봇, 예티와 같이 기계들도 읽어내기 쉬워지기 때문이다. 그런 의미에서 요즘 알게 된 Pico CSS Framework도 마음에 든다. 일단 Semantic HTML을 작성해 놓으면, 따로 class를 지정하지 않아도(classless css framework) 적당히 예쁘게 웹 사이트를 꾸며준다. 작은 사이드 프로젝트를 하는데, 어느 정도 미관을 위해 CSS를 만지다 보면 하루가 훌쩍 지나가기 일쑤이기 때문이다.

 

 

모바일 중심의 웹 환경

 Picocss framework를 비롯한 Semantic HTML에 관심이 생긴 또 다른 이유가 있다. 바로 우리의 인터넷 환경이 모바일 중심으로 이미 상당히 많이 기울었기 때문이다. 무신사의 경우 데스크탑 웹페이지를 모바일로 바꾸었다. 그리고 다이소몰이나 기타 온라인 쇼핑 홈페이지들이 모바일 전용만 유지하고 있다. 즉 데스크탑 환경에 더 이상 투자하거나 유지 및 보수를 할 필요성을 느끼지 못하고 있다고 한다. 즉 모바일 사용자의 비율이 절대적인 9에 가깝고 데스크탑 유저들은 1~2 정도의 비율이라고 한다. (물론 데스크탑 홈페이지가 편하면 많은 사람들이 데스크탑 홈페이지를 이용해서 모바일과 데스크탑의 이용자 비율이 6:4까지는 유지한다.)

 

 

 물론 목적에 따라 다르겠지만, 이제 온라인 웹 페이지, 웹 서비스, 웹 앱을 만들 경우에 다음 요소가 상당히 중요하다.

1. "데스크탑보다는 모바일 친화적인 서비스"
2. "메뉴나 사이트맵의 경우 2단계 이상의 하위 요소를 넣지 않기"
3. "쓸데 없이 세세한 요소를 굳이 보여주지 않기"
4. "마음에 드는 상품부터 결제까지 2~3단계 이상을 거치지 않게 만들기"
5. "사용자는 스타일의 화려함 보다 직관적이고 간편함에 이끌린다."
6. "아이디어와 기능이 스타일보다 훨씬 더 중요하다"

 

Pico CSS Framework의 적합성

 이런 나의 생각 때문에, Picocss Framework를 사용해보자는 마음이 생겼다. 그리고 이 프레임워크는 Semantic HTML에 맞춰 개발하기만 하면 자연스럽게 스타일링이 된다. 즉 꾸미는 것에 할애할 시간에, 아이디어에만 집중하면 된다.(이전에 잠깐 사용했던 Open Props는 Tailwind css처럼 유틸리티가 풍부하지만 꾸미는데 시간 소요가 너무 많이 들었다.)

 요즘 하루가 멀다하게 AI와 관련된 대기업과 스타트업들의 발표가 쏟아져 나온다. 즉 아이디어를 바로 서비스에 연결시켜서 접목하는데만 해도 시간이 부족하다는 뜻이다. 나와 비슷한 생각을 가지고 있는 당신에게 꼭 Semantic HTML과 Picocss를 추천하고자 한다.

 

 

 

 

태그에 대한  설명

<header>

웹페이지 또는 응용프로그램의 상단 부분을 정의한다. 일반적으로 로고, 제목, 내비게이션 메뉴 등이 포함된다.

<nav>

메뉴, 목차, 인덱스 등의 링크를 포함할 수 있다.

<main>

문서의 주요 콘텐츠를 정의한다. 일반적으로 중심 내용, 앱의 주요 기능 등이 여기에 위치한다.

<section>

문서의 독립적인 섹션을 정의한다. 챕터, 헤더, 푸터 등의 구분을 위해 사용한다.

<article>

독립적이고 구분 가능한 컨텐츠를 말한다. 블로그 포스트, 뉴스 기사, 댓글 등이 해당 된다.

<aside>

문서의 보조 콘텐츠를 정의한다. 사이드바, 광고, 목차 등의 별도 콘텐츠가 여기에 속한다.

<footer>

웹페이지 또는 응용프로그램의 하단 부분을 말한다. 일반적으로 작성자, 저작권, 연락처 정보 등이 포함된다.

 

 

참고하면 좋은 사이트

Picocss framework Officialsite (https://picocss.com)

Web.dev (https://web.dev)

Pagespeed Insights (https://pagespeed.web.dev/)