brunch

You can make anything
by writing

C.S.Lewis

by Lawn Apr 10. 2024

[HIG] Activity rings

진행상황을 보여주는 액티비티 링

본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.

Introduction

활동 링(acticity ring)은 이동, 운동, 일어서기 목표에 대한 개인의 일일 진행 상황을 보여줍니다.

watchOS에서 활동 링 요소에는 활동 앱이 제공하는 색상과 의미와 일치하는 세 개의 링이 포함됩니다. iOS에서 활동 링 요소에는 활동의 근사치를 나타내는 하나의 링을 보여주거나, Apple Watch가 페어링 된 경우 세 개의 링을 모두 보여줍니다.

Best practices

앱의 목적과 관련이 있는 경우 활동 링(activity ring)을 표시합니다. 앱이 건강 또는 피트니스와 관련이 있는 경우, 특히 HealthKit에 정보를 제공하는 경우 사람들은 인터페이스에서 활동 링을 통해 현재 상태를 알기 원합니다. 예를 들어, 활동 링을 중심으로 운동 또는 건강에 관련된 정보를 포함하는 경우 사람들이 진행 상황을 확인할 수 있도록 화면에 해당 요소를 함께 보여주는 것을 고려해 보세요. 마찬가지로, 운동이 끝날 때 표시되는 요약 화면을 제공하는 경우 활동 링을 통해 사람들이 일일 목표에 대한 진행 상황을 확인할 수 있도록 도울 수 있습니다.

활동 링(activity ring)은 이동, 운동 및 일어서기 정보를 표시하는 용도로만 사용하세요. 활동 링은 특정 활동의 진행 상황을 일관되게 보여줄 수 있도록 디자인되었습니다. 다른 목적으로 활동 링을 수정하려고 시도하지 마십시오. 활동 링을 사용하여 다른 유형의 데이터를 보여주지 않는 것이 좋습니다.

활동 링(activity ring)을 사용하여 한 사람의 진행 상황을 표시하세요. 두 명 이상의 데이터를 표시하기 위해 활동 링을 사용하지 말고 레이블, 사진 또는 아바타를 사용하여 누구의 진행 상황을 표시하고 있는지 명확하게 보여주는 것이 좋습니다.

활동 링(activity ring)을 보여주는 위치에 관계없이 항상 활동 링의 시각적 스타일을 동일하게 유지하세요. 일관된 경험을 제공하려면 다음 가이드라인을 따르세요:

필터를 사용하거나 불투명도를 수정하는 등 링의 색상을 변경하지 마세요.

항상 검은색 배경에 활동 링을 표시하세요.

링과 배경을 원으로 둘러싸는 디자인이 좋습니다. 이렇게 하려면 원형 마스크를 적용하는 대신 둘러싸는 보기의 모서리 반경을 조정합니다.

가장 바깥쪽 링 주위에 검은색 배경이 계속 보이도록 합니다. 필요한 경우 링의 바깥쪽 가장자리에 얇은 검은색 선을 추가하세요. 그러데이션, 그림자 또는 기타 시각 효과를 사용하지 않는 것이 좋습니다.

항상 링의 크기를 적절히 조절하여 링이 끊어져서 보이거나 제자리에 위치하지 않은 것처럼 보이지 않도록 하는 것이 좋습니다.

필요한 경우 주변 인터페이스가 링과 조화를 이루도록 디자인하세요. 링을 주변 인터페이스와 조화되도록 변경하는 것은 좋지 않습니다.

활동 링(activity ring)과 직접 연결된 레이블 또는 값을 보여주려면 해당 링과 동일한 색상을 사용하세요. 이동, 운동, 일어서기를 보여주거나 각 링에 대한 사용자의 현재 상태 및 목푯 값을 보여주려면 RGB 값으로 지정된 다음 색상을 사용하세요.

활동 링(activity ring)의 여백(margin)을 유지하세요. 활동 링의 각 요소에는 최소 외부 여백이 포함되어야 합니다. 다른 요소가 활동 링 데이터가 표시되는 것을 방해하거나 침범하지 않도록 하세요.

다른 링과 유사한 요소와 활동 링(activity ring)을 구분하는 것이 좋습니다. 서로 다른 링 스타일을 혼합하면 인터페이스가 시각적으로 혼란스러워질 수 있습니다. 다른 링을 함께 보여줘야 하는 경우 패딩, 선 또는 레이블을 사용하여 활동 링과 명확하게 구분해 주세요. 색상과 눈금도 시각적 구분을 제공하는 데 도움이 될 수 있습니다.

활동 앱에서 보내는 것과 동일한 정보를 보여주는 알림을 중복해서 보내지 마세요. 이미 시스템에서 이동, 운동 및 서 있기 진행률에 대한 정보를 사용자들에게 제공하고 있으므로 앱에서 중복된 알림을 받으면 사용자들이 혼란스러워할 수 있습니다. 또한 앱의 알림에 활동 링의 요소를 포함시키지 마세요. 알림에서 활동 진행 상황을 참고하는 것은 좋지만, 시스템에서 제공하는 것과 동일한 정보를 보여주지 않는 앱 고유의 방식으로 진행 상황을 보여주는 것이 좋습니다.

활동 링(activity ring)을 장식용으로 사용하지 마세요. 활동 링은 사람들에게 정보를 제공하는 것이지 앱의 디자인을 위한 요소가 아닙니다. 레이블이나 배경 그래픽에 활동 링을 표시하지 마세요.

활동 링(activity ring)을 브랜딩에 사용하지 마세요. 활동 링은 앱에서 활동 진행률을 표시하는 용도로만 사용하세요. 앱의 아이콘이나 마케팅 자료에 활동 링을 사용하지 마세요.

Platform considerations

No additional considerations for iPadOS or watchOS. Not supported in macOS, tvOS, or visionOS.

iOS

활동 링(activity ring)은 HKActivityRingView가 있는 iOS에서 사용할 수 있습니다. 활동 링의 각 요소의 스타일은 Apple Watch가 페어링 되었는지 여부에 따라 자동으로 변경됩니다.

Apple Watch가 페어링 된 상태에서 iOS는 3개의 활동 링을 모두 보여줍니다.

페어링 된 Apple Watch가 없으면 iOS는 다른 앱의 걸음 수 및 운동 정보를 기반으로 사람의 활동에 대한 근사치를 나타내는 Move 링만 보여줍니다.

iOS는 Apple Watch의 페어링 여부에 관계없이 활동 링을 보여주므로, 두 가지 스타일이 인터페이스에 적용됩니다. 예를 들어, 피트니스의 활동 링은 Apple Watch를 페어링 한 상태에서 운동할 때는 3개의 링이 표시되고, Apple Watch 없이 운동할 때는 이동 링만 표시됩니다.