[ ๋ธ๋ก๊ทธ ์๋ํฐ ์ข ๋ฅ์ ์ฅ๋จ์ ] ๋งํฌ๋ค์ด, WYSIWYG, HTML, AI ์๋ํฐ ๋น๊ต
๋ฐํ์ผ: 2025. 2. 18.
์ด๋ค ๋ธ๋ก๊ทธ ์๋ํฐ๋ฅผ ์ ํํ ๊น? ๋งํฌ๋ค์ด๋ถํฐ AI ์๋ํฐ๊น์ง ์ฅ๋จ์ ๋ถ์
๋ธ๋ก๊ทธ๋ฅผ ์ด์ํ๋ฉด์ ์ฝํ ์ธ ์ ํ์ง๊ณผ ํจ์จ์ ์ธ ๊ธ์ฐ๊ธฐ๋ฅผ ์ํด ๊ฐ์ฅ ์ค์ํ ์์ ์ค ํ๋๋ ๋ฐ๋ก ๋ธ๋ก๊ทธ ์๋ํฐ์ ๋๋ค. ๋ธ๋ก๊ทธ ์๋ํฐ๋ ์ฐ๋ฆฌ๊ฐ ๊ธ์ ์์ฑํ๊ณ ํธ์งํ๋ ๋๊ตฌ๋ก, ์ด๋ฅผ ์ด๋ป๊ฒ ํ์ฉํ๋๋์ ๋ฐ๋ผ ๊ธ์ฐ๊ธฐ์ ํธ๋ฆฌํจ๊ณผ ํจ์จ์ฑ์ด ํฌ๊ฒ ๋ฌ๋ผ์ง๋๋ค. ๊ทธ๋ผ, ๋ค์ํ ๋ธ๋ก๊ทธ ์๋ํฐ์ ์ข ๋ฅ์ ๊ฐ ์๋ํฐ๊ฐ ๊ฐ์ง๋ ์ฅ๋จ์ ์ ๋ํด ์ดํด๋ณด๊ฒ ์ต๋๋ค.
๋ธ๋ก๊ทธ ์๋ํฐ ์ข
๋ฅ ๋ถ์
ํจ์จ์ ์ธ ๊ธ์ฐ๊ธฐ๋ฅผ ์ํ ์ต๊ณ ์ ์ ํ์?
๋ธ๋ก๊ทธ ๊ธ ์์ฑ ๋๊ตฌ ์ถ์ฒ
1. ๋งํฌ๋ค์ด(Markdown) ์๋ํฐ
๋งํฌ๋ค์ด(Markdown) ์๋ํฐ๋ ๊ฐ๋จํ ํ ์คํธ ๊ธฐ๋ฐ ๋ฌธ๋ฒ์ ์ฌ์ฉํ์ฌ ๊ธ์ ์์ฑํ๋ ๋ฐฉ์์ ๋๋ค. ๋งํฌ๋ค์ด์ ์ฃผ๋ก ๊ฐ๋ฐ์๋ ๊ธฐ์ ์ ์ธ ๋ด์ฉ์ ๋ค๋ฃฐ ๋ ์ฌ์ฉ๋์ง๋ง, ์ต๊ทผ์๋ ๋ธ๋ก๊ทธ ์์ฑ์์๋ ๋ง์ด ํ์ฉ๋๊ณ ์์ต๋๋ค.
์ฅ์
- ๊ฐ๋จํ๊ณ ์ง๊ด์ : ๋งํฌ๋ค์ด์ ๋ณ๋ค๋ฅธ UI ์์ด ํ ์คํธ์ ๋ฌธ๋ฒ๋ง์ผ๋ก ์์์ ์ถ๊ฐํ ์ ์์ด, ์ง๊ด์ ์ผ๋ก ๊ธ์ ์์ฑํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ๊ตต๊ฒ, ๊ธฐ์ธ์, # ์ ๋ชฉ ๋ฑ์ ๋ฌธ๋ฒ์ ์ฌ์ฉํ์ฌ ๊ธ์ ์์ํ ์ ์์ต๋๋ค.
- ๋น ๋ฅธ ์์ฑ: GUI ์์ด ํ ์คํธ๋ง์ผ๋ก ๋ฐ๋ก ํธ์ง์ด ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ๋งค์ฐ ๋น ๋ฅด๊ฒ ๊ธ์ ์์ฑํ ์ ์์ต๋๋ค.
- ๊ฐ๋ณ๊ณ ํจ์จ์ : ๋งํฌ๋ค์ด์ ๊ธฐ๋ณธ์ ์ผ๋ก ๊ฐ๋ฒผ์ด ํ์์ด๊ธฐ ๋๋ฌธ์ ๋ก๋ฉ ์๋๊ฐ ๋น ๋ฅด๊ณ HTML๋ก ์ฝ๊ฒ ๋ณํํ ์ ์์ด ๋ค์ํ ํ๋ซํผ์์ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋ฉ๋๋ค.
๋จ์
- ํ์ต ๊ณก์ : ๋งํฌ๋ค์ด ๋ฌธ๋ฒ์ ์ฒ์ ์ ํ๋ ์ฌ๋์๊ฒ๋ ๋ฌธ๋ฒ์ด ๋ค์ ์์ํ๊ณ ์ด๋ ค์ธ ์ ์์ต๋๋ค. ๊ธฐ๋ณธ์ ์ธ ๋ฌธ๋ฒ์ ๋ฐฐ์ฐ๋ ๋ฐ ์๊ฐ์ด ํ์ํ ์ ์์ต๋๋ค.
- ์ ํ๋ ํธ์ง ๊ธฐ๋ฅ: ๋งํฌ๋ค์ด์ ๊ธฐ๋ณธ์ ์ผ๋ก ํ ์คํธ ํธ์ง๋ง ์ง์ํ๊ธฐ ๋๋ฌธ์ ๋ณต์กํ ๋ ์ด์์์ ์์ฑํ๊ฑฐ๋ ๊ณ ๊ธ ์์์ ์ถ๊ฐํ๋ ๋ฐ ์ ์ฝ์ด ์์ ์ ์์ต๋๋ค.
์ถ์ฒ ๋งํฌ๋ค์ด ์๋ํฐ
๋งํฌ๋ค์ด์ ์ง์ํ๋ ๋ค์ํ ์๋ํฐ๋ฅผ ์๊ฐํฉ๋๋ค:
- Dillinger (์ฌ์ดํธ: dillinger.io): ์ค์๊ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ์ ๊ณตํ๋ ์จ๋ผ์ธ ๋งํฌ๋ค์ด ์๋ํฐ
- StackEdit (์ฌ์ดํธ: stackedit.io): ๊ตฌ๊ธ ๋๋ผ์ด๋ธ์ ๋๊ธฐํํ์ฌ ๋ฌธ์๋ฅผ ๊ด๋ฆฌํ ์ ์๋ ๋งํฌ๋ค์ด ์๋ํฐ
- Typora (์ฌ์ดํธ: typora.io): ์ค์๊ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ์ ๊ณตํ๋ ๋ฐ์คํฌํ ๊ธฐ๋ฐ์ ๋งํฌ๋ค์ด ์๋ํฐ
2. WYSIWYG ์๋ํฐ
WYSIWYG ์๋ํฐ๋ ์ฌ์ฉ์๊ฐ ๋ณด๋ ๊ทธ๋๋ก ๊ฒฐ๊ณผ๋ฅผ ํ์ธํ ์ ์๋ ์ง๊ด์ ์ธ ์๋ํฐ์ ๋๋ค. ๋งํฌ๋ค์ด๊ณผ ๋ฌ๋ฆฌ, HTML์ ์ง์ ์์ฑํ ํ์ ์์ด ๋ฒํผ ํด๋ฆญ๋ง์ผ๋ก ๋ค์ํ ์์์ ์ถ๊ฐํ ์ ์์ต๋๋ค.
๋ํ์ ์ธ WYSIWYG ์๋ํฐ๋ก๋ KEditor, TinyMCE, CKEditor ๋ฑ์ด ์์ต๋๋ค. ์ด๋ค ์๋ํฐ๋ ๋ธ๋ก๊ทธ ๊ธ ์์ฑ ์ ๋ง์ ๊ธฐ๋ฅ์ ์ ๊ณตํ์ฌ ์ผ๋ฐ์ ์ผ๋ก ๋ง์ด ์ฌ์ฉ๋๊ณ ์์ต๋๋ค.
์ฅ์
- ํธ๋ฆฌํ UI: ๋ฒํผ ํด๋ฆญ๋ง์ผ๋ก ์ฝ๊ฒ ์์์ ์ถ๊ฐํ๊ณ , ์ด๋ฏธ์ง, ๋งํฌ, ํ ๋ฑ์ ๋ค์ํ ์ฝํ ์ธ ๋ฅผ ์ฝ์ ํ ์ ์์ต๋๋ค. ๋ณต์กํ ์ฝ๋๋ฅผ ์ ํ์ ์์ด ์ง๊ด์ ์ผ๋ก ๊ธ์ ์์ฑํ ์ ์์ต๋๋ค.
- ์ฆ์ ๊ฒฐ๊ณผ ํ์ธ: ์์ฑํ ๋ด์ฉ์ ์ค์๊ฐ์ผ๋ก ํ์ธํ ์ ์์ด, ๊ธ์ ์์ฑํ๋ฉด์ ๋์์ ๊ฒฐ๊ณผ๋ฌผ์ ๋ณผ ์ ์์ต๋๋ค. ์ด๋ก ์ธํด ๋น ๋ฅด๊ณ ์ ํํ ํธ์ง์ด ๊ฐ๋ฅํฉ๋๋ค.
- ๊ณ ๊ธ ๊ธฐ๋ฅ ์ ๊ณต: ๋งํฌ๋ค์ด ์๋ํฐ์์๋ ๊ตฌํํ๊ธฐ ์ด๋ ค์ด ๋ค์ํ ๊ธฐ๋ฅ(ํ, ์ด๋ฏธ์ง ์ฝ์ , ๊ธ๊ผด ์ค์ ๋ฑ)์ ์ง์ํฉ๋๋ค. ์ด๋ฌํ ๊ธฐ๋ฅ์ ๋ธ๋ก๊ทธ ์๋ํฐ์์ ๋งค์ฐ ์ ์ฉํฉ๋๋ค.
๋จ์
- ๋ฌด๊ฑฐ์ด ๊ตฌ์กฐ: ๋งํฌ๋ค์ด์ ๋นํด ์๋์ ์ผ๋ก ๋ ๋ง์ ์์์ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ์น์ฌ์ดํธ์ ๋ก๋ฉ ์๋๊ฐ ๋๋ ค์ง ์ ์์ต๋๋ค. ํนํ, ๋ค์ํ ํ๋ฌ๊ทธ์ธ์ด๋ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ๋ ์ฑ๋ฅ ์ ํ๊ฐ ์์ ์ ์์ต๋๋ค.
- ๊ณผ๋ํ ์ต์ : ๋ค์ํ ๊ธฐ๋ฅ์ ์ ๊ณตํ์ง๋ง ์ด๋ณด์๋ ๋๋ฌด ๋ง์ ์ต์ ๋๋ฌธ์ ํผ๋์ค๋ฌ์ธ ์ ์์ต๋๋ค. ๋ํ ๋ณต์กํ ๊ธฐ๋ฅ์ ์ ๋๋ก ์ดํดํ๊ณ ํ์ฉํ๋ ๋ฐ ์๊ฐ์ด ํ์ํ ์ ์์ต๋๋ค.
3. ํ ์คํธ ๊ธฐ๋ฐ HTML ์๋ํฐ
HTML ์๋ํฐ๋ ๊ธฐ๋ณธ์ ์ผ๋ก HTML ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ๊ธ์ ์์ฑํ๋ ๋ฐฉ์์ ๋๋ค. HTML์ ์ดํดํ๊ณ ์ฌ์ฉํ๋ ์ฌ๋๋ค์๊ฒ ์ ํฉํ ์๋ํฐ๋ก, ์ฝ๋ ๊ธฐ๋ฐ์ ํธ์ง์ด ๊ฐ๋ฅํฉ๋๋ค.
์ฅ์
- ์ ๋ฐํ ์ ์ด: HTML ํ๊ทธ๋ฅผ ์ง์ ์์ฑํ์ฌ ๊ธ์ ๊ตฌ์กฐ์ ๋ ์ด์์์ ์ธ๋ฐํ๊ฒ ์ ์ดํ ์ ์์ต๋๋ค. CSS์ JavaScript๋ฅผ ํฌํจ์์ผ ๋์ฑ ๊ณ ๊ธ์ค๋ฌ์ด ํ์ด์ง๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
- ์ต๊ณ ์ ์ปค์คํฐ๋ง์ด์ง: ์ฝ๋ ๊ธฐ๋ฐ์ผ๋ก ๋ชจ๋ ์์๋ฅผ ์ง์ ์์ฑํ๋ฏ๋ก ์์ ๋ง์ ์คํ์ผ๊ณผ ๊ธฐ๋ฅ์ ์๋ฒฝํ๊ฒ ๊ตฌํํ ์ ์์ต๋๋ค.
๋จ์
- ์ฝ๋ ์ง์ ํ์: HTML์ ์ง์ ์์ฑํด์ผ ํ๋ฏ๋ก ๊ธฐ๋ณธ์ ์ธ HTML ์ง์์ด ๋ถ์กฑํ๋ฉด ๊ธ์ ์์ฑํ๋ ๋ฐ ์ด๋ ค์์ ๊ฒช์ ์ ์์ต๋๋ค.
- ์๋์ ํจ์จ์ฑ: ๋งํฌ๋ค์ด์ด๋ WYSIWYG ์๋ํฐ์ ๋น๊ตํ์ ๋ ์์ฑ ์๋๊ฐ ๋๋ฆด ์ ์์ต๋๋ค. ํนํ HTML์ ์ฒ์ ์ ํ๋ ์ฌ๋์๊ฒ๋ ์๊ฐ์ด ์ค๋ ๊ฑธ๋ฆด ์ ์์ต๋๋ค.
4. AI ์๋ํฐ
ํ๊ตญ์ด AI ์๋ํฐ๋ ํ ์คํธ ํธ์ง ๋ฐ ์์ฑ์ ๋๋ ์ธ๊ณต์ง๋ฅ ๊ธฐ๋ฐ์ ๋๊ตฌ๋ค์ ๋๋ค. ๋ค์ํ ๋ถ์ผ์์ ํ์ฉ๋ ์ ์์ผ๋ฉฐ, ๋ค์๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค:
- ๋ฌธ๋ฒ ๋ฐ ๋ง์ถค๋ฒ ๊ฒ์ฌ: AI๋ ๋ฌธ๋ฒ๊ณผ ๋ง์ถค๋ฒ ์ค๋ฅ๋ฅผ ์๋์ผ๋ก ๊ฐ์งํ๊ณ ์์ ์ ์์ ํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ค๋ฅ๋ฅผ ์ค์ด๊ณ ๋ ์ ํํ ๊ธ์ ์์ฑํ ์ ์์ต๋๋ค.
- ์คํ์ผ ๊ฐ์ : ๊ธ์ ๋ฌธ์ฒด๋ ํํ์ ๊ฐ์ ํ๋ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๋ ๊ฐ๊ฒฐํ๊ณ ์์ฐ์ค๋ฌ์ด ๋ฌธ์ฅ์ผ๋ก ๋ฐ๊พธ๊ฑฐ๋, ๋ค์ํ ์ดํ๋ฅผ ์ ์ํด ๋ฌธ์ฅ์ ์ข๋ ํ์ฑํ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค.
- ๋ฒ์ญ ๊ธฐ๋ฅ: ๋ค์ํ ์ธ์ด ๊ฐ์ ๋ฒ์ญ์ ์ง์ํ๋ ๊ธฐ๋ฅ์ด ์์ด, ์ฌ๋ฌ ์ธ์ด๋ก ๊ธ์ ์์ฑํ๊ฑฐ๋ ๋ฒ์ญํ ๋ ํธ๋ฆฌํ๊ฒ ์ด์ฉํ ์ ์์ต๋๋ค.
- ์์ด๋์ด ์์ฑ: ๊ธ์ ์์ฑํ ๋ ์์ด๋์ด๊ฐ ํ์ํ ๋, AI๋ ์ฃผ์ ๋ฅผ ์ ์ํ๊ฑฐ๋ ๊ธ์ ํ๋ฆ์ ์ด์ด๊ฐ ์ ์๋ ์์ด๋์ด๋ฅผ ์ ๊ณต๋ฐ์์๋ ์์ต๋๋ค.
- ์๋ ์์ฝ: ๊ธด ํ ์คํธ๋ ๊ธฐ์ฌ ๋ฑ์ ์์ฝํ์ฌ ํต์ฌ ๋ด์ฉ์ ๋น ๋ฅด๊ฒ ํ์ ํ ์ ์์ต๋๋ค.
๋ช ๊ฐ์ง ์ ๋ช ํ ํ๊ตญ์ด AI ์๋ํฐ ๋๊ตฌ๋ก๋ ๋ค์ด๋ฒ์ ํํ๊ณ , ์นด์นด์ค์ AI ๊ธฐ๋ฐ ํ ์คํธ ํธ์ง๊ธฐ, ๋ฌธ๋ฒ ๊ฒ์ฌ๊ธฐ ๋ฑ์ด ์์ต๋๋ค. ํนํ GPT ๊ณ์ด ๋ชจ๋ธ์ ํ์ฉํ ์๋ํฐ๋ค์ ๋ํํ ์ธ๊ณต์ง๋ฅ์ผ๋ก ์์ฐ์ค๋ฌ์ด ํ ์คํธ ํธ์ง์ ์ง์ํ๋ฉฐ, ์ฝํ ์ธ ์ฐฝ์๊ณผ ์ปค๋ฎค๋์ผ์ด์ ์ ํ์ ์ ์ผ๋ก ๋ฐ๊พธ๊ณ ์์ต๋๋ค.
๋ธ๋ก๊ทธ ์๋ํฐ๋ ๊ธ์ฐ๊ธฐ์ ํจ์จ์ฑ๊ณผ ํธ๋ฆฌํจ์ ๋์ฌ์ฃผ๋ ์ค์ํ ๋๊ตฌ์ ๋๋ค. ๋งํฌ๋ค์ด ์๋ํฐ๋ ๋น ๋ฅด๊ณ ๊ฐ๊ฒฐํ ์์ฑ์ด ๊ฐ๋ฅํ์ง๋ง, ๊ณ ๊ธ ๊ธฐ๋ฅ์์๋ ์ ์ฝ์ด ์์ ์ ์์ต๋๋ค. ๋ฐ๋ฉด, WYSIWYG ์๋ํฐ๋ ์ง๊ด์ ์ธ UI๋ฅผ ์ ๊ณตํ์ง๋ง, ์ฑ๋ฅ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค. HTML ์๋ํฐ๋ ์ฝ๋ ๊ธฐ๋ฐ์ผ๋ก ์ธ๋ฐํ ์ ์ด๊ฐ ๊ฐ๋ฅํ์ง๋ง, HTML ์ง์์ด ํ์ํฉ๋๋ค. ๋ง์ง๋ง์ผ๋ก AI ์๋ํฐ๋ ๋ค์ํ ํธ์ง๊ณผ ์ต์ ํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ฉฐ, ์ฝํ ์ธ ์ ํ์ง์ ๋์ด๋ ๋ฐ ์ด์ฉํ ์ ์์ต๋๋ค.
๋ธ๋ก๊ทธ์ ํน์ฑ๊ณผ ์์ ์ ํธ์ง ์คํ์ผ์ ๋ง๋ ์๋ํฐ๋ฅผ ์ ํํ๋ ๊ฒ์ด ์ค์ํ๋ฉฐ, ์ฌ๋ฌ ๋๊ตฌ๋ฅผ ์ ์กฐํฉํด์ ํ์ฉํ๋ ๊ฒ๋ ์ข์ ๋ฐฉ๋ฒ์ ๋๋ค.