디자인 시스템에서 버튼 스타일 정의와 관련된 시리즈 아티클을 함께 둘러보았습니다.
◆url
◆내용 요약
1. 버튼
∙ 버튼의 구성요소 : 텍스트, 아이콘 + 텍스트, 아이콘
∙ 버튼의 크기 종류 : Small, Medium, Large
∙ 누르기 편한 크기 : 타겟의 크기는 최소44X44 px이상(웹접근성 지침), 44X44pt(IOS), 48X48 dp(AOS)
∙ 버튼의 레이아웃 : 아이콘과 함께 배치하는 경우 좌우 간격을 다르게 조정해줘야 균형감있는 구성이된다.
2. 버튼의 스타일 정의
∙ 우선순위에 따라 가시성의 차이를 두어 디자인한다 : 높음, 보통, 낮음
∙ 스타일의 종류 : Soild(배경색 채움), Tinted(연하거나 투명한 배경색), Outlined(테두리), Subtle(텍스트만)
∙ CTA버튼은 가시성있는 스타일을 사용하되 반복배치를 피한다. 강약에 맞게 배치
∙ 모서리 반경 : 수치를 정해 통일한다. 너무 다양하게 사용하지 않는다.
3. 버튼 상태에 따른 정의
∙ 데스크탑 기준: 기본(Enable), 마우스오버(Hovered), 눌림(Pressed), 비활성화(Disable), 집중됨(Focused)
∙ 모바일 기준: 기본(Enable), 눌림(Pressed), 비활성화(Disabled)
◆ 느낀점
디자인시스템 버튼 스타일 정의에 대해 시리즈 아티클을 살펴보았다. 사용할 버튼의 형태를 먼저 결정하고, 스타일의 종류 및 크기로 가시성의 차이를 두어 위계를 주고 버튼의 상태에 따라 어떤 모습을 할지에 대해 정하면 되겠다는 작업흐름에 대해 정리해 볼 수 있었다.