[웹 표준 시리즈 #2] 눈에 보이지 않는 구조의 힘: BEM과 시맨틱 마크업의 시너지

지난 1부에서는 웹 접근성이 우리 모두를 위한 '보편적 권리'라는 철학을 다뤘습니다. 그렇다면 이 철학을 실제 코드로 어떻게 구현할 수 있을까요? 오늘은 그 해답인 '시맨틱 마크업'과 'BEM 방법론'의 환상적인 만남에 대해 이야기해 보겠습니다.

---

1. 시맨틱 마크업: 태그에 '이름'이 아닌 '의미'를 담다

우리는 흔히 웹페이지를 만들 때 습관적으로 <div> 태그를 사용합니다. 하지만 <div>는 아무런 의미가 없는 빈 상자와 같습니다. 반면 시맨틱 태그(Semantic Tags)는 그 자체로 이름표를 달고 있습니다.

• <header>: "여기는 도입부예요."
• <nav>: "여기서 다른 곳으로 이동할 수 있어요."
• <main>: "여기가 진짜 중요한 핵심 내용이에요."
• <article>: "이 내용은 이 자체로 하나의 완성된 글이에요."

이렇게 태그를 골라 쓰는 것만으로도 검색 엔진(SEO)은 우리 사이트를 더 잘 이해하고, 스크린 리더를 사용하는 사용자는 길을 잃지 않고 원하는 정보를 찾아갈 수 있습니다.

---

2. BEM 방법론: 코드에 '논리'를 더하다

태그로 뼈대를 세웠다면, 이제 그 뼈대에 이름을 붙일 차례입니다. 이때 빛을 발하는 것이 바로 BEM(Block-Element-Modifier) 방법론입니다.

BEM은 단순히 이름을 예쁘게 짓는 규칙이 아닙니다. "이 요소가 어디에 속해 있고, 어떤 기능을 하는지"를 코드만 보고도 알 수 있게 만드는 논리적인 지도와 같습니다.

• Block(블록): 독립적인 컴포넌트 (예: .c-card)
• Element(요소): 블록 내부의 구성원 (예: .c-card__title)
• Modifier(수식어): 상태나 외형의 변화 (예: .c-card--featured)

---

3. 왜 이 둘이 만나야 할까요? (시너지 효과)

시맨틱 태그와 BEM이 만나면, 웹사이트는 '기계와 인간 모두가 읽기 편한 완벽한 구조'가 됩니다.

1. 유지보수의 혁명: 6개월 뒤에 내가 짠 코드를 다시 봐도, 혹은 동료가 내 코드를 봐도 어디를 수정해야 할지 명확해집니다.
2. 접근성의 자동화: 논리적인 BEM 구조는 자연스럽게 논리적인 문서 구조를 유도합니다. 이는 곧 훌륭한 웹 접근성으로 이어지죠.
3. 전문성의 증거: Airbnb 스타일 가이드처럼 엄격한 규칙을 준수하며 BEM으로 설계된 코드는, 그 자체로 제작자의 깊은 고민과 전문성을 증명합니다.

---

전문가의 팁: "의도가 담긴 코드가 좋은 코드입니다"

우리가 <div> 지옥에서 벗어나려고 노력하고, 클래스 하나에도 언더바 두 개(__)를 써가며 고민하는 이유는 결국 하나입니다. '코드로 소통하기 위해서'입니다.

브라우저에게는 정확한 정보를 전달하고, 동료 개발자에게는 명확한 구조를 보여주며, 사용자에게는 제약 없는 자유로움을 주는 것. 이것이 바로 시맨틱 마크업과 BEM이 추구하는 진정한 웹 표준의 모습입니다.

---

BEM vs 일반 코드 구조 비교 (Before & After)

🚫 Before: 의미 없는 div 지옥 (구조 파악 불가)

<div class="box-wrap">
  <div class="top-title">공지사항</div>
  <div class="txt">서비스 점검 안내입니다.</div>
  <div class="go-btn red">확인</div>
</div>

"기계(AI/스크린리더)는 이것을 '그냥 의미 없는 상자들'로 인식합니다."

  
✅ After: 시맨틱 + BEM 구조 (명확한 논리)

<article class="c-notice-card">
  <h2 class="c-notice-card__title">공지사항</h2>
  <p class="c-notice-card__desc">서비스 점검 안내입니다.</p>
  <button class="c-notice-card__btn c-notice-card__btn--f point">
    확인
  </button>
</article>

"기계와 사람 모두 '중요한 공지사항 카드'라는 걸 즉시 이해합니다."
  

 

---

 

다음 이야기: 당신의 웹사이트가 검색창 첫 줄에 걸리지 않는 이유

구조를 잘 잡았다면, 이제 이 노력이 어떻게 비즈니스 가치로 연결되는지 알아볼 차례입니다. 다음 3부에서는 [구글이 사랑하는 웹 표준(SEO)]을 주제로, 잘 짜인 코드가 어떻게 트래픽을 불러오는지 파헤쳐 보겠습니다.

 

2부 핵심 요약

• 시맨틱 태그는 태그 자체에 의미를 부여해 기계(AI, 스크린 리더)와 소통하게 한다.
• BEM 방법론은 이름에 논리를 부여해 인간(개발자, 퍼블리셔)과 소통하게 한다.
• 이 둘의 결합은 유지보수성과 웹 접근성을 동시에 잡는 가장 강력한 무기다.

 

💻 코드 밖에서 드리는 보충 설명

위 본문에서 언급한 BEM 명명 규칙에서 클래스명 앞에 붙은 c-는 Component를 의미하는 접두사입니다. 이는 프로젝트 규모가 커질 때 유틸리티 클래스와 컴포넌트 클래스를 구분하기 위한 실무적인 팁입니다.

또한, 자바스크립트로 상태를 변경할 때는 클래스 자체를 바꾸기보다 .is-active와 같은 상태 클래스를 추가하거나, aria-expanded="true" 같은 접근성 속성을 바닐라 자바스크립트로 제어하는 것이 웹 표준에 더욱 부합하는 방식입니다.