피그마에서 버튼을 만드는 다양한 방법 (2)
피그마 디자인 시스템에서 버튼 만들기 - 버튼에 Overlay 만들기
오늘은 이전 글에서 버튼을 만드는 방법에 이어서 이 버튼의 상태들을 피그마 상에서 만들고자 했던 시도들을 다뤄보겠습니다. 그 중에서도 Component와 Variant들을 구성하는 것에 대한 내용보다는, Overlay 효과를 버튼이라는 컴포넌트에 표현하는 것에 대해 집중적으로 다뤄볼까 합니다.
일반적으로 버튼이라는 컴포넌트는 다양한 상태를 가지고 있습니다. 흔히들 말하는 Hover, Pressed, Disabled 등이 그러한 예시이죠. (부가적으로는 Active, Focused, Loading 등의 상태도 있을 수 있겠습니다.)
제가 담당하고 있는 프로덕트의 플랫폼은 데스크탑, 태블릿, 모바일로 크게 나뉘는데요, 태블릿과 모바일에서는 Hover라는 상태가 존재하지 않는 것을 제외하고는 모두 동일하게 사용할 수 있는 상태 표현이라고 볼 수 있겠습니다.
이러한 각각의 상태에 맞추어 보여지는 모습 또 한 달라야겠죠. 만약 그 상태가 똑같이 보여진다면, 사용자는 본인이 해당 버튼과 인터렉션을 하고있다는 느낌을 받기 힘들 것입니다. 어떤 방식으로 이런 느낌을 강조해 줄 수 있을까요?
파일이 다운로드되는 모습을 동적으로 보여주는 버튼 인터렉션 https://dribbble.com/shots/7299868-Download-Buttons이런 각각의 상태를 나타내는 방법에는 여러가지가 있지만, 가장 크게 쓰이고 있는 방법은 비주얼적인 변화가 아닐까 싶습니다.
버튼의 색상을 변경하는 게 가장 많이 쓰이는 방법일 것 같은데요, 또 다른 방법으로는 예시로 보여드린 것처럼 버튼 내의 요소가 움직이는 등의 애니메이션을 활용하기도 하고, 버튼 전체의 스케일을 조정하는 등의 애니메이션을 적용하기도 합니다.
제가 만들고 있는 프로덕트 팀 내부에서는 테마에 따라 버튼의 색상이 변화해야 하는 등의 여러 조건이 필요한 덕분에 Opacity가 있는 레이어가 버튼 위에 Overlay되는 형태의 인터렉션을 가진 버튼을 제작하기로 했는데요, 앞서 피그마에서 버튼을 만드는 법에서 설명드렸다시피 Auto-layout을 사용한 형태에서 Overlay하는 레이어를 넣어야하는 상황이 등장했습니다. 어떻게 이것을 만들었을까요?
오늘은 지난번과 다르게 가장 Best Practice라고 생각되는 예시를 먼저 보여드릴까 하는데요, 기존에 적용했던 방식이 너무 tricky(...)해서 제일 직관적이고 깔끔한 예시를 먼저 보여드리려고 합니다.
버튼 오버레이 - 희망편
아이 깔끔해..오토 레이아웃으로 버튼을 구성하되, Overlay 레이어를 별도로 넣는 방식입니다. 최근 피그마의 업데이트로 오토 레이아웃 내부의 배치에 영향을 받지 않는 레이어(absolute position layer)를 넣을 수 있게 되면서 이를 활용한 방식이 되겠습니다.
레이어 내부 구조를 한번 볼까요?
버튼 전체를 오토 레이아웃으로 구성하여 텍스트의 증감에 맞추어 변화할 수 있도록 Hug contents로 구성하고, 오버레이 되는 레이어는 Absolute position 옵션을 켜서 Constraints를 주었습니다.
이렇게 구성하면, 텍스트의 증감에 따라 자연스럽게 오버레이 레이어가 전체 크기에 맞춰 늘어나게 됩니다. 텍스트 편집의 용이성을 위해 오버레이 레이어는 잠궈둠으로써 접근성 향상도 꾀했습니다.
(이를 컴포넌트로 구성할 때는 Property의 선택지에 Text가 추가되어 인스턴스 내부의 레이어를 건드리지 않고도 제어하는 방식이 생겼기에 이 또한 적용을 했지만, 컴포넌트의 구성에 대한 내용은 길어지니 다음에 기회가 될 때 다뤄볼게요 :>)
그렇다면 희망편을 마주하기 전까지 이 업데이트 이전에는 이런 버튼을 어떻게 만들었을까요? 바로 레이어 구조부터 보여드릴게요.
(복잡함 주의)
버튼 오버레이 - 절망편
이게 뭐야.....딱 봐도 무언가 굉장히 복잡함이 느껴지죠..
1) 'Interact' 라는 'Interaction Layer'를 반응형으로 동작하게 하도록 하기 위한 오토 레이아웃이 한겹 더 추가가 되고,
2) 'Overlay' 레이어는 'Interaction Layer'라는 프레임으로 덮혀있는 모습을 보실 수 있습니다.
이 방법은 피그마에서의 트릭을 이용한 방법인데요,
보시다시피 높이가 0의 수치로 들어간 것을 알 수 있습니다.
피그마 안에서 아~~~주 작은 크기를 가진 레이어를 크기 산정 시에 무시하는 작동을 이용한 방법입니다. 이 프레임 안에 Overlay 레이어를 넣고, Constraints 속성을 이용해 동적으로 작동하도록 만든 것이죠.
사실 이 방법은 직접 적용해 보시면, 피그마 내에서 프레임의 크기에 0이라는 수치를 넣지 못한다는 사실을 알게 되실텐데요, 0 대신에 0.0001과 같은 아주 작은 수치를 넣으면, 자동으로 0으로 들어간다는 사실! 이런 트릭을 사용해서 버튼을 구현했었습니다.
1) 오토 레이아웃에 맞추어 텍스트 길이가 늘어나면,
2) 해당하는 프레임도 자동으로 늘어나게 되고,
3) 이에 맞추어 내부의 오버레이 레이어도 늘어남으로써 똑같은 효과를 누릴 수 있습니다.
(내부의 오버레이 레이어는 Left and right의 Constraints 속성을 주었습니다)
그러나 복잡한 레이어 구조만 봐도 아실 수 있는 것처럼 지속 가능한 방법이 아니었습니다. 2줄 이상의 텍스트가 들어가는 버튼이 되더라도 대응을 할 수 없었으며(물론 이렇게 사용하는 것을 권장하지 않았기에 큰 문제는 없었습니다만..), Overlay 레이어가 필요하지 않은 Default 상태일 때 이 레이어를 굳~~이 숨겨둬야 하는 것, 개발로 넘어가는 단에서 해당하는 인터렉션 레이어를 확인하기도 어려운 점 등 한계가 너무나도 많은 상태였습니다.
여기서 심지어 버튼에 아이콘이 붙는 Variant를 추가해야 할 땐 어떻게 할까요?
이건 또 뭐야.....2222기존 구성보다 한단계 더 복잡한 컴포넌트가 필요해 졌습니다... 아이콘과 텍스트를 묶어주는 'Contents'라는 오토 레이아웃을 하나 더 구성해야만 하는 상황이 생겼죠. 하지만 저희에게는 이런 Filled 스타일의 버튼이 하나만 있는 것이 아니었기 때문에, 이대로 버튼의 무수한 Variants를 만드는 것에 불필요한 소요가 너무나 많던 상황이었습니다. 무슨 일이 생겨서 이걸 바꿀려고 치면, 레이어의 구조조차 이해하기 어려운 상황이었던 것이죠.
다행이도 지금은 기능의 업데이트에 따라 필요가 없는 방법이고, 당시의 최선이라고 생각되어 작업했던 부분이라서 공유를 드려봤는데요.. 이런 부분은 이렇게도 표현할 수 있었구나~ 하고 넘어가셔도 괜찮을 것 같습니다 ㅎㅎ..
피그마의 absolute position layer 업데이트는 이런 상황 속 그저 가뭄 속의 단비 같았답니다. 무려 8개의 레이어와 그룹 단위를 사용하는 것을 4개로 줄여준 것이죠..
한편으로는 이렇게 복잡하게 레이어 구성하는 것은 이젠 필요가 없어졌지만,
0.0001의 레이어를 넣는게 도움이 되는 방향이 한 가지 있었습니다. 바로 min-width가 필요한 상황인데요,
min-width 라고 함은 '이 크기 이하로 줄어들지마!!'라는 속성이라고 보시면 되겠습니다.
만약 버튼이 특정 width 이하로 줄어들어서는 안되는 경우가 있다면,
요렇게 Fixed width인, 컨텐츠를 담지 않은 프레임을 넣어줌으로써 이 이하로 버튼의 사이즈가 줄어들지 않게 만들 수 있습니다. (물론 프레임이 아니고 도형이여도 관계가 없겠습니다만, 저는 도형이 들어있는 건 뭔가 표시될까봐 찝찝해서 ㅎㅎ..)
반대의 경우(max-width)는 아직까지 오토레이아웃을 이용해 피그마 내에 구현할 수 있는 방식이 있는지는 아직까지는 모르겠네요.. 좋은 방법이 있다면 소개해주세요!
물론 이 방법도 추후에 피그마에서 min-width나 max-width와 같은 크기에 대한 부가 속성을 지정해줄 수 있는 업데이트가 이뤄진다면 대체될 수 있을 것 같습니다! 고렇게 된다면, 다시 한 번 사용하고 있는 디자인 시스템을 개선하는 프로세스가 이어지겠지요..?! 반가우면서도 고통스러운 업데이트일 것 같습니다 :)
점점 CSS랑 비슷해져가니까 왠지 언젠가 해줄거 같다는 생각? ㅋㅋ
오늘은 겪었던 과정이 길기도 하고, 나름 챌린징하게 컴포넌트를 만들었던 기억이 있어서 상대적으로 긴 글이 되었습니다. 또한 컴포넌트를 구성하는 여러 방법들은 다른 글에서도 많이들 보여주시는지라, 더 딥한, 왠지 아무도 안쓸거 같은(...) 독특한 경험까지 다뤄보고자 욕심을 부려 여기까지 글을 쓰게 되었네용 ㅋㅋㅋㅋ
여러분은 버튼을 어떻게 만드시나요? 재미난 사례가 있다면 댓글로 알려주세요!
