외부 라이브러리 연동

외부 라이브러리는 기능 확장의 수단으로 사용하되, UI 구조와 규칙을 침범하지 않도록 명확한 연동 기준을 정의합니다. 라이브러리는 편의 도구이지, UI 구조의 기준이 되어서는 안 됩니다.

위젯 동작을 빌려 오는 것은 동작 층의 3순위입니다 — 네이티브로 안 되고 동봉 slur.js로도 안 되는 복잡한 위젯(콤보박스·메뉴바·범위 달력)에만 적용합니다. 그때의 연동 기준이 이 문서입니다.

외부 라이브러리 사용 원칙

외부 라이브러리는 다음 원칙을 따릅니다.

기존 UI 구조 위에서만 동작해야 합니다.
클래스 네이밍 규칙을 변경하지 않습니다.
구조를 생성하거나 재정의하지 않습니다.
상태 제어는 정의된 방식에 맞게 연결합니다.

라이브러리는 구조를 대체하지 않고, 정의된 구조를 보조하는 역할만 수행해야 합니다.

라이브러리와 UI 구조의 관계

외부 라이브러리는 UI 구조의 내부 구현을 알 필요가 없습니다.

블록, 내부 요소, 수정자 구조를 변경하지 않습니다.
구조를 기준으로 라이브러리를 끼워 넣지 않습니다.
라이브러리 요구사항에 맞춰 구조를 바꾸지 않습니다.

구조를 라이브러리에 맞추는 순간, 규칙은 무너지기 시작합니다.

상태 연동 기준

외부 라이브러리와의 연동은 상태 기반 UI 원칙을 따릅니다.

라이브러리 이벤트 → 상태 변경
상태 변경 → CSS 표현
라이브러리는 상태를 직접 표현하지 않습니다.

라이브러리는 상태 변경의 트리거 역할만 담당합니다.

라이브러리 콜백/이벤트 안에서는 스타일을 직접 만지지 말고 data-state만 토글합니다.

const accordion = document.querySelector('.accordion');
const lib = new SomeLibrary(accordion);

lib.on('open', () => { accordion.dataset.state = 'open'; });
lib.on('close', () => { accordion.dataset.state = 'close'; });

라이브러리는 상태 변경 트리거일 뿐이며, 표현은 data-state에 연결된 CSS가 담당합니다.

.accordion[data-state="close"] .i_panel { display: none; }
.accordion[data-state="open"] .i_panel { display: block; }

❌ 나쁜 예 — 라이브러리 콜백에서 스타일을 직접 조작하면 역할 분리가 무너집니다.

lib.on('open', () => { accordion.querySelector('.i_panel').style.display = 'block'; });

콜백에서 style을 직접 만지면 표현이 JS에 흩어지고 CSS와 어긋나므로 금지합니다.

클래스 사용 제한

외부 라이브러리가 요구하는 클래스는 다음 기준에 따라 처리합니다.

필수 클래스만 최소한으로 사용합니다.
자체 네이밍 규칙과 혼합하지 않습니다.
라이브러리 전용 범위로 한정합니다.

라이브러리 클래스가 UI 구조 전반에 퍼지는 것을 허용하지 않습니다.

라이브러리 교체를 고려한 설계

외부 라이브러리는 언제든 교체될 수 있다는 전제를 둡니다.

라이브러리 제거 시 구조가 유지되어야 합니다.
상태와 구조가 라이브러리에 종속되지 않아야 합니다.
교체 비용이 UI 구조 변경으로 이어지지 않아야 합니다.

라이브러리는 UI 설계의 일부가 아니라 교체 가능한 구현 요소로 취급합니다.

외부 라이브러리 연동의 목적

외부 라이브러리 연동 기준은 UI 구조를 보호하고, 장기적인 유지보수성과 확장성을 확보하기 위한 기준입니다.

라이브러리가 바뀌어도 UI 구조는 그대로 유지되는 것이 SLUR UX/UI System가 지향하는 연동 방식입니다.