figma3분 읽기큐레이션 요약
Thumbtack이 디자인
Thumbtack은 디자인 시스템 Thumbprint를 토큰, Atomic CSS, 컴포넌트의 3계층으로 구성해 유연성과 생산성을 함께 확보한다. 하위 계층일수록 세밀한 제어와 확장성이 높고, 상위 계층일수록 접근성·일관성·개발 생산성이 높아진다. 필요한 경우 각 계층 내부에도 추가 계층을 두어, 개발자가 일반적인 상황에서는 간편한 추상화를 사용하면서도 특수한 요구에는 더 낮은 계층으로 내려갈 수 있게 했다.
3단계 계층 구조
Thumbprint Tokens
- 시스템의 가장 낮은 추상화 계층이다.
- 색상, 타이포그래피, 모서리 반경, 간격, 크기, 그림자 등 세부 디자인 속성을 변수로 정의한다.
- 웹과 네이티브 클라이언트 모두에서 사용된다.
- 가장 세밀하고 유연하지만, 이를 직접 조합해야 하므로 개발 생산성은 상대적으로 낮다.
Thumbprint Atomic
- Thumbprint Tokens 위에 구축된 원자적 CSS 라이브러리다.
- 개발자가 별도의 커스텀 CSS를 작성하지 않고도 UI를 구성할 수 있다.
- 예를 들어
aspect ratio클래스를 사용하면 YouTube나 Vimeo 같은 외부 미디어의 가로세로 비율을 일정하게 유지할 수 있다. - 토큰보다 생산성이 높지만, 완전히 자유롭게 스타일을 제어하는 것보다는 유연성이 낮다.
Thumbprint Components
- 가장 높은 추상화 계층으로, 자주 사용하는 UI 패턴을 접근성까지 고려해 미리 구현한다.
- 알림, 버튼, 날짜 선택기, 별점 등 공통 컴포넌트를 제공한다.
- 개발자는 반복적인 UI 구현보다 핵심 제품 기능에 집중할 수 있다.
- 제공되지 않는 컴포넌트가 필요하면 Atomic CSS를 사용해 직접 구성하고, 그보다 더 낮은 수준의 제어가 필요하거나 네이티브 환경이라면 디자인 토큰을 직접 사용할 수 있다.
계층에 따른 트레이드오프
- 하위 계층으로 내려갈수록:
- 디자인 속성을 세밀하게 제어할 수 있다.
- 새로운 제품 요구사항에 유연하게 대응할 수 있다.
- 대신 구현과 유지보수에 더 많은 개발 노력이 필요하다.
- 상위 계층으로 올라갈수록:
- 접근성, 시각적 일관성, 개발 생산성이 높아진다.
- 공통 UI를 빠르고 안정적으로 구현할 수 있다.
- 대신 사전에 정해진 동작과 스타일이 많아져 특수한 요구에는 덜 유연할 수 있다.
계층 안의 계층
- 하나의 계층도 목적에 따라 여러 하위 계층으로 나눌 수 있다.
- Thumbprint의 React 모달은 다음처럼 구성된다.
ModalCurtain: 시각적 스타일보다 사용성·기능에 집중한 낮은 계층 컴포넌트Modal:ModalCurtain을 기반으로 시각적 스타일과 일반적인 모달 사용 방식을 제공하는 상위 컴포넌트
- 대부분의 개발자는 바로 사용할 수 있는
Modal을 사용한다. Modal이 지나치게 제한적일 때는ModalCurtain으로 내려가 더 자유롭게 구성할 수 있다.- 이후 반복적으로 필요한 기능은 다시 상위
Modal에 추가해 시스템을 발전시킬 수 있다.
디자인 토큰의 다단계 추상화
- 디자인 토큰도 여러 단계로 상속·추상화할 수 있다.
- Adobe Spectrum의 예처럼:
button-cta-background-colorcta-background-colorblue-400- 토큰이 구체적인 의미에서 일반적인 색상 값으로 이어지는 구조다.
- 개발자는 자신의 상황에 적용 가능한 가장 높은 수준의 토큰을 사용하는 것이 일반적이다.
- 이를 통해 제품별 요구에는 대응하면서도 디자인 언어의 일관성을 유지할 수 있다.
실용적인 적용 방향
Thumbprint의 방식은 모든 개발자가 가장 낮은 수준의 API를 직접 다루게 하는 대신, 기본적으로는 접근성과 생산성이 높은 컴포넌트를 제공하고 필요할 때만 Atomic CSS와 토큰으로 내려가도록 설계한다. 따라서 디자인 시스템을 만들 때는 단일 추상화 계층에 모든 요구를 담기보다, 일반적인 사용 사례를 위한 높은 계층과 예외적인 요구를 위한 낮은 계층을 함께 제공하는 구조가 효과적이다.
관련 글
큐레이션 요약을 이어서 읽어보세요.