[HIG] Image views
앱에 이미지를 보여주는 이미지 뷰
본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.
Introduction
이미지 뷰(Image view)는 투명하거나 불투명한 배경에 단일 이미지(때에 따라서는 애니메이션 이미지 시퀀스)를 보여줍니다.
역자설명 : 이미지 뷰(Image view)란 앱에서 사진을 표시하기 위한 객체입니다.
이미지 뷰(Image view) 내에서 이미지를 확대, 축소, 크기조정을 하거나 특정 위치에 고정할 수 있고, 일반적으로 사용자와 상호 작용하는 요소가 없습니다.
Best Practices
단순히 이미지를 보여주기 위한 경우 이미지 뷰(image view)를 사용합니다. 가끔 이미지를 사용자와 상호작용하게 하고 싶을 때는, 이미지 뷰(image view)에 동작 버튼(button behaviors)을 추가하는 대신 시스템에서 제공하는 button을 사용해 이미지를 보여주는 방법을 고려해 보세요.
인터페이스에 아이콘을 표시하려면 이미지 뷰(image view) 대신 기호나 인터페이스 아이콘을 사용하는 것이 좋습니다. SF Symbols는 개발자가 다양한 색상과 선명도로 사용할 수 있도록 간편한 벡터 기반의 이미지 라이브러리를 제공합니다. 글리프 또는 템플릿 이미지라고도 하는 interface icon은 일반적으로 불투명한 픽셀이 색상을 받을 수 있는 비트맵 이미지입니다. 기호와 인터페이스 아이콘 모두 개발자가 선택한 강조 색상(accent color)을 사용할 수 있습니다.
Content
이미지 뷰(Image view)에는 PNG, JPEG 및 PDF와 같은 다양한 형식의 이미지 데이터가 포함될 수 있습니다. 자세한 내용은 Images를 확인해 주세요.
이미지에 위에 텍스트를 사용할 때 주의하세요. 이미지 위에 텍스트를 사용하면 이미지가 잘 보이지 않을뿐더러 텍스트의 가독성이 저하될 수 있습니다. 더 좋은 결과물을 위해 텍스트가 이미지와 잘 대비되는지 확인하고 텍스트 그림자 또는 배경 레이어를 추가하는 것처럼 텍스트를 두드러지게 하는 방법을 고려하세요.
애니메이션 시퀀스의 모든 이미지에 일정한 크기를 사용하세요. 뷰에 맞는 이미지 크기를 사전 설정하면 시스템에서 크기를 조정할 필요가 없습니다. 시스템에서 이미지의 크기를 조정해야 하는 경우에 이미지의 크기와 형태를 맞추면 더 좋은 작업물을 만들 수 있습니다.
Platform considerations
No additional considerations for iOS or iPadOS.
macOS
앱에 편집할 수 있는 이미지 뷰(image view)가 필요한 경우 image well을 사용하세요. Image well은 복사, 붙여 넣기, 끌기 및 삭제 키를 사용하여 내용을 지울 수 있는 이미지 뷰(image view)입니다.
이미지 뷰(image view) 대신 이미지 버튼(image button)을 사용하여 클릭 가능한 이미지를 만드세요. 이미지 버튼(image button)은 이미지 또는 아이콘으로 보이며, 클릭하는 즉시 앱과 관련된 작업을 시작합니다.
tvOS
많은 TVOS 이미지는 투명도를 가진 여러 레이어가 합쳐져 있어 깊이감을 줍니다. 자세한 내용은 Layered Images를 확인해 주세요.
watchOS
가능한 SwiftUI를 사용하여 애니메이션을 만드세요. 필요한 경우 WatchKit을 사용하여 이미지 요소 내에서 이미지 시퀀스를 애니메이션화 할 수 있습니다. 개발자 가이드라인은 WKImageAnimatable를 확인해 주세요.
