체크리스트
이 문서는
SLUR UX/UI System을 적용한 UI 구조와 클래스 네이밍이
올바르게 설계되었는지 빠르게 점검하기 위한 실무용 체크리스트입니다.
각 항목은
“예 / 아니오”로 판단할 수 있어야 하며,
하나라도 “아니오”라면 구조를 재검토해야 합니다.
각 항목의 실제 HTML 구조는 네이밍 예제에서 확인할 수 있습니다.
컴포넌트 구조
Section titled “컴포넌트 구조”- 컴포넌트는 하나의 책임만 가지고 있는가
- 컴포넌트 클래스에 접두사를 사용하지 않았는가
- 페이지나 레이아웃 의미가 포함되지 않았는가
내부 요소 사용 규칙 (i_)
Section titled “내부 요소 사용 규칙 (i_)”i_요소가 반드시 컴포넌트 내부에서만 사용되는가- 내부 요소가 단독으로 존재하지 않는가
수정자 사용 규칙 (m_)
Section titled “수정자 사용 규칙 (m_)”- 수정자가 상태나 변형만 표현하는가
- 구조를 대체하거나 단독으로 사용되지 않는가
페이지 구조 규칙 (page_, p_)
Section titled “페이지 구조 규칙 (page_, p_)”- 페이지가 컴포넌트를 조합하는 역할만 수행하는가
- 페이지 전용 구조가
p_로 구분되어 있는가
레이아웃 구조 규칙 (layout_, l_)
Section titled “레이아웃 구조 규칙 (layout_, l_)”- 레이아웃이 전역 구조만 담당하는가
- 배치 외의 의미를 포함하지 않는가
상태 표현 방식
Section titled “상태 표현 방식”- 상태가 클래스가 아닌
data-*속성으로 표현되는가 - 클래스 네이밍이 구조만 담당하는가
구조 중첩 규칙
Section titled “구조 중첩 규칙”- 같은 구조 단위가 중첩되지 않았는가
- 구조 간 관계가 “포함”이 아닌 “조합”으로 설계되었는가
최종 점검 4문항은 네이밍 예제의 ‘네이밍 판단 기준 요약’과 동일합니다.
해당 기준으로 점검합니다.
이 체크리스트는
실제 프로젝트에서 구조 점검 기준표로 사용됩니다.