Slot으로 컴포넌트 유연성 높이기
Variants 무한증식대신 재사용성 높은 컴포넌트 제작하기
"Dialog 컴포넌트에 이런 케이스 Variants 추가하면 어떨까요?"
디자인 시스템을 사용하는 조직에서 한번쯤 이런 논의를 해봤을 수 있다.
여러 화면을 만들다 보면 기존 컴포넌트로 대응하기 어려운 다양한 케이스가 발생하기 마련이고, 컴포넌트를 커스텀해서(*흔히 인스턴스를 깬다고 표현하는) 사용하는 상황을 반복하다 보면 컴포넌트를 깨게 만드는 구조 또한 컴포넌트에 포함하여 디자인 효율을 높이고 싶다는 생각이 든다.
하지만, 이렇게 컴포넌트의 속성을 무한증식시키는 것이 효율을 높이는 데에 정말 도움이 될까?
이 의문에 대해 하나의 답이 될 수 있는 방법을 공유하고자 한다.
Slot Component
Slot 컴포넌트는 쉽게 말해 Slot이라는 '에셋 교환 영역'을 가진 빈 깡통 형태의 컴포넌트로 설명할 수 있다.
우리가 알고 있는 슬롯머신처럼 빈 영역에 필요한 다양한 형태의 에셋을 동적으로 삽입할 수 있도록 한다.
이런 형태를 사용하는 장점은 컴포넌트의 구조와 콘텐츠를 분리해 컴포넌트의 유연성을 높일 수 있다는 데 있다.
ChatGPT에게 코드로 설명해 달라고 한 결과를 첨부한다.
위 결과의 장단점을 비교하면 아래와 같다.
[속성 기반 컴포넌트]
장점: 사용이 간편하고, 각 요소의 내용을 속성으로 설정할 수 있어 직관적
단점: 구조가 고정되어 있어 복잡한 레이아웃이나 동적인 콘텐츠 변경에 제약이 있음
[Slot 기반 다이얼로그 컴포넌트]
장점: 각 슬롯에 다양한 콘텐츠를 동적으로 삽입할 수 있어 유연함. 구조가 고정되지 않아 복잡한 레이아웃도 쉽게 구현 가능
단점: 콘텐츠를 HTML 구조 내에서 직접 정의해야 하므로 초기 설정이 번거로울 수 있음
결론적으로, Slot 기반으로 다이얼로그를 만들 때 더 유연하고 재사용성이 높은 컴포넌트를 만들 수 있다.
특히 dialog 같이 다양한 케이스를 대응하는 경우 Slot 방식이 유리할 수 있다는 것이다!
이미 이런 고민을 한 디자이너들이 많이 있는지 Slot 형태의 컴포넌트가 제작되어 있는 피그마 파일 또한 피그마 커뮤니티에서 찾아볼 수 있다.
컴포넌트 제작 시 참고하길 바라며 링크를 함께 남긴다!
유연하고 확장 가능한 디자인 시스템 제작에 참고가 되길
