Bedrock
컴포넌트의 사용 규칙과 상태, 세 플랫폼의 코드, 적용 화면을 한 페이지에서 확인합니다. 디자이너와 개발자가 여러 문서를 오가지 않고 같은 기준으로 작업할 수 있습니다.
디자인 시스템이 일관되게 적용되지 않는 이유는 규칙이 어려워서가 아니라 규칙과 코드, 예시가 서로 다른 곳에 흩어져 있기 때문입니다.
디자인 시스템의 컴포넌트와 사용 규칙, 실제 예시가 각각 코드 저장소와 문서, 디자인 파일에 나뉘어 있으면 필요한 정보를 모두 확인하기 어렵습니다. 시간이 지나면 기존 화면을 그대로 복사하게 되고, 같은 역할의 컴포넌트가 여러 형태로 늘어납니다.
Bedrock은 호주 Northgate Bank의 앱과 웹에서 함께 사용하는 디자인 시스템 문서입니다. 각 컴포넌트 페이지에 변형과 상태, React·Swift·Kotlin 코드, 사용 규칙과 금지 사항을 통합했습니다. 사용 중인 화면 수와 담당 팀, 마지막 수정일도 함께 제공해 변경의 영향 범위와 문의 대상을 바로 파악할 수 있습니다.
사용 규칙과 코드를 한 페이지에 통합합니다
컴포넌트의 변형과 상태, 세 플랫폼의 구현 코드를 같은 화면에서 확인합니다. 별도의 문서를 찾지 않고도 디자인과 개발을 이어갈 수 있습니다.
컴포넌트가 사용된 화면을 함께 보여 줍니다
현재 적용된 화면 수와 위치를 제공해 변경 시 영향을 받는 범위를 확인합니다. 담당 팀과 수정일도 함께 표시해 관리 책임을 분명히 했습니다.
금지 사항은 짧고 구체적으로 제시합니다
‘한 화면의 주 버튼은 하나’, ‘라벨은 동사로 시작’처럼 실제로 확인할 수 있는 기준만 남겼습니다. 긴 설명보다 작업 중 바로 적용할 수 있는 문장으로 정리했습니다.
Bedrock
디자인 시스템은 잘 만들어진 컴포넌트보다 사람들이 실제로 찾아 쓰고 지킬 수 있는 구조에서 완성됩니다. 필요한 정보가 한곳에 모여 있어야 팀마다 다른 해석과 임의 복사를 줄일 수 있습니다.
비퍼블리시는 색상과 타이포그래피, 간격, 고도 등 기초 토큰과 여덟 가지 컴포넌트를 같은 방식으로 문서화했습니다. 컴포넌트 상세, 코드, 사용 지침, 변경 이력을 설계해 디자이너와 개발자가 동일한 페이지에서 같은 결론에 도달하도록 했습니다.
프로젝트 정보
| 서비스 | 은행 앱·웹이 함께 쓰는 디자인 시스템 문서 |
|---|---|
| 대상 | 같은 시스템으로 화면을 만드는 디자이너와 개발자 |
| 해결한 문제 | 규칙·코드·예시가 세 곳에 흩어져 아무도 안 열던 문서 |
| 범위 | 색 · 타이포 · 간격 · 고도 · 컴포넌트 8종 |
| 주요 화면 | 컴포넌트 상세 · 변형과 상태 · 코드 · 사용 지침 · 변경 이력 |
| 유형 | UI/UX 디자인 |
| 기획 · 디자인 | 비퍼블리시 (bpublish) |
Bedrock
규칙과 코드가 같은 자리에 있는 은행 디자인 시스템
