Foundations - App icons

이번시간에는 지난 시간에 이어 HIG 기초 두 번째 시간 앱 아이콘을 읽어보고 공부해보도록 하자.

 

---

앱 아이콘은 사용자에게 해당 앱을 보여주는 첫인상을 담당하는 역할을 하고 있다. 그래서 독특하고 기억하기 쉬운 아이콘은 경험의 목적과 앱의 성격을 전달해주고 한눈에 알아볼 수 있도록 도와준다. 

 

각 플랫폼에 대한 아이콘을 만드는데 도움이 되는 템플릿은 Apple 디자인 리소스 https://developer.apple.com/design/resources/

Apple Design Resources

에서 확인 할 수있다. 해당 링크에서 제공하는 템플릿은 주로 스케치나 어도비 XD를 이용하여 제공하는 하는데 나의 경우 이제 막 피그마를 배우고 있기 때문에 이후에 한 번 더 확인해봐야 할 것 같다. 

 

---

1.  Best practices

• 단순함이 최고! 
  • 보통 아이콘을 만들다 보면 앱에 대한 많은 정보를 넣을려고 하다 보니 아이콘부터 매우 무거워지는 경우가 있는데, 이는 오히려 사용자가 보기에는 편하지 않다. 단순한 아이콘은 사람들이 이해하고 인식하기 더 쉬운 경향이 있다. 그래서 너무 많은 세부 정보를 추가하면 식별하기 어려워 질뿐이다. 

 

• 여러 플랫폼에서 잘 작동하는 디자인을 만들어서 편안함을 제공
  • 애플의 여러 플랫폼을 사용하다 보면 각각의 플랫폼에 올바르게 적용이 되어야하는것은 필수적이다. 따라서 둘 이상의 플랫폼에서 실행되는 경우 각 플랫폼에 맞게끔 적절한 렌더링을 통해 모든 아이콘에 유사한 이미지와 색상 팔레트를 사용해야 한다. 

 

• 경험이나 브랜드의 필수적인 부분인 경우에만 텍스트를 포함
  • 아이콘에서 텍스트를 찾을수 있는 경우는 생각 보다 보기 힘들다. 아니면 내가 자세히 보지 않았던 것도 있겠지만 아이콘의 텍스트는 종종 너무 작아 쉽게 읽을 수가 없거나, 복잡하게 보이고, 접근성 또는 현지화를 지원하지 않는다. 앱으로 무엇을 해야 하는지 알려주는 중요하지 않은 단어 또는 문맥 관련 용어를 포함시키지 않는 것이 좋다. 예를 들면 "Watch" , "iOS 전용"을 말한다. 

 

• 사진보다는 그래픽 이미지를 선호! 아이콘에 UI 구성 요소를 복제 X
  • 사진은 작은 크기로 볼 때 제대로 보기 힘들수 있는 사항들이 많이 있다. 따라서 사진 대신 사용자들에게 강조하고 싶은 기능을 콘텐츠의 그래픽 표현을 만들어서 사용하자. 

 

• 필요한 경우 Spotlight 검색 결과, 설정 및 알림과 같은 위치에 시스템이 표시하는 특정 크기에 맞게 아이콘을 최적화
  • iOS, iPadOS 및 watchOS의 경우 1024 ×1024픽셀 App Store 아이콘에서 모든 크기를 생성하도록 Xcode에 지시하거나 일부 또는 모든 개별 아이콘 크기에 대한 자산을 제공할 수 있습니다. 앱 아이콘의 시스템 생성 버전을 포기하고 대신 자신만의 앱 아이콘을 만들고 싶다면 아이콘 크기가 줄어들어도 이미지가 선명하게 유지되는지 확인하세요. 

 

• 아이콘을 정사각형 이미지로 디자인
  • 대부분의 플랫폼에서 미학에 맞게끔 아이콘 모서리를 자동으로 조정하는 마스크를 적용합니다. watchOS는 자동으로 원형 마스크를 적용한다. 각 플랫폼에 대한 앱 아이콘을 만드는데 도움이 되는 제작 템플릿은 이전에 위쪽에서 공유한 링크를 통해서도 확인할 수 있다. 

 

---

2.  iOS,  iPadOS

• 설정 아이콘에 오버레이나 테두리를 추가하지 마세요.
  •  iOS는 설정의 흰색 배경에서 잘 보이도록 모든 아이콘에 1픽셀 스트로크를 자동으로 추가합니다.

 

---

3.  MacOS

• 사람들이 앱을 수행하여 수행하는 작업을 전달하기 위해 친숙한 도구를 묘사하는것을 고려하세요.
  • 앱의 목적에 대한 컨텍스트를 제공하기 위해 아이콘 배경을 사용하여 도구의 환경 또는 도구가 영향을 미치는 항목을 묘사할 수 있습니다. 예를 들어 TextEdit 아이콘은 샤프펜슬과 줄이 그어진 종이를 결합하여 실용적인 글쓰기 경험을 제안합니다. 

 

• 앱 아이콘에 실제 물체를 묘사하는 경우 실제 물체로 만들어지고 실제 질량이 있는 것처럼 보이게 만들어 보세요.
  • 이것에 대한 예시는 바로 Xcode 앱 아이콘에서 확인 가능한 망치가 있다.

 

• 둥근 사각형 이외의 모양을 제안하는 윤곽선을 정의하지 마십시오. 
  • 드문 경우지만 기본 앱 아이콘 모양을 미세 조정하고 싶을 수 있지만 그렇게 하면 macOS에 속하지 않는 것처럼 보이는 아이콘이 생성될 위험이 있습니다. 모양을 변경해야 하는 경우 둥근 사각형 실루엣을 계속 표현하는 미묘한 조정을 선호합니다.

 

• 아이콘 그리드 경계 상자 내에 기본 콘텐츠를 유지합니다. 모든 내용을 외부 경계 상자 안에 유지하십시오. 
  • 아이콘의 기본 콘텐츠가 아이콘 그리드 경계 상자를 넘어 확장되면 적절하지 않게 보이는 경향이 있습니다. 아이콘에 도구를 오버레이하는 경우 아래와 같이 도구의 위쪽 가장자리를 외부 경계 상자에 맞추고 아래쪽 가장자리를 내부 경계 상자에 맞추는 것이 좋습니다. 

 

 

 

 

---

이번시간에는 앱 아이콘을 설계 할때 각각의 플랫폼에 따른 기준에 대해 알아보았다.

위에 정리하였던 iOS, iPadOS 및 MacOS를 제외하고 tvOS, watchOS의 경우 자세한 링크를 타고 보는 것을 추천한다. 해당 링크에서 앱 아이콘의 속성값 및 크기를 확인해볼 수 있다. 앱 아이콘이 사용자에게 보이는 첫인상이라는 점을 생각하고 본다면 더욱 깊게 알아보고 싶은 점이 많았던 파트인 것 같다. 이후에 Apple의 디자인 리소스에서 어떤 것들이 있는지 둘러보기도 해야겠다.