brunch

You can make anything
by writing

C.S.Lewis

by Lawn Feb 17. 2023

[HIG] Boxes

시각적으로 구분된 그룹을 만드는 박스

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

Introduction

박스(box)는 논리적으로 연관된 정보와 컴포넌트를 시각적으로 구분된 그룹으로 만듭니다.

기본적으로는 박스(box)의 내용을 인터페이스의 다른 요소들과 구분하기 위해 시각적으로 구분되는 테두리 또는 배경색을 사용합니다. 박스(box0에는 제목을 포함할 수도 있습니다.

역자 설명 : Box란 아래와 같이 배경과 구분되는 레이아웃의 종류를 말합니다.

Best Practices

뷰에 비해 박스(box)의 상대적 크기를 작게 구성하는 것이 좋습니다. 박스(box)의 크기가 뷰의 크기와 비슷해질수록 각각 그룹화된 콘텐츠의 내용이 잘 전달되지 않을 수 있고, 다른 여러 콘텐츠로 인해 화면이 복잡해질 수 있습니다.

박스(box) 내에서 추가적으로 콘텐츠를 그룹화하려면 여백(padding)과 정렬(alignment)을 사용하는 것이 좋습니다. 박스(box)의 테두리는 고유한 시각적 요소입니다. 하위 그룹을 그룹화하기 위해 Box를 추가하면 인터페이스가 복잡해지거나 부자연스러울 수 있습니다.

Content

사람들이 내용을 명확하게 이해하는데 도움이 된다면 박스(box)에 소개 제목을 제공하세요. 박스(box)를 사용하면 사람들이 박스(box) 내부의 콘텐츠가 서로 연관 있다는 것을 보여줄 수 있지만, 소개 제목을 통해 사람들의 이해를 도울 수 있다면, 자세하게 설명해 주는 것이 좋을 수 있습니다. 또한 VoiceOver 사용자가 박스(box) 내부의 콘텐츠를 이해하는 데 도움이 됩니다.

제목이 필요하면 내용을 설명하는 간단한 문구를 쓰세요. 문장 유형의 대문자를 사용합니다. 제목에 콜론을 추가하는 설정 창에서 박스(box)를 사용하지 않는 한 구두점을 사용하지 마세요.