Animation can offer a layer of additional visual context to the content that appears onscreen. When used appropriately, animation can convey status, provide feedback, enhance the sense of direct manipulation, and help users visualize the results of their actions.
애니메이션은 화면에 나타나는 콘텐츠에 추가적인 시각적 컨텍스트 계층을 제공할 수 있습니다. 적절하게 사용될 경우, 애니메이션은 상태를 전달하고 피드백을 제공하며 직접 조작의 감각을 향상시키며 사용자가 그들의 행동 결과를 시각화하도록 도울 수 있다.
Use animation judiciously. Don’t use animation for the sake of using animation. Excessive or gratuitous animation is distracting.
애니메이션을 현명하게 사용하십시오. 애니메이션을 사용하기 위해 애니메이션을 사용하지 마십시오. 과도하거나 불필요한 애니메이션은 주의를 산만하게 한다.
Strive for realism and credibility. People tend to accept artistic license, but they can feel disoriented when movement doesn’t make sense or appears to defy physical laws.
현실성과 신뢰성을 위해 노력하라. 사람들은 예술적 라이선스를 받아들이는 경향이 있지만, 움직임이 이치에 맞지 않거나 물리적 법칙을 거스르는 것처럼 보일 때 방향감각을 잃을 수 있다.
Use consistent animation. Users are accustomed to the subtle animation used throughout CarPlay, including smooth transitions and physics-based scrolling. Custom animation should be comparable to the built-in animations.
일관된 애니메이션을 사용하십시오. 사용자는 부드러운 전환과 물리 기반 스크롤을 포함하여 CarPlay 전체에서 사용되는 미묘한 애니메이션에 익숙합니다. 사용자 지정 애니메이션은 기본 제공 애니메이션과 비교할 수 있어야 합니다.
Make animations optional. When the option to reduce motion is enabled in accessibility settings on the connected iPhone, your app should minimize or eliminate application animations.
애니메이션을 선택 사항으로 만듭니다. 연결된 아이폰의 접근성 설정에서 모션을 줄이는 옵션이 활성화되면 앱에서 응용 프로그램 애니메이션을 최소화하거나 제거해야 합니다.
Successful branding involves more than just displaying a logo throughout your app. Great apps express their unique brand identity through smart font, color, and image decisions.
성공적인 브랜딩은 단순히 당신의 앱 전체에 로고를 표시하는 것 이상을 포함한다. 훌륭한 앱들은 스마트 폰트, 색상, 이미지 결정을 통해 그들의 고유한 브랜드 정체성을 표현한다.
Incorporate refined, unobtrusive branding. People don’t use CarPlay apps to see advertising. If they’re using your app, you’ve already sold them on it. For the best experience, subtly incorporate your brand through your app’s design. For example, consider using colors from your app icon throughout the interface.
세련되고 눈에 띄지 않는 브랜딩을 통합하십시오. 사람들은 광고를 보기 위해 CarPlay 앱을 사용하지 않습니다. 만약 그들이 당신의 앱을 사용하고 있다면, 당신은 이미 그것들을 판매한 것이다. 최상의 경험을 위해 앱의 디자인을 통해 당신의 브랜드를 미묘하게 통합하세요. 예를 들어, 인터페이스 전체에서 앱 아이콘의 색상을 사용하는 것을 고려해 보십시오.
Focus on consistency and functionality over branding. Make sure your app feels like a CarPlay app. It should be intuitive, easy to navigate, easy to use, and offer functionality that's useful while driving.
브랜드보다는 일관성과 기능성에 초점을 맞추세요. 당신의 앱이 CarPlay 앱처럼 느껴지도록 하세요. 직관적이고, 탐색하기 쉽고, 사용하기 쉬우며, 운전 중 유용한 기능을 제공해야 합니다.
Adhere to Apple's trademark guidelines. Apple trademarks should not appear in your app name or imagery. See Apple Trademark List and Guidelines for Using Apple Trademarks.
Apple의 상표 지침을 준수하십시오. Apple 상표는 앱 이름이나 이미지에 표시되지 않아야 합니다. Apple 상표 목록 및 Apple 상표 사용 지침을 참조하십시오.
TIPThe App Store offers more opportunities to highlight your brand. For guidance, see App Store Marketing Guidelines.
TIPT 앱스토어는 당신의 브랜드를 강조할 수 있는 더 많은 기회를 제공한다. 자세한 내용은 앱스토어 마케팅 지침을 참조하십시오.
Color can indicate interactivity, impart vitality, and provide visual continuity.
색은 상호작용성을 나타내고, 활력을 주며, 시각적 연속성을 제공할 수 있다.
In general, choose a limited color palette that coordinates with your app logo. Subtle use of color is a great way to communicate your brand.
일반적으로, 당신의 앱 로고와 조화를 이루는 한정된 색상 팔레트를 선택하세요. 미묘한 색상 사용은 당신의 브랜드를 전달하는 좋은 방법입니다.
Avoid using the same color for interactive and noninteractive elements. If interactive and noninteractive elements have the same color, it’s hard for people to know where to tap.
대화형 및 비대화형 요소에 동일한 색상을 사용하지 마십시오. 대화형 및 비대화형 요소의 색상이 동일하면 사용자가 어디를 눌러야 하는지 알기 어렵습니다.
Test your app’s color scheme under a variety of lighting conditions in an actual car. Lighting varies significantly based on time of day, weather, window tinting, and more. Colors you see on your computer at design time won’t always look the same when your app is used in the real world. Consider how color brightness may affect driving conditions at night, and how low-contrast colors may wash out in direct sunlight. Always preview your app under multiple lighting conditions to see how colors appear. If necessary, make adjustments to provide the best possible viewing experience in the majority of use cases.
실제 자동차에서 다양한 조명 조건에서 앱의 색 구성을 테스트하십시오. 조명은 시간, 날씨, 윈도우 틴팅 등에 따라 크게 다릅니다. 디자인 시 컴퓨터에 표시되는 색상은 실제 앱을 사용할 때 항상 동일하게 보이지는 않습니다. 색상 밝기가 야간 주행 조건에 어떤 영향을 미칠 수 있는지, 그리고 대비가 낮은 색상이 직사광선 아래서 어떻게 씻겨 나갈 수 있는지 고려해 보십시오. 여러 조명 조건에서 항상 앱을 미리 보고 색이 어떻게 나타나는지 확인하십시오. 필요한 경우 대부분의 사용 사례에서 가능한 최상의 보기 환경을 제공하도록 조정하십시오.
Favor dark backgrounds. Light backgrounds can be distracting, especially at night. In general, light content on a dark background tends to work well in most lighting conditions.
어두운 배경을 선호한다. 밝은 배경은 특히 밤에 산만할 수 있다. 일반적으로 어두운 배경의 빛 콘텐츠는 대부분의 조명 조건에서 잘 작동하는 경향이 있다.
Be aware of colorblindness and how different cultures perceive color. People see colors differently. Many colorblind people, for example, find it difficult to distinguish red from green (and either color from gray), or blue from orange. Avoid using these color combinations as the only way to distinguish between two states or values. For example, instead of using red and green circles to indicate offline and online, use a red square and a green circle. Some image-editing software includes tools that can help you proof for colorblindness. Also consider how your use of color might be perceived in other countries and cultures. In some cultures, for example, red is used to communicate danger. In others, red has positive connotations. Make sure the colors in your app send the appropriate message.
색맹과 다른 문화들이 색을 어떻게 인식하는지에 주의하라. 사람들은 색을 다르게 본다. 예를 들어, 많은 색맹인 사람들은 빨간색과 녹색을 구별하는 것을 어려워한다. 이러한 색상 조합을 두 상태 또는 값을 구별하는 유일한 방법으로 사용하지 마십시오. 예를 들어 빨간색과 녹색 원을 사용하여 오프라인 및 온라인을 표시하는 대신 빨간색 사각형과 녹색 원을 사용합니다. 일부 이미지 편집 소프트웨어에는 색맹을 방지하는 데 도움이 되는 도구가 포함되어 있습니다. 또한 당신의 색깔 사용이 다른 나라와 문화에서 어떻게 인식될 수 있는지 생각해 보세요. 예를 들어, 어떤 문화권에서는 빨간색이 위험을 전달하기 위해 사용된다. 다른 것들에서, 빨간색은 긍정적인 의미를 가지고 있습니다. 앱의 색상이 적절한 메시지를 보내는지 확인합니다.
Use sufficient color contrast ratios. Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. A contrast ratio of 7:1 or higher is preferred. An online color contrast calculator can help you accurately analyze the color contrast in your app.
충분한 색 대비 비율을 사용하십시오. 앱의 대비가 부족하면 모든 사용자가 내용을 읽기 어렵습니다. 예를 들어 아이콘과 텍스트가 배경과 혼합될 수 있습니다. 7:1 이상의 대비가 바람직하다. 온라인 색 대비 계산기를 사용하면 앱의 색 대비를 정확하게 분석할 수 있습니다.
CarPlay supports several landscape-orientation display resolutions with varying pixel densities and aspect ratios. Take extra care in designing your layout so that it looks great on all possible screen sizes. The system automatically scales app icons and interfaces based on the resolution of the display, so they always appear onscreen at roughly the same size.
CarPlay는 다양한 픽셀 밀도와 가로 세로 비율로 여러 가지 가로 방향 디스플레이 해상도를 지원합니다. 레이아웃이 가능한 모든 화면 크기에서 잘 보이도록 레이아웃을 설계할 때 각별히 주의하십시오. 시스템은 디스플레이 해상도에 따라 앱 아이콘과 인터페이스의 크기를 자동으로 조정하므로 항상 대략적으로 동일한 크기로 화면에 나타납니다.
| Dimensions | Aspect ratio |
|---|---|
| 800px × 480px | 5:3 |
| 960px × 540px | 16:9 |
| 1280px × 720px | 16:9 |
| 1920px × 720px | 8:3 |
Provide useful, focused information in a clean layout that’s easy to scan from the driver’s seat. Don’t clutter the screen with nonessential details and unnecessary adornments.
운전석에서 스캔하기 쉬운 깨끗한 레이아웃으로 유용하고 집중적인 정보를 제공합니다. 불필요한 디테일과 불필요한 장식으로 화면을 어지럽히지 마십시오.
Maintain an overall consistent appearance throughout your app. In general, elements with similar functions should look similar.
앱 전체에서 전체적으로 일관된 모양을 유지하십시오. 일반적으로 비슷한 기능을 가진 요소는 비슷하게 보여야 합니다.
Ensure that primary content stands out and feels actionable. Large items catch the eye, appear more important than smaller ones, and are easy to tap. In general, place the most important content and controls in the upper half of the screen.
주요 콘텐츠가 눈에 띄고 액션성을 느끼는지 확인합니다. 큰 아이템은 눈에 띄고, 작은 아이템보다 더 중요하게 보이며, 탭하기 쉽습니다. 일반적으로 가장 중요한 콘텐츠와 컨트롤을 화면의 위쪽에 배치합니다.
Use alignment to ease scanning and to communicate organization and hierarchy. Alignment makes an app look neat and organized, helps people focus while scrolling, and makes it easier to find information. Indentation and alignment can also help communicate how groups of content are related.
정렬을 사용하여 쉽게 검색하고 조직 및 계층을 전달할 수 있습니다. 정렬을 사용하면 앱이 깔끔하고 조직적으로 보이고, 사용자가 스크롤하는 동안 집중할 수 있으며, 정보를 더 쉽게 찾을 수 있습니다. 들여쓰기 및 정렬은 또한 내용 그룹이 관련된 방식을 전달하는 데 도움이 됩니다.
Provide ample spacing for interactive elements. To ensure that controls are easy to tap while driving, a minimum tappable area of 44pt × 44pt is highly recommended for all controls, even ones that appear smaller than 44pt × 44pt.
대화형 요소를 위한 충분한 공간을 제공하십시오. 조정기가 운전 중에 쉽게 두드리기 쉽도록 하려면 44pt x 44pt보다 작게 보이는 조정기를 포함한 모든 조정기에 대해 최소 44pt x 44pt의 탭 가능한 영역을 적극 권장합니다.
Position controls based on driver location. If a vehicle’s built-in touchscreen is positioned to right of the driver, primary interface controls and actions are most easily accessible when placed on the leftmost portion of the screen.
운전자 위치를 기준으로 위치 제어. 차량의 내장 터치스크린이 운전자의 오른쪽에 위치하는 경우, 기본 인터페이스 제어와 동작은 화면의 가장 왼쪽에 배치되었을 때 가장 쉽게 접근할 수 있다.
Consider the impact of physical input controls. If a driver must use a rotary knob to control CarPlay, a clear visual hierarchy should communicate how to navigate sequentially and make selections.
물리적 입력 제어의 영향을 고려하십시오. 운전자가 회전 노브를 사용하여 CarPlay를 제어해야 하는 경우, 명확한 시각적 계층 구조는 순차적으로 탐색하고 선택하는 방법을 전달해야 합니다.
San Francisco (SF) is the CarPlay system typeface. Use SF Pro Text for text 19 points or smaller, and SF Pro Display for text 20 points or larger. When you use San Francisco for text in labels and other interface elements, CarPlay automatically applies the most appropriate variant based on the point size. Download both variants here.
샌프란시스코(SF)는 카플레이 시스템의 서체이다. 텍스트 19점 이하는 SF Pro Text, 텍스트 20점 이상은 SF Pro Display를 사용합니다. 레이블 및 기타 인터페이스 요소의 텍스트에 대해 San Francisco를 사용하는 경우 CarPlay는 점 크기에 따라 가장 적합한 변형을 자동으로 적용합니다. 두 가지 버전을 모두 여기에서 다운로드하십시오.
Minimize text. Reading lots of text on a car’s built-in screen is distracting. Seriously consider how much text your app must really display and see what you can communicate with imagery instead.
텍스트를 최소화합니다. 자동차의 내장된 화면에서 텍스트를 많이 읽는 것은 주의를 산만하게 합니다. 앱이 실제로 얼마나 많은 텍스트를 표시해야 하는지 진지하게 고려하고 대신 이미지로 통신할 수 있는 것을 확인하십시오.
Emphasize important information. Use font weight, size, and color to highlight the most important information in your app.
중요한 정보를 강조합니다. 글꼴 무게, 크기 및 색상을 사용하여 앱에서 가장 중요한 정보를 강조합니다.
Avoid custom fonts. San Francisco is optimized for legibility, which is critically important while driving.
사용자 지정 글꼴을 피하십시오. 샌프란시스코는 운전 중 매우 중요한 가독성에 최적화되어 있습니다.
Use built-in text styles whenever possible. The built-in text styles use the system typeface and let you express content in ways that are visually distinct, while retaining optimal legibility.
가능하면 기본 제공 텍스트 스타일을 사용하십시오. 기본 제공 텍스트 스타일은 시스템 서체를 사용하여 최적의 가독성을 유지하면서 시각적으로 구별되는 방식으로 내용을 표현할 수 있습니다.
Use the Body text style for primary content. Use the Subhead and Footnote text styles for labels and secondary content.
기본 내용에는 본문 텍스트 스타일을 사용하고 레이블 및 보조 내용에는 부제목 및 각주 텍스트 스타일을 사용합니다.
When you use San Francisco for text in labels and other interface elements, CarPlay automatically applies the most appropriate tracking (the spacing between letters) value based on the size of the text.
레이블 및 기타 인터페이스 요소의 텍스트에 대해 샌프란시스코를 사용하는 경우 CarPlay는 텍스트 크기를 기준으로 가장 적합한 추적(문자 간 간격) 값을 자동으로 적용합니다.
iOS uses San Francisco as the system font for Latin, Greek and Cyrillic alphabets, and a variety of other typefaces for other scripts.
iOS는 라틴 문자, 그리스 문자, 키릴 문자를 위한 시스템 글꼴로 샌프란시스코를 사용하며, 다른 스크립트를 위한 다양한 서체를 사용한다.
Use the correct variant in interface mockups. Use SF Pro Text for text 19 points or smaller. Use SF Pro Display for text 20 points or larger. Adjust tracking appropriately, according to the following charts:
인터페이스 목업에서 올바른 변형을 사용하십시오. 텍스트 19점 이하의 경우 SF Pro Text를 사용하십시오. 20포인트 이상의 텍스트에는 SF Pro Display를 사용합니다. 다음 차트에 따라 추적을 적절하게 조정하십시오:
| Size (Points) | Tracking (1/1000em) |
|---|---|
| 11 | +6 |
| 12 | 0 |
| 13 | -6 |
| 14 | -11 |
| 15 | -16 |
| 16 | -20 |
| 17 | -24 |
| 18 | -25 |
| Size (Points) | Tracking (1/1000em) |
|---|---|
| 20 | +19 |
| 22 | +16 |
| 28 | +13 |
| 32 | +12 |
| 36 | +11 |
| 50 | +7 |
| 64 | +3 |
| 80 and up | 0 |
Not all apps express tracking values as 1/1000em. Point size based on image resolution of 144ppi for @2x and 216ppi for @3x designs.
모든 앱이 추적 값을 1/1000em으로 표현하는 것은 아닙니다. @2x의 경우 144ppi, @3x의 경우 216ppi의 이미지 해상도를 기반으로 한 점 크기.