Box button
Box 형태의 Container가 포함된 가장 일반적인 버튼입니다. 화면 콘텐츠 영역의 상,하단에 배치하여 화면 내 주요한 액션을 수행할 수 있는 역할을 합니다.
Figma UI Kit
DONE
Contents
DONE
Develop
iOS
DONE
Android
DONE
Box button
Box 형태의 Container가 포함된 가장 일반적인 버튼입니다. 화면 콘텐츠 영역의 상,하단에 배치하여 화면 내 주요한 액션을 수행할 수 있는 역할을 합니다.
Figma UI Kit
DONE
Contents
DONE
Develop
iOS
DONE
Android
DONE
Box button
Box 형태의 Container가 포함된 가장 일반적인 버튼입니다. 화면 콘텐츠 영역의 상,하단에 배치하여 화면 내 주요한 액션을 수행할 수 있는 역할을 합니다.
Figma UI Kit
DONE
Contents
DONE
Develop
iOS
DONE
Android
DONE
Button text
버튼 텍스트는 타입에 맞는 톤과 규칙을 따르며, 짧고 명확하게 작성합니다.
Button text
버튼 텍스트는 타입에 맞는 톤과 규칙을 따르며, 짧고 명확하게 작성합니다.
Button text
버튼 텍스트는 타입에 맞는 톤과 규칙을 따르며, 짧고 명확하게 작성합니다.
Primary buttons
Primary 버튼은 사용자의 핵심 행동을 직접적이고 강력하게 안내합니다. 불필요한 수식어나 설명을 배제하고, 직관적인 문구를 사용합니다.
Primary buttons
Primary 버튼은 사용자의 핵심 행동을 직접적이고 강력하게 안내합니다. 불필요한 수식어나 설명을 배제하고, 직관적인 문구를 사용합니다.
Primary buttons
Primary 버튼은 사용자의 핵심 행동을 직접적이고 강력하게 안내합니다. 불필요한 수식어나 설명을 배제하고, 직관적인 문구를 사용합니다.
작성 예시
작성 예시
N원 결제하기
객실 선택
대실 예약, 숙박 예약
구매하기
선택, 적용
Secondary buttons
Secondary 버튼은 보조적이거나 선택적인 행동을 나타냅니다. Primary보다 낮은 우선순위를 가지며, 반복·부가 작업을 짧고 간결하게 표현합니다.
Secondary buttons
Secondary 버튼은 보조적이거나 선택적인 행동을 나타냅니다. Primary보다 낮은 우선순위를 가지며, 반복·부가 작업을 짧고 간결하게 표현합니다.
Secondary buttons
Secondary 버튼은 보조적이거나 선택적인 행동을 나타냅니다. Primary보다 낮은 우선순위를 가지며, 반복·부가 작업을 짧고 간결하게 표현합니다.
작성 예시
작성 예시
취소
닫기
예약번호 복사
주소 복사
다시 예약
숙소 상세
Destructive buttons
Destructive 버튼은 되돌릴 수 없거나 중요한 데이터를 변경·삭제하는 작업에 사용합니다. 짧고 직관적인 동사형 문구를 사용하여, 사용자가 신중히 판단할 수 있도록 합니다.
Destructive buttons
Destructive 버튼은 되돌릴 수 없거나 중요한 데이터를 변경·삭제하는 작업에 사용합니다. 짧고 직관적인 동사형 문구를 사용하여, 사용자가 신중히 판단할 수 있도록 합니다.
Destructive buttons
Destructive 버튼은 되돌릴 수 없거나 중요한 데이터를 변경·삭제하는 작업에 사용합니다. 짧고 직관적인 동사형 문구를 사용하여, 사용자가 신중히 판단할 수 있도록 합니다.
작성 예시
작성 예시
예약 취소
환불 요청
취소 요청
리뷰 삭제
Highlight buttons
Highlight 버튼은 Primary보다 중요도는 낮지만, 사용자의 관심을 끌어 특정 행동을 즉시 실행하도록 유도하는 문구에 사용합니다.
Highlight buttons
Highlight 버튼은 Primary보다 중요도는 낮지만, 사용자의 관심을 끌어 특정 행동을 즉시 실행하도록 유도하는 문구에 사용합니다.
Highlight buttons
Highlight 버튼은 Primary보다 중요도는 낮지만, 사용자의 관심을 끌어 특정 행동을 즉시 실행하도록 유도하는 문구에 사용합니다.
작성 예시
작성 예시
쿠폰 받기
사진 첨부
Writing usage
Writing usage
Writing usage
{동작명} + 요청
사용자가 수행한 동작이 즉시 완료되지 않고, 추가 승인·확인·발급 절차가 필요한 경우에 사용합니다. 버튼을 누르는 즉시 작업이 완료되는 경우에는 ‘{동작명} + 요청’을 사용하지 않고, 동작명만 직접적으로 표기합니다. 요청 완료 시 정상적으로 처리되었다는 응답을 토스트 등으로 추가 피드백하는 것을 권장합니다.
{동작명} + 요청
사용자가 수행한 동작이 즉시 완료되지 않고, 추가 승인·확인·발급 절차가 필요한 경우에 사용합니다. 버튼을 누르는 즉시 작업이 완료되는 경우에는 ‘{동작명} + 요청’을 사용하지 않고, 동작명만 직접적으로 표기합니다. 요청 완료 시 정상적으로 처리되었다는 응답을 토스트 등으로 추가 피드백하는 것을 권장합니다.
{동작명} + 요청
사용자가 수행한 동작이 즉시 완료되지 않고, 추가 승인·확인·발급 절차가 필요한 경우에 사용합니다. 버튼을 누르는 즉시 작업이 완료되는 경우에는 ‘{동작명} + 요청’을 사용하지 않고, 동작명만 직접적으로 표기합니다. 요청 완료 시 정상적으로 처리되었다는 응답을 토스트 등으로 추가 피드백하는 것을 권장합니다.
환불은 추가 확인 절차가 필요한 작업으로 "환불 요청"으로 표기합니다.
환불은 추가 확인 절차가 필요한 작업으로 "환불 요청"으로 표기합니다.
환불은 추가 확인 절차가 필요한 작업으로 "환불 요청"으로 표기합니다.
증명서·영수증 발급은 추가적인 확인 절차가 필요한 작업으로 “발행 요청"으로 표기합니다.
증명서·영수증 발급은 추가적인 확인 절차가 필요한 작업으로 “발행 요청"으로 표기합니다.
증명서·영수증 발급은 추가적인 확인 절차가 필요한 작업으로 “발행 요청"으로 표기합니다.
결제는 버튼 클릭과 동시에 실행되므로 ‘{동작명} + 요청’을 사용하지 않습니다.
결제는 버튼 클릭과 동시에 실행되므로 ‘{동작명} + 요청’을 사용하지 않습니다.
결제는 버튼 클릭과 동시에 실행되므로 ‘{동작명} + 요청’을 사용하지 않습니다.
{동작명} + 완료
사용자가 직접 마무리 짓는 행동(선택, 인증 등)을 끝내는 버튼에 사용합니다. 단, ‘결제 완료’, ‘환불 완료'처럼 결과 상태를 표시하는 문구는 버튼에 쓰지 않고, 결과 메시지로만 사용합니다.
{동작명} + 완료
사용자가 직접 마무리 짓는 행동(선택, 인증 등)을 끝내는 버튼에 사용합니다. 단, ‘결제 완료’, ‘환불 완료'처럼 결과 상태를 표시하는 문구는 버튼에 쓰지 않고, 결과 메시지로만 사용합니다.
{동작명} + 완료
사용자가 직접 마무리 짓는 행동(선택, 인증 등)을 끝내는 버튼에 사용합니다. 단, ‘결제 완료’, ‘환불 완료'처럼 결과 상태를 표시하는 문구는 버튼에 쓰지 않고, 결과 메시지로만 사용합니다.
“인증 완료”는 사용자가 이메일 인증 절차를 끝내는 동작을 의미합니다.
“인증 완료”는 사용자가 이메일 인증 절차를 끝내는 동작을 의미합니다.
“인증 완료”는 사용자가 이메일 인증 절차를 끝내는 동작을 의미합니다.
“선택 완료”는 날짜 선택과 같은 사용자 작업이 끝났음을 의미합니다.
“선택 완료”는 날짜 선택과 같은 사용자 작업이 끝났음을 의미합니다.
“선택 완료”는 날짜 선택과 같은 사용자 작업이 끝났음을 의미합니다.
“작성 완료”는 리뷰 등록 뒤에 노출되는 상태를 표현하는 문구에 가깝습니다.
“작성 완료”는 리뷰 등록 뒤에 노출되는 상태를 표현하는 문구에 가깝습니다.
“작성 완료”는 리뷰 등록 뒤에 노출되는 상태를 표현하는 문구에 가깝습니다.
“리뷰 등록”은 사용자가 버튼을 눌러 실제로 수행할 행동을 직접적으로 표현합니다.
“리뷰 등록”은 사용자가 버튼을 눌러 실제로 수행할 행동을 직접적으로 표현합니다.
“리뷰 등록”은 사용자가 버튼을 눌러 실제로 수행할 행동을 직접적으로 표현합니다.
다음
사용자가 현재 화면에서 주어진 입력·선택 등 특정 작업(Task)을 완료한 뒤, 다음 단계로 진행해야 할 때 사용합니다.
다음
사용자가 현재 화면에서 주어진 입력·선택 등 특정 작업(Task)을 완료한 뒤, 다음 단계로 진행해야 할 때 사용합니다.
다음
사용자가 현재 화면에서 주어진 입력·선택 등 특정 작업(Task)을 완료한 뒤, 다음 단계로 진행해야 할 때 사용합니다.
등록
사용자가 작성한 내용이나 첨부한 파일을 최종 제출·반영할 때 사용합니다. “등록”은 단순 보관이 아닌, 서비스에 즉시 적용되는 동작을 의미합니다. (e.g. 리뷰 등록, 프로필 사진 등록, 쿠폰 등록)
등록
사용자가 작성한 내용이나 첨부한 파일을 최종 제출·반영할 때 사용합니다. “등록”은 단순 보관이 아닌, 서비스에 즉시 적용되는 동작을 의미합니다. (e.g. 리뷰 등록, 프로필 사진 등록, 쿠폰 등록)
등록
사용자가 작성한 내용이나 첨부한 파일을 최종 제출·반영할 때 사용합니다. “등록”은 단순 보관이 아닌, 서비스에 즉시 적용되는 동작을 의미합니다. (e.g. 리뷰 등록, 프로필 사진 등록, 쿠폰 등록)
적용
사용자가 필터나 조건을 선택한 뒤, 해당 조건을 화면에 최종 반영할 때 사용합니다. “적용”은 선택한 조건을 확정하고, 결과 화면을 갱신하는 것을 의미합니다.
적용
사용자가 필터나 조건을 선택한 뒤, 해당 조건을 화면에 최종 반영할 때 사용합니다. “적용”은 선택한 조건을 확정하고, 결과 화면을 갱신하는 것을 의미합니다.
적용
사용자가 필터나 조건을 선택한 뒤, 해당 조건을 화면에 최종 반영할 때 사용합니다. “적용”은 선택한 조건을 확정하고, 결과 화면을 갱신하는 것을 의미합니다.
받기
사용자가 App에서 제공하는 혜택·권한·리소스를 자신의 계정에 취득할 때 사용합니다. (e.g. 쿠폰 받기, 혜택 받기, 사은품 받기) “다운로드”는 파일을 로컬 기기에 저장하는 행위에 가까워, 쿠폰이나 포인트 등 혜택 맥락에는 적합하지 않습니다.
받기
사용자가 App에서 제공하는 혜택·권한·리소스를 자신의 계정에 취득할 때 사용합니다. (e.g. 쿠폰 받기, 혜택 받기, 사은품 받기) “다운로드”는 파일을 로컬 기기에 저장하는 행위에 가까워, 쿠폰이나 포인트 등 혜택 맥락에는 적합하지 않습니다.
받기
사용자가 App에서 제공하는 혜택·권한·리소스를 자신의 계정에 취득할 때 사용합니다. (e.g. 쿠폰 받기, 혜택 받기, 사은품 받기) “다운로드”는 파일을 로컬 기기에 저장하는 행위에 가까워, 쿠폰이나 포인트 등 혜택 맥락에는 적합하지 않습니다.
"선택 완료" VS “적용”
사용자의 주된 작업(Task) 차이에 따라 사용합니다.
"선택 완료" VS “적용”
사용자의 주된 작업(Task) 차이에 따라 사용합니다.
"선택 완료" VS “적용”
사용자의 주된 작업(Task) 차이에 따라 사용합니다.
Type
Type
Description
Description
선택 완료
사용자가 직접 수행한 선택·입력 행위 자체를 끝냈음을 의미.
즉, 행위 중심으로 사용자는 ‘내가 이 작업(Task)를 마쳤다’라고 인식하는 멘탈모델.
e.g. 달력에서 날짜 선택 → “선택 완료”
적용
사용자가 고른 조건을 시스템·화면에 반영해 달라는 의미.
즉, 결과 반영 중심으로 사용자는 ‘내가 고른 걸 반영해줘’라고 인식하는 멘탈모델.
e.g. 항공사 필터 선택 → “적용”
Credit
Contributor
제티@Jetty
Credit
Contributor
제티@Jetty
Credit
Contributor
제티@Jetty
Copyright © GC COMPANY Corp. All rights reserved.
Copyright © GC COMPANY Corp.
All rights reserved.
Copyright © GC COMPANY Corp. All rights reserved.