[HIG] Buttons
작업을 시작하는 버튼
본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.
Introduction
버튼을 누르면 작업이 즉시 시작됩니다.
버튼은 사용자가 지정하기 편리하게 되어있으며, 다양한 형태가 있습니다. 버튼은 앱 안에서 작업을 수행하기 위해 사용자에게 간단하고 친숙한 방법을 제공합니다. 버튼은 기능을 명확히 전달하기 위해 일반적으로 다음과 같은 세 가지의 속성을 지닙니다:
스타일(Style). ‘스타일’은 크기, 색상, 모양에 따른 시각적 스타일입니다.
콘텐츠(Content). ‘콘텐츠’는 버튼 안에 있는 요소들로, ‘기호(또는 인터페이스 아이콘)’, ‘텍스트 레이블’ 또는 ‘둘 다’를 의미하며, 버튼의 작업을 전달하기 위해 표시됩니다.
역할(Role). ‘역할’은 시스템이 제공하는 것으로, 이를 통해 버튼이 가진 의미를 나타내며 이는 버튼 모양에 영향을 줍니다.
역자설명 : 역할(Role)은 시스템이 자체적으로 버튼에 특정 역할을 제공하는 것으로, 버튼의 속성에 따라 사용자가 버튼의 목적을 식별하기 쉽게 시스템에서 스타일을 고정하여 분류한 것입니다. 하단 카테고리 ‘Role’에서 자세한 설명이 나와있습니다.
다양한 목적을 가진 버튼 외에, ‘정보(Info)’, ‘닫기(Close)’ 및 ‘연락처 추가(Contact Add)’와 같이 일반적인 버튼 스타일을 사용하면 전체 시스템 안에서 작업을 사용자 친화적으로 수행할 수 있습니다. 또한 특정한 용도를 수행하기 위한 버튼과 컴포넌트인 ‘토글(toggles)’, ‘팝업 버튼(pop-up buttons)’ 및 ‘세그먼트 컨트롤(segmented controls)’ 등은 뚜렷한 스타일과 콘텐츠를 가집니다.
Best practices
사람들은 버튼이 바로 인식되고 이해하기 쉬울 때, 앱이 직관적이고 잘 설계된 것처럼 느낍니다.
사람들이 버튼을 쉽게 선택할 수 있도록 만듭니다. 버튼은 터치스크린 안에서 손가락 터치를 위해 적어도 44x44 포인트의 공간을 필요로 합니다. 모든 화면에서 사람들이 터치를 사용하든, 포인터를 사용하든, 버튼을 확장하는 방법을 사용하든, 버튼과 주변 요소 및 콘텐츠를 시각적으로 구분할 수 있도록 버튼 주위에 충분한 공간을 포함하는 것이 중요합니다.
각 버튼이 기능을 명확하게 전달하는지 확인하세요. 버튼에는 항상 텍스트 레이블이나 기호(또는 인터페이스 아이콘)가 포함되어 있으며, 때로는 이 두 개의 요소가 조합하여 사용자가 버튼의 기능을 예상하고 이해하는 데 도움을 줍니다.
Style
시스템 버튼은 사용자가 지정할 수 있는 광범위한 기능을 지원하며, 이와 동시에 상호작용 상태(interaction states), 접근성(accessibility) 지원, 모양 적응(appearance adaptation)등 다양한 스타일을 제공합니다.
iOS와 iPadOS에는 네 가지 버튼 스타일이 있으며, 각각 세 가지 크기로 사용할 수 있습니다. 크기와 스타일의 각 조합은 서로 다른 시각적 대비를 가지고 있어서 앱 내에서 작업의 계층을 나타내는 데 도움이 됩니다.
사용자는 시스템 버튼을 통해 타일과 크기를 임의로 조합해 사용할 수 있습니다. 기본적으로 시스템 버튼은 크기별로 모서리 반지름(radius)과 앱의 메인 강조 색상(accent color)을 사용합니다. 필요한 경우, 속성 외에도 버튼을 구성하며 ‘콘텐츠 레이아웃(content layout)’ 및 ‘활동 표시기(activity indicator)’ 등의 속성을 변경할 수 있습니다.
화면 안에서 사용자들이 제일 원하는 기능을 색이 채워진 버튼으로 보여주세요. 색이 채워진 버튼 스타일은 시각적으로 가장 두드러지기 때문에 사람들이 가장 필요한 동작을 빠르게 식별할 수 있도록 도와줍니다. 동시에 화면 안에서 색이 채워진 버튼 스타일을 너무 많이 사용하지 않도록 합니다. 사람들은 선택을 하기 전 여러 개의 색이 채워진 버튼을 보며 옵션을 비교하는 데 시간을 소비해야 하기 때문에 불편함을 느낄 수 있습니다.
여러 옵션 중에서 사용자들이 가장 많이 선택할 버튼을 구분하기 위해서 크기가 아닌 스타일을 사용합니다. 두 개 이상의 옵션을 제공하는 경우 동일한 크기의 버튼을 사용하면, 서로 일관된 한 세트의 버튼으로 보입니다. 여러 개의 버튼 중 사용자들이 가장 많이 선택하고 사용할 버튼을 강조하려면, 강조되는 버튼 스타일을 사용하고, 나머지 버튼에서는 덜 강조되는 스타일을 사용하는 것이 좋습니다.
Content
버튼의 기능을 사용자가 즉시 이해할 수 있도록 하는 버튼 콘텐츠(Content)를 만듭니다. 버튼에 인터페이스 아이콘이 필요하면, 기존 스타일이나 사용자 정의된 SF 기호(SF Symbol)를 사용하는 것을 고려하는 것이 좋습니다. 텍스트를 사용하려면 버튼의 기능을 간략히 설명하는 짧은 레이블을 작성하는 것이 좋습니다. 제목 스타일 대문자(title-style capitalization)를 사용해 버튼의 작업을 설명하는 동사로 시작하는 레이블을 제공하세요. 예를 들어, 사람들이 쇼핑 장바구니에 항목을 추가할 수 있도록 하는 버튼으로 "장바구니에 추가(Add to Cart)"라는 레이블을 사용할 수 있습니다.
추가적인 텍스트는 사용자들에게 중요한 세부 정보를 제공하는 경우에만, 레이블 밑에 포함하는 것이 좋습니다. 추가적인 텍스트는 레이블보다 작은 텍스트 크기를 사용하여 보조적인 기능임을 나타내야 합니다. 예를 들어 장바구니 버튼을 장바구니의 항목 수를 보여주는 버튼으로 만들기 위해 텍스트를 추가할 수 있습니다. 또한 버튼의 기능에 대해 자세히 설명하는 부제를 작성하지 않는 것이 좋습니다. 버튼의 뷰, 레이블 또는 이미지, 스타일 및 역할이 필요한 모든 정보를 제공하여 사용자가 해당 작업을 이해하는 데 이상이 없는지 확인하는 것이 좋습니다.
즉시 완료되지 않는 작업에 대해 알려주는 피드백을 제공할 때, 활동 표시기(activity indicator)를 버튼에 보여주세요. 버튼 안에 활동 표시기(activity indicator)를 표시하면 사용자 인터페이스 공간을 절약하는 동시에 지연 이유를 명확하게 전달할 수 있습니다. 발생하는 작업을 명확히 하기 위한 버튼을 설정하여 활동 표시기(activity indicator) 옆에 다른 레이블을 표시할 수도 있습니다. 예를 들어, 활동 표시기(activity indicator)가 표시되는 동안 "체크아웃" 레이블이 "체크아웃 중..."으로 변경될 수 있습니다. 사용자가 설정된 버튼을 클릭한 후, 지연이 발생하면 시스템은 기본 또는 대체 레이블 옆에 활동 표시기(activity indicator)를 나타내며, 버튼 이미지가 있었던 경우 이를 숨깁니다.
역자설명 : 활동 표시기(activity indicator)는 활동이 지속되고 있다는 것을 표시하는 뷰를 말하며, 쉽게 로딩 표시기라고 말할 수 있습니다.
Role
시스템 버튼은 다음과 같은 의미를 가집니다.:
평범한(Normal). 특정한 의미가 없습니다.
기본적인(Primary). 사람들이 가장 많이 선택하는 버튼입니다.
취소(Cancel). 현재 작업이 취소됩니다.
파괴적인(Destructive). 데이터를 삭제할 수 있는 작업을 수행합니다.
시스템 버튼의 역할(Role)은 버튼 스타일에 추가적인 영향을 미칠 수 있습니다. 예를 들어, 시스템은 기본적인(Primary) 버튼의 레이블에 굵은 텍스트를 사용하고, 파괴적인(Destructive) 버튼에는 빨간색을 사용합니다.
사용자가 선택할 가능성이 가장 높은 버튼에 기본(Primary)을 할당합니다. 기본적인(Primary) 버튼을 사용하고, 사용자가 ‘되돌아가기(Return)’ 키에 응답하면 선택했던 내용을 쉽게 확인할 수 있습니다. 또한 버튼이 시트(sheet), 편집 가능한 뷰(editable view,) 또는 알림(alert)과 같은 임시적인 뷰(temporary view) 안에 있는 경우, 기본적인(Primary) 역할을 할당하면 사용자가 돌아가기를 클릭할 때 뷰가 자동으로 닫힐 수 있습니다.
사용자들이 가장 많이 선택할 버튼이더라도 파괴적인(Destructive) 작업을 수행하는 버튼에는 기본적인(Primary)를 할당하지 않는 것이 좋습니다. 사람들은 시각적으로 강조된 버튼을 때때로 읽지 않고 선택합니다. 기본적인(Primary)를 파괴적인(destructive) 작업을 수행하지 않은 버튼에 할당하여 사용자가 중요한 작업에 손실이 발생하지 않도록 하는 것이 좋습니다.
Platform considerations
No additional considerations for iOS, iPadOS, or tvOS.
macOS
몇 가지 특정한 버튼의 유형은 macOS에만 해당됩니다.
푸시 버튼(Push buttons)
맥 OS의 기본 버튼 유형은 푸시 버튼(Push buttons)으로 알려져 있습니다. 푸시 버튼(Push buttons)을 사용하여 텍스트, 기호, 인터페이스 아이콘 또는 이미지를 나타내거나, 텍스트와 이미지 콘텐츠의 조합을 보여줄 수 있습니다. 푸시 버튼(Push buttons)은 화면에서 기본(default) 버튼으로 작동할 수 있으며, 사용자는 이 버튼을 틴트(tint)할 수 있습니다.
역자설명 : 하단의 이미지는 푸시 버튼(Push buttons) 예시입니다.
높이가 있거나 다양한 콘텐츠를 표시해야 할 경우에만, 높이 조절이 가능한 푸시 버튼(Push buttons)을 사용하세요. 높이조절이 가능한 푸시 버튼(Push buttons)은 일반 푸시 버튼(Push buttons)과 동일한 구성을 제공하므로 모서리 반경(radius) 및 콘텐츠 패딩(padding)이 동일하여 일반 버튼들과 일관적입니다. 두 줄 이상의 높이가 있는 텍스트, 또는 높이가 있는 아이콘이 포함된 버튼을 표시해야 하는 경우, 높이조절이 가능한 버튼을 사용하고, 그렇지 않은 경우 기본적인 푸시 버튼(Push buttons)을 사용하는 것이 좋습니다. 개발자 가이드는 NSBezelStyleRegularSquare를 참고하세요.
푸시 버튼(Push buttons)을 클릭하여 창이나 뷰 또는 앱이 열릴 때, 제목 뒤에 줄임표(trailing ellipsis)를 추가하는 것이 좋습니다. 시스템에서, 사람들은 설정의 제목에 달린 줄임말 기호를 통해 추가 입력을 할 수 있다는 것을 알 수 있습니다. 예를 들어 Safari 설정의 자동 완성 창(AutoFill pane)에 있는 편집 버튼에는 사람들이 자동 완성의 값을 수정할 수 있는 다른 뷰가 열리기 때문에 줄임표(trailing ellipsis)가 포함되어 있습니다.
역자설명 : 줄임표(trailing ellipsis)는 생략부호를 뜻하며, 제목 뒤에 ‘(…)’ 형식으로 나타납니다.
스프링 로딩(spring loading)을 사용하는 것을 고려해보세요. 매직 트랙패드가 있는 시스템에서는 스프링 로딩을 사용하여 선택한 항목을 끌어다 놓으면 선택한 항목을 떨어뜨리지 않고 버튼을 강제로 클릭(더 세게)할 수 있습니다. 강제로 클릭한 후에도 사용자는 항목을 계속 끌 수 있으며, 추가 작업을 수행할 수도 있습니다.
그라데이션 버튼(Gradient buttons)
그라데이션 버튼(Gradient buttons)은 테이블에서 행을 추가하거나 제거하는 등 뷰와 관련된 작업을 수행합니다.
그라데이션 버튼(Gradient buttons)에는 텍스트가 아닌 기호 또는 인터페이스 아이콘이 포함되어 있으며, 푸시 버튼(push buttons), 토글(toggles) 또는 팝업 버튼(pop-up buttons)처럼 작동하도록 구성할 수 있습니다. 버튼은 관련 뷰(일반적으로 해당 뷰 내 또는 하위 항목의 뷰)에 가깝게 나타나므로 사용자는 버튼이 어떤 뷰에 영향을 미치는지 알 수 있습니다.
창의 프레임(window frame)이 아닌 해당 화면 안에서 그라데이션 버튼(Gradient buttons)을 사용합니다. 그라데이션 버튼(Gradient buttons)은 도구 모음(toolbar)이나 상태 표시줄(status bars)에서 사용할 수 없습니다. 도구 모음(toolbar)에서 버튼이 필요한 경우 도구 모음 항목(toolbar item)을 사용합니다.
역자설명 : 창 프레임(window frame)은 컴퓨터 전체 화면을 말하며, 그 중 ‘상태 표시줄(status bars)’은 상단의 메뉴 및 날짜, 시간 등을 표시해 주는 막대모양의 인터페이스, 도구 모음(toolbars)은 하단의 앱 아이콘이 모여있는 막대모양의 인터페이스를 뜻합니다.
그라데이션 버튼(Gradient buttons)에 기호를 사용하는 것이 좋습니다. SF 기호(SF Symbols)는 기본 상태에서 사용자 상호 작용에 대응하여 적절한 색상을 자동으로 제공하는 다양한 범위의 기호를 제공합니다.
그라데이션 버튼(Gradient buttons)을 삽입할 때 레이블을 사용하지 않는 것이 좋습니다. 그라데이션 버튼은 특정 뷰와 밀접하게 연결되어 있기 때문에 설명하는 텍스트가 없어도 일반적으로 용도가 명확합니다.
개발자 가이드라인은 NSBezelStyleSmallSquare를 참고하세요.
도움말 버튼(Help buttons)
화면 안에서 도움말 버튼이 나타나며, 앱 안에서 도움말 설명서가 열립니다.
Wallet & Apple Pay 설정 창의 오른쪽 하단 모서리에 강조 표시된 도움말 버튼의 스크린샷.도움말 버튼은 물음표가 포함된 원형의 일정한 크기의 버튼입니다. 도움말 문서 작성에 대한 개발자 가이드라인은 Offering help을 참고하세요.
시스템에서 제공하는 도움말 버튼을 사용하여 도움말 문서를 표시합니다. 사람들은 기본 도움말 버튼 형태에 익숙하며, 이 버튼을 선택하면 도움말 내용이 열린다는 것을 알고 있습니다.
최대한 현재 사용 맥락과 관련된 도움말 항목이 열리도록 합니다. 예를 들어, 메일 설정에서 도움말 버튼을 통해 메일 사용자 안내서를 열 수 있습니다. 특정 도움말이 현재 사용 맥락에 직접 적용되지 않는 경우에, 도움말 버튼을 선택하면 최상위 문서의 앱 도움말이 열립니다.
창(window) 별로 하나의 도움말 버튼만 제공하는 것이 좋습니다. 같은 맥락에서 여러 개의 도움말 버튼을 사용하면 하나를 클릭했을 때의 결과를 사용자들이 예상하기 어렵습니다.
사용자가 쉽게 예상할 수 있는 위치에 도움말 버튼을 배치합니다. 다음 하단의 위치(Location)를 통해 가이드라인을 참고하세요.
창 프레임(window frame)이 아닌 뷰 안에서 도움말 버튼을 사용합니다. 예를 들어 도구 모음(toolbar)이나 상태 표시줄(status bar)에 도움말 버튼을 배치하지 않는 것이 좋습니다.
도움말 버튼을 소개하는 텍스트는 표기하지 않는 것이 좋습니다. 사용자는 도움말 버튼의 기능을 알고 있으므로, 추가적인 설명을 하는 텍스트가 필요하지 않습니다.
이미지 버튼(Image buttons)
이미지 버튼(Image buttons)은 화면 안에 보이며, 이미지, 기호 또는 인터페이스 아이콘을 표시합니다. 푸시 버튼(push buttons), 토글(toggles) 또는 팝업 버튼(pop-up buttons)처럼 작동하도록 구성할 수 있습니다.
창 프레임(window frame)이 아닌 뷰에서 이미지 버튼(Image buttons)을 사용합니다. 예를 들어 이미지 버튼(Image buttons)을 도구 모음(toolbar)이나 상태 표시줄(status bar)에 배치하지 않는 것이 좋습니다. 이미지를 도구 모음(toolbar)의 버튼으로 사용해야 하는 경우 도구 모음 항목(toolbar item)을 사용합니다. Toolbars를 참고하세요.
이미지 가장자리와 버튼 가장자리 사이에 약 10픽셀의 패딩(padding)을 포함하는 것이 좋습니다. 이미지 버튼의 가장자리는 보이지 않는 경우에도 클릭 가능한 영역을 포함해야 합니다. 패딩을 포함하면 이미지를 정확히 클릭하지 않더라도 사용자가 원하는 데로 올바르게 작동됩니다. 일반적으로 이미지 버튼에 시스템에서 제공하는 테두리를 포함하지 않는 것이 좋습니다. 개발자 가이드라인은 isBordered를 참고하세요.
레이블을 포함해야 하는 경우, 이미지 버튼 아래에 레이블을 배치합니다. 관련 가이드라인은 Labels를 참고하세요.
watchOS
화면 전체 너비의 버튼을 사용하는 것이 좋습니다. 전체 너비의 버튼은 사람들이 보기에 더 좋고 더 쉽게 클릭할 수 있습니다. 만약 두 개의 버튼이 동일한 수평적 공간 안에 배치되어야 하는 경우, 두 버튼 모두에 동일한 높이를 사용하고 각 버튼 내용에 이미지 또는 짧은 텍스트의 제목을 사용합니다.
한 줄이나 두 줄 텍스트가 들어가는 버튼에는 같은 높이의 수직 스택(vertical stacks)을 사용합니다. 시각적 일관성을 위해 가능한 한 동일한 버튼 높이를 사용하도록 고려해 보세요.
시스템이 정의한 코너 반지름(corner radius)을 사용합니다. 시스템은 앱 전반에 걸쳐 일관된 시각적 스타일을 제공하고, 버튼의 상호작용을 위한 코너 반지름(corner radius) 값을 정의합니다. Apple Watch Series 4 이상에서 코너 반지름(corner radius) 값은 버튼이 스크롤 뷰에 있는지 또는 스크롤하지 않는 뷰에 있는지에 따라 다릅니다.
