[UI/UX 원칙 #13] 고스트 버튼 UX 원칙 가이드라인

고스트 버튼 UX 원칙 가이드라인

닉 바비치의 글 [고스트 버튼 UX 원칙 가이드라인] 소개하고자 합니다.

고스트 버튼은 투명하고 비어 있는 버튼으로, 주로 직사각형이나 정사각형과 같은 기본적인 형태를 가지고 있습니다. 이러한 버튼은 "빈 버튼", 또는 "벌거벗은 버튼" 등 여러 가지 이름으로 불리기도 합니다.

고스트 버튼은 일반적으로 매우 얇은 선으로 테두리가 둘러져 있으며, 내부는 간단한 텍스트로 구성되어 있습니다. 이 버튼은 주로 행동 유도(Call to Action, CTA) 버튼으로 사용되며, 깔끔한 디자인을 자랑합니다.

1) 정의와 형태

고스트 버튼은 투명하고 비어 있는 버튼으로, 기본적인 형태인 직사각형과 정사각형을 가지고 있습니다.

2) 명칭

고스트 버튼은 다양한 이름으로 불릴 수 있습니다.

(1) 다양성
고스트 버튼이 여러 이름으로 불린다는 것은 이 버튼이 디자인의 유연성을 가지고 있으며, 다양한 상황에서 사용될 수 있음을 의미합니다.

(2) 브랜딩
각 브랜드나 디자이너가 고스트 버튼을 자신만의 스타일이나 목적에 맞게 명명함으로써, 고유한 정체성을 부여할 수 있습니다.

(3) 사용 사례
다양한 이름은 이 버튼이 특정 용도나 맥락에서 어떻게 사용될 수 있는지를 보여줍니다. 예를 들어, "빈 버튼"은 단순한 디자인을 강조할 수 있고, "벌거벗은 버튼"은 더욱 독창적인 접근을 나타낼 수 있습니다.

3) 특징

고스트 버튼은 얇은 선으로 테두리가 둘러져 있고, 내부는 단순한 텍스트로 구성되어 있어 디자인적 특성이 강조됩니다.

(1) 미니멀리즘
얇은 선의 테두리는 고스트 버튼의 깔끔하고 간결한 디자인을 부각시킵니다. 이러한 미니멀리즘은 현대적인 느낌을 주며, 사용자에게 부담을 줄여줍니다.

(2) 가독성
내부의 단순한 텍스트는 버튼의 목적을 명확히 전달하는 데 도움을 줍니다. 복잡한 디자인 없이도 사용자가 버튼의 기능을 쉽게 이해할 수 있도록 합니다.

(3) 시각적 강조
얇은 테두리와 간단한 텍스트는 버튼을 시각적으로 돋보이게 하여, 사용자가 클릭하도록 유도하는 효과를 줍니다. 이는 행동 유도(Call to Action) 버튼으로서의 역할을 강화합니다.

(4) 디자인 일관성
이러한 디자인 특성은 다른 UI 요소와의 조화를 이루며, 전체적인 사용자 경험을 향상시키는 데 효과적입니다.

4) 용도

주로 행동 유도(Call to Action, CTA) 버튼으로 사용된다는 점에서 고스트 버튼의 실용성을 부각시킵니다.

5) 배치

고스트 버튼은 페이지의 전통적인 클릭 가능한 버튼보다 다소 크고, 화면 중앙과 같은 눈에 잘 띄는 위치에 배치되는 경우가 많습니다. 

(1) 크기와 가시성
고스트 버튼이 전통적인 클릭 가능한 버튼보다 크고, 눈에 잘 띄는 위치에 배치되면 사용자에게 쉽게 인식될 수 있습니다. 이는 사용자가 버튼을 클릭하도록 유도하는 데 도움이 됩니다.

(2) 트렌디함
최근 디자인 트랜드 요소를 반영하여, 사용자에게 세련된 느낌을 줍니다. 이는 브랜드의 이미지와도 연결되어 긍정적인 인상을 남길 수 있습니다.

(3) 효과적인 유도
높은 대비는 버튼이 다른 요소들 사이에서 돋보이게 하여 사용자의 주목을 끌고, 클릭을 유도하는 효과를 강화합니다.

(4) 디자인 혁신
"플랫" 디자인에 새로운 변화를 주는 것은 기존의 디자인 트렌드에 신선함을 더해, 사용자에게 더 매력적으로 다가갈 수 있게 합니다.

6) 고스트 버튼의 기원

(1) 용어의 출처
"고스트 버튼"라는 용어는 Tumblr 블로그에서 처음 사용되었습니다.

(2) 플랫 디자인 혁명
플랫 디자인은 복잡한 요소를 배제하고 단순함을 추구하기 때문에 고스트 버튼과 잘 어울립니다.

(3) Apple의 영향
Apple이 iOS 7을 출시하면서 고스트 버튼이 트렌드로 자리 잡게 되었습니다.

(4) UI의 활용
iOS의 사용자 인터페이스에서 고스트 버튼 형태의 버튼이 많이 사용된다는 사실은 이 디자인이 얼마나 널리 퍼졌는지를 보여주는 사례입니다.

7) 고스트가 무섭지 않다!

이제 고스트 버튼이 디자인과 사용자 경험에 미칠 수 있는 긍정적인 측면을 살펴보겠습니다.

(1) 고스트 버튼의 매력과 디자인 간편성 
초보 디자이너도 쉽게 만들 수 있는 고스트 버튼은 시각적 장식이나 애니메이션 요소가 없는 전통적인 기하학적 형태(평평한 직사각형 또는 타원형 박스)로 구성되어 있습니다. 이러한 특성 덕분에 고스트 버튼은 매력적이면서도 접근하기 쉬운 디자인으로 많은 사랑을 받고 있습니다.

(2) 고스트 버튼의 주목성: 배경과 테두리의 조화
적절하게 선택된 배경과 잘 정의된 대조적인 테두리를 갖춘 고스트 버튼은 사용자에게 압도적인 인상을 주지 않으면서도 주목을 끌 수 있는 요소입니다. 이러한 배경과 테두리 덕분에 버튼은 눈에 잘 띄지만, 지나치게 화려하지 않아 사용자에게 부담을 주지 않습니다. 이처럼 조화롭게 어우러진 디자인 요소들이 버튼을 효과적으로 만들어 줍니다.

(3) 고스트 버튼의 장점: 깔끔한 UI 디자인을 위한 필수 요소
고스트 버튼은 디자이너가 UI를 깔끔하게 유지하는 데 매우 유용합니다. 이 버튼은 공간을 효율적으로 활용할 수 있으며, 배경 이미지가 완전히 드러나기 때문에 시각적인 방해 요소를 최소화합니다. 또한, 버튼의 간단한 형태 덕분에 페이지의 주요 디자인이 더욱 돋보이게 되어 사용자가 쉽게 집중할 수 있도록 도와줍니다.

(4) 고스트 버튼의 유연성: 다양한 디자인과의 조화
고스트 버튼은 디자인의 환경에 자연스럽게 녹아들어 거의 모든 디자인과 잘 어울립니다. 고스트 버튼이 다양한 디자인에 적합한 이유는 간결하고 투명한 형태가 배경과 조화를 이루어 시각적으로 방해되지 않기 때문입니다. 또한, 다양한 색상과 스타일의 디자인에 쉽게 통합될 수 있는 특성을 가지고 있어, 여러 환경에서 유연하게 활용될 수 있습니다.

고스트 버튼은 페이지에 단독으로 나타나기도 하고, 그룹으로 결합되기도 합니다. 이는 사용자가 쉽게 눈에 띄게 하기 위해 페이지의 중요한 위치에 고스트 버튼을 활용하는 것입니다. 고스트 버튼이 단독으로 또는 그룹으로 배치될 수 있는 이유는 디자인의 유연성을 제공하기 때문입니다. 주요 위치에 고스트 버튼을 배치함으로써 사용자의 시선을 끌고 클릭을 유도하는 전략을 취할 수 있습니다.

8) 고스트 버튼 디자인 시 고려해야 할 사항

고스트 버튼은 많은 디자인 장점을 가지고 있지만, 고려해야 할 점도 있습니다. 앱이나 사이트를 디자인하기 전에 장단점을 모두 따져보고 이 개념이 프로젝트에 적합한지 판단하는 것이 중요합니다,

(1) 고스트 버튼을 CTA 버튼으로 사용하기

대부분의 경우, 고스트 버튼을 주요 CTA로 사용하는 것은 바람직하지 않습니다. 이는 시각적으로 다른 요소와 혼동될 수 있기 때문입니다. 예를 들어, 다음 사례처럼 "Download Bootstrap" 버튼이 주요 로고와 거의 동일하게 보인다면, 사용자는 버튼을 클릭해야 하는지에 대해 혼란을 느낄 수 있습니다. 이러한 혼동은 클릭률을 낮추고 사용자 경험을 저해할 수 있습니다. 따라서 고스트 버튼은 보조적인 역할로 활용하고, 주요 CTA는 명확하게 구분된 디자인을 사용하는 것이 좋습니다.

고스트 버튼을 보조적이거나 3차적인 콘텐츠에 사용하는 것이 더 좋은 이유는 주요 CTA와의 혼동을 방지하고 사용자 경험을 최적화하기 위함입니다. 주요 CTA는 사용자가 가장 먼저 주목해야 할 행동을 유도하는 버튼이므로, 이를 명확하게 강조하는 것이 중요합니다. 고스트 버튼이 보조 역할을 할 경우, 사용자는 주요 CTA에 집중할 수 있으며, 필요에 따라 보조 버튼으로 쉽게 이동할 수 있습니다. 이렇게 함으로써 클릭률을 높이고, 사용자에게 더 나은 경험을 제공할 수 있습니다.

Specular 사이트는 좋은 예시입니다. 이 사이트는 'Purchase Now'라는 CTA 버튼을 사용하고, 'Take Tour'라는 고스트 버튼을 보조 버튼으로 활용하고 있습니다

즉, 고스트 버튼을 주요 CTA로 사용하는 것이 일반적인 원칙에 반하는 이유는, 이러한 버튼이 시각적으로 약해 주목도를 떨어뜨릴 수 있기 때문입니다. 주요 CTA는 사용자에게 가장 중요한 행동을 유도해야 하며, 이를 명확하고 눈에 띄게 디자인하는 것이 중요합니다. 고스트 버튼은 보조적인 역할을 할 때, 사용자가 필요에 따라 선택할 수 있는 옵션으로 기능하며, 주요 CTA와의 혼동을 피할 수 있습니다. 이렇게 함으로써 사용자가 원하는 행동을 더 쉽게 인식하고 실행할 수 있도록 도와줍니다.

(2) 예측 가능한 상호작용 디자인하기

고스트 버튼이 적절하게 배치되지 않으면 입력 필드처럼 보일 수 있습니다. 이는 두 요소가 비슷한 디자인 특성을 가지고 있기 때문입니다. 고스트 버튼은 일반적으로 테두리만 있고 배경이 투명하여 시각적으로 약한 인상을 주며, 입력 필드도 테두리만 있는 경우가 많습니다. 이로 인해 사용자는 버튼과 입력 필드를 혼동할 수 있습니다. 특히 고스트 버튼이 페이지의 다른 요소와 유사한 색상이나 스타일로 디자인되면 더욱 혼란을 초래할 수 있습니다. 따라서 버튼의 위치와 디자인을 신중하게 고려하여 사용자가 명확하게 인식할 수 있도록 하는 것이 중요합니다

예를 들어, 아래 페이지에서 ‘Get Access’ 버튼을 찾아볼 수 있나요? 이는 숙련된 사용자에게도 간단한 작업이 아닙니다.

고스트 버튼은 때때로 진짜 유령처럼 되어 전체 레이아웃과 섞일 수 있습니다. 고스트 버튼이 이렇게 보이는 이유는 주로 디자인 요소와 색상 때문입니다. 일반적으로 고스트 버튼은 테두리만 있고 배경이 투명하여 시각적으로 약한 인상을 주기 때문에, 주변 요소와 색상이나 스타일이 비슷할 경우 쉽게 눈에 띄지 않습니다. 이로 인해 사용자는 버튼의 존재조차 인식하지 못할 수 있습니다. 따라서 고스트 버튼을 사용할 때는 배경과의 대비를 고려하여 디자인하고, 버튼의 위치와 크기도 신중하게 설정하여 사용자가 명확하게 인식할 수 있도록 해야 합니다.

(3) 고스트 버튼에서의 시각적 피드백의 중요성

사용자에게 버튼 위에 마우스를 올렸을 때 좋은 시각적 피드백(호버 효과)을 제공하는 것은 매우 중요한 UI 관행입니다. 특히 고스트 버튼의 경우, 이 순간은 더욱더 중요합니다. 그 이유는 사용자가 이것이 버튼인지 아닌지 혼란스러울 수 있기 때문입니다.

고스트 버튼은 시각적으로 약한 인상을 주며, 테두리만 있고 배경이 투명하여 다른 요소와 잘 어우러집니다. 이로 인해 사용자는 버튼의 존재를 쉽게 인식하지 못할 수 있습니다. 따라서 마우스를 올렸을 때 제공되는 시각적 피드백은 버튼임을 명확히 인식하게 도와주며, 사용자가 클릭할 의도를 갖도록 하는 데 중요한 역할을 합니다. 이런 피드백이 없으면 사용자는 버튼을 놓치거나 클릭하지 않을 가능성이 높아질 수 있습니다.

(4) 고스트 버튼의 가독성 문제와 사용자 인식

고스트 버튼은 배경에 너무 묻혀서 사용자에게 불편을 줄 수 있습니다. 그 투명성 때문에 텍스트 가독성 문제를 일으킬 수 있으며, 이미지 위에 텍스트를 고스트 형태로 배치할 때 시각적 대비가 부족한 경우가 많습니다.

고스트 버튼이 배경에 묻히는 이유는 그 특성상 배경이 투명하게 설정되어 있어 시각적으로 약한 인상을 주기 때문입니다. 따라서 배경 이미지와 버튼의 색상이 유사할 경우, 사용자는 버튼을 쉽게 인식하지 못할 수 있습니다.

또한, 고스트 버튼 위에 텍스트를 배치할 때, 배경 이미지와의 대비가 부족하면 텍스트가 흐릿하게 보이거나 읽기 어려워질 수 있습니다. 이로 인해 사용자는 버튼의 기능을 이해하지 못하거나 클릭하지 않을 가능성이 높아집니다. 결국, 고스트 버튼은 시각적 명확성이 떨어져 사용자 경험을 저해할 수 있는 요소가 됩니다.

아래 사례를 보면, 이 사이트는 풀 스크린 사진을 배경으로 사용하고 있습니다. 중간에 보이는 버튼이 유저가 회사에 대한 더 많은 정보를 발견하도록 클릭하게 유도하는 행동 유도 버튼입니다. 하지만 버튼에 쓰인 색이 흰색이어서 ‘imagemaking’이란 단어는 사진 속 여성이 입고 있는 밝은 색 드레스와 대비가 되지 않고 있습니다. 그 결과, 가독성에 큰 영향을 미치게 되었습니다.

결론

모든 버튼, 전통적인 버튼이든 고스트 버튼과 같은 현대적인 버튼이든, 사용자가 원하는 행동을 취하도록 유도하는 목적을 가지고 있습니다. 버튼 UX 디자인은 항상 인식과 명확성을 중심으로 합니다. 원활한 전환은 대화를 부드럽게 이어가게 하며, 버튼을 찾지 못하는 문제는 최선의 경우 방해가 되고, 최악의 경우 대화가 중단될 수 있습니다.