[리디저널 제작기] 5. 크롬 웹 스토어에 올릴 아이콘 디자인 만들기

안녕하세요. 박기린 입니다.
본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 :  RIDI-Journals ]의 제작 과정을 적어놓은 글입니다.

 

필요한 아이콘의 포맷

Icons should generally be in PNG format, because PNG has the best support for transparency. They can, however, be in any format supported by WebKit, including BMP, GIF, ICO, and JPEG.

공식 크롬 확장프로그램 API 문서의 글입니다.

PNG 확장자(포맷)의 이미지 파일을 아이콘으로 사용하는 것을 적극 권장한다고 나와있습니다. BMP, GIF, ICO, JPEG도 가능은 하지만, 웬만하면 PNG 포맷을 사용하는 것을 권장한다고 안내하고 있습니다.

 

 

 

---

Manifest.json에서 아이콘 종류와 크기 확인하기

manifest.json에는 두 종류의 아이콘 option이 존재합니다.

첫 번째는 icons

  "icons": {
    "16": "logo16.png",
    "48": "logo48.png",
    "128": "logo128.png"
  },

 

 

두 번째는 action/default_icon

  "action": {
    "default_icon": {              // optional
      "16": "images/icon16.png",   // optional
      "24": "images/icon24.png",   // optional
      "32": "images/icon32.png"    // optional
    },
    "default_title": "Click Me",   // optional, shown in tooltip
    "default_popup": "popup.html"  // optional
  },

 

 

첫 번째 icons는 크롬 웹 스토어에 보이는 앱아이콘 이미지입니다.

 

 

 

두 번째 action/default_icon은 chrome의 확장프로그램 아이콘으로 쓰이는 이미지입니다.

 

 

 

  "icons": {
    "16": "logo16.png",
    "48": "logo48.png",
    "128": "logo128.png"
  },
  "action": {
    "default_icon": "logo128.png",
    "default_popup": "popup.html",
    "default_title": "Ridi Bookmark"
  },

리디저널에서는 위와 같이 manifest.json을 작성했습니다.

16px, 48px, 128px 크기의 아이콘들을 사용합니다.

팝업창을 키는데 사용될 아이콘으로는 128px 크기의 아이콘만 사용합니다.

 

 

 

 

---

아이콘 제작하기

Figma에서 직접 RIDI-Journals 아이콘을 디자인했습니다.

리디 앱의 디자인에서 RI-JOUR라는 텍스트를 넣었습니다.

 

 

 

 

---

아이콘을 리사이징(resizing)하기

hotpot이라는 아이콘 크기 리사이징 사이트에서, 크롬 확장프로그램 크기로 사이즈를 변환해주는 기능을 이용했습니다.

위의 사진처럼 'Chrome Icon' 버튼을 누른 후에 'Convert' 버튼을 누르면 됩니다.

[아이콘 Resize 사이트 hotpot : https://hotpot.ai/icon-resizer]

 

 

 

그러면 128px, 48px, 16px 크기의 PNG 아이콘 파일을 받을 수 있습니다.

 

 

 

 

---

프로젝트 파일에 넣기

프로젝트 파일의 public 폴더에 아이콘 이미지 파일을 전부 넣어줍니다.

 

 

 

  "icons": {
    "16": "logo16.png",
    "48": "logo48.png",
    "128": "logo128.png"
  },
  "action": {
    "default_icon": "logo128.png",
    "default_popup": "popup.html",
    "default_title": "Ridi Bookmark"
  },

그리고 manifest.json에 종류별로 알맞은 아이콘 이미지 경로를 입력하면 됩니다.

 

 

 

 

---

적용 확인

chrome://extension - 확장프로그램 설정에서 확인한 모습

chrome 창의 확장프로그램 목록에서 확인한 모습

모든 적용을 마치고 build를 한 후 크롬에 업로드하면, 위처럼 아이콘이 잘 적용된 모습을 확인할 수 있습니다.