2 ๋ถ„ ์†Œ์š”

[blog] utterances๋ฅผ ์ด์šฉํ•œ ๋Œ“๊ธ€ ๊ธฐ๋Šฅ ์ถ”๊ฐ€

๋‚ด ๊นƒํ—ˆ๋ธŒ ๋ธ”๋กœ๊ทธ์— ๋Œ“๊ธ€ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•ด๋ณด์ž.

utterances๋ฅผ ์ด์šฉํ•œ ๋Œ“๊ธ€ ๊ธฐ๋Šฅ ์ถ”๊ฐ€ ๋ฐฉ๋ฒ•

1. ๋Œ“๊ธ€๊ธฐ๋Šฅ์„ ์œ„ํ•œ Repository ์ƒ์„ฑ

๊นƒํ—ˆ๋ธŒ์— ์ ‘์†ํ•˜์—ฌ utterances์™€ ์—ฐ๊ฒฐํ•  ์ƒˆ๋กœ์šด Repository๋ฅผ public์œผ๋กœ ๋งŒ๋“ค์–ด ์ค€๋‹ค.

(๋Œ“๊ธ€ ๊ธฐ๋Šฅ์— ์‚ฌ์šฉํ• ๋งŒํ•œ ๋ ˆํฌ์ง€ํ† ๋ฆฌ๊ฐ€ ์ด๋ฏธ ์žˆ๋‹ค๋ฉด ์กด์žฌํ•˜๋Š” ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด๋„ ๋ฌด๋ฐฉํ•˜๋‹ค๊ณ  ํ•œ๋‹ค. ์ฆ‰, ๊ทธ๋ƒฅ ๊นƒํ—ˆ๋ธŒ ๋ธ”๋กœ๊ทธ ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด๋„ ๋ฌด๋ฐฉํ•œ ๊ฒƒ ๊ฐ™๋‹ค.)

image

image

2. Utterances ์„ค์น˜

https://github.com/apps/utterances

์œ„ ์ฃผ์†Œ์— ์ ‘์†ํ•˜์—ฌ utterances๋ฅผ Install ํ•œ๋‹ค.

image

์ด ๋•Œ, ๋Œ“๊ธ€์ด ๋‹ฌ๋ฆฌ๋ฉด ๋ชจ๋“  Repository์˜ Issue์— ์—…๋กœ๋“œ๋˜๊ฒŒ ํ• ์ง€, ํ˜น์€ ํŠน์ • Repository์˜ Issue์—๋งŒ ์—…๋กœ๋“œ๋˜๊ฒŒ ํ• ์ง€ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋‹ค.

๋‚˜๋Š” ์ƒˆ๋กœ ์ƒ์„ฑํ•œ ๋Œ“๊ธ€์šฉ ๋ ˆํฌ์ง€ํ† ๋ฆฌ์—๋งŒ ์—…๋กœ๋“œ๋˜๋„๋ก ํ•˜๊ธฐ ์œ„ํ•ด ์•„๋ž˜์™€ ๊ฐ™์ด โ€˜Only select repositoriesโ€™ ์— ์ฒดํฌ ํ›„ ํ•ด๋‹น ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ ์„ ํƒํ•ด์คฌ๋‹ค.

image

3. configuration ์„ค์ •

install ํ›„ ์•„๋ž˜์™€ ๊ฐ™์€ ํŽ˜์ด์ง€๊ฐ€ ๋œจ๋Š”๋ฐ,

image

์•„๋ž˜ ํ‘œ์‹œํ•œ ๋ถ€๋ถ„๋“ค์„ ์ž‘์„ฑํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

  • Repository

image

๊นƒํ—ˆ๋ธŒ username/repository์ด๋ฆ„ ์„ ์ž…๋ ฅํ•ด์ค€๋‹ค.

์—ฌ๊ธฐ์„œ repository๋Š” ์œ„์—์„œ ๋Œ“๊ธ€ Issue๊ฐ€ ์—…๋กœ๋“œ๋  ๊ณณ์œผ๋กœ ์„ ํƒํ•œ repository๋ฅผ ์ ์œผ๋ฉด ๋œ๋‹ค.

  • Blog Post - Issue Mapping

image

์—ฌ๊ธฐ๋Š” ๋Œ“๊ธ€ Issue๋ฅผ ๋ธ”๋กœ๊ทธ ํฌ์ŠคํŠธ์™€ ์–ด๋–ป๊ฒŒ ๋งคํ•‘์‹œํ‚ฌ์ง€๋ฅผ ์ •ํ•˜๋Š” ๋ถ€๋ถ„์ธ๋ฐ, ๋‚˜๋Š” ์ฒซ ๋ฒˆ์งธ ์„ ํƒ์ง€์ธ page pathname์„ ์„ ํƒํ–ˆ๋‹ค.

๋งคํ•‘์‹œํ‚ฌ key๋Š” ๋ณ€๊ฒฝ๋˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹์œผ๋ฏ€๋กœ, ๊ณ ์œ ํ•œ ์„ฑ์งˆ์„ ๊ฐ€์ง€๋ฉฐ ๊ฐ€์žฅ ๋ณ€๊ฒฝ๋  ํ™•๋ฅ ์ด ๋‚ฎ์€ pathname์œผ๋กœ ์„ ํƒํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค๊ธฐ์— ๋‚˜๋„ ๊ทธ๋ ‡๊ฒŒ ํ–ˆ๋‹ค.

  • Theme

image

ํ…Œ๋งˆ ๋ณ€๊ฒฝ์€ ์›ํ•˜๋Š” ๋””์ž์ธ์œผ๋กœ ํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

๋‚˜๋Š” Photon Dark๋ผ๋Š” ํ…Œ๋งˆ๋ฅผ ์„ ํƒํ–ˆ๋‹ค.

  • Enable Utterances

    1) minimal-mistakes๋ฅผ ์‚ฌ์šฉ ์ค‘์ธ ๊ฒฝ์šฐ
    ๊นƒํ—ˆ๋ธŒ ๋ธ”๋กœ๊ทธ์˜ _config.yml ํŒŒ์ผ ๋‚ด์— ์•„๋ž˜์™€ ๊ฐ™์ด 4๊ฐ€์ง€ ํ•ญ๋ชฉ์„ ์ž‘์„ฑํ•ด์ค€๋‹ค.

    image

    repository: ๋Œ“๊ธ€ Issue๊ฐ€ ์˜ฌ๋ผ์˜ฌ ๊ณณ์œผ๋กœ ์„ ํƒํ•œ ๊ทธ repository์˜ permalink (username/repository)๋ฅผ ์ž‘์„ฑ

    comments - provider: utterances ๋ผ๊ณ  ์ž‘์„ฑ

    utterances - Theme: ์œ„์—์„œ ๊ณจ๋ž๋˜ ํ…Œ๋งˆ. ๋‚˜๋Š” Photon Dark ์„ ํƒ

    utterances - issue_term: ์œ„์—์„œ ์ •ํ–ˆ๋˜ ๋งตํ•‘ ๋ฐฉ๋ฒ•. ๋‚˜๋Š” pathname ์„ ํƒ

    2) ๊ทธ ์™ธ์˜ ๊ฒฝ์šฐ
    ์•„๋ž˜ ์ฝ”๋“œ ๋ถ€๋ถ„์„ ๋ณต์‚ฌํ•˜์—ฌ ๋Œ“๊ธ€ ๊ตฌํ˜„์„ ๋‹ด๋‹นํ•˜๋Š” html ํŒŒ์ผ์— ๋ถ™์—ฌ๋„ฃ์–ด์ฃผ๋ฉด ๋œ๋‹ค๊ณ โ€ฆ ํ•œ๋‹คโ€ฆ.

    image

์ด๋ ‡๊ฒŒ ํ•˜๊ณ  Commit and Push ํ•˜์—ฌ ์„œ๋ฒ„์— ๋ฐ˜์˜ํ•˜๋ฉด ๋Œ“๊ธ€๊ธฐ๋Šฅ ์ถ”๊ฐ€๊ฐ€ ์™„๋ฃŒ๋œ๋‹ค.

๊ทผ๋ฐ..

์—ฌ๊ธฐ๊นŒ์ง€ ํ–ˆ๋Š”๋ฐโ€ฆ

์•ˆ ๋˜์ž–์•„ ? ? ?

_config.yml ํŒŒ์ผ ํ•˜๋‹จ์˜ comments: # true ๋ถ€๋ถ„์ด ๋ฌธ์ œ์˜€์Œ.

์•„๋ž˜์™€ ๊ฐ™์ด # ์„ ์ง€์›Œ์ค˜์•ผ ๋Œ“๊ธ€ ๊ธฐ๋Šฅ์ด ์ ์šฉ๋œ๋‹ค! comments: true ๊ฐ€ ๋˜๋„๋ก!

image

์ด์ œ ์ง„์งœ ๋~

image


utterences์˜ ๋™์ž‘ ์›๋ฆฌ

utterances๋Š” ๊นƒํ—ˆ๋ธŒ ์ด์Šˆ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋Œ“๊ธ€์„ ๋‹ฌ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ๊นƒํ—ˆ๋ธŒ ์•ฑ.

utterances๊ฐ€ ๋กœ๋“œ๋˜๋ฉด, ๊นƒํ—ˆ๋ธŒ์˜ issue search API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ url, pathname, title์„ ๊ธฐ์ค€์œผ๋กœ ํŽ˜์ด์ง€(๊ธ€)์™€ ๊ด€๋ จ๋œ ์ด์Šˆ๋ฅผ ์ฐพ์•„ (๋งŒ์•ฝ ํŽ˜์ด์ง€์™€ ์ผ์น˜ํ•˜๋Š” ์ด์Šˆ๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ utterances-bot์ด ์ž๋™์œผ๋กœ ์ด์Šˆ๋ฅผ ์ƒ์„ฑํ•จ),

ํ•ด๋‹น issue์— ๋‹ฌ๋ฆฌ๋Š” ๋Œ“๊ธ€์„ Primer๋ฅผ ์ด์šฉํ•˜์—ฌ Github์™€ ์œ ์‚ฌํ•œ UI๋กœ ๋ณด์—ฌ์ค€๋‹ค.

๊นƒํ—ˆ๋ธŒ ๊ณ„์ • ๋กœ๊ทธ์ธ์„ ํ†ตํ•ด ๋Œ“๊ธ€์„ ๋‹ฌ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋Œ“๊ธ€์ด ๋‹ฌ๋ฆฌ๋ฉด Github Repository์˜ Issue๋กœ ์•Œ๋ฆผ์ด ์˜ค๋Š” ์‹œ์Šคํ…œ์ด๋‹ค.

utterances์˜ ์žฅ์ 

  • ๊ด‘๊ณ ๊ฐ€ ์—†๋‹ค
  • ๋Œ“๊ธ€์— ๋งˆํฌ๋‹ค์šด ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค
  • ๊ฐ€๋ณ๊ณ , ์„ค์น˜ ๋ฐ ์„ค์ •์ด ์‰ฝ๋‹ค
  • Github Issue์™€ ๋งตํ•‘ ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ์–ด๋Š ๊ณณ์—์„œ๋“  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค
  • ๋Œ“๊ธ€์„ ๋‚จ๊ธฐ๊ธฐ ์œ„ํ•ด ๋ณ„๋„ ํšŒ์›๊ฐ€์ž… ๋“ฑ์„ ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค (๊นƒํ—ˆ๋ธŒ ๊ณ„์ •๋งŒ ์žˆ์œผ๋ฉด ๋œ๋‹ค)
  • ๋Œ“๊ธ€ ์•Œ๋ฆผ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค

๐Ÿ™‚ ๋‚ด์šฉ ์ค‘ ์ž˜๋ชป๋œ ๋ถ€๋ถ„์ด ์žˆ์„ ๊ฒฝ์šฐ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌ ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

๋Œ“๊ธ€๋‚จ๊ธฐ๊ธฐ