Meta의 iOS '홈 화면에 추가' 아이콘이 별로예요

기여 사이트 피드백
1

iOS 16.4가 출시된 이후, ‘홈 화면에 추가’(A2HS) 기능을 사용해 이 포럼인 Meta를 포함한 여러 Discourse 포럼을 iPhone 홈 화면에 추가했습니다.

iOS에서 Meta를 홈 화면에 추가하면 다음과 같은 모습이 됩니다:

IMG_C14E1841BEDA-1
IMG_C14E1841BEDA-1227×275 43.8 KB

자세히 보면, 이는 사실 거의 검은색 테두리가 있는 투명 이미지이며, 그 주위를 검은색 배경이 둘러싸고 있습니다. 한 번 알아채면 다시 무시할 수 없습니다.

이것은 "apple touch icon"인 것 같습니다:

https://global.discourse-cdn.com/meta/optimized/3X/a/c/ac166452701ce353fa6c8865e99879e8cacfb960_2_180x180.png

image
image180×180 5.32 KB

Apple은 이 아이콘에 자동으로 검은색 배경을 추가하여, 아이콘에 서로 다른 두 가지 색상의 검은색이 생기게 합니다.

더 나쁜 것은, 아이콘을 탭했다가 홈 화면으로 돌아왔을 때 iOS가 잠시 동안 투명 아이콘을 표시한 후 1초 뒤에 검은색 배경을 그리는 것입니다.

image
image241×270 30.5 KB

(Apple이 그냥 투명하게 두면 좋을 텐데 말이죠! 이 아이콘은 꽤 괜찮아 보이는데… 딱 1초 동안만요.)

가장 좋은 방법은 Meta의 "apple touch icon"을 투명성이 없는 아이콘으로 교체하는 것이라고 생각합니다. 저는 Photoshop의 아이드롭퍼 도구를 사용해 정사각형을 일치하는 거의 검은색 배경으로 채웠습니다. 이렇게요:

replacement
replacement180×180 9.27 KB

image
image219×272 34.5 KB

훨씬 좋습니다. 원하시면 제 버전을 그대로 사용하시거나, 직접 만들어 보셔도 됩니다!

9개의 좋아요
2

또한, Discourse가 설정에서 "apple touch icon"을 검은색 배경으로 표시하도록 제안합니다. 이를 통해 사이트 관리자가 투명 아이콘을 "apple touch icon"으로 사용했을 때 어떤 일이 발생하는지 더 명확하게 이해할 수 있게 됩니다.

수정: 관리자 설정에서 "apple touch icon"을 둥근 모서리 그리고 검은색 배경으로 표시하는 것이 더 나을 것입니다. 이렇게 하면 사이트 관리자가 이미지에 Apple이 제공하는 모서리 반경이 적용됨을 확인할 수 있습니다. 제가 참여하는 다른 포럼에서는 색상이 있는 테두리가 있는 "apple touch icon"을 사용했는데, Apple이 둥근 모서리를 추가했을 때 당연히 보기 흉해 보였습니다…

6개의 좋아요
3

그 색 주위의 영역은 로고의 일부입니다. 검은색 배경에 검은색이 잘 어울리는지 잘 모르겠습니다. 대안보다는 검은색 배경에 어두운 회색이 더 나은 것 같습니다. 그 영역은 Discourse의 D를 형성하며, 없으면 겹친 말풍선만 보일 뿐입니다.

다크 모드 버전은 검은색을 반전시킵니다:

IMG_7930
IMG_7930527×180 23.3 KB

3개의 좋아요
4

음, 그렇겠지. 이건 어때?

white-3
white-3180×180 8.19 KB

Simulator Screen Shot - iPhone 14 Pro - 2023-03-28 at 19.43.36
Simulator Screen Shot - iPhone 14 Pro - 2023-03-28 at 19.43.36214×276 34.2 KB

… 잘 모르겠어. 진짜 디자이너한테 물어보는 게 나을지도 몰라!

7개의 좋아요
6

메타의 애플 터치 아이콘을 흰색 배경에 로고를 앞쪽에 배치하도록 업데이트했습니다. 이제 훨씬 더 좋아 보일 것 같습니다 :+1:

이 문제를 알려주셔서 감사합니다.

11개의 좋아요
Discourse meta logo incorrect in discourse hub
7

비율이 크게 달라졌나요? 분명히 조금 작은 편인 것 같고, 하얀 바다에 압도당한 느낌입니다.

3개의 좋아요
8

네, 규모는 변경되었습니다. 흰색 배경을 사용하면서 아이콘을 약간 축소하여 흰색 여백이 아이콘을 감싸도록 했기 때문입니다.

다만, 피드백을 보면 사람들이 원하는 크기보다 작아 보인다는 의견이 있어 조정할 수 있습니다.

2개의 좋아요
9

모바일 기기에 사용되던 기존 로고는 어떻게 되었으며, 왜 다른 디자인을 사용하고 있는 건가요?

10

로고는 이전에 사용되던 투명한 PNG 파일이 홈 화면에 고정될 때 투명 부분이 검은색으로 대체되어 로고의 일부가 가려지는 문제가 있었기 때문에 변경되었습니다.

홈 화면에 고정했을 때 로고가 올바르게 렌더링되도록, 로고를 흰색 배경 위에 명시적으로 배치한 아이콘으로 교체했습니다.

3개의 좋아요
11

말씀하신 점은 이해하지만, 확실히 더 크게 늘릴 수 있다고 생각합니다.

현재는

  • DiscourseHub에는 큰 Discourse 로고(흰색으로 감싸짐)
  • Meta PWA에는 작은 Discourse 로고(흰색으로 감싸짐)

DiscourseHub에서 경계를 조금 더 넓게 활용한 기존 로고를 사용하도록 변경할 수 있을까요?

2개의 좋아요
12

여기 나란히 비교해 보겠습니다:

IMG_7955
IMG_7955579×335 29.5 KB

2개의 좋아요
13

디자인 관점에서, DiscourseHub 앱에서도 로고를 실제로 축소해야 한다고 생각합니다.

두 이미지를 나란히 보면, 왼쪽의 아이콘이 오른쪽의 허브 버전보다 로고를 균형 잡힌 위치에 배치하는 데 더 적합합니다.

4개의 좋아요
14

이제 내 Firefox의 새 탭 페이지가 이렇게 생겼습니다. 아이콘의 흰색 배경은 일반적인 것과는 꽤 다른 것으로 보입니다.

image
image1007×311 55.1 KB

3개의 좋아요
15

왜 Firefox가 Apple 터치 아이콘을 사용하는 거죠? Firefox는 https://meta.discourse.org/manifest.webmanifest에서 연결된 아이콘 중 하나를 사용해야 한다고 기대했습니다.

사실, Apple은 투명도를 무시하고 둥근 모서리 마스킹을 적용하는 반면, 다른 브라우저는 투명도를 허용하는 Web Manifest 표준을 따르도록 되어 있기 때문에, Discourse가 "manifest icon"과 "apple touch icon"이라는 두 가지 별도의 설정을 가지고 있는 이유가 바로 그것이라고 생각했습니다.

2개의 좋아요
16

크롬(Android 탭 아이콘)과 파이어폭스(탭 시작 페이지) 모두 apple-touch-icon을 favicon의 고해상도(High-DPI) 버전으로 사용했으며, 이 변경 사항의 영향을 모두 받았습니다.

AFAIK(제가 아는 한) 해당 파일은 홈 화면에 추가했을 때의 아이콘과 같은 PWA 기능에만 사용됩니다.

2개의 좋아요
17

이 포럼의 Android PWA 아이콘도 약간 깨져 있는 것 같다는 걸 방금 알았습니다.

Android Studio를 실행하고 Android API 31이 설치된 Pixel 4 에뮬레이터를 띄운 뒤, 최신 버전의 Google Chrome을 설치하고 Meta를 홈 화면에 추가해 보았습니다. 아이콘은 다음과 같이 보입니다:

image
image120×172 8.99 KB

제가 이해한 바로는, https://meta.discourse.org/manifest.webmanifest 파일에 두 개의 아이콘이 제공되고 있는데, 하나는 purpose가 "any"이고 다른 하나는 purpose가 "maskable"입니다. “maskable” 아이콘은 아이콘의 40% 반지름 원형 영역을 잘라내도 괜찮다고 주장하고 있습니다.

다행히도 모든 플랫폼이 준수하는 잘 정의되고 표준화된 "최소 안전 구역(minimum safe zone)"이 있습니다. 로고와 같은 아이콘의 중요한 부분은 아이콘 폭의 40%에 해당하는 반지름을 가진 아이콘 중앙의 원형 영역 내에 있어야 합니다. 바깥쪽 10% 가장자리는 잘릴 수 있습니다.

Chrome DevTools를 사용하여 아이콘의 어떤 부분이 안전 구역 내에 위치하는지 확인할 수 있습니다. Progressive Web App을 열어 DevTools를 실행하고 Application 패널로 이동합니다. Icons 섹션에서 Show only the minimum safe area for maskable icons를 선택할 수 있습니다. 그러면 아이콘이 안전 영역만 보이도록 잘립니다. 로고가 이 안전 영역 내에 보인다면 문제없습니다.

"Show only the minimum safe area for maskable icons"를 체크했을 때 Chrome Dev Tools에서 Meta의 Manifest 패널이 보이는 모습입니다.

image
image1127×880 81.6 KB

아이콘이 maskable로 지정되어 있으므로, Android/Chrome은 중앙에서 원형 조각을 잘라내며 그 결과는 좋지 않습니다.

@Stephen이 "하얀 바다에 묻혀 있다"고 묘사한 Apple Touch 아이콘을 Chrome Dev Tools에서 maskable manifest 아이콘으로 테스트해 보았습니다. 하지만 그 아이콘도 표준 maskable 크기 대비 약간 너무 큽니다… 왼쪽 아래 모서가 잘립니다.

image
image712×854 77.9 KB

2개의 좋아요
18

Chrome Android에서는 해당 문제를 재현하지 못했습니다. Chrome Android의 경우, 새로운 탭 아이콘은 단순히 favicon인 것으로 보입니다.

image
image1080×2280 179 KB

Firefox가 탭 시작 페이지에 어떤 아이콘을 사용하는지에 대한 문서를 찾을 수 있으신가요?

Firefox가 탭 시작 페이지에 매니페스트 아이콘을 사용하지 않는다면, 적어도 <link rel=icon> 아이콘 중 하나를 사용할 것으로 예상했을 것입니다.

아마도 <link rel=icon>이 너무 작기 때문에 Firefox가 apple touch icon으로 폴백(fallback)하는 것일까요?

아시다시피, 여러 sizes 속성을 가진 여러 개의 <link rel=icon> 요소를 가질 수 있습니다. 첫 번째는 favicon을 가리키고, 두 번째는 더 큰 sizes를 가진 매니페스트 아이콘을 가리키는 두 개의 <link rel=icon> 요소를 가지는 것이 합리적일 것 같습니다. 그렇게 하면 Firefox가 더 크고 좋은 아이콘을 사용하게 될 것입니다. :thinking:

더 광범위하게 말하면, 이 이야기의 교훈은 다음과 같습니다:

  1. 어떤 아이콘이 어디에서 왜 사용되는지 파악하는 것은 사실 프로젝트에 가깝습니다.
  2. Discourse 관리자 사이트는 관리자가 이 문제를 올바르게 해결할 수 있도록 충분히 가까운 수준의 안내를 제공하지 않습니다.

관리자 사이트는 다음과 같이 해야 합니다:

  • 매니페스트 아이콘과 apple touch icon의 투명성을 금지해야 합니다.
  • Chrome Dev Tools가 하듯이 매니페스트 아이콘을 40% 반지름의 원으로 렌더링해야 합니다.
  • Apple이 하듯이 apple touch icon을 둥근 모서리로 렌더링해야 합니다.

이러한 기능이 갖춰진다면, 디자이너가 다음 모든 곳에서 잘 보이는 아이콘 업로드라는 문제를 시작해서 해결해 볼 수 있을 것입니다:

  • iOS A2HS
  • Android A2HS
  • Firefox, Chrome, Safari의 탭 시작 페이지
2개의 좋아요