iOS 에셋 어떻게 정리하고 공유할까? – UXUI 디자인 강좌 4-7

안녕하세요. 이번에는 iOS 디자인 작업 시 유용한 에셋 관리 팁을 알아보겠습니다. 먼저, 디자인 툴에서 1배율로 작업하되, 내보낼 때 @2x, @3x 접미사를 붙여 Retina 디스플레이의 높은 해상도에 맞는 이미지를 준비해야 합니다. 벡터 아이콘은 PDF 형식으로 1배율로 작업하고, 이미지는 고해상도 디스플레이를 기준으로 @3x 크기로 작업하는 것이 좋습니다. 피그마에서는 내보내기 옵션으로 1x, 2x, 3x를 선택하면 되며, 파일명에 자동으로 접미사가 붙습니다. iOS에서는 카멜케이스를 선호하지만, 디자이너는 작명 시 케밥케이스를 자주 사용합니다. 가장 중요한 건 항상 직관적인 이름을 사용하는 것이 최선입니다.

이번 강의에서는 iOS 디자인에서 에셋(Assets) 관련 중요한 내용을 다루고 있습니다. 이는 UI 디자인에서 고려해야 할 필수적인 부분입니다.

스케일 팩터에 따른 접미사

1. 디자인 툴에서의 작업: 피그마와 같은 디자인 툴에서는 기본적으로 1배율로 작업합니다.
2. 내보내기: 내보내기 시 @2x, @3x와 같은 접미사가 자동으로 붙게 됩니다. 이는 Retina 디스플레이와 같은 고해상도 디스플레이에 맞게 이미지를 조정하는 것을 의미합니다.
3. 디바이스 해상도 적용: iPhone X는 @3x 해상도의 이미지를, iPhone 8은 @2x 해상도의 이미지를 사용합니다.

에셋 내보내기

벡터 에셋

벡터 아이콘은 1배 사이즈로 작업하며, .pdf 형식으로 내보내기가 권장됩니다.

비트맵 이미지

사진 위주의 이미지는 .jpg 형식으로, 그래픽 위주의 이미지는 .png 형식으로 @3x 해상도로 내보내는 것이 좋습니다. iOS 시스템이 다른 해상도에 대한 크기 조정을 자동으로 수행할 수 있으므로, 고해상도 디스플레이 기준으로 작업하는 것이 권장됩니다.

피그마 내보내기 옵션

• 1x, 2x, 3x 옵션으로 내보내기를 할 수 있으며, 파일명에 @2x와 같은 접미사가 자동으로 붙게 됩니다.
• 이미지는 축소보다는 원래 크기 혹은 더 큰 크기에서 작업하는 것이 중요합니다.

작명 규칙

1. iOS vs Android: Android에서는 주로 snake case를 사용하는 반면, iOS에서는 명확한 가이드라인이 없습니다.
2. 개발자의 선호: 개발자는 주로 camelCase를 사용하지만, 이는 개인의 선호에 따라 다릅니다.
3. 디자이너의 선호: 디자이너는 에셋 이름을 적기 편한 방식으로 kebab-case를 자주 사용합니다.
4. 스위프트 개발 가이드라인: 스위프트 개발 시 일반적으로 camelCase가 사용됩니다. Swift API Design Guidelines를 참고할 수 있습니다.

iOS 앱 개발시 에셋 넣는 방식

하나의 이름안에 1x, 2x, 3x 이렇게 적용해야 합니다. 그래야 앱 실행 디바이스의 해상도에 맞게 스케일 팩터가 적용된 아이콘이 나타납니다.

이러한 지식은 iOS 디자인에서 에셋을 관리하고 최적화하는 데 필수적입니다. 고해상도 디스플레이에 맞는 이미지 제작과 효율적인 파일 관리는 사용자 경험을 향상시키는 데 중요한 역할을 합니다.