App Store 스크린샷을 위한 색상 팔레트
대부분의 App Store 스크린샷 팔레트는 같은 방식으로 실패해요. 27인치 모니터에서는 아름다워 보이지만 App Store가 실제로 표시하는 크기에서는 흐릿해져요. 캐러셀은 상품 페이지에서 풀 해상도로 렌더링되지만, 검색 결과와 "비슷한 앱" 섹션에서는 썸네일 너비로 표시돼요. 팔레트가 한 가지 크기에서만 잘 작동한다면 다른 크기에서 전환율을 잃게 돼요.
세 가지 표시 환경
이 세 가지를 독립적인 디자인 제약 조건으로 다루세요. 하나에서 잘 통하는 팔레트가 다른 하나에서 실패할 수 있어요.
- 전체 크기 (iPhone 기준 1290 × 2796). 상품 페이지 렌더링. 사용자가 탭한 후 보는 화면이에요. 섬세한 그라디언트 전환, 작은 텍스트, 복잡한 레이어 색상이 모두 표현돼요. 대부분의 디자이너는 이 크기만 테스트해요.
- 검색 썸네일 (약 300 × 650). App Store 검색에서 경쟁 앱 아이콘과 나란히 표시되는 캐러셀 첫 3개 패널. 세밀한 디테일이 사라져요. 고대비 색상 블록은 읽히지만 섬세한 그라디언트는 평평해져요.
- 인접 맥락. 검색에서 스크린샷은 절대 단독으로 표시되지 않아요. 주변 7개 앱도 각자의 팔레트를 갖고 있어요. 같은 카테고리의 앱들이 모두 따뜻한 색상을 사용하는데 여러분도 똑같이 한다면 스크린샷이 배경으로 녹아들어 버려요.
5색 규칙
5가지 색상이 대략적인 상한선이에요. 지배적인 배경색 하나(또는 두 색 사이의 그라디언트), 주요 텍스트 색상 하나, 강조용 액센트 색상 하나, 그리고 앱의 실제 스크린샷에서 나오는 색상들. 6번째 색상을 추가하면 기존 색상 하나를 빼야 해요.
이것은 미학적 이유가 아니에요. 썸네일은 시각 정보를 강하게 압축하며, 색상이 너무 많으면 베이지빛 뭉개짐이 돼요. 4~5가지 색상이 200px에서도 각각 구별되는 범위예요.
대비: WCAG AA는 선택이 아니에요
패널 배경에 대한 캡션 텍스트는 WCAG AA(본문 텍스트 4.5:1, 24pt 이상 대형 텍스트 3:1)를 충족해야 해요. Apple이 확인해서가 아니라, 썸네일 크기에서 AA 미만이면 글자 자체가 보이지 않기 때문이에요. 내보내기 전에 최종 캡션 색상과 최종 배경 색상으로 대비 검사 도구를 사용하세요.
흔한 실패 패턴: 약간 더 밝은 짙은 회색 그라디언트 위에 짙은 회색 텍스트. Figma에서는 세련되어 보이지만 썸네일 너비에서는 완전히 사라져요.
카테고리 관례는 출발점이지 규칙이 아니에요
여러분의 App Store 카테고리 상위 20개 앱을 살펴보세요. 지배적인 팔레트 색상을 메모하세요. 그것이 카테고리 관례예요. 사용자가 「이 카테고리의 신뢰할 수 있는 앱」으로 연상하는 팔레트예요. 맞출 수도 있고(위험 낮음, 차별화 낮음), 의도적으로 벗어날 수도 있어요(위험 높음, 효과가 있으면 차별화 높음).
관례를 깨는 것은 구체적인 이유가 있을 때 효과가 있어요. Notion의 카테고리(생산성)는 2022년에 밝은 파스텔이 주류였지만 Notion은 거의 단색에 은은한 따뜻함을 선택해 더 진지한 인상을 줬어요. Headspace의 카테고리(정신 건강)는 부드러운 파스텔이 넘쳤지만, Headspace의 짙은 오렌지 그라디언트는 공격적이지 않으면서도 눈에 띄었어요. 먼저 맞추고 나서 깨는 것이 안전한 순서예요. 첫 출시에는 맞추고, 설치 데이터가 쌓인 뒤에만 벗어나세요.
"검색에서 인접 앱" 검수
출시 전에 이렇게 해보세요. App Store에서 앱이 순위를 갖고 있거나 원하는 키워드 2~3개를 검색해요. 해당 키워드 상위 앱 아래 스크린샷 목록을 보세요. 여러분이 디자인한 팔레트가 주변 앱들과 구별되나요, 아니면 섞여 버리나요?
이것은 30초짜리 검수인데 대부분의 팀이 건너뛰어요. 단독으로 볼 때는 독특해 보이던 팔레트가 검색 위아래 경쟁자 5개 앱과 똑같은 파란색-보라색 그라디언트일 수 있어요. 대개는 액센트 색상 하나만 바꿔도 해결돼요.
다크, 라이트, 또는 그 사이
명확한 포지션을 정하세요. 주로 어두운 배경, 주로 밝은 배경, 또는 패널 전체에 걸친 일관된 그라디언트 계열. 한 캐러셀 안에서 어두운 패널과 밝은 패널을 섞는 것이 가장 흔한 실패 패턴이에요. 디자인에 총책임자가 없었던 것처럼 보여요.
카테고리별로 각각이 유리한 경우는 다크 모드 vs 라이트 모드에서 확인하세요. 요약: 게임·음악·사진·동영상·AI는 다크 우세, 생산성·교육·건강은 라이트 우세, 나머지는 오차 범위로 브랜드가 결정해요.
색상과 현지화
색상은 로케일마다 다른 의미를 지녀요. 빨간색은 중국어권에서는 긍정적(번영)이지만 유럽 상당 지역에서는 부정적이에요. 흰색은 동아시아 상당 지역에서 애도를 뜻해요. 밝은 초록색은 어떤 곳에서는 「진행」, 다른 곳에서는 「질투」를 의미해요. 대부분의 앱에서 이러한 차이는 브랜드 일관성보다 중요하지 않아요. 팔레트 하나를 정해 글로벌로 출시하세요. 색상 상징이 포지셔닝의 핵심 요소인 브랜드(럭셔리·건강·금융)이고 데이터가 있을 때만 로케일별 팔레트를 고려하세요.
이번 주에 할 일
- 현재 스크린샷을 200px 너비로 검수하세요. 그 크기에서 읽히지 않는 것은 수정이 필요해요.
- 모든 캡션의 패널 배경 대비를 WCAG AA 기준으로 확인하세요.
- 상위 3개 키워드로 검색해 주변 맥락을 스크린샷으로 찍어 보세요. 여러분의 팔레트가 눈에 띄나요?
- 새 디자인을 출시한다면 색상을 최대 5가지로 고정하세요. 6번째를 추가하면 하나를 빼야 해요.