😵 들어가며

디자인 시스템의 방향성을 정리하는 과정에서, 디자인팀과 개발팀이 각각 중요하게 생각하는 원칙을 정리해보기로 했다. 관련 자료를 찾아보니, 대부분의 글이 디자인팀의 관점에 더 많이 초점을 맞추고 있었다,,또륵. 그런데 글을 읽다보니 초반에 내가 생각했던 원칙 중 일부가 사실은 개발보다는 디자인적인 원칙에 가까웠다는 점에서 혼란을 느꼈다.

물론 디자인 요소를 완전히 배제할 수는 없지만, 디자인 시스템은 개발자에게도 중요한 역할을 한다. 그래서 개발자의 시각에서, 디자인 시스템이 어떻게 구성되어야 하고 어떤 원칙을 따라야 하는지 정리할 필요가 있었다.

이를 위해 저는 일관성, 확장성, 사용성이라는 세 가지 주제로 나누어 이론과 경험을 바탕으로 개발자 측면에서의 디자인 시스템 원칙을 정리해보았다.



🎨 디자인 시스템 원칙

일관성

  • 토큰 사용: 각 컴포넌트의 스타일요소는 모두 토큰에 의해 정의되어야한다.
  • UI 재사용성: 동일한 기능을 하는 컴포넌트가 중복해서 작성되지 않도록 하며, 여러 컴포넌트에서 쓰일때 동일한 UI를 유지해야한다.
  • 변수 및 믹스인 재사용: 스타일 변수 및 믹스인을 일관되게 사용하여 변경사항을 코드 전반에 쉽게 반영될 수 있어야 한다.
  • 인터페이스: 컴포넌트 간에 일관된 인터페이스를 제공하여, 같은 용어와 프롭을 사용하게 해야 한다.
  • 패키지별 패턴: 여러 기술 스택(현재는 React와 Lit)을 지원하는 경우, 컴포넌트 내부의 코드 구성은 기술 스택에 따라 다를 수 있지만, 컴포넌트를 사용하는 방식은 일관된 패턴을 제공해야 한다.(인터페이스, 이벤트 처리 등)


확장성

  • 유지 보수: 한곳에서 컴포넌트를 수정하면 이를 사용하는 모든 페이지에 변경 사항이 반영되어야한다.
  • 토큰 구조: 토큰에 할당된 원자값이 변경되더라도, 개발 코드에 영향을 주지 않도록 토큰 구조는 계층적으로 설계되어야 한다. 즉, 컴포넌트를 설계할 때는 프리미티브한 값(예: 색상 코드, 폰트 크기 등)을 직접 사용하는 대신, 컴포넌트 레벨의 토큰(예: 버튼의 배경색, 텍스트 스타일 등)을 사용해야 한다.
  • 호환성: 기존의 컴포넌트나 스타일이 새로운 버전에서도 잘 동작하도록 하위호환성을 고려해야한다.
  • 변형 가능성: 컴포넌트는 다양한 크기, 색상, 동작을 쉽게 확장할 수 있도록 설계되어야한다.
  • 확장성: 고객 니즈와 시장 환경에 따라 컴포넌트를 수시로 수정 및 개선할 수 있도록 유연한 개발 아키텍처를 추구해야한다.
  • 범위 제한: 하지만 확장할 것, 확장하지않을것의 구분을 명확히 하여 컴포넌트가 제공할 기본 단위의 기능을 정의한다.
  • 완전성: 내부 구현의 복잡함 대비 얻는 완전성이 크지 않다면 어느정도 타협하고 단순함을 중요한 가치로 두고 완전성있는 컴포넌트를 구현한다.


사용성

  • 규칙 준수: 디자인 시스템을 설계하는 디자이너 및 개발자가 변경되어도 시스템 설계에 정의된 규칙을 준수하여 기존 개발 사항과 싱크가 맞아야한다.
  • 쉬운 네이밍: 쉽게 이해하고 명명할 수 있는 네이밍 규칙이 필요하다.
  • 웹 접근성: 다양한 환경의 사용자를 고려하여 내부에서 지정한 웹 접근성 수준까지으로 규칙을 준수한다.
  • 가이드 문서: 디자인 시스템에 사용되는 컴포넌트 명, props, token 등 스타일 규칙과 컴포넌트 사용 가이드를 문서화하여 사용자가 쉽게 참조할 수 있어야한다.
  • 빠른 피드백: 피드백이 늦어질수록 중요한 문제를 늦게 찾아내게 되고 해결비용이 비싸진다. 내부에서 최대한 사용해보고 빠른 피드백을 받아 즉시 반영하는 것이 중요하다.
  • 버전 관리: 지속적으로 업데이트되는 시스템 특성상, 이를 관리하며 변화된 사항을 추적하고, 팀 내에서 최신 상태를 유지할 수 있어야한다.



요약을 해보자면 아래와 같다.

  1. 일관성
    1. 컴포넌트 재사용
    2. 토큰으로 스타일 정의
    3. 인터페이스 구조
    4. 패키지별 사용 패턴
  2. 확장성
    1. 계층화된 토큰 구조
    2. 확장의 범위 제한 및 완전성 추구
    3. 유지보수
  3. 사용성
    1. 기존 믹스인 사용 / 네이밍 등의 규칙준수와 버전관리
    2. 웹 접근성 준수 및 가이드 문서 제공
    3. 빠른 피드백 반영 및 버전 관리



😇 느낀점 및 마무리

원칙을 하나씩 정리해보면서 느낀것은 디자인 시스템 원칙이 대부분의 컴포넌트 설계 원칙과 비슷하다고 느꼈다. 물론 디자인 시스템에서 다루는 토큰이나 웹 접근성 같은 개념은 기존 프로젝트에서 다루지 않았던 추가적인 고려사항이였다. 하지만 대부분이 비슷한 목표라 평소에 컴포넌트를 설계할때의 생각을 더 체계적이고 구체적으로 정리할 수 있는 기회였다.🤔

또한 주니어 개발자로써 그동안은 컴포넌트 개발 위주의 설계만 생각했었는데, 시스템 전반에 대한 구조를 어떻게 잡고 구조화할지를 생각할 수 있었다. 단순히 컴포넌트를 만드는 것을 넘어 전체 시스템을 어떻게 유지보수할지, 사용성 그리고 접근성에 대해 전방위적인 사고를 하게 해주어 눈을 더 넓힌 좋은 기회였다고 생각한다.

아직 디자인 시스템 구축의 초기 단계라고 할 수 있지만 많은 것을 느낄 수 있었고 성장에 많은 도움이 된것같다. 프로젝트가 끝나면 결과물이 어떨지 너무 기대가 된다. 또 이런 글을 작성할 수 있는 기회가 오기를!