03
Design system
회사 디자인 시스템
Overview
여러 제품이 같은 언어로 화면을 만들 수 있도록 사내 컴포넌트 라이브러리를 다듬었습니다.
아이콘을 Figma에서 코드까지 끊기지 않게 연결하고, 테마가 배포본에서도 빠지지 않게 하며, 키보드와 포커스 상태를 문서화했습니다.
Problem
아이콘과 스타일 규칙이 앱마다 복사되면 같은 의미가 다른 모양으로 쌓입니다.
라이브러리는 컴포넌트 모음이 아니라, 새 화면을 만들 때 다시 결정하지 않아도 되는 기준이어야 했습니다.
Constraint
아이콘은 많고 바뀐다
Figma 원본과 코드가 갈라지면 업데이트가 사람의 기억에 의존합니다. 개별 아이콘을 모두 손으로 감싸는 방식도 유지되지 않습니다.
배포 후에도 테마가 남아야 한다
개발 중 보이던 @theme 규칙이 번들에서 사라지면 소비 앱은 원인을 알기 어렵습니다.
Decision
아이콘을 타입 있는 파이프라인으로
Figma 자산을 동기화하고 createSvgIcon 팩토리로 같은 props·접근성 규칙을 갖는 컴포넌트를 만들었습니다. 메타데이터와 카테고리도 Storybook에 함께 남겼습니다.
보이는 상태를 문서의 일부로
a11y 애드온을 도입하고 포커스와 키보드 조작을 정비했습니다. 기본 상태만 맞는 컴포넌트는 실제 제품에서 완성된 것이 아닙니다.
Component lab
export const SearchIcon = createSvgIcon({
name: 'search',
viewBox: '0 0 24 24',
paths: ['M11 4a7 7 0 1 0 0 14…'],
});회사 코드는 싣지 않고, 반복되는 SVG 보일러플레이트를 팩토리로 묶은 구조만 옮겼습니다.
PORTFOLIO PRIMITIVES · LIVE PREVIEW
사이트를 이루는 작은 규칙들
별도의 가상 라이브러리가 아니라 이 포트폴리오에 실제 필요한 구성 요소를 상태별로 정리했습니다.
TYPE SCALE
COLOUR TOKENS
이 사이트의 CSS 변수에서 읽는 실제 타입·색상 값입니다.
Engineering
- Figma아이콘 원본과 메타데이터
- Factory일관된 React 컴포넌트 생성
- Rollup필요한 아이콘만 배포본에 남긴다
- Storybook사용법·상태·접근성 문서화
tree-shakable 아이콘
앱이 쓰는 아이콘만 번들에 남도록 모듈 경계를 유지했습니다.
배포본 회귀 수정
@theme 지시어가 배포본에서 사라지는 경로를 고쳐 개발과 소비 환경이 다르게 보이지 않게 했습니다.
Result
아이콘·테마·문서가 같은 배포 경로를 따라가게 했습니다.
제품 팀은 화면마다 새 규칙을 만들기보다 검증된 구성 요소를 고르는 쪽으로 작업을 시작할 수 있습니다.
사내 디자인 시스템 경험을 바탕으로 정리했습니다. 회사 코드·디자인 자산은 싣지 않았고, 이 페이지의 Component lab은 포트폴리오용 요소를 별도로 재구성한 것입니다.