탭 바 아이콘 사이즈

Tab bar icon size

탭으로 구성된 앱을 만들때면 아이콘 사이즈를 어떻게 잡아야하는지 매번 찾아보게 되네요.

간만에 아이폰 앱을 하다보니 이번에도 역시나 찾아봤습니다.

애플 개발자 사이트에 설명이 있네요. 개발자 계정이 있어야 접근이 가능할 수도 있습니다.

https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/custom-icons/

둥근아이콘, 사각모양 아이콘, 옆으로 긴거, 위로 긴거..뭐 설명이 있는데, 각각 레귤러, 콤팩트 두 종류로 구분이 되어있네요.

레귤러? 콤팩트는 뭔가 찾아보니, 아래 링크에 있는 설명인 것 같습니다.

https://developer.apple.com/ios/human-interface-guidelines/visual-design/adaptivity-and-layout#device-size-classes

허.... 잘 모르겠습니다.

아마도 탭 바 아이콘의 경우, 세로모드일 때 레귤러 탭바, 가로모드일 때 콤팩트 탭바가 각각 적용되나 봅니다.

아이콘 이미지 지정해 줄 때, 아래처럼...

실제 이미지 사이즈는, pt 로 표현된 사이즈를, 레티나 종류에 따라서 @2x, @3x 배율로 이미지의 픽셀 사이즈를 계산하면 될 것 같습니다.

예를 들면, 탭 바 아이콘을 둥근 모양으로 하겠다고 결정했으면, 가장 위, circular glyphs 줄을 참고하면 되겠습니다.

레귤러 사이즈의 경우, pt 로 표현된 크기를 보면, 25pt x 25pt 입니다.

그러니까, 

@1x 용은 pt 사이즈와 같게 25px x 25px 크기로 아이콘을 만들고,

@2x 용은 pt 사이즈에 곱하기 2해서 50px x 50px,

@3x 용은 pt 사이즈에 곱하기 3해서 75px x 75px 크기로 각각 이미지를 만들어 준비하면 되겠습니다.

이걸 이미지 에셋  Tab1_R 정도의 이름으로 에셋을 만들어 둡니다.

콤팩트 사이즈는 pt 로 18pt x 18pt 이니까,

@1x 용은 pt 사이즈와 같게 18px x 18px 크기로 아이콘을 만들고,

@2x 용은 pt 사이즈에 곱하기 2해서 36px x 36px,

@3x 용은 pt 사이즈에 곱하기 3해서 54px x 54px 크기로 각각 이미지를 만들어 준비하면 되겠습니다.

마찬가지, 이 이미지들을 이용해서 Tab1_C 이름으로 에셋을 만들어 둡니다.

Bar item에 이미지를 적용할 때는, 

위 이미지처럼 attribution inspector 에서 

Image : Tab1_R,

Landscape : Tab1_C

로 지정해주면 되는 것 같습니...다....