회사에서 한 일 / 사내 디자인 시스템과 릴리스 파이프라인

사내 디자인 시스템과 릴리스 파이프라인

초기 2인 태스크포스(TF), 아키텍처 설계, 개발 도구, 릴리스 파이프라인, 도입 가이드 담당

새 관리자 웹을 시작할 때마다 되풀이하던 초기 세팅을 공통 UI 패키지와 프로젝트 생성 CLI로 묶은 사내 디자인 시스템입니다. 컴포넌트는 동료와 나눠 만들었습니다.

엘핀2026.01~ (진행 중)초기 2인 TFReact 19TypeScriptMantineStorybookVitestNxGitea ActionsGitea Packages

공통 UI를 쓰는 사내 저장소12곳

2026년 10월 기준

그중 운영 중인 서비스3곳

워크플러스 관리자 웹 포함

새 프로젝트 시작CLI

폴더 구조, 라우팅, 공통 UI가 들어간 프로젝트 생성

TF2인

컴포넌트는 동료와 나눠 만듦

배경

새 관리자 웹을 시작할 때마다 로그인, 레이아웃, 공통 폼을 다시 붙이느라 며칠씩 들었고 프로젝트마다 구조가 달라 다른 사람이 맡으면 처음부터 다시 익혀야 했습니다.

공통 패키지를 여러 개 배포하면서 파이프라인끼리 충돌하거나 일부 패키지가 배포에서 빠지는 일도 있었습니다.

상황: 컴포넌트만 배포하면 프로젝트마다 로그인과 레이아웃을 다시 붙이고 폴더 구조도 제각각이 됩니다.
고른 것: 폴더 구조, 라우팅, 공통 UI가 미리 들어간 프로젝트를 만드는 CLI를 만들었습니다. 패키지 여러 개는 Nx 모노레포 하나에 두고 바뀐 패키지만 골라 빌드하고 배포합니다.
결과: 전에는 초기 세팅에 며칠이 걸렸는데 CLI로 만들면 첫날 바로 화면 작업에 들어갑니다.

프로젝트 생성 CLI로 새 관리자 웹을 만드는 화면 (로컬 경로는 가림)

상황: 동료와 컴포넌트를 나눠 만들어도 같은 모양이 나와야 했고 AI 코딩 도구도 사내 컴포넌트와 디자인 토큰을 찾아 써야 했습니다.
고른 것: 사내 컴포넌트와 디자인 토큰을 찾아 주는 MCP(Model Context Protocol) 서버를 만들었습니다. 컴포넌트 유형(입력, 탐색, 선택)마다 Figma 토큰 적용, 테스트, Storybook 문서를 같은 규격으로 만드는 스킬도 만들어 함께 씁니다.

결과: 2026년 10월 기준 사내 저장소 12곳이 공통 UI 패키지를 쓰고 그중 운영 중인 서비스는 워크플러스 관리자 웹을 포함해 3곳입니다. 다른 팀 개발자가 제 도움 없이 CLI와 패키지 문서만 보고 기존 관리자 웹을 이 디자인 시스템으로 다시 만든 사례도 있습니다.

상황: 패키지 배포 파이프라인이 동시에 돌면 버전 태그 커밋을 서로 밀어 넣다 충돌했고 검증하지 않은 코드가 배포될 수도 있었습니다. 여러 제품이 가져다 쓰는 패키지라 잘못 나간 버전은 그 제품에 그대로 퍼집니다.
고른 것: 실패를 재시도로 덮지 않고 검증을 통과한 커밋(SHA)만 빌드하고 배포하게 바꿨습니다. 버전 태그 커밋이 충돌하면 리베이스한 뒤 다시 올리고 배포에서 빠진 패키지는 다음 파이프라인이 찾아 배포합니다. 높은 권한으로 PR 코드를 실행하던 pull_request_target 트리거를 없애 PR 코드가 배포용 비밀값에 닿을 수 있는 경로를 막았습니다.