Spectra Blocks๊ฐ ์ ๊ณตํ๋ ๊ฒ ์ด์์ผ๋ก WordPress ์น์ฌ์ดํธ์ ๋ ๋ง์ ๋ค์์ฑ๊ณผ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๊ณ ์ถ๋ค๋ฉด ์ด์ด ์ข์ ๊ฒ์ ๋๋ค! ์ด ๋ธ๋ก๊ทธ๋ ๋น์ ์ ์ํด ๋ง๋ค์ด์ก์ต๋๋ค!
์ฝํ ์ธ ์ ์ ๊ฒฝํ์ ํฅ์์ํฌ ์ ์๋ ๋ช ๊ฐ์ง ํ์์ ์ธ ๋์ฒด ํ๋ฌ๊ทธ์ธ์ด ์์ต๋๋ค. ๊ฐ๊ฐ์ ์ฌ์ฉ์ ์นํ์ ์ธ ์ธํฐํ์ด์ค์ ๊ด๋ฒ์ํ ๋ธ๋ก ์ปฌ๋ ์ ๋ถํฐ ํ์ ๊ธฐ๋ฅ๊น์ง ๊ณ ์ ํ ๊ธฐ๋ฅ์ผ๋ก ๊ฐ๋ ์ฐจ ์์ต๋๋ค.ย
์ด์ WordPress ์น์ฌ์ดํธ๋ฅผ ํ ๋จ๊ณ ๋ ๋ฐ์ ์ํฌ ์ ์๋ ์๋ฒฝํ ํ๋ฌ๊ทธ์ธ์ ์ฐพ์๋ณด์ธ์!
์คํํธ๋ผ ๋ธ๋ก์ ๋ํ ๊ฐ๋ตํ ์๊ฐ
Spectra WordPress ๋ธ๋ก ํ๋ฌ๊ทธ์ธ์ด๋ ๋ฌด์์ ๋๊น? ์ด์ ์ ๋ค์์ผ๋ก ์ธ์๋์๋ Spectra WordPress ํ๋ฌ๊ทธ์ธ ๊ตฌํ ๋ฒ ๋ฅดํฌ๋ฅผ ์ํ ์ต๊ณ ์ ์ ๋์จ๋ Brainstorm Force์์ ์ ์ํ ๊ฐ๋ ฅํ WordPress ๋ธ๋ก ํธ์ง๊ธฐ ํ๋ฌ๊ทธ์ธ์ด์ ์ถ๊ฐ ๊ธฐ๋ฅ์ผ๋ก, 300๋ง ๊ฐ ์ด์์ ์น์ฌ์ดํธ๋ฅผ ์ง์ํฉ๋๋ค.
์์ฌํ ๋ฐ ์์ด Spectra ํ๋ฌ๊ทธ์ธ์ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ธ ๋ ์ด์์์ ์์ฑํ ์ ์๋ ์ฌ์ฉ์ ์นํ์ ์ธ ์ธํฐํ์ด์ค์ ์ฌ์ฉ์ ์ ์ ์ต์ ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ณด์๋ฅผ ์ํด ์ค๊ณ๋ 25๊ฐ ์ด์์ ํฌ๋ฆฌ์์ดํฐ๋ธ ๋ธ๋ก์ผ๋ก ๊ตฌ์ฑ๋ ๋๋๊ทธ ์ค ๋๋กญ ์์คํ ์ ๋๋ค.ย
๊ทธ๋ ๋ค๋ฉด Spectra ์น์ฌ์ดํธ ๋น๋๊ฐ ์น ๋์์ธ ๋ถ์ผ์์ ์ ๋ช ํ ํ๋ฌ๊ทธ์ธ์ด ๋๋ ์ด์ ๋ ๋ฌด์์ผ๊น์? Spectra ๋น๋์ ๋ช ์ฑ ๋ค์ ์จ์ ๋๋ผ์ด ๊ธฐ๋ฅ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- 100๊ฐ๊ฐ ๋๋ ์ฌ์ ๋์์ธ๋ ์น์ฌ์ดํธ ํ ํ๋ฆฟ.
- 25๊ฐ ์ด์์ ๊ตฌํ ๋ฒ ๋ฅด๊ทธ ๋ธ๋ก.
- ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ(๋ชจ๋ฐ์ผ, ํ๋ธ๋ฆฟ, ๋ฐ์คํฌํฑ)์์ ๋ฐ์ํ ํธ์ง์ด ๊ฐ๋ฅํฉ๋๋ค.
- ์๋๋ฅผ ํฅ์์ํค๋ ์์ฐ ์ต์ ํ ๋ฐ ์บ์ฑ ๊ธฐ๋ฅ.
- ์์, ์คํํธ๋ผ ์ ๋๋ฉ์ด์ ํจ๊ณผ, ํ์ดํฌ๊ทธ๋ํผ, ๋์์ธ ์ต์ ์ ํฌํจํ ์คํ์ผ ์ ํ.
WP Spectra์ ์ต๊ณ ์ ๋์
์ด ์น์ ์์๋ Spectra Blocks ๋ฌด๋ฃ ๋ฐ ํ๋ก์ ๋ํ 8๊ฐ์ง ์ฃผ๋ชฉํ ๋งํ ๋์์ ์ดํด๋ณด๊ณ ํด๋น ๊ธฐ๋ฅ๊ณผ ๊ฐ๊ฐ์ ์ฅ์ ๋ฐ ๋จ์ ์ ๋ํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํฉ๋๋ค.ย
๋ค์์ ๊ณ ๋ คํ ์ ์๋ WordPress์ ๋ํ ๋ช ๊ฐ์ง ์ต๊ณ ์ Spectra Blocks ๋์์ ๋ํ ๋ถ์์ ๋๋ค.
ํ๋ฌ๊ทธ์ธ | ์ ๊ณต๋๋ ๋ธ๋ก(๋ฌด๋ฃ ๋ฒ์ ) | ๋ฌด๋ฃ ๋ฒ์ | ๋ธ๋ก ์ ํ | ์ง์คํ๋ค |
---|---|---|---|---|
๊ตฌํ ํท | ๐ 33๊ฐ ์ด์์ ์ฌ์ ๊ตฌ์ถ๋ ๋ธ๋ก ๐ 6๊ฐ ๋ชจ๋ ๐ 40๊ฐ ์ด์์ ์ฌ์ ๋์์ธ๋ ํ ํ๋ฆฟ ๋ฐ ํจํด | ์์(๋ฒ์ฉ ๋ธ๋ก์ ์ ํํ๋ ๊ฒ์ด ์ข์) | โก๏ธ ๋ฒ์ฉ โก๏ธ ๊ฒ์๋ฌผ ๋ ์ด์์ โก๏ธ ํฌ๋ฆฌ์์ดํฐ๋ธ | ๐์ฌ์ฉ์ ์นํ์ ๐๊ฒฝ๋(์๋) ๋ฐ ์ฑ๋ฅย ๐ํฌ๊ด์ ์ธ ๋ธ๋ก ์ ํ๊ตฐ |
์ผํฐ๋ฐ ๋ธ๋ก | 26๊ฐ์ ๊ตฌํ ๋ฒ ๋ฅดํฌ ๋ธ๋ก | ์(๋ฒํผ, ์ฝํ ์ธ ์บ๋ฌ์ , ๊ฐ๊ฒฉํ์ ๊ฐ์ ๊ธฐ๋ณธ ๋ธ๋ก) | ์ฐฝ์์ ์ธ | ์ง์ค๋ ๋ธ๋ก ๊ธฐ๋ฅ์ผ๋ก ๋งค๋ ฅ์ ์ธ ์ฝํ ์ธ ๋ง๋ค๊ธฐ |
๋ง์คํฐ ๋ธ๋กย | 20๊ฐ ์ด์์ ๋ธ๋ก | ์(์ ํ๋ ๋ธ๋ก ์ต์ , ๊ธฐ๋ณธ ์คํ์ผ) | ๋์์ธ ์ค์ฌ | ์ฃผ๋ก ๊ณ ๊ธ ๋ ์ด์์ ๋ฐ ๋์์ธ ์์์ ์ฌ์ฉ๋ฉ๋๋ค. |
์์ ์ ์์ | 40๊ฐ ์ด์์ ๋ธ๋ก | ์์(๋ฒ์ฉ ๋ธ๋ก์ ์ ํํ๋ ๊ฒ์ด ์ข์) | โก๏ธ ๋ฒ์ฉ โก๏ธ ๋์์ธ | ๋์์ธ ์ต์ ์ ์ฌ์ฉํ ์ฌ์ฉ์ ์นํ์ ์ธ ๋๋๊ทธ ์ค ๋๋กญ ํธ์ง |
ํ์ ๋ธ๋ก | 53๊ฐ ์ด์์ ๋ธ๋ก | ์์(๋ฒ์ฉ ๋ธ๋ก์ ์ ํํ๋ ๊ฒ์ด ์ข์) | ํ์ ์น์ฌ์ดํธ ๋น๋ฉ ๋ธ๋ก | ํต์ฌ ๊ธฐ๋ฅ ๋ฐ ์ฝํ ์ธ ์์ ์ถ๊ฐ |
ํ๋ฆฌ๋ฏธ์ ๋ธ๋ก | 22๊ฐ ์ด์์ ๋ธ๋ก | ์(์ ํ๋ ๊ธฐ๋ฅ) | ๋์์ธ์ ์ํ ํนํ๋ ๋ธ๋ก | ๋์์ธ ์ค์ฌ์ ๊ธฐ๋ฅ์ฑ |
ํ๋ฌ์ค ๋ธ๋ก | 85๊ฐ ์ด์์ ๋ธ๋ก | ์(์ ํ๋ ๊ธฐ๋ฅ) | โก๏ธ ๋ฒ์ฉ โก๏ธ ๋์์ธ | ์ฌ์ฉ์ ์นํ์ฑ๊ณผ ๋์์ธ ์ ์ด์ ๊ท ํ |
์ ๋ค์์ค ๋ธ๋ก | 15๊ฐ ์ด์์ ๋ธ๋กย | ์์(๋ฒ์ฉ ๋ธ๋ก์ ์ ํํ๋ ๊ฒ์ด ์ข์) | Genesis ํ ๋ง ํตํฉ์ ํตํ ๋ฒ์ฉ | Genesis ํ ๋ง(๋ฌด๋ฃ) ๋ฐ StudioPress ํ ๋ง(์ ๋ฃ)์ ๊ธฐ๋ฅ ํ์ฅ |
๊ฐ ์ต์ ์ ๋ํด ๋ ์์ธํ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
1. ๊ตฌํ ํท
![GutenKit - WordPress์ Spectra ๋ธ๋ก ๋์](https://wpmet.com/wp-content/uploads/2024/03/chrome-capture-2024-2-25.png)
GutenKit์ Gutenberg ํธ์ง๊ธฐ์ ์ํํ๊ฒ ํตํฉ๋์ด ๊ธฐ๋ฅ์ ๋์ฒดํ๋ ๊ฒ์ด ์๋๋ผ ๋ณด์ํฉ๋๋ค. GutenKit์ ์ถ๊ฐ ๋ธ๋ก๊ณผ ๊ธฐ๋ฅ์ ์ ๊ณตํ์ฌ ๊ธฐ์กด ํธ์ง๊ธฐ์ ๊ธฐ๋ฅ์ ํฅ์์ํต๋๋ค.
์ด ๋๊ตฌ๋ 40๊ฐ ์ด์์ ๋ชจ์ ํจ๊ณผ๋ฅผ ์ ๊ณตํ์ฌ ๋์์ธ์ ์ฐฝ์์ฑ์ ๋ํด์ค๋๋ค. ๋์ ๋๋ ๊ธฐ๋ฅ ์ค ํ๋๋ ๊ธ๊ผด, ์์ด์ฝ ๋ฐ ํ ํ๋ฆฟ์ ๋ํ ์์ฐ์ ๋งค์ฐ ๋น ๋ฅด๊ฒ ๋ก๋ํ๋ค๋ ๊ฒ์ ๋๋ค. ๋ํ ์ฌ์ฉ์๋ ๋ค๋ฅธ ํ๋ฌ๊ทธ์ธ์๋ ์๋ ํฌ๊ด์ ์ธ ์ฌ์ดํธ ํธ์ง ๊ฒฝํ์ ์ฆ๊ธธ ์ ์์ต๋๋ค.
๋ํ GutenKit์ ๋ค์ํ ๋ ์ด์์ ์ต์ ์ผ๋ก ์ธํด ๊ณ ๋๋ก ์ฌ์ฉ์ ์ ์ ๊ฐ๋ฅํ ์น์ ์ ์ฐพ๋ ๊ฒฝ์ฐ ๊ฐ์ฅ ์ด์์ ์ ๋๋ค. ๋๋น, ๋ฐฐ๊ฒฝ, ํจ๋ฉ ๋ฐ ๊ธฐํ ์์๋ฅผ ์ฝ๊ฒ ์กฐ์ ํ์ฌ ์ํ๋ ์๊ฐ์ ๋ชจ์์ ์ป์ ์ ์์ต๋๋ค.
๋ํ GutenKit๋ ์ฌ์ฉ์ ์นํ์ ์ธ ์ธํฐํ์ด์ค๋ฅผ ์๋ํ๋ฏ๋ก ์ด๋ณด์์๊ฒ ์ด์์ ์ด๋ฉฐ ์ต๊ณ ์ Spectra WordPress Gutenberg ๋ธ๋ก ๋์์ ๋๋ค. ์ง๊ด์ ์ธ ํน์ง์ ๊ฐ์ง๊ณ ์์ต๋๋ค ๋๋๊ทธ ์ค ๋๋กญ ๊ธฐ๋ฅ, 37๊ฐ์ ์ฌ์ ์ ์ ๋ธ๋ก, 6๊ฐ์ ๊ฐ๋ ฅํ ๋ชจ๋๋ฐ ์ ํํ ์ ์๋ ์ต์ 40๊ฐ ์ด์์ ๋ชจ์ ํจ๊ณผ.ย
GutenKit์์ ์ฆ๊ธธ ์ ์๋ ๋๋ผ์ด ๊ธฐ๋ฅ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- WordPress ๋ธ๋ก ํธ์ง๊ธฐ๋ 33๊ฐ ์ด์์ ๋ธ๋ก๊ณผ 6๊ฐ ์ด์์ ๋ชจ๋์ ์ง์ํฉ๋๋ค.
- 400๊ฐ ์ด์์ ์ฌ์ ๋์์ธ๋ ๋ธ๋ก์ฉ ํ ํ๋ฆฟ ๋ฐ ํจํด์ ์ก์ธ์คํ์ธ์.
- ์ํํ ํตํฉ WordPress ์ ์ฒด ์ฌ์ดํธ ํธ์ง(FSE) ๋ฅ๋ ฅ.
- 900๊ฐ ์ด์์ ์ธ๋ผ์ธ SVG ๊ธ๊ผด ์์ด์ฝ์ ๊ฐ์ถ ํฌ๊ด์ ์ธ ์์ด์ฝ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
- ๋ค์ํ ํ์ดํฌ๊ทธ๋ํผ ์ ํ์ ์ํด Google ๊ธ๊ผด ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์์ ํ ์ก์ธ์คํ์ธ์.
- ๋ชจ๋ฐ์ผ, ๋ฐ์คํฌํ, ํ๋ธ๋ฆฟ ์ฅ์น์ ์ต์ ํ๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค.
- Block API ๋ฒ์ 3๊ณผ์ ํธํ์ฑ์ผ๋ก ์ํํ ์ฑ๋ฅ์ ๋ณด์ฅํฉ๋๋ค.
- ๊ณ ๋๋ก ์ฌ์ฉ์ ์ ์ ๊ฐ๋ฅํ ํ ํ๋ฆฟ์ ํตํด ์น ๋์์ธ์ ์๋ฒฝํ๊ฒ ์ ์ดํ ์ ์์ต๋๋ค.
์ฅ์ :ย
โ ๋ฌด๋ฃ
โ ๊ฒฝ๋
โ ๊ณ ๋๋ก ๋ง์ถคํ ๊ฐ๋ฅ
โ ์ฌ์ฉ์ ์นํ์
๋จ์ :ย
โ ๏ธ ์ด ๋๊ตฌ๋ WordPress ํ๋ฌ๊ทธ์ธ์ผ๋ก ์๋กญ๊ฒ ์ถ์๋์๊ธฐ ๋๋ฌธ์ ์ฌ์ฉ์ ๊ด์ ์์ ๋๋ฆฌ ํ ์คํธ๋์ง ์์์ต๋๋ค.
2. ์ผํฐ๋ฐ ๋ธ๋ก
![Ultimate Blocks - WordPress์ ์คํํธ๋ผ ๋ธ๋ก ๋์](https://wpmet.com/wp-content/uploads/2024/03/chrome-capture-2024-2-25-2.jpg)
Ultimate Blocks ํ๋ฌ๊ทธ์ธ์ ๋ ๋ค๋ฅธ ์ธ๊ธฐ ์๋ Gutenberg ๋ธ๋ก ํ๋ฌ๊ทธ์ธ์ ๋๋ค. WordPress ์น์ฌ์ดํธ์ ์ฑ๋ฅ๊ณผ ๋ชจ์์ ํฅ์์ํค๋ ๋ค์ํ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ์ฌ๊ธฐ์๋ ์คํค๋ง ๋งํฌ์ ๋ฐ ๋ชฉ์ฐจ์ ๋ํ ํ๊ฐ ๋ฐ ํด๋ฆญ ์ ๋ ๋ฌธ๊ตฌ ๋ธ๋ก์ด ํฌํจ๋ฉ๋๋ค.
Spectra(์ด์ ์ Gutenberg์ฉ Ultimate Addons)์ ์ง์ ์ ์ธ ๊ด๋ จ์ ์์ง๋ง Ultimate Blocks๋ ๊น๋ํ ๋์์ธ๊ณผ ์ฌ์ฉ์ ์ ์์ ์ค์ ์ ๋ก๋๋ค.
ํน์ง์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ ์์ฑ์ ๋ง์ถฐ์ง 26๊ฐ์ ๋ธ๋ก.
- ๋ด์ฅ๋ ์คํค๋ง ๋งํฌ์ ์ ๊ฐ์์ฑ ๋ฐ ํด๋ฆญ๋ฅ ์ ์ํด ๊ฒ์ ์์ง์ ๊ตฌ์กฐํ๋ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ์ถ์ฒ ์ฌ๋ผ์ด๋์ ๊ฐ์ ๋ค์ํ ์ธํฐ๋ํฐ๋ธ ๋ธ๋ก, ์นด์ดํธ๋ค์ด ํ์ด๋จธ๋ฐ ํฅ๋ฏธ๋กญ๊ณ ์ญ๋์ ์ธ ์ฝํ ์ธ ๋ฅผ ์ํ ์งํ๋ฅ ํ์์ค์ด ์์ต๋๋ค.
- ๋ค์ํ ์ฅ์น์ ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ์ํฉ๋๋ค.
์ฅ์ :ย
โ ๋ค์ํ ๋ฒ์์ ๋ธ๋ก
โ ์ฌ์ฉ์ ์ ์ ์ต์
โ ๋ฌด๋ฃ ๋ฒ์ ํฌํจ
๋จ์ :ย
โ ๏ธ ์ผ๋ถ ์ต์ ์ ๋นํด ๋ฌด๋ฃ ๊ธฐ๋ฅ์ด ์ ํ๋์ด ์์ต๋๋ค.
โ ๏ธ ๊ฒํ ๋ธ๋ก์ ๋ธ๋ก ํธ์ง๊ธฐ์์๋ง ์๋ํฉ๋๋ค.
3. ๋ง์คํฐ ๋ธ๋ก
![๋ง์คํฐ ๋ธ๋ก - WordPress์ ์คํํธ๋ผ ๋ธ๋ก ๋์](https://wpmet.com/wp-content/uploads/2024/03/chrome-capture-2024-2-25-3.jpg)
Master Blocks๋ ์ญ๋์ ์ด๊ณ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ธ ์น ํ์ด์ง๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํ ํฌ๊ด์ ์ธ ๋ธ๋ก ์ ํ๊ตฐ์ ์ ๊ณตํฉ๋๋ค. ๋ํ ๋ธ๋ก ์๋๊ณผ ํ์ง ๊ฐ์ ์ ์ ํ ๊ท ํ์ ์ ๊ณตํฉ๋๋ค. ์ด ๋๊ตฌ์ ์ด์ ์ ๋ช ๊ฐ์ง ๊ณ ์ ํ ๋ธ๋ก ์ ํ์ ํฌํจํ๋ ๋งค๋ ฅ์ ์ธ ์ฝํ ์ธ ๋ ์ด์์์ ๋ง๋๋ ๊ฒ์ ๋๋ค.
๋ํ Master Blocks๋ ๋ค์๊ณผ ๊ฐ์ ์ด์ ๋ก ์ฌ์ฉ์๊ฐ ์ ๋ฌธ์ ์ธ ์น์ฌ์ดํธ๋ฅผ ์ฝ๊ฒ ๋ง๋ค ์ ์๋๋ก ์ง์ํฉ๋๋ค.
- ๊ณ ๊ธ ํ์ดํฌ๊ทธ๋ํผ ์ปจํธ๋กค.
- ์ ์ฐํ ๋ ์ด์์ ์ต์ .
- Gutenberg ํธ์ง๊ธฐ์ฉ 20๊ฐ ์ด์์ ๋ธ๋ก๊ณผ 5๊ฐ ์ด์์ ํ์ฅ
- ์ธ๊ธฐ ์๋ WordPress ํ ๋ง์ ์ํํ๊ฒ ํตํฉ๋ฉ๋๋ค.
์ฅ์ :ย
โ ์ ๋์์ธ๋ ๋ธ๋ก
โ ๋ฌด๋ฃ ๋ฒ์ ํฌํจ
๋จ์ :ย
โ ๏ธ ์ด ๋ชฉ๋ก์ ์ผ๋ถ ๋ธ๋ก์ ๋นํด ๋ธ๋ก ์๊ฐ ์ ์ต๋๋ค.
4. ์์ ์ ์์
![Stackable - WordPress์ Spectra Blocks ๋์](https://wpmet.com/wp-content/uploads/2024/03/chrome-capture-2024-2-25-4.jpg)
Stackable์ Gutenberg ํธ์ง๊ธฐ ๋ด์์ ๋ณธ๊ฒฉ์ ์ธ ํ์ด์ง ๋น๋๋ก ์๋ฆฌ๋งค๊นํฉ๋๋ค. ๋ฐฉ๋ํ ๋ธ๋ก ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๊ณ ๊ธ ์ฌ์ฉ์ ์ ์ ์ต์ ์ ์ ๊ณตํฉ๋๋ค. ์ด ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ๋ฉด ๋ฉ๋๋ค. ์ ๋๋ฉ์ด์ ํจ๊ณผ, ๋ฐ์ํ ๊ทธ๋ฆฌ๋ ์์ฑ ๋๋ ๊ณ ๊ธ ์คํ์ผ ์ต์ ๊ตฌํ ๋ฑ์ด ์์ต๋๋ค.ย
Stackable์ ๋ํด ์ฌ์ฉ์๊ฐ ๊ฐ์ฅ ์ข์ํ๋ ์ ์ ์ ์ฐํ ๊ฐ๊ฒฉ ์ฑ ์ ์ ๋๋ค. ๋ค์ํ ์ฌ์ฉ์ ์๊ตฌ ์ฌํญ๊ณผ ์์ฐ์ ๋ง๊ฒ ๋ฌด๋ฃ ๋ฐ ํ๋ฆฌ๋ฏธ์ ์๊ธ์ ๊ฐ ๋ชจ๋ ์ ๊ณต๋ฉ๋๋ค.
ํน์ง:
- 40๊ฐ ์ด์์ ์ ์ํ ๋ง์ถคํ ๋ธ๋ก.
- ๊ฐ์ฅ ์์ JS ๋ฐ CSS ํ์ผ์ ๋ํ 7.8kb ๋ก๋ฉ ์๋๋ก ์ ์ํ ํ์ด์ง ๋ก๋ฉ ์๋.
- ๋ค์ํ ์ฑ๊ณผ์ ํธํ์ฑ.
- ๋์์ธ ์ต์ ์ ๋ค์ํ ๋ ์ด์์๊ณผ ์คํ์ผ๋ก ์ธํด ํ์ด์ง ์์ฑ๊ณผ ๊ฐ์ต๋๋ค.
์ฅ์ :ย
โ ๊ด๋ฒ์ํ ๋ธ๋ก ๋ผ์ด๋ธ๋ฌ๋ฆฌ
โ ๊ฐ๋ ฅํ ์ฌ์ฉ์ ์ ์ ๊ธฐ๋ฅ
โ ๋ฌด๋ฃ ๋ฒ์ ์ผ๋ก ์ด์ฉ ๊ฐ๋ฅ
๋จ์ :ย
โ ๏ธ ๋จ์ํ ๋ธ๋ก ํ๋ฌ๊ทธ์ธ์ ๋นํด ํ์ต ๊ณก์ ์ด ๋ ๊ฐํ๋ฆ ๋๋ค.
5. ํ์ ๋ธ๋ก
![ํ์ ๋ธ๋ก - WordPress์ Spectra Blocks ๋์](https://wpmet.com/wp-content/uploads/2024/03/chrome-capture-2024-2-25-5.jpg)
Essential Blocks๋ ๋ฐ์ด๋ ์ฌ์ฉ์ ์ ์ ์ต์ ์ ๊ฐ์ถ ๊ท ํ ์กํ ๋ธ๋ก ์ธํธ๋ฅผ ์ ๊ณตํฉ๋๋ค. ๋งค๋ ฅ์ ์ธ ์ฝํ ์ธ ๋ฅผ ๋ง๋ค๊ณ ์ฒญ์ค์ ๊ด์ฌ์ ๋๋ ๋ฐ ํ์ํ ๋ชจ๋ ๊ฒ์ ์ ๊ณตํฉ๋๋ค. ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ๋ฉด 53๊ฐ ์ด์์ ๊ณ ๊ธ ๋ธ๋ก์ ์ก์ธ์คํ ์ ์์ต๋๋ค. ๊ฐ ๋ธ๋ก์ ๋๋ผ์ด ์ ์ฐ์ฑ์ ์ ๊ณตํ๋ฏ๋ก ์ ํํ ํ์์ ๋ง๊ฒ ๋ชจ์๊ณผ ๊ธฐ๋ฅ์ ๋ง์ถค ์ค์ ํ ์ ์์ต๋๋ค.
ํต์ฌ ๊ธฐ๋ฅ:
- 2500๊ฐ ์ด์์ ๊ตฌํ ๋ฒ ๋ฅดํฌ ํ ํ๋ฆฟ.
- ๋น ๋ฅธ ๋ก๋ฉ ์๋์ ์ฆ๊ฐ์ ์ธ ์ค์๊ฐ ํธ์ง์ ์ต์ ํ๋์์ต๋๋ค.
- 1000๊ฐ ์ด์์ Google ๊ธ๊ผด๊ณผ ํธํ๋ฉ๋๋ค.
- ๋๋ผ์ด ์ ๋๋ฉ์ด์ ๋น์ฃผ์ผ์ ์ํด ๊ฐ ๋ธ๋ก์ ์ ์ฉํ ์ ์๋ ๊ณ ๊ธ ์ ๋๋ฉ์ด์ ๊ธฐ๋ฅ์ด ์์ต๋๋ค.
์ฅ์ :ย
โ ๊ฐ์ธํ๋ ๋์์ธ์ ๋ง๊ฒ ์ฝ๊ฒ ๋ง์ถคํ๋๋ ๋ธ๋ก์ ๋๋ค.
๋จ์ :ย
โ ๏ธ ์ผ๋ถ ์ฌ์ฉ์๋ ์ด ํ๋ฌ๊ทธ์ธ์ผ๋ก ์ธํด ๊ฒ์๋ฌผ๊ณผ ํ์ด์ง๊ฐ ์ค๋จ๋๋ค๋ ์ ๊ณ ๋ฅผ ๋ฐ์์ต๋๋ค.
โ ๏ธ ์ต์ ๋ฒ์ ์ผ๋ก ์ ๋ฐ์ดํธํ ํ ์ฌ๋ฌ ์ฌ์ฉ์์๊ฒ ๋ฒ๊ทธ๊ฐ ๋ฐ์ํ์ต๋๋ค.
6. ํ๋ฆฌ๋ฏธ์ ๋ธ๋ก
![ํ๋ฆฌ๋ฏธ์ ๋ธ๋ก - WordPress์ ์คํํธ๋ผ ๋ธ๋ก ๋์](https://wpmet.com/wp-content/uploads/2024/03/chrome-capture-2024-2-25-6.jpg)
ํ๋ฆฌ๋ฏธ์ ๋ธ๋ก์ ์ฐฝ์์ ์ธ ๋ ์ด์์๊ณผ ๋์์ธ ์์์ ์ค์ ์ ๋ 22๊ฐ์ ํ์ ๋ธ๋ก์ ์ ๊ณตํฉ๋๋ค. ๊ณ ํ์ง ๋ธ๋ก๊ณผ ๊ณ ๊ธ ์ฌ์ฉ์ ์ ์ ์ต์ ๋๋ถ์ ์ฌ์ฉ์๋ ๋ ํนํ๊ณ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ธ ๋ ์ด์์์ ๋ง๋ค ์ ์์ต๋๋ค. ์ด ๋๊ตฌ๋ ๊ทธ ๊ธฐ๋ฅ์ผ๋ก ์ธํด ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๋ ์๋ฃจ์ ์ค ํ๋์ ๋๋ค.
์ผ๋ถ ํต์ฌ ๊ธฐ๋ฅ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ๊ฐ ๋ธ๋ก์ RTL(์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ)์ด๋ฉฐ ๋ฒ์ญ ์ค๋น๊ฐ ๋์ด ์์ด ์ํ๋ ์ธ์ด๋ก ๋ฒ์ญํ ์ ์์ต๋๋ค.
- ์ต๊ณ ์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํ ๋๋๊ทธ ์ค ๋๋กญ ๊ธฐ๋ฅ๊ณผ ๋ฐ์ํ ๋์์ธ ์ปจํธ๋กค.
- ์์ง๋ ฅ ์๋ ๋ชจ์์ ์ํด ํ๋์ ๊ตฌํ ๋ฒ ๋ฅดํฌ ๋ธ๋ก์์ ๋ค๋ฅธ ๋ธ๋ก์ผ๋ก ๊ธฐ๋ฅ์ ๋ณต์ฌํ์ฌ ๋ถ์ฌ๋ฃ์ต๋๋ค.
- ์ญ๋์ ์ธ ๊ฐ๊ฐ์ ๋ํ๊ณ ๊ฐ ์์๋ฅผ ๋๋ณด์ด๊ฒ ํ๊ธฐ ์ํด ๋ฏธ๋ฆฌ ๋์์ธ๋ ์ ๊ตฌ ์ ๋๋ฉ์ด์ .
์ฅ์ :
โ ๊ธฐ๋ฅ์ ๋ฏธ์ ์ธ๊ด์ ์ํ ๋์์ธ ์ค์ฌ์ ๋๋ค.
๋จ์ :ย
โ ๏ธ ํ ํ๋ฆฟ, ํจํด ๋ฑ ๊ธฐ๋ฅ์ด ์ ํ๋์ด ์์ต๋๋ค.
7. ํ๋ฌ์ค ๋ธ๋ก
![ํ๋ฌ์ค ๋ธ๋ก - WordPress์ ์คํํธ๋ผ ๋ธ๋ก ๋์](https://wpmet.com/wp-content/uploads/2024/03/chrome-capture-2024-2-25-7.jpg)
Plus Blocks๋ ๋งค๋ ฅ์ ์ธ ์ฝํ ์ธ ์ ๋์ ์น ํ์ด์ง๋ฅผ ๊ตฌ์ถํ๋ ๋ฐ ํ์ํ ๋๊ตฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. ๋์์ด๋, ๋ธ๋ก๊ฑฐ, ๋ง์ผํ ๋ด๋น์, ํ๋ฆฌ๋์, ๋ํ์ฌ ์์ ์ ๋ฐ Gutenberg ์ฌ์ฉ์ ์ข์ํ๋ ๋ชจ๋ ์ฌ๋์๊ฒ ์ด์์ ์ ๋๋ค. ๊ตฌํ ๋ฒ ๋ฅดํฌ์ ๋ํ ๊ฒฝํ์ด ์๋ ์ฌ๋๊ณผ ๊ฒฝํ์ด ์๋ ์ฌ๋ ๋ชจ๋ ์ฝ๋ฉ ๊ธฐ์ ์ด๋ ๊ธฐ์ ์ง์์ด ํ์ํ์ง ์๊ธฐ ๋๋ฌธ์ ์ฝ๊ฒ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ ์ ์์ต๋๋ค.
๋ช ๊ฐ์ง ๋๋ผ์ด ๊ธฐ๋ฅ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- 85๊ฐ ์ด์์ ๊ณ ๊ธ WordPress ๋ธ๋ก์ด 7๊ฐ์ง ์ ํ์ ๋ธ๋ก์ผ๋ก ๋ถ๋ฅ๋ฉ๋๋ค.ย
- 300๊ฐ ์ด์์ ์ฌ์ ๊ตฌ์ถ๋ UI ๋ธ๋ก ๋ฐ ํ ํ๋ฆฟ.
- ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ, ์ฌ์ฉ์ ์ ์ ๊ฒ์๋ฌผ ์ ํ ๋ฐ ๊ธฐํ ํญ๋ชฉ์ ๋ํ ๋๋กญ๋ค์ด ํํฐ๋ฅผ ๊ฐ์ถ Gutenberg Ajax ๊ฒ์ ํ์์ค์ ์ ๊ณตํฉ๋๋ค. WooCommerce ์ ํ.
- ์ ๊ณต ๋ง์ถค CSS ๊ทํ์ ์ฌ์ดํธ ์ด๋์์๋ JS ์ต์ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
์ฅ์ :ย
โ ๋๋๊ทธ ์ค ๋๋กญ ๊ธฐ๋ฅ๊ณผ ์๊ฐ์ ์ธํฐํ์ด์ค๋ฅผ ํตํด ์ฌ์ฉ์๋ ์ ๋ฌธ๊ฐ ์์ค์ ์ฝํ ์ธ ๋ฅผ ๋ ์ฝ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค.
โ ๋ฌด๋ฃ ๋ฒ์ ์ผ๋ก ์ด์ฉ ๊ฐ๋ฅ
๋จ์ :ย
โ ๏ธ ์ผ๋ถ ์ฌ์ฉ์๋ ์ผ๋ถ ๋ธ๋ก์ ๊ฒฐํจ๊ณผ ์ด๋ ค์์ด ์๋ค๊ณ ๋ณด๊ณ ํ์ต๋๋ค.
8. ์ ๋ค์์ค ๋ธ๋ก
![Genesis Blocks - WordPress์ Spectra Blocks ๋์](https://wpmet.com/wp-content/uploads/2024/03/chrome-capture-2024-2-25-8.jpg)
Genesis Blocks๋ Gutenberg ํธ์ง์๋ฅผ ์ํ ํ๋ฅญํ ๋ธ๋ก ๋ชจ์์ ๋๋ค. ๋ธ๋ก ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ธ์๋ Genesis Blocks๋ ์ฌ๋ฌ ํ์ด์ง ์น์ ๊ณผ ์ ์ฒด ํ์ด์ง ๋ ์ด์์์ ์ ๊ณตํ๋ฉฐ, ๋ชจ๋ ๊ทํ์ ์น ์ฌ์ดํธ์์ ์ก์ธ์คํ ์ ์์ต๋๋ค. ๋ธ๋ก ํธ์ง์๋ฅด ์ํ.
์ด ๋๊ตฌ์ ํ๋ฆฌ๋ฏธ์ ๋ฒ์ ์ ์ฌ์ฉํ๋ฉด ์ฑ๋ฅ์ ์ต์ ํ๋ 15๊ฐ ์ด์์ ์๋ก์ด ๋ธ๋ก, 50๊ฐ ์ด์์ ์ฌ์ ๊ตฌ์ถ๋ ์ ์ฒด ํ์ด์ง ๋ ์ด์์, 130๊ฐ ์ด์์ ์ฌ์ ๊ตฌ์ถ๋ ์น์ ์ ์ก์ธ์คํ ์ ์์ต๋๋ค. ๋ธ๋ก์๋ ์น์ ๋ฐ ๋ ์ด์์, ๊ณ ๊ธ ์ด, ์์ฝ๋์ธ, ํด๋ฆญ ์ ๋ ๋ฌธ๊ตฌ ๋ฑ์ด ํฌํจ๋ฉ๋๋ค.
์ผ๋ถ ๊ธฐ๋ฅ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๋ฌด๋ฃ ๋ฒ์ ์ ์ฌ์ฉํ๋ฉด 15๊ฐ์ ์๋ก์ด ๋ธ๋ก, 4๊ฐ์ ์ฌ์ ๊ตฌ์ถ๋ ์ ์ฒด ํ์ด์ง ๋ ์ด์์ ๋ฐ 8๊ฐ์ ์ฌ์ ๊ตฌ์ถ๋ ์น์ ์ ์ก์ธ์คํ ์ ์์ต๋๋ค.
- AMP๋ ๋ชจ๋ฐ์ผ ์น์ฌ์ดํธ ์ฌ์ฉ์๋ฅผ ์ํ ๋ ๋์ ์ฌ์ดํธ ์ฑ๋ฅ์ ์ํด ์ต์ ํ๋์์ต๋๋ค.
- ๋ธ๋ก ํธ์ง๊ธฐ๋ฅผ ์ด๋ฉด Genesis Blocks Button ๋ธ๋ก์ด Core Buttons ๋ธ๋ก์ผ๋ก ๋ณํ๋ฉ๋๋ค.
์ฅ์ :
โ ๊ฐ ๋ธ๋ก, ์น์ ๋ฐ ๋ ์ด์์์ ์ฝ๊ฒ ์ฌ์ฉ์ ์ ์ํ ์ ์์ต๋๋ค.
๋จ์ :
โ ๏ธ ๋ค๋ฅธ ์ต์ ์ ๋นํด ๋ธ๋ก, ๋ ์ด์์ ๋ฐ ์น์ ์ด ์ ํ๋์ด ์์ต๋๋ค.
์ ๊ตฌํ ๋ฒ ๋ฅดํฌ์ GutenKit์ ์ฌ์ฉํ๋์?
์ต๊ณ ์ Spectra Blocks ๋์์ ์ ํํ๋ ๊ฒ์ ๊ทํ์ ํน์ ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ ๋ค๋ฆ ๋๋ค. ๊ทธ๋ฌ๋ GutenKit์ ์ฅ์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ๊ฒฝ๋ ์ค๊ณ ๋ฐ ์ฑ๋ฅ ์ต์ ํ: ํ์ ๊ธฐ๋ฅ ์ ๊ณต์ ์ค์ ์ ๋๊ธฐ ๋๋ฌธ์ ์น์ฌ์ดํธ ์๋๊ฐ ๋ถํ๋ ค์ง์ง ์์ต๋๋ค. ์น์ฌ์ดํธ ๋ก๋ฉ ์๋์ ๋ฏธ์น๋ ์ํฅ์ ์ต์ํํ๋๋ก ์ค๊ณ๋์์ต๋๋ค.
- ์ฌ์ฉ์ ์นํ์ ์ธ ์ธํฐํ์ด์ค: ์ด๋ณด์๋ ์ฝ๊ฒ ๋ฐฐ์ฐ๊ณ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋ํ ์ต์ํ Gutenberg ์ธํฐํ์ด์ค๋ฅผ ๋ฐ๋ฅด๋ฏ๋ก ์์ ํ ์๋ก์ด ์์คํ ์ ๋ฐฐ์ธ ํ์๊ฐ ์์ต๋๋ค.
- ๊ณ ๋๋ก ์ฌ์ฉ์ ์ ์ ๊ฐ๋ฅํ ๋ธ๋ก: ๊ทํ์ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑ์ํค๊ธฐ ์ํด ๋ธ๋ก์ ๋ํ ๋์ ์์ค์ ์ ์ด๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ๋ฌด๋ฃ ํ์ ๋ธ๋ก: ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ํ์ด์ง ์์ฑ ์๊ตฌ ์ฌํญ์ ๋ค๋ฃน๋๋ค.
GutenKit์ ์๋์ ์ผ๋ก ์ ์ง๋ง ๊ทธ ๊ธฐ๋ฅ์ ๊ธฐ์กด์ ๋ค๋ฅธ ์ต์ ๊ณผ ๋๋ฑํ๋ฉฐ ์ฌ์ง์ด ๊ทธ ์ด์์ ๋๋ค. ์ด ๋๊ตฌ๋ ์น ๊ตฌ์ถ์ ๊ธฐ๋ณธ ๋ฐ ๊ณ ๊ธ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑํ๋๋ก ์ค๊ณ๋์ด Spectra์ ๋ ๋์ ๋์์ด ๋ฉ๋๋ค.
์คํํธ๋ผ ๋ธ๋ก ๋์: ๋ง๋ฌด๋ฆฌ
Spectra Blocks๋ WordPress ์น์ฌ์ดํธ์ ๊ธฐ๋ฅ์ ํฅ์์ํค๋ ๋ฐ ๋๋ฆฌ ์ฌ์ฉ๋๋ ์ ํ์ด์ง๋ง, ์ ์ฌํ๊ฑฐ๋ ๋ ์ฐ์ํ ๊ธฐ๋ฅ๊ณผ ์ฑ๋ฅ์ ์ ๊ณตํ๋ ์ฌ๋ฌ ๊ฐ์ง ๋์๋ ์์ต๋๋ค. ์ต์ ์ ์ ํ์ ํน์ ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค. ๊ทํ์๊ฒ ๊ฐ์ฅ ์ค์ํ ๊ธฐ๋ฅ์ ๊ณ ๋ คํ๊ณ ๊ทํ์ ์น์ฌ์ดํธ ๊ตฌ์ถ ์ฌ์ ์ ๊ผญ ๋ง๋ ๊ธฐ๋ฅ์ ์ฐพ๊ธฐ ์ํด ์ ์๋ ์ต์ ์ ์ดํด๋ณด์ญ์์ค.
๋ต๊ธ์ฐ๊ธฐ