크롬 확장프로그램 아이콘 추가하기 (할일관리 앱)
크롬 확장프로그램을 만들다 보면
기능은 완성됐는데… 뭔가 허전한 느낌이 들 때가 있다.
바로 아이콘이 없을 때다.
이번 글에서는
할일 관리(To-Do) 크롬 확장 프로그램에 아이콘 추가하는 방법을
초보자도 따라할 수 있게 정리해보겠다.
아이콘이 필요한 이유
아이콘은 단순한 장식이 아니라,
- 크롬 툴바에서 식별 가능
- 확장 프로그램 관리 페이지에서 구분
- 웹스토어 등록 시 필수 요소
즉, 완성도를 높이는 핵심 요소다.
아이콘 사이즈별 용도
크롬 확장프로그램은 3가지 크기의 아이콘을 요구한다.
| 파일명 | 크기 | 사용 위치 |
|---|---|---|
| icon16.png | 16×16 | 브라우저 탭, 파비콘 |
| icon48.png | 48×48 | 확장 프로그램 관리 페이지 |
| icon128.png | 128×128 | 크롬 웹스토어 |
아이콘 만드는 방법 (3가지)
방법 1 — favicon.io (추천★)
가장 쉽고 빠른 방법이다.
- favicon.io 접속
- 이모지 검색 (예: 📝, ✅)
- 다운로드
- 압축 해제 후 PNG 파일 사용
초보자에게 가장 추천
방법 2 — icons8 (고퀄리티)
좀 더 깔끔한 디자인을 원한다면
- icons8 접속
- "todo", "checklist" 검색
- PNG 다운로드 (16 / 48 / 128)
방법 3 — 코드로 자동 생성
Node.js를 사용하면 아이콘을 자동으로 만들 수도 있다.
※Node.js란?
브라우저 밖에서 JavaScript를 실행할 수 있게 해주는 런타임 환경이에요.
Chrome 확장 개발과는 별개로, PC에 따로 설치해야 node 명령어를 쓸 수 있어요.
설치 방법
1. nodejs.org 접속
2. LTS 버전 다운로드 및 설치 (왼쪽 버튼 권장)
3. 설치 확인
--------------------
// generate-icons.js
const { createCanvas } = require('canvas');
const fs = require('fs');
function createIcon(size) {
const canvas = createCanvas(size, size);
const ctx = canvas.getContext('2d');
// 배경
ctx.fillStyle = '#4a6fa5';
ctx.beginPath();
ctx.arc(size/2, size/2, size/2, 0, Math.PI * 2);
ctx.fill();
// 체크 이모지
ctx.font = `${size * 0.6}px serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('✅', size/2, size/2);
fs.writeFileSync(`icons/icon${size}.png`, canvas.toBuffer('image/png'));
}
fs.mkdirSync('icons', { recursive: true });
[16, 48, 128].forEach(createIcon);
폴더 구조 확인
아이콘을 넣을 위치는 반드시 아래와 같아야 한다.
todo-extension/
├── manifest.json
├── popup.html
├── popup.js
├── popup.css
├── background.js
└── icons/
├── icon16.png
├── icon48.png
└── icon128.png
manifest.json 설정
아이콘을 추가하려면
manifest.json에 반드시 코드 추가해야 한다.
🔹 기존 상태
🔹 아이콘 추가 후
핵심 포인트
-
default_icon→ 크롬 툴바 아이콘 -
icons→ 관리 페이지 & 웹스토어
둘 다 반드시 추가해야 완성
적용 방법
- icons 폴더 생성
- PNG 파일 3개 넣기
- manifest.json 수정
-
chrome://extensions접속 - 🔄 새로고침 클릭
바로 적용된다.
4번 동작 없이 최종화면인 할일목록 앱을 새로고침해바야 안봐뀝니다.
꼭 4번 접속하여 관리자 모드에서 새로고침 해서 적용 후 실제로 적용됬는지 보셔야 합니다.
꿀팁 (개발 중이라면)
아이콘이 아직 준비 안 됐다면?
그냥 빼도 된다
"action": {
"default_popup": "popup.html"
}
크롬 기본 아이콘으로 정상 동작한다.
아이콘 하나 추가했을 뿐인데 확장프로그램의 완성도가 확 올라간다.
특히 나중에 크롬 웹스토어 배포할 생각이라면 아이콘은 필수다.
(추가한 아이콘은 실제 작성 & 리스트 화면이 아니라,
크롬 상단 확장프로그램 리스트 보여주는 곳이라던가, 관리페이지, 배포 후 스토어 등록시 보여진다.
실제 작성하는 화면에서 안보인다고 헤매지 말자, 헤멘 1인 올림 😂)
댓글 없음:
댓글 쓰기