고스트 버튼을 디자인할 때 고려사항 6가지
UX 디자인 배우기 #41
Today UX 아티클
UX Planet에 올라온 Nick Babich의 글 Ghost Buttons in UXDesign를 전문 번역한 글입니다.
2014년, UI 디자인 세계에서 가장 우세한 디자인 트렌드 중 하나는 “고스트 버튼(ghost buttons)”입니다. 고스트 버튼은 투명하고 비어있는 버튼으로, 직사각형이나 정사각형 같은 기본적인 모양을 가지고 있습니다. 고스트라는 이름 외에도 “빈(empty, hollow)”, “벌거벗은(naked)” 버튼이라는 타이틀을 가지고 있습니다.
고스트 버튼은 보통 매우 얇은 선으로 테두리가 그려져 있으면서, 내부 영역은 평범한 텍스트로 구성되어 있습니다. 행동유도(Call to Action) 버튼으로 가장 많이 등장한 모양새를 가졌습니다.
보통 상태(좌)와 선택 상태(우)이런 버튼은 보통 기존의 클릭할 수 있는 버튼들보다 좀 큰 경향이 있으며 스크린 중앙과 같은 눈에 띄는 위치에 놓입니다. “플랫”한 화면에 높은 대비 효과를 주어 잘만 사용하면 유행을 따르면서도 효과적으로 눈길을 끌 수 있습니다.
고스트 버튼의 유래
처음 “고스트 버튼”이란 용어를 언급한 웹사이트는 텀블러(Tubmlr) 블로그 ‘web sites with ghost buttons’에 나왔습니다. 고스트 버튼은 플랫디자인 혁명에서 유래했으며 애플이 iOS7을 발표하면서 유행이 되었습니다. iOS의 UI에서 사용된 많은 버튼이 우리가 고스트 버튼이라고 부르는 것입니다.
Name’, ‘Release Data’,‘Featured’ 는 유사 고스트 버튼이고 ‘Get’은 고스트 버튼입니다.고스트가 무섭지 않다!
이제 고스트 버튼이 당신의 디자인과 사용자 경험에 가져다줄 수 있는 긍정적인 측면을 살펴보겠습니다.
"고스트 버튼은 만들기 쉽습니다"
단순함은 고스트 스타일 버튼이 유행하게 된 주요 이유입니다. 초보 디자이너들도 쉽게 만들 수 있습니다. 고스트 버튼의 가장 유명한 모양은 클래식한 기하학적 모양(평평한 직사각형 또는 타원형 박스)에 아무런 시각적 데코레이션이나 움직이는 요소를 집어넣지 않는 것입니다.
"고소트 버튼은 초점을 만들어 줍니다"
고스트 버튼은 페이지의 주요 이미지에 눈길을 고정할 수 있게 해줍니다. 배경을 잘 선택하고 잘 대비되도록 그린 테두리는 지나치게 압도하는 인상을 주지 않고도 고스트 버튼에 눈길이 가게 만들어 줍니다.
"고소트 버튼은 심미성을 높여줍니다"
고스트 버튼은 레이아웃에 전반적으로 깔끔한 심미성을 더해줍니다. 공간을 확보하는 데 훌륭한 역할을 하며 배경 이미지를 완전 잘 볼 수 있기 때문에 방해가 되지 않습니다. 이런 단순한 속성은 페이지에서 더 중요한 디자인이 더 두드러질 수 있게 해줍니다.
"고스트 버튼은 통합하기 쉽습니다"
고스트 버튼은 투명하기 때문에 거의 모든 디자인 스키마에 잘 어울립니다. 당신의 디자인 환경에 쉽게 녹아들 것입니다.
"고스트 버튼은 페이지에서 하나만 나타나거나 여럿이 같이 나타납니다"
핵심은 유저가 인지할 수 있도록 페이지에서 가장 눈에 띄는 영역에 고스트 버튼을 사용하는 것입니다.
고스트 버튼을 디자인할 때 고려해야 할 것
고스트 버튼이 많은 장점을 지니긴 했지만, 다른 고려 요소들도 있습니다. 앱이나 사이트를 디자인하기 전에, 이 컨셉이 당신의 프로젝트에도 잘 맞는지 그 장점과 단점을 모두 고민해야 합니다.
고려사항 1. 행동 유도 버튼으로의 고스트 버튼
대부분의 경우, 고스트 버튼을 주요 행동 유도 버튼으로 이용하는 것은 좋은 생각이 아닙니다. 아래 Bootstrap 사례에서 볼 수 있듯이, ‘Download Bootstrap’이라고 쓰인 고스트 버튼은 메인 로고랑 거의 비슷해 보입니다.
Image credit: Bootstrap보통 고스트 버튼은 제2의, 혹은 제3의 콘텐츠에 이용하는 것이 더 좋습니다. 왜냐면 주요 행동 유도 버튼과 구분되지 않거나 구분할 수 없을 것이기 때문입니다. 유저가 메인 행동 유도 버튼을 보기를 원하는데 그렇게 하지 못하고 있다면, 부차적인 버튼을 약하게 만들면 됩니다.
Specular 사이트가 좋은 예시입니다 – 주요한 액션인 ‘지금 구매하기(Purchase Now)’는 플랫 버튼으로 만들고, ‘둘러보기(Take Tour)’를 고스트 버튼으로 디자인하여 부차적인 버튼으로 만들었습니다.
Imagecredit: Specular정리: 고스트 버튼으로 주요 행동 유도 버튼을 만드는 것은 일반 통념에 어긋나며, 제2의, 혹은 제3의 액션에 이용하는 것이 가장 좋습니다.
고려사항 2. 고스트 버튼은 전통적인 ‘버튼’처럼 생기지 않았다
고스트 버튼은 ‘버튼’ 혹은 실제 현실에서 쓰는 버튼의 기존 디자인 컨셉을 탈피했습니다. 특히 고스트 버튼을 지혜롭게 배치하지 않으면, 찾는 것도 쉽지 않을 수 있습니다.
모든 유저가 디자인을 잘 알지는 못할 것입니다; 이런 요소가 익숙하지 않은 많은 유저들은 아마 고스트 버튼을 인지하지 못하거나 클릭 가능한 요소라고 생각하지 못할 수도 있습니다. 예를 들어, 아래 페이지에서 ‘Get Access’ 버튼을 발견할 수 있겠는가? 디자인을 잘 아는 유저라 해도 간단하지 않은 과제일 것입니다.
Imagecredit: Visage정리: 고스트 버튼은 때때로 진짜 유령이 되어 전체 레이아웃에 섞여 버릴 수도 있습니다.
고려사항 3. 마우스를 올린 상태(focused state)를 표시해준다
유저가 버튼 위에 마우스를 올렸음을 알려주는 시각적 피드백을 제공하는 것이 좋은데, 고스트 버튼에서 특별히 더 중요합니다. 유저가 이게 버튼인지 아닌지 의심할 수 있기 때문입니다.
Source: CSS Buttons고려사항 4. 배경 이미지를 조심한다
고스트 버튼이 배경 깊이 박혀버리면 유저가 방해를 받을 수도 있습니다. 고스트 버튼의 투명함이 가독성 문제를 야기할 수 있습니다. 이미지 위에 텍스트를 고스트 형식으로 올려버리면 많은 경우에 시각적 대비가 충분하지 않을 수 있습니다.
아래 사례를 보면, 이 사이트는 풀 스크린 사진을 배경으로 사용하고 있습니다. 중간에 보이는 버튼이 유저가 회사에 대한 더 많은 정보를 발견하도록 클릭하게 유도하는 행동 유도 버튼입니다. 하지만 버튼에 쓰인 색이 흰색이어서 ‘imagemaking’이란 단어는 사진 속 여성이 입고 있는 밝은 색 드레스와 대비가 되지 않고 있습니다. 그 결과, 가독성에 큰 영향을 미치게 되었습니다.
Image credit: bilderphoto정리: 지금까지 보면 고스트 버튼은 보통 사진 배경 위에 사용되는데, 좀 더 눈에 띄게 만들기 위해 테두리와 내부 텍스트에 대비되는 색을 이용하는 것이 기본입니다.
고려사항 5. 고스트 버튼에 의미를 담은 텍스트를 사용한다
고스트 버튼에 들어가는 텍스트는 ‘여기를 클릭하세요(Click here)’ 혹은 ‘저장하기(Save it)’보다는 더 복잡합니다. 이런 버튼에서 사용되는 문구는 제대로 짜야하고 나머지 디자인의 맥락 안에 있어야 합니다.
이런 상황은 Integra 사례에서 분명하게 볼 수 있습니다. 메인 페이지에 있는 ‘SHOWREEL’ 버튼을 누르면 움직이는 이미지의 쇼릴이 나오는데, 이 고스트 버튼에 마우스를 갖다 대면 배경색이 변하며 어떤 일이 벌어질지 명확하게 알려주고 있습니다.
Image credit: Integra고려사항 6. 개성과 고스트 버튼
고스트 버튼은 그 단순함과 미니멀리스트 스타일 때문에 모든 앱과 사이트에서 똑같아 보이는 경향이 있습니다. 몇 안 되는 전통적인 모양으로 독특한 고스트 버튼을 만드는 것은 정말 어렵습니다.
Image credit: creative-knight그래서 그 해결책으로 디자이너들이 버튼 주위에 작은 데코레이션을 추가하거나 독창적인 폰트(산세프리체 말고)를 사용하여 개성을 더하고 있습니다. 아래 사례에서도 확인할 수 있습니다.
결론
모든 버튼(클래식한 버튼이든 고스트 버튼 같은 모던한 버튼이든)은 유저가 취했으면 하는 행동을 취하도록 유도하기 위해 만들어졌습니다. 버튼 UX 디자인은 언제나 ‘인지’와 ‘명확성’이 전부입니다. 매끄러운 연결은 소통이 이어지게 해줍니다. 적절한 버튼을 찾기 어려워지는 것과 같은 작은 결함은 좋게 말하면 방해(interruptions)고 나쁘게 말하면 고장(breakdowns)과 같습니다.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
줌 Live 강의 수강생 모집 중
(매월 Live 3-4개 강좌 오픈하고 있습니다)
인프런 20개 UX 인터넷(VOD) 강좌 수강생 모집 중
(평생 수강)
https://www.inflearn.com/users/196290
