H9 Design System

외부 디자인 시스템 기준을 검토한 PoC에서 시작해 내부 공통 UI의 패키지 구조를 잡아 본 작업입니다. Storybook과 입력 예제를 보강하고 Lit, React와 공통 영역으로 나뉜 모노레포 베이스를 구성했습니다. 이후 잠정 연기된 초기 검토 사례로 정리했습니다.

검토한 질문

질문	본인 작업	남은 코드
UI의 상태 차이를 어떻게 비교할 것인가	Storybook 환경과 입력 예제 보강	입력 상태별 story와 controls
Lit와 React를 함께 검토할 때 무엇을 나눌 것인가	common과 기술별 패키지 베이스 구성	workspace 의존성과 개별 Storybook 설정
예제의 확인 기준을 어디에 둘 것인가	a11y addon과 개발 환경 정리	Storybook framework, addon과 경로 설정

개요

항목	내용
기간	2024.06 ~ 2024.07
역할	초기 개발 환경과 예제 보강, 모노레포 패키지 베이스 구성
단계	기술 검토와 초기 구조. 완성된 사내 Design System 도입 성과와 구분했습니다
기술	Lit, React, TypeScript, Storybook, Sass, Yarn workspace, Turborepo

구현과 판단

입력 상태를 예제로 비교하기

검증 질문. 같은 입력 UI라도 오류와 성공, 비활성 상태를 어떻게 문서화하고 확인할지 검토했습니다.

구현. 입력 템플릿과 Storybook 예제를 보강하고 state를 controls에서 바꿀 수 있도록 연결했습니다. 기본, focus, error, success와 비활성 상태의 표본을 두었습니다.

구현 코드: 입력 상태를 Storybook controls로 구성

argTypes: {
  label: { control: "text" },
  state: {
    control: "radio",
    options: [
      "default", "focus", "error", "success", "disabled", "aria-disabled"
    ],
  },
}

확인 범위. 상태별 예제와 a11y addon 설정을 남겼습니다. 이 설정의 존재를 접근성 검증 완료나 제품에서의 모든 입력 동작을 보장하는 결과로 쓰지는 않았습니다.

공통 영역과 기술별 패키지를 나누기

검증 질문. 웹 컴포넌트와 React 양쪽을 검토할 때 기술별 예제와 공통 코드를 어느 경계로 나눌지 검토했습니다.

flowchart TB
    Workspace["Yarn workspace와 Turborepo"] --> Common["common 패키지"]
    Workspace --> Lit["Lit 패키지와 Storybook"]
    Workspace --> React["React 패키지와 Storybook"]
    Lit --> Common
    React --> Common

구현. common, design-system-lit와 design-system-react 패키지를 나눴습니다. Lit와 React에서 공통 패키지를 workspace 의존성으로 참조하고 Storybook은 각각 실행하도록 설정했습니다.

{
  "dependencies": {
    "@design-system/common": "workspace:*"
  }
}

확인 범위. 기술별 패키지와 공통 진입점의 경계를 만든 단계였습니다. common의 내부는 초기 폴더와 진입점 수준이어서 완성된 token 체계나 공통 컴포넌트 모음으로 확대하지 않았습니다.

결과와 남은 과제

상태별 예제와 개발 환경, 모노레포의 초기 방향을 남겼습니다. 이후 프로젝트 상황으로 잠정 연기돼 실제 제품 적용과 확산 범위는 확인하지 못했습니다. 이 PoC에서 얻은 내용은 UI의 구현 기술을 고르는 일과 예제, 패키지 경계를 정하는 일을 함께 검토해야 한다는 점입니다.

React Starter Kit은 서비스 흐름을 따라 볼 수 있는 샘플을 보강한 사례입니다. 두 작업을 구분해 공통 UI의 기술 검토와 앱 기반의 활용 예제를 각각 설명했습니다.