#6 컴포넌트 제대로 사용하기
새롭게 바뀐 컴포넌트에 대한 설명과 예제
점차 국내에서도 피그마의 인기가 날이 갈수록 높아지고 있지만 주위를 둘러보면 정말 피그마를 제대로 활용하는 사람은 극소수라고 생각 듭니다. 아마 그럴 것이 UI 디자인 툴이 익숙하지 않은 분들에게는 피그마가 절대 쉬운 툴이 아닐 것이며 적응하는데 상당한 시간이 걸릴 것이기 때문입니다.
그럼 많은 사람들은 피그마의 어떤 점을 가장 어려워하는 것인지를 생각해보면 저는 ‘컴포넌트’가 아닐까 생각합니다. 그렇게 생각한 이유는 저의 브런치 통계를 봐도 컴포넌트에 관한 글이 2위를 차지하고 있고 최근 2022 Config에서 컴포넌트 시스템이 업데이트되며 더욱 많은 사람들이 컴포넌트를 구성하는 것에 많은 어려움을 겪고 있을 것이라 생각하기 때문입니다.
그래서 오늘은 컴포넌트의 새로운 Properties 기능에 대한 설명과 예제를 통해 컴포넌트에 대해 자세히 이야기해보도록 하겠습니다. 이번 글은 컴포넌트가 무엇인지와 중첩 컴포넌트에 대한 이야기는 따로 하지 않을 것이니 이 부분에 대해 자세히 알고 싶으신 분은 ‘#4 피그마의 핵심 컴포넌트’ 글을 먼저 읽어 보시길 바랍니다.
https://brunch.co.kr/@ggk234/20
속성(Properties) 기능
컴포넌트를 정말 제대로 구성하기 위해서는 Prop(줄여서 사용하겠습니다)라는 구성 요소의 속성을 제대로 설정할 수 있어야 합니다. 이 기능이 중요한 이유는 디자이너가 광범위하고 사용자 정의 가능한 구성 요소 라이브러리를 만드는데 매우 큰 도움이 되며 디자인 시스템의 룰을 보다 쉽게 유지할 수 있기 때문입니다.
간혹 이전의 Variants라는 기능과 이번의 Prop 기능을 다른 기능이라고 생각하는 분들이 계신대 사실은 이번의 Prop는 Variants를 포함한 업그레이드 버전이라고 생각하면 쉽습니다. 해당 기능이 왜 나왔고 왜 중요한지를 보다 쉽게 이해하실 수 있도록 컴포넌트만 존재하였던 '버전 1.0', Variants만 존재하였던 '버전 2.0' 그리고 Prop로 모든 기능을 포함한 '버전 3.0'으로 임의로 나눠 설명을 드리겠습니다.
컴포넌트_버전 1.0
컴포넌트는 플랫폼의 여러 페이지에서 동일한 구성 요소들을 사용하여 사용자에게 동일한 경험을 제공하는 좋은 시스템입니다. 하지만 점차 그 범위가 광범위해지고 여러 형태가 각각 존재해야 했기 때문에 캔버스에서 만들어야 하는 컴포넌트들이 너무 많이 존재하였고 유지관리와 오버헤드가 존재하였습니다.
예를 들어 버튼을 만든다고 가정해보면 위의 이미지처럼 Default, Hover, Disable 같이 상태에 관한 버튼 상태가 생기게 되고 양쪽에 아이콘이 존재하는 유형이 있다면 각 상태에 아이콘이 추가된 유형의 컴포넌트를 별도로 제작해야 했습니다. 만약 패딩 값을 변경한다고 하면 하나의 컴포넌트만 변경하는 것이 아닌 12개의 컴포넌트를 각각 변경해야 하는 불편함이 존재하였으며 인스턴스 패널에서도 너무 많은 트리구조가 생성되었습니다.
컴포넌트_버전 2.0
피그마는 이런 불편함을 해결하기 위해 2021년에 Variants라는 기능을 발표하였습니다. 무수히 많은 유형의 버튼들을 하나의 컴포넌트로 만들고 그 안에 옵션을 추가하여 속성들을 간편하게 제어하는 기능이었습니다. 이 기능은 컴포넌트의 네이밍을 줄일 수 있었고 보기 쉽게 그룹화할 수 있다는 장점이 있었습니다.
하지만 여전히 많은 유형을 제작해야 한다는 단점이 그대로 존재하였으며 각 옵션들을 제어하는 방법이 생각보다 까다로웠습니다. 심지어 이 기능은 인스턴트가 모두 초기화되는 버그가 존재하였기에 많은 디자이너들이 사용하지 않는 기능이었고 이전의 근본적인 문제를 해결하지는 못하였습니다.
컴포넌트_버전 3.0
버전 3.0은 이전의 버그와 문제점을 개선한 버전이라고 생각하시면 되고 사실 프레이머의 컴포넌트 생성 방법과 굉장히 흡사합니다. 프레이머의 컴포넌트 시스템은 하나의 컴포넌트에서 여러 변형을 추가하고 Default 컴포넌트에서 가변적인 요소를 설정하여 인스턴트 컴포넌트에서 여러 요소를 쉽게 설정할 수 있는 구조로 지금의 피그마 컴포넌트 구조와 매우 흡사하다고 생각하시면 됩니다.
Prop는 총 4가지 유형으로 상태 변형 가능한 Variants와 각 요소들을 토글 버튼으로 제어 가능한 Boolean, 아이콘 같은 중첩 컴포넌트들을 변경할 수 있는 Instance swap, 텍스트들을 패널에서 제어할 수 있는 Text로 총 4가지의 유형으로 구성되어있습니다.
이전처럼 어떤 속성으로 추가해야 할지 고민할 필요가 없이 패널의 레이어 섹션에서는 Boolean 옵션만 존재하며 Instance 섹션에서는 Instance swap만 설정할 수 있어 각 유형에서 어떤 옵션을 설정해야 할지 고민하는 과정이 사라지게 되어 보다 쉽게 Prop 옵션을 구성할 수 있습니다.
버전 3.0에서는 기존에 버튼을 12개나 만들어야 했던 과정을 대폭 줄여 모든 것을 포함한 3가지 유형의 그룹화된 버튼만 만들어 유형을 최소화할 수 있었고 이전에 존재하였던 인스턴스 컴포넌트가 초기화되는 버그 또한 해결되었습니다
위의 이미지는 인스턴스 컴포넌트에서 보는 화면이며 Variants(Type)로 유형을 설정하고 Boolean(토글 버튼)으로 아이콘 유무를 변경하여 보다 빠르게 다양한 성격의 버튼을 구성할 수 있고 버튼을 고정된 크기로 제작하고 싶으면 오토 레이아웃을 적용하지 않으면 되고 아이콘 유무에 따라 크기를 제어하고 싶으면 오토 레이아웃을 설정하시면 됩니다.
이렇게 피그마의 컴포넌트 기능은 3번의 단계로 복잡한 컴포넌트 시스템을 보다 심플하게 구성할 수 있도록 진화해왔습니다. 하지만 단점도 분명히 존재합니다. 프레이머는 Variants를 추가해도 Default에서 설정한 가변 요소가 하위 요소들에 모두 적용되는 반면 피그마는 Default라는 기준점이 없다 보니 모두 일일이 추가하거나 추가한 상태에서 Variants를 진행해야 한다는 단점이 존재합니다.
활용 예제
이제 어느 정도 Prop라는 기능이 왜 생겼고 어떤 장점이 있는지 깨달으셨을 것이라 생각합니다. 하지만 이렇게 단순히 글을 읽는 것만으로는 여러 변수가 존재하는 실무에서 적용하기는 생각보다 쉽지 않습니다. 그렇기에 하단 링크의 예제를 통해 Prop와 Auto Layout을 활용한 컴포넌트를 만드는 과정을 설명해드릴 테니 직접 따라 해 보고 자신만의 기술로 만드시 길 바랍니다.
예시는 임의에 팝업을 만드는 과정이고 제가 제안하는 방법이 정답은 아니라는 점을 먼저 말씀드리며 Step별로 설명드리는 것은 여러 변수에 맞춰 제작하는 것에 큰 의미가 없다고 생각하여 핵심들을 위주로 설명드리도록 하겠습니다.
https://www.figma.com/community/file/1129607902128598644
구조를 파악하고 큰 틀을 만들기
일단 아래의 이미지같이 두 개의 팝업 유형을 하나의 컴포넌트로 만들어보는 과정을 설명드릴 것입니다. 굳이 하나로 만들어야 하나 생각하실 수 있는데 만약 모두 유형이 다른 수십 개 수백 개의 팝업을 각각 만든다고 가정하면 답이 나올 거라 생각합니다.
컴포넌트를 구성할 때 가장 먼저 해야 할 것은 중복되는 구조를 파악하고 가변적인 요소들을 쉽게 변경할 수 있도록 큰 틀을 제작하는 것입니다. 일단 중복되는 것은 상단의 헤더와 하단의 버튼 영역이 공통적으로 들어가는 것을 볼 수 있으며 안의 콘텐츠들만 가변적으로 변경되는 점을 파악해야 합니다.
구조를 파악했다면 어떻게 구성할지를 큰 틀을 구성해야 합니다. 위의 이미지처럼 헤더와 버튼을 별도의 컴포넌트로 만들고 이를 중첩 컴포넌트로 추가한 다음 슬롯을 만들어 큰 모달 팝업을 구성해보도록 하겠습니다. 이처럼 제작을 하면 두 가지 유형의 팝업 이외에도 여러 유형의 팝업을 커버할 수 있고 혹시 다른 콘텐츠 유형이 추가되어도 콘텐츠 유형만 별도로 추가할 수 있어 유지보수가 매우 용의 하다는 장점을 가질 수 있습니다.
중첩되는 컴포넌트 먼저 제작
큰 틀은 잡았으므로 이제 중첩시킬 헤더와 버튼의 컴포넌트로 만들면 되는데 조금 더 복잡한 Header 부분을 먼저 구성해보도록 하겠습니다. 개인적으로 Header를 만들 때 iOS의 Header 구축 방식처럼 좌, 우, 센터로 각 영역을 별도로 제작하여 합치는 방식을 선호하여 Header는 iOS 방식으로 제작해보겠습니다.
iOS 방식이 정답은 아니지만 위의 두 유형의 팝업을 보았을 때 헤더가 타이틀 유형이 두 가지이고 왼쪽의 화살표 아이콘이 존재 유무가 다르기에 위와 같이 Top Nav라는 팝업을 컴포넌트를 만들고 그 안에 Nav Parts라는 컴포넌트들을 조합하여 Prop를 설정하여 구성해보겠습니다.
Prop를 설정하는 방법은 Top Nav에 구성된 Top Nav_Parts 인스턴스를 클릭하면 inspector 패널에서 Prop설정이 가능한 섹션들이 확인 가능합니다. 나중에 설정을 쉽게 하기 위해 Layer 섹션에서는 Show_L-Nav 같은 명칭으로 설정해주고 유형이 다른 부분은 C-Nav_Type같이 정확한 명칭으로 설정하는 것이 중요합니다.
여기서 중요한 게 Top Nav Parts들을 Variants로 그룹 하지 않는 것이 중요한데 왜냐하면 Variants로 묶게 되면 하나의 컴포넌트로 그룹화되기 때문에 Top Nav에서 변경할 요소를 인식하지 못하기 때문입니다. 그렇기에 Prop 할 것들은 웬만하면 Variants로 그룹화하지 않는 것이 좋습니다.
모든 요소를 조합하고 Prop를 설정하였다면 위의 이미지처럼 인스턴스 컴포넌트에서 Top Nav를 어떻게 구성할지를 보다 쉽게 설정할 수 있습니다. 하지만 여기서 이번 Prop의 단점이 드러나는데 저는 ‘Title’ 텍스트를 패널에서 변경 가능하도록 Text Prop를 설정하였으나 Top Nav에서 설정이 불가능하고 Top Nav Parts / Center 컴포넌트를 클릭해야만 설정한 Text Prop를 변경할 수 있다는 것입니다.
사실 굳이 중첩 컴포넌트를 사용하지 않고 Top Nav에 좌우 아이콘을 추가하고 Prop를 설정한 다음에 타이틀은 하단에 핀을 설정한 다음 Auto Layout을 설정하여 만들 수도 있습니다. 하지만 이렇게 만들게 되면 추후에 확장이 어렵다는 단점이 있습니다.
위의 이미지처럼 아이콘 옆에 라벨이 붙거나 아이콘이 두 개 붙는 유형이 생긴다면 Top Nav의 Inspector 패널은 너무 무거워지고 복잡한 설정을 해야 하는 경우가 생길 수 있습니다. 그래서 저는 타이틀을 변경하기 위해 중첩 컨포넌트까지 타고 들어가 야한 번거로움이 있더라도 추후 확장이 용의 하게끔 중첩 컴포넌트를 활용하여 제작한 것입니다.
버튼은 헤더와 다르게 Variants로 묶는 것이 효율 적입니다. 따로 중첩 컴포넌트로 구성되어 있지도 않으며 많은 정보가 들어가는 헤더와 달리 버튼은 하나의 행동을 유도하기에 많은 요소가 들어가지 않아 Inspector 패널이 무거워질 경우가 많이 없기 때문입니다.
이렇게 Varinats로 그룹화시킬지 아니면 중첩 컴포넌트를 활용할지 여러 요소를 구성할지 생각하여 만드는 것이 중요하며 최대한 확장이 가능하게 컴포넌트를 만드는 것이 좋습니다.
오토 레이아웃을 적절하게 사용
Header와 Button을 중첩 컴포넌트와 Prop 기능을 적절히 활용해서 제작했다면 이번에는 팝업 콘텐츠 중 텍스트 필드를 Auto Layout과 Prop를 활용해서 제작하는 방법에 대해서 설명해보도록 하겠습니다. 텍스트 필드는 왼쪽에 돋보기 아이콘이 존재하는 검색 유형, 오른쪽에 눈 아이콘이 존재하는 비밀번호이 있다고 가정하였습니다.
각 유형을 모두 만들기보다는 왼쪽과 오른쪽에 아이콘을 모두 포함하고 Layer 섹션에서 Prop 기능을 설정한 뒤 텍스트를 입력하는 Placeholder는 수평은 Fill, 수직은 Fixed로 설정하여 Auto Layout을 설정해줍니다. 이렇게 구성을 하면 좌우에 아이콘이 없을 때 Placeholder의 크기가 지정한 Padding 안에서 알맞게 조절이 되는 효과를 얻을 수 있습니다.
위의 이미지는 인스턴트 컴포넌트의 패널 화면과 제작한 하나의 컴포넌트로 커버할 수 있는 4가지 유형의 텍스트 필드입니다. 여기에 Focus나 Disable 같은 상태(State) 값을 추가하면 설정하면 여러 개의 상태 값들을 심플하게 유지할 수 있습니다. 이는 버튼이나 리스트 같은 유형에도 활용할 수 있습니다.
모든 컴포넌트들을 조합
이제 마지막으로 팝업을 구성하는 콘텐츠만 제작하면 됩니다. 2개의 팝업 유형을 보면 탭, 이미지, 텍스트 필드, 리스트, 텍스트의 유형이 존재하는 것을 확인할 수 있습니다. 이 5가지 유형을 제작하고 슬롯이라는 빈 공간을 표시하는 컴포넌트를 추가적으로 만들어줍니다.
저는 이런 것들을 만들 때 보통 위의 이미지처럼 ‘컴포넌트 이름_Parts’라는 명칭을 붙여 해당 컴포넌트의 부품처럼 활용할 수 있게 제작합니다. 이렇게 별도의 컴포넌트로 제작하게 되면 나중에 새로운 유형이 콘텐츠가 추가되어도 팝업을 새로 만드는 게 아닌 Parts를 하나 더 만들어 여러 유형을 제작할 수 있기 때문에 유지보수가 용의 하다는 장점이 있습니다.
이제 만들어놓은 모든 컴포넌트들을 하나로 합쳐 Auto Layout을 설정해주고 Modal이라는 컴포넌트를 만들어줍니다. 첫 번째 슬롯은 Inspecter 패널의 Layer 섹션에서 Show Slot_01이라는 Prop를 생성해주고 Instance 섹션에서는 Slot_01이라는 Prop를 생성해주면 첫 번째 Slot의 존재 여부와 무엇으로 구성할지를 설정할 수 있습니다.
마찬가지로 두 번째 Slot과 세 번째 Slot에도 동일하게 설정해주면 팝업 컴포넌트가 완성이 되고 만약 Slot을 더 추가하고 싶다면 동일한 방법으로 추가해주면 됩니다. 이렇게 만든 컴포넌트들을 활용해서 왼쪽 팝업은 3가지 슬롯을 모두 키고 첫 번째는 탭 콘텐츠, 두 번째는 이미지 콘텐츠, 세 번째는 텍스트 필드 콘텐츠로 설정해주고 오른쪽 팝업은 첫 번째 Slot은 리스트 콘텐츠, 두 번째 Slot은 텍스트 콘텐츠로 설정하고 마지막 Slot은 눈을 꺼주면 두 가지 유형을 모두 커버하는 하나의 컴포넌트를 만들 수 있습니다.
(헤더 부분은 Layer 패널에서 Modal 컴포넌트에 종속된 Top Nav 컴포넌트를 선택하여 각 유형에 맞게 설정해주면 되고 버튼도 마찬가지입니다.)
여기서 또 주의해야 할 점은 Header에서 설명드린 것처럼 Variants를 해야 할 요소와 하지 말아야 할 요소를 잘 구분해야 한다는 점입니다. 만약 위의 이미지처럼 팝업의 콘텐츠들을 Variants로 구성한다면 콘텐츠들이 Modal Parts라는 하나의 컴포넌트로 그룹화되어 Modal 컴포넌트에서는 콘텐츠의 개수만 조절할 수 있게 되고 콘텐츠의 유형을 설정할 때는 콘텐츠를 직접 클릭해서 선택해야 하기 때문입니다.
이렇게 팝업 컴포넌트를 구성하는 예제로 Prop와 Auto Layout, 중첩 컴포넌트에 대해서 어느 정도 이해가 되셨을 것이라고 생각합니다. 컴포넌트를 만드는 것에 정답은 없고 만들 때마다 여러 변수가 존재하기 때문에 이와 같은 방법이 무조건 옳다는 것은 아니지만 해당 기능을 어떻게 활용해야 하는지 이해를 하셔야지만 더욱 탄탄한 디자인 시스템을 구성할 수 있을 것이라 생각하며 예제를 통해 다양한 방법으로 실습해 보시길 바랍니다.
툴이 아닌 틀을 바꿔야 할 때
토스의 Simplicity 21의 디자인 시스템 섹션을 보면 한 디자이너가 ‘툴이 아닌 틀을 바꿔야 할 때'라는 말을 하는 것을 볼 수 있습니다. 이 말의 핵심은 피그마든 스케치든 어떤 툴을 사용하던 툴은 크게 중요하지 않고 사용하는 틀이 중요하다는 이야기라고 생각하였습니다.
어쩌면 토스에게는 피그마라는 툴이 그렇게 어울리지 않을 수 있습니다. 프레이머는 코드를 잘 활용하여 구축하면 인터렉션과 여러 기능들을 피그마보다 더욱 잘 활용할 수 있기 때문입니다. 반면 하나의 프로젝트를 길게 구축하지 않는 에이전시에서는 클라이언트의 요구에 여러 툴들을 상황에 맞게 적적하게 사용해야 하기 때문에 시스템을 구축하기 좀 더 쉬운 피그마가 더 어울릴 수 있습니다.
즉 언제나 틀이 중요하다는 것입니다. 다양한 상황에 맞춰 적절한 툴을 사용하여 최적의 성과를 내는 것이 중요하다고 생각합니다. 물론 그렇기 위해서는 다양한 툴들에 기본적인 원리를 알고 평소에 충분한 연습을 해야 한다고 생각하며 추후에는 기회가 된다면 스케치나 프레이머에 관한 글도 업로드하도록 하겠습니다.
앞으로도 피그마에 관한 다양한 글과 예제들로 작성할 생각이고 피그마에 원하시는 내용이 있으시다면 따로 댓글 남겨주시길 바랍니다. 감사합니다.
