픽셀 완벽한 iOS UI 디자인을 구현하는 방법

의미나 의미 를 고려하지 않고 "픽셀 완벽한 디자인"이라는 말을 수없이 들어보셨을 것입니다. 최근 몇 달 동안 완벽한 픽셀 디자인 개념의 쇠퇴에 대해 들었을 가능성이 있지만 이러한 주장에는 특히 iOS UI 디자인과 관련하여 작은 문제가 있습니다.

즉, 픽셀 완벽한 디자인의 정의는 대부분의 iOS UI 지침처럼 돌에 새겨져 있지 않습니다. 사람들은 그것을 다른 방식으로 해석하므로 문제가 있습니다. 픽셀 완성도가 누군가에게는 전달되는 것처럼 보일 수 있지만 다른 사람들은 비록 이름은 다르지만 앞으로 몇 년 동안 이 원칙을 계속 사용할 것입니다. 대부분 명명 문제입니다.

완벽한 픽셀 UI 디자인이란 무엇입니까?

완벽한 픽셀에 대한 명확한 정의가 없기 때문에 픽셀 완벽한 디자인 개념에 대한 나의 이해는 모든 것이 선명도와 충실도를 최대화하기 위해 수행된다는 것입니다. 디자인이 구현되면 어떤 종류의 인공물이나 문제도 없이 모든 iPhone 디스플레이에서 동일하게 보입니다.

완벽한 픽셀 iOS 앱 UI를 만든다는 것은 픽셀을 염두에 두고 디자인을 만들고 참조 디자인의 모든 픽셀에 이르기까지 화면에 정확히 동일한 디자인을 구현하는 동시에 다른 장치에 반응적으로 적용된다는 것을 의미합니다.

하지만 왜 픽셀 퍼펙트 디자인인가?

UI 디자이너는 인식하고 상호 작용하기 쉬운 인터페이스를 만들기 위해 최선을 다합니다. 디자이너의 작업을 존중하고 전달된 대로 인터페이스를 정확하게 구현하는 것은 개발자의 전문적인 의무입니다.

픽셀이 완벽하지 않은 앱을 사용하면 사용자가 앱을 사용하고 즐기는 데 방해가 되는 심각한 문제가 발생하지 않을 가능성이 높지만 픽셀이 완벽한 앱은 확실히 더 선명하고 깨끗하며 일관되게 보입니다.

Apple App Store의 경쟁이 치열한 특성으로 인해 전반적인 모양과 사용자 경험을 향상시키는 모든 개선 사항을 환영합니다. 앱을 차별화하고 더 눈에 띄게 만들어 수익성을 높이는 데 도움이 될 수 있습니다.

이 빠른 iOS UI 디자인 가이드는 디자이너와 개발자의 관점에서 기본 디자인 단계에서 구현까지의 프로세스를 안내합니다.

iOS UI 디자인 만들기

시작하자. 완벽한 픽셀 애플리케이션은 픽셀 완벽한 디자인으로 시작하는 것이 분명하며 오늘날 이러한 디자인이 어디에서 왔는지 우리 모두 알고 있습니다.

필수 iOS 인터페이스 디자인 도구

나는 Sketch가 웹 및 모바일 UI/UX 디자이너를 위한 사실상의 표준이 되었다는 말이 정확하다고 생각합니다. Adobe XD는 떠오르는 대안이지만 인기 면에서는 Sketch보다 뒤쳐져 있습니다.

다음으로 대지 크기를 선택합니다. 오늘날 우리는 다양한 화면 크기와 종횡비를 가진 iOS 기기를 가지고 있으며 디자인을 만들기 위해 하나의 크기를 선택해야 합니다. 자동 레이아웃 덕분에 다른 디스플레이 크기에 매끄럽게 적용됩니다. 필요한 경우 다양한 크기 클래스 에 대해 다양한 레이아웃 변형을 생성할 수 있습니다.

여기서 유일한 진짜 질문 은 디자이너가 다양한 디스플레이에 맞게 디자인을 조정하는 방법에 대한 정보를 개발자와 공유해야 하는 것입니다.

운 좋게도 각각의 사양을 기록할 필요가 없습니다. Sketch용 Auto Layout 플러그인이 알아서 처리해주기 때문입니다. 디자이너는 원하는 자동 레이아웃을 설정하고 클릭 한 번으로 다양한 화면 크기로 내보내기만 하면 됩니다. 그러면 개발자는 레이아웃 제약 조건을 적용하는 방법을 이해하고 iPhone X에서든 오래된 iPhone 5에서든 모든 것이 잘 보이는지 확인하게 됩니다.

참고: 버전 44부터 Sketch 팀은 크기 조정 제어를 크게 개선하여 사용자에게 상위 항목의 크기가 조정될 때 레이어가 작동하는 방식에 대한 더 많은 권한과 제어 권한을 제공합니다.

디자인 설정

대단해 보이지만 아직 디자인을 만드는 데 사용할 크기를 선택하지 않았습니다. David Smith의 iOS 통계에 따르면 모든 iPhone 사용자의 57%가 iPhone 6/6s에 도입된 이후 iPhone 7 및 최근 출시된 iPhone 8에 사용된 4.7인치 디스플레이에 의존합니다.

지금쯤이면 여러분 모두가 Apple의 4.7인치 디스플레이에 익숙할 것이라고 확신하지만 숫자에 익숙하지 않은 사용자를 위해 PPI(인치당 픽셀 수)가 326인 750x1334픽셀 디스플레이에 대해 이야기하고 있습니다. 이것은 표준 Retina 디스플레이이며 코드에서 해상도의 절반을 갖게 됩니다. 따라서 375x667 픽셀로 시작하는 것이 좋습니다.

다음으로 iOS UI 디자인이 선명도를 최대화하는지 확인해야 합니다. 이 목표를 달성하려면 픽셀 맞춤 을 켜야 합니다.

다음은 픽셀 맞춤이 있거나 없는 간단한 직사각형의 예입니다.

벡터 개체를 편집할 때 Round: Full Pixels 사용:

이것들은 분명히 기본 사항이며 Sketch의 완벽한 픽셀 iOS UI 요소를 자세히 보려면 ​​공식 튜토리얼을 확인해야 합니다.

개발자가 Lottie 라이브러리를 사용하여 쉽게 재생할 수 있으므로 복잡한 벡터 애니메이션을 자유롭게 사용하십시오. 크기 조정 아티팩트 없이 모바일 장치에서 Adobe After Effects 애니메이션을 재생할 수 있습니다. 개발자에게 JSON 파일을 제공하기만 하면 됩니다.

sRGB 색상 프로파일을 최대한 사용하십시오. 광역 디스플레이에서 sRGB가 충분하지 않은 경우 색상 또는 그래픽 자산(sRGB 하나와 색상 프로필이 포함된 다른 하나)을 제공해야 합니다. 색상 프로파일에 대한 자세한 정보는 필요한 경우 Apple의 HID 지침에서 확인할 수 있습니다.

완벽한 픽셀 결과를 위한 맞춤형 코드

엄청난! 이제 우리는 픽셀 단위로 완벽한 디자인을 만들 수 있을 만큼 충분히 알고 있습니다. 어떻게 개발자와 공유합니까? 우리는 분명히 도구 상자에 접근해야 합니다.

올바른 도구 선택

디자이너의 작업을 개발자와 공유하는 데 매우 유용한 도구인 Zeplin이 있습니다. 그것을 사용하기만 하면 개발자는 UI 디자인이 작동하는지 확인하는 데 필요한 거의 모든 정보(그래픽 자산, 디자인에 사용된 글꼴 및 색상, 텍스트 등)를 갖게 됩니다. 이 시점에서 디자이너가 제공해야 하는 거의 유일한 것은 iOS에 포함되지 않은 글꼴을 사용하는 경우 글꼴 파일입니다.

또 다른 멋진 도구는 벡터 이미지에서 코드를 생성할 수 있는 PaintCode입니다. PaintCode는 SVG 경로와 색상 데이터를 사용하여 Swift 또는 ObjC 클래스를 생성합니다. PaintCode를 사용하면 표현식, 변수 등을 사용하여 버튼의 수동/활성 상태, 위/아래 상태, 동적 텍스트, 변수의 애니메이션 등을 만들 수 있습니다.

분명히 Xcode와 몇 가지 표준 iOS 개발 도구에 의존해야 하지만 나중에 이에 대해 알아보겠습니다.

채팅 아이콘에서 그라데이션 배경의 기본 색상을 변경하는 것과 같이 디자인 자산의 특정 부분만 동적으로 업데이트해야 하는 경우 매우 유용합니다. 그리고 편리한 보너스로 앱의 무게가 줄어듭니다.

자, 개발자는 마침내 필요한 모든 것을 갖추었습니다. 그렇다면 픽셀 완벽한 디자인을 어떻게 완벽하게 구현할 수 있을까요(말장난 용서)?

도구 설정 및 동기화

Zeplin을 사용하면 디자이너가 모든 것을 올바르게 설정하기만 하면 필요한 거의 모든 것을 얻을 수 있습니다. 간과되거나 불분명한 사항이 있는 경우 Zeplin은 효과적인 주석 기능을 제공하여 디자이너와 개발자가 잠재적인 문제를 신속하게 식별하고 해결할 수 있도록 합니다. 모든 것이 올바르게 수행되었더라도 의견은 피드백 및 사소한 개선에 사용될 수 있습니다.

그러나 우리 모두 알다시피 일이 항상 계획대로 진행되는 것은 아니므로 디자이너가 앱에서 사용되는 색상 팔레트를 제공하더라도 개발자가 색상을 선택해야 하는 경우가 있습니다.

이를 올바르게 수행하려면 도구를 동기화해야 합니다.

• 디스플레이 색상 프로필을 sRGB로 설정합니다. 시스템 환경설정 - 디스플레이 - 색상 으로 이동하여 sRGB IEC61966-2.1 을 선택합니다.

• 디지털 색상 측정기 또는 다른 색상 선택 도구에서 sRGB 로 표시하도록 선택합니다.

• Xcode 색상 팔레트의 색상 프로파일이 장치 RGB로 설정되어 있는지 확인하십시오.

참고: 이미지에는 색상 프로필이 포함될 수 있습니다. 이 경우 이 이미지에서 올바른 색상을 얻으려면 도구를 이 프로필에 맞게 조정해야 합니다. 운 좋게도 이것은 예외여야 하며 그러한 경우를 너무 자주 경험해서는 안 됩니다.

Xcode 9에서는 필요할 때 벡터 데이터를 보존 해야 합니다. 앱 크기가 커지는 동시에 어떤 디스플레이 크기에도 이미지를 사용할 수 있습니다. 그러나 iOS 10 및 이전 버전의 Apple 모바일 OS에서는 추가 벡터 데이터를 사용하여 이미지 가 확대되지 않습니다 .

대신 이전 OS 버전은 레거시 크기 조정 메커니즘을 사용하며 원래 크기 이상으로 확장할 때 이미지가 흐릿하게 남게 됩니다. 이 특정 문제에 대한 추가 정보는 Apple의 공식 문서를 확인할 수 있습니다.

마지막으로 개발자는 크기와 거리가 원래 디자인과 최대한 일치하는지 확인해야 합니다. Zeplin에 의심스러운 정보가 있는 경우 화면 규칙을 변경하여 다양한 iOS UI 구성 요소 간의 거리를 측정할 수 있습니다. 그 중 하나는 실용적인 기능이 많은 화면 눈금자 xScope입니다.

iOS UI 디자인에 생명을 불어넣다

iOS UI 디자인을 구현할 때 스토리보드, XIB 및 사용자 정의 코드 중에서 선택할 수 있는 몇 가지 접근 방식이 있습니다.

• 스토리보드 - 화면과 화면 사이의 탐색을 시각화하지만 한 컨트롤러에서 다른 컨트롤러로 디자인을 상속하는 옵션은 없습니다.

• XIB - 상속하기 쉬운 하나의 화면 또는 그 일부를 시각화합니다. Xcode 9 이전에는 상단/하단 레이아웃 가이드를 사용하는 옵션이 없었지만 Xcode 9에서는 안전 영역 을 사용할 수 있습니다.

• 코드 - 지금까지 가장 유연한 옵션이지만 즉각적인 시각화를 제공하지는 않습니다.

스토리보드의 경우 디자인을 흐름으로 분할해야 합니다(예: LoginFlow.storyboard, SettingsFlow.storyboard 또는 NewsFeedFlow.storyboard). 그렇게 하면 스토리보드를 가볍게 유지할 수 있습니다.

UI 요소를 블록으로 그룹화합니다. 이렇게 하면 모든 제약 조건에 대한 지원이 간소화됩니다. 화면에 위에서 아래로 나타나는 대로 게으르지 말고 명명된 보기를 순서대로 배치하십시오. 맨 아래가 맨 위에 표시된다는 점에 유의하십시오. 이렇게 하면 다른 보기를 더 빨리 찾는 데 도움이 됩니다.

그룹 해제 및 그룹화된 요소에 대한 다음 예를 참조하십시오.

왼쪽/오른쪽으로 정렬된 여러 개체가 있는 경우 오프셋을 사용하여 가장자리에 정렬하지 마십시오. 더 나은 접근 방식은 이전 요소에 맞추거나 너비 제약 조건이 있는 특수 _ffset 보기_를 구현하는 것입니다. 나중에 오프셋을 변경해야 하는 경우 이렇게 하면 좀 더 쉬워집니다.

IB에서 색상을 사용하려면 Xcode Color Picker 하단에 팔레트를 준비하면 됩니다.

참고: 앱의 최소 iOS 버전이 11인 경우 자산 카탈로그에서 "명명된 색상" 옵션을 사용할 수 있습니다.

마무리

그게 다야 이제 결과를 QA 팀에 보내고 모든 것이 정상인지 확인하고 짜잔! 완벽한 픽셀 앱이 준비되었습니다.

이 기사의 목표는 픽셀 완벽한 iOS UI 디자인의 선형적이고 간단한 예를 제공하여 가능한 한 짧은 시간에 최상의 결과를 얻는 것이었습니다. UI 디자이너와 개발자 간의 협업이 항상 이렇게 간단하고 원활하지는 않지만 다른 기사에서는 문제가 됩니다.