HTML 태그, 굳이 div만 고집할 필요 있나요? (커스텀 태그의 재발견)

안녕하세요. 풀링포레스트 테크리드 김영태입니다.

개발자라면 누구나 한 번쯤 겪어봤을 상황이 있습니다. 바로 'div 지옥(div soup)'입니다. 레거시 코드를 열었는데, 끝도 없이 중첩된 <div> 태그들이 반겨주는 그 순간 말이죠. 닫는 태그 </div>가 대체 어느 <div>랑 짝인지 찾다가 눈이 침침해지는 경험, 저만 해본 건 아닐 겁니다.

오늘은 이 지긋지긋한 div 지옥에서 벗어날 수 있는 아주 간단하면서도 조금은 파격적인 방법을 소개해드리려고 합니다. 바로 "HTML 태그를 내 마음대로 지어내기"입니다.

우리가 흔히 쓰는 방식

보통 우리는 의미 없는 컨테이너가 필요할 때 습관적으로 <div>나 <span>을 사용하고 클래스 이름을 붙입니다.

<div class="product-card">
  <div class="card-header">
    <span class="badge-new">New!</span>
  </div>
  <div class="card-body">
    상품 설명...
  </div>
</div>

이 코드는 아주 익숙하죠. 하지만 닫는 태그 쪽을 보세요. </div>가 세 번 연달아 나옵니다. 만약 코드가 길어져서 스크롤을 내려야 한다면, 이 닫는 태그가 card-header의 끝인지, card-body의 끝인지, 아니면 product-card 전체의 끝인지 헷갈리기 시작합니다.

태그를 내 마음대로 만든다면?

그런데 말이죠, 브라우저는 우리가 모르는 태그를 만나면 에러를 뱉는 게 아니라, 그냥 '아무 기능 없는 일반 요소(generic element)'로 취급한다는 사실 알고 계셨나요? 이걸 이용하면 코드를 이렇게 바꿀 수 있습니다.

<product-card>
  <card-header>
    <badge-new>New!</badge-new>
  </card-header>
  <card-body>
    상품 설명...
  </card-body>
</product-card>

어떤가요? 훨씬 직관적이지 않나요?

CSS도 똑같이 적용됩니다. 클래스 선택자(.) 대신 태그 선택자를 쓰면 그만입니다.

product-card {
  display: block; /* 기본적으로 인라인 취급될 수 있으니 block으로 지정 */
  border: 1px solid #ddd;
}

badge-new {
  color: red;
  font-weight: bold;
}

이렇게 작성하면 가독성이 비약적으로 상승합니다. </card-header>를 보면 누가 봐도 "아, 헤더가 여기서 끝나는구나"라고 바로 알 수 있죠. 주석을 달거나, 닫는 태그 개수를 세고 있을 필요가 없습니다.

이거 정말 안전한가요?

"아니, 팀장님. 표준도 아닌 태그를 막 써도 되나요? 나중에 문제 생기면 어쩌려고요?"

솔직히 저도 처음엔 거부감이 들었습니다. 웹 표준을 준수해야 한다는 강박이 있으니까요. 하지만 이 방식은 단순한 '꼼수'가 아니라 표준화된 동작 방식에 기반을 두고 있습니다. 브라우저는 알 수 없는 태그를 만나면 HTMLUnknownElement로 처리하고 렌더링을 계속 진행합니다.

단, 한 가지 중요한 규칙이 있습니다. 태그 이름에 하이픈(-)을 포함하는 것입니다.

예를 들어 <card>보다는 <my-card>나 <pool-card>처럼 쓰는 것이죠. 왜냐고요? HTML 표준 스펙에서 미래에 새로운 태그가 추가될 때 하이픈이 들어간 이름은 피하기로 약속되어 있거든요. 즉, 지금 내가 만든 <cool-button>이라는 태그가 나중에 브라우저의 정식 태그와 충돌해서 레이아웃이 깨질 일은 없다는 뜻입니다. (이건 Web Components의 Custom Elements 스펙과도 연결되는 맥락입니다.)

언제 쓰면 좋을까요?

물론 모든 <div>를 커스텀 태그로 바꾸라는 말은 아닙니다.

1. <article>, <section>, <nav>, <header> 처럼 이미 존재하는 시맨틱 태그(Semantic Tag)가 있다면 당연히 그걸 우선 사용해야 합니다. 웹 접근성과 SEO를 위해서라도요.

2. 하지만 단순히 디자인을 위해 <div>와 <span> 사이에서 고민해야 하는 상황이라면?

3. 컴포넌트 구조가 복잡해서 </div> 지옥이 예상되는 상황이라면?

이럴 때는 과감하게 의미를 담은 커스텀 태그를 사용해보세요.

저희 팀에서도 최근 사내 어드민 페이지 일부를 개편하면서 이 방식을 실험적으로 도입해봤습니다. 복잡한 대시보드 그리드 구조를 잡을 때 <dashboard-grid>, <widget-panel> 같은 태그를 사용하니, 나중에 유지보수할 때 구조 파악이 훨씬 빨라졌다는 피드백을 받았습니다. 특히 신규 입사자분이 코드를 읽을 때 "이건 컴포넌트 이름이랑 태그가 일치해서 이해하기 편하네요"라고 하더군요.

마치며

개발자로서 우리는 늘 '정답'을 찾으려 노력합니다. 하지만 때로는 정해진 틀(여기서는 div)을 살짝 벗어나는 것이 더 효율적이고 명확한 해결책이 될 수 있습니다. 기술은 도구일 뿐이고, 우리의 목표는 결국 '읽기 좋고 유지보수하기 좋은 코드'를 만드는 것이니까요.

오늘 당장 프로젝트 전체를 뜯어고칠 필요는 없습니다. 다만, 다음번에 복잡한 마크업을 짤 때 "여기 또 div 써야 하나?" 싶다면, 슬쩍 나만의 태그를 하나 지어서 넣어보세요. 생각보다 쾌적한 개발 경험을 하실 수 있을 겁니다.

읽어주셔서 감사합니다. 오늘도 버그 없는 하루 되세요!