๋ณธ๋ฌธ์œผ๋กœ ๊ฑด๋„ˆ๋›ฐ๊ธฐ

ยฉ 2026 Molayo

Dev.toํ—ค๋“œ๋ผ์ธ2026. 05. 16. 12:06

๐Ÿค” 2026๋…„์— AI๋กœ ๋ฌธ์„œ๋ฅผ ์–ด๋–ป๊ฒŒ ์ž‘์„ฑํ•ด์•ผ ํ• ๊นŒ์š”? (Markdown vs HTML vs Word)

์š”์•ฝ

๋ณธ ๊ธฐ์‚ฌ๋Š” AI ์‹œ๋Œ€์— ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ์ตœ์ ์˜ ๋ฐฉ๋ฒ•์„ Markdown, HTML/CSS, Word ์„ธ ๊ฐ€์ง€ ๊ด€์ ์—์„œ ๋ถ„์„ํ•ฉ๋‹ˆ๋‹ค. ํ•„์ž๋Š” AI์™€์˜ ์†Œํ†ต ํšจ์œจ์„ฑ ์ธก๋ฉด์—์„œ Markdown(md) ์‚ฌ์šฉ์„ ๊ฐ€์žฅ ๊ถŒ์žฅํ•˜๋ฉฐ, ์‹ค์ œ ์›Œํฌํ”Œ๋กœ์šฐ๋กœ๋Š” VS Code ๋“ฑ ์—๋””ํ„ฐ์—์„œ ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์™€ md ํŒŒ์ผ์„ ์ฐธ์กฐํ•˜์—ฌ ์ดˆ์•ˆ์„ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ์‹์„ ์ œ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ, ๊ณ ๊ฐ ์š”๊ตฌ์‚ฌํ•ญ์œผ๋กœ ์ธํ•ด Word๋ฅผ ํฌ๊ธฐํ•  ์ˆ˜ ์—†์–ด Pandoc์ด๋‚˜ Python ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด md๋ฅผ Word๋กœ ๋ณ€ํ™˜ํ•˜๋ ค๋Š” ์‹œ๋„์™€, ๊ถ๊ทน์ ์œผ๋กœ๋Š” ํ…์ŠคํŠธ์— Markdown๊ณผ ๋””์ž์ธ์— HTML/CSS๋ฅผ ๊ฒฐํ•ฉํ•œ ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ๋ฐฉ์‹์ด ๊ฐ€์žฅ ์ด์ƒ์ ์ด๋ผ๋Š” ๊ฒฐ๋ก ์„ ๋‚ด๋ฆฝ๋‹ˆ๋‹ค.

ํ•ต์‹ฌ ํฌ์ธํŠธ

  • AI์™€์˜ ์†Œํ†ต ๋ฐ ๋ฌธ์„œ ์ž‘์„ฑ์˜ ์ตœ์  ํฌ๋งท์€ Markdown(md)์ž…๋‹ˆ๋‹ค. Word ํŒŒ์ผ(.docx)์€ AI๊ฐ€ ์ง์ ‘ ์ฝ๊ฑฐ๋‚˜ ์“ฐ๊ธฐ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.
  • Word ๋ฌธ์„œ๋ฅผ md๋กœ ๋ณ€ํ™˜ํ•  ๋•Œ๋Š” Pandoc ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‚˜, ์„ธ๋ถ€ ์Šคํƒ€์ผ ์†์‹ค ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.
  • AI๋ฅผ ํ™œ์šฉํ•œ ๋ฌธ์„œ ์ดˆ์•ˆ ์ž‘์„ฑ ์›Œํฌํ”Œ๋กœ์šฐ๋Š” ์—๋””ํ„ฐ์—์„œ ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์™€ ์—…๋ฐ์ดํŠธ ๋‚ด์šฉ์„ ์ฐธ์กฐํ•˜์—ฌ md ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ์ด ํšจ์œจ์ ์ž…๋‹ˆ๋‹ค.
  • ๊ฐ€์žฅ ์ด์ƒ์ ์ธ ๋ฐฉ๋ฒ•์€ ํ…์ŠคํŠธ ์ฝ˜ํ…์ธ ์— Markdown์„, ๋””์ž์ธ ๋ฐ ๋ ˆ์ด์•„์›ƒ์— HTML/CSS๋ฅผ ๊ฒฐํ•ฉํ•œ ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
  • Word ๋‚ด๋ถ€ AI ๋„๊ตฌ(์˜ˆ: Claude for Word)๋Š” ์Šคํƒ€์ผ ์žฌํ˜„๊ณผ ๊ฐ™์€ ์„ธ๋ถ€ ๊ธฐ๋Šฅ ๊ตฌํ˜„์— ์–ด๋ ค์›€์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์„œ๋ก 
์ €๋Š” ์—…๋ฌด ์ค‘ ์ฝ”๋”ฉ์„ ํ•  ๋•Œ Claude Code, Codex ๋“ฑ๊ณผ ๊ฐ™์€ AI ๋„๊ตฌ๋“ค์„ 1๋…„ ์ด์ƒ ์‚ฌ์šฉํ•ด ์™”์Šต๋‹ˆ๋‹ค. ์ด ๋„๊ตฌ๋“ค์€ ํ™•์‹คํžˆ ์ €์˜ ์ฝ”๋”ฉ ์†๋„๋ฅผ ๋†’์—ฌ์ค๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ €๋Š” ์—ฌ์ „ํžˆ Microsoft Word (Word)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ˆ˜๋™์œผ๋กœ ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ด๋ฒˆ์—๋Š” AI๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์–ด๋–ป๊ฒŒ ๋ฌธ์„œ๋ฅผ ์ž๋™์œผ๋กœ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํƒ์ƒ‰ํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค. Word ์—†์ด ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์ด ๋” ์‰ฝ์ง€๋งŒ, ํ˜„์žฌ ์ €ํฌ ๊ณ ๊ฐ๋“ค์€ Word๋ฅผ ์š”๊ตฌํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ๋จผ์ € Word ํŒจํ„ด์— ๋Œ€ํ•ด ์ž‘์„ฑํ•˜๊ณ  ๋‚˜์ค‘์— ๋น„-Word (non-Word) ํŒจํ„ด์— ๋Œ€ํ•ด ์ž‘์„ฑํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

AI๋กœ Microsoft Word ๋ฌธ์„œ๋ฅผ ์ฝ๋Š” ๋ฐฉ๋ฒ•?
AI๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“  ๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ๊ณ  ์žˆ๋“ฏ์ด, 2026๋…„ 5์›” ๊ธฐ์ค€์œผ๋กœ Markdown (md) ํŒŒ์ผ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด AI์™€ ์†Œํ†ตํ•˜๋Š” ๊ฐ€์žฅ ์ข‹์€ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด, ์ œ๊ฐ€ ์•Œ๊ธฐ๋กœ AI๋Š” Word ํŒŒ์ผ์„ ์ง์ ‘ ์ฝ๊ฑฐ๋‚˜ ์“ธ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. Word .docx ํŒŒ์ผ์€ zip ํŒŒ์ผ์ด๋ฉฐ document.xml, styles.xml ๋“ฑ์„ ํฌํ•จํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— AI๊ฐ€ ์ง์ ‘ ์ฝ๊ธฐ์— ์ ํ•ฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ Word ํŒŒ์ผ์„ md๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ฒƒ์ด ๋” ์ข‹์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ์— ์ €๋Š” ์ธ๊ธฐ ์žˆ๋Š” ๋ฌธ์„œ ๋ณ€ํ™˜ ๋„๊ตฌ์ธ Pandoc (https://pandoc.org/)์„ ์‚ฌ์šฉํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค. Pandoc์„ ์‚ฌ์šฉํ•˜๋ฉด Word ํŒŒ์ผ์„ md๋กœ ์‰ฝ๊ฒŒ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์„ธ๋ถ€์ ์ธ ์Šคํƒ€์ผ์€ ์†์‹ค๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

AI๋กœ Markdown ๋ฌธ์„œ ์ดˆ์•ˆ์„ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•?
์ €์—๊ฒŒ ์ข‹์€ ์›Œํฌํ”Œ๋กœ์šฐ (workflow)๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์•˜์Šต๋‹ˆ๋‹ค.

  1. VS Code์™€ ๊ฐ™์€ ์—๋””ํ„ฐ์—์„œ ํ˜„์žฌ ํ”„๋กœ์ ํŠธ๋ฅผ ์—ด๊ณ  Codex์™€ ๊ฐ™์€ AI ๋„๊ตฌ๋ฅผ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด AI๊ฐ€ ๊ธฐ์กด ํ”„๋กœ์ ํŠธ๋ฅผ ์ฝ๊ณ  ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  2. md ํŒŒ์ผ์ด๋‚˜ ํ…์ŠคํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์—…๋ฐ์ดํŠธ ์‚ฌํ•ญ์„ AI์—๊ฒŒ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค. ์—…๋ฐ์ดํŠธ ์‚ฌํ•ญ์— ์ด๋ฏธ์ง€๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ๋‹ค๋ฉด, ์Šคํฌ๋ฆฐ์ƒท์„ AI์—๊ฒŒ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.
  3. AI์—๊ฒŒ ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์™€ ๊ธฐ์กด ๋ฌธ์„œ๋ฅผ ์ฝ๊ณ , ์—…๋ฐ์ดํŠธ๋œ ์ดˆ์•ˆ md ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๋„๋ก ์š”์ฒญํ•ฉ๋‹ˆ๋‹ค. AI๊ฐ€ ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์™€ ๋ฌธ์„œ๋ฅผ ์ฝ๊ฒŒ ํ•˜๋ฉด ์ดˆ์•ˆ์ด ๊ธฐ์กด ๊ฒƒ๊ณผ ๋” ์œ ์‚ฌํ•˜๊ณ  ๊ฐ€๊น๊ฒŒ ๋งŒ๋“ค์–ด์ง‘๋‹ˆ๋‹ค.
  4. ์ดˆ์•ˆ md ํŒŒ์ผ์„ ํ™•์ธํ•˜๊ณ  ์›ํ•˜๋Š” ๋Œ€๋กœ ์ˆ˜์ •ํ•ฉ๋‹ˆ๋‹ค.

AI๋กœ Microsoft Word ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•?
์ตœ๊ทผ Claude for Word๊ฐ€ ์ถœ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. (https://support.claude.com/en/articles/14465370-use-claude-for-word) ์ด์ œ Word ๋‚ด๋ถ€์—์„œ ์ง์ ‘ Claude๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Claude์˜ Excel ๋ฐ PowerPoint ๋ฒ„์ „๋„ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

์ €๋Š” ์ด๊ฒƒ์ด AI๋กœ ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ์ •๋‹ต์ด ๋  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ํฌ๋ง์„ ๊ฐ€๋“ ํ’ˆ๊ณ  ์‹œ๋„ํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํฐ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ์กด ๋ฌธ์„œ๋“ค์ฒ˜๋Ÿผ AI๋กœ ์Šคํƒ€์ผ (Styles)์„ ์žฌํ˜„ํ•  ์ˆ˜ ์—†์—ˆ์Šต๋‹ˆ๋‹ค. AI๋Š” ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜๋ ค๊ณ  ์‹œ๋„ํ•˜๊ณ  ์™„๋ฃŒํ–ˆ๋‹ค๊ณ  ๋งํ–ˆ์ง€๋งŒ, ๋ฌธ์„œ๋ฅผ ํ™•์ธํ–ˆ์„ ๋•Œ ์Šคํƒ€์ผ์ด ์ ์šฉ๋œ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์ธ ์Šคํƒ€์ผ๋งŒ ์ ์šฉ๋˜์—ˆ์„ ๋ฟ, ์„ธ๋ถ€์ ์ธ ์Šคํƒ€์ผ์€ ์ ์šฉ๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ AI์—๊ฒŒ Ctrl + C๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์Šคํƒ€์ผ์„ ๋ณต์‚ฌํ•˜๊ณ  Ctrl + V๋กœ ์ ์šฉํ•˜๋ผ๊ณ  ์š”์ฒญํ•˜๊ธฐ๋„ ํ–ˆ์ง€๋งŒ, AI๋Š” ๊ทธ๊ฒƒ์กฐ์ฐจ ํ•  ์ˆ˜ ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฒฐ๊ตญ AI๋Š” ์„ธ๋ถ€ ์Šคํƒ€์ผ์„ ์ˆ˜๋™์œผ๋กœ ์ ์šฉํ•˜๋ผ๊ณ  ๋งํ–ˆ์Šต๋‹ˆ๋‹ค.๐Ÿคฃ Gemini App์ด๋‚˜ Microsoft 365 Copilot (Copilot in Word)์™€ ๊ฐ™์ด Word์—์„œ ์ง์ ‘ AI๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์œ ์‚ฌํ•œ ๋„๊ตฌ๋“ค์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ €๋Š” ์•„์ง ์‚ฌ์šฉํ•ด ๋ณด์ง€ ์•Š์•˜์ง€๋งŒ, ๊ทธ๋“ค๋„ ๋™์ผํ•œ ๋ฌธ์ œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ ์„ธ๋ถ€ ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜์ง€ ๋ชปํ•  ๊ฒƒ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค.

AI๋กœ Markdown์„ Microsoft Word ๋ฌธ์„œ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ผ๊นŒ์š”? ์ €๋Š” Pandoc์„ ์‚ฌ์šฉํ•˜์—ฌ md ํŒŒ์ผ๋กœ๋ถ€ํ„ฐ Word ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ๋„ ์‹œ๋„ํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด ๋ฐฉ์‹์œผ๋กœ๋Š” ๋‹จ์ˆœํ•œ ์Šคํƒ€์ผ๋งŒ ์ ์šฉํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ €๋Š” reference.docx์˜ ๊ธฐ๋ณธ ์„ค์ •์„ ์ ์šฉํ•˜๊ณ , ์ œ๋ชฉ (Headings), ๊ธ€๋จธ๋ฆฌ ๊ธฐํ˜ธ (Bullet points), ํ‘œ (Tables)์™€ ๊ฐ™์€ ์„ธ๋ถ€ ์Šคํƒ€์ผ๋„ ์ž๋™์œผ๋กœ ์ ์šฉํ•˜๋Š” ๊ฐ„๋‹จํ•œ Python ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ์šฐ์„ , ์Šคํฌ๋ฆฝํŠธ์—์„œ ๋งคํ•‘ (Mapping)ํ•  ์ˆ˜ ์žˆ๋„๋ก md ํŒŒ์ผ์— # (์ œ๋ชฉ)์ด๋‚˜ - (๊ธ€๋จธ๋ฆฌ ๊ธฐํ˜ธ)์™€ ๊ฐ™์€ ๊ธฐํ˜ธ๋“ค์„ ์ž‘์„ฑํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋Ÿฐ ๋ฐฉ์‹์€ ๋ชจ๋“  ์„ธ๋ถ€ ์Šคํƒ€์ผ ๋งคํ•‘ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์•ผ ํ•˜๋ฏ€๋กœ, ์ด๋ฒˆ์—๋Š” ํ…Œ์ŠคํŠธ ๋‹จ๊ณ„์˜€๊ธฐ์— ์ฃผ์š” ์Šคํƒ€์ผ๋งŒ ๋งคํ•‘ํ•˜๊ณ  ์„ธ๋ถ€ ์Šคํƒ€์ผ์€ ์ˆ˜๋™์œผ๋กœ ์ ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ์ถฉ๋ถ„ํ•œ ์‹œ๊ฐ„์„ ๋“ค์ธ๋‹ค๋ฉด ๋ชจ๋“  ๋งคํ•‘์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

Word๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ผ๊นŒ์š”? ๋‹ค์Œ์œผ๋กœ, ์ €๋Š” Word๋ฅผ ๊ณ ๋ คํ•˜์ง€ ์•Š๊ณ  ๋ฌธ์„œ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ์‹œ๋„ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฒฐ๋ก ๋ถ€ํ„ฐ ๋ง์”€๋“œ๋ฆฌ๋ฉด, ์ €๋Š” md + HTML/CSS ์กฐํ•ฉ์ด ๊ฐ€์žฅ ์ข‹์€ ๋ฐฉ๋ฒ•์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ํ…์ŠคํŠธ์—๋Š” md๋ฅผ ์‚ฌ์šฉํ•˜๊ณ , ๋””์ž์ธ์—๋Š” HTML/CSS๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. md๋งŒ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ AI ์นœํ™”์ ์ด๊ณ  ํ† ํฐ ํšจ์œจ์  (Token-efficient)์ด์ง€๋งŒ, ์Šคํƒ€์ผ๋ง์ด ์ถฉ๋ถ„ํ•˜์ง€ ์•Š์•„ ์‚ฌ๋žŒ๋“ค์ด ์ฝ๊ธฐ์— ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์™ผ์ชฝ์— ๊ฐœ์š” (Outline)๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ํŽธ๋ฆฌํ•œ ๊ธฐ๋Šฅ๋“ค์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

HTML/CSS๋งŒ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ์‚ฌ๋žŒ๋“ค์ด ์ฝ๊ธฐ์—๋Š” ์‰ฝ์ง€๋งŒ, AI์—๊ฒŒ๋Š” ๋” ๋งŽ์€ ํ† ํฐ (Tokens)์„ ์†Œ๋น„ํ•˜๊ฒŒ ํ•˜๋ฉฐ ์‚ฌ๋žŒ๋“ค์ด ์ฝ”๋“œ๋ฅผ ์ฝ๊ธฐ์—๋Š” ๋” ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ €๋Š” ํ…์ŠคํŠธ์—๋Š” Markdown (md)์„ ์‚ฌ์šฉํ•˜๊ณ  ๋””์ž์ธ์—๋Š” HTML/CSS๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ํ† ํฐ ํšจ์œจ์„ฑ๊ณผ ์‚ฌ๋žŒ์„ ์œ„ํ•œ ๊ฐ€๋…์„ฑ์ด๋ผ๋Š” ๋‘ ๋งˆ๋ฆฌ ํ† ๋ผ๋ฅผ ๋ชจ๋‘ ์žก๋Š” ์ข‹์€ ๋ฐฉ๋ฒ•์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ์–ด๋ ค์šด ์ ์€ HTML/CSS ํ…œํ”Œ๋ฆฟ์„ ๋จผ์ € ๋งŒ๋“œ๋Š” ๊ฒƒ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์‹œ๋‹ˆ์–ด ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž (Senior Frontend Developer)์˜ ๊ฐ๋… ํ•˜์— ํ•˜๋‚˜๋ฅผ ๋งŒ๋“ค์–ด ๋‘๋ฉด, ๊ทธ ํ…œํ”Œ๋ฆฟ์„ ๋ฐ˜๋ณตํ•ด์„œ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜์ค‘์—๋Š” ํ…์ŠคํŠธ ๋ถ€๋ถ„๋งŒ ๊ณ ๋ฏผํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ €๋Š” ์ด ๊ณ„ํš์„ ์œ„ํ•ด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์›Œํฌํ”Œ๋กœ์šฐ (Workflow)๋ฅผ ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค:

md

  • Pandoc์„ ์‚ฌ์šฉํ•œ ์Šคํฌ๋ฆฝํŠธ๋กœ CSS๋ฅผ ์ ์šฉํ•˜๊ณ  HTML๋กœ ๋ณ€ํ™˜

HTML/CSS

  • ์™ผ์ชฝ์— ๊ฐœ์š” (Outline)๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ๋ณธ๋ฌธ์„ ์ •์ƒ์ ์ธ ์ „์ฒด ํฌ๊ธฐ๋กœ ํ‘œ์‹œํ•˜๋ฉด ๋” ํŽธ๋ฆฌํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ, ์ธ์‡„ ๋ฏธ๋ฆฌ๋ณด๊ธฐ (Print Preview)๋ฅผ ์œ„ํ•ด A4 ํฌ๊ธฐ๋กœ ๋ณ€๊ฒฝํ•˜๊ณ  ํŽ˜์ด์ง€ ๋‚˜๋ˆ„๊ธฐ (Page Breaks)๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

AI Avatar
์ œ ์•ฑ์„ ์กฐ๊ธˆ ํ™๋ณดํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. AI Avatar๋Š” AI ์ฑ„ํŒ…๊ณผ Enter ํ‚ค๋ฅผ ํ†ตํ•ด ์—ฌ๋Ÿฌ๋ถ„์˜ VRoid (VRM) ์•„๋ฐ”ํƒ€๊ฐ€ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฌด๋ฃŒ ์•ฑ์ž…๋‹ˆ๋‹ค. Chrome (Edge) ๋ฐ VS Code์—์„œ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ์• ๋‹ˆ๋ฉ”์ด์…˜ ์—๋””ํ„ฐ (Animation Editor)๋„ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. AI Avatar๋ฅผ ์ง€์†์ ์œผ๋กœ ์—…๋ฐ์ดํŠธํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ๊ณง ๋Œ€๊ทœ๋ชจ ์—…๋ฐ์ดํŠธ๊ฐ€ ์˜ˆ์ •๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค!

VS Code (100ํšŒ ์ด์ƒ์˜ ์„ค์น˜ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!)
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

Chrome (Edge)
https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi

๋Œ“๊ธ€ (Comments)
ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค! 2026๋…„ 5์›”์— ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•œ ์ข‹์€ ์•„์ด๋””์–ด๊ฐ€ ์žˆ์œผ์‹ ๊ฐ€์š”? ํ˜„์žฌ AI๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฌธ์„œ๋ฅผ ์–ด๋–ป๊ฒŒ ์ž‘์„ฑํ•˜์‹œ๋‚˜์š”? ๋ฏธ๋ž˜์˜ AI๋ฅผ ์ด์šฉํ•œ ๋ฌธ์„œ ์ž‘์„ฑ์€ ์–ด๋–ค ๋ชจ์Šต์ผ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹œ๋‚˜์š”? ๋‹ค๋ฅธ ์–ด๋–ค ์˜๊ฒฌ๋„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค!

AI ์ž๋™ ์ƒ์„ฑ ์ฝ˜ํ…์ธ 

๋ณธ ์ฝ˜ํ…์ธ ๋Š” Dev.to AI tag์˜ ์›๋ฌธ์„ AI๊ฐ€ ์ž๋™์œผ๋กœ ์š”์•ฝยท๋ฒˆ์—ญยท๋ถ„์„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์› ์ €์ž‘๊ถŒ์€ ์›์ €์ž‘์ž์—๊ฒŒ ์žˆ์œผ๋ฉฐ, ์ •ํ™•ํ•œ ๋‚ด์šฉ์€ ๋ฐ˜๋“œ์‹œ ์›๋ฌธ์„ ํ™•์ธํ•ด ์ฃผ์„ธ์š”.

์›๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
0

๋Œ“๊ธ€

0