01프로덕션 컴포넌트 101개
프리미티브부터 전체 페이지 구성까지, 101개의 컴포넌트는 모두 따로 설계한 것이 아니라 실제 운영 중인 제품에서 추출했습니다. PDS에 있다면 이미 실전에서 쓰인 컴포넌트입니다. 이 사이트와 제품 데모, 고객사 대시보드가 모두 PDS로 렌더링됩니다.
PDS · 디자인 시스템
우리가 만드는 모든 것의 토대, 디자인 시스템.
PDS는 Protocore 고유의 디자인 언어로, 우리가 만든 제품에서 추출해 실제 운영 환경에서 다듬어졌습니다. 다크 퍼스트, 토큰 기반이며 전 과정이 문서화되어 있습니다. 우리 제품과 고객 대시보드를 구성하는 바로 그 컴포넌트를, 팀이 한나절 만에 도입할 수 있도록 패키지로 제공합니다.
기능
Protocore Design System에 포함된 모든 기능.
- 01프로덕션 컴포넌트 101개
- 02디자인 토큰
- 03테마 2종, 강조색 5종
- 04다크 퍼스트
- 05폼 프리미티브
- 06레이아웃 및 구성
- 07내비게이션
- 08오버레이
- 09데이터 표시
- 10피드백 및 상태
- 11타이포그래피
- 12모션
- 13기본으로 갖춘 접근성
- 14제로 런타임 CSS
- 15프레임워크 독립형 CSS 레이어
- 16스택별 토큰 내보내기
- 17테마 프로바이더와 훅
- 18화이트라벨 테마
- 19llms.txt 맵
- 20MCP 서버
- 21처음부터 끝까지 문서화
- 22버전 관리 릴리스
- 23프라이빗 레지스트리
- 24오프라인 라이선스 키
- 25팀 단위 라이선스
25개 기능 자세히 보기
02디자인 토큰
색상, 타이포그래피, 간격, 모션이 하나의 토큰 레이어에서 결정됩니다. 토큰을 바꾸면 모든 컴포넌트가 따라 바뀌므로 컴포넌트별 오버라이드도, 제품 간 불일치도 없습니다.
03테마 2종, 강조색 5종
다크와 라이트 두 가지 테마와 다섯 가지 강조색이 모두 같은 토큰으로 구동됩니다. 브랜드 변형은 포크가 아니라 토큰 교체입니다. 제품군의 모든 제품이 하나의 시스템에서 렌더링됩니다.
04다크 퍼스트
대비, 엘리베이션, 색상을 먼저 다크 테마에서 설계하고, 라이트 테마는 같은 토큰에서 파생합니다. 그 결과 단순히 반전한 것이 아닌, 자연스러운 다크 모드가 완성됩니다.
05폼 프리미티브
버튼, 입력창, 셀렉트, 스위치, 슬라이더와 필드 구성 요소(레이블, 힌트, 오류 메시지 포함)를 제공합니다. 포커스, 비활성, 유효하지 않음, 로딩 상태가 이미 설계되어 있어 모든 제품에서 동일하게 동작합니다.
06레이아웃 및 구성
스택, 그리드, 구분선, 페이지 셸로 임시 CSS 없이 화면을 구성합니다. 가장 큰 컴포넌트는 전체 페이지 구성으로, 실제 운영 중인 페이지에서 가져온 히어로, 섹션, 푸터 패턴입니다.
07내비게이션
헤더, 탭, 브레드크럼, 메뉴에 반응형 및 키보드 동작이 기본 내장되어 있습니다. 이 사이트의 내비게이션은 모방품이 아닌 바로 그 컴포넌트입니다.
08오버레이
모달, 시트, 드로어, 팝오버, 툴팁이 하나의 레이어링 모델 위에서 동작합니다. 포커스 트랩, 닫기, 쌓임 순서를 중앙에서 한 번에 처리하므로 제품마다 z-index를 따로 계산할 필요가 없습니다.
09데이터 표시
숫자 중심 제품을 위한 테이블, 리스트, 통계 타일, 배지, 타임라인입니다. 제품군 전체의 운영자 콘솔이 이 컴포넌트로 고밀도 화면을 구현합니다.
10피드백 및 상태
토스트, 배너, 빈 상태, 진행률, 스켈레톤 등 눈에 띄지 않지만 중요한 상태를 처음부터 설계했습니다. PDS 기반 제품은 로딩, 빈 화면, 실패 상황에 대해 충분히 고민한 답을 갖추고 있습니다.
11타이포그래피
기술적인 느낌을 주는 모노 레이블과 에디토리얼 타입 스케일로, 모든 Protocore 화면에서 볼 수 있는 고유의 어조를 만듭니다. 스케일이 토큰이므로 제품은 시스템 안에서 자유롭게 조정할 수 있습니다.
12모션
지속 시간과 이징은 토큰으로 제공되며, 컴포넌트에 이미 적용되어 있습니다. 애니메이션 타이밍을 손으로 다시 조정할 필요가 없어 제품 간 인터페이스의 움직임이 일관됩니다.
13기본으로 갖춘 접근성
대비, 포커스 상태, 키보드 동작이 컴포넌트에 내장되어 있어 따로 챙길 필요가 없습니다. 기본값을 그대로 쓰면 접근성도 함께 갖춰집니다.
14제로 런타임 CSS
스타일링은 빌드 시점에 확정되는 정적 CSS입니다. CSS-in-JS 런타임도, 브라우저에서 계산하는 값도 없습니다. 스타일링 레이어는 페이지에 JavaScript를 전혀 추가하지 않습니다.
15프레임워크 독립형 CSS 레이어
이 시스템은 순수 CSS 패키지로도 제공됩니다. React 없이 토큰과 유틸리티 클래스를 사용할 수 있습니다. 서버 렌더링 페이지, 이메일, 비 React 스택도 같은 단일 기준에서 가져다 씁니다.
16스택별 토큰 내보내기
토큰은 웹용 CSS 변수와 Tailwind 프리셋, 모바일 플랫폼용 네이티브 포맷으로 내보낼 수 있습니다. 브랜드를 한 번만 정의하면 제품이 실행되는 모든 곳에서 사용됩니다.
17테마 프로바이더와 훅
React 레이어는 앱을 프로바이더로 감싸고 훅을 통해 토큰을 제공합니다. 컴포넌트는 값을 하드코딩하지 않고 현재 활성화된 테마와 강조색을 읽습니다. 테마 전환은 재빌드가 아니라 상태 변경입니다.
18화이트라벨 테마
PDS에 다섯 가지 강조색을 제공하는 것과 같은 메커니즘이 화이트라벨 제품에는 고유의 브랜드를 입혀 줍니다. 컴포넌트는 그대로 두고 토큰 값만 바꾸면 됩니다. 제품군의 모든 화이트라벨 앱이 그 증거입니다.
19llms.txt 맵
컴포넌트, 토큰, 패턴 등 시스템 전체를 기계가 읽을 수 있는 맵으로 정리해 llms.txt로 공개합니다. LLM이 이 파일을 참조하면 그럴듯한 컴포넌트를 지어내지 않고 실제 PDS 컴포넌트로 코드를 생성합니다.
20MCP 서버
MCP 서버가 시스템을 코딩 에이전트에 직접 제공합니다. 에이전트가 작업하는 동안 컴포넌트, props, 토큰을 바로 조회할 수 있습니다. 디자인 시스템을 프롬프트에 붙여 넣는 대신 질문에 직접 답합니다.
21처음부터 끝까지 문서화
모든 컴포넌트는 pds.protocore.io에서 라이브 예제, props, 복사해서 쓸 수 있는 코드와 함께 확인할 수 있습니다. 문서도 PDS로 렌더링되므로 읽는 그대로를 배포하게 됩니다.
22버전 관리 릴리스
PDS는 시맨틱 버전과 변경 이력을 갖춘 버전별 패키지로 배포됩니다. 업그레이드는 팀이 원할 때 직접 결정하며, 무엇이 바뀌었는지는 변경 이력에 정확히 나와 있습니다.
23프라이빗 레지스트리
패키지는 Protocore의 프라이빗 npm 레지스트리에서 .npmrc에 설정한 팀별 토큰으로 설치합니다. 라이선스를 받은 팀에 한정된 표준 npm 워크플로입니다. zip 파일을 직접 포함하거나 복사해 붙여 넣는 설치는 필요 없습니다.
24오프라인 라이선스 키
서명된 라이선스 키는 로컬에서 검증되며, 외부 서버 호출이나 빌드 중 네트워크 확인이 없습니다. 라이선스 문제는 개발 단계의 경고로만 표시되고 프로덕션 앱을 중단시키지 않습니다.
25팀 단위 라이선스
PDS는 독점 소프트웨어이며 팀 단위로 라이선스가 부여됩니다. 접근을 요청하시면 패키지, 문서, 토큰 소스까지 설정해 드리므로 팀이 단 하루 오후면 도입할 수 있습니다.
FAQ
디자인 시스템 FAQ
팀 단위로 부여됩니다. 사용자 수나 프로젝트 수는 기준이 아닙니다. 라이선스 하나로 팀 내에서 PDS로 개발하는 모든 구성원이 토큰, 컴포넌트, 문서를 사용할 수 있습니다. 비용은 도입하는 팀의 수에 따라서만 달라지며, 저희가 구축해 드리는 whitelabel 제품은 이미 PDS로 렌더링됩니다.
npm.protocore.io의 프라이빗 레지스트리에서 설치합니다. 발급된 인증 정보로 빌드에서 @protocore 패키지를 가져오면, 토큰과 컴포넌트는 일반 의존성과 동일하게 설치됩니다.
토큰은 웹, .NET, 네이티브용으로 생성되므로 하나의 색상이나 radius 값이 배포하는 모든 플랫폼에서 동일하게 적용됩니다. 컴포넌트는 React용으로 제공되며, React를 사용하지 않는 팀을 위해 동일한 토큰과 클래스를 담은 프레임워크 독립형 CSS 레이어도 제공합니다.
다크 모드 우선으로 설계되었으며 기본적으로 접근성을 갖추고 있습니다. 모든 것이 토큰 기반인 두 가지 테마와 다섯 가지 강조 색상을 제공하고, 제로 런타임 CSS로 로딩 시 스타일링 비용이 없습니다. 동일한 컴포넌트가 저희 제품과 고객 대시보드를 구성합니다.
이를 위해 설계되었습니다. llms.txt 맵과 MCP 서버를 통해 에이전트가 시스템을 읽고 올바르게 개발할 수 있으며, pds.protocore.io에서 모든 컴포넌트와 토큰의 라이브 예제, props, 복사해 쓸 수 있는 코드를 확인하실 수 있습니다.
가격
PDS 라이선스 안내
01
팀 단위 라이선스
PDS는 사용자 수나 프로젝트 수가 아닌 팀 단위로 라이선스가 부여됩니다. 라이선스 하나로 해당 팀에서 PDS를 사용해 개발하는 모든 구성원이 토큰, 컴포넌트, 문서를 사용할 수 있습니다.
02
조직과 함께 확장
한 팀으로 시작해 도입이 늘어나는 만큼 다른 팀으로 넓혀 가세요. 비용은 PDS로 개발하는 팀의 수에 따라서만 결정됩니다.
03
Protocore 빌드에 포함
저희가 구축해 드리는 whitelabel 제품은 이미 PDS로 렌더링됩니다. 단독 라이선스는 자사 제품에 PDS를 직접 도입하려는 팀을 위한 것입니다.
라이선스는 인원수나 사용량이 아닌 팀을 기준으로 합니다. 접근을 요청해 주시면 PDS로 개발할 팀에 맞춰 범위를 정해 드리겠습니다.
평가 기준
PDS로 화면 만들기
01
라이브 문서
pds.protocore.io에서 전체 시스템을 확인하세요. 모든 컴포넌트와 토큰의 라이브 예제, props, 복사해 쓸 수 있는 코드를 제공합니다.
02
토큰 패키지
웹, .NET, 네이티브용으로 생성된 디자인 토큰입니다. 하나의 색상이나 radius 값이 배포하는 모든 플랫폼에서 동일하게 적용됩니다.
03
팀 단위 라이선스
PDS는 팀 단위로 라이선스가 부여됩니다. 라이선스 하나로 PDS로 개발하는 모든 구성원이 토큰, 컴포넌트, 문서를 함께 사용할 수 있습니다.
04
레지스트리 접근
npm.protocore.io의 프라이빗 레지스트리 인증 정보입니다. 빌드에 필요한 @protocore 패키지를 설치할 수 있습니다.
제공 현황
PDS는 독점 소프트웨어이며 팀 단위로 라이선스가 부여됩니다. 접근을 요청해 주시면 설정을 도와드리겠습니다.
제품을 고르세요. 또는 코어를 선택하세요.
위의 모든 내용은 실제 운영 환경의 데모로 직접 보여 드릴 수 있습니다. 단독 제품, whitelabel, 통합 플랫폼 어떤 형태든 가능합니다. 만들고 계신 서비스를 알려 주시면 가장 빠른 길을 안내해 드리겠습니다.