SLUR UX/UI System

구조부터 사용자 경험까지, 한 번 구조화한 UI를 오래 유지하도록 설계하는 프론트엔드 UX/UI 시스템입니다. 클래스 이름만 봐도 구조와 역할이 읽히며, 특정 프레임워크에 종속되지 않습니다.

시작하기 접두사 표 보기

처음이신가요?

• 개요 — SLUR가 무엇이고 왜 필요한지
• 왜 SLUR UX/UI System인가? — 기존 UI 개발의 문제와 해결 범위
• 문서 읽는 방법 — 어디부터 읽으면 좋을지

다루는 범위

구조 설계에서 끝나지 않고, 상태·접근성·성능·경험까지 하나의 기준으로 이어집니다.

구조 · 네이밍 블록·내부 요소 계층과 접두사 체계

상태 · 스크립트 data-state 기반 상태 설계, CSS·JS 역할 분리

접근성 시맨틱 우선, 최소 ARIA, 키보드 접근

미디어 · 성능 이미지 역할, 반응형, 로딩 성능

경험 설계 (UX) 화면 상태, 피드백, 모션, 폼 입력 경험

참고 접두사 표, 예제, 체크리스트, FAQ

핵심 원칙

구조 우선

클래스 이름만 봐도 구조와 역할이 읽히도록 설계합니다. UI를 스타일의 집합이 아닌 안정적인 구조로 다룹니다.

역할 분리

구조는 HTML, 표현은 CSS, 동작은 JavaScript, 상태는 **data-state**가 담당합니다.

일관된 규칙

누가 작성해도 같은 구조로 읽힙니다. 일관성이 생산성을 만듭니다.

완결성

정상 상태만이 아니라 로딩·에러 상태, 접근성, 성능까지 처음부터 설계합니다.

SLUR UX/UI System은 프레임워크가 아닙니다

특정 기술이나 라이브러리에 종속되지 않는 UI 설계 기준이자 문서화 방법론입니다. 어떤 환경에서도 적용할 수 있습니다.