[5/100] button

5번째는 버튼입니다. 디자인 시스템을 구축하다 보면 가장 기본적이면서도 복잡하다면 복잡한 컴포넌트인데요. 프로덕트를 디자인하다 보면 앱, 웹을 모두 같이 하는 경우가 있습니다. 그럼 아무래도 앱, 웹의 사용자 인터페이스의 환경이 조금은 다르다 보니, 마우스를 사용하는 환경, 단순히 탭을 하는 환경, 이렇게 다르다 보니 버튼도 상태 혹은 이벤트에 대해 신경을 써야 하지만 간단하게 처리하자면, 앱에서는 mouse-hover 상태만 없다고 생각하면 편합니다. 

 

 

그리고 버튼은 보통 스타일이 있는데, 주로 많이 사용되는 스타일은 위의 3가지가 있습니다. 부르는 명칭이 좀 제각각인 경우가 많아서 저같은 경우에는 왼쪽부터, primary, secondary, ghost라고 부르고 있습니다. primary가 가장 많이 쓰이고, 가장 시각적으로 강조되다 보니 CTA 버튼에 주로 사용되고, secondary는 요즘 앱에서는 그다지 쓰이지 않고, 바로 ghost로 시각적 우선도를 낮춰서 화면의 간결성을 높이는 거 같습니다. 그래도 웹에서는 아직 secondary 스타일을 쓰는데 아무래도 화면에 보이는 요소들이 앱 환경보다는 많다 보니 시각적 위계를 보다 쉽게 정리하기 위해 그런 것 같습니다. 

 

하위 컴포넌트 목록 및 상태

• style - primary, secondary, ghost 로 구분
• size - fixed, flexible 로 구분
• icon - none, left, right 로 구분
• state - default, mouse-hover(앱에서는 제외), mouse-down(앱에서는 탭된 상태), disabled
• radius - 위의 예제는 테두리가 둥글게 라운드 처리가 된 버튼이지만 서비스의 성격이나 비주얼 방향성에 따라서 보다 각진 형태도 가능합니다. 보통 각진 형태는 사무적이고, 딱딱한 느낌이고, 둥근 형태는 친근하고, 귀여운 느낌인데, 요즘 트렌드는 아무래도 둥근 형태입니다. 둥근 형태의 단점을 굳이 꼽자면, 좌우 여백을 보다 넉넉히 줘야 시각적으로 균형이 맞아 보입니다.

예제에 사용된 이미지 출처는 icons8 입니다