네이밍 시스템

네이밍 시스템은 클래스 이름을 단순한 시각 표현이 아닌, 구조와 역할을 전달하는 설계 기준으로 정의합니다. 네이밍은 개인의 취향이 아니라, 팀 전체가 공유하는 규칙이며, 코드 수준에서 구조를 드러내는 방법론입니다.

네이밍 시스템의 목적

네이밍 시스템은 다음과 같은 목적을 가집니다.

클래스 이름은 구조와 역할이 드러나도록 설계하는 것을 원칙으로 합니다.
CSS 충돌과 예측 불가능한 스타일 확산을 방지합니다.
구조 중심 UI 설계를 코드 수준에서 명확히 드러냅니다.
협업 환경에서도 동일한 해석이 가능하도록 합니다.
중첩 구조에서도 소속 범위가 명확히 구분되도록 합니다.

기본 원칙

네이밍은 다음 원칙을 따릅니다.

클래스 이름은 어떻게 보이는지가 아니라 무엇인지를 표현합니다.
직접적인 색상·수치 기반 표현은 지양합니다.
구조와 관계가 이름에 드러나야 합니다.
모든 네이밍은 일관된 규칙과 명확한 범위를 가집니다.

✅ 좋은 예 (구조 중심 네이밍)

<div class="card">
    <div class="i_header"></div>
    <div class="i_body"></div>
</div>

❌ 나쁜 예 (스타일 중심 네이밍)

<div class="blue_box big_text rounded shadow">
  ...
</div>

요소는 역할로 이름 짓는다 (태그 타입이 아니라)

내부 요소의 이름은 그 요소가 무슨 일을 하는가(역할) 를 기준으로 정합니다. button·div·img 같은 HTML 태그 타입을 이름으로 삼지 않습니다.

닫기 버튼 → i_close (O) / i_btn (X)
검색 영역 → l_search (O) / l_input (X)
업그레이드 CTA 버튼 → l_pro (O) / l_btn (X)

같은 태그라도 역할이 다르면 다른 이름을 가지며, 역할이 같으면 같은 이름을 씁니다. 타입 기반 이름(l_btn)은 같은 태그가 여러 개일 때 충돌하고, 구조적 의미를 드러내지 못합니다.

접두사 기반 네이밍

클래스의 역할과 소속 범위를 명확히 하기 위해 접두사(prefix) 기반 네이밍 체계를 사용합니다.

접두사는 단순 분류가 아니라, 구조적 스코프(scope)를 드러내는 장치입니다.

각 접두사의 의미·구조 범위·단독 사용 규칙은 접두사 기준표를 정본으로 삼습니다. 이 문서는 규칙 자체가 아니라, 왜 이런 접두사 체계를 선택했는가를 설명합니다.

컴포넌트는 왜 접두사를 쓰지 않는가

레이아웃과 페이지는 범위(scope)를 명확히 하기 위해 접두사를 사용합니다. 반면 컴포넌트는 접두사 없이 의미 중심의 단일 이름으로 정의합니다.

컴포넌트는 특정 위치가 아니라 어디서든 재사용되는 단위입니다.
접두사는 소속 범위를 고정하므로, 재사용을 전제로 하는 컴포넌트에는 오히려 방해가 됩니다.
이름 자체가 곧 컴포넌트의 정체이므로, 범위 표식 없이 의미만으로 충분합니다.

즉, 접두사의 유무는 범위가 고정된 구조인가, 재사용되는 구조인가를 구분하는 근거입니다.

내부 요소 접두사를 나눈 이유

기존에는 모든 내부 요소를 i_로 통일했습니다. 그러나 레이아웃·페이지·컴포넌트가 서로 중첩되는 구조에서 접두사가 동일하면, 어떤 블록에 속한 요소인지 해석이 모호해지는 문제가 발생했습니다.

이를 해소하기 위해 내부 요소 접두사를 블록 유형별로 i_ / p_ / l_로 분화했습니다. 접두사는 요소의 성격이 아니라 소속 범위를 기준으로 결정합니다.

중첩 구조 예시

<div class="page_intro">
    <div class="p_inner">

        <div class="card">
            <div class="i_header"></div>
            <div class="i_body"></div>
        </div>

    </div>
</div>

위 구조에서 페이지 블록과 컴포넌트 블록이 함께 사용되었습니다. 컴포넌트(card)는 레이아웃에 직접 두지 않고 페이지가 조합하며, 접두사(p_·i_)를 구분함으로써 중첩 구조에서도 각 요소의 소속 범위를 즉시 해석할 수 있습니다.

시각적 표현 네이밍에 대한 기준

시각적 표현을 직접 드러내는 네이밍을 기본적으로 지양합니다.

❌ .red_button
❌ .big_title

다만, 규칙화된 의미나 상태로 치환되는 경우에 한해 허용합니다.

✅ .m_error
✅ .m_size_large

즉, 시각 속성은 직접 표현하지 않고 의미·상태·규칙 체계 안에서 정의된 경우에만 허용합니다.

네이밍과 구조의 관계

네이밍이 곧 구조를 의미합니다.

이름이 모호하면 구조 설계가 불완전하다고 판단합니다.
클래스 이름만 보고 구조를 예측할 수 있어야 합니다.
문서 없이도 코드 자체로 구조를 설명할 수 있어야 합니다.

SLUR UX/UI System의 네이밍 시스템은 UI 구조 설계를 코드 수준에서 명확히 드러내기 위한 핵심 규칙입니다.