FRAILS 컴포넌트 설계

핵심 아이디어

디자인 시스템에서 컴포넌트를 설계할 때는 유연성과 복잡성 사이의 균형이 중요하며, FRAILS(Flexible, Repeatable, Adoptable, Indexable, Logical, Specific) 프레임워크는 이를 위한 체계적인 접근법을 제공한다.

요약

유연한(Flexible) 컴포넌트는 인스턴스 수준에서 수정 가능해야 하지만, 너무 유연하면 일관성이 무너질 수 있으므로 emoji 네이밍 같은 시각적 단서를 활용하거나 component properties를 사용해 수정 가능 범위를 명확히 해야 한다. 반복 가능한(Repeatable) 컴포넌트를 위해서는 텍스트 콘텐츠, 이미지/미디어, 요소 배열에 대한 전략이 필요하며 특히 component slots 개념을 활용하면 구조는 유지하면서 내부 콘텐츠를 유연하게 조합할 수 있다.

견해

디자인 시스템을 개발할 때 단순히 “좋은” 컴포넌트를 만드는 것보다 소비(consumption)를 위한 컴포넌트를 만드는 관점으로 접근해야 하며, 이는 실제 사용자(디자이너와 개발자)의 요구와 작업 방식을 깊이 이해하는 것에서 시작된다.

출처

Building Components For Consumption, Not Complexity (Part 1) — Smashing Magazine