UX/UI 디자인 이해하기
Apple의 HIG
Apple의 HIG와 유튜브 자료를 참고해서 정리해 봤습니다. OS마다 조금씩 가이드 라인이 다르긴하지만
그래도 기본적인, 기초적인 흐름과 개념은 거의 비슷한 것 같습니다.
조금씩 어떤 개념이 필요하고 어떤 생각으로 디자인을 하는지에 대해 생각이 많아지긴 하지만
그럼에도 나의 생각을 무언가로 표출하고 창작할 수 있다는 건 진짜 매력적이라고 생각합니다.
iOS 디자인 개념 정리
1. 해상도와 단위 이해하기
pt(Point) : iOS UI에서 사용하는 기준 단위 (디자인 작업은 pt 단위로 진행).
px(Pixel) : 실제 화면의 픽셀 단위.
iOS는 고해상도 디스플레이(Retina)를 사용하기 때문에 1pt ≠ 1px. 예시: 1pt가 실제로 2px(2x) 또는 3px(3x)로 표현될 수 있음.
정리 디자인: pt 단위로 작업. 개발/에셋: 디바이스 해상도에 따라 자동으로 픽셀로 변환됨.
2. 레이아웃 이해하기
iOS는 다양한 기기(아이폰 SE ~ 아이패드)에서 UI가 깨지지 않아야 함.
주요 개념: Auto Layout : 화면 크기에 맞춰 UI 자동 조정. Safe Area : 홈 인디케이터, 노치 등 시스템 UI가 차지하는 영역을 피해서 콘텐츠를 배치. Stack View : 컴포넌트를 세로/가로로 정렬할 때 사용.
포인트 : 디자이너는 “어떤 레이아웃 제약조건(Constraints)”을 줄지 고려해야 함.
3. 타이포그래피
iOS 기본 서체: San Francisco (SF Pro).
크기와 가이드라인은 Apple의 HIG(Human Interface Guidelines)를 참고.
Autoshrink (자동 폰트 축소): 긴 텍스트가 화면에 다 안 들어갈 때 자동 축소 기능. (UILabel 속성) Minimum Font Scale : 폰트가 지정된 비율까지만 줄어듦 (예: 0.8 → 80% 크기까지). Minimum Font Size : 폰트가 특정 pt까지만 줄어듦 (예: 12pt 이하로는 줄어들지 않음).
4. 주요 컴포넌트 정리
콘텐츠 컴포넌트 : 차트, 이미지뷰, 텍스트뷰, 웹뷰
레이아웃/구성 : 컬렉션, 박스, 레이블, 리스트·테이블
메뉴·액션 : 메뉴, 버튼, 툴바, 액티비티뷰
네비게이션/검색 : 탭바, 사이드바, 검색 필드, 네비게이션바
프레젠테이션 : 액션시트, 경고창, 페이지 컨트롤, 팝오버, 스크롤 뷰, 시트
셀렉션/인풋 : 키보드, 피커, 세그먼트 컨트롤, 슬라이더, 토글
시스템 경험 : 홈 화면 퀵액션, 라이브 액티비티, 알림, 상태바, 위젯
정리: iOS 컴포넌트는 이미 Apple이 제공하는 “표준”이 있으므로, 최대한 기본 컴포넌트를 활용하는 것이 UX 일관성에 좋음.
5. 에셋 (Assets)
저장이 필요한 항목 비트맵 기반 이미지 (jpg, png 등) 벡터 기반 아이콘 (pdf) 공통 아이콘 (뒤로가기, 닫기 등)
내보내기 방식 비트맵 → @3x 사이즈로 준비 → 1x, 2x는 자동으로 축소됨. 벡터 → .pdf(1x로) 내보내기. iOS에서 자동 스케일링.
원칙: iOS는 고해상도(3x) 기준으로 준비하면 안전.
6. 앱 아이콘 디자인 가이드
단순함 : 복잡한 디테일보다는 직관적인 이미지.
일관성 : iOS 전체 톤 앤 매너와 맞춰야 함.
텍스트 제한 : 글자는 최소화 → 아이콘은 “그래픽” 위주.
모양 : Apple이 자동으로 둥근 사각형 마스크를 적용하므로 모양 통일성 필요.
7. 앱 스토어 스크린샷
목업 규칙: 반드시 iPhone 기기 목업 사용 (Android, 다른 기기 불가).
앱 아이콘 영역
미리보기 영역 (앱의 핵심 기능 강조 스크린샷)
헤드 카피 (짧고 강렬한 문구)
서브 카피 (보조 설명)
브랜드 컬러를 활용한 배경
포인트 : “기능 나열”이 아니라 앱의 가치를 전달하는 방식으로 구성.
