brunch

매거진 UXUI Design

라이킷 13 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이지 Dec 06. 2022

IOS 디자인 시스템 : 버튼(Buttons)

IOS Human Interface Guidelines 한글 번역

버튼 (Buttons)

버튼은 즉각적인 액션을 불러 일으킵니다.

다양한 곳에 쓰이며 목적이나 상황에 따라 변화무쌍한 버튼. 앱을 이용할 때 단순하고 익숙한 방법으로 테스크를 수행시킬 수 있도록 하는 것이 바로 버튼입니다. 보통 버튼이 명확하게 기능 수행을 하기 위해서는 버튼은 아래 3가지 요소들을 가지고 있어야 합니다.

스타일(Style) : 사이즈, 컬러, 모양에 기반한 비주얼 스타일

콘텐츠 (Content) : 아이콘이나 심볼, 버튼 텍스트 등 버튼의 목적을 나타내는 버튼 위의 내용

역할 (Role) : 시스템 상으로 정의되는 버튼의 역할, 버튼이 가지는 의미(semantic meaning)와 버튼 모양에 영향을 줌.

또한, 모든 방면에 두루두루 쓰이는 'all-purpose buttons'의 경우, 일반적인 버튼 스타일을 따르고 시스템 상에서 유저에게 익숙한 행동들을 할 수 있도록 도와줍니다. 예를 들면, 정보(info), 닫기(Close), 혹은 연락처 추가(Contact Add) 같은 것이죠. 뿐만 아니라, 상황에 따라 토글(toggles), 팝업 버튼(pop-up buttons), 그리고 세그멘트 컨트롤(segmented controls)와 같이 버튼 같아 보이는 요소들도 있습니다. 이들은 버튼과는 다른 모양을 가지고 있고 이를 사용했을 때의 기대 액션도 조금 다른 편이죠.

적용 방법 (Best practices)

버튼이 눈에 잘 띄고 이해하기 쉬우면, 유저들은 앱을 사용할 때 직관적이고 잘 디자인되었다고 느낄 수 있습니다.

사람들이 사용하기 쉬운 버튼을 만드세요. 터치 스크린에서 버튼은 최소 44x44 points의 터치 포인트를 확보 하여 손가락으로 누르기 편하게 만들어야 합니다. 모든 스크린에서 버튼은 주변에 넉넉한 공간을 확보하여 사람들이 주변 요소들과 콘텐츠 사이에서 버튼을 시각적으로 구분할 수 있도록 해야합니다. 직접 터치를 하는 상황이나, 포인터를 이용하건, 혹은 시스템의 확대기를 통해 버튼을 보는 등의 상황에서도 말이죠.

모든 버튼이 명백하게 목적에 따라 설계 될 수 있도록 하세요. 버튼은 언제나 텍스트 라벨과 심볼(or 인터페이스 아이콘) 등을 활용해서 버튼이 어떤 목적을 수행하는지 예상할 수 있도록 해야합니다.

스타일 (Style)

시스템 버튼은 상황에 따라 바꿔 쓸 수 있는 여러 범위의 스타일을 지원하는 동시에 시스템 기본 상태 표시, 접근성 지원, 모양 변화 버전도 제공합니다.

iOS와 iPadOS는 네 개의 버튼 스타일을 가지고 있고, 각각 3개의 사이즈로 활용할 수 있습니다. 버튼의 사이즈와 스타일을 달리함으로써 시각적 중요도를 구분할 수 있고 이를 통해 앱 내에서 버튼 간의 액션의 위계를 보여줄 수 있습니다.

스타일과 사이즈를 조합해서 시스템 버튼을 구성할 수 있습니다. 기본적으로는 시스템 버튼은 특정 코너 레디우스 값과 앱의 액센트 컬러를 사용합니다. 필요하다면 버튼 구성 시에 이런 특성들을 바꿀 수도 있는데, 콘텐츠 레이아웃이나 액티비티 인디케이터(e.g.로딩 UI) 컨트롤 같은 케이스에서 가능합니다.

화면에서 액션을 필요로 하는 곳에는 색상으로 채워진(filled button)을 사용하세요. 색상을 채운 스타일은 비주얼적으로 눈에 띄기 때문에 사람들로 하여금 원하는 액션을 취할 수 있도록 도와줍니다. 또한, 한 화면에서 동시에 여러 개의 풀컬러 버튼을 사용하는 걸 지양하세요. 이런 경우, 여러 개의 옵션 중에 뭘 선택해야 할지 모르게 되는데 너무 많은 풀컬러 버튼은 인지 저하를 불러일으키기 때문입니다.

다양한 옵션 사이에서 선호되는 버튼에 시각적인 구분을 주려면 사이즈가 아니라, 스타일을 이용하세요. 같은 사이즈의 버튼으로 2개 이상의 옵션을 제공하면 비슷한 레벨 상에서 다른 옵션을 선택할 수 있다고 느낍니다. 만약에 한 버튼을 더 강조하고 싶다면, 눈에 띄는 버튼 스타일을 적용하고 그 외의 버튼들에는 그보다 덜한 강조를 주는 스타일들을 적용하면 됩니다.

콘텐츠 (Contents)

버튼이 어떤 역할을 수행하는지 즉각적으로 이해할 수 있도록 버튼 콘텐츠를 만드세요. 만약 인터페이스 아이콘이 버튼에서 활용 된다면 기존에 이미 만들어진 SF Symbol 을 활용하는 것을 고려주세요.

버튼에 텍스트를 사용한다면, 버튼 역할이 뭔지 간결하게 나타내는 짧은 버튼명을 쓰세요. 영문의 경우, 타이틀에는 대문자 스타일을 적용하고 버튼을 누르면 무엇을 할 수 있는지 명확히 나타내기 위해서 행위를 나타내는 동사를 활용하세요. 예를 들면, 사람들이 앱에서 쇼핑 중에 원하는 물건을 장바구니에 추가하려면 "Add to Cart" (장바구니 담기)와 같은 문구를 노출해야 한다는 말입니다.

그리고 만약 버튼이 추가적인 설명이 필요한 경우 하단에 텍스트를 적을 수 있지만, 설명이 유용한 경우에만 포함하도록 합니다. 추가 텍스트의 경우에는 버튼 라벨 보다는 작은 텍스트 사이즈로 작성해서 버튼 액션 보다 하위의 정보라는 걸 보여줄 수 있어야 합니다. 예를 들어, 장바구니에 담은 아이템들의 숫자를 위에서 말한 "Add to Cart" 버튼에 노출시키려고 할 때, 버튼 역할에 대해 추가적으로 설명하는 걸 지양하세요. 버튼 자체로 봤을 때, 레이블과 이미지, 스타일, 역할 등의 정보를 통해 사람들이 이해할 수 있는 버튼이 되어야 한다는 걸 잊지마세요.

버튼을 눌렀을 때 즉각적으로 반응이나 결과 등의 피드백을 제공하지 못하는 상황이라면, 액티비티 인디케이터(로딩 UI)를 버튼에 노출하세요. 버튼에 액티비티 인디케이터를 노출하므로써 사람들은 어디서 시간이 지연되는지 이유를 알 수 있으며 화면 상의 공간을 절약해주기도 합니다.

현재 상황에 대해 명확한 정보를 주기 위해서는 이러한 로딩 UI, 즉 액티비티 인디케이터와 함께 버튼 텍스트에 변화를 주어야 합니다. 예를 들어, "Checkout(결제)"라는 라벨이 있는 경우, 이를 누르고 로딩 중인 인디케이터가 보여지면 레이블은 "Checking out..(결제 진행중)"과 같은 말로 변경되어 보여지면 좋습니다.

사람들이 버튼을 누르거나 탭 했을 때 지연이 발생한다면, 시스템 상에서 누른 그 버튼에서 액티비티 인디케이터를 노출시킴과 동시에 다른 대체적인 버튼명 라벨링을 해야하며 만약 이미지가 버튼 내에 있었다면 숨김 처리 하는 것이 좋습니다.

역할 (Role)

시스템 버튼은 아래와 같은 역할들 중 하나를 수행합니다.

기본(Normal) : 특정 의미 없음

주요(Primary) : 디폴트 버튼으로 대게 사람들이 잘 누르는 버튼들

취소(Cancel) : 현재의 액션을 취소하는 버튼

파기(Destructive) : 데이터를 파기하는 결과를 수행하는 버튼들

버튼의 역할은 어떻게 버튼 모양을 어떻게 만드느냐에 따라서 추가적인 효과들을 가질 수 있습니다. 예를 들어서, 시스템에서는 주요 버튼에 굵은 볼드 텍스트를 사용하는 반면 파기를 행하는 버튼들에는 레드 컬러를 씁니다.

사람들이 많이 누를 것 같은 버튼은 프라이머리 버튼으로 설계해서 주된 역할을 부여하세요. 프라이머리 버튼이 엔터키(Return keys)에 반응하면 사람들로 하여금 더 확실하게 결정을 인지하게 할 수 있습니다. 또한, 문서 편집 가능한 시트나 화면 혹은 얼럿 같은 일시적인 창에 버튼이 노출 될 때의 경우 엔터키를 누르면 해당 창들이 닫히는 효과가 있습니다.

사람들이 자주 누르는 버튼이라고 하더라도, 파기를 요하는 액션에는 프라이머리 버튼을 놓지 않습니다. 왜냐하면 시각적인 중요도가 높아지면 사람들은 읽지 않고 버튼을 누를 수도 있습니다. 데이터를 삭제하지 않도록 파기 액션을 취하는 버튼들은 프라이머리 버튼처럼 만들지 않습니다.

플랫폼에 따른 고려사항들 (Platform considerations)

iOS, iPadOS, or tvOS에는 추가적 고려 사항이 없지만, 아래는 해당하므로 참고해보세요.

맥 OS (macOS)

일부 버튼들은 맥OS에 특화 되어 있습니다.

(들어가기 전, 용어 해설 - *뷰 View? 윈도우 프레임 Window Frame?)

윈도우- iOS에서 디바이스의 스크린을 빈틈없이 채우기위한 객체로 항상 유저 인터페이스 표현계층의 최상위에 위치함. 뷰의 일종이지만 직접 콘텐츠를 가지지는 않고 뷰를 내부에 배치하여 화면에 출력하는 역할

뷰- 콘텐츠를 스크린에 표시하고 사용자 입력에 반응함. 윈도우 일부 영역을 자신의 영역으로 정의, 사용자 인터랙션에 따른 결과처리 하는 창

푸쉬 버튼 (Push buttons)

맥OS의 기본적 버튼들은 푸쉬 버튼이라고 합니다. 이 푸쉬버튼들을 조합해서 텍스트, 심볼, 인터페이스 아이콘, 이미지 등을 보여줄 수 있습니다. 푸쉬 버튼은 뷰에서 기본적인 버튼 역할을 수행하며 색도 바꿀 수 있습니다.

길이가 길거나 높이값이 다양한 콘텐츠를 노출할 때에는 푸쉬버튼의 높이 값을 유연하게 가져갈 수 있습니다. 유연한 높이 버튼도 일반 푸시 버튼과 동일한 구성을 지원하고, 동일한 모서리 반경 및 콘텐츠 패딩을 사용하기 때문에 인터페이스의 다른 버튼과 일관성이 있습니다.

2줄 길이의 텍스트나 긴 사이즈의 아이콘이 있는 버튼을 표시해야할 경우, 유연한 높이 버튼을 사용하세요. 그렇지 않은 경우에는 표준형 푸시 단추를 사용하면 됩니다.

푸시 버튼을 눌렀을 때 다른 창이나 뷰, 앱을 열게 한다면 버튼 타이틀에 말 줄임표를 함께 붙입니다. 시스템 전반적으로 컨트롤 버튼 타이틀에 말줄임표가 있으면 사람들은 추가적인 입력을 할 수 있는 시그널로 인식합니다. 예를 들어, 사파리설정의 자동 채우기 창에 있는 'the Edit' 버튼에는 타원이 포함되어 있는데, 이 버튼을 누르면 사람들이 자동 채우기 값을 수정할 수 있는 다른 보기가 열리기 때문입니다.

예를 들어 Safari 설정의 자동 채우기 창에 있는 편집 버튼에는 사람들이 자동 채우기 값을 수정할 수 있는 다른 보기가 열리기 때문에 타원이 포함되어 있습니다.

스프링 로드 활성화를 고려해보세요. 매직 트랙패드가 있는 시스템에서는 스프링 로드를 사용하여 선택한 항목을 끌어다 놓으면 선택한 항목을 떨어뜨리지 않고 버튼을 강제로 클릭(더 세게)할 수 있습니다. 강제로 클릭한 후에도 사용자는 항목을 계속 끌 수 있으며, 추가 작업을 수행할 수도 있습니다.

그라디언트 버튼 (Gradient buttons)

그라디언트 버튼은 화면과 관련된 버튼으로 표에서 열의 추가나 제거에 활용됩니다.

그라디언트 버튼은 텍스트가 아닌 기호 또는 인터페이스 아이콘이 포함되어 있으며 푸시 버튼, 토글 또는 팝업 버튼처럼 작동하도록 구성할 수 있습니다. 버튼은 관련 화면에 가까이에 위치하므로 버튼이 어떤 역할을 하는지 사용자가 인지할 수 있습니다. (일반적으로 활성화 된 창 안 또는 아래)

윈도우 프레임이 아닌 뷰 레벨에서 그라디언트 버튼을 사용합니다. 그라디언트 버튼은 툴바나 스테이터스 바에서 사용할 수 없습니다. 툴바에 버튼이 필요하다면 툴바 아이템을 사용하세요.

그라디언트 버튼에는 심볼을 사용하는 것을 권장합니다. SF Symbols는 유저 인터랙션에 대응하여 적절한 색깔을 자동으로 변경되는 광범위한 심볼들을 제공합니다.

그라디언트 버튼을 도입할 때 레이블을 사용하지 마세요. 그라디언트 버튼은 특정 뷰와 밀접하게 연결되어 있기 때문에, 텍스트가 없이도 목적이 명확히 전달될 수 있습니다.

개발자 지침은 NSBezelStyleSmallSquare를 참조하십시오.

도움말 버튼 (Help buttons)

도움 버튼은 뷰 창에서 등장하고 일부 앱의 도움말을 여는 버튼입니다.

도움말 버트는 일관적인 사이즈의 원형 버튼으로 물음표를 포함하고 있습니다. 도움말 작성에 대한 가이드 문서를 보려면 Offering help 를 참고하세요.

도움말을 노출하고자 한다면 시스템에서 제공하는 도움말 버튼을 사용하세요. 표준화된 도움 버튼은 사람들에게 익숙하기 때문에 이걸 누르면 도움을 받을 수 있다는 걸 알기 쉽습니다.

가능하다면 도움말 버튼을 눌렀을 때 현재의 콘텐츠와 관련이 있는 주제에 대해 보여주세요. 예를 들면, 도움말 버튼이 메일 설정 창에서 노출 된다면, 메일 유저 가이드를 보여주어 어떻게 설정을 변경할 수 있는지 보여주세요. 현재의 맥락에서 직접적으로 연결된 주제가 아니라면, 상위 레벨의 주제를 보여주세요.

하나의 창에 하나 이상의 도움말 버튼을 노출하지 않습니다. 하나의 맥락에서 여러 개의 도움말 버튼이 노출되면 사람들은 어떤 걸 눌러야 할지 고민하게 됩니다.

사람들이 찾기 쉬운 위치에 도움말 버튼을 위치시키세요. 아래의 가이드에 따라 포지션을 정해보세요.

윈도우 프레임이 아닌 뷰에서 도움말 버튼을 사용하세요. 예로써, 툴바나 스테이터스 바에서 도움말 버튼을 노출시키지 않습니다.

도움말 버튼에는 텍스트를 넣지 마세요. 사람들은 도움말 버튼을 보면 무엇인지 바로 인지할 수 있기 때문에 추가적인 텍스트로 설명할 필요가 없습니다.

이미지 버튼 (Image buttons)

이미지 버튼이란 뷰에서 이미지, 심볼, 인터페이스 아이콘으로 나타나는 버튼들입니다. 이미지 버튼은 푸쉬 버튼이나 토글, 팝업 버튼처럼 활용될 수 있습니다.

윈도우 프레임이 아닌 뷰에서 이미지 버튼을 사용하세요. 예로, 이미지 버튼을 툴바나 스테이터스 바에 넣지 마세요. 툴바에서 이미지를 활용해 버튼을 만들어야 한다면, 툴바의 아이템을 활용하세요. Toolbars 바로가기.

이미지와 버튼의 가장자리 사이에 10 픽셀 패딩을 포함하세요. 이미지 가장자리는 보이지 않아도 클릭 가능한 영역을 나타냅니다. 패딩 값을 포함시켜 이미지 객체를 정확하게 하지 않아도 눌려지도록 만들어야 합니다.

이미지 버튼에 시스템에서 제공하는 보더값, 즉 테두리를 주지 마세요.

이미지 버튼에 레이블을 포함하는 경우, 이미지 위에 올릴 것이 아니라 이미지 아래에 위치시킵니다. 해당 가이드의 경우 Labels 참고.

워치OS (watchOS)

스크린에 꽉차는 길이로 늘린 버튼을 더 선호합니다. 이런 풀위드 버튼은 가시성이 좋고 사람들이 탭하기에 편합니다. 만약에 두 개의 버튼이 동일한 수평선상에 놓여져야 한다면, 똑같은 높이로 만들고 각각의 버튼 콘텐츠에 이미지나 짧은 텍스트를 넣어주세요.

1-2줄짜리의 텍스트 레이블이 있는 버튼을 수직으로 정렬해야 한다면 버튼에 동일한 높이값을 사용하세요. 가능한 시각적 통일성을 위해서 동일한 높이를 버튼에 적용하는 것이 좋습니다.

시스템에서 정의한 코너값을 적용하세요. 시스템 코너값은 모든 앱에서 일관적인 비주얼 스타일을 유지할 수 있도록하며 버튼의 상호작용을 강화합니다. 애플 워치 시리즈 4를 포함해 그 이후로 출시된 모델들의 경우, 버튼이 스크롤 되는 위치에 있는지에 따라 코너값이 다릅니다.