플러스프로젝트 배경
1) 문제점 - 화면 수가 많고 팀이 나뉘어 있어 같은 성격의 표와 폼이 화면마다 따로 만들어졌습니다. - 같은 동작이 화면마다 조금씩 갈라져 사용자가 느끼는 일관성이 떨어졌습니다. - 디자인이 바뀌면 고쳐야 할 곳이 화면 수만큼 늘어났습니다. 2) 프로젝트 목표 - 화면 팀이 가져다 쓰기만 하면 되는 공통 컴포넌트 한 벌 만들기 - 디자인 변경이 한 곳의 수정으로 전체에 반영되게 하기
프로젝트 성과
공통 컴포넌트 패키지화
화면마다 흩어져 있던 UI 컴포넌트를 한 벌로 묶어 사내 패키지로 배포했습니다. 화면 팀은 설치해 가져다 쓰기만 하면 됩니다.
디자인 변경 지점 일원화
색·간격·타이포를 토큰으로 빼내 컴포넌트가 참조하게 했습니다. 디자인이 바뀔 때 토큰만 고치면 전체에 반영됩니다.
대용량 테이블 공통화
백오피스에서 가장 자주 반복되는 대량 목록을 한 컴포넌트로 묶어, 정렬·필터·대량 렌더링을 화면마다 다시 만들지 않게 했습니다.
폼 검증 규약 정립
입력 구성과 검증 규칙을 공통 규약으로 묶어, 화면은 필드 정의만 넘기면 되고 검증 문구도 한 곳에서 관리됩니다.
핵심 기능
공통 컴포넌트 패키지 배포
컴포넌트를 한 벌로 만들어 사내 패키지로 배포하고, 화면 팀이 버전을 지정해 설치합니다.
진행 단계
토큰 체계 합의와 기본 컴포넌트
2025.08.
디자이너와 색·간격·타이포의 이름 체계를 먼저 합의하고, 버튼·입력·모달 등 기본 컴포넌트를 만들었습니다.
프로젝트 상세
1) 포트폴리오 소개 제조사의 백오피스 시스템에서 여러 화면이 공통으로 쓰는 UI 컴포넌트 라이브러리와 디자인 시스템입니다. 서비스 카테고리는 사내 업무 시스템의 프론트엔드 공통 기반이며, 메인 타깃은 이 컴포넌트를 가져다 화면을 만드는 개발 팀입니다. 화면 수가 많고 팀이 나뉘어 있어 같은 성격의 표와 폼이 화면마다 따로 만들어지고 있었고, 그만큼 동작이 조금씩 갈라지고 디자인 변경 비용이 화면 수만큼 늘
