버튼 스타일Button Style
한 줄 정의
버튼 스타일은 버튼의 배경색 · 테두리 · 글자 모양을 어떻게 꾸밀지 정한 방식으로, 버튼마다 눈에 띄는 정도를 달리해 어떤 행동이 더 중요한지 보여 주는 데 써요.
쉽게 말하면
한 화면에 '구매하기' · '장바구니 담기' · '자세히 보기' 버튼이 함께 있으면, 방문자는 버튼 모양을 보고 어느 버튼이 가장 중요한지 판단해요. 그래서 사이트를 만드는 사람은 가장 바라는 행동에는 눈에 잘 띄는 스타일을, 덜 중요한 행동에는 차분한 스타일을 입혀요. 버튼 스타일은 이렇게 버튼 사이에 무게 차이를 두는 방법이에요.
어떤 종류가 있나요
눈에 잘 띄는 것부터 놓으면 이래요.
- 솔리드 버튼: 배경을 진한 색으로 꽉 채운 버튼
- 아웃라인 버튼: 배경은 비우고 테두리만 그린 버튼
- 고스트 버튼: 평소에는 배경도 테두리도 보이지 않는 버튼
- 링크 버튼: 글자색이나 밑줄만으로 링크처럼 보이게 만든 버튼
부르는 이름은 회사마다 달라요. 구글의 머티리얼 디자인은 채운(Filled) · 외곽선(Outlined) · 텍스트(Text) 버튼이라는 이름을 써요. 머티리얼 디자인은 채운 버튼을 '저장'처럼 주된 행동에, 외곽선 버튼을 '취소' · '뒤로'처럼 중요하지만 주된 행동은 아닌 곳에, 텍스트 버튼을 '더 알아보기'처럼 덜 중요한 행동에 쓰라고 안내해요(안드로이드 개발자 문서).
큐샵에서는
클래식 에디터와 스튜디오 에디터 모두 버튼 블록이 있어요. 스튜디오 에디터에서는 블록의 색상 · 배경 · 외곽선 · 그림자 · 모서리 반경을 정해 '스타일'로 저장하고, 저장한 스타일을 여러 블록에 반복해서 적용할 수 있어요.
헷갈리는 말
| 헷갈리는 말 | 뜻 | 버튼 스타일과 다른 점 |
|---|---|---|
| CTA | 방문자에게 다음 행동을 권하는 버튼이나 문구 | CTA는 버튼이 맡은 역할이고, 버튼 스타일은 버튼의 겉모습이에요. CTA 버튼에는 그 화면에서 가장 눈에 띄는 스타일을 입혀요 |
같은 말
아래 이름으로도 불러요. 모두 같은 뜻이에요.
Button Style버튼 디자인