[iOS] 이미지 사이즈 변형(feat. 나인패치)

안녕하세요~ 차니에요!

 

오늘은 안드로이드의 나인패치처럼 iOS에서 사용할 수 있는 방법에 대해 알아볼거에요.

 

1. 나인패치란?

 나인패치(9-patch; nine-patch)는 이미지 파일 포맷인데 형식은 {###.9.png} 이런 느낌입니다.

모바일 앱 개발을 하다보면 화면 해상도에 따라 이미지 사이즈가 커지거나 작아지는 경우들이 생기죠?

만약 커지는 경우라면 이미지가 깨지는 현상이 자연스럽게 발생하게되는데 이를 나인패치를 적용하게 되면 늘어나지 않을 영역을 지정하여 이미지가 깨져보이지 않게 표현할 수 있습니다.

 

하지만 iOS에서는 나인패치 형식을 지원하지 않아서 유사한 방법을 알려드릴게요.

 

2. iOS 적용

2-1. 적용 방법

Assets.xcassets 폴더로 가서 적용할 이미지셋을 추가 후 선택해주세요.

그 후 우측 네비게이션이 닫혀있다면 열어주신 뒤 4번째 탭으로 이동할게요.

최하단으로 스크롤을 내리면 'Slicing'가 보입니다.

디폴트로 None이 설정되어있는데 클릭하면 총 4가지 선택지가 있습니다.

• None : 슬라이싱 옵션을 지정하지 않습니다.
• Horizontal : 가로에 대한 슬라이싱 옵션을 지정합니다.
• Vertical : 세로에 대한 슬라이싱 옵션을 지정합니다.
• Horizontal and Vertical : 가로, 세로에 대한 슬라이싱 옵션을 지정합니다.

 

2-2. 적용 사례

적용 전과 후의 차이입니다.

저의 경우는 가로, 세로에 대한 슬라이싱 옵션을 주었습니다.

조금전에 나인패치에 대해 설명할 때 늘어나지 않을 영역을 지정해줘서 이미지가 깨져보이지 않게 한다고 했었죠?

고정될 영역은 Slices를 선택하면 자동으로 잡히는데 고정된 영역은 이미지가 커져도 깨지지 않은 원본 형상을 유지하게 됩니다.

 

• Slices
  • 슬라이싱 옵션 - Horizontal and Vertical
  • 고정될 영역 - 이미지의 Left, Right, Top, Bottom
• Center
  • 두 가지 선택지가 있습니다. Tiles/Stretches
  • 이미지가 커졌을 때 타일처럼 이미지를 여러개 표현할 것인지 하나만 표현할 것인지 선택하면됩니다.