brunch

매거진 디자이너 성장일기

라이킷 109 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 서한교 Dec 19. 2016

iOS 디자인 가이드라인 번역(3) - Graphics

Graphics

이 글은 iOS Human Interface Guidelines를 학습하기 위해 번역한 것이며, 개인적인 이해를 돕기 위한 의역이 포함되어 있습니다. 잘못된 부분은 댓글 남겨주시면 감사하겠습니다. :)

1.App Icon

모든 앱에는 App Store에서 주목을 끌 수 있는 아름답고 인상적인 아이콘이 필요합니다. 아이콘은 사용자에게 앱의 목적을 보여주고 의사소통하는 첫 번째 단계입니다.

단순하게 표현하세요. 앱의 본질을 파악하고 그 요소를 단순하고 특별한 모양으로 표현하세요. 세부 사항은 조심스럽게 추가해야 합니다. 아이콘의 내용이나 모양이 지나치게 복잡하면, 특히 작은 크기의 경우 세부 정보를 구분하기가 어려울 수 있습니다.

중요한 하나의 포인트를 제공하세요. 하나의 포인트로 디자인하면 즉각적으로 관심을 끌고 앱을 명확하게 식별할 수 있습니다.

인식할 수 있는 아이콘을 디자인하세요. 사용자에게 앱이 무엇을 나타내는지 분석하게 해서는 안됩니다. 예를 들어 메일 앱은 일반적으로 메일을 떠올릴 수 있는 봉투 이미지를 아이콘으로 사용합니다. 앱의 목적을 나타낼 수 있는 아름답고 추상적인 디자인에 시간을 투자하세요.

배경을 심플하게 하고 투명하게 하지 마세요. 아이콘이 불투명한지 확인하고 배경을 복잡하게 하지 마세요. 심플한 배경을 설정해도 근처에 있는 앱에 압도되지 않습니다. 당신은 아이콘 전체를 내용으로 가득 채울 필요가 없습니다.

로고가 필수적이거나 로고의 일부일 때만 텍스트를 사용하세요. 아이콘 아래에 앱 이름이 나타납니다. 앱 아이콘에 이름을 반복하거나 'Watch' 또는 'Play'와 같이 앱으로 수행할 작업을 사용자에게 알려주는 단어는 자제하세요. 앱 아이콘에 텍스트가 포함되어 있는 경우 앱에서 제공하는 실제 콘텐츠와 관련된 단어를 강조하세요.

사진, 스크린 샷 또는 인터페이스 요소를 포함하지 마세요. 사진의 세부 사항은 작은 크기에서 보기가 매우 어려울 수 있습니다. 스크린 샷은 앱 아이콘에 비해 너무 복잡하며, 일반적으로 앱의 목적을 전달하는 데 도움이 되지 않습니다. 아이콘의 인터페이스 요소는 오해의 소지가 있으며 혼동을 줍니다.

Apple 하드웨어 제품의 복제품을 사용하지 마세요. Apple 제품은 저작권이 있으며 앱의 아이콘이나 이미지로 복제할 수 없습니다.

인터페이스에 앱 아이콘을 위치시키지 마세요. 아이콘을 다양한 용도로 앱에 위치시키는 것은 혼란을 야기합니다. 대신에 아이콘의 색을 이용해서 인터페이스를 통합하세요.

다른 바탕 화면에 아이콘을 테스트하세요. 사용자가 선택할 홈 배경화면을 예측할 수 없으므로 밝거나 어두운 배경에서만 앱 아이콘을 테스트하면 안 됩니다. 다른 사진에서 아이콘이 어떻게 보이는지 확인하고, 디바이스가 움직일 때 배경이 달라지는 디바이스에서도 테스트하세요.

아이콘 모서리를 사각형으로 유지하세요. 아이콘 모서리를 자동으로 반올림하는 마스크가 적용됩니다.

App Icon Sizes

앱은 크고 작은 앱 아이콘을 모두 제공해야 합니다. 작은 아이콘은 홈 화면과 앱이 설치된 후 시스템 전체에서 사용됩니다. 큰 아이콘은 App Store에서 사용됩니다.

각각의 디바이스에 맞는 다양한 크기의 작은 아이콘을 제공하세요. 지원하는 모든 디바이스에서 앱 아이콘이 잘 보이는지 확인하세요.

작은 앱 아이콘과 큰 앱 아이콘은 같아야 합니다. 큰 아이콘은 풍부하고 자세할 수 있지만 따로 시각적 효과가 적용되는 것은 아니기 때문에, 작은 버전과 일치해야 합니다.

Spotlight and Settings Icons

모든 앱은 스포트라이트 검색에 노출되는 작은 아이콘을 제공해야 합니다. 또한 설정이 있는 앱은 기본 제공 설정 앱에 표시할 작은 아이콘을 제공해야 합니다. 두 아이콘 모두 앱을 명확하게 식별해야 하고, 이상적으로 앱 아이콘과 일치해야 합니다. 이 아이콘을 제공하지 않으면 iOS가 앱 아이콘을 축소하여 표시할 수 있습니다.

설정 아이콘에 오버레이 또는 경계선을 추가하지 마세요. iOS는 자동으로 모든 아이콘에 1 픽셀 획을 추가하여 흰색 배경에 잘 보이게 합니다.

TIP

앱이 맞춤 문서를 만드는 경우 iOS가 앱 아이콘을 사용하여 자동으로 문서 아이콘을 만들기 때문에 문서 아이콘을 디자인할 필요가 없습니다.

2.Custom Icons

앱에 시스템 아이콘으로 표시할 수 없는 작업이나 모드가 포함되어 있거나 시스템 아이콘이 앱의 스타일과 일치하지 않는 경우 자신의 아이콘을 만들 수 있습니다. 템플릿이라고도 불리는 사용자 정의 아이콘은 색상 정보를 삭제하고 마스크를 사용하여 탐색 막대, 탭 막대, 도구 모음 또는 홈 스크린에서 화면에 나타나는 모양을 만들 수 있습니다.

심플하게 인식할 수 있는 디자인을 만드세요. 세부 정보가 너무 많으면 아이콘이 제대로 표시되지 않거나 읽을 수 없게 될 수 있습니다. 대부분의 사용자가 올바르게 해석하고 긍정적으로 느낄 수 있도록 디자인하세요.

투명도, 안티 앨리어싱을 포함한 단색으로 아이콘을 디자인하고 드롭 쉐도우를 사용하지 마세요. iOS는 모든 색상 정보를 무시하므로 둘 이상의 채우기 색상을 사용할 필요가 없습니다. 투명도가 아이콘 모양을 정의하도록 허용하세요.

사용자 아이콘과 시스템 아이콘을 구별하세요. 아이콘이 시스템 제공 아이콘 중 하나와 쉽게 혼동되어서는 안 됩니다. 아이콘이 iOS 아이콘과 관련이 있는 것처럼 보이게 하려면 매우 가는 선을 그려야 합니다. 1pt 스트로크 (@ 2x 해상도의 경우 2px)는 대부분의 아이콘에서 잘 작동합니다.

아이콘의 일관성을 유지하세요. 사용자 정의 아이콘 또는 사용자 정의 및 시스템 아이콘을 사용할 경우, 앱의 모든 아이콘은 크기, 원근감 및 획 두께 측면에서 동일해야 합니다.

사용자 지정 탭 모음 아이콘의 두 가지 버전을 제공하세요. 선택된 상태와 선택되지 않은 상태 모두에 대한 아이콘을 제공하세요. 선택된 아이콘은 선택되지 않은 아이콘의 채워진 버전 일 때가 있지만이 디자인에 대한 변형을 요구하는 디자인도 있습니다. 예를 들어, Apple 응용 프로그램은 아이콘 내부를 반전시키고 선을 두껍게 하거나 낮추며 아이콘을 원과 같은 모양으로 묶습니다.

사용자 지정 탭 모음 아이콘에 텍스트를 사용하지 마세요. 텍스트를 표시해야 하는 경우 탭 아래에 제목을 표시하고 그에 따라 위치를 조정하세요.

아이콘에 대한 대체 텍스트 레이블을 제공하세요. 다른 텍스트 레이블은 화면 상에 보이지 않지만, VoiceOver는 화면 상에 무엇이 들리는지 음성으로 표현할 수 있어 시각 장애가 있는 사람들이 쉽게 탐색할 수 있습니다.

Custom Icon Sizes

3.Image Size and Resolution

iOS는 좌표 시스템을 사용하여 화면에 콘텐츠를 배치합니다. 이 좌표계는 지점의 측정값을 기반으로 하며 디스플레이의 픽셀에 매핑됩니다. 표준 해상도 화면에서 한 점 (1/72 인치)은 한 픽셀과 같습니다. 고해상도 화면의 픽셀 밀도가 높습니다. 동일한 물리적 공간에 더 많은 픽셀이 있기 때문에 점 당 더 많은 픽셀이 있습니다. 결과적으로, 고해상도 디스플레이는 더 많은 픽셀을 갖는 이미지를 필요로 합니다.

앱에서 지원하는 모든 기기에 대해 앱의 모든 아트웍에 고해상도 이미지를 제공해야 합니다. 장치에 따라 각 이미지의 픽셀 수에 특정 배율 인수를 곱하여 이를 수행합니다.

표준 해상도 이미지의 배율은 1.0이며 @1x 이미지라고 합니다. 고해상도 이미지의 배율은 2.0 또는 3.0이며 @2x 및 @3x 이미지라고 합니다. 표준 해상도 @1x 이미지(예 : 100x100 픽셀)가 있다고 가정해 보겠습니다. 이 이미지의 @2x 버전은 200 x 200 픽셀입니다. @3x 버전은 300 x 300px입니다.

4.Launch Screen

앱이 시작되면 즉시 실행 화면이 나타납니다. 시작 화면이 앱의 첫 번째 화면으로 신속하게 대체되어 앱이 빠르고 반응이 좋다는 인상을 줍니다. 런치 스크린은 예술적 표현의 기회가 아닙니다. 이는 출시가 빠르고 즉시 사용 준비가 된 상태에서 앱의 인지도를 높이기 위한 용도로만 사용됩니다. 모든 앱에서 시작 화면을 제공해야 합니다.

디바이스의 크기가 다양하기 때문에 시작 화면 크기도 다릅니다. 이를 수용하기 위해 실행 화면을 Xcode 스토리 보드로 제공하거나 앱에서 지원하는 장치의 정적 이미지로 제공할 수 있습니다. Xcode 스토리 보드를 사용하는 것이 좋습니다. 스토리 보드는 유연하고 적응력이 좋습니다. 하나의 스토리 보드를 사용하여 모든 시작 화면을 관리할 수 있습니다. 적응형 인터페이스 구현에 대한 내용은 자동 레이아웃 안내서를 참조하세요.

앱의 첫 화면과 거의 동일한 시작 화면을 디자인하세요. 앱이 실행을 마칠 때 다르게 보이는 요소를 포함하면 시작 화면과 앱의 첫 번째 화면 사이에 불쾌한 요소가 될 수 있습니다.

시작 화면에 텍스트를 포함하지 마세요. 시작 화면은 정적인 화면이므로 표시된 모든 텍스트는 지역별로 현지화되지 않습니다.

주의를 끌지 않는 시작화면. 사용자는 앱을 자주 전환할 가능성이 높으므로 앱을 실행할 때 주의를 끌지 않는 시작 화면을 디자인하세요.

광고하지 마세요. 런치 스크린은 브랜딩을 나타내는 곳이 아닙니다.