B2B 디자인 시스템: 일관성·유연성·확장성을 동시에 잡을 수 있을까?
YJ
Field Notes
카테고리
- 디자인시스템
- 고민
- 실무
실무를 경험하며 디자인 시스템이 단순한 스타일 가이드를 넘어서 제품의 효율성과 일관성, 그리고 사용자 경험 전반을 좌우하는 핵심 요소라는 걸 체감하고 있습니다.
최근에는 디자인 시스템의 개념을 다시 처음부터 정리하고 실제 업무에 어떻게 효과적으로 적용하며 퀄리티 좋은 디자인 시스템을 구성할 수 있을지 고민해보고 있습니다.
최근에는 디자인 시스템의 개념을 다시 처음부터 정리하고 실제 업무에 어떻게 효과적으로 적용하며 퀄리티 좋은 디자인 시스템을 구성할 수 있을지 고민해보고 있습니다.
실제 업무 속에서는 이상적인 디자인 시스템이 언제나 그대로 적용되지는 않았습니다.
특히 자사 제품 특성상 복잡한 요구사항이 많아 그 과정에서 디자이너들이 겪은 현실적인 어려움이 분명히 존재했습니다.
특히 자사 제품 특성상 복잡한 요구사항이 많아 그 과정에서 디자이너들이 겪은 현실적인 어려움이 분명히 존재했습니다.
:: B2B 디자이너가 제품 디자인 과정에서 마주하는 어려움 ::
1) 단일한 기준이 어려운 디자인 요소들
제품 디자인 시 버튼 스타일이나 색상 등 UI 컴포넌트의 룰을 명확히 정의하기 어려운 이유는, 화면마다 위계와 강조 포인트가 모두 다르기 때문입니다.
예를 들어, 버튼 유형만 보더라도 다음과 같은 다양한 경우의 수가 존재합니다.
•
아이콘 + 텍스트
•
텍스트 + 아이콘
•
아이콘만
•
텍스트만
이 중 어떤 유형을 써야 하는지 명확한 기준을 세우기가 어려울 때가 많습니다. 설명이 필요한 버튼에는 아이콘과 텍스트를 함께 써야 하고, 정보가 단순한 화면에서는 아이콘 만으로도 충분한 경우가 많습니다. 이러한 이유로 화면 별로 버튼 구성에 대한 판단이 매번 필요하고, 디자이너마다 해석이 달라질 여지가 있습니다.
비슷한 고민은 색상 정의에서도 발생합니다. 예를 들어, 어떤 화면에서는 ‘임시 저장’이 주요 액션이므로 Primary 색상으로 표시하는 것이 타당합니다. 하지만 다른 화면에서는 ‘임시 저장’이 보조적인 기능이 되어버려 Primary 색상을 쓰는 것이 오히려 부자연스러워질 수 있습니다.
이처럼 UI 요소의 의미나 위계가 맥락에 따라 유동적이기 때문에, 단일한 규칙으로 모든 상황을 포괄하는 것이 어렵고, 디자이너 개개인이 각 화면에 맞는 판단을 해야 한다는 점이 주요한 고민거리입니다.
2) 디자인 아이디어 vs 개발 현실
자사는 B2B라 데이터가 잘 보이는 것이 가장 중요한 점인데 그에 따른 고민은 디자인과 개발 현실과의 간극입니다.
예를 들어, 사용자가 조회하는 데이터 양이나 종류에 따라 컬럼 수가 달라지거나, 콘텐츠 길이에 맞춰 그리드 높이를 자동으로 조정하고 싶은 상황이 있습니다. 이렇게 하면 화면 활용도를 높이고 가독성을 높일 수 있기 때문에, 사용자 입장에서도 더 직관적인 인터페이스가 될 수 있습니다.
하지만 실제 개발 단계에서는 이런 유동성을 구현하는 것이 쉽지 않습니다.
반응형 또는 동적 그리드 시스템을 구축하려면, 화면 리사이징, 콘텐츠 길이 측정, 컴포넌트 리렌더링 등 다양한 기술적인 고려가 필요합니다. 특히 그리드가 테이블 형태로 구성되어 있고, 다량의 데이터를 실시간으로 렌더링하는 경우에는 성능 이슈가 발생하거나 레이아웃이 깨질 가능성도 있습니다.
또한, 디자인적으로는 ‘자연스러워 보이는 유동적 변화’를 만들고 싶지만, 개발에서는 정해진 규칙과 고정된 구조 속에서 안정성과 일관성을 유지하는 것이 더 중요하게 여겨지기도 합니다.
결국, 데이터에 따라 유연하게 변화하는 UI를 기획하더라도, 개발적 한계나 복잡도 때문에 일부 타협이 필요한 상황이 자주 발생합니다. 이런 경우에는 완전한 유동성보다는 ‘몇 가지 정해진 패턴 안에서의 조건부 변화’ 처럼 현실적인 대안을 함께 고민하게 됩니다.
3) 컴포넌트 재사용 vs 커스터마이징
현재 회사에서 개발자분들도 의견을 주셨고 디자이너들도 고민하고 있는 점이 컴포넌트가 과도하게 많다는 점입니다.
개발자분들은 쓰지도 않는 컴포넌트를 많이 만드냐는 의견을 주시기도 하지만 디자이너들도 그 점에 대해 어려움을 겪고 있습니다. 디자이너들끼리도 기존에 사용하던 컴포넌트를 재사용 하는게 맞을지 새로운 화면에 맞게 커스터마이징 하는게 맞은 것인지 항상 고민하는 점 중 하나입니다.
디자인 시스템에 정의한 기존 컴포넌트로 재사용성을 높이고 싶지만, B2B 특성상 데이터 특정 화면에서는 예외케이스가 많아 어려운 점이 많습니다.
•
복잡한 기능 조합과 조건
B2B 제품에서는 권한, 조건, 설정값에 따라 UI가 다르게 보여야 하는 상황이 흔합니다.
예를 들어, 같은 버튼이라도 어떤 페이지에선 '추가', 다른 페이지에선 '불러오기', '가져오기'로 표기되거나, 특정 조건에서만 활성화되어야 하는 등 세부 요구 사항이 많고 복잡합니다. 이로 인해 재사용 가능한 범용 컴포넌트를 만들고자 해도, 예외 케이스가 너무 많아 실제로는 하나의 컴포넌트와 룰을 계속 변형하게 됩니다.
B2B 제품에서는 권한, 조건, 설정값에 따라 UI가 다르게 보여야 하는 상황이 흔합니다.
예를 들어, 같은 버튼이라도 어떤 페이지에선 '추가', 다른 페이지에선 '불러오기', '가져오기'로 표기되거나, 특정 조건에서만 활성화되어야 하는 등 세부 요구 사항이 많고 복잡합니다. 이로 인해 재사용 가능한 범용 컴포넌트를 만들고자 해도, 예외 케이스가 너무 많아 실제로는 하나의 컴포넌트와 룰을 계속 변형하게 됩니다.
•
기능 우선의 의사결정 구조
많은 B2B 제품은 사용성보다 기능 완성도에 더 큰 가치를 두는 경향이 있습니다.
이로 인해 기획이나 고객 요구사항이 우선되는 구조에는, 기존의 정의된 컴포넌트를 활용하기보다는 "필요한 기능을 우선 구현하자"는 흐름이 강해지고, 그 결과 디자인 시스템을 우회하는 경우가 자주 발생합니다.
그래서 기획자나 개발자와 디자이너 간 의견 충돌이 생기기도 합니다.
기획자와 개발자 입장에서는 새로운 기능을 위해 새로운 컴포넌트 및 UX룰이 필요하다고 주장하는 반면,
디자이너 입장에는 기존에 정해둔 룰을 특정 기능이나 페이지의 요구로 계속해서 예외 처리를 할 수는 없다는 입장을 갖게됩니다.
결국, 디자인 시스템의 일관성을 유지하면서도 다양한 기능 요구를 수용할 수 있는 범용적 구조를 만드는 것이 B2B제품 디자인에서 중요한 과제가 됩니다.
많은 B2B 제품은 사용성보다 기능 완성도에 더 큰 가치를 두는 경향이 있습니다.
이로 인해 기획이나 고객 요구사항이 우선되는 구조에는, 기존의 정의된 컴포넌트를 활용하기보다는 "필요한 기능을 우선 구현하자"는 흐름이 강해지고, 그 결과 디자인 시스템을 우회하는 경우가 자주 발생합니다.
그래서 기획자나 개발자와 디자이너 간 의견 충돌이 생기기도 합니다.
기획자와 개발자 입장에서는 새로운 기능을 위해 새로운 컴포넌트 및 UX룰이 필요하다고 주장하는 반면,
디자이너 입장에는 기존에 정해둔 룰을 특정 기능이나 페이지의 요구로 계속해서 예외 처리를 할 수는 없다는 입장을 갖게됩니다.
결국, 디자인 시스템의 일관성을 유지하면서도 다양한 기능 요구를 수용할 수 있는 범용적 구조를 만드는 것이 B2B제품 디자인에서 중요한 과제가 됩니다.
•
긴 제품 수명과 레거시 호환성
B2B 제품은 한번 구축되면 수년 이상 사용되는 경우가 많고, 과거 UI와의 호환성도 종종 요구됩니다.
이 때문에 새로운 컴포넌트를 적용하려 해도 기존 사용자의 혼란을 막기 위해 과거 스타일이나 UI 구조를 유지해야 하는 경우가 많아, 통일된 방식으로 재사용하기 어려워집니다.
B2B 제품은 한번 구축되면 수년 이상 사용되는 경우가 많고, 과거 UI와의 호환성도 종종 요구됩니다.
이 때문에 새로운 컴포넌트를 적용하려 해도 기존 사용자의 혼란을 막기 위해 과거 스타일이나 UI 구조를 유지해야 하는 경우가 많아, 통일된 방식으로 재사용하기 어려워집니다.
다음은 저희처럼 복잡한 B2B 제품에서 유연성과 일관성 그리고 많은 경우의 수를 동시에 고려해야 할 때 자주 참고하는 디자인 시스템 가이드 입니다.
:: 참고하는 디자인 시스템 가이드 및 사이트 ::
1) Design Systems.surf
Adobe Spectrum, Google Material Design, IBM Carbon, Microsoft Fluent 2, Shopify Polaris 등 70개 이상의 디자인 시스템을 한곳에 모아 정리한 온라인 데이터베이스입니다.
각 회사의 개별 제품 페이지를 일일이 방문하지 않아도 되기 때문에 효율적으로 디자인 시스템을 탐색하고 비교할 수 있다는 점에서 매우 유용합니다.
각 회사의 개별 제품 페이지를 일일이 방문하지 않아도 되기 때문에 효율적으로 디자인 시스템을 탐색하고 비교할 수 있다는 점에서 매우 유용합니다.
또한 컴포넌트 단위로 필터링해 볼 수 있는 기능도 제공되어서 실제 디자인 작업이나 레퍼런스 조사 시 빠르게 참고할 수 있는 점이 큰 장점입니다.
하지만 일부 디자인 시스템은 컴포넌트나 가이드에 대한 상세한 설명이 부족해 깊이 있는 정보를 얻기 어려울 수 있어 직접 해당 사이트로 접속해 참고해야 하는 단점이 있습니다.
2) Carbon Design System
Carbon Design System은 대규모 제품군에서도 일관성과 확장성을 유지할 수 있도록 설계된 기업용 오픈소스 디자인 시스템입니다.
WCAG 기준을 준수한 높은 접근성을 기본으로 제공하며, Figma UI Kit과 React 컴포넌트가 연동되어 디자이너와 개발자 간의 협업 효율이 뛰어납니다. 실무에서 바로 사용할 수 있는 다양한 컴포넌트와 상태가 정교하게 정의되어 있고, 철학과 원칙까지 포함된 체계적인 문서화가 강점입니다.
또한 수 많은 경우의 수에 대응을 잘 해놓 시스템 중 하나라고 생각해서 업무 시 제일 많이 참고하는 사이트 중 하나입니다.
3) Atlassian Design System
Atlassian Design System은 Jira, Confluence 등 다양한 협업 도구에서 검증된 디자인 시스템으로, 협업 중심의 UX 설계, 높은 확장성, 명확한 콘텐츠 가이드, 뛰어난 접근성 지원을 통해 B2B SaaS 환경에 최적화된 안정적이고 일관된 사용자 경험을 제공합니다.
단순 시각적 디자인뿐 아니라 텍스트 톤, 버튼 문구, 알림 메시지까지 일관된 UX 라이팅 지침 포함하고 있어서
특히 자사같은 B2B 환경에서 혼란을 줄이고 명확한 피드백을 주는 UI에 적합해 자주 참고하는 디자인 시스템입니다.
이 글이 문제를 바라보는 시선과 맥락 정리에 가까웠다면,
다음 글에서는 ‘그래서 어떻게 정비하고 있는가’에 대해 구체적인 실천과 실무 과정을 중심으로 나눠보려 합니다.
다음 글에서는 ‘그래서 어떻게 정비하고 있는가’에 대해 구체적인 실천과 실무 과정을 중심으로 나눠보려 합니다.
'yj-archive' 구독하기
사이트를 구독하면 새 포스트 등 최신 업데이트를 알림과 메일로 가장 먼저 받아보실 수 있습니다.
Slashpage에 가입하고 'yj-archive'을 구독하세요!
Slashpage에 가입하고 'yj-archive'을 구독하세요!
