컴포넌트 설정의 간소화

피그마 슬롯이 가져올 컴포지션의 시대

*원문을 번역한 글입니다.

*원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다.

고도화 단계에 접어든 피그마 컴포넌트의 속성 패널을 살펴보면 이른바 ‘부끄러운 스크롤바’를 마주하게 될지도 모릅니다. 아이콘 노출 여부나 레이아웃 방향(상하/좌우)처럼 요소를 미세하게 조정하는 수많은 속성이 끝없이 나열되어 있기 때문입니다. 이 속성들은 하나하나가 모두 실무의 특정 케이스를 해결하기 위해 선의로 추가된 것들입니다.

하지만 사용자를 돕기 위해 만든 이 속성들은 어느덧 거대한 '역설'로 변해버립니다. 컴포넌트의 베리언트 개수가 폭발하거나 사소한 변경만으로도 상속된 스타일이 깨진다면 그것은 디자인 시스템 자체의 결함이라기보다 도구를 잘못 활용하고 있기 때문입니다. 시스템은 더 많은 기능을 문서화하고 테스트하며 유지보수해야 하는 짐을 떠안게 되고 결국 스스로 만든 틀 안에 갇히고 맙니다.

하나의 컴포넌트가 모든 사람의 모든 요구사항을 해결할 필요는 없습니다.

피그마의 네이티브 슬롯 기능은 기존의 복잡한 설정용 속성들을 대체하고 상당수를 제거할 것입니다. 디자인 시스템의 진정한 힘은 수많은 스위치와 변형이 아니라 창의적이고 제약 없는 조합에서 나옵니다. 이를 위해서는 컴포넌트를 취약하게 만드는 속성들을 과감히 덜어내는 '설정의 붕괴'가 필요합니다.

이 글에서는 속성 중심의 사고방식에서 벗어나 순수한 컴포지션으로 나아가는 변화를 살펴봅니다. Pill, Alert, Card 컴포넌트의 구체적인 사례를 통해 그 과정을 함께 짚어보겠습니다.

더 가벼워진 컴포넌트의 핵심(Core)

컴포지션 중심으로 구조를 전환하더라도 컴포넌트 고유의 정체성은 유지되어야 합니다. 따라서 상태, 스타일, 사이즈처럼 컴포넌트의 동작과 시각적 토대를 결정하는 필수적인 속성들만 최상위 API로 남겨둡니다.

반면 그동안 관성적으로 사용해왔던 많은 속성과 서브 컴포넌트들은 과감히 덜어낼 대상이 됩니다. 구체적인 변화는 다음과 같습니다.

- 먼저 노출 여부를 결정하던 속성들이 사라집니다. '아이콘 표시'나 '설명 숨기기' 같은 불리언 속성 대신 슬롯 구성을 통해 요소의 유무를 직접 제어하는 방식이 자리 잡습니다. 특정 레이어의 색상이나 곡률, 테두리 등을 미세하게 조정하던 시각적 커스텀 속성들 또한 크게 줄어듭니다.

- 레이아웃이나 구조를 바꾸기 위해 존재하던 복잡한 서브 컴포넌트들도 정리됩니다. (아래 '얼럿 > 바디 > 텍스트' 사례 참조) 또한 여러 기능을 한데 뭉뚱그린 복잡한 속성들을 제거하고 대신 메인 컴포넌트의 슬롯에 끼워 넣을 수 있는 더 작고 단순한 전용 서브 컴포넌트로 대체합니다.

- 조합된 자식 요소들의 스타일을 개별적으로 제어하는 방식(예: 버튼 라벨의 색상이나 카드 타이틀의 폰트 수정)은 다소 번거로울 수 있지만 반드시 감수해야 할 트레이드오프입니다. 개발 코드에서는 이런 관계를 효율적으로 제어할 수 있지만 피그마에서는 이를 컴포넌트를 조합하는 디자이너의 몫으로 넘겨야 하기 때문입니다. 이 과정에서 발생하는 혼란은 명확한 기본값 설정과 다양한 가이드 예시를 제공함으로써 충분히 해결할 수 있습니다.

이러한 변화는 즉각적으로 컴포넌트 API를 가볍게 만들어줍니다. 장기적으로는 전사 서비스 팀들이 핵심 컴포넌트를 활용할 때 서로 충돌하거나 지연되는 일 없이 더 자유롭게 기능을 확장하고 구축해 나갈 수 있는 기반이 될 것입니다.

왜 지금인가? AI 시대를 준비하는 컴포넌트

디자인 시스템은 꽤 오래전부터 조합을 고려하며 구축되어 왔습니다. 코드 레벨에서는 적절한 컴포넌트의 각 계층에 알맞은 속성을 배치하고 이들을 조합하는 방식이 자연스럽게 자리 잡았습니다. 하지만 디자인 도구에서는 그렇지 못했습니다. 특히 AI가 디자인 도구를 직접 다루기 시작한 지금의 환경에서는 더욱 그렇습니다.

피그마에서도 이제 컴포넌트 조합이 가능하기 때문입니다 단순하게 답하자면 이전의 피그마에서는 디자이너들이 이런 조합 방식을 쓰기 어려웠기 때문입니다. 네이티브 슬롯, 즉 컴포넌트 에셋 내에서 자유롭게 조합하는 방식은 구현하기 너무 까다롭고 번거로웠기에 피그마의 아키텍처 자체가 코드와는 다르게 흘러갈 수밖에 없었습니다.

하지만 피그마가 2025년의 우선순위로 슬롯 기능을 내세운 이유는 단순히 기존 방식이 불편해서라거나 로드맵상 다음 차례였기 때문만은 아니라고 생각합니다. 기계가 인터페이스를 스스로 조합하는 시대가 왔고 피그마는 고객들의 에셋이 이러한 변화에 대응할 수 있도록 준비시켜야 하기 때문입니다.

컴포넌트 조합은 곧 디자인의 문법입니다. 속성 중심의 시스템에서 요소 간의 관계는 암묵적이며 임의적이고 흔치 않은 속성 조합에 묶여 있는 경우가 많습니다. 반면 조합 중심의 시스템에서 관계는 명확해집니다. 예를 들어 '필(Pill)' 컴포넌트는 내부에 '아이콘'과 '텍스트 라벨'로 구성되며 각각은 맥락에 맞는 고유한 설정을 가진다는 점이 분명해집니다. 이러한 구조는 AI가 읽고 이해하며 생성할 수 있는 명확한 데이터가 됩니다.

과도한 설정보다 예측 가능한 패턴을 지향해야 합니다. 또한 컴포넌트의 형태를 지나치게 세분화하여 설정하기보다 단순화할 때 예측 가능성이 높아집니다. 피그마의 불리언 속성이나 레이아웃 변형은 때로 임의적이며 모든 케이스를 커버하지도 못합니다. 대신 시스템은 가이드가 포함된 완성형 예시처럼 다른 방식으로 관계를 기록한 학습 데이터를 AI에 제공해야 합니다. 모델은 수많은 세부 설정값 사이에서 헤매기보다 적지만 신뢰도 높은 패턴을 학습할 때 더 나은 성능을 발휘할 수 있습니다.

유연한 빌딩 블록 위에 의미를 더하는 방식 피그마의 슬롯 조합 방식은 범용적인 '카드' 컨테이너를 기반으로 특정 목적을 가진 컴포넌트(예: 구조와 레이아웃이 정의된 '상품 카드')를 만들 수 있는 기회를 열어줍니다. 이는 각 요소의 역할을 효과적으로 분리하고 확장성을 높이며 팀의 자율성을 개선하는 데 큰 도움이 될 것입니다.

이번 글의 요점이 "모든 속성을 없애자"는 것은 아닙니다. 핵심은 적절한 균형을 찾는 데 있습니다. 컴포넌트 내부를 지나치게 엄격하게 통제하지 않으면서도 적재적소에 필요한 설정 옵션을 제공하는 것은 여전히 중요합니다.

흔한 케이스는 설정으로, 드문 케이스는 조합으로 해결하세요.

결국 우리가 해야 할 일은 컴포넌트의 설정 화면에서 구조적인 노이즈를 걷어내는 것입니다. 이제는 컴포넌트를 사용하는 디자이너에게 조합의 주도권을 넘겨주어야 할 때입니다. 시스템은 그들이 길을 잃지 않도록 탄탄한 시작점을 마련해주고, 풍부한 사례와 맥락이 담긴 가이드를 제공하며 그 과정을 뒷받침해야 합니다.

시작과 끝의 시각 요소

Pill이나 Badge, Chip, Tab, Link 그리고 버튼과 같은 수많은 원자 단위 컴포넌트들은 대개 텍스트 라벨 양옆에 시각 요소를 배치할 수 있는 구조를 가집니다. 과거에는 아이콘이나 마크, 이미지, 아바타처럼 예상되는 특정 시각적 유형들을 제어하기 위해 컴포넌트 자체 혹은 서브 컴포넌트의 베리언트 속성을 주로 활용해왔습니다.

슬롯 마이그레이션 전후의 Pill 레이어 구조

네이티브 슬롯을 도입하면 엄격한 통제보다 유연함과 사용의 편의성에 집중하게 됩니다. 이전처럼 모든 경우의 수를 속성으로 정의하는 대신 텍스트와 시각 요소를 '자식 슬롯' 안에 중첩시키는 방식을 지향합니다. 이때 시각 요소들은 필요에 따라 기본적으로 노출하거나 숨겨둔 상태로 구성하여 디자이너가 맥락에 맞게 꺼내 쓸 수 있도록 지원합니다.

슬롯 마이그레이션 전후의 Pill 설정 변화

슬롯 방식을 도입하면 기존 컴포넌트가 가졌던 수많은 속성이 거의 완전히 사라지는 '설정의 붕괴'를 경험하게 됩니다. 구체적으로는 다음과 같은 변화가 일어납니다.

우선 'Start Visual Visible'나 'End Visual Visible' 같은 모든 노출 제어 속성이 제거됩니다. 또한 유형에 따른 변형 속성들도 사라집니다. 라벨과 시각 요소 사이의 간격을 미세하게 조정하던 패딩 속성 역시 더 이상 시스템이 강제하지 않으며 이를 조합하는 디자이너가 맥락에 맞게 직접 결정하도록 넘겨줍니다.

아이콘은 가장 대표적인 기본 시각 요소입니다. 이를 슬롯의 '권장 값'으로 설정하는 것도 하나의 방법이지만 이 경우 아이콘 내부 설정이 컴포넌트와 어긋날 위험이 있습니다. 대신 아이콘을 슬롯 안에 미리 포함해두고 기본적으로 노출하거나 숨기는 방식을 권장합니다. 이렇게 하면 Pill의 'Selected'가 아이콘의 스타일에 자연스럽게 영향을 미치도록 연동하여 설정할 수 있습니다.

물론 '버튼의 좌측 요소'처럼 특정 사용 방식을 강제해야 할 필요성이 드물게 발생하기도 합니다. 이럴 때는 타입을 엄격하게 제한한 서브 컴포넌트를 사용하여 의도된 설정을 유지할 수 있습니다. 비록 나중에 다른 요소를 넣기 위해 이 서브 컴포넌트를 생략하게 되더라도 말입니다.

본문, 텍스트 및 액션 레이아웃

컴포넌트 구조가 복잡해질수록 레이아웃을 다양화하거나 포함되는 요소를 유연하게 구성해야 할 필요성이 커집니다. 예를 들어 얼럿 컴포넌트의 경우 타이틀이나 설명을 개별적 혹은 동시에 포함할 수 있어야 하며 이들을 수직이나 수평으로 배치하는 옵션도 필요합니다. 여기에 버튼과 같은 액션 요소까지 더해지면 수평/수직 배치의 조합은 더욱 복잡해집니다. 때로는 얼럿의 본문 전체를 완전히 커스텀해야 하는 상황이 생기기도 합니다.

다양한 레이아웃으로 배치된 요소들을 포함한 얼럿 컴포넌트

이러한 구조는 레이아웃 방향과 요소 노출 여부를 제어하는 여러 단계의 서브 컴포넌트를 활용해 구현할 수 있습니다. 덕분에 거의 모든 레이아웃을 설정 옵션으로 대응할 수 있게 됩니다. 하지만 압도적으로 가장 많이 쓰이는 레이아웃은 결국 모든 요소가 수직으로 배열된 형태이며 3단계 깊이까지 들어가는 서브 컴포넌트 구조는 언제나 시스템을 취약하게 만드는 원인이 되었습니다.

슬롯 마이그레이션 전후의 얼럿 레이어 구조

다른 방법으로는 타이틀이나 설명 같은 텍스트 요소는 물론 프레임 컨테이너까지 모두 하나의 슬롯에 포함할 수 있습니다. 이렇게 하면 필요한 모든 요소가 갖춰진 상태에서 작업을 시작할 수 있는 탄탄한 기반이 마련됩니다. 또한 오토 레이아웃이 적용된 프레임을 활용해 레이아웃을 빠르게 재구성할 수 있으며 본문이나 텍스트를 제어하기 위한 별도의 서브 컴포넌트들도 모두 없앨 수 있습니다. 가장 많이 사용되는 지배적인 레이아웃을 컴포넌트의 중심으로 삼는 것만으로도 설계의 자유로움을 느낄 수 있었습니다.

슬롯 마이그레이션 전후의 얼럿 설정 변화

그 결과 수많은 서브 컴포넌트와 그에 딸린 레이아웃, 텍스트, 노출 제어 속성들이 모두 사라졌습니다. 대신 컴포넌트 에셋에는 몇 가지 대표적인 레이아웃 예시들이 미리 구성된 형태로 포함되었습니다. 이제 디자이너들은 이전만큼이나 빠르게 원하는 결과물을 만들어낼 수 있는 모든 도구를 갖추게 되었으면서도 훨씬 더 높은 자유도를 누릴 수 있습니다.

준비된 예시들과 나란히 배치된 얼럿 컴포넌트 에셋

카드(Card)

카드 컴포넌트의 초기 실험 단계에서는 시각 요소나 콘텐츠 레이아웃 그리고 액션 버튼 같은 보편적인 구조에 집중했습니다. 디자인 시스템의 성격에 따라 이는 몇 가지 예측 가능한 방식으로 재조합할 수 있는 유용하고 조립 가능한 서브 컴포넌트들로 구현될 수 있습니다.

하지만 이 시스템은 조금 달랐습니다. 무려 50개의 브랜드에 걸쳐 각기 다른 사용자 경험을 제공해야 했기 때문입니다. 압도적인 기본값이나 공통적으로 쓰이는 몇 가지 레이아웃 조합조차 존재하지 않는 환경이었습니다. 대신 시스템 차원에서 매우 다양하고 방대한 양의 '준비된 예시'를 갖추는 편이 훨씬 효율적이었습니다. 결과적으로 적어도 핵심 라이브러리에서만큼은 카드 컴포넌트를 특정 설계 의도가 담기지 않은 '비어 있는 컨테이너' 형태로 만드는 것이 합리적인 선택이었습니다.

이처럼 내부가 비어 있는 컨테이너 컴포넌트를 채택했다는 것은 핵심 라이브러리에서 설정 가능한 세부 요소들을 의도적으로 제공하지 않기로 했음을 의미합니다. 물론 조립 가능한 '카드/시각 요소' 단위를 만드는 명분도 있겠지만 운영팀은 그보다 사용자가 커스텀 콘텐츠를 자유롭게 얹을 수 있는 '이미지' 컴포넌트 자체를 정교하게 제공하는 데 집중하기로 했습니다. '카드/액션' 서브 컴포넌트 역시 앞서 언급한 얼럿의 패턴을 따를 수도 있었으나 브랜드별로 액션의 형태가 너무나 다양해 하나로 규격화하기 어려웠습니다. 굳이 무리해서 표준화할 이유가 있을까요? 그저 필요한 요소를 그때그때 자유롭게 조합하면 그만입니다.

핵심 라이브러리의 카드 컴포넌트를 특정 의도가 담기지 않은 비어 있는 컨테이너로 만든 것은 전략적인 선택입니다. 때로는 덜어내는 것이 더 많은 가능성을 열어줍니다. 이 컨테이너는 어떠한 제약도 강요하지 않는 극강의 유연한 토대가 되어 다른 팀들이 각자의 목적에 맞는 확장형 컴포넌트를 자유롭게 구축할 수 있도록 돕습니다.

이미 별도의 팀에서 작업을 시작했습니다. 그들은 더욱 세분화된 카드 콘텐츠 전용 서브 컴포넌트와 영역 그리고 레이아웃과 시각적 표현들을 담은 독립적인 라이브러리를 구축하기 시작했습니다. 디자인 시스템은 이러한 영감들을 모아 더 넓은 범위의 '준비된 예시' 안에 녹여낼 것이며 이를 통해 모든 구성원에게 명확한 가이드를 제공할 것입니다.

모두에게 완벽한 단 하나의 정답은 없습니다. 저 역시 각 디자인 시스템이 처한 상황에 가장 적합한 최적의 상태를 찾아내기 위해 매번 다른 판단을 내리고 있습니다. 자, 이제 다음 단계로 나아갑시다!

원문 출처: https://medium.com/@nathanacurtis/configuration-collapse-5a1d68b4c672

DEET를 구독하고 커리어 성장을 위한 작은 습관을 시작해 보세요.