Color
Last updated
Last updated
Color is a great way to impart vitality, provide visual continuity, communicate status information, give feedback in response to user actions, and help people visualize data. Look to the system’s color scheme for guidance when picking app tint colors that look great individually and in combination, on both light and dark backgrounds.
색상은 활력을주고, 시각적 연속성을 제공하고, 상태 정보를 전달하고, 사용자 조치에 대한 피드백을 제공하고, 사람들이 데이터를 시각화하는 데 도움이 되는 훌륭한 방법입니다. 밝은 배경과 어두운 배경 모두에서 개별적으로나 조합으로 보기 좋은 App tint 색상을 선택할 때 시스템의 색상표를 참조하십시오.
Use color judiciously for communication. The power of color to call attention to important information is heightened when used sparingly. For example, a red triangle that warns people of a critical problem becomes less effective when red is used elsewhere in an app for noncritical reasons.
의사 소통을 위해 색상을 신중하게 사용하십시오. 잘 사용하면 중요한 정보에 관심을 이끄는데에 색상의 힘이 높아집니다. 예를 들어, 사람들에게 심각한 문제에 대해 경고하는 빨간색 삼각형은 중요하지 않은 이유로 앱의 다른 곳에서 빨간색을 사용하면 덜 효과적입니다.
Use complementary colors throughout your app. The colors in your app should work well together, not conflict or distract. If pastels are essential to your app’s style, for example, use a coordinating set of pastels.
앱 전체에 걸쳐 상호 보완적인 색상을 사용하십시오. 앱의 색상은 충돌이나 주의가 산만하지 않고 서로 잘 어울려야 합니다. 예를 들어, 파스텔이 앱 스타일에 필수적인 경우, 파스텔의 조정 세트를 사용하십시오.
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.
*일반적으로 앱 로고와 일치하는 제한된 색상 팔레트를 선택하십시오. 색상의 미묘한 사용은 브랜드와 소통하는 좋은 방법입니다.
Consider choosing a key color to indicate interactivity throughout your app. In Notes, interactive elements are yellow. In Calendar, interactive elements are red. If you define a key color that denotes interactivity, make sure other colors don’t compete with it.
앱 전체에서 상호작용성을 표시하는 키 색상을 선택하는 것을 고려하십시오. Notes에서 상호작용 요소는 노란색입니다. 달력에서 상호작용 요소는 빨간색입니다. 상호작용을 나타내는 키 색상을 정의하는 경우 다른 색상과 비교되지 않도록 하십시오.
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.
상호작용 요소 및 비상호작용 요소에 동일한 색상을 사용하지 마십시오. 상호작용 요소와 비상호작용 요소의 색상이 동일하면 어디에서 탭해야 하는지 알 수 없습니다.
Consider how artwork and translucency affect nearby colors. Variations in artwork sometimes warrant changes to nearby colors in order to maintain visual continuity and prevent interface elements from becoming overpowering or underwhelming. Maps, for example, displays a light color scheme when using map mode but switches to a dark color scheme when satellite mode is activated. Colors can also appear different when placed behind a translucent element, or when applied to a translucent element, such as a toolbar.
아트워크와 반투명도가 주변 색상에 미치는 영향을 고려하십시오. 아트워크의 다양성으로 인해 시각적 연속성을 유지하고 인터페이스 요소가 압도적 또는 감흥적이어지지 않도록 하기 위해 주변 색상의 변경이 필요한 경우가 있습니다. 예를 들어 맵은 맵 모드를 사용할 때 밝은 색 구성표를 표시하지만 위성 모드가 활성화되면 어두운 색 구성 요소로 전환됩니다. 색상은 반투명 요소 뒤에 배치되거나 툴바와 같은 반투명 요소에 적용할 때 다르게 나타날 수도 있습니다.
Test your app’s color scheme under a variety of lighting conditions. Lighting varies significantly both indoors and outdoors, based on room ambiance, time of day, the weather, and more. Colors you see on your computer won’t always look the same when your app is used in the real world. Always preview your app under multiple lighting conditions, including outdoors on a sunny day, to see how colors appear. If necessary, adjust colors to provide the best possible viewing experience in the majority of use cases.
다양한 조명 조건에서 앱의 색 구성표를 테스트하십시오. 조명은 실내 분위기, 시간대, 날씨 등을 기준으로 실내 및 실외에 따라 크게 다릅니다. 앱을 실제 환경에서 사용할 때 컴퓨터에서 보는 색상이 항상 똑같지는 않습니다. 화창한 날 실외를 포함한 여러 조명 조건에서 항상 앱을 미리 보고 색이 어떻게 표시되는지 확인하십시오. 필요한 경우 색상을 조정하여 대부분의 사용 경험에서 최상의 보기 환경을 제공하십시오.
Consider how the True Tone display affects color. The True Tone display uses ambient light sensors to automatically adjust the white point of the display to adapt to the lighting conditions of the current environment. Apps that focus primarily on reading, photos, video, and gaming can strengthen or weaken this effect by specifying a white point adaptivity style. For developer guidance, see Information Property List Key Reference.
True Tone 디스플레이가 색상에 미치는 영향을 고려하십시오. True Tone 디스플레이는 주변 조도 센서를 사용하여 현재 환경의 조명 조건에 맞게 디스플레이의 흰색 포인트를 자동으로 조정합니다. 주로 읽기, 사진, 비디오, 게임에 집중하는 앱은 화이트 포인트 적응 스타일을 지정하여 이러한 효과를 강화하거나 약화시킬 수 있습니다.
Be aware of colorblindness. 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, you could use a red square and a green circle. Some image-editing software includes tools that can help you proof for colorblindness.
색맹에 유의하십시오. 예를 들어, 많은 색맹 사람들은 빨간색을 녹색과 구별하거나(그리고 회색과 파란색 중 어느 쪽이든) 주황색을 구별하기 어렵다는 것을 압니다. 두 상태 또는 값을 구분할 수 있는 유일한 방법으로 이러한 색상 조합을 사용하지 마십시오. 예를 들어 빨간색 및 녹색 원을 사용하여 오프라인 및 온라인 상태를 표시하는 대신 빨간색 사각형과 녹색 원을 사용할 수 있습니다. 일부 이미지 편집 소프트웨어에는 색맹을 입증하는 데 도움이 되는 도구가 포함되어 있습니다.
Consider how your use of color might be perceived in other countries and cultures. In some cultures, for example, red communicates 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. An online color contrast calculator can help you accurately analyze the color contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.
충분한 색상 대비 비율을 사용하십시오. 앱에서 대비가 부족하면 모든 사용자가 컨텐츠를 읽기 어렵습니다. 예를 들어 아이콘과 텍스트가 배경과 혼합될 수 있습니다. 온라인 색상 대비 계산기를 사용하면 앱의 색상 대비를 정확하게 분석하여 최적의 표준을 충족할 수 있습니다. 최소한 대비율 4.5:1을 노력하고, 좀 더 엄격한 접근성 표준을 충족시키기 때문에 7:1이 선호된다.
Apply color profiles to your images. The default color space on iOS is Standard RGB (sRGB). To ensure that colors are correctly matched to this color space, make sure your images include embedded color profiles.
이미지에 색상 프로파일을 적용하십시오. iOS의 기본 색상 공간은 표준 RGB (sRGB)입니다. 색상이 이 색 공간과 올바르게 일치하도록 하려면 색상 프로파일이 심어진 이미지어야 합니다.
Use wide color to enhance the visual experience on compatible displays. Wide color displays support a P3 color space, which can produce richer, more saturated colors than sRGB. As a result, photos and videos that use wide color are more lifelike, and visual data and status indicators that use wide color are more impactful. When appropriate, use the Display P3 color profile at 16 bits per pixel (per channel) and export images in .png format. Note that a wide color display is needed to design wide color images and select P3 colors.
호환되는 디스플레이에서 시각적 경험을 향상시키기 위해 넓은 색상을 사용하십시오. 와이드 컬러 디스플레이는 s3GB보다 더 풍부하고 포화 된 색상을 생성 할 수있는 P3 색상 공간을 지원합니다. 결과적으로 넓은 색상을 사용하는 사진 및 비디오는 더욱 생생하고 광범위한 색상을 사용하는 시각적 데이터 및 상태 표시기가 더 큰 영향을줍니다. 해당하는 경우 디스플레이 P3 색상 프로파일을 픽셀 당 16 비트 (채널당)로 사용하고 이미지를 .png 형식으로 내 보냅니다. 와이드 컬러 이미지를 디자인하고 P3 색상을 선택하려면 넓은 컬러 디스플레이가 필요합니다.
Provide color space-specific image and color variations when the experience calls for it. In general, P3 colors and images tend to appear as expected on sRGB devices. Occasionally, however, it may be hard to differentiate between two very similar P3 colors when they're viewed in sRGB. Gradients that use colors in the P3 spectrum can also sometimes appear clipped on sRGB devices. To avoid these issues, you can provide distinct images and colors in the asset catalog of your Xcode project to ensure visual fidelity on both wide color and sRGB devices.
경험할 때 색상 공간 별 이미지 및 색상 변형을 제공하십시오. 일반적으로 P3 색상 및 이미지는 sRGB 장치에서 예상대로 표시되는 경향이 있습니다. 그러나 때로는 sRGB에서 볼 때 매우 유사한 두 P3 색상을 구별하기 어려울 수 있습니다. P3 스펙트럼에서 색상을 사용하는 그라디언트가 때때로 sRGB 장치에서 잘린 것처럼 보일 수도 있습니다. 이러한 문제를 피하기 위해 Xcode 프로젝트의 에셋 카탈로그에서 고유한 이미지와 색상을 제공하여 와이드 컬러 및 sRGB 장치 모두에서 시각적 충실도를 보장 할 수 있습니다.
Preview your app’s colors on actual sRGB and wide color displays. Make adjustments as needed to ensure an equally great visual experience on both types of displays.
실제 sRGB 및 와이드 컬러 디스플레이에서 앱의 색상을 미리 보십시오. 두 가지 유형의 디스플레이에서 똑같이 뛰어난 시각적 경험을 보장 할 수 있도록 필요에 따라 조정하십시오.
Tip. On Macs with wide color displays, you can use the system color picker to select and preview P3 colors, and to compare them with sRGB colors.
와이드 컬러 디스플레이가 장착 된 Mac에서는 시스템 색상 선택기를 사용하여 P3 색상을 선택 및 미리보고 sRGB 색상과 비교할 수 있습니다.
Color - Visual Design - iOS - Human Interface Guidelines - Apple Developer
