Headless 컴포넌트 설계
Figma Variants 효율적인 설계 방법 2편
지난 편에서는 Figma Component의 Variants가 너무 많아지는 원인과 생길 수 있는 문제들을 알려드렸습니다. Figma Variants는 컴포넌트의 크기, 색상, 상태(예: hover, disabled 등) 조합에 따라 폭발적으로 늘어나기 때문입니다. 이번 편에서는 Headless 설계 방식 도입을 통해 Figma Variants 최적화를 시켰던 Select Dropdown 컴포넌트 개선 사례를 공유합니다.
지난 편이 궁금하신 분을 위해 아래 링크를 첨부합니다.
기존 문제: Variants 수의 급증
개선전 Select Dropdown 컴포넌트의 전체 variants수는 288개였습니다. 일부 스타일이 특정 속성을 가지지 않더라도, Variants의 총 개수는 크기 × 색상 × 상태와 같은 조합으로 계속 증가했습니다. 만약 속성을 하나만 추가하더라도 Variants는 288 × 2 = 576개로 2배 늘어납니다. 이는 관리와 유지보수에 큰 부담을 주는 상황이었습니다.
해결 방안: Headless 방식 도입
위 문제를 해결하기 위해 컴포넌트를 설계 방식을 수정했습니다. 핵심은 Base Component와 Main Component로 역할을 분리하는 것이었습니다.
Base Component는 컴포넌트의 공통 동작 로직을 담습니다. 예를 들어, Select Dropdown의 메뉴 열기/닫기 동작이나, 메뉴 위치(menuPosition), 너비(menuWidth) 같은 동작 관련 속성을 Base Component에 포함했습니다. 기존의 Base Component는 단순히 형태만 갖고 있었지만, 개선 후에는 다음과 같은 구조로 변경되었습니다:
Base Component: 동작 로직을 담당: 예를 들어, 메뉴 위치와 크기 조정을 포함
Main Component: 스타일을 담당: 크기, 색상, 상태 등의 시각적 속성만 포함
Main Component는 사용자가 실제로 디자인에 배치할 컴포넌트입니다. Base Component에서 동작 로직을 분리했기 때문에, Main Component는 스타일 속성에만 집중할 수 있게 되었습니다. 이 과정에서, block(컴포넌트의 폭을 100%로 설정하는 속성)을 추가하였음에도 불구하고 Variants 수를 대폭 줄일 수 있었습니다.
288개 전체를 나열하기는 어려워, 일부만 첨부하였습니다.결과: Variants 수 대폭 감소
개선 전: Select Dropdown의 전체 Variants는 290개 (Base Component 포함)
개선 후: Variants를 Base Component와 Main Component로 나누고 설계 방식을 변경한 결과, 전체 Variants 수는 98개로 감소
이로써 Variants 수가 약 66.2% 줄어들었으며, 추가적인 스타일이나 속성 변경도 훨씬 수월해졌습니다.
설계 방식의 핵심: 로직과 스타일의 분리
이 설계는 Headless 방식에서 아이디어를 얻었습니다. Headless 방식은 컴포넌트 설계 시 로직과 스타일을 분리하는 개념을 기반으로 합니다.
로직: 상태 관리, 이벤트 핸들링, 데이터 처리 등 (Base Component에서 처리)
스타일: HTML/CSS와 디자인 토큰 기반의 시각적 요소 (Main Component에서 처리)
로직을 Main Component에 포함하지 않음으로써, 스타일 변경이 구조적 일관성을 해치지 않도록 했습니다. 또한, 상태에 따른 변형은 Main Component에서만 컨트롤할 수 있게 하여 Figma Variants 수를 최소화할 수 있었습니다.
Headless에 대해서 좀 더 자세히 알고 싶으신 분은 예전에 제가 Headless Design System에 대해 올려둔 포스팅을 참고하시길 바랍니다.
Headless 설계 방식의 이점
유지보수 용이: Variants 수가 줄어들면서 스타일 추가, 삭제, 변경이 훨씬 쉬워졌습니다.
확장성 강화: 새 속성을 추가하더라도 Variants 수가 기하급수적으로 늘어나지 않습니다.
성능 개선: Figma 가이드에 따르면 Variants 수가 많으면 메모리 사용량이 증가할 수 있습니다. Variants를 줄임으로써 Figma 파일 성능이 개선되었습니다.
협업 효율성: 팀원이 Variants를 쉽게 이해하고 관리할 수 있어, 협업 과정에서의 혼란이 줄어들었습니다.
로직과 스타일을 분리하여 컴포넌트를 설계하는 Headless 방식의 도입을 통해 Figma Variants 수를 줄인 사례를 소개하여 보았습니다. Select Dropdown 사례에서 보듯이, 로직과 스타일을 분리하면 Variants 수를 줄이고, 디자인 프로세스를 단순화하며, 성능과 협업 효율성을 모두 향상시킬 수 있습니다.
방대해진 Figma Varaints로 여러 문제를 겪고 계시다면, 로직과 스타일을 분리하는 Headless 방식으로 컴포넌트를 재설계해보시면 어떨까요?
