์์ ๋ง์ ๋ธ๋ก๊ทธ/์น์ฌ์ดํธ์ ์์ด์ฝ์ ์ ํ์.
๋ค์ด๋ฒ, ํฐ์คํ ๋ฆฌ ๋ฑ ๋ธ๋ก๊ทธ ํ๋ซํผ์ ์ด์ฉํ์ง ์๊ณ ์์ ๋ง์ ๋ธ๋ก๊ทธ์ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ธฐ ์์ํ๋ค๋ฉด, ์ด์ ์ฐจ์ธฐ ๋ถ์กฑํจ์ ๋๋ผ๊ธฐ ์์ํ ๊ฒ์ด๋ค. ์ฐ๋ฆฌ๊ฐ ๋ธ๋ก๊ทธ ํ๋ซํผ์์ ์ ๊ณตํ๋ ๋ค์ํ ์๋น์ค๋ฅผ ์๊ฒ ๋ชจ๋ฅด๊ฒ ๋๋ฆฌ๊ณ ์์๋ค๋ ์ฌ์ค์ ์ธ์งํ๋ค. ์ฒ์์๋ ๋ณ๊ฑฐ ์๋๊ฒ ์๊ฐํ๋๊ฒ๋ค์ด ๋์ ๊ฑฐ์ฌ๋ฆฌ๊ธฐ ์์ํ๋ค.
๊ฐ์ฅ ์ฒ์ ๋์ ๋ค์ด์จ ๊ฒ์ ์์ด์ฝ์ด๋ค. ์ด์์ง๋ ์๋๋ผ๋, ์ ๋ ๊ฒ ๋นํ์ฑํ ๋๋ฏํ๊ฒ ๋ณด์ด๋ ์์ด์ฝ์ ์ข ์๋์ง๋ผ๋ ์๊ฐ์ด ๋ ๋ค.
์ด์๊ฒ ๋ง๋๋ ์ผ์ ์๊ฐ์ด ๋ ๋ ์กฐ๊ธ์ฉ ํ๋ฉด ๋ ๊ฒ์ด๊ณ , ์ผ๋จ์ ๊ตฌ์๋ถํฐ ๊ฐ์ถ์.
ํ๋น์ฝ(Favicon) ์ด๋?
ํ๋น์ฝ์ ์น์ฌ์ดํธ๋ฅผ ๋ํํ๋ ์์ด์ฝ ์ด๋ฏธ์ง๋ก์จ, ์น๋ธ๋ผ์ฐ์ ๋ฅผ ์ด์์ ๋ ํญ์์ ํ๊ธฐ๋๋ ์์ด์ฝ ์ด๋ฏธ์ง๋ผ๊ณ ์๊ฐํ๋ฉด ๋๋ค.
์๋์ ๊ฐ์ ์ด๋ฏธ์ง ๋ค์ด๋ค.
์น์ฌ์ดํธ์ <head>
์ ๋ค์๊ณผ ๊ฐ์ link
์ ์ธํ์ฌ ์ฌ์ฉํ ์ ์๋ค.
<link rel="shortcut icon" href="http://mysite.com/myicon.ico"/>
๋๋ ๋ค์์ฒ๋ผ ์๋์ฃผ์๋ ๊ฐ๋ฅํ๋ค.
<link rel="shortcut icon" href="/myicon.ico"/>
์์ด์ฝ(Icon) ์ค๋น
ํ๋น์ฝ(Favicon)์ด ๋ฌด์์ธ์ง, ์ด๋ป๊ฒ ์ฌ์ฉํ ์ง ์์๋ณด์์ผ๋, ์ด์ ์ค์ ์ฌ๋ฃ(์์ด์ฝ)์ ์ค๋นํ ์ฐจ๋ก์ด๋ค. ์ด๋ฏธ ์์ด์ฝ์ด ์๊ฑฐ๋, ํฌํ ์ต ๋ฑ์ผ๋ก ๋ง๋ค์ด ๋์ ์์ด์ฝ์ด ์๋ค๋ฉด ๋ค์ Section์ผ๋ก ๊ฑด๋ ๋ฐ๋ฉด ๋๋ค.
๋ง์ฝ, ์ ์ ๊ฐ์ด ๋์์ธ์ ์ทจ์ฝํ ์ฌ์ฉ์๋ผ๋ฉด, ๋ค์ ์น์ฌ์ดํธ๋ฅผ ์ด์ฉํด์ ๋์ถฉ์ด๋ผ๋ ์์ด์ฝ์ ๋ง๋ค์ด ๋ณด๊ธฐ๋ฅผ ๊ถํ๋ค. (ํฌํ ์ต, ์ผ๋ฌ์คํธ๋ ์ดํฐ ๋ฑ ์ด๋ฏธ์ง ํธ์งํด์ด ์์ผ๋ฉด ๊ทธ๋ฅ ์ฌ์ฉํ๋ฉด ๋๋ค. )
์น ์ด๋ฏธ์ง ์๋ํฐ
๊ณผ๊ฑฐ์๋ ํฌํ ์ต์ ๋ง์ด ์ฌ์ฉํ์๋ค. ํ๊ต/๊ธฐ๊ด ๋ผ์ด์ ์ค ๋ฑ์ด ์์ด์ ์ฝ๊ฒ ์ฌ์ฉํ๋๋ฐ, ์์ฆ์์ ๊ธฐ๊ด ๋ผ์ด์ ์ค ๋ฐ์ ๊ฒ๋ค๋ ์๊ณ ํฌํ ์ต์ ์ฌ์ฉํด ๋ณธ์ง 10๋ ์ด ๋ค ๋์ด ๊ฐ๋๊ฒ ๊ฐ๋ค. ๊ทธ๋๋ ๊ณผ๊ฑฐ ์ฌ์ฉํ ํฌํ ์ต ์คํ์ผ์ด ์ด๋ฏธ์ง ํธ์ง์ ์์ ์ต์ด์ ํธํ๋ค.
์ด๋ฌํ ํฌํ ์ต์ UI์ ์๋นํ ๋น์ทํ๊ฒ ๋ง๋ค์ด ๋์ ์น์ด๋ฏธ์ง ์๋ํฐ๊ฐ ์์ด์ ์๊ฐ ํ๋ค. ์น์ฌ์ดํธ์์ ๋์ํ๊ธฐ ๋๋ฌธ์ ๋ณ๋ค๋ฅธ ์ค์น๊ฐ ํ์์๊ณ , Layered ๊ด๋ฆฌ๋ฅผ ์ํ๊ธฐ ๋๋ฌธ์ ํ ์น์ด๋ฏธ์ง ์๋ํฐ ๋๋น ์ฌ์ฉ์ด ํธํ๊ฒ ๊ฐ๋ค.
- Pixlr Editor : https://pixlr.com/kr/
์น์ฌ์ดํธ์ ์ ์ํ๋ฉด, PIXLR ์๋ํฐ๊ฐ 2์ข ๋ฅ๊ฐ ์๋ค. 1) ํฌํ ์ต๊ณผ ๊ฐ์ Photo Editor, 2) ์ด๋ฏธ์ง๋ฅผ ์์ฑ์ ์ํด ํ ํ๋ฆฟ๋ฒ ์ด์ค๋ก ๊ตฌ๋๋๋ ๋์์ธ์๋ํฐ. ๊ฐ๊ฐ ํน์ง์ด ์๊ณ ๋์์ด ๋๋ค.
์ด๋ฒ ํฌ์คํ ์์๋ Photo Editor๊ฐ ํ์ํ๋ค. Design Editor๋ ๊ฐ์ ํ๋ฒ ์ฌ์ฉํด ๋ณด๊ธฐ๋ฅผ ๊ถํ๋ค.
![]() |
![]() |
---|---|
PIXLR E : https://pixlr.com/kr/e/#editor | PIXLR X : https://pixlr.com/kr/x |
์ด๋ฏธ์ง ์๋ํฐ๋ ํฌํ ์ต๊ณผ ๋งค์ฐ ์ ์ฌํ๊ธฐ ๋๋ฌธ์ ๋ง์ ์ฌ์ฉ์๋ค์ด ์ต์ํ๊ฒ ์ฌ์ฉํ ์ ์์ ๊ฒ์ด๋ค. ํ์์ ๊ฒฝ์ฐ, ๋์ถฉ Gradient๋ก ๋ฐฐ๊ฒฝ ์์ ์ฑ์ฐ๊ณ , ๋ํ ๋ช๊ฐ ๊ทธ๋ฆฐ ๋ค์ ๋ผ์ด๋๋ฅผ ์ฃผ์๋ค. ๊ทธ๋ฆฌ๊ณ ์ ์ฅ.. ์ฝ 5๋ถ ์ ๋ ๊ฑธ๋ฆฐ๊ฒ ๊ฐ๋ค.
์ฐ์ธก ์ด๋ฏธ์ง๋ ํ ํ๋ฆฟ ๋์์ด๋ (PIXLR X)ํ๋ฉด์ด๋ค. ์ฌ๋ฌ๊ฐ์ง ์ ํ์ ํ ํ๋ฆฟ์ ์ ๊ณตํ๊ธฐ ๋๋ฌธ์, ์์ฃผ ๋น ๋ฅด๊ณ ๊ฐ๋จํ๊ฒ ๋ญ๊ฐ๋ฅผ ๋ง๋ค์ด ๋ณผ ์ ์๋ค. ๋จ์ ์ผ๋ก๋ ์ ๋ฃ ๊ธฐ๋ฅ์ด ๋ง์์ ์ฌ์ฉ์ ์ ํ์ด ๋๋ ์ ์ด๋ค. ํธ๋ผ์ด์ผ ๋ฒ์ ์ ์ ๊ณตํ๊ธฐ ๋๋ฌธ์, ์ ์ ์ฌ์ฉํด ๋ณด๊ณ ์ง์ ์ฌ์ฉ์ฌ๋ถ๋ ๊ทธ ๋ ๊ฐ์ ๊ฒฐ์ ํด๋ ๋๋ฏ๋ก, ์ผ๋จ ๋ฌด๋ฃ ๊ธฐ๋ฅ์ ์จ๋ณด๋ ๊ฒ์ผ๋ก... ์ฟจ๋ญ.!
์๋์ ๊ฐ์ ํ ํ๋ฆฟ๋ค์ ์ ๊ณตํ๋ค. ๋น ๋ฅด๊ฒ ๋ฌด์์ธ๊ฐ๋ฅผ ํด๋ณผ ์ ์์ ๊ฒ ๊ฐ๋ค.
![]() |
![]() |
---|
๊ธฐํ ๋์์ธ ์๋ํฐ (๋ง๊ณ ๋ณด๋)
์ฉ๋๊ฐ ๋ค๋ฅด๊ธด ํ์ง๋ง, ์น ์์์ ๋์์ธ/ํฌ์คํฐ๋ฅผ ๋ง๋ค ๋ ๊ตญ๋ด ์๋น์ค์ธ ๋ง๊ณ ๋ณด๋๋ฅผ ์ฐธ์กฐํ๊ธฐ๋ ํ๋ค.
- ๋ง๊ณ ๋ณด๋ : https://www.mangoboard.net/
์์ด์ฝ ํ๋ณด ์๋ฃ
์ด์จ๋ , ๊ตฌ์๋ถํฐ ๊ฐ์ถ์. ํ์๋ ์๋์ ๊ฐ์ด ๋์ถฉ 5๋ถ๋ง์ ์์ด์ฝ์ ํ๋ณด ํ๋ค. (์ง์ง ํฐ ์๋ฏธ ์๋ ์์ด์ฝ์ด๋ค. ๊ทธ๋ฅ ํ์ ์์ด์ฝ๋ง ์ง์ฐ๋ ค๊ณ ๋์ถฉ ๊ทธ๋ ธ๋ค. )
ํด๋น ์ด๋ฏธ์ง๋ฅผ PNG ๋๋ JPG ๋ฑ์ ์ด๋ฏธ์ง ํ์ผ๋ก ์ ์ฅํ๋ค. ์์ด์ฝ์ PNG์์ฒด๋ก ์ฌ์ฉํ ์๋ ์์ง๋ง, ๋ฒ์ฉ์ฑ์ ์ํด์ ICOํ์ผ๋ก ๋ง๋ค์ด ์ฃผ์.
์์ด์ฝ(Icon) ํ์ผ๋ก ๋ณํ
PNG ๋ฑ์ ์ด๋ฏธ์ง์๋ ๋ค๋ฅธ icon ํ์ผ๋ก ๋ณํ ํด์ผ ์ฃผ์ด์ผ ํ๋ค. icon์ ์ฌ์ด์ฆ๋ 16x16, or 32x32์ด๋ค. ๊ตฌ๊ธ์์ favicon ์์ฑ
์ผ๋ก ๊ฒ์ํ๋ฉด ๋ง์ ์ฌ์ดํธ๋ค์ด ๋ณด์ฌ์ง๊ธฐ ๋๋ฌธ์ ์ด์ค ํ๋๋ฅผ ์ ํํด์ ํ์ผ์ ์
๋ก๋ ํด์ ๋ณํ ํ๋ฉด, ๋๋ค. ์ฌ๊ธฐ์์๋ ๊ทธ์ค ์๋ฅผ ํ๋ ๋ค์ด ๋ณด๊ฒ ๋ค.
์ถ์ฒ ICON ์์ฑ ์ฌ์ดํธ
- https://www.favicon-generator.org/ : ํ๋น์ฝ ์ ์ฉ
- https://icoconvert.com/ : Favicon ๋ฟ๋ง ์๋๋ผ ๋ค์ํ ์์ด์ฝ ์์ฑ
๋ค์์ ๊ฐ ์ฌ์ดํธ์ ํ๋ฉด์ด๋ค. ์ค๋นํ ์์ด์ฝ ํ์ผ(PNG, JPG)๋ฅผ ์ ๋ก๋ํ์ฌ ICOํ์ผ๋ก ๋ณํํ๋ฉด ๋๋ค.
ํ๋น์ฝ ์ ๋๋ ์ดํฐ | ์์ด์ฝ ์ปจ๋ฒํฐ |
---|---|
![]() |
![]() |
์ด ๊ธ์์๋ ํ๋น์ฝ ์ ๋๋ ์ดํฐ๋ฅผ ๋ฐ๋ผ๊ฐ๋ ๊ฒ์ผ๋ก ํฌ์คํ ํ๋ค. ํ์ด์ฝ์ ์ต์ ํ ๋์ด์ ์ฌ๋ฌ ์์ด์ฝ์ ์์ฑํ๊ณ , ์ ์ฉํ๋ ํ ๊ทธ์ ๋ํ ๊ฐ์ด๋๋ ํจ๊ป ์ ๊ณตํ๋ค. (์ฌ์ค ์ด๋ ์ฌ์ดํธ๋ฅผ ์ด์ฉํด๋ ๋์ผํ๋ค. ) ๋ค์์ ํด๋น ์ฌ์ดํธ์์ ๋ณํํ ๋ค์ด๋ก๋ํ ํ์ผ๋ค์ด๋ค.
ํ๋น์ฝ(Favicon) ์ ์ฉ ํ๊ธฐ
์. ์ด์ ์์ ์ ์น์ฌ์ดํธ์ ํ๊ทธ ์์ ์๋ ๋ด์ฉ์ ์ถ๊ฐํด ์ฃผ๋ฉด, ํ๋น์ฝ ์ ์ฉ์ด ์๋ฃ ๋๋ค.
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="favicon.ico">
shortcut icon
๊ณผicon
๋๊ฐ๋ฅผ ์ฝ์ ํ ์ด์ ๋ ๋ธ๋ผ์ฐ์ ๋ณ๋ก ์ฐธ์กฐํ๋ ํค์๋๊ฐ ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ด๋ค.
<link rel="icon" type="image/png" href="favicon.ico" sizes="16x16" />
๊ฒฝ์ฐ์ ๋ฐ๋ผ์๋, ์ ์ฝ๋์ฒ๋ผ ์ฌ์ด์ฆ๋ฅผ ๋ช ์ํ๋ ๊ฒฝ์ฐ๋ ์๋ค.
Gatsby
์ผ๋ฐ์ ์ธ ์น์ฌ์ดํธ/๋ธ๋ก๊ทธ์ ๊ฒฝ์ฐ, favicon.ico
ํ์ผ์ /public
์ ๋ฃ์ด ์ฃผ๋ฉด ๋๋ค. ๊ทธ๋ฌ๋, Gatsby๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ์ ํ
๋ง(Theme) ๋๋ ํ๋ฌ๊ทธ์ธ(Plugins)์ ์ํ์ฌ ์ด๋ฌํ ํ๊ฒฝ์ด ๋ณํ๋์ด ์์ ๊ฒฝ์ฐ๋ ์๋ค. ๋ฐ๋ผ์, Gatsby์ ๊ฒฝ์ฐ์๋ ๋ค์๊ณผ ๊ฐ์ ์ก์
์ ์ถ๊ฐ๋ก ์งํํ ํ์๊ฐ ์๋ค.
/static
ํด๋์ favicon.ico
ํ์ผ ๋ณต์ฌํ๊ธฐ
๊ธฐ๋ณธ์ ์ผ๋ก, Gatsby๋ ./public
ํด๋๋ฅผ buildํ ๋๋ง๋ค ๋ค์ ์์ฑํ๋ค. ๋ฐ๋ผ์, /public
ํด๋์ ์ง์ ๋ณต์ฌํด ๋์ด๋ ์ด์ฐจํผ ์ญ์ ๋๋ค. ์ด๋ฌํ ์ฉ๋๋ก ์ฌ์ฉํ๋ /static
ํด๋์ ๋ณต์ฌํด ๋๋ฉด ๋๋ค.
/src/images
ํด๋์ ico ๋ณ๊ฒฝ
/src/images
์ ๊ฐ๋ณด๋ฉด, icon.png
ํ์ผ์ด ์์ ๊ฒ์ด๋ค. ์ด ํ์ผ์ favicon ์์ฑํ ๋ ์ฌ์ฉํ pngํ์ผ๋ก ๊ต์ฒดํ๋ค. gatsby๊ฐ buildํ ๋ ์ด ํ์ผ๋ก ๋ค์ํ ์ฌ์ด์ฆ์ ์์ด์ฝ์ ์๋ ์์ฑํด ์ค๋ค.
html link tag ์ถ๊ฐํ๊ธฐ
Gatsby์ ๋๋ถ๋ถ์ ํ
๋ง์์๋ ์ด๋ฏธ <Helmet/>
์ปดํฌ๋ํธ๋ฅผ ํตํด์ ์ด๋ฌํ ๋ถ๋ถ์ ๊ด๋ฆฌํ๊ณ ์์ ๊ฒ์ด๋ค. <Helme>
์ปดํฌ๋ํธ๊ฐ ์ ์๋ ๋ถ๋ถ์ ํ์ผ์ ๊ฐ์ ๋ค์์ ์ถ๊ฐํ๋ค.
<Helmet>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="favicon.ico" />
<link rel="icon" type="image/png" href="favicon.ico" sizes="16x16" />
.... ๊ธฐํ ๋ค๋ฅธ ๋ฉํํ
๊ทธ ....
</Helmet>
๋ธ๋ผ์ฐ์ ์์ ํ ์คํธ ํ ๋, ๋ธ๋ผ์ฐ์ ์์ ๊ณผ๊ฑฐ์ ์ด๋ฏธ ์บ์ํ iconํ์ผ์ ์ฌ์ฉํฉ๋๋ค. ๋ฐ๋ผ์, icon์ ๋ณ๊ฒฝํ๋๋ฐ๋ ํ๋ฉด์ด ๋ณํ์ง ์๋๋ค๋ฉด, ์บ์๋ฅผ ๋น์ฐ๊ณ ๋ค์ ํด ๋ณด์๊ธฐ ๋ฐ๋๋๋ค.