[스케치] 왜? 당신의 APP은 Sktech에서 더 좋게 보일까?

Sketch와 iOS 간의 렌더링 차이점 탐색

차이점이 있다.

이 두 이미지의 차이점을 발견 할 수 있습니까?
presentation
충분히 열심히 보면 몇 가지 미묘한 차이가 있음을 알 수 있습니다.
오른쪽 이미지 :
  1. 그림자가 더 큽니다.
  2. 더 어두운 그라데이션이 있습니다.
  3. 단락 맨 윗줄에 "in"이라는 단어가 있습니다.
왼쪽의 이미지는 스케치의 스크린 샷이고 오른쪽의 이미지는 iOS의 재생 이미지입니다. 이러한 차이는 그래픽이 렌더링 될 때 발생합니다. 글꼴, 줄 간격, 그림자 반경, 색상 및 그라디언트 속성이 모두 동일합니다. 모든 조건은 동일합니다.
presentation
보시다시피 원래 디자인의 일부 측면은 디자인 파일에서 실제 코드로 변환하는 동안 손실 될 수 있습니다. 이러한 세부 정보 중 일부를 탐색하여 무엇을 감시하고 수정해야하는지 알 수 있습니다.

왜? 우리가 신경쓰지?

디자인은 성공적인 모바일 앱에 매우 중요한 역활을 합니다. 특히 iOS에서 사용자는 잘 작동하고 멋지게 보이는 앱에 익숙합니다.
모바일 앱 디자이너 또는 개발자인 경우 최종 사용자 경험에 대한 작은 세부 정보의 중요성을 알고 계실 것입니다. 고품질 소프트웨어는 정교한 기술에 깊이 관여하는 사람들에게서만 얻을 수 있습니다.
앱이 원래 디자인보다 좋지 않을 수도있는 데는 여러 가지 이유가 있습니다. 더 세밀한 이유 중 하나 인 Sketch와 iOS 간의 렌더링 차이점에 대해 살펴 보겠습니다.
presentation

변환 중 손실

특정 유형의 사용자 인터페이스 요소는 Sketch와 iOS간에 눈에 띄는 차이가 있습니다. 우리는 다음 요소들을 탐구 할 것입니다 :
  1. Typography : 타이포그래피
  2. Shadows : 그림자
  3. Gradients : 그라디언트

1. Typography : 타이포그래피

타이포그래피는 다양한 방법으로 구현 될 수 있지만 이 테스트에서는labels ( "텍스트"요소 인 Sketch, UILabel in iOS)을 사용하려고합니다.
차이점을 살펴 보겠습니다.
presentation
위의 예에서 가장 큰 차이점은 줄 바꿈 위치입니다. "이 텍스트는 SF Semibold입니다"로 시작하는 텍스트의 세 번째 그룹은 디자인에서 단어 "25"다음에 있지만 응용 프로그램에서 단어 "points"다음에 나옵니다. 이 같은 문제는 텍스트 단락에서 발생합니다. 줄 바꿈이 일치하지 않습니다.
또 다른 작은 차이점은 Sketch에서 leading (line spacing) 및 tracking (character spacing)이 약간 더 크다는 것입니다.
직접적으로 겹쳐지는 경우 이러한 차이를 쉽게 볼 수 있습니다.
presentation
다른 서체는 어떻습니까? San Francisco with Lato (널리 사용되는 무료 글꼴)로 대체하면 다음과 같은 결과를 얻습니다.
presentation
훨씬 낫다!
leading 및 tracking에는 몇 가지 차이점이 있지만 대체로 적습니다. 텍스트가 배경 이미지와 같은 다른 요소와 정렬되어야 할 경우 이러한 작은 오프셋이 눈에 띄게 될 수 있습니다.

어떻게 수정하나?

이러한 문제 중 일부는 기본 iOS 글꼴인 San Francisco와 관련이 있습니다. iOS가 시스템 글꼴을 렌더링하면 포인트 크기에 따라 자동으로 tracking이 포함됩니다. 이 자동 적용 tracking 테이블은 Apple 웹 사이트에서 제공됩니다. "SF Font Fixer"라는 Sketch 플러그인이 있습니다.이 플러그인은 Sketch에서 이러한 값을 반영합니다. 당신의 디자인이 San Francisco를 사용한다면, 저는 매우 추천합니다.
(Side Note : 텍스트 상자를 Sketch의 텍스트 주위에 단단히 감싸는 것을 잊지 마십시오. 텍스트를 선택하고 "Fixed"과 "Auto"정렬 사이를 전환 한 다음 텍스트 상자의 width를 재설정하십시오. 여분의 간격이 있으면 쉽게 레이아웃에 잘못된 값이 입력 될 수 있습니다.)

2. Shadows : 그림자

유니버설 레이아웃 규칙이있는 타이포그래피와 달리 그림자는 덜 정의되어 있습니다.
presentation
위 이미지에서 볼 수 있듯이 iOS의 그림자는 기본적으로 더 큽니다. 위의 예제에서, 이것은 사각형의 상단 가장자리에서 가장 큰 차이를 만듭니다.
Sketch와 iOS 간의 매개 변수가 동일하지 않기 때문에 그림자가 까다 롭습니다. 가장 큰 차이점은 그림자가 포함 된 레이어의 크기를 늘리면 극복 할 수 있지만 CALayer에 "spread"개념이 없다는 것입니다.
presentation
그림자는 Sketch와 iOS의 차이가 크게 다를 수 있습니다. 나는 스케치에서 똑같은 parameters를 가진 그림자를 보았지만 실제 device에서 실행할 때는 거의 보이지 않는 그림자를 보았습니다.
presentation

어떻게 수정하나?

그림자는 까다 롭고 원본 디자인과 일치시키기 위해 수동으로 조정해야합니다. 종종 그림자 반경이 더 낮아야하고 불투명도가 높아야합니다.
// old layer.shadowColor = UIColor.black.cgColor layer.shadowOpacity = 0.2 layer.shadowOffset = CGSize(width: 0, height: 4) layer.shadowRadius = 10
// new layer.shadowColor = UIColor.black.cgColor layer.shadowOpacity = 0.3 layer.shadowOffset = CGSize(width: 0, height: 6) layer.shadowRadius = 7
필요한 변경 사항은 size, color및 shape에 따라 다릅니다. 여기서 약간의 조정 만 하면됩니다.

3. Gradients 그라디언트

그라디언트도 문제가 될 수 있습니다.
presentation
세 가지 그라디언트 중에서 "주황색"(맨 위)과 "파란색"(오른쪽 아래) 만 다릅니다.
주황색 그라디언트는 Sketch에서 더 수평 적으로 보이지만 iOS에서는 수직으로 보입니다. 결과적으로 그라디언트의 전체 색상은 최종 앱에서 디자인보다 더 어둡습니다.
파란색 그라데이션의 차이는 iOS에서 더 수직적입니다. 이 그라디언트는 왼쪽 하단 모서리에 밝은 파란색, 중간에 진한 파란색, 오른쪽 위 모서리에있는 분홍색의 세 가지 색상으로 정의됩니다.
presentation

어떻게 수정하나?

그래디언트가 기울어 진 경우 시작점과 끝점을 조정해야 할 수 있습니다. 이러한 차이점을 고려하여 CAGradientLayerstartPointendPoint를 약간 상쇄 해보십시오.
// old layer.startPoint = CGPoint(x: 0, y: 1) layer.endPoint = CGPoint(x: 1, y: 0)
// new layer.startPoint = CGPoint(x: 0.2, y: 1) layer.endPoint = CGPoint(x: 0.8, y: 0)
여기서 마술같은 공식은 없습니다. * 결과를 시각적으로 일치시킬 때까지 값을 조정하고 반복해야합니다.
* Jirka Třečák는 그라디언트 렌더링이 작동하는 방식을 설명하는 an excellent response 글을 보세. 더 많은 코드를 깊이 들여보고 싶다면 체크해보십시오!

직접 확인 하세요

실제 기기에서 이러한 차이를 쉽게 확인할 수있는 데모 앱을 만들었습니다. 위의 예제와 소스 코드 및 원본 Sketch 파일을 포함하여 상수를 마음의 내용에 맞게 조정할 수 있습니다.
이것은 팀 내의 인식을 높이는 좋은 방법입니다. 전화기에 손을 대어보고 스스로 볼 수 있습니다. 화면의 아무 곳이나 터치하여 이미지를 전환 할 수 있습니다 (위의 gif와 유사).
여기에서 오픈 소스 데모 앱을 다운로드하십시오https://github.com/nathangitter/sketch-vs-ios
presentation
Sketch vs iOS 데모 앱 - 직접 사용해보십시오!

마치며

동일한 값이 같은 결과를 내포한다고 가정하지 마십시오. 숫자가 일치하더라도 시각적 인 모양은 그렇지 않을 수 있습니다.
하루가 끝나면 디자인이 구현 된 후 반복이 필요합니다. 고품질의 최종 제품에는 설계와 엔지니어링 간의 훌륭한 협업이 중요합니다.

원본 글 링입니다.
https://medium.com/@nathangitter/why-your-app-looks-better-in-sketch-3a01b22c43d7


PS. 안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
혹시나 읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 달아주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일정고 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.
^^