4 min read

๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ์— ๋Œ€ํ•œ ๊ณ ๋ฏผ๋“ค

Table of Contents

๊ณ ๋ฏผ

10์›”๋ถ€ํ„ฐ ์ƒˆ๋กœ ๋ธ”๋กœ๊ทธ๋ฅผ ์‹œ์ž‘ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์‚ฌ์‹ค ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ๋ฅผ ๋งŒ๋“  ๊ฒƒ์€ ์ด๋ฒˆ์ด ์ฒ˜์Œ์ด ์•„๋‹™๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ์—๋„ ํ•ญ์ƒ ์–ด๋ ต๊ณ , ๋งˆ์Œ์— ๋“ค์ง€ ์•Š์•˜๋˜ ๊ฒƒ์ด ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ์˜€์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋ธ”๋กœ๊ทธ์— ๊ด€ํ•ด์„œ ํ–ˆ๋˜ ๊ณ ๋ฏผ๊ณผ ์ƒ๊ฐ๋“ค์„ ์ •๋ฆฌํ•ด ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

๊ฐœ์ธ์˜ ์ฃผ๊ด€์ด ๋งŽ์ด ๋“ค์–ด๊ฐˆ ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

๋‚ด ๋ธ”๋กœ๊ทธ๊ฐ€ ํ•„์š”ํ•œ ์ด์œ 

๊ฐ„๋‹จํžˆ ํ•˜๋ฉด ์ •๋ฆฌ๋ฅผ ์œ„ํ•ด์„œ์ž…๋‹ˆ๋‹ค.
๊น”๋”ํ•˜๊ฒŒ ์ •๋ฆฌํ•ด์„œ, ์–ด๋””์„œ๋‚˜ ํŽธํ•˜๊ฒŒ ๋ณผ ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ์›ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ •๋ฆฌํ•ด์„œ ๋กœ์ปฌ ํŒŒ์ผ๋กœ ๋‘”๋‹ค๋ฉด ์–ด๋””์„œ๋‚˜ ๋ณผ ์ˆ˜ ์—†์—ˆ์Šต๋‹ˆ๋‹ค.
๋…ธํŠธ ์•ฑ์„ ํ™œ์šฉํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ, ์„ ํ˜ธํ•˜๋Š” ๋ฐฉ์‹์ด ์•„๋‹ˆ์—ˆ์Šต๋‹ˆ๋‹ค.

๋ธ”๋กœ๊ทธ๋Š” ์ธํ„ฐ๋„ท๋งŒ ์—ฐ๊ฒฐ๋˜์–ด ์žˆ์œผ๋ฉด ์–ด๋””์—์„œ๋‚˜ ๋ณผ ์ˆ˜ ์žˆ๊ณ , ์ž๋ฃŒ๊ฐ€ ๋งŽ์•„์ ธ๋„ ๊ฒ€์ƒ‰ ์—”์ง„์ด๋‚˜ ์‚ฌ์ดํŠธ ๋‚ด ํ•„ํ„ฐ๊ฐ€ ๊ฑธ๋Ÿฌ ์ฃผ๊ณ , ์•ฑ ์ ‘์†์ด๋‚˜ ๋กœ๊ทธ์ธ ๊ฐ™์€ ์ ˆ์ฐจ๋„ ํ•„์š” ์—†์Šต๋‹ˆ๋‹ค.
๋ˆ„๊ตฐ๊ฐ€์—๊ฒŒ ๋„์›€์ด ๋  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ€์žฅ ๋งˆ์Œ์— ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

์ƒ๊ฐ ์ •๋ฆฌํ•˜๊ธฐ

์œ„์™€ ๊ฐ™์€ ์ด์œ ๋กœ ๋ธ”๋กœ๊ทธ๋ฅผ ์‹œ์ž‘ํ–ˆ์ง€๋งŒ, ์ง€๊ธˆ๊นŒ์ง€ ์—ฌ๋Ÿฌ ๋ฒˆ ๋ธ”๋กœ๊ทธ๋ฅผ ์ค‘๋‹จํ–ˆ์Šต๋‹ˆ๋‹ค.
๊ฐ™์€ ๊ณผ์ •์„ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š๊ธฐ ์œ„ํ•ด ์ด์ „ ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ๋Œ์•„๋ณด๊ณ  ์ƒ๊ฐ์„ ๊ฐˆ๋ฌด๋ฆฌํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค.

๊ณ ๋ คํ•˜์ง€ ์•Š์•˜๋˜ ๊ฒƒ

  • ๋„ค์ด๋ฒ„ ๋ธ”๋กœ๊ทธ โ—ฆ ํ‹ฐ์Šคํ† ๋ฆฌ
    • ๋ธ”๋กœ๊ทธ์— ์ง„์‹ฌ์€ ์•„๋‹ˆ์ง€๋งŒ, ์ตœ์†Œํ•œ์˜ ์ฐจ๋ณ„์ ์€ ๋‘๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.
  • SEO โ—ฆ ๊ด‘๊ณ โ€ฆ
    • ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ๋กœ ๋ช…์„ฑ์„ ์Œ“๋Š” ๊ฒƒ์€ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋‚ฎ์•˜์Šต๋‹ˆ๋‹ค.
      ๋„์›€์„ ์ฃผ๋Š” ๊ฒƒ๋„, ํฌํŠธํด๋ฆฌ์˜ค๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋„ ๋ชจ๋‘ ๋ถ€์ˆ˜์ ์ธ ๋ชฉ์ ์ž…๋‹ˆ๋‹ค.
    • ๋ธ”๋กœ๊ทธ๋ฅผ ์ƒ์—…์ ์œผ๋กœ ์ด์šฉํ•  ์ƒ๊ฐ๋„ ์—†์Šต๋‹ˆ๋‹ค.
    • ๊ทธ๋ž˜์„œ SEO ๋“ฑ์˜ ์š”์†Œ๋Š” ํฌ๊ฒŒ ๊ณ ๋ คํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์ธ ์„ค์ •์œผ๋กœ ์ถฉ๋ถ„ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ฑฐ์ณ์™”๋˜ ์ˆ˜๋‹จ๋“ค

  1. GitHub Pages (Jekyll)
    ๋‚จ๋“ค ๋”ฐ๋ผ ๋ธ”๋กœ๊ทธ๋ฅผ ๋งŒ๋“ค์—ˆ๋˜ ์‹œ๊ธฐ๋ผ ๋™๊ธฐ๋ถ€์—ฌ๊ฐ€ ๋–จ์–ด์กŒ์Šต๋‹ˆ๋‹ค.
    Ruby ๊ธฐ๋ฐ˜์ด๋ผ ๊ฑฐ๋ฆฌ๊ฐ์ด ์žˆ์—ˆ๊ณ , ๊ทธ๋ž˜์„œ ์ด๋ฒˆ์—๋„ ์„ ํƒ์ง€์— ์—†์—ˆ์Šต๋‹ˆ๋‹ค.

  2. GitHub Pages (Gatsby โ—ฆ Next.js)
    ํ”Œ๋Ÿฌ๊ทธ์ธ์ด๋‚˜ ํด๋” ๊ตฌ์กฐ ๋“ฑ์—์„œ ์ž์œ ๋„๊ฐ€ ์ œํ•œ๋˜๋Š” ๋А๋‚Œ์ด์—ˆ์Šต๋‹ˆ๋‹ค.
    ๊ณต์ˆ˜๋„ ์ƒ๊ฐ๋ณด๋‹ค ์ ์ง€ ์•Š์•˜๋˜ ๊ฒƒ์œผ๋กœ ๊ธฐ์–ตํ•ฉ๋‹ˆ๋‹ค.

    • ๋‹ค๋งŒ, Next.js ์ž์ฒด๋Š” ๊ฐœ์ธ์ ์œผ๋กœ ์ฃผ๋ชฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
  3. ์ง์ ‘ ๊ตฌํ˜„ (React ๋“ฑ)
    ์ค‘๊ฐ„์— 2๋ฒˆ ์ •๋„ ์‹œ๋„ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ก ์ƒ ์ž์œ ๋„๋Š” ๋ฌดํ•œ์ด์ง€๋งŒโ€ฆ ๊ทธ๋งŒํผ ๊ณต์ˆ˜๊ฐ€ ๋ฌด์ง€๋ง‰์ง€ํ•˜๊ฒŒ ๋“ค์–ด๊ฐ”์Šต๋‹ˆ๋‹ค.

  4. velog โ—ฆ Medium ๋“ฑ์˜ ํ”Œ๋žซํผ
    ์ •ํ•ด์ง„ ํ‹€ ์•ˆ์—์„œ ๋ธ”๋กœ๊ทธ๋ฅผ ๊ตฌ์„ฑํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํŠน๋ณ„ํ•œ ์žฅ์ ์ด ์—†๊ฑฐ๋‚˜ ๋ถˆํŽธํ•œ ์ ์ด ๋ณด์ด๊ธฐ ์‹œ์ž‘ํ•˜๋ฉด ์ •์ฐฉ์ด ํž˜๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ์žฅ์ ์œผ๋กœ ์–ธ๊ธ‰๋˜๋Š” ๋„“์€ ์ปค๋ฎค๋‹ˆํ‹ฐ๋„ ์ €์—๊ฒŒ๋Š” ๋งค๋ ฅ์ ์ด์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

๋ฐฉํ–ฅ์„ฑ ์ •ํ•˜๊ธฐ

์—ฌ๋Ÿฌ ๋ฐฉ๋ฉด์œผ๋กœ ์ฐพ์•„๋ณด์•˜์ง€๋งŒ, 100% ๋งž๋Š” ์˜ท์€ ์—†์—ˆ์Šต๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ ๋ณด์ด๋Š” ๋ฒ”์œ„ ๋‚ด์—์„œ ๊ฒฐ๋ก ์„ ๋‚ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค.

  • ํ”Œ๋žซํผ์€ ์ œ์™ธํ•˜๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • Customization์ด ์ œํ•œ๋˜๊ฑฐ๋‚˜ ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์ ์ด ๋งŽ์ด ๊ฑธ๋ ธ์Šต๋‹ˆ๋‹ค.
    • ๋„“์€ ์ปค๋ฎค๋‹ˆํ‹ฐ์™€ ๊ณต๊ฐœ์„ฑ์€ ์ €์—๊ฒŒ ์žฅ์ ์ด ์•„๋‹ˆ์—ˆ๊ณ , ์˜คํžˆ๋ ค ๋ถ€๋‹ด์ด๊ธฐ๋„ ํ–ˆ์Šต๋‹ˆ๋‹ค.
  • ๊ฒฐ๊ตญ ์ง์ ‘ ๋งŒ๋“ค์–ด์•ผ ํ•˜๋Š”๋ฐ, ๋งจ๋•…์—์„œ ๋งŒ๋“œ๋Š” ๊ฒƒ์€ ๊ณต์ˆ˜๊ฐ€ ๋„ˆ๋ฌด ์ปธ์Šต๋‹ˆ๋‹ค.
    ์•ฝ๊ฐ„์˜ ํ…œํ”Œ๋ฆฟ์€ ์—ญ์‹œ ํ•„์š”ํ•˜๋‹ค ๋А๊ผˆ์Šต๋‹ˆ๋‹ค.

์ตœ์ข… ๊ฒฐ์ •

๋‹คํ–‰ํžˆ Hugo์™€ Doks ํ…Œ๋งˆ๋ฅผ ์ฐพ์•„ ๋ธ”๋กœ๊ทธ๋ฅผ ๋‹ค์‹œ ๊ฐœ์„คํ–ˆ์Šต๋‹ˆ๋‹ค.
Doks ํ…Œ๋งˆ๋Š” 2021๋…„๋ถ€ํ„ฐ ์žˆ์—ˆ๊ณ  Hugo๋Š” ๋” ์˜ค๋ž˜๋˜์—ˆ์ง€๋งŒ, ๋‹น์‹œ ์ œ๊ฐ€ ๋ฐœ๊ฒฌํ•˜์ง€ ๋ชปํ–ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ข‹์€ ์ 

  • Doks ํ…Œ๋งˆ ๊ธฐ์ค€ Node.js๋กœ ์„ค์ •์ด ๋๋‚˜๋Š” ๊ฒƒ์€ ์ •๋ง ํŽธํ–ˆ์Šต๋‹ˆ๋‹ค.
  • ์ •๋ง ํ•„์š”ํ•œ ๊ฒƒ๋งŒ ์žˆ๊ณ , Customization๋„ ์‰ฌ์› ์Šต๋‹ˆ๋‹ค.
    • ๊ธฐ๋ณธ ํ…Œ๋งˆ๊ฐ€ ๊ณผํ•˜์ง€ ์•Š๊ณ  ๊น”๋”ํ–ˆ์Šต๋‹ˆ๋‹ค. Jekyll์—์„œ ์ˆ˜๋งŽ์€ SNS ๋ฒ„ํŠผ๊ณผ ๋ถˆํ•„์š”ํ•œ ์˜ต์…˜์„ ์—ด์‹ฌํžˆ ์ง€์› ๋˜ ๊ธฐ์–ต์ด ์žˆ๋Š”๋ฐ, ํฐ ๊ณต์ˆ˜ ์—†์ด ํ•„์š”ํ•œ ๊ธฐ๋Šฅ๋งŒ ๋‚จ๊ธธ ์ˆ˜ ์žˆ์–ด ์ข‹์•˜์Šต๋‹ˆ๋‹ค.
    • ๊ฐ„๋‹จํ•œ HTML ์˜ค๋ฒ„๋ผ์ด๋”ฉ์œผ๋กœ ๊ป„๋„๋Ÿฌ์šด ๋ถ€๋ถ„์˜ ์ „์—ญ ์„ค์ •์„ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

๊ฑธ๋ฆฌ๋Š” ์ 

  • ์—ญ์‹œ ๋งˆํฌ๋‹ค์šด๋ณด๋‹ค ํƒ€ ์„œ๋น„์Šค์˜ ํŽธ๋ฆฌํ•œ ์—๋””ํ„ฐ๊ฐ€ ๊ทธ๋ฆฌ์šด ๋•Œ๋Š” ๋ถ„๋ช…ํžˆ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ ์€ ๊ณต์ˆ˜๋กœ ๋ธ”๋กœ๊ทธ๋ฅผ ๋งŒ๋“ค๊ธฐ์— ์ด๋งŒํ•œ ๊ฒƒ์ด ์—†๋Š” ๊ฒƒ๋„ ์‚ฌ์‹ค์ž…๋‹ˆ๋‹ค. ํŒŒ์ผ๋„ ๋ณด์กดํ•  ์ˆ˜ ์žˆ๊ณ , ๋งˆํฌ๋‹ค์šด์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ๋ฅผ ๊ณ ํ‰๊ฐ€ ํ•˜๋Š” ๊ฒฝ์šฐ๋„ ๊ฝค๋‚˜ ์žˆ์–ด์„œ ๋‹น๋ถ„๊ฐ„ ๋งˆํฌ๋‹ค์šด์€ ์•ˆ๊ณ  ๊ฐ€์•ผ ํ•˜์ง€ ์•Š์„๊นŒ ์‹ถ์Šต๋‹ˆ๋‹ค.
  • ์•„์ง ๊ธ€ ๊ณต๊ฐœ์— ๋Œ€ํ•œ ๊ฑฐ๋ถ€๊ฐ์ด ํฐ ํŽธ์ž…๋‹ˆ๋‹ค.
    ๋งˆ์ง€๋ง‰์œผ๋กœ ์‚ฌ์šฉํ•œ ๊ฒƒ์ด Medium์ธ๋ฐ, ์•„์ด๋Ÿฌ๋‹ˆํ•˜๊ฒŒ๋„ ๊ฒ€์ƒ‰๊ฒฐ๊ณผ์— ์ œ ๊ธ€์ด ๋‚˜์˜ค๋Š” ๊ฒƒ์„ ๋ณธ ๊ฒƒ์ด ๋ธ”๋กœ๊ทธ ํญํŒŒ์˜ ๊ฒฐ์ •์ ์ธ ๊ณ„๊ธฐ๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์•„๋ฌด๋ž˜๋„ Medium์€ ๊ธ€๋กœ ํ’€์–ด๋‚ด๋Š” ๋Šฅ๋ ฅ์ด ์ข‹์•„์•ผ ํ•˜๋Š”๋ฐ, ์ €๋Š” ๊ทธ๋ ‡์ง€ ๋ชปํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ด์„œ ๋” ๊ทธ๋žฌ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ด๊ฑด ์„ฑํ–ฅ ๋ฌธ์ œ๋„ ์žˆ์–ด์„œโ€ฆ ๊ธธ๊ฒŒ ์„ค๋ช…ํ•˜์ง€ ์•Š๊ฒ ์Šต๋‹ˆ๋‹ค.

๋งˆ์น˜๋ฉฐ

์—ฌ๋Ÿฌ ๋ฒˆ ๋ธ”๋กœ๊ทธ๋ฅผ ๋ฐ”๊พธ๋ฉด์„œ, โ€œ์•ˆ ๋งž๋Š” ๊ฑธ ์–ต์ง€๋กœ ๊ณ„์†ํ•˜๋Š” ๊ฑด ์•„๋‹๊นŒ?โ€ ์ƒ๊ฐ๋„ ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ์—๋„ ์ค‘๋‹จํ•˜๊ฒŒ ๋œ๋‹ค๋ฉด, ๋ฐ›์•„๋“ค์—ฌ์•ผ ํ•˜์ง€ ์•Š์„๊นŒ ์‹ถ๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค.
๊ทธ๋ž˜๋„ ์ด๋ฒˆ์— GitHub ๋ธ”๋กœ๊ทธ๋กœ ๋‹ค์‹œ ์ˆจ๊ณ (?), ๋™๊ธฐ๋ถ€์—ฌ๋ฅผ ์œ„ํ•ด ๊ฐœ์ธ ๋„๋ฉ”์ธ๋„ ๊ตฌ๋งคํ–ˆ์Šต๋‹ˆ๋‹ค. ์ •๋ฆฌ์˜ ํ•„์š”์„ฑ์€ ๊ฐœ๋ฐœ์ž ์ผ์„ ๊ณ„์†ํ• ์ˆ˜๋ก ๋А๋ผ๊ณ  ์žˆ์–ด์„œ, ์ผ๋‹จ ๊ณ„์†ํ•ด ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.