[HIG] Foundations - App icons 앱 아이콘

App Icons - Foundations - Human Interface Guidelines - Design - Apple Developer

독특하고 기억에 남는 아이콘은 경험의 목적과 성격을 전달하며, 사람들이 당신의 앱 또는 게임을 자신의 기기와 앱스토어에서 한눈에 인식하도록 도와줍니다.

아름다운 앱 아이콘은 모든 애플 플랫폼에서 사용자 경험의 중요한 부분이며, 모든 앱과 게임은 반드시 하나의 아이콘을 가져야 합니다. 각 플랫폼은 앱 아이콘에 대해 살짝 다른 스타일을 정의할 수 있기 때문에, 강한 시각적 일관성과 메시지를 유지하면서도 여러 형태에 잘 적용되는 디자인과 디테일의 단계를 만들어야 합니다. 각 플랫폼을 위한 아이콘을 만드는 데 도움이 될 만한 템플릿 다운로드를 위해서는 Apple Design Resources를 참조하십시오. 다른 유형의 아이콘을 만들기 위한 가이드를 위해서는, Icons을 참조하십시오.

모범 사례

간결함을 수용하십시오.

간단한 아이콘은 사람들이 이해하고 인식하기에 더 쉬운 경향이 있습니다. 앱 또는 게임의 본질을 담는 개념 또는 요소를 찾고, 그것을 아이콘의 집중 포인트로 만들고, 그것을 독특하고 간결한 방법으로 표현하십시오. 너무 많은 세부사항을 추가하는 것을 경계하십시오. 왜냐하면 세부사항들은 식별하기 힘들고, 특히 작은 크기일 때 아이콘을 흐릿하게 만들기 때문입니다. 주요 이미지를 강조하는 간결한 배경을 사용하십시오 - 아이콘 전체를 컨텐츠로 채울 필요는 없습니다.

다양한 플랫폼에 잘 작동함으로써 각 플랫폼에서 자연스럽게 느껴지는 디자인을 만드십시오.

당신의 앱 또는 게임이 하나 이상의 플랫폼에서 동작한다면, 각 플랫폼에 적절한 스타일로 렌더링하면서도 모든 아이콘에 비슷한 이미지와 컬러 팔레트를 사용하십시오. 예를 들어, iOS와 watchOS에서, 메일 앱 아이콘은 파란 배경에 하얀 봉투를 묘사하는 간소화된 그래픽 스타일을 사용합니다. macOS는 비슷한 파란 배경을 사용하고, 추가적으로 진짜 같은 무게감과 질감을 주는 깊이와 디테일을 봉투에 추가했습니다.

당신의 경험 또는 브랜드의 본질적인 부분일 때만 텍스트를 포함하는 것이 선호됩니다.

아이콘 속의 텍스트는 종종 쉽게 읽기에 너무 작고, 아이콘을 어수선해 보이게 하며, 접근성(accessibility)이나 현지화(localization)을 지원하지 않습니다. 어떤 맥락에서, 앱의 이름은 아이콘 가까이에 나타나며, 아이콘 내부에 이름을 표시하는 것이 불필요하게 만듭니다. 앱 이름의 첫 글저와 같은 니모닉을 사용하면 사람들이 당신의 앱이나 게임을 인식하는 데 도움이 될 수 있지만, 사람들에게 앱으로 무엇을 하라고 지시하는 단어(”Watch” 나 “Play”같은)나, 특수한 문맥의 용어(”New”나 “For iOS”와 같은) 불필요한 단어를 포함하지 마십시오.

아이콘에 UI components를 복제하는 것을 지양하고, 사진보다는 그래픽 이미지를 사용하십시오.

사진은 작은 크기로 표시했을 때 잘 보이지 않는 세부사항으로 가득 차 있습니다. 사진을 사용하는 대신, 사람들이 주목하길 바라는 기능을 강조하는 컨텐츠를 표상하는 그래픽을 만드십시오. 비슷하게, 당신의 앱이 사람들이 인지하는 인터페이스를 가지고 있다면, 아이콘에 표준 UI components를 복제해 사용하거나 앱 스크린샷을 사용하지 마십시오.

만약 필요하다면, 시스템이 Spotlight 검색 결과, 설정, 알림 등에 표시하는 특별한 사이즈를 위해 당신의 아이콘을 최적화하십시오.

iOS, iPadOS, watchOS에서는, Xcode가 1024*1024px 앱스토어 아이콘으로부터 모든 사이즈의 아이콘을 생성하도록 할 수 있습니다. macOS와 tvOS에서는, 모든 사이즈의 아이콘을 제공해야 합니다. 만약 시스템이 생성한 버전의 앱 아이콘을 포기하고 당신만의 아이콘을 만들고 싶다면, 아이콘의 크기가 줄어듦에 따라 이미지가 여전히 뚜렷하도록 해야 합니다. 예를 들어, 정교한 세부사항과 불필요한 특징들을 지우고, 이미지를 단순화하고, 주요 특징을 과장합니다. 이러한 변화를 만들 필요가 있다면, 앱 아이콘이 모든 맥락에서 시각적으로 일정하도록 미묘함을 유지해야 합니다.

왼쪽의 512_512 px의 Safari 앱 아이콘은 각도를 나타내기 위한 눈금 표시의 원을 사용합니다. 오른쪽의 16_16 px의 앱 아이콘은 이러한 세부사항을 포함하지 않습니다.

아이콘을 full-bleed 정사각형 이미지로 디자인하십시오.

대부분의 플랫폼에서, 시스템은 플랫폼의 미학에 맞추기 위해 아이콘의 모서리들을 자동으로 조정한 마스크를 적용합니다. 예를 들어, watchOS는 자동으로 원형 마스크를 적용합니다. macOS는 예외입니다: 시스템이 Mac Catalyst로 생성한 앱의 아이콘에 모서리가 둥근 사각형의 외형을 적용하더라도, 당신은 적절한 모양의 macOS 앱 아이콘을 만들 필요가 있습니다. 각 플랫폼을 위한 앱 아이콘을 만드는 것을 도와 주는 다운로드 가능한 생성 템플릿은 Apple Design Resources 를 참조하십시오.

대체 앱 아이콘의 제공을 고려하십시오.

iOS, iPadOS, tvOS에서, 사람들은 아이콘의 대체 버전을 선택할 수 있습니다. 이는 앱 또는 게임과의 연결을 강화하고 경험을 향상시킬 수 있습니다. 예를 들어, 스포츠 앱은 서로 다른 팀에 대한 다른 아이콘을 제공할 수 있습니다. 당신이 디자인한 각각의 대체 앱 아이콘들이 당신의 컨텐츠 및 경험과 여전히 밀접하게 연관되어 있는지 확인하십시오; 사람들이 다른 앱의 아이콘이라고 착각할 수 있는 버전을 만드는 것은 피하십시오. 사람들이 대체 아이콘으로 바꾸려 할 때, 당신의 앱의 설정에 들어가야 합니다.

주의
주요 앱 아이콘과 마찬가지로, 대체 앱 아이콘 또한 앱 리뷰의 대상이며 App Store Review Guidelines을 반드시 준수해야 합니다.

애플 하드웨어 제품의 복제본을 사용하지 마십시오.

애플 제품은 저작권으로 보호되며 당신의 앱 아이콘으로 재생산될 수 없습니다.

플랫폼 고려사항

iOS, iPadOS

설정 아이콘에 오버레이나 테두리를 추가하지 마십시오.

iOS는 자동적으로 1픽셀의 테두리를 모든 아이콘에 추가함으로써 설정의 하얀 배경에도 잘 보이도록 합니다.

macOS

macOS에서, 앱 아이콘은 둥근 모서리의 사각형 형태, 전면을 바라보는 시점, 수평 위치, 균일한 아래 그림자를 포함해 공통적인 시각적 특징들을 공유합니다. macOS의 디자인 언어에 기반해, 이러한 특징들은 사람들이 macOS에서 기대하는 실제와 같은 렌더링 스타일을 보여주면서도 사용자 경험과 조화롭게 보이게 합니다.

사람들이 당신의 앱을 사용해 무엇을 할 수 있는지 전달하기 위해 익숙한 도구를 묘사하는 것을 고려하십시오.

당신의 앱의 목적에 대한 맥락을 전달하기 위해, 도구의 환경이나 영향을 주는 아이템을 묘사하기 위해 아이콘 배경을 사용할 수 있습니다. 예를 들어, TextEdit 아이콘은 샤프 펜슬과 종이 노트를 사용해 실용적인 글쓰기 경험을 전달합니다. 세부적이고 실제적인 도구의 이미지를 만든 후에, 배경 위에 띄워 두고 아이콘 영역을 살짝 넘어가도록 확장하는 것이 종종 효과적입니다. 이렇게 한다면, 도구가 배경과 시각적으로 통일감이 있는지, 모서리가 둥근 사각형 모양을 압도하지 않는지 확인하십시오.

실제 사물을 앱 아이콘에 묘사한다면, 실제 재료로 만들어지고 실제 질량을 갖는 것처럼 보이게 만드십시오.

물체의 무게와 느낌을 전달하기 위해 천, 유리, 종이, 금속과 같은 물질들의 특징을 복제하는 것을 고려하십시오. 예를 들어, Xcode 앱 아이콘은 금속으로 된 머리와 폴리머 그립이 있는 것처럼 보이는 망치를 가지고 있습니다.

아이콘의 디자인 템플릿에 drop shadow를 사용하십시오.

앱 아이콘 템플릿은 시스템 정의된 drop shadow(삼차원 효과를 주기 위해 밑이나 뒤에 추가된 그림자) 를 포함하며, 이것은 당신의 앱 아이콘이 다른 macOS 아이콘들과 잘 조화되도록 도와줍니다.

내부 그림자나 하이라이트를 사용해 선명함과 실제감을 주는 것을 고려하십시오.

예를 들어, 메일 앱 아이콘은 그림자와 하이라이트를 둘 다 사용해 봉투를 진짜 같이 만들고, 덮개가 살짝 열려 있음을 전달합니다. 배경 위에 띄워진 도구를 포함하는 아이콘들은(예를 들어 TextEdit나 Xcode같은) 내부 그림자로 깊이감을 더하고 도구를 더 진짜 같이 보이게 할 수 있습니다. 그림자와 하이라이트는 중앙 위에 위치하며 약간 아래쪽으로 기울어진, 아이콘을 향하는 광원이 있음을 가정합니다.

모서리가 둥근 사각형 이외의 형태를 정의하는 것을 피하십시오.

드문 경우, 당신은 기본 앱 아이콘 모양을 미세 조정하고 싶을 수 있습니다. 하지만 그것은 macOS에 어울리지 않아 보이는 아이콘이 될 수 있다는 위험성을 안고 있습니다. 만약 반드시 모양을 바꿔야 한다면, 모서리가 둥근 사각형 실루엣을 여전히 나타내는 미묘한 조정이 선호됩니다.

주요 컨텐츠를 icon grid bounding box 내부에 유지하십시오; 모든 컨텐츠를 outer bounding box 내부에 유지하십시오.

아이콘의 주요 컨텐츠가 icon grid bounding box 너머로 확장되면, 어울리지 않는 느낌을 주게 됩니다. 만약 아이콘에 도구를 오버레이한다면, 아래 그림과 같이 도구의 위쪽 끝은 outer bounding box에 맞추고 아래쪽 끝은 inner bounding box에 맞추는 것이 좋습니다. 아이콘 내부 항목들의 위치를 잡고, 동그라미와 같은 중심 내부 요소가 시스템의 다른 아이콘과 일관성이 있는지 확인하기 위해 격자(grid)를 사용할 수 있습니다.

---

tvOS, watchOS는 생략합니다.

https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons#:~:text=in the system.-,tvOS,-tvOS app icons