UUI: Web Components용 디자인 시스템

웹 컴포넌트로 구축하는 유니버설 디자인 시스템 UUI

UUI 디자인 시스템은 웹 개발 속도를 높이기 위해 최소한의 웹 컴포넌트 집합을 제공합니다. 프레임워크에 종속되지 않으며 원자적 디자인 원칙에 기반해 색상, 타이포그래피, 라운딩, 그림자 등의 기본 토큰을 사용합니다. 컴포넌트는 쉽게 커스터마이징 가능해 React, Vue, Angular 또는 순수 자바스크립트 프로젝트에 자연스럽게 통합할 수 있습니다. 이는 여러 프로젝트를 관리하는 팀 간 일관성 없는 UI 문제를 해결합니다.

시스템은 오직 시각 계층에만 집중하며 비즈니스 로직과 철저히 분리됩니다. 토큰은 의미 없는 값으로 정의되며, 유효한 값 범위는 가이드라인에서 명시됩니다. 잘못된 속성은 콘솔 경고를 발생시키고 기본값으로 대체됩니다.

설치 및 설정

.npmrc에 토큰을 추가한 후 npm을 통해 패키지를 설치하세요:

npm install @ushliypakostnik/uui-library

node_modules/@ushliypakostnik/uui-library/public/fonts 폴더의 폰트를 public/fonts로 복사하세요. package.json에 다음 스크립트를 추가합니다:

{
  "scripts": {
    "postinstall": "node -e \"const fs=require('fs');const path=require('path');const src=path.join(__dirname,'node_modules/@ushliypakostnik/uui-library/public/fonts');const dest=path.join(__dirname,'public/fonts');if(fs.existsSync(src)){fs.cpSync(src,dest,{recursive:true});console.log('Fonts copied to',dest);}else{console.log('Fonts not found');}\""
  }
}

초기화

다음과 같이 가져오고 초기화하세요:

import UUI from 'uui';

new UUI({ isInitWC: true, isAddNormalize: true });

옵션:

• isInitWC: true — 웹 컴포넌트 초기화 (Vue3, Angular, 순수 JS용)
• isAddNormalize: true — CSS 정규화 적용 (신규 프로젝트 추천)

TypeScript: *.d.ts 파일에 모듈 선언 추가:

declare module "@ushliypakostnik/uui-library";

React용으로는 @types/react를 설치하고 uui-text, uui-icon 등에 대해 JSX.IntrinsicElements 확장 필요합니다.

프레임워크 통합

React:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import UUI from '@ushliypakostnik/uui-library';
import App from './App.tsx';

new UUI();

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <>
      <App />
    </>
  </StrictMode>,
);

Angular: 컴포넌트에서 CUSTOM_ELEMENTS_SCHEMA 사용. isInitWC: true로 초기화.

Vue3: isInitWC: true로 초기화. ESLint에서는 uui-text, uui-icon의 slot에 대한 무시 규칙 추가.

가이드라인과 토큰

토큰은 src/models/models.ts에 정의됩니다:

• 타이포그래피: Fonts.elena 등
• 라운딩: Roundings.dancing
• 투명도: Opacities.waltz
• 그림자: Shadows.antares
• 색상: Colors.cat

DESIGN 상수에는 반응형 브레이크포인트와 테마가 포함됩니다. Angular 속성은 카멜케이스 사용.

논리적 속성:

• 정적(예: rounded): 항상 활성 상태
• 동적(예: loading): 값과 관계없이 상태를 반영

예시:

<!-- 정적: 항상 라운딩 -->
<input rounded>

<!-- 동적: 로딩 표시 -->
<input loading>

컴포넌트와 커스터마이징

UUI는 uui-text, uui-icon 등의 핵심 요소를 포함합니다. 접두사를 변경(예: ivanov-ivan-text) 가능합니다. 컴포넌트는 슬롯을 통해 내용을 처리합니다.

비의미적 토큰은 마이그레이션과 확장성을 단순화합니다. 디자이너는 토큰 가이드라인을 제공하고 개발자는 원자적 컴포넌트를 구현합니다.

팀에게 주는 혜택:

• 프레임워크에 의존하지 않는 통일된 시각 언어
• CSS 특수성 충돌 없음
• 스타일 관리의 중앙 집중화
• 기존 프로젝트에도 쉽게 통합 가능

핵심 포인트

• 프레임워크 독립성: 웹 컴포넌트를 통해 모든 JS 프레임워크와 호환
• 최소주의: 빠른 시작을 위한 필수 토큰과 컴포넌트만 제공
• 커스터마이징 용이성: 코드 재작성 없이 접두사와 토큰 변경 가능
• 원자적 디자인: 타이포그래피, 색상, 그림자 토큰은 엄격한 가이드라인 준수
• TypeScript 지원: 완전한 타입 정의 및 JSX 확장 제공

— Editorial Team