디자인 시스템부터 맞추면 화면이 빨라지는 이유

색, 모서리, 마크 모양처럼 브랜드를 결정하는 값을 먼저 고릅니다. 컴포넌트는 그대로 두고 이 값만 바꿔 입힙니다. 홈에서 보여 드리는 예시 서비스 다섯 개도 같은 컴포넌트에 값만 바꿔 만들었습니다.

• 브랜드 색 다크와 라이트에서 각각 대비를 맞춘 한 쌍
• 모서리 카드 같은 큰 면과 버튼·태그 같은 작은 요소의 두 단계
• 마크 모양 원, 둥근 사각형, 사각형 중 하나

한쪽 모드로 화면을 다 만든 뒤 다른 모드를 입히면 대비가 맞지 않는 곳이 뒤늦게 나옵니다. 색을 이름이 아니라 바탕, 선, 본문, 보조 글자 같은 역할로 정해 두고, 두 모드를 한 화면에서 함께 검토합니다.

한 화면에만 필요한 모양은 그 화면에 둡니다. 두 번째 화면에서 같은 모양이 필요해지면 그때 CoUI로 옮깁니다.

컴포넌트가 많은 것보다 조합하는 규칙이 적은 편이 유지보수가 쉽습니다. 인계받는 팀이 익혀야 할 것도 그만큼 줄어듭니다.