# Apple Design Resources Apple Design Resources(ADR)는 Apple 생태계의 UI/UX 설계를 지원하기 위한 공식 자산과 도구의 모음이다. 이 문서는 ADR의 구성, 활용 방법, 원칙, 실무 적용 사례를 체계적으로 정리한 백과사전식 안내서이다. 용어는 영어로 병용되며, 한국어 해설을 병기한다. ## 개요 - 목적: iOS, iPadOS, macOS, watchOS, tvOS 등 Apple 플랫폼에서 일관된 사용자 경험을 제공하기 위한 디자인 리소스의 표준화를 목표로 한다. - 핵심 자산: SF Symbols(아이콘), SF Pro 폰트 계열, 컬러 팔레트, 아이콘 세트, UI 템플릿 및 예제, 벡터 자산, 디자인 시스템 문서 등. - 접근 방법: 디자이너와 개발자가 같은 원칙과 리소스를 공유하여 협업 효율을 높이고, 다크 모드 및 접근성(Accessibility)을 내재한 UI를 구현할 수 있도록 돕는다. ## 역사적 배경 - Human Interface Guidelines(HIG)와 ADR은 Apple의 디자인 철학을 공식적으로 뒷받침하기 위해 발전해 왔다. - ADR이 제공하는 리소스는 iOS 초기 아이콘부터 현대의 벡터 아이콘, 시스템 폰트, 색상 팔레트까지 디자인의 기본 축을 구성한다. - 플랫폼 간 일관성 유지와 지역화(localization), 접근성(A11y) 개선을 위한 지속적 업데이트가 이루어진다. ## 핵심 구성 요소 ### SF Symbols - 개요: 아이콘 아이콘셋으로, 벡터 형식의 심볼을 모아 제공한다. 화면 해상도에 따라 선명도를 유지하며 UI 구성 요소와의 시각적 조화를 돕는다. - 사용 가이드: 다양한 버튼, 탭 바, 내비게이션 요소에 일관된 아이콘을 적용하는 데 권장된다. 크기와 배치, 계층 구조에 따라 심볼의 가독성을 유지해야 한다. - 포맷: 주로 벡터(PDF/SVG)와 래스터(PNG) 형태로 활용 가능하며, Xcode 및 Design 도구와의 연동이 용이하다. - 라이선스: ADR 포털의 라이선스 조건에 따라 사용한다. 디자인 자산의 배포나 상업적 목적의 사용 여부는 라이선스에 명시된 범위를 따른다. ### SF Pro 폰트 계열 - 개요: 시스템 UI 텍스트를 위한 폰트 세트로, SF Pro(/SF Pro Display, SF Pro Text 등) 계열이 포함된다. - 사용 가이드: 가독성과 읽기 흐름을 최적화하기 위해 Dynamic Type, Accessibility 설정과 조화를 이루도록 설계된다. - 포맷: 대개 OTF/TTF 형태의 폰트 파일로 제공되며, Apple 플랫폼에서의 사용을 전제로 한다. - 라이선스: Apple 플랫폼 내 앱 개발/디자인 용도로 주로 허용되며, 재배포나 비Apple 환경에서의 사용 여부는 라이선스 조건에 준한다. ### 컬러 팔레트(Apple Color Palette) - 개요: 다크 모드와 라이트 모드 모두에서 일관된 시각적 경험을 제공하는 색상 체계. - 원칙: 시스템 색상(System Colors)과 확장 팔레트를 포함하며, 대비(contrast)와 접근성 가이드를 반영한다. - 활용 팁: 색상은 주요 인터랙션(버튼, 링크, 경고 등)에 대해 명확한 계층을 형성하도록 배치한다. ### 아이콘/그래픽 아이덴티티 - 아이콘 스타일: 단순화된 기하학적 형태, 명확한 시그널 전달, 해상도에 따른 가독성 유지. - 배치 규칙: 아이콘 간의 간격, 아이콘과 텍스트의 정렬, 그룹화 규칙을 통해 인터페이스의 예측 가능성을 높인다. ### 템플릿 및 UI 킷(UI Kits) - 포맷: iOS, iPadOS, macOS, watchOS, tvOS용 UI 템플릿과 컴포넌트 세트를 제공한다. - 활용 방법: 디자이너가 프로토타이핑과 디자인 시스템 문서를 빠르게 구성하고, 개발자는 그에 맞춘 Asset Catalog 및 코드 레이아웃으로 이행한다. ### 이미지와 일러스트레이션 - 포맷: 벡터 및 래스터 자산, 아이콘, 배경 이미지, 일러스트레이션 등 다양한 형식으로 제공된다. - 접근성: 대체 텍스트(alt text) 및 설명적 이미지 사용 권장. ### 접근성(Accessibility) 가이드 - 원칙: 읽기 쉬운 텍스트 크기, 충분한 대비, 보조 기술과의 호환성, 키보드 네비게이션 및 화면 읽기 도구 지원 등. - 구현 포인트: Dynamic Type, VoiceOver 친화성, 레이블링 및 시멘틱 구조 유지. ## 사용 가이드 및 모범 사례 ### 라이선스와 저작권 - ADR의 모든 자산은 Apple의 라이선스 하에 배포된다. 디자인 활동 목적의 사용은 대부분 허용되나, 재배포나 상업적 재가공 여부는 라이선스 조항에 따라 달라질 수 있다. - 실제 사용 시 ADR 포털의 라이선스 문서를 확인하고, 필요한 경우 저작권 표시를 준수한다. ### 버전 관리와 업데이트 - ADR 자산은 버전 업데이트를 통해 새로운 아이콘, 글꼴 스타일, 색상 팔레트, 템플릿이 반영된다. - 팀은 디자인 시스템 리포지터리에서 버전 태깅과 자산 변경 로그를 관리하는 것이 좋다. ### 개발자와의 협업 - 아이콘과 텍스트 스타일은 코드에서 재현 가능하도록 명확한 사양(sizes, weights, paddings)을 문서화한다. - 앱의 디자인 시스템은 ADR의 원칙에 맞춰 구현되도록, 디자인 파일과 코드 간의 싱크를 유지한다. ### 국제화와 지역화 - 다언어 지원 인터페이스의 경우 글꼴 가변성, 텍스트 확장, 방향성(RTL) 등을 고려한다. - 색상과 아이콘은 문화적 맥락에 의해 다르게 해석될 수 있으므로 국제화 카테고리에 맞춘 리소스 구성이 필요하다. ### 접근성 고려 - 충분한 대비 비율(예: 텍스트 대비)과 동적 텍스트 지원을 기본으로 설계한다. - 모든 아이콘과 제어 요소에 명확한 레이블을 부여하고, 화면 읽기 도구와의 호환성을 확보한다. ## 실전 적용 예시 - 버튼 구성: 기본 버튼, 강조 버튼, 비활성 상태의 시각적 차이 및 접근 가능한 레이블링. - 내비게이션: 탭 바, 내비게이션 바, 세컨더리 액션의 아이콘 배치와 간격 규칙. - 아이콘 활용: 프레임워크 컴포넌트와의 연계를 위한 SF Symbols의 키 명칭(Ket) 및 솔루션. - 다크 모드 대응: 색상 팔레트의 다크 모드 버전 적용 및 아이콘의 색상 조정. ## 다운로드 위치 및 준비 절차 - ADR 포털 접속: Apple Design Resources 공식 사이트를 통해 자산을 확인하고 다운로드한다. - 파일 형식 선택: 필요에 따라 SVG/PNG/PDF 형식의 아이콘, OTF/TTF 형식의 폰트를 선택한다. - 프로젝트에 통합: Xcode의 Asset Catalog, Color Set, Font Set에 자산을 구성하고, 코드에서 UI 구성 요소와 연계한다. - 품질 보증: 다크 모드 및 접근성 테스트를 수행하고, 팀의 디자인 시스템 문서와 일치하는지 확인한다. ## 버전 관리 및 호환성 - 플랫폼별 차이: iOS, macOS, watchOS, tvOS 등에 따라 자산의 사용 지침이 다를 수 있으므로, 플랫폼별 문서를 병행 참조한다. - backward 호환성: 새로운 심볼이나 폰트 도입 시 이전 버전과의 시각적 차이를 최소화하기 위한 대체 자산 관리가 권장된다. ## 참고 및 비교 문서 - HIG(Human Interface Guidelines)와 ADR의 관계를 이해하면, Apple 생태계 전반의 UX 원칙을 더욱 효과적으로 적용할 수 있다. - SF Symbols, SF Pro 폰트, Apple Color Palette 등의 개별 리소스에 대한 상세 문서는 각각의 전용 문서에서 다룬다. --- 관련 문서: