brunch

매거진 디자이너 성장일기

라이킷 144 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 서한교 Dec 09. 2016

iOS 디자인 가이드라인 번역(2) - Visual

Visual Design

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

1.Animation

사용자와 콘텐츠는 iOS에서 구현된 아름다운 애니메이션을 통해 화면 상에 시각적으로 연결되어 있습니다. 애니메이션을 적절히 사용하면, 상태를 전달하고, 피드백을 받으며, 조작감을 높이고, 사용자가 행동의 결과를 시각적으로 받아들이는데 도움이 됩니다.

애니메이션 그리고 모션 효과를 현명하게 사용하세요. 애니메이션만을 사용하기 위해 애니메이션을 사용하지 마세요. 특히 몰입감을 제공하지 못하는 앱에서 지나치거나 불필요한 애니메이션을 사용하면 사용자는 흐름이 끊기거나 산만해지는 느낌을 받을 수 있습니다. iOS는 parallax effect와 같은 동작 효과를 사용하여 홈 화면 및 다른 영역에서 깊이를 알 수 있도록 만듭니다. 이러한 효과는 이해와 즐거움을 증가시킬 수 있지만 과용하면 앱이 혼란스럽고 통제하기 어려워질 수 있습니다. 모션 효과를 구현하는 경우, 항상 결과가 제대로 작동하는지 테스트하세요.

현실주의와 신뢰성을 위해 노력하세요. 사람들은 예술적인 것은 허가하고 받아들이는 경향이 있지만 애니메이션의 동작이 의미 없거나 물리적 규칙을 어기고 있는 것처럼 보이면 혼란에 빠질 수 있습니다. 예를 들어, 누군가가 화면의 상단에서 아래로 밀어서 화면을 드러내면, 화면을 위로 밀어서 닫을 수 있어야 합니다.

일관된 애니메이션을 사용하세요. 친숙하고 재미있는 경험으로 사용자의 참여를 유도합니다. iOS에서 사용되는 절묘한 애니메이션 (예 : 부드러운 전환, 기기 방향의 유동적인 변경 및 물리 기반 스크롤)에 익숙합니다. 게임과 같이 몰입감을 제공하는 경우가 아니면, 맞춤 애니메이션은 내장된 애니메이션과 비슷해야 합니다.

애니메이션을 선택적으로 만듭니다. 접근성 기본 설정에서 동작 감소 옵션을 사용할 수 있게 설정하면 응용 프로그램 애니메이션은 최소화되거나 제거되야합니다.

2.Branding

성공적인 브랜딩은 앱에 브랜드 자산을 추가하는 것 이상의 가치가 있습니다. 훌륭한 응용 프로그램은 글꼴, 색상 및 이미지를 통해 고유한 브랜드 정체성을 표현합니다. 앱에서 사용자가 context를 알 수 있을 만큼의 충분한 브랜딩을 제공하되 사용자가 혼란스럽지 않아야 합니다.

세련되고 자연스럽게 브랜딩을 통합하세요. 사람들은 즐겁게 정보를 얻거나 일을 끝내기 위해 앱을 사용합니다. 앱의 디자인과 브랜딩을 통합하는 것은 최고의 경험을 제공합니다. 인터페이스 전체에서 앱 아이콘의 색상을 사용하면 앱에 context를 제공할 수 있습니다.

브랜딩 때문에 훌륭한 앱 디자인을 망치지 마세요. 직관적이고 탐색하기 쉽고, 사용하기 쉽고, 콘텐츠에 집중해야 합니다. 앱이 다른 플랫폼에서 사용 가능하더라도 일관된 브랜딩에 너무 집중하여 디자인을 희석시키지 마세요.

브랜딩보다는 콘텐츠에 집중하세요. 의미 없는 브랜드 자산을 상단 바에 고정시키는 것은 콘텐츠의 공간이 줄어든다는 것을 의미합니다. 대신 브랜딩을 구현하는 데 방해가 되지 않는 방법을 고려해보세요.

앱 전체에 로고를 표시하려는 유혹에 빠지면 안 됩니다. 문맥을 제공하는 데 필요한 경우가 아니면 앱 전체에 로고를 표시하지 않습니다. 이것은 제목이 더 도움이 되는 탐색 모음에서 특히 중요합니다.

Apple의 상표 지침을 준수하세요. Apple 상표는 앱 이름이나 이미지에 나타나서는 안됩니다. Apple 상표 사용 및 Apple 상표 사용 지침을 참조하세요.

3. Color

iOS에서 색상은 상호 작용을 나타내며 활력을 주고 시각적 연속성을 제공합니다. 밝은 색상& 어두운 색상을 개별적으로 또는 조합하여 잘 어울리는 애플리케이션 색상을 선택할 때 시스템의 색상 구성표를 참조하세요.

앱 전체에서 보색을 사용하세요. 앱의 색상은 어울리지 않거나 산만하지 않게 잘 어우러져야 합니다.

일반적으로 앱 로고와 조정되는 제한된 색상 팔레트를 선택하세요. 색상의 절묘한 사용은 브랜드 홍보에 좋은 방법입니다.

앱 전체에서 상호 작용을 나타 내기 위해 중요 색상을 선택하는 것이 좋습니다. Notes에서 대화 형 요소는 노란색입니다. 캘린더에서 상호 작용 요소는 빨간색입니다. 상호 작용을 나타내는 중요 색상을 정의하는 경우 다른 색상이 해당 색상과 충돌하지 않는지 확인하세요.

활성화 및 비활성화 요소에 동일한 색상을 사용하지 마세요. 활성화 및 비활성화 요소가 같은 색을 띠면 사용자가 탭 할 위치를 찾기 어렵습니다.

아트워크(배경)와 투명도가 컬러에 어떤 영향을 미치는지 고려하세요. 아트워크(배경)의 변형은 시각적 연속성과 인터페이스 요소를 유지하면서 주변 색을 변경하곤 합니다. 예를 들어 지도는 지도 모드를 사용할 때 밝은 색으로 표시하지만 위성 모드가 활성화되면 어두운 색으로 전환합니다. 반투명 요소 뒤에 배치할 경우 색상이 다르게 나타날 수도 있습니다.

이미지에 Color Profile을 적용하세요. iOS의 기본 Color Space(아래 이미지)는 표준 RGB (sRGB)입니다. 색상이 Color Spcae와 정확하게 일치하도록 하려면 이미지에 포함된 Color Profile을 확인하세요.

*각각의 색상 체계나 장비에 따른 색상에 차이를 기술하고 교정해주는 역할이 프로파일의 존재 이유입니다.

color space

호환되는 장치에서 시각적 경험을 향상하려면 와이드 컬러를 사용하세요. 와이드 컬러 디스플레이는 sRGB보다 풍부하고 포화된 색상을 생성할 수 있는 P3 Color Space를 지원합니다. 생생한 컬러가 요구되는 경우 디스플레이 당 P3 컬러 프로파일을 픽셀 당 16 비트 (채널당)로 사용하고 .png 형식으로 내 보냅니다.

TIP
와이드 컬러 디스플레이가 장착된 Mac에서는 시스템 색상 선택기를 사용하여 P3 색상을 선택 및 미리 보고 sRGB 색상과 비교할 수 있습니다.

다양한 조명 환경에서 앱의 색상을 테스트하세요. 조명은 실내 분위기, 시간대, 날씨 등을 기준으로 실내 및 실외에 따라 크게 다릅니다. 앱을 실제 환경에서 사용하면 컴퓨터에서 보이는 색상과 다르게 보일 수 있습니다. 화창한 날의 야외를 비롯한 다양한 조명 환경에서 항상 앱을 미리 보고 색상이 어떻게 표시되는지 확인하세요. 필요한 경우 색상을 조정하여 대부분의 사용 사례에서 최상의 보기 환경을 제공하세요.

True Tone 디스플레이가 색상에 어떤 영향을 주는지 고려하세요. True Tone 디스플레이는 주변 광센서를 사용하여 디스플레이의 White Point를 자동으로 조정하여 현재 조명 환경에 맞춥니다. Reading, Photo, Video 및 Game에 주로 초점을 맞추는 앱은 White Point가 적응되는 스타일을 지정하여 이 효과를 강화하거나 약화시킬 수 있습니다. 구현에 대한 자세한 내용은 Information Property List Key Reference를 참조하세요.

색맹인 사용자와 다른 문화에서 색을 어떻게 인지하는지 알고 있어야 합니다. 사람들은 색상을 다르게 봅니다. 예를 들어 많은 색맹인 사람들은 빨간색과 녹색 또는 파란색과 주황색을 구별하기가 어렵습니다. 두 가지 상태 또는 값을 구별하는 유일한 방법으로 이러한 색상 조합을 사용하지 마세요. 예를 들어 빨간색 및 녹색 원을 사용하여 오프라인 및 온라인을 나타내는 대신 빨간색 사각형과 녹색 원을 사용하세요. 일부 이미지 편집 소프트웨어에는 색맹을 증명할 수 있는 도구가 포함되어 있습니다. 또한 다른 국가 및 문화권에서 귀하의 색 사용을 어떻게 인식할 수 있는지 고려하세요. 일부 문화권에서는 적색이 위험을 전달하는 데 사용되고 다른 일부 문화권에서는 적색이 긍정적인 의미로 사용됩니다. 앱의 색상이 적절한 메시지를 전송하는지 확인하세요.

충분한 색 대비 비율을 사용하세요. 앱의 대비가 충분하지 않으면 읽기 어려운 콘텐츠가 됩니다. 예를 들어, 아이콘과 텍스트가 배경과 섞여있을 수 있습니다. 온라인 색상 대비 계산기를 사용하면 앱의 색상 대비를 정확하게 분석하여 최적의 표준을 충족하는지 확인할 수 있습니다. 최소 4.5 : 1의 명암비를 얻어야 하지만, 7 : 1이 더 엄격한 액세스 가능성 표준을 충족하므로 더 선호됩니다.

4. Layout

사용자는 일반적으로 좋아하는 앱을 모든 기기에서 모든 방향으로 사용하길 원합니다. iOS에서 인터페이스 요소와 레이아웃은 iPad에서 멀티 태스킹, 분할보기 및 화면 회전 시 다른 장치에서 모양과 크기를 자동으로 변경하도록 구성할 수 있습니다.

콘텍스트 변경 중에 현재 내용에 초점을 유지합니다. 콘텐츠가 최우선 순위입니다. 환경이 바뀔 때 현재 화면이 아닌 곳으로 초점을 변경하면 혼란을 느끼며 사용자가 앱을 제어할 수 없는 것처럼 느낄 수 있습니다.

기본크기인 주요한 콘텐츠가 명확하게 보여야 합니다. 사용자가 사이즈 변경을 선택하지 않는 한 중요한 텍스트를 읽을 때 가로로 스크롤하거나 이미지를 확대하게 해서는 안됩니다.

앱 전체에서 일관된 모양을 유지합니다. 일반적으로, 유사한 기능을 가진 요소는 비슷하게 보입니다.

중요성을 나타내기 위해 시각적 무게와 균형을 사용하세요. 큰 아이템은 작은 아이템보다 눈에 잘 보이고 탭 하기가 더 쉽습니다. 이 점은 키친이나 체육관과 같이 산만한 환경에서 앱을 사용할 때 특히 중요합니다. 일반적으로 주요 항목은 화면의 위쪽 절반에 배치하고 - 왼쪽에서 오른쪽 방향으로 맥락을 읽기 때문에 - 화면 왼쪽에 배치합니다.

정렬을 사용하여 검색을 쉽게 하고 조직 및 계층 구조를 알립니다. 정렬을 사용하면 앱을 깔끔하고 체계적으로 보이게 하고 스크롤하는 동안 사람들이 집중할 수 있게 도와주며 정보를 더 쉽게 찾을 수 있습니다. 들여 쓰기 및 정렬은 그룹 콘텐츠의 관련성을 나타낼 수도 있습니다.

무의미한 레이아웃 변경은 피하세요. 사용자가 기기를 회전시켰다고 해서 전체 레이아웃을 변경해야 하는 것은 아닙니다. 예를 들어 앱에 세로 모드의 이미지 격자가 표시되는 경우 가로 모드의 목록과 동일한 이미지를 표시할 필요가 없습니다. 대신 그리드의 크기를 간단히 조정할 수 있습니다. 모든 상황에서 비슷한 경험을 제공하세요.

가능하면 세로 및 가로 방향을 모두 지원하세요. 사람들은 다른 방향으로 앱을 사용하는 것을 선호하므로 그 기대를 충족시킬 수 있을 때 가장 좋습니다.

앱에서 하나의 방향만 지원하는 경우 두 가지 변수를 모두 지원하세요. 앱이 단일 방향으로 실행되어야 하는 경우 반드시 방향 변수 두 가지를 모두 지원해야 합니다. 예를 들어 앱이 가로 모드로만 실행되는 경우 홈 버튼이 왼쪽이나 오른쪽에 있는지 여부에 관계없이 앱을 사용할 수 있어야 합니다. 앱을 사용하는 동안 기기가 180도 회전한 경우 콘텐츠는 180도 회전하여 응답해야 합니다.

대화 형 요소에 충분한 공간을 제공하세요. 모든 컨트롤에 대해 44pt x 44pt의 최소 표시 가능 영역을 유지하세요.

텍스트 크기 변경에 대비하세요. 사람들은 설정에서 다른 텍스트 크기를 선택하면 대부분의 앱이 적절하게 반응할 것으로 기대합니다. 일부 텍스트 크기 변경 사항을 수용하기 위해 레이아웃을 조정해야 할 수 있습니다. 앱의 텍스트 사용에 대한 자세한 내용은 타이포그래피를 참조하세요.

5.Typography

San Francisco는 iOS의 시스템 글꼴입니다. 이 글꼴에는 19포인트 이하의 SF UI Text 그리고 20포인트 이상의 SF UI Display Text 두 가지 종류가 있습니다. 라벨 및 기타 인터페이스 요소의 텍스트에 시스템 글꼴을 사용하면 iOS는 포인트 크기에 따라 글꼴의 가장 적절한 텍스트 스타일을 자동으로 적용합니다. 또한 필요에 따라 자동으로 글꼴을 전환하고 접근성 설정을 준수합니다. Resourse에서 San Francisco 글꼴을 다운로드받으세요.

중요한 정보를 강조하세요. 두께, 크기 및 색상을 사용하여 앱에서 가장 중요한 정보를 강조 표시하세요.

가능하면 단일 글꼴을 사용하세요. 몇 가지 다른 글꼴을 혼합하면 앱이 깨지거나 대충 만든 것처럼 보일 수 있습니다. 한 가지 글꼴의 스타일과 크기를 사용하세요.

가능하면 내장된 텍스트 스타일을 사용하세요. 내장된 텍스트 스타일을 사용하면 시각적으로 뚜렷한 방식으로 내용을 표현하면서 최적의 가독성을 유지할 수 있습니다. iOS에는 다음 텍스트 스타일이 포함됩니다.

iOS Text Style

Custom Fonts가 잘 읽히는지 확인하세요. Custom Fonts는 iOS에서 지원되지만 읽기가 어려울 수 있습니다. 앱에서 브랜딩 목적 혹은 게임에 몰입되는 환경을 만들기 위해 Custom Fonts를 사용해야 하는 경우가 아니면 System Fonts를 사용하세요. Custom Fonts를 사용하는 경우 Font를 읽을 수 있어야 합니다.

Custom Fonts에 대한 액세스 기능을 구현합니다. System Fonts는 굵은 텍스트가 활성화된 경우와 같이 내게 필요한 옵션 기능에 자동으로 반응합니다. 맞춤 글꼴을 사용하는 앱은 접근성 기능이 사용 설정되어 있는지 확인하고 변경되었을 때 알림에 등록하여 동일한 동작을 구현해야 합니다. Accessibility를 참조하세요.

Dynamic Type Sizes

SF UI typeface의 두 종류는 작거나 큰 사이즈 모두 쉽게 읽을 수 있도록 설계되었습니다. Dynamic Type은 독자가 원하는 텍스트 크기를 유연하게 선택할 수 있게 합니다.

텍스트 크기를 변경할 때 콘텐츠의 우선순위를 지정하세요. 모든 콘텐츠가 똑같이 중요하지는 않습니다. 누군가가 더 큰 크기를 선택하면 관심 있는 내용을 읽기 쉽게 만들어야 합니다. 항상 화면의 모든 단어를 크게 표시하지는 않습니다. Download a dynamic type size table in Resources.