iOS 디자인 가이드: 해상도, 레이아웃, 서체, 및 컴포넌트

 

iOS

 

애플에서 개발한 모바일 운영체제로, iPhone, iPad, iPod touch 및 Apple TV 등에서 작동.

 

iOS 버전

 

각 버전마다 UX/UI 개선, 성능 향상, 새로운 기능 추가 등 다양한 업데이트.

 

iOS 특징

 

• 디자인 일관성
• 네비게이션
• 애니메이션 및 전환 (iOS디자이너들이 매우 중요하게 생각하는 부분이 애니메이션과 트렌지션🖤 > 아이폰: 모든 제스처와 행동들이 굉장히 디테일✨)
• 데이터 보호 및 개인정보 취급 (애플은 사용자의 개인정보 보호를 굉장히 중요하게 생각함. 디자이너 입장에서도 개인정보 취급에 대한 이해도를 가진 상태에서 인터페이스를 디자인하기~)
• 접근성 (접근성을 매우 중요!하게 생각함. 디자이너는 시각적, 청각적, 혹은 운동 관련 장애를 가진 사용자들도 쉽게 접근할 수 있게 기능을 고려해서 작업할 것.)

Apple Design Guide

• 매년 새로운 개념이 뭔지 알려주고, 매년 업데이트된 내용을 사이트에서 확인가능. 틈날때마다 확인해야지🩵

해상도

 

• iPhone SE 1세대: 320 x 568
• iPhone 8: 375 x 667
• iPhone X & 13 mini: 375 x 812
• iPhone 13 & 14: 390 x 844
• iPhone 14 & 15 Pro: 393 x 852
• iPhone 14 & 15 Pro Max: 430 x 932

 

작업 시 고려사항

 

• 가장 많은 비중의 해상도 기준으로 작업

iphone은 특이하게 해상도기준이 홀수로 끊어지는 경우가 많다. 외우기가 어려운데- 굳이 외울 필요는 없다.

단, 이렇게 다양한 해상도가 있는데 어떤 해상도를 기준으로 작업을 해야할까? 이런부분을 고려하는게 중요. 물론 정답은 아니지만- 매년마다 해상도가 달라진다. 따라서 가장 많은 비중의 해상도에 맞춰서 작업하면 된다. 

 

• 작은 사이즈로 작업하는 이유 : 작은 화면에서의 문제점 파악 용이

 

목적에 맞는 추천 해상도

 

• 실개발용: 375 x 812
• 포트폴리오용: 390 x 844

 

iOS 단위: pt

 

• Point: 다양한 해상도 지원

다양한 해상도를 지원하기 위해 pt단위를 사용한다. 예를 들어, iPhone 3까지는 320*640이었는데 iPhone4는 2배가 되었다. 실제 사이즈는 동일하지만 픽셀 수가 두배가 되었기 때문에 디자인을 pt단위로 하는 것이 더 적합하며, 출력시에 pt단위를 픽셀로 변환해주는 작업을 할 수 있다. 

 

pt단위로 개발하면 레티나 디스플레이에 대응하기 용이하다.

 

• 픽셀 밀도 및 비율: @2x, @3x

물리적인 디바이스 크기 대비 실제 화면에 표시되는 픽셀 수 비율. 물리적 크기가 크다고 해서 무조건 픽셀밀도가 큰 게 아니다.

ex. 물리적인 크기는 iPhone11이 더 크지만, 픽셀 밀도는 iPhone 11 Pro가 더 높다.

 

• 물리적 해상도(Physical Resolution): 디바이스의 실제 픽셀 수

아이폰 12의 물리적 해상도는 1170 x 2523 픽셀

 

• 논리적 해상도(Logical Resolution): 1인치(2.54cm)당 들어있는 픽셀 수

아이폰 12의 논리적 해상도는 390 x 844 픽셀

 

*UI 디자인은 Logical 기준으로 작업하면 되고, 비트맵 기반의 이미지 에셋은 Ratio 확인해서 @2x, @3x 된 사이즈로 제작.

 

 

iOS 레이아웃

 

• Notch: 상단 센서, 카메라 등 위치
• Safe area: 노치에 가려지지 않는 영역
• 그리드 시스템 가이드:
  • 단의 수: 4단
  • 마진: 16pt
  • 거터: 16pt

콘텐츠 영역을 좀 더 넓게 쓰고 싶으면, 마진을 좁히면 되고 혹은, 여유있게 여백을 많이 두고싶으면, 마진을 키우면 된다. 

*주의할 점 : CTA버튼과 홈 인디케이터 간의 겹치는 부분이 없어야 한다.

 

 

iOS 전용 서체

 

• 샌프란시스코: 레니타 디스플레이에 최적화된 폰트
  • SF Pro Display: 대형 화면, 큰 텍스트, 타이틀
  • SF Pro Text: 작은 텍스트, 가독성뛰어남, 선명한 글자와 높은 대조로 텍스트를 더욱 선명하게 표현가능
  • SF Compact: 좁은 공간(주로 애플 워치처럼 작은 화면에 사용)

• New York: Serif

 

다이나믹 타입

 

• 텍스트 크기 조절 가능
• Dynamic Type sizes: xSmall / Small / Medium / Large / xLarge / xxLarge / xxxLarge
• 폰트 스타일: Large Title / Title / Headline / Body / Callout / Subhead / Footnote / Caption

 

<주의사항>

1. 인터페이스에서 사용하는 서체의 수 최소화(서체의 수를 최소화해야 정보 계층이 명확하고 가독성이 좋아진다)
2. 다양한 상황에서 가독성 테스트 진행. (예를들어, 밝은 햇빛 아래에서 보거나, 움직이는 동안 빠르게 읽는 등, 여러 상황에서 테스트를 진행해야 함)
3. 가독성을 위해 가벼운 글꼴 두께 지양 (가독성을 유지하기 위해서는 가벼운 글꼴 두께를 사용하지 않아야 함)

 

Auto Shrink

 

UILabel의 속성 중 하나로, 텍스트의 크기가 레이블의 경계를 초과할 경우, 텍스트 크기를 자동으로 조절해주는 기능

• Minimum Font Scale: 텍스트 크기 비율 조절
• Minimum Font Size: 최소 텍스트 크기 설정

*피그마에선 이런기능을 제공하지 않기에- 만약에 적용을 하고 싶다면, 디자인을 하고 나서 가이드라인을 넘길 때 iOS개발자분들과 같이 이야기하는게 좋다(:

 

iOS 컴포넌트

 

• 콘텐츠: Charts / Image views / Text views / Web views(웹 안에 특정 url를 웹상에서 보여주는 기능)

sources : developer.apple

 

 

 

• 레이아웃과 구성: Boxes / Collections / Disclosure controls(클릭했을 때 추가로 숨은 내용을 보여주게 하는 컴포넌트)/ Labels / Lists and tables(리스트 형식이나 테이블 형식의 목록을 제공할 때 사용하는 기능)

sources : developer.apple

 

 

 

• 메뉴와 액션: Activity views(ex. 클릭하면 공유하는 화면)/ Buttons / Edit menus / Menus / Pop-up buttons(클릭을 했을 때, 옵션들이 나오는 기능) / Pull-down buttons / Toolbars(해당 페이지에서 제공하는 툴들을 바로바로 쓸 수 있는 하단에 배치해 놓는 기능)

sources : developer.apple

 

 

• 네비게이션 및 검색: Navigation bars / Search fields / Side bars(iOS app에선 사이드바를 사용하는 대신에 Tab bar를 사용) / Tab bars

sources : developer.apple

 

 

 

• 프레젠테이션: Action sheets / Alerts / Page controls(페이지가 많을 때 사용되는 기능. 인디케이터의 모양을 사용할 땐 두가지 정도로 다른 모양을 만드는게 좋다.) / Popovers(무언가를 클릭했을 때 해당 기능에 추가할 수 있는 부분. 그런데 iOS에선 팝오버 사용을 compact view에서는 지양하고있다. 비좁은 공간에서 무언가를 클릭하면 좋지 않기 때문이다.)/ Scroll views / Sheets(Action Sheet와 비슷. Action Sheet는 Action이 들어간 Sheet. 그냥 Sheet는 부가적인 기능, 특정기능을 선택했을 때 하단에서 위로 올라오는 부분들)

sources : developer.apple

 

 

 

• 셀렉션 및 인풋: Onscreen keyboards / Pickers(날짜, 시간 선택 - Compact,Inline,Wheels 종류가 있다.)/ Segmented controls(안드로이드의 tab과 비슷)/ Sliders(슬라이더로 옵션 조절가능)/ Steppers(스테퍼로 위아래 수치를 조절가능)/ Text fields(인풋)/ Toggles(on/off 기능)

sources : developer.apple

 

 

 

• 상태: Activity rings(이동했거나 운동했거나 등 지표를 보여주는 부분 ex. Apple Watch screen)/ Progress indicators(사람들에게 알려주는 역할. 콘텐츠를 로드하고 있을 때, Progress bar는 어느정도 진행이 되고 있는지 진행률 표시. Circular progress indicator는 원형으로 보여주는 형식. Ex. Apple의 Safari앱은 특정 브라우저를 로딩할 때도, progress bar가 채워지는 형식으로 표현하기도 하고- Refresh content controls 이라고 해서 새로고침을 할 때 위에 부분에 로딩바가 살짝 나왔다가 사라지는 것을 볼 수 있다.)

sources : developer.apple

 

 

 

• 시스템 경험: Home Screen quick actions(홈을 꾹 눌렀을 때, 앱을 재배치하거나 삭제하거나 등의 액션을 취하는 숨은 기능이 나올 때 사용하는 기능) / Live Activities(아일랜드 notch에서 제공하는 기능들) / Notifications / Status bars(바테리, 인터넷 연결 여부 확인가능) / Widgets (앱에 들어가지 않아도 빠르게 바탕화면에서 요약된 정보를 제공하는 기능)

sources : developer.apple

 

 

iOS 에셋 저장

 

비트맵 이미지는 iOS기준으로 가장 좋은 해상도는 현재 @3x가 있다. Android에서는 xxxhdi라고 해서 4배를 하는데- iOS에서는 3배를 기준으로 제작을 한다.

 

고로, 비트맵 이미지를 저장할 땐,

@3x로 제작 후 UI기준 1x기준으로 사이즈 축소 하면 끝! -> 나중에 내보내기 했을 때 @2x @3x가 붙더라도 깨지지않고 2배, 3배된 이미지를 잘 확인할 수 있다. 

 

<픽셀 밀도 및 비율 : @2x, @3x>

24x24 | @1x | 1pt = 1px | ic-picture.png
48x48 | @2x | 1pt = 2px | ic-picture@2x.png
64x64 | @3x | 1pt = 3px | ic-picture@3x.png

*스케일 팩터에 따라서 접미사를 파일명에 꼭 붙여줘야 한다.

 

• 비트맵 이미지: @3x 기준
• 벡터 그래픽: .pdf (x1)
• 비트맵 이미지: .jpg (x3)
• 그래픽 이미지: .png (x3)
• 파일명: 스케일 팩터에 따라 접미사(@2x, @3x) 추가

 

에셋 이름의 작명 방법

iOS 개발에서 많이 사용되는 작명 규칙 3가지
camelCase	kebab-case	snake_case
iconHeart.pdf	icon-heart.pdf	icon_heart.pdf
개발시 변수나 함수, 클래스 생성시 주로 사용	iOS에서 일반적으로 사용

 

디자이너 입장에서 개발자에게 전달할 땐 kebab-case를 많이 사용한다.

*물론 팀 내 개발 규칙이나 개인적인 취향에 따라 다를 수 있다는 것< 중요한 것은 일관성있는 작명 규칙을 사용하여 협업과 유지보수에 도움이 되는것이다(:

 

 

앱 아이콘 가이드라인

 

독특하고 기억하기 쉬운 아이콘은 경험의 목적과 성격을 전달하고 사람들이 App Store와 기기에서 앱을 한눈에 알아볼 수 있도록 도와준다.

• 모범 사례:
  • 단순함
  • 플랫폼 간 일관성
  • 텍스트 사용 제한
  • 그래픽 이미지 선호
• 사이즈 조정:
  • 불필요한 디테일 제거 (앱 아이콘의 사이즈가 달라지면, 불필요한 디테일을 제거하고 기본 기능에 집중해야 한다.  ex. 512x512 px Safari 앱 아이콘은 눈금 표시 원을 사용하여 각도를 나타낸다. 하지만 아이콘의 16x16 픽셀 버전에는 이 세부 정보가 포함되어 있지 않다.)

<tvOS, watchOS>

tvOS 앱 아이콘	watchOS 앱 아이콘
여러 레이어를 분리하여 만들게 되면, 포커스할 때 계층에 대한깊이감을 표현할 수 있다(:	원형으로 이루어진 아이콘만 노출되며, 앱 텍스트는 표시되지 않는다. 애초에 워치가 검정 배경인 경우가 많기 때문에, 검정 배경은 사용하면 안 됨!

 

iOS 앱 아이콘 만들기

 

하나의 1024 x 1024 PNG 파일만 제출하면 플랫폼에서 다양한 장치 및 하위 메뉴에 맞게 자산 크기를 자동으로 조정해준다(: 안드로이드에 비해서 제작할 파일이 훨씬 더 간단!ㅎㅎ

• 제작 방법:
  • 1024 x 1024 PNG 파일 제출
  • 확장자: PNG
  • 컬러모드: RGB (sRGB or P3)
  • 레이어: 투명도 없는 단일 레이어
  • 모서리: 둥근 모서리 없는 정사각형

앱스토어

 

• 애플에서 만든 앱 마켓 플랫폼
• 누군가가 이 탐색과정에서 이 앱을 파악할 수 있어야 함.
• 미리보기 이미지는 이 앱이 어떻게 생겼는지 파악할 수 있다.
• 스크린샷 이미지:
  • 앱의 특장점 설명
  • 두 가지 비율 형식
  • 아이폰 목업 사용
  • 최대 10개 스크린샷 제공 가능

 

<스크린샷 가이드라인 - 2024기준>

iPhone 5.5형	iPhone 6.5형	iPad
1242 x 2208	1242 x 2688	2048 x 2732(세로형)

 

iPad비율을 제작하지 않을거라면, 최소 두가지 비율의 형식으로 스크린샷 만들어야 함. 규격은 조금씩 달라지고 있지만, 실제로 앱스토어에 등록할 때- 개발자와 소통하면 어떤 사이즈를 등록해야하는지 안내를 받을것. 그것을 기준으로 작업하면 되니까 정확한 수치까지 항상 외울 필요는 없음!ㅎㅎ

 

참고: developer.apple.com에서 예시 확인