Buttons
Components
Button은 스타일 및 쓰임새에 따라 Button, Action Button, Text Button, Icon Button 4가지로 분류합니다. Button은 가장 기본적인 Button으로 중요도와 쓰임새에 따라 세부 타입을 분절해 사용합니다. 이외 Action Button, Text Button, Icon Button은 아래 목차에 따른 쓰임새를 참고해 사용합니다.
- A
- B
- C
- D
Button
Button은 가장 기본적인 Button으로 중요도와 쓰임새에 따라 세부 속성을 변경해 사용합니다. 자세한 내용은 Variants와 Table of Figma Properties를 참고합니다.
Anatomy
Variants
CTA(Call to action)
CTA Buttons은 e커머스 특성상 계층 구조가 가장 높은 행동을 유도하는 주문, 결제, 수령 Button에 한정해 사용합니다. 대표적인 예시로 상품 상세 페이지 내 ‘구매하기’ Button과 주문서 페이지 내 ‘결제하기’ Button으로 사용됩니다.
Primary
주요 버튼(Primary Buttons)은 페이지 키 액션에 사용하는 Button으로 한 페이지에 한 번만 사용합니다. 대표적인 예시로 로그인 페이지 내 ‘로그인’ Button과 주문서 페이지 내 ‘주문 완료’ Button으로 사용됩니다.
Secondary
보조 버튼(Secondary Button)은 Primary Buttons의 보조로 사용합니다. 대표적인 예시로 로그인 페이지 내 ‘회원가입 Button’과 주문서 페이지 내 ‘취소하기 Button’에서 사용됩니다.
Size
사이즈는 높이 기준으로 Xlarge, Large, Medium, Small을 사용합니다. 사이즈에 따라 폰트 크기, 아이콘 사이즈, 레디어스, 패딩은 상이합니다. 이외 최소 높이 28 미만(Tiny)은 최소 터치 영역 확보 이슈로 사용을 지양합니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Type | CTA, Primary, Secondary | Primary |
| Size | Xlarge, Large, Medium, Small, Tiny | Xlarge |
| State | Default, Active, Disabled | Default |
| Icon | False, True | False |
Usage Guidelines
Do : Full width button 좌우 마진 16 사용
풀사이즈 Button은 Safe Area와 홈 인디케이터를 고려해 좌우 마진값을 16으로 고정해 사용합니다.
Don’t : Full width button 좌우 마진 생략
풀사이즈 Button을 사용할 경우 Button 좌우 마진값을 사용하지 않는 경우를 제한합니다.
Do : 버튼 키패드 결합 시 Full width button 사용
동선을 고려하여 키패드와 Button을 결합 시 좌우 마진값 0으로 풀사이즈 Button을 사용합니다.
Do : 아이콘 필수적인 경우 한정, 위치는 좌측
Button 내 아이콘 위치는 레이블 기준 좌측에 고정입니다. 아이콘의 색상은 텍스트와 동일한 색상으로 사용을 권장합니다.
Don’t : 아이콘 꾸밈 요소로 사용, 위치는 좌측 외 지양
아이콘 위치는 레이블 기준 우측 케이스는 사용 지양합니다. 이외 아이콘 사용은 필수적인 경우를 제외하고는 지양합니다.
Do : Button에 뱃지(Badge)를 결합
Button 활성화에 관한 명확한 시각적 차이가 필요하면, 뱃지를 결합하여 사용합니다. 뱃지 위치는 레이블 기준 우측에 고정되며, Button의 상태는 Active를 사용합니다.
Don't : Button에 뱃지 외 요소 결합
Button은 명확한 사용자 테스크 안내를 위해 사용하므로, 해당 테스크 집중에 방해 요소는 제외합니다. 추가 안내가 필요한 요소는 인포박스를 참고해 사용합니다.
Do : Button 내 일관된 레이블 사용
Button 내 레이블은 동선에 따른 명확한 안내를 구어체로 사용합니다. 예시로 상품 상세 페이지 > 주문서에서는 '구매하기', 주문서 > 주문완료에서는 '결제하기'를 사용합니다.
Don't : Button 내 불필요한 레이블 사용
Button 내 레이블에서 불필요한 정보 또는 텍스트 사용은 제한합니다. 예시로 구매하기를 대체한 ‘주문하기*’ 사용 및 특수기호 사용을 제한합니다. *주문과 결제(체결)는 다른 의미입니다.
Do : Button 내 구어체 레이블 사용
사용자에게 친근하게 안내 및 공지가 필요한 내용에 한정해 구어체 또는 구어체와 특수기호를 결합해 사용합니다.
Do : Button 간 수평 배치 시 12, 수직 배치 시 8 고정 사용
Button 2개 이상을 수직 정렬 시 패딩을 12로 고정해 사용합니다. Button 2개를 동일한 수평 정렬 시 Button 폭은 가변이되, 패딩은 8로 고정해 사용합니다.
Spec
Sizes
Button의 패당은 Xlarge - Medium까지 고정 16, Small - Tiny까지 고정 8입니다.
Minimum width
Button은 레이블 2글자 이상으로 패딩을 최소 16을 사용합니다. 해당 미만의 값은 Button의 최소 크기를 준수하지 못하므로 제한합니다.
Button docked(Pull Width Buttons)
스크롤 시 Button 위치 값이 고정된 Pull Width Button의 주의할 점은 (1)아이폰 인디케이터 대응에 따른 패딩과 (2)백그라운드 스타일입니다. 아래를 참고해 디바이스 대응에 따른 패딩을 주의하며 Button 백그라운드는 쉐도우값 black 2% 20px기준입니다.
Pull Width Buttons 사용 시 Library 내 375 기준에서는 Button docked-iPhone 11 Pro와 360기준 Most Device로 사용합니다.
Action Button
Action Button은 펼치기, 전체보기, 더보기 레이블과 활용되는 Button입니다. 모듈 내 보기, 더보기 및 펼치기 레이블과 아래 한정된 아이콘을 결합해 사용합니다.
Anatomy
Variants
Icon
좌측 아이콘 ‘Refresh’는 모듈 콘텐츠 더보기와 결합해 사용합니다. 우측 아이콘 ‘Chevron’은 네비게이션 이동과 결합해 사용합니다.
Size
Action Button의 사이즈는 높이 기준 Large, Small을 사용합니다. 사이즈에 따라 폰트 크기, 아이콘 크기, 패딩값의 차이가 없습니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Icon | Left, Right | Right |
| Size | Large, Small | Large |
| State | Default, Active, Disabled | Default |
Usage Guidelines
Do : 아이콘 ‘Chevron’ 위치는 우측 이외 좌측
Action Button 내 아이콘 위치는 레이블 기준 좌측에 고정해 사용합니다. 이외 동선 안내로 사용되는 ‘Chevron'에 한정해 우측에 고정해 사용합니다.
Don’t : 아이콘 꾸밈 요소로 사용, 위치는 좌측 외 지양
아이콘 위치는 레이블 기준 우측 케이스는 사용 지양합니다. 이외 아이콘 사용은 필수적인 경우를 제외하고는 지양합니다.
Do : Button 내 숫자 레이블 목적에 따라 색상 변경
사용자에게 친근하게 안내 및 공지가 필요한 내용에 한정해 구어체 또는 구어체와 특수기호를 결합해 사용합니다.
Spec
Sizes
Action Button의 아이콘 크기는 16으로 한정해 사용합니다. Action Button의 패딩값은 최소 16입니다.
Text Button
Text Button은 Inline Button으로 폼을 제외해 텍스트(레이블) 또는 선택적으로 아이콘과 결합해 사용합니다. Text Button은 다른 페이지로 안내하거나 현재 페이지에서 특정 작업을 실행 안내 시 사용됩니다.
Anatomy
Variants
Size
Text Button은 본문과 동일하게 사이즈 기준 Large, Small을 사용합니다. 네비게이션 상 이동(자세히 보기) 목적으로 사용 시 본문과 동일한 폰트 크기를 사용합니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Type | Right, Down, Underline | Right |
| Size | Large, Small | Large |
Usage Guidelines
Do : 네비게이션 이동은 아이콘 ‘Chevron’ 이외 밑줄
Text Button이 페이지 내 특정 테스크 실행 시 밑줄을 결합해 사용합니다. 이외 다른 페이지로 안내 시 아이콘 ‘Chevron-Right'를 결합해 사용합니다.
Don’t : 아이콘 ‘Chevron’과 밑줄 결합
Text Button은 목적에 따라 ‘Chevron-Right'와 밑줄의 차이를 두고 있습니다. 그러므로 단순 강조를 목적으로 ‘Chevron-Right'와 밑줄 결합은 제한합니다.
Do : 본문과 Text Button의 폰트 크기 동일
Text Button이 본문에 관한 동선 연장(‘자세히 보기'와 ‘더보기') 목적으로 사용 시, Text Button의 사이즈는 본문과 동일한 크기를 사용합니다.
Don't : 본문과 Text Button의 폰트 크기 상이함
Text Button이 본문에 관한 연장 목적으로 사용 시, 가독성을 고려해 상이한 폰트 크기는 제한합니다.
Spec
Sizes
Text Button의 폰트 크기는 14, 12으로 한정해 사용합니다. Label과 Icon의 패딩값은 2입니다.
Icon Button
Icon Button은 아이콘과 결합해 관심 상품 등록 등 선택 또는 선택을 취소하는 목적으로 사용합니다. 위 Icon Button 대비해 선택(ON) 또는 선택 취소(OFF) 액션에 관해 사용합니다.
Anatomy
Usage Guidelines
Do : Icon Button States ON/OFF 스타일
탭 한 영역에 구분된 스타일을 제공해 상태를 시각적으로 안내합니다. 상태는 ON(Active), OFF(Default)로 구분되며, Disabled 상태는 제외합니다.
Don't : Icon Button States ON/OFF 스타일 수정
사용자가 Icon Button을 탭 한 영역에 일관된 스타일을 제공하고자, ON(Active), OFF(Default)에 관한 임의 수정은 제한합니다.
