Icon과 branding — 실제로 중요한 네 PNG

"Chrome은 icon을 다섯 자리에 네 가지 크기로 띄워. 128 짜리 하나를 16으로 줄이면 잡음처럼 뭉개지고. 이 lesson에서 제대로 된 PNG 넷을 만들고, 곁다리로 꺼진 상태의 회색 처리, 다크 모드, Web Store 용 이미지까지 짚을게."

Chrome이 요청하는 네 size

• 16 — chrome://extensions URL 옆 toolbar favicon, 관련 시 URL bar.
• 32 — Windows scaling과 일부 platform-specific surface.
• 48 — extension 관리 page (chrome://extensions card).
• 128 — Chrome Web Store listing, install prompt, 가끔 New Tab page에서.

네 크기를 각각 따로 만들어 줘. Chrome이 한 장을 줄여 쓸 수도 있지만, 눈에 띄게 못생겨져. 특히 128의 부드럽게 다듬은 디테일이 16으로 가면 죽처럼 뭉개지거든.

크기마다 다르게 그려

16이 제일 어려워. 다 합쳐 250 픽셀도 안 되는데, 어두운 UI 옆에 놓이는 일도 잦고. 현실적인 제약이 이래:

• 또렷한 실루엣 하나로 가. 요소가 여럿인 로고는 16에서 그냥 사라져. 제일 알아보기 쉬운 형태 하나만 골라.
• 흰 바탕에서도 어두운 바탕에서도 대비가 세야 해. Chrome UI는 다크 모드를 따라 뒤집히니까.
• 가는 선은 피해. 16에서 1 픽셀 선은 회색 얼룩으로 뭉개져. 최소 2 픽셀로 가.
• 진짜 자리에서 확인해. 다크 모드 Mac에서 chrome://extensions를 열어 봐. icon이 배경에 묻히면 실루엣을 더 세게 잡아야 해.

128은 자리가 제일 넉넉한 대신 제일 많이 노출돼. Web Store 화면에서 원래 크기로 보이거든. 이걸 기준 그림으로 삼고, 작은 크기들은 여기서 파생시켜.

Manifest 선언

icon을 적는 자리가 둘이야:

• icons (맨 바깥) — chrome://extensions 랑 Web Store가 봐. 크기별로 key를 나눈 object 야.
• action.default_icon — toolbar가 봐. 보통 바깥 icons 랑 똑같이 적어.

둘 다 같은 경로를 적어도 돼. Chrome이 항목을 따로 읽을 뿐이지 파일까지 두 벌 필요한 건 아니야.

꺼진 상태

chrome.action.disable(tabId)를 부르면 Chrome이 icon을 알아서 흑백으로 만들어 줘. 꺼진 상태용 그림을 따로 준비할 필요가 없어. 기본 변환이 웬만한 icon 에는 잘 먹거든. 다만 대비가 약한 색을 써서 흑백으로 가면 형태가 사라지는 icon 이라면, 손으로 다듬은 회색 버전을 만들어 setIcon으로 직접 갈아 줘.

Dark mode

Chrome은 다크 모드라고 icon을 알아서 뒤집어 주지 않아. 투명 배경에 어두운 그림을 얹어 놨다면 어두운 toolbar 에선 그냥 안 보여. 방법은 둘이야:

• 선으로 그리기 — 면을 꽉 채우지 말고 주로 선으로 그려. 그러면 밝은 데서도 어두운 데서도 통해.
• Package variant — extension page가 자기 color scheme을 보고 worker에 packaged icon 교체를 요청할 수는 있어. 하지만 service worker 자체에는 window.matchMedia가 없고, extension page의 scheme도 toolbar theme를 오래 대표하는 API가 아니야. 한 벌로 양쪽에서 읽히는 adaptive icon을 우선해.

ClipDeck v1은 16에 선으로 그리는 쪽을 택할 거야. 클립 모양 윤곽선에 브랜드 색만 얹고 안은 비워 둬. 밝은 Chrome 에서도 어두운 Chrome 에서도 깔끔하게 읽혀.

Web Store asset pack

Chrome Web Store는 extension icon 말고도 따로 올릴 그림을 더 달라고 해:

• 128 × 128 store icon — manifest의 128 이랑 같은 거.
• 440 × 280 작은 홍보 타일 — store 검색 결과에 뜨는 그림.
• 1400 × 560 큰 홍보 배너 — 추천 자리에 쓰여. 개인이 만든 extension이 거기 걸릴 일은 드물지만 그래도 만들어 둬.
• 스크린샷 — 1280 × 800 이나 640 × 400. 최소 하나, 최대 다섯 장. 사람들이 제일 많이 보는 그림이니까 마케팅이라고 생각하고 만들어.

제출하기 전에 스크린샷부터 챙겨 둬. Web Store 심사자는 스크린샷 품질을 '이게 진짜 굴러가는 software 인가' 를 재는 잣대로 써. manifest만 달랑 올린 등록은 이 extension이 뭘 하는지 아무것도 전하지 못해서 반려돼.