iOS Button

iOS Button (버튼)

버튼은 단일 동작이나 이벤트를 트리거하는 컴포넌트예요. iOS용 Fluent 버튼의 유형, 레이아웃, 접근성 원칙을 정리했어요.

출처: 문서

버튼은 단일 동작이나 이벤트를 트리거해요.

응답 제출, 변경 확정, 다음 단계로 이동 같은 중요한 동작에는 버튼을 사용하세요. 다른 곳으로 이동해야 한다면 링크를 사용하는 게 좋아요.

Button

표준 버튼은 페이지 본문 콘텐츠와 같은 고도를 유지하며 단일 동작이나 이벤트를 시작해요.

Floating action button (플로팅 액션 버튼)

플로팅 액션 버튼(FAB)은 기본 동작을 강조해요. 다른 모든 레이아웃 요소보다 높이 떠 있고, 화면 오른쪽 하단에 지속적으로 위치해요.

Follow native patterns (네이티브 패턴 따르기)

iOS에서 Back 버튼은 항상 내비게이션 바의 왼쪽 상단에 위치해요. Done 또는 Save 버튼은 항상 오른쪽 상단에 위치해요. Cancel 버튼은 그것이 유일한 동작이라면 오른쪽 상단에 위치해요. Done이나 Save와 함께 쓰인다면 왼쪽 상단에 배치하세요.

Make primary buttons stand out (기본 버튼을 두드러지게)

가장 중요한 동작을 위해 레이아웃에 기본 버튼 하나만 사용하고, 항상 다른 동작의 위쪽이나 왼쪽 같은 두드러진 위치에 배치하세요. 동일한 우선순위의 버튼이 둘 이상 있다면, 복잡한 레이아웃을 피하기 위해 모든 버튼이 중성(neutral) 배경을 가져야 해요.

Avoid primary buttons in lists and modals (목록과 모달에서 기본 버튼 피하기)

기본 버튼은 로그인이나 업셀처럼 전체 UI가 동작을 요구하는 히어로 시나리오에 사용해야 해요. 정보가 많은 시나리오에서 사용하면 경험이 집중력을 잃고, 기본 버튼이 화면의 다른 정보에서 중요도를 빼앗아가요.

버튼 그룹은 서로 구분될 수 있도록 주변에 충분한 공간이 있는지 확인하세요. 특히 중성 배경의 버튼에서 중요해요.

다음에 일어날 일을 반영하는 능동적인 언어를 사용하세요. 간결하게 하세요. 보통 단일 동사가 가장 좋지만, 명확성을 높인다면 명사를 포함하세요.