피그마에서 버튼을 만드는 다양한 방법 (1)

피그마 디자인 시스템에서 버튼 만들기

오늘은 피그마에서 다양하게 버튼을 그리는 방법과 인터렉션이 가능한 컴포넌트를 만드는 방법을 소개해볼까 합니다. 오늘은 지난 글과 달리 제가 생각하는 Best Practice가 명확한 상황이라 이에 대한 장점도 소개시켜 드려 보겠습니다!

우리가 UI에서 흔히들 보는 '버튼'이라는 컴포넌트는 너무나도 명확한 멘탈 모델을 가지고 있습니다. 대부분 배경색과 텍스트를 조합하여 사용자의 인터렉션을 이끌어 내는 형태로 사용되고 있지요.

서비스의 느낌에 따라 full radius를 활용하여 나타내는 경우도, 확실히 구분되는 사각형으로 쓰이는 경우도 있습니다.

다양한 스타일의 버튼디자인들, 본질적으로 다들 크게 다르진 않다!

그럼에도 도형 + 텍스트라는 조합이 크게 틀어지지는 않는 것 같습니다. 오늘은 버튼을 만드는 다양한 방법을 다뤄볼게요.

첫 번째,

예상하셨 듯이 가장 쉬운 방법인 도형과 텍스트의 조합입니다. Rectangle 하나와 Text 레이어 하나를 그룹으로 만들어서 사용할 수 있습니다. 이 방식은 만들기 가장 쉽..다고 해야 할까요? 단순한 조합이기 때문에 여타 세팅이 필요하지 않고, 원하는 버튼의 크기와 글자를 만들어 적용할 수 있습니다.

하지만 내부의 텍스트가 바뀔 때 마다 객체의 크기나 위치를 일일히 조정해 주어야 합니다. 텍스트에 연계되어 있는 도형 레이어가 아닌 각각이 개별의 객체이기 때문에 텍스트의 증감에 따라 반응하지 않고, 이를 일일히 수정해 주어야 하죠. 고정되어 있는 버튼 크기로 사용하고, 내부의 텍스트만 변경되는 상황이 유지될 것이라면 가장 편한 방법이 되겠습니다.

두 번째,

프레임에 배경 fill 속성을 넣고, 텍스트 레이어를 얹어서 쓰는 방식입니다. 첫 번째 방식과 다르게 배경 역할의 Rectangle 레이어라는 객체가 없기 때문에, 프레임 자체의 속성을 활용해 스타일링 해야 합니다. 이 방법을 이용하면 내부의 텍스트 레이어가 프레임의 크기를 줄이거나, 늘렸을 때 자동으로 특정한 위치에 정렬되도록 설정할 수 있습니다.

하지만 이 방법 역시 정렬만 자동화 할 수 있고, 내부 컨텐츠에 맞춰 크기가 변하도록 만들 수는 없습니다. 그룹으로 이용하는 방식보다는 좋지만 여전히 반절 정도 부족하네요.

세 번째,

두 번째의 프레임 방식에서 한 단계 업그레이드된 Auto-layout을 사용하는 방식입니다. 프레임을 기반으로 하고 있기 때문에 정렬되는 위치를 조정하는 것은 물론, 텍스트의 증감에 따라 자동으로 크기가 변하도록 설정됩니다. 또한 텍스트가 아닌 다른 아이콘 같은 것들이 추가되더라도 일관성있게 자동으로 배치되도록 할 수 있습니다.

고정된 width로 작동하도록 fixed width 상태로도 지정해 줄 수 있고, 최근 들어서 오토레이아웃 안에서도 특정 위치에 객체를 고정 위치로 둘 수 있는 기능 또한 추가가 되어 더욱 다양한 시도를 할 수 있을 것 같습니다.

위에 설명드린 이유들 덕분에 피그마 내에서 버튼을 만드는 가장 진보한(?) 방식이아닐까 합니다. 디자인 시스템 컴포넌트로써도 버튼의 일관성을 유지하면서 다양성을 높게 보장할 수 있는 방식이기 때문에 이 방식으로 버튼을 그려두는 게 Best Practice 라고 볼 수 있겠습니다.

글이 길어지니 두편으로 나누어, 다음 글에서는 이 버튼 위에 overlay 되는 느낌의 레이어를 통해 버튼 위 hover 하는 인터렉션을 나타내려고 시도해 봤던 것들을 다뤄보도록 하겠습니다.

여러분은 어떤 방식으로 버튼을 만들고 계신가요? 직접 버튼을 디자인 하면서 겪은 이야기가 있다면 공유해 주세요!