한 페이지를 열었는데 진한 빨간 버튼이 다섯 개 보인다고 가정해 봅시다. ‘문의하기’, ‘카탈로그 다운로드’, ‘뉴스레터 구독’, ‘바로가기’, ‘더 알아보기’가 모두 똑같은 색과 크기로 칠해져 있다면 사용자는 어디부터 눌러야 할지 갈피를 잡지 못합니다. 결국 가장 중요한 행동은 다른 버튼에 묻혀 클릭률을 잃습니다.
좋은 웹사이트는 버튼에 분명한 위계(Hierarchy)를 줍니다. 어떤 행동이 가장 중요한지 시각적으로 알려주고, 어떤 행동은 보조적인지 자연스럽게 안내하는 것이죠. 이 글에서는 Primary, Secondary, Tertiary 세 단계의 버튼을 어떻게 설계해야 매출로 이어지는지 정리했습니다.
Primary 버튼 — 페이지당 단 하나의 진짜 주인공
Primary 버튼은 그 페이지에서 사용자가 해 주기를 가장 바라는 단 하나의 행동입니다. 상품 상세 페이지에서는 ‘장바구니 담기’, 회원가입 페이지에서는 ‘가입 완료’, 견적 페이지에서는 ‘견적 요청하기’가 그 자리를 차지합니다.
핵심 원칙은 단순합니다.
- 색은 브랜드의 메인 컬러 또는 가장 채도가 높은 컬러를 쓴다
- 주변 요소보다 충분히 큰 면적과 두께를 갖는다
- 한 화면(또는 한 섹션) 안에 가능한 한 단 하나만 둔다
특히 마지막 원칙이 잘 지켜지지 않습니다. 헤더 우상단의 ‘문의하기’와 본문의 ‘구매하기’가 같은 색이라면 헤더 버튼이 본문의 매출을 가져가 버립니다. 한 페이지의 진짜 목표가 무엇인지 다시 묻는 작업이 디자인보다 먼저 와야 하는 이유입니다.
Secondary 버튼 — ‘나중에 해도 좋다’는 메시지를 담는 그릇
Secondary는 Primary를 보완하는 옵션입니다. ‘장바구니 담기’ 옆의 ‘위시리스트에 담기’, 결제 페이지의 ‘주문 내역 보기’, 신청 폼의 ‘저장만 하고 나가기’가 여기에 해당합니다.
스타일은 보통 아웃라인(테두리만 있는 형태)이나 회색 배경의 솔리드 버튼으로 표현합니다. 버튼이라는 행동 가능성은 분명히 보여주되, ‘이것도 가능하지만 굳이 지금 누르지 않아도 된다’는 신호를 함께 주는 것이 핵심입니다. Primary와 Secondary는 색뿐 아니라 대비 자체에 차이가 있어야 합니다.
Tertiary 버튼 — 텍스트 링크에 가까운 보조 액션
Tertiary는 강조가 거의 없는 단계입니다. 배경 없이 텍스트 색상만으로 표현하거나 호버할 때만 밑줄이 보이는 형태입니다. ‘취소’, ‘뒤로 가기’, ‘더 알아보기’ 같은 보조 동선이 여기에 들어갑니다.
주의할 점은 Tertiary가 모달이나 폼에서 ‘취소’ 같은 부정 액션으로 자주 쓰인다는 것입니다. Primary와 시각적으로 충분히 차이를 두지 않으면, 사용자가 실수로 ‘취소’를 눌러 작성하던 내용을 모두 잃는 사고가 일어납니다. 결제 직전 모달의 ‘취소’ 버튼이 ‘결제하기’와 비슷한 무게감이라면 그 화면은 매출 누수 지점이 됩니다.
위계가 무너지는 흔한 실수
- 한 페이지에 Primary 버튼이 두 개 이상 — 가장 흔한 실수입니다. 어떤 행동이 가장 중요한지 디자이너 본인도 결정하지 않은 채 두 가지를 모두 강조해 버린 결과입니다.
- ‘위험’ 액션과 Primary가 같은 색 — 빨간색을 메인 컬러로 쓰는 브랜드라면 ‘삭제’, ‘탈퇴’ 같은 파괴적 액션을 다른 색으로 분리해야 합니다.
- 비활성 버튼이 활성 버튼보다 눈에 띄는 경우 — disabled 상태의 색이 너무 진하면 위계가 거꾸로 보입니다. ‘다음 단계로 갈 수 없는 이유’를 안내하는 마이크로카피가 함께 필요합니다.
- 로딩 중에도 같은 위계가 유지되지 않는 경우 — 클릭 직후 버튼이 사라지거나 색이 옅어져서 사용자가 다시 누르게 되는 패턴은 중복 결제, 중복 신청의 원인입니다.
작은 사이트일수록 위계가 매출을 만든다
대형 쇼핑몰처럼 트래픽이 많은 사이트는 A/B 테스트로 버튼을 끊임없이 다듬을 여유가 있습니다. 하지만 한 달 방문자가 수천 명 단위인 중소 사이트는 한 번의 디자인 결정이 그대로 1년의 전환율을 만듭니다. 그래서 작은 사이트일수록 처음 디자인할 때 버튼 위계를 단단히 잡아둬야 합니다.
CYAN 에이전시는 단순히 ‘예쁜 사이트’가 아니라 고객이 다음에 무엇을 해야 할지 분명히 보이는 사이트를 만듭니다. 사이트의 매출이 정체된 것 같다면, 거창한 리뉴얼 전에 모든 페이지의 Primary 버튼이 단 하나로 정리되어 있는지부터 점검해 보시기를 권합니다.