What's New in Action Button

모든 디자인 시스템에서 버튼은 서비스의 인상을 좌우하는 가장 대표적인 컴포넌트에요.

버튼은 사용자의 클릭 하나로 서비스의 핵심 기능을 연결하며, 사용자의 행동을 이끌어내는 주요 경험이기도 하죠. 특히 당근에서는 버튼에 브랜드 컬러를 적극적으로 활용했기 때문에, 개편에는 큰 용기와 철저한 검증이 필요했어요.

기존 디자인 시스템을 SEED로 개편하는 과정에서, 디자인코어팀은 기존 Box Button의 문제점을 면밀히 살펴보기 시작했어요. 모든 버튼이 중요해 보이는 혼란, 브랜드 컬러의 시각적 피로도, 그리고 접근성 부족까지. 문제는 명확했지만 해결책은 단순하지 않았어요.

브랜드 아이덴티티는 유지하면서도 사용자 경험은 더 명확하게. 디자인코어팀은 어떤 고민과 과정을 거쳐 새로운 버튼을 탄생시켰을까요?

Problem

저대비, 고명도

문제점들을 검토하기에 앞서, SEED로 개편하면서 우리에게 가장 중요한 가치는 접근성이었어요.

그런데 Primary-low 버튼은 그 가치에 비해 너무 부족한 상황이었어요. Contrast Ratio가 2.8:1로, WCAG 접근성 기준을 크게 충족하지 못했고, 이는 저시력자나 중장년층이 버튼을 인식하고 사용하는 데 어려움이 있다는 의미죠.

• 저대비, 고명도의 문제는 단순히 시각적 불편함을 넘어서, 인터페이스의 접근성을 저하시켜요. 사용자는 버튼을 인식하는 데 시간이 더 걸리고, 선택의 순간에서 불편을 겪을 수 있어요.
• 버튼의 텍스트가 흐릿하게 보이다 보니, 중요한 액션을 유도하기엔 적절하지 않았어요. 또한 대비가 부족하면, 시인성이 떨어지고 흐릿한 인상을 주게 돼요.

디자인의 핵심은 단순히 아름다운 것을 넘어서, 사용자가 쉽게 인식하고 정확하게 액션을 취할 수 있도록 돕는 것이었기에, 이 문제는 반드시 해결해야 했어요.

참고 : Contrast Ratio (WCAG, APCA)

그래서, 어떤 버튼이 제일 중요해요?

버튼은 사용자에게 서비스의 주요 액션을 안내하고 선택을 유도하는 중요한 역할을 해요.

그런데 기존에는 모든 버튼이 동일한 중요도를 가진 것처럼 설정되어, 사용자에게 명확한 우선순위와 선택지를 제공하지 못하는 문제가 있었어요. 특히 Primary 버튼이 무분별하게 사용되면서, 액션 간의 위계가 모호해졌고, 결과적으로 사용자 경험이 혼란스러워질 수밖에 없었죠.

• 높은 명도와 채도의 브랜드 컬러는 시각적 피로를 유발하고, 인터페이스에서 안정감을 주기에 적합한 컬러는 아니에요. 특히 안드로이드 기기에서 채도가 더 높게 출력되기 때문에, 장시간 사용 시 피로도가 높아요.
• 브랜드 아이덴티티를 강조해야 하는 서비스의 핵심 기능에서 효과적으로 임팩트를 내기 어려웠어요.

Solid, Solid, Solid!

모든 버튼이 Solid 타입으로만 제공되다 보니, 화면 전체가 면으로 채워진 느낌이었어요. 버튼이 돋보이기보단, 오히려 무게감과 혼란을 더해 사용자 경험을 방해할 수 있었죠.

• 동일한 스타일의 버튼이 반복되면서, 화면의 시각적 밀도가 높아졌어요. 중요한 액션과 덜 중요한 액션 사이의 위계도 모호해졌고, 사용자가 가장 중요한 클릭 지점을 한눈에 파악하기 어려웠어요.
• Callout이나 카드 타입의 정보와 버튼이 함께 쓰이면, 회색 톤의 면 스타일이 겹쳐져 클릭 가능한 액션과 단순 정보성 디자인 요소의 구분이 어려워졌어요.
• 이는 단순히 버튼 스타일의 문제를 넘어, 디자인 시스템에서 제공하는 컴포넌트 스타일의 다양성 부족이라는 더 큰 문제를 드러내기도 했어요. 사용자에게 단조롭고 답답한 인상을 주는 동시에, 인터페이스의 직관성을 저해했어요.

우리는 기존 Box Button에서 발견된 문제점들을 해결해야 했고, 다양한 테스트와 검증이 필요했어요. 모두가 납득할 수 있는 솔루션을 제공하기까지, 어떤 과정들을 거쳤을까요?

Review Process

Primary-low가 사라진다면

Primary-low를 삭제하기로 하면서, 이를 대신할 새로운 스타일이 필요했어요. 버튼의 위계를 적절히 표현하면서도 사용성에 문제가 없도록 해야 했죠. 처음엔 기존에 있던 Solid 타입 안에서 해결책을 찾으려 했어요.

Brand-weak(구 Primary-low)는 Neutral-weak과 Brand-Solid 사이의 중간 역할을 해왔기 때문에, 비슷한 위계를 채울 방법이 꼭 필요했어요.

하지만 Solid 타입만으로는 해결이 어렵겠다고 판단해 다른 접근법으로 방향을 바꾸기로 했어요.

스타일의 다양성도 늘리고, 버튼의 위계를 좀 더 뚜렷하게 표현할 수 있는 Outline 스타일을 검토해보기로 했고, 시안을 만들어 테스트를 시작했어요.

Outline 타입을 도입한다면

Outline 스타일을 도입한다고 가정했을 때, 다른 배리언츠들과 잘 어우러지면서도 제품 화면에 안정적으로 녹아들 수 있는 형태를 찾아야 했어요. Neutral-outline을 기본 형태로 설정한 뒤, 그보다 더 높은 위계를 표현할 수 있는 스타일을 찾기 시작했어요.

이 스타일은 위계를 명확하게 보여주고 선명한 시각적 구분이 가능했어요. 하지만 위계 표현보다는 Selected State처럼 보일 수 있다는 점이 문제였어요. 이는 디자이너와 유저 모두에게 혼란을 줄 수 있었어요.

이 시안은 브랜드 컬러의 아웃라인이 지나치게 강해서 화면의 복잡도를 높였어요. 조형적인 관점에서 보면, 개편 방향성과 어긋난다는 결론을 내렸어요.

Primary-low 스타일을 어느 정도 계승한 스타일이에요. 하지만 Brand 컬러를 사용할 경우 기존의 접근성 문제를 해결하지 못했어요. Navy 컬러는 시각적으로 안정적이었지만, 다른 컴포넌트들과 조화를 이루지 못했고 새로운 컬러 도입을 설득할 근거도 부족했어요.

이러한 테스트 과정을 통해 몇 가지 중요한 인사이트를 얻을 수 있었어요.

• Stroke는 너무 진하지 않게 사용해야 해요. 텍스트를 감싸는 Container 역할을 하기엔 복잡도가 높아져요.
• Variant가 아닌 Selected State처럼 보일 수 있는 형태는 지양해요.
• Outline 타입에 BG는 사용하지 않아요. Solid와 Outline 간의 위계도 모호해지며, 특히 Brand 컬러를 BG로 사용하면 접근성 문제가 해결되지 않아요.

이런 검증 과정을 거치며, SEED에서는 완전히 새로운 해결책을 제안하게 되었어요.

Solution

Neutral-Solid를 도입해요

브랜드 컬러를 대체하면서 상호보완할 수 있는 Slate-gray 계열의 Neutral 컬러를 도입해, 브랜드 컬러 사용의 시각적 피로를 줄이고 콘텐츠에 집중할 수 있게 되었어요.

확인과 같은 단순 액션을 표현하는 경우, 브랜드 컬러 대신 Neutral 컬러를 사용해 중립적인 의미에 적합하게 활용할 수 있어요.

다만, 우리 서비스의 브랜드 아이덴티티를 잃지 않도록 홈 피드, 채팅하기와 같이 유저와의 연결이 이루어지는 공간에서는 브랜드 컬러를 사용해요.

왜 Slate 컬러인가요?

• 주황색과 남색은 상호 보완적인 보색 관계로, 주황색을 브랜드 컬러로 유지하면서 남색을 secondary로 추가하면 안정적이고 균형 잡힌 시각적 효과를 줄 수 있어요. 또한, Slate-gray는 신뢰와 안정성을 상징하며, 주황색과 조합했을 때 안정적이고 조화로운 느낌을 제공해요.
• 기존에는 브랜드 컬러 이외에 UI 요소를 강조할 수 있는 secondary 색이 없어, 화면이 전반적으로 주황색만 강조되는 경향이 있어요. 이를 보조하는 secondary를 도입함으로써, 유저에게 전달해야 할 다양한 액션들의 위계를 효율적으로 구분할 수 있게 돼요.

당근스러움은 잃지 않아요

"너무 당근스러운 느낌이 사라지지 않나요?"

Neutral 컬러를 도입하면서 가장 많이 들었던 질문이었어요. 약 9년 가까이 유지되었던 버튼 디자인이었기 때문에, 내부 구성원들에게조차 파격적인 변화였어요. 그래서 우리는 다음과 같은 약속을 만들었어요.

유저 간의 주요 연결이 이루어지는 서비스의 핵심 기능에는 브랜드 컬러를 유지해요. 이는 브랜드 아이덴티티를 유지하면서도, 사용자가 중요한 액션을 쉽게 인지할 수 있도록 도와요.

• 홈 피드의 글쓰기 FAB 버튼은 서비스의 중심에서 유저 간 연결에 있어 가장 중요한 기능 중 하나예요. 브랜드 컬러를 사용해 아이덴티티와 주목도를 유지할 수 있어요.
• 서비스 상세 페이지의 채팅하기 CTA는 유저 간의 상호작용을 연결하는 핵심 기능으로, 브랜드 컬러를 사용해 중요한 액션임을 강조하고, 임팩트를 극대화하는 효과를 가져와요.

이렇게, 브랜드 컬러는 서비스의 핵심 기능에만 제한적으로 적용하여, 그 가치와 역할을 명확히 드러내도록 해요.

이런 실험도 해봤어요

CTA 컬러를 바꾼다고 해서 UX에 큰 변화가 일어나지는 않겠지만, 시각적으로는 상당한 변화라고 생각했어요.

그래서 중고거래실의 도움을 받아, 게시글 상세 페이지의 주요 액션인 채팅하기 버튼을 대상으로 제품 지표에 영향을 주진 않을지 실험을 진행했어요.

실험 결과는 어땠을까요?

인당 버튼 클릭 : iOS에서 2.5% 상승, Android에서 5.9% 상승 인당 채팅 전환 : 변화 없음 서비스 지표에 부정적 영향 없음

결과적으로, 버튼 색상 변경은 서비스 전환 지표에 큰 영향을 주지 않았어요.

이 실험을 통해 CTA 디자인 변경이 지표에 리스크를 주지 않는다는 점을 확인했고, 안전하게 적용할 수 있다는 가능성을 검증할 수 있었어요.

이제 Outline 스타일도 사용할 수 있어요

그동안 Solid 타입만 제공되어 반복 사용으로 UI가 무겁게 느껴지는 문제가 있었어요. Outline 타입을 추가하면서 이런 문제를 해결하고, UI 표현의 다양성과 확장성도 한층 높아졌어요.

추가로, Neutral-outline과 Brand-outline 스타일을 제공해, 한 화면에 액션이 많을 때 위계 구분을 명확히 할 수 있도록 해요.

더 아름다워진, 더 나아진

SEED에서는 버튼의 디테일을 한층 개선해 더욱 세련되고 조화로운 디자인을 제공해요. 전체적인 인상을 더욱 부드럽고 정돈되게 다듬었어요. 사용자의 경험을 고려한 작은 변화들이 모여 큰 차이를 만들어내기를 기대하고 있어요.

좁은 공간에서 여백 활용하기

버튼 사이즈와 위계에 따라 버튼의 볼륨감을 다르게 제공하는 것이 중요해요.

Pill 타입은 좁은 영역에서도 여백을 여유롭게 확보해, 복잡한 레이아웃에서도 시각적인 안정감을 만들어줘요. 이제 버튼의 크기뿐만 아니라 형태로도 더 세심하게 사용자의 경험을 고려할 수 있게 되었어요.

더 부드러워진 인상

SEED에서는 전반적으로 이전보다 부드럽고 친근한 인상으로 형태가 개선되었어요.

기존의 다소 각졌던 형태는 깔끔하지만 다소 딱딱하고 경직된 느낌을 줄 수 있었기 때문에, 이번 개편에서는 사용자 경험에 안정감과 따뜻함을 더할 수 있는 둥근 형태를 적용했어요.

이 변화는 단순한 시각적 개선에 그치지 않고, 브랜드의 친근하고 유연한 정체성을 시각적으로 강화하는 역할을 해요. 둥근 R 값은 버튼뿐만 아니라 전체 UI의 조화와 통일성에도 기여하면서, 사용자에게 더 자연스러운 사용 경험을 제공하게 되었어요.

명확한 대비, 더 나은 경험

SEED 버튼 디자인에서는 WCAG 접근성 기준을 철저히 준수하며, 사용자 경험의 기본인 가독성과 사용성을 크게 개선했어요. 기존 디자인 시스템에서 2.8:1에 불과했던 대비 비율을 높여, 이제 4.5:1 이상으로 접근성 점수를 충족하는 버튼을 제공하게 되었어요.

이 변화는 저시력자나 중장년층뿐만 아니라, 일반 사용자에게도 더 명확하고 직관적인 인터페이스를 제공해요.

특히 텍스트의 시인성이 강화되면서, 중요한 액션이 더욱 돋보이게 되었어요. 이전에는 텍스트가 배경색과 섞여 흐릿하게 보였던 문제가 있었다면, 이제는 대비가 뚜렷해져 한눈에 명확한 정보를 전달할 수 있게 됐죠. 이로 인해 접근성 점수가 전반적으로 개선되었고, 더 많은 사용자가 동등하게 서비스를 이용할 수 있는 기반을 마련했어요.

디자인 시스템은 단순히 멋진 화면을 만드는 것이 아니라, 누구에게나 공정한 경험을 제공하는 도구라는 점을 다시금 느낄 수 있었던 변화였어요.

모두를 위한 디자인

이번 SEED 업데이트는 디자이너와 개발자 간 협업을 원활히 하고, 버튼 사용의 혼란을 줄이기 위한 중요한 변화에요. 새로운 스타일과 가이드라인을 활용해 더 나은 사용자 경험을 제공해보세요!

더 좋아진 Action Button 보러가기

Action Button