지양하는 패턴
UI 구조를 흐리게 하거나 유지보수 비용을 증가시키는 패턴은
명확히 지양 대상으로 정의합니다.
이 문서는 “하지 말아야 할 것”을 기준으로 구조 판단을 돕기 위한 내용입니다.
역할이 모호한 클래스
Section titled “역할이 모호한 클래스”하나의 클래스가 구조·스타일·상태를 동시에 담당하는 패턴은 지양합니다.
역할이 섞이면 수정 범위를 예측할 수 없기 때문입니다.
규칙은 역할 분리 원칙을 따릅니다.
과도한 중첩 선택자
Section titled “과도한 중첩 선택자”스타일 범위를 제어하려는 깊은 중첩 선택자는 지양합니다.
상위 구조에 의존한 선택자는 구조 변경 시 연쇄적으로 깨지기 때문입니다.
규칙은 중첩 구조 규칙을 따릅니다.
시각적 표현 중심 네이밍
Section titled “시각적 표현 중심 네이밍”색상·크기·위치 같은 시각적 표현을 직접 드러내는 네이밍은 지양합니다.
표현이 바뀔 때마다 구조 수정으로 이어지기 때문입니다.
구조를 대체하는 JavaScript
Section titled “구조를 대체하는 JavaScript”JavaScript로 UI 구조를 임의로 생성·삭제하는 패턴은 지양합니다.
상태 판단과 스타일 결정이 섞이면 구조를 추적하기 어렵기 때문입니다.
구조와 상태의 경계는 상태 기반 UI,
역할 구분은 역할 분리 원칙을 따릅니다.
임의 값 사용
Section titled “임의 값 사용”토큰으로 관리되지 않는 임의 값 사용은 지양합니다.
기준 없는 값이 늘어날수록 일관성과 유지보수성이 저하되기 때문입니다.
값은 토큰으로 관리합니다.
지양 패턴의 목적
Section titled “지양 패턴의 목적”이 지양 패턴들은
SLUR UX/UI System의 규칙을 보완하는 안전장치 역할을 합니다.
각 규칙이 “무엇을 해야 하는가”를 정의한다면,
이 문서는 “무엇을 하지 않는가”를 정의합니다.