들어가며

앞서 적었던 절대 반지? 절대 프레임을 찾아서...
의 글에서 완벽한 프레임은 어떤 크기 인지, 어떤 비율인지 작성 하였다. 그 디자인을 토대로 프레임을 만들고 디자인을 하며, 실제 디자인의 화면과 일치 하는 개발단에서의 작업을 정리 한 글이다. 디자이너의 의도를 어떻게 하면 픽셀 하나 까지 완벽히 반영 할 것인지, 개발단에서 보는 화면의 비율과 각각 네비게이션의 영역과 탭바의 영역 Safe Area는 어느정도 크기 인지 확인 해보고 디자인단과 개발단의 일치 하는 프레임을 찾아보고 정리 하는 과정의 글이다.

디자인과 개발단의 레이아웃 일치를 찾아서

앞선 글에서 언급한 것 처럼 각각의 네비게이션과 탭바 영역들을 적고 계산 하며 Safe Area 까지 계산한 프레임으로 우선 작업을 해보았다. 하지만 픽셀이 완벽히 일치 하진 않았다. 살짝 살짝씩 어긋 나는 부분이 있었다. 무시 할 만한 영역이라고 생각하지만 추후 디자이너의 의도와 비율을 완벽히 일치 하기엔 대충 어림잡는 마인드로는 안되겠다 생각을 하고 완벽히 일치 하는 수치를 찾아보았다.

왼쪽이 디자인단 오른쪽이 정확한 수치를 위해 개발단에서 개발을 하고 캡쳐 하고 수치를 일치 시킨 시뮬레이터의 캡처본이다. 여러 원인이 있었지만, 피그마의 Dev를 완벽히 옮겨 왔음에도 수치가 정확하게 일치 하진 않는다. 그렇기 때문에 행간을 조절하는건 Dev 모드를 따르기 보단 일일이 조절을 해야 했다.

행간을 조절하고 어느정도 비슷해진 모습을 보였다.

let label = UILabel()
label.textColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1)
label.font = UIFont(name: "Pretendard-ExtraBold", size: 28)
label.numberOfLines = 0
label.lineBreakMode = .byWordWrapping

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineHeightMultiple = 26 / 28 // 이 부분의 수치를 조절 하였다.
label.attributedText = NSMutableAttributedString(
	string: "모두를 위한 미술관\n모두를 위한 전시경험",
    attributes: [
    	.kern: -1.12,
        .paragraphStyle: paragraphStyle
    ])

또한 계속 해서 일치 하게 디자인 했는데도 무언가 완벽히 일치 하진 않았다. 프레임의 문제인가 싶어서 진단 해보고 시뮬레이터의 레이아웃을 보고, Xcode 상에선 어떤 수치로 프레임이 잡히는지 확인을 해보았다.

위의 사진은 지난번 글의 비율과 수치를 토대로 가장 오른쪽의 프레임을 제작하였다.

아래의 사진의 비율로 제작 하였는데, 이 비율이 Xcode 상의 네비게이션의 비율이 조금 달랐다. 그래서 이 비율을 일치 하는 것을 목표로 하였다.

다른 점은 다음과 같다.
우선 네비게이션의 영역은 위의 사진 처럼 97pt가 아니다. 실제 코드단에선 94pt였다. 아래의 사진은 코드 단에서 보여지는 수치이다.

우선 이 부분을 수정 하였다. 또한 네비게이션 스택이 추가 됐을 때 높이를 확인 하였다.

44pt 였기 때문에 나머지 영역은 50pt(94pt - 44pt)를 확인 할 수 있었다.

safe area의 영역도 Xcode를 통해 확인 해보았다.

이 부분의 높이도 수치에 맞게 반영 하였다. 그 수치를 통해 하단 바의 높이도 확인 할 수 있었다. (812pt - 94pt - x ) = 684pt 이므로 x = 34 즉 하단 바의 높이는 34pt 인걸 확인 할 수 있었다.

모든 수치를 적용 하면 이와 같은 Xcode 즉, 코드단과 일치 하는 프레임을 얻을 수 있다. 이 프레임을 기준으로 safe area 를 기준으로 얼마나 떨어져 있는지 작업 하면 동일한 레이아웃을 만들 수 있을 것이다.

뒤의 safe area를 피그마 layer Bool 속성을 적용 한다면 위 처럼 영역을 보면서 작업 할 수 있다.

마치며

지금은 홀로 개발을 하지만 추후 이와 같은 사항을 디자이너와 공유 한다면 더 효과적인 작업을 할 수 있고, 디자이너의 의도를 더 완벽히 적용 할 수 있겠다.
추가적으로 피그마의 기능 까지 하나 둘 습득 하면서 더 수월한 작업이 되고 있다. 이전에는 코드에서 보이지 않는 수치들을 상상하며 개발 했지만 피그마를 통해 명시적으로 디자인 하고 그걸 옮기는 과정만 하면 되어서 편리 했다.
개발 외적으로 계속 다른 툴들을 알아가며 공부 해야 겠다.