Nick Babich의 글 Ghost Buttons in UXDesign 소개하고자 합니다.
고스트 버튼은 투명하고 비어 있는 버튼으로, 주로 직사각형이나 정사각형과 같은 기본적인 형태를 가지고 있습니다. 이러한 버튼은 "빈 버튼", 또는 "벌거벗은 버튼" 등 여러 가지 이름으로 불리기도 합니다.
고스트 버튼은 일반적으로 매우 얇은 선으로 테두리가 둘러져 있으며, 내부는 간단한 텍스트로 구성되어 있습니다. 이 버튼은 주로 행동 유도(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의 사용자 인터페이스에서 고스트 버튼 형태의 버튼이 많이 사용된다는 사실은 이 디자인이 얼마나 널리 퍼졌는지를 보여주는 사례입니다.
‘Name’, ‘Release Data’, 그리고 ‘Featured’는 고스트 스타일의 유사 버튼입니다. 반면, ‘Get’은 고스트 버튼이라고 할 수 있습니다.
7) 고스트가 무섭지 않다!
이제 고스트 버튼이 디자인과 사용자 경험에 미칠 수 있는 긍정적인 측면을 살펴보겠습니다.
(1) 고스트 버튼의 매력과 디자인 간편성 초보 디자이너도 쉽게 만들 수 있는 고스트 버튼은 시각적 장식이나 애니메이션 요소가 없는 전통적인 기하학적 형태(평평한 직사각형 또는 타원형 박스)로 구성되어 있습니다. 이러한 특성 덕분에 고스트 버튼은 매력적이면서도 접근하기 쉬운 디자인으로 많은 사랑을 받고 있습니다.
(2) 고스트 버튼의 주목성: 배경과 테두리의 조화 적절하게 선택된 배경과 잘 정의된 대조적인 테두리를 갖춘 고스트 버튼은 사용자에게 압도적인 인상을 주지 않으면서도 주목을 끌 수 있는 요소입니다. 이러한 배경과 테두리 덕분에 버튼은 눈에 잘 띄지만, 지나치게 화려하지 않아 사용자에게 부담을 주지 않습니다. 이처럼 조화롭게 어우러진 디자인 요소들이 버튼을 효과적으로 만들어 줍니다.
(3) 고스트 버튼의 장점: 깔끔한 UI 디자인을 위한 필수 요소 고스트 버튼은 디자이너가 UI를 깔끔하게 유지하는 데 매우 유용합니다. 이 버튼은 공간을 효율적으로 활용할 수 있으며, 배경 이미지가 완전히 드러나기 때문에 시각적인 방해 요소를 최소화합니다. 또한, 버튼의 간단한 형태 덕분에 페이지의 주요 디자인이 더욱 돋보이게 되어 사용자가 쉽게 집중할 수 있도록 도와줍니다.
(4) 고스트 버튼의 유연성: 다양한 디자인과의 조화 고스트 버튼은 디자인의 환경에 자연스럽게 녹아들어 거의 모든 디자인과 잘 어울립니다. 고스트 버튼이 다양한 디자인에 적합한 이유는 간결하고 투명한 형태가 배경과 조화를 이루어 시각적으로 방해되지 않기 때문입니다. 또한, 다양한 색상과 스타일의 디자인에 쉽게 통합될 수 있는 특성을 가지고 있어, 여러 환경에서 유연하게 활용될 수 있습니다.
고스트 버튼은 페이지에 단독으로 나타나기도 하고, 그룹으로 결합되기도 합니다. 이는 사용자가 쉽게 눈에 띄게 하기 위해 페이지의 중요한 위치에 고스트 버튼을 활용하는 것입니다. 고스트 버튼이 단독으로 또는 그룹으로 배치될 수 있는 이유는 디자인의 유연성을 제공하기 때문입니다. 주요 위치에 고스트 버튼을 배치함으로써 사용자의 시선을 끌고 클릭을 유도하는 전략을 취할 수 있습니다.
8) 고스트 버튼 디자인 시 고려해야 할 사항
고스트 버튼은 많은 디자인 장점을 가지고 있지만, 고려해야 할 점도 있습니다. 앱이나 사이트를 디자인하기 전에 장단점을 모두 따져보고 이 개념이 프로젝트에 적합한지 판단하는 것이 중요합니다,
(1) 고스트 버튼을 CTA 버튼으로 사용하기
대부분의 경우, 고스트 버튼을 주요 CTA로 사용하는 것은 바람직하지 않습니다. 이는 시각적으로 다른 요소와 혼동될 수 있기 때문입니다. 예를 들어, 다음 사례처럼 "Download Bootstrap" 버튼이 주요 로고와 거의 동일하게 보인다면, 사용자는 버튼을 클릭해야 하는지에 대해 혼란을 느낄 수 있습니다. 이러한 혼동은 클릭률을 낮추고 사용자 경험을 저해할 수 있습니다. 따라서 고스트 버튼은 보조적인 역할로 활용하고, 주요 CTA는 명확하게 구분된 디자인을 사용하는 것이 좋습니다.
Image credit: Bootstrap
고스트 버튼을 보조적이거나 3차적인 콘텐츠에 사용하는 것이 더 좋은 이유는 주요 CTA와의 혼동을 방지하고 사용자 경험을 최적화하기 위함입니다. 주요 CTA는 사용자가 가장 먼저 주목해야 할 행동을 유도하는 버튼이므로, 이를 명확하게 강조하는 것이 중요합니다. 고스트 버튼이 보조 역할을 할 경우, 사용자는 주요 CTA에 집중할 수 있으며, 필요에 따라 보조 버튼으로 쉽게 이동할 수 있습니다. 이렇게 함으로써 클릭률을 높이고, 사용자에게 더 나은 경험을 제공할 수 있습니다.
Specular 사이트는 좋은 예시입니다. 이 사이트는 'Purchase Now'라는 CTA 버튼을 사용하고, 'Take Tour'라는 고스트 버튼을 보조 버튼으로 활용하고 있습니다
Image credit: Specular
즉, 고스트 버튼을 주요 CTA로 사용하는 것이 일반적인 원칙에 반하는 이유는, 이러한 버튼이 시각적으로 약해 주목도를 떨어뜨릴 수 있기 때문입니다. 주요 CTA는 사용자에게 가장 중요한 행동을 유도해야 하며, 이를 명확하고 눈에 띄게 디자인하는 것이 중요합니다. 고스트 버튼은 보조적인 역할을 할 때, 사용자가 필요에 따라 선택할 수 있는 옵션으로 기능하며, 주요 CTA와의 혼동을 피할 수 있습니다. 이렇게 함으로써 사용자가 원하는 행동을 더 쉽게 인식하고 실행할 수 있도록 도와줍니다.
(2) 예측 가능한 상호작용 디자인하기
고스트 버튼이 적절하게 배치되지 않으면 입력 필드처럼 보일 수 있습니다. 이는 두 요소가 비슷한 디자인 특성을 가지고 있기 때문입니다. 고스트 버튼은 일반적으로 테두리만 있고 배경이 투명하여 시각적으로 약한 인상을 주며, 입력 필드도 테두리만 있는 경우가 많습니다. 이로 인해 사용자는 버튼과 입력 필드를 혼동할 수 있습니다. 특히 고스트 버튼이 페이지의 다른 요소와 유사한 색상이나 스타일로 디자인되면 더욱 혼란을 초래할 수 있습니다. 따라서 버튼의 위치와 디자인을 신중하게 고려하여 사용자가 명확하게 인식할 수 있도록 하는 것이 중요합니다
예를 들어, 아래 페이지에서 ‘Get Access’ 버튼을 찾아볼 수 있나요? 이는 숙련된 사용자에게도 간단한 작업이 아닙니다.
Image credit: Visage
고스트 버튼은 때때로 진짜 유령처럼 되어 전체 레이아웃과 섞일 수 있습니다. 고스트 버튼이 이렇게 보이는 이유는 주로 디자인 요소와 색상 때문입니다. 일반적으로 고스트 버튼은 테두리만 있고 배경이 투명하여 시각적으로 약한 인상을 주기 때문에, 주변 요소와 색상이나 스타일이 비슷할 경우 쉽게 눈에 띄지 않습니다. 이로 인해 사용자는 버튼의 존재조차 인식하지 못할 수 있습니다. 따라서 고스트 버튼을 사용할 때는 배경과의 대비를 고려하여 디자인하고, 버튼의 위치와 크기도 신중하게 설정하여 사용자가 명확하게 인식할 수 있도록 해야 합니다.
(3) 고스트 버튼에서의 시각적 피드백의 중요성
사용자에게 버튼 위에 마우스를 올렸을 때 좋은 시각적 피드백(호버 효과)을 제공하는 것은 매우 중요한 UI 관행입니다. 특히 고스트 버튼의 경우, 이 순간은 더욱더 중요합니다. 그 이유는 사용자가 이것이 버튼인지 아닌지 혼란스러울 수 있기 때문입니다.
고스트 버튼은 시각적으로 약한 인상을 주며, 테두리만 있고 배경이 투명하여 다른 요소와 잘 어우러집니다. 이로 인해 사용자는 버튼의 존재를 쉽게 인식하지 못할 수 있습니다. 따라서 마우스를 올렸을 때 제공되는 시각적 피드백은 버튼임을 명확히 인식하게 도와주며, 사용자가 클릭할 의도를 갖도록 하는 데 중요한 역할을 합니다. 이런 피드백이 없으면 사용자는 버튼을 놓치거나 클릭하지 않을 가능성이 높아질 수 있습니다.
Source: CSS Buttons
(4) 고스트 버튼의 가독성 문제와 사용자 인식
고스트 버튼은 배경에 너무 묻혀서 사용자에게 불편을 줄 수 있습니다. 그 투명성 때문에 텍스트 가독성 문제를 일으킬 수 있으며, 이미지 위에 텍스트를 고스트 형태로 배치할 때 시각적 대비가 부족한 경우가 많습니다.
고스트 버튼이 배경에 묻히는 이유는 그 특성상 배경이 투명하게 설정되어 있어 시각적으로 약한 인상을 주기 때문입니다. 따라서 배경 이미지와 버튼의 색상이 유사할 경우, 사용자는 버튼을 쉽게 인식하지 못할 수 있습니다.
또한, 고스트 버튼 위에 텍스트를 배치할 때, 배경 이미지와의 대비가 부족하면 텍스트가 흐릿하게 보이거나 읽기 어려워질 수 있습니다. 이로 인해 사용자는 버튼의 기능을 이해하지 못하거나 클릭하지 않을 가능성이 높아집니다. 결국, 고스트 버튼은 시각적 명확성이 떨어져 사용자 경험을 저해할 수 있는 요소가 됩니다.
아래 사례를 보면, 이 사이트는 풀 스크린 사진을 배경으로 사용하고 있습니다. 중간에 보이는 버튼이 유저가 회사에 대한 더 많은 정보를 발견하도록 클릭하게 유도하는 행동 유도 버튼입니다. 하지만 버튼에 쓰인 색이 흰색이어서 ‘imagemaking’이란 단어는 사진 속 여성이 입고 있는 밝은 색 드레스와 대비가 되지 않고 있습니다. 그 결과, 가독성에 큰 영향을 미치게 되었습니다.
Image credit: bilderphoto
결론
모든 버튼, 전통적인 버튼이든 고스트 버튼과 같은 현대적인 버튼이든, 사용자가 원하는 행동을 취하도록 유도하는 목적을 가지고 있습니다. 버튼 UX 디자인은 항상 인식과 명확성을 중심으로 합니다. 원활한 전환은 대화를 부드럽게 이어가게 하며, 버튼을 찾지 못하는 문제는 최선의 경우 방해가 되고, 최악의 경우 대화가 중단될 수 있습니다.
UX 실무에 필요한 모든 UX 원칙을 담았어요! UX 디자인 원칙까지 실무에서 바로 활용할 수 있도록 ✏️
PM이라면 반드시 알아야 하는 UX 원칙 가이드라인 원칙
본 강의는UI, 인터랙션에서 UX 디자인 원칙까지 실무에서 바로 활용할 수 있는 내용들을 정리한 강의입니다. UX 실무에 필요한 모든 UX 원칙을 담았습니다!
UX 원칙 가이드 다양한 실무 Case Study 외 관련 이론에 대한 UX 원칙 가이드 개념을 명확히 정립하는 시간을 갖게 됩니다.
이런걸 배워요
UX 디자인 원칙 가이드 정립
컴포넌트 UX 원칙
UX 문제 정의 / UX 분석 노하우
자사 제품 분석 / 경쟁사 제품 분석 노하우
[챌린지] UX 디자인 가이드라인 수강 신청 시 주의 사항
플립드 러닝(Flipped Learning) 수업 방식으로 인해, 선착순 10명입니다. (수업 관련 외 Case Study 강의 및 Q&A 집중!!!! 소수 정예 수업!!!)
[챌린지] UX 디자인 가이드라인 프로그램 소개
폼 입력 행위 작업 줄이기, Context 내비게이션, 행동유도버튼의 어포던스, 간결성, 주목성, 인식성 등 필수!!!! 깊게 강의할 예정입니다.
총 4회, 총 12시간, 줌 Live 강의 형태로 진행합니다 🔥 (1주차 Live 수업: 3시간) (2주차 Live 수업: 3시간) (3주차 Live 수업: 3시간) (4주차 Live 수업: 3시간) 매회 Live 수업은, [VOD 커리큘럼 관련] 수업 관련 외 Case Study 및 Q&A 중심으로 수업이 진행됩니다.
개인 사정으로 인해 Live 수업 미참석를 위해 강의 종료 후 24시간 이내 녹화본 제공합니다.
수업 당일 라이브클래스에 강의 자료 PDF 제공합니다.
수강 정원: 선착순 10명입니다.
수강료 : 98,000원
VOD & Live 수업 녹화본(다시보기) 영상 시청 기간은, 수강 신청 이후 365일 입니다
[챌린지 혜택 !!!!]
챌린지 도전에 성공한 수강생 모두에게, 다른 챌린지 UX 과정 50% 할인 쿠폰 드립니다. (예. 98,000원 > 챌린지 도전 성공한 수강생에게 드리는 할인 쿠폰 50% 적용 시 > 49,000원)
[챌린지 성공 시, 50% 할인 쿠폰 적용, 또 다른 챌린지 UX 수강 과정은 다음과 같습니다] 챌린지 1. 휴리스틱 평가 (10월 오픈 예정) 챌린지 2. 사용성 테스트 (10월 오픈 예정) 챌린지 3. UX 리서치 (11월 오픈 예정) 챌린지 4. UX 인지심리학 A-Z (11월 오픈 예정) 챌린지 5. UX 디자인 설계 A-Z (11월 오픈 예정) 챌린지 6. UX 디자인 첫걸음 (11월 오픈 예정)
[챌린지 > 성공 기준]
아래 3가지 조건, 모두 충족되어야 합니다
1. VOD(총 209개) 80% 이상 수강
2. Live 수업 총 4회 중 3회 이상 출석 (사정상 Live 수업 참석 못하는 경우, Live 녹화본 다시보기 완료시 출석 인정)
3. 총 4회 Live 수업 중 1회 이상 질문하신 분 (VOD 강의 내용 중 궁금한 것 미리 체크한 후 !!!! Live 수업할 때 강사님께 질문 하면 됩니다 ㅎㅎ)
[챌린지] UX 디자인 가이드라인 과정은 플립드 러닝(Flipped Learning) 수업 방식으로 진행됩니다.
플립드 러닝(Flipped Learning) 수업이란? 플립드 러닝은 전통적인 수업 방식과 반대로, 수강생들이 수업 전에 비디오나 자료를 통해 기본 개념을 사전에 학습하고, 수업 시간에는 그 내용을 바탕으로 심화 학습, 토론, 문제 해결 등을 진행하는 방식입니다. 이 접근법은 수강생들이 능동적으로 참여하고, 개인의 학습 속도에 맞춰 공부할 수 있도록 돕습니다.
플립드 러닝(Flipped Learning) 수업 방식을 적용했을 때 수강생이 얻는 기대효과
1) 기본 이해도 향상 VOD 영상을 통해 수업의 기본 개념이나 내용을 미리 학습함으로써, 수강생은 Live 수업에서 다루어질 내용을 더 잘 이해할 수 있습니다. 이는 수업에 대한 자신감을 높입니다.
2) 질문 준비 VOD를 시청한 후, 수강생은 궁금한 점이나 이해가 안 되는 부분을 정리할 수 있습니다. 이를 통해 Live 수업에서 더 효과적으로 질문하고, 강사와의 상호작용을 극대화할 수 있습니다.
3) 시간 활용의 효율성 VOD 영상을 통해 수업의 기본 내용을 미리 습득하면, Live 수업에서는 더 심화된 내용이나 사례 중심의 활동에 집중할 수 있습니다. 이는 수업 시간을 더 효율적으로 활용하는 데 도움이 됩니다.
4) 개별 학습 속도 조절 수강생은 자신의 속도에 맞춰 VOD를 시청할 수 있으므로, 개념을 천천히 이해하고 반복해서 학습할 수 있습니다. 이는 각자의 학습 스타일에 맞춰 학습 효과를 극대화할 수 있게 합니다.
5) 집중력 향상 미리 VOD를 시청한 수강생은 Live 수업에서 이미 알고 있는 내용을 반복적으로 듣지 않게 되어, 더 집중할 수 있습니다. 새로운 정보나 심화된 내용을 듣는 데 더 많은 에너지를 쏟을 수 있습니다.
6) 상호작용의 질 향상 미리 학습한 수강생들은 Live 수업 중 보다 적극적으로 참여할 가능성이 높습니다. 이는 강사와의 상호작용을 더욱 풍부하게 만들어, 전체적인 수업의 질을 높이는 데 효과적입니다.
이제부터 [UX 원칙 가이드 1기] 플립드 러닝(Flipped Learning) 세부 커리큘럼에 대해 알아볼까요?
댓글
의견을 남겨주세요