중첩 구조 규칙

UI 구조의 안정성을 유지하기 위해 중첩 구조에 대한 명확한 규칙을 정의합니다. 중첩은 허용될 수 있지만, 아무 구조나 중첩될 수는 없습니다.

이 문서는 구조 중첩이 허용되는 경우와 금지되는 경우를 구분하기 위한 기준을 설명합니다.

중첩 구조의 기본 원칙

중첩 구조는 다음 원칙을 따릅니다.

구조적 의미가 있는 경우에만 중첩을 허용합니다.
스타일 범위 제어를 위한 중첩은 허용하지 않습니다.
구조 책임이 겹치는 중첩은 금지합니다.
중첩은 구조를 명확하게 만들 때만 사용합니다.

중첩은 편의를 위한 수단이 아니라, 구조를 표현하기 위한 설계 선택입니다.

구조적 의미가 다른 단위는 중첩할 수 있습니다. 컴포넌트(card) 안에 내부 요소(i_body)가 들어가고, 그 안에 또 다른 내부 요소(i_title)가 들어가는 구조는 각 단위의 역할이 명확히 구분되므로 허용됩니다.

<article class="card">
  <div class="i_thumb"><img src="cover.jpg" alt="상품 표지"></div>
  <div class="i_body">
    <h3 class="i_title">중첩 구조 규칙</h3>
    <p class="i_text">구조적 의미가 있는 중첩만 허용합니다.</p>
  </div>
</article>

구조 범위가 다른 경우의 중첩

서로 다른 구조 범위를 가진 UI는 중첩이 아닌 조합 관계로 함께 배치될 수 있습니다.

이 경우 각 구조는 독립성을 유지한 채 함께 사용됩니다.

상위 구조가 하위 구조의 일부가 되지 않습니다.
책임과 의미는 서로 침범하지 않습니다.
구조 간 의존성은 생성되지 않습니다.

같은 구조 범위의 중첩 금지

같은 구조 범위를 의미하는 UI는 중첩될 수 없습니다.

같은 구조 범위가 중첩될 경우 다음 문제가 발생합니다.

구조 책임의 경계가 모호해집니다.
접두사 의미가 중복됩니다.
내부 요소와 블록의 구분이 무너집니다.
구조 해석이 코드만으로 불가능해집니다.

같은 구조 범위의 중첩은 구조 설계 오류로 판단합니다.

같은 구조 범위의 단위를 그대로 겹쳐 쓰면 어느 것이 상위 구조인지 코드만으로 알 수 없게 됩니다. 컴포넌트 안에 같은 컴포넌트(card 안에 card), 페이지 안에 다른 페이지(page_home 안에 page_about)를 넣는 구조가 이에 해당합니다.

<!-- ❌ 나쁜 예: 컴포넌트 안에 같은 범위의 컴포넌트를 중첩 -->
<article class="card">
  <div class="i_body">
    <article class="card"><div class="i_body">중첩된 카드</div></article>
  </div>
</article>

<!-- ❌ 나쁜 예: 페이지 안에 또 다른 페이지를 중첩 -->
<main class="page_home">
  <main class="page_about">소개 페이지</main>
</main>

같은 범위가 반복될 때는 중첩이 아니라 내부 요소(i_item)로 분리하거나 조합 관계로 배치합니다.

<!-- ✅ 좋은 예: 같은 항목은 내부 요소로 나열 -->
<ul class="card">
  <li class="i_item">첫 번째 항목</li>
  <li class="i_item">두 번째 항목</li>
</ul>

컴포넌트 중첩 제한 규칙

컴포넌트는 재사용 가능한 최소 구조 단위로 설계됩니다.

컴포넌트 내부에 또 다른 컴포넌트가 중첩될 경우:

구조 범위가 겹치게 됩니다.
접두사 기준이 깨집니다.
컴포넌트의 독립성과 재사용성이 저하됩니다.

이러한 이유로 컴포넌트 내부에 컴포넌트를 직접 중첩하는 구조는 허용하지 않습니다.

중첩 구조 판단 기준

중첩 구조를 설계할 때는 다음 기준으로 판단합니다.

같은 구조 범위가 중첩되고 있는가
내부 요소로 해결 가능한 구조는 아닌가
새로운 블록으로 분리하는 것이 더 명확하지 않은가
중첩으로 인해 책임이 겹치지 않는가

중첩이 필요하다고 느껴질수록, 구조 설계를 다시 검토해야 합니다.

중첩 구조 규칙의 목적

중첩 구조 규칙은 UI 구조를 단순하게 유지하고, 네이밍 시스템과 구조 모델의 일관성을 보장하기 위한 기준입니다.

중첩이 통제될수록 UI 구조는 더 명확하고 예측 가능해집니다.