Buttons

pcsoyeon·2021년 11월 9일
0

Articles

목록 보기
25/32

Buttons

Buttons - Sign in with Apple - Human Interface Guidelines - Apple Developer

Sign in with Apple buttons
Apple은 사용자들이 계정을 만들고 로그인 할 수 있는 애플 로그인 버튼을 제공하고 있다. 필요한 경우 사용자 지정 단추를 만들어서 Apple 로그인을 제공할 수 있다.

Apple은 로그인 버튼을 눈에 띄게 표시한다.
→ 다른 로그인 버튼보다 작지 않게 만든다.
→ 그리고 버튼을 보기 위해 스크롤 하는 것을 막는다. (한눈에 볼 수 있도록 한다.)

Using the System-Provided Buttons

시스템에서 제공하는 API를 활용해 Apple 로그인 버튼을 만들게 되었을 때 다음과 같은 이점이 있다.

  1. Apple이 승인한 외관을 갖고 있는 버튼을 사용할 수 있다.
  2. 스타일을 변경할 때 버튼이 안에 있는 컨텐츠의 이상적인 비율을 유지하도록 보장한다.
  3. 장치에서 지정한 특정한 언어로 버튼의 제목을 자동으로 변경할 수 있다.
  4. UI (iOS, macOS, and web) 스타일에 맞게 버튼의 모서리 반지름 구성을 지원한다.
  5. Voice Over가 버튼을 설명할 수 있도록 대체 텍스트 레이블을 시스템에서 제공한다.

개발자 문서를 통해 ASAuthorizationAppleIDButton (iOS, macOS, 그리고 tvOS), WKInterfaceAuthorizationAppleIDButton (watchOS), 그리고 Displaying and Configuring Sign in with Apple Buttons (web)를 확인할 수 있다.

Button Title

시스템은 여러 가지 유형의 버튼 제목을 제공한다. 콘텐츠가 실행되는 플랫폼에 따라 로그인 환경의 용어에 맞는 변형을 선택하고 인터페이스 전체에서 일관되게 사용하면 된다.

iOS, macOC, tvOS, web에서 다음과 같이 버튼 제목을 설정할 수 있다.

watchOS에서는 다음과 같이 애플 로그인을 설정할 수 있다.

플랫폼에 따라서 시스템은 애플 로그인 버튼의 모습에 대해 3가지 옵션(white, with outline, black)을 제공한다.

white

흰색 스타일은 모든 플랫폼과 웹에서 사용할 수 있다. 충분한 대비를 제공하는 어두운 배경에서 흰색 스타일을 제공해야 한다.

white with outline

흰색 윤곽의 스타일은 iOS, macOS 및 웹에서 사용할 수 있다. 흰색 또는 밝은 색 배경에 이 스타일을 사용하면된다. 검은색 윤곽선은 시각적 혼란을 더할 수 있으므로 어둡거나 포화 상태인 배경에는 이 스타일을 사용하면 안된다. 대신 흰색 스타일을 사용하여 어두운 배경과 대비되어야 한다.

black

검정 스타일은 모든 플랫폼 그리고 웹에서 사용할 수 있다. 충분한 대비를 줄 수 있는 흰색 또는 밝은 색 배경에서 해당 스타일을 사용하고 검정색 또는 어두운 색 배경에는 사용하는 것을 지양한다.

다른 플랫폼과 다르게 watchOS의 경우 완전 검정 색으로 채우지 않는다. 애플 워치의 배경색이 완전한 검정색이기 때문이다. 애플 워치의 배경 색과의 대조를 위해 watchOS 버튼은 시스템 다크 그레이 색을 사용한다.

Button Size and Corner Radius

corner radius를 앱의 다른 버튼 모양과 일치하도록 조정한다. 기본적으로 Apple 로그인 버튼에는 둥근 모서리가 있다.

각 플랫폼에서는 모서리 반경을 변경해서 사각 모서리가 있는 단추나 알약 모양의 단추를 만들 수 있다.

iOS, macOS 및 웹에서 버튼 주변의 최소 버튼 크기와 여백을 유지해야한다. 버튼 제목은 locale에 따라서 길이가 다를 수 있다.

Creating a Custom Sign in with Apple Button

만약 인터페이스의 상황에 따라서 각 플랫폼에 맞게 애플 로그인 커스텀 버튼을 만들 수 있다.

예를 들어, 여러 로그인 버튼에 로고를 정렬하거나 로고만 표시하는 버튼을 사용하거나 UI에 맞게 버튼의 글꼴, 여백, 배경 모양을 조정할 수 있다.

사용자로 하여금 한눈에 애플 로그인 버튼임을 인지할 수 있도록 만들어야 한다. 만약 standard와 너무 다르다면, 사용자들은 계정을 설정하거나 로그인하는 과정에서 불편함을 느낄 것이다. 애플 로그인 버튼에 대한 평가 역시 사용자 평가에 포함되는 항목이다.

Apple Design Resources는 로고만 표시하거나 로고 및 텍스트를 표시하는 Apple로 로그인 버튼을 만드는 데 사용할 수 있는 다운로드 가능한 Apple 로고 아트워크를 제공한다. 로고 파일은 PNG, SVG 및 PDF 형식으로 사용할 수 있으며 두 버튼 유형 모두 흑백 버전이 포함되어 있다. 다음은 검은색과 흰색 로고 전용 아트 파일의 예이며, 각각 표시되도록 배경이 추가 되어 있다.

다운로드 가능한 모든 로고 파일에는 버튼에 로고의 위치를 쉽게 지정할 수 있는 padding이 포함되어 있다. (로고의 정확한 비율을 보장하는 가로/세로 padding이 포함되어 있다.) 로고의 비율을 올바르게 유지하는 padding 외에도 텍스트가 있는 버튼의 로고 파일에는 버튼 앞의 가장 자리 및 제목 텍스트 사이에 최소 여백을 제공하는 수평 padding도 포함된다.

Apple Design Resources에서 다운로드 한 로고 아트워크만 사용하고 사용자 지정의 로고는 만들면 안된다. 사용자 지정 로그인 버튼을 만들 때 가능한 파일을 사용하려면 다음과 같은 규칙을 따라야 한다.

  • 로고 자체를 버튼으로 사용하면 안된다.
  • 로고 파일의 높이를 버튼 높이와 일치해야 한다.
  • 로고 파일을 자르면 안된다.
  • 세로 padding을 추가하면 안된다.

사용자 지정 버튼이 시스템에서 제공하는 애플 로그인 버튼과 시각적으로 일치하도록 하기 위해서는 다음을 주의해야 한다.

  • 제목 : Sign in with AppleSign up with Apple, or Continue with Apple. 만 사용해야 한다.
  • 일반적인 모양 : 로고와 텍스트를 결합한 버튼은 항상 직사각형이며 로고 전용 버튼은 원형 또는 직사각형 모두 가능하다.
  • 로고 및 제목 색상 : 버튼 안에 있는 두 항목 모두 검은색 또는 흰색이어야하며 사용자 지정 색상을 사용하면 안된다.

앱 설계와 조정을 위해 다음을 변경할 수 있다.

  • 제목 글꼴 : font의 weight 또는 size를 조정할 수 있다.
  • 제목 케이스 : 제목에 있는 모든 글자를 대문자로 쓸 수 있다.
  • 배경 모양 : 전체적인 색상은 검은색 또는 흰색으로 유지, 필요한 경우에 버튼이 인터페이스와 조화를 이루도록 미묘한 질감 또는 그라데이션이 포함될 수 있다.
  • 버튼 corner radius : UI의 다른 버튼과 일치하는 radius 값을 사용할 수 있다.
  • 버튼의 베젤과 그림자 : 예를 들어 선분을 사용하는 경우 베젤을 강조하거나 그림자를 추가할 수 있다.

Custom Buttons with a Logo and Text

Choose the format of the logo file based on the height of your button.

SVG와 PDF모두 백터 기반의 형태이기 때문에 버튼의 높이를 지정할 수 있다. 만약 PNG 파일을 사용하게 된다면 iOS 기본 버튼 높이인 버튼 안에서는 오직 44points의 높이를 사용해야 한다. 로고는 small, medium, large 사이즈 모두 가능하다.

Prefer the system font for the title — that is, Sign in with Apple, Sign up with Apple, or Continue with Apple.

어떤 폰트를 사용했는지와 무관하게 버튼의 제목과 높이는 시스템에서 사용하는 것과 같은 비율을 가져야 한다.

In general, preserve the capitalization style of the title.

기본적으로 버튼 제목의 모든 변형은 첫번째 단어와 Apple을 대문자로 쓴다. 다른 모든 문자는 소문자이다.

Keep the title and logo vertically aligned within the button.

이렇게 하려면 제목을 단추 중앙에 수직으로 정렬한 다음 로고 이미지를 추가하여 높이가 버튼 높이와 일치하는지 확인해야 한다. 로고 이미지에는 상단 및 하단 padding이 포함되므로 버튼의 제목을 수직으로 정렬하여 제목, 로고 및 버튼이 정렬된 상태를 유지해야 한다.

Inset the logo if necessary.

Apple 로고를 다른 인증 로고와 수평으로 정렬해야 하는 경우 로고와 단추의 앞쪽 가장자리 사이의 간격을 조정할 수 있다.

Maintain a minimum margin between the title and the right edge of the button.

여백은 버튼 폭의 최소 8%를 측정해야 한다.

Maintain the minimum button size and margin around the button.

버튼 제목은 locale에 따라 길이가 다를 수 있다.

Custom Logo-Only Buttons

Choose the format of the logo file based on the size of your button.

로고 전용 버튼의 다운로드 가능한 아트워크는 SVG, PDF 및 PNG 형식으로 제공된다. 모든 크기의 버튼에 벡터 기반 SVG 및 PDF 형식을 사용하면 된다. 44x44 pt 크기의 버튼에만 PNG 형식을 사용하면 된다.

Don’t add horizontal padding to a logo-only image.

애플로 로그인하는 로고 전용 버튼은 항상 1:1의 가로 세로 비율을 가지며 아트워크는 이미 모든 면에 올바른 padding을 포함하고 있다.

Use a mask to change the default square shape of the logo-only image.

예를 들어 원형 또는 둥근 직사각형 모양을 사용하여 로고 전용 로그인 버튼을 모두 표시할 수 있다. 내장된 패딩을 줄이거나 로고를 단독으로 사용하기 위해 애플이 제공한 아트워크를 자르지 말고 추가 패딩을 포함하면 안된다.

Maintain a minimum margin around the button.

여백은 버튼 높이의 1/10이상이어야 한다.

profile
Slowly But Surely

0개의 댓글