오늘 가져온 아티클은 디자인 시스템과 스타일 가이드의 차이점을 다루고 있어요. 디자인 시스템이 점점 더 중요한 역할을 하면서, UX 라이터도 그 안에서 어떤 기준을 세울지 고민해야 할 때가 많죠. 그런 고민을 해결하는 데 작은 힌트가 될 수 있을 거라 생각해요.

이번 호는 제가 발행하는 스물네 번째 아티클이에요. 그리고 에디터 점점이 발행하는 마지막 아티클이기도 해요. 캡처프레이즈 합류한 지 2년이라니, 떠날 때가 된 것 같아요. 혼자 박수치며 떠나려 합니다.

제가 번역한 아티클들이 캡찹 여러분께 조금이라도 도움이 되었기를 바라요. 그동안 읽어주셔서 정말 감사해요.

그럼 오늘도 재밌게 봐주세요.

이 글에서 다룰 내용:

• 부모-자식 관계
• 디자인 시스템
• 스타일 가이드

부모-자식 관계

디자인 시스템은 계속 발전하는 완전한 기준 세트로, 재사용 가능한 컴포넌트와 패턴을 사용해서 대규모 디자인을 관리할 수 있도록 만들어진 도구예요.

디자인 시스템 저장소에는 일반적으로 다음과 같은 내용이 포함돼요:

• 스타일 가이드 한 개 이상: 브랜드, 콘텐츠, 시각적 디자인 등 특정 스타일 요구사항에 대한 지침을 제공하는 문서예요.
• 컴포넌트 라이브러리: 버튼처럼 재사용 가능한 개별 UI 요소를 정의해요. 각 UI 요소에 대해 디자인과 구현 세부 정보를 제공하며, 크기나 텍스트 같은 사용자 지정 속성, 다양한 상태(활성화, 호버, 포커스, 비활성화)와 함께 재사용 가능한 깔끔한 코드를 포함해요.
• 패턴 라이브러리: 컴포넌트 라이브러리에서 가져온 개별 UI 요소를 그룹화한 재사용 가능한 패턴을 정의해요. 예를 들어, 페이지 헤더 패턴에는 제목, 브레드 크럼(breadcrumb)*, 검색, 기본 버튼과 보조 버튼 등이 포함될 수 있어요.
• 추가 자료: 디자이너가 컴포넌트와 라이브러리를 사용해 실제로 디자인하려면 디자인 파일이 필요해요(보통 Figma를 사용해요). 디자이너와 개발자가 사용할 수 있도록 로고, 서체, 글꼴, 아이콘 같은 자료도 포함해요.

디자인 시스템 유지 관리