
FE 0.5์ธ ๋ฆฌ์์ค๋ก ๋์์ธ ์์คํ ๊ตฌ์ถํ ๋ฐฉ๋ฒ
FE 0.5์ธ ๋ฆฌ์์ค๋ก ๋์์ธ ์์คํ ๊ตฌ์ถํ ๋ฐฉ๋ฒ ๊ด๋ จ
2025๋ ์ค ์ฐํด, ์ฌ๋ฌ๋ถ์ ์ด๋ป๊ฒ ๋ณด๋ด๊ณ ์๋์? ์๋ก์ด ์์์ ์ํด ์ค๋นํ๋ ๋ถ๋, ๋ค์ ๋ฌ๋ฆฌ๊ธฐ ์ํด ํน ์ฌ๋ ๋ถ๋ ์์ ํ ๋ฐ์. ์์ฆIT์์ ์ค ์ฐํด๋ฅผ ๋ง์ ๊ตญ๋ด ์ฃผ์ ๊ธฐ์ ์ ํน์ ์๊ณ ์ ์ตํ ๋ธ๋ก๊ทธ ์ฝํ ์ธ ๋ฅผ ์๊ฐํ๋ ์๋ฆฌ์ฆ๋ฅผ ์ค๋นํ์ต๋๋ค. ์ด๋ค์ ์ด๋ป๊ฒ ์ฌ๊ณ ํ๊ณ , ์ด๋ค ๋ฐฉ์์ผ๋ก ์ผํ๋ ๊ฑธ๊น์?
์ด๋ฒ ๊ธ์์๋ ํจ์ ํ๋ซํผ 29CM์ ํ๋ก ํธ์๋ ํ๋ซํผํ์์ โํจ์จ์ ์ธ ๋์์ธ ์์คํ โ์ ๊ตฌ์ถํ๊ณ ํ์ฉํ ๊ฒฝํ์ ๋ํด ์๊ฐํฉ๋๋ค.

์๋ ํ์ธ์! 29CM์์ ์ผ๊ด๋ UI/UX ์ ๊ณต์ ์ํด ๋์์ธ ์์คํ ์ ๊ฐ๋ฐ ๋ฐ ์ ์ง๋ณด์ํ๊ณ ์๋ ํ๋ก ํธ์๋ ํ๋ซํผ ํ์ ์ ๋คํ์ ๋๋ค. ์ ๋ ํ์ฌ ๊ธฐ์กด์ ์ด์๋๋ย Ruler ๋์์ธ ์์คํ ์ ์ธ์์ธ๊ณ๋ฐ์ ๊ด๋ฆฌํ๊ณ ์์ด์. ๋ค๋ง ๋ณธ๋ ์งํํ๋ ์ ๋ฌด๊ฐ ์์๊ธฐ ๋๋ฌธ์ ๋์์ธ ์์คํ ์ 0.5์ธ์ ๋ฆฌ์์ค๋ก ์ด์ํด์ผ ํ์ต๋๋ค.
์ด๋ฌํ ์ ํ๋ ๋ฆฌ์์ค ์์์ ์ด๋ป๊ฒ ๋์์ธ ์์คํ ์ย ์์ฐ์ ์ด๊ณ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์์์ง ๋์์์ด ๊ณ ๋ฏผํ๊ณ , ๊ทธ ๊ณผ์ ์์ ์ป์ย ์ค๋ฌด์ ์ธ ๊ฒฝํ๊ณผ ์ธ์ฌ์ดํธ๋ฅผ ์ด ๊ธ์์ ๊ณต์ ํ๊ณ ์ ํฉ๋๋ค.
๋น ๋ฅด๊ฒ ์ฑ์ฅํ๋ ํ์ฌ์์๋ ๋ง์ ํ์คํฌ๊ฐ ๋์๋ค๋ฐ์ ์ผ๋ก ์๊ธฐ๊ธฐ๋ ํฉ๋๋ค. ๊ทธ๋ฌ๋ค ๋ณด๋ฉด ํน์ ์ ๋ฌด์๋ง ์ง์คํ๊ธฐ๋ ์ด๋ ค์์. 29CM์์๋ ๋์์ธ ์์คํ ์ด ํ์ํ์ง๋ง, ์ฌ๊ธฐ์ ๋ชจ๋ ๋ฆฌ์์ค๋ฅผ ํฌ์ ํ ์ ์๋ ์ํฉ์ด์๋๋ฐ์. ์ด๋ฐ ์ํฉ์์๋ ์ด๋ค ๋์์ด ์์๊น์?
์ฒ์๋ถํฐ ๋๊น์ง ๋์์ธ ์์คํ ์ ๋ง๋ค ์ ์๋ ์ฌ๋ ฅ์ด ์๋ค๋ฉด, ์ด๋ฏธ ์ ๋ง๋ค์ด์ง ๋์์ธ ์์คํ ์ ๋์ ํด ๋ณด๋ฉด ์ด๋จ๊น์? ๋์์ธ๋ ํ ํฐ์ ๋ํ ์ ํธ๋ฆฌํฐ๋ฅผ ๋ง๋ค์ด์ผ ํ๋ค๋ฉด์? ๊ทธ ๊ณผ์ ์ ์ง๊ธ๋ถํฐ ์๊ฐํด ๋๋ฆด๊ฒ์!
๋์์ธ ์์คํ ๋ ํ๋์ ์ ํ์ด๋ค
๋๋๋ ๋ ธ๋จผ์ <์ฌ์ฉ์ ์ค์ฌ ๋์์ธ>
โ์ฌ๋๋ค์ด ์ฌ์ง ์๋๋ค๋ฉด ์ต๊ณ ์ ์ ํ์ ์์ฐํ๋ ๊ฒ์ด ๋ฌด์จ ์๋ฏธ๊ฐ ์๊ฒ ๋๊ฐ?โ

๋์์ธ ์์คํ ์๋ ์ด๋ค ์์ผ๋ก ์ ๊ทผํ๋ฉด ์ข์๊น์? ๋์์ธ ์์คํ ๋ ํ๋์ ์ง์ ๊ฐ๋ฅํ ์ ํ์ด๋ผ๋ ๊ด์ ์์ ๋๋๋ ๋ ธ๋จผ์ ๋ง์ด ๋ง์์ ๊น์ด ์๋ฟ์์ด์. ์๋ฌด๋ฆฌ ๋ฐ์ด๋ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด๋, ๊ฐ๋ฐ์์ ์ ์ ๊ฐ ์ฌ์ฉํ์ง ์๋๋ค๋ฉด ๊ฐ์น๊ฐ ์ฌ๋ผ์ง๊ณ ๊ฒฐ๊ตญ ํ๊ธฐ๋์ฃ . 29CM์ ๋์์ธ ์์คํ ๋ ๋ง์ฐฌ๊ฐ์ง์ ๋๋ค.
๋์์ธ ์์คํ ์ย **๋๊ณ ๊ฐ(์ฌ์ฉ์)**์๊ฒ ์ผ๊ด๋ UI/UX๋ฅผ ์ ๊ณตํ๊ณ ,ย ๊ฐ๋ฐ์์๊ฒ๋ ํจ์จ์ ์ธ ๊ฐ๋ฐ ํ๊ฒฝ์ ์ง์ํด์ผ ํฉ๋๋ค. ๋์์ธ ์์คํ ์ ๊ตฌ๋ ์๋ ๋๊ณ ๊ฐ๊ณผ ๊ฐ๋ฐ์๋ผ๊ณ ์๊ฐํด์. ๋๊ณ ๊ฐ๊ณผ ๊ฐ๋ฐ์์๊ฒ VOC๋ฅผ ๋น ๋ฅด๊ฒ ๋ฃ๊ณ , ํผ๋๋ฐฑ์ ๋ฐ์ํ๋ฉด ๋ ์ ์ฐ์ด๊ฒ ๋์ฃ .
๊ทธ๋์ ์ ๋ ๋์์ธ ์์คํ ๋ย MVP๋ก ๋น ๋ฅด๊ฒ ๊ตฌ์ถํ๊ณ ,ย ์งง์ iteration์ ํตํด ๊ฐ์น๋ฅผ ๊ฒ์ฆํ๊ณ ๋ฐ์ ์์ผ์ผ ํ๋ค๊ณ ์๊ฐํด์.
์๋น์ค ํน์ฑ์ ๋ง์ถ ์ ๋ต์ ๋์
์ด๋๋ฏผ ์๋น์ค: ANTD + Custom Theme

์ด๋๋ฏผ ๋์์ธ ์์คํ ์ ๊ตฌ์ถํ ๋๋ย **Ant Design(ANTD)**์ ๋์ ํ์ด์. ์ด์ ๋ ๊ฐ๋จํ๋ฐ์. ๋ฐ๋กย ๊ธฐํ๋น์ฉย ์ธก๋ฉด์์ ANTD๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ ์ด๋์ด์๊ธฐ ๋๋ฌธ์ ๋๋ค.
์ด๋๋ฏผ ์๋น์ค๋ ๋ค์๊ณผ ๊ฐ์ ํน์ง์ ๊ฐ์ง๊ณ ์์ด์.
- ๋ด๋ถ ๊ด๋ฆฌ์ ๋ฐ ํํธ๋์ฌ๊ฐ ๋๋ถ๋ถ
- ์ด๋๋ฏผ ์๋น์ค๋ ์ ๋ คํ UI/UX๋ณด๋ค ๊ธฐ๋ฅ์ ์ผ๋ก ์น์คํด์ผ ํ๋ ์์๊ฐ ๋ง์
- ์์ธก ๊ฐ๋ฅํ๊ณ , ์ฌ๋ฐ๋ฅธ ๊ธฐ๋ฅ์ด ๊ตฌํ๋๋ ๊ฒ์ด ์ค์
ANTD, MUI ๋ฑ๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ ์ด๋๋ฏผ์ ์ฌ์ฉํ๊ธฐ ํ๋ถํ ๊ธฐ๋ฅ์ ๊ฐ์ง ์ปดํฌ๋ํธ๋ค์ ์ ๊ณตํด์.
์๋ Table๊ณผ ๊ฐ์ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ, ๊ตฌํ์ ์์ด์ ๋ณต์ก๋๊ฐ ์๋นํด์. ํ์ด์ง๋ค์ด์ , ํํฐ๋ง, ์ํ ์ ๊ธฐ๋ฅ์ ๊ฐ์ถ Table ์ปดํฌ๋ํธ๋ฅผ ๋์์ด๋๊ฐ ์ค๊ณํ๊ณ , ์ด๋ฅผ ๊ฐ๋ฐ์๊ฐ ๊ตฌํํ์ฌ ์๋นํ๊ธฐ๊น์ง๋ ๋ง์ ์๊ฐ๊ณผ ๋ฆฌ์์ค๊ฐ ๋๋ ์ผ์ ๋๋ค. ์์ฒด์ ์ผ๋ก ์์ฑ๋ ๋์ Table ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค๊ธฐ ์ํด์ ์ ์์๋ง ๋ช ๋ฌ์ ์์ํ ์๋ ์์ด์. ANTD์ ๊ฐ์ด ํ๋ถํ ๊ธฐ๋ฅ์ ๋ด์ฌํ๊ณ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ์ FE ๊ฐ๋ฐ์๋ค์๊ฒ ํ์ต ๋น์ฉ๋ ๊ต์ฅํ ์งง์ผ๋ฉฐ, ์ด๋๋ฏผ ํ์ด์ง์ย ๋์์ธ๊ณผ ๊ฐ๋ฐ ์์ฐ์ฑ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ด์.
ANTD ๋์์ธ ์์คํ ์ ์ ์ฉํ ํ, ์ค์ ๋ก ์ด๋ค ํจ๊ณผ๋ฅผ ๋ณผ ์ ์์์๊น์?

ํ ํ๋ฉด ๊ธฐ์คย ๋์์ธ ์์ ์๊ฐ์ ์ต๋ 75%,ย ๊ฐ๋ฐ ์์ ์๊ฐ์ ์ฝ 87%ย ๋จ์ถ๋์์ต๋๋ค.

์๋จ ์ด๋ฏธ์ง ๋์์ธ ์์ ์์ ์ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ๊ธฐ์ค์ผ๋ก ์ธก์ ํ๋๋ฐ์.ย ๋์์ด๋ ๋ฆฌ์์ค๋ฅผ 1/4, FE ๋ฆฌ์์ค๋ฅผ 1/8 ์ ๊ฐํ ์ ์๊ฒ ๋์์ฃ . ํผ๋ธ๋ฆฌ์ฑ ๋ฑ์ ์ง์คํ๋ ์๊ฐ์ ๋น์ฆ๋์ค ๋ก์ง์ด๋ ๋ ์ค์ํ ๋ฌธ์ ๋ฅผ ํธ๋๋ฐ ํฌ์ํ ์ ์๊ฒ ๋์์ด์.
์ด๋๋ฏผ์ ํค์ค๋งค๋๊ฐ ๊ฑฑ์ ๋์๋์? ๊ฑฑ์ ํ์ค ํ์ ์์ด์! ๋๋ถ๋ถ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์์ ์ด๋ฏธ Token ๊ธฐ๋ฐ์ย Customize Theme๋ฅผ ๋ง๋๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ณ ์์ด์.
29CM์์๋ Antd๋ฅผ ๋์ ํ ๋ ๊ธฐ์กด ์ด๋๋ฏผ ํ์ด์ง์ ํค์ค๋งค๋๊ฐ ์ด์ง์ ์ผ๋ก ๋๊ปด์ง์ง ์๋๋ก ๊ธฐ์กด ์ด๋๋ฏผ ํ์ด์ง์ Theme์ ์ ์ฌํ ํ ํฐ(์์ ๋ฐ ๊ฐ๊ฒฉ)๋ค์ ์ถ์ถํด์ย Customize Theme๋ฅผ ์ ์ฉํ์ด์.
๋๊ณ ๊ฐ ์๋น์ค: Ruler + TailwindCSS + tailwind-variants

๋๊ณ ๊ฐ ์๋น์ค์ ์ํฉ์ ์ด๋๋ฏผ๊ณผ๋ ๋ค๋ฅธ๋ฐ์. ๋ฐ๋ก 29CM์ ์๋ง์ ๊ฐ๋๋ฅผ ์ ๊ณตํ ์ ์๋ UI/UX๊ฐ ์๋น๋์ด์ผ ํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
์ด๋ฅผ ์ถฉ์กฑ ์ํค๊ธฐ ์ํด์๋ ์ผ๋ถ ์ปค์คํ ๋ง ํ์ฉํ๋ UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ํ๊ณ๋ฅผ ๊ฐ์ง๊ณ ์์ด์. ์ด๋ฐ ํ๊ณ ๋๋ฌธ์ ๋ณ๋๋ก ์คํ์ผ์ ์ ํ ์ปดํฌ๋ํธ๋ฅผ ์ ์ํ ์๋ฐ์ ์์ด์.
๊ธฐ์กด Ruler๋ emotion(css-in-js)์ผ๋ก ์ ์๋์์ด์. ์ด๊ธฐ ๋์์ธ ์์คํ ์ผ๋ก๋ atomicํ ๋จ์์ ์ปดํฌ๋ํธ(Badge, Button ๋ฑ)๊ฐ ์ ์๋ ๋๋ ํฐ ๋ฌธ์ ๊ฐ ๋์ง ์์์ต๋๋ค. ๋ค๋ง ํจํด ์ปดํฌ๋ํธ๊ฐ ์ ์๋๋ฉด์๋ถํฐ ์ฑ๋ฅ ์ด์๊ฐ ๋ฐ์ํ์ด์. ํ์ฌ Ruler ๋์์ธ ์์คํ ์์ ์๋น๋๊ณ ์๋ ์ปดํฌ๋ํธ ์ค ๊ฐ์ฅ ํ์ฉ๋๊ฐ ๋์ ์ปดํฌ๋ํธ๋ ๋ฐ๋ก ProductCard์ธ๋ฐ์. ๋ค์๊ณผ ๊ฐ์ด ๋ด๋ถ์ ๋ค์ํ ์ปดํฌ๋ํธ์ ์กฐํฉ์ด ์ฌ์ฉ๋๊ณ ์์ต๋๋ค.

PC ํ๋ฉด์ ๊ฒฝ์ฐ ProductCard๊ฐ 50๊ฐ์ฉ ๋ ธ์ถ๋์ด์ผ ํ๋๋ฐ์. css-in-js๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ, ๋ฐํ์ ์ฑ๋ฅ ์ด์๊ฐ ์ฌ์ฉ์ ๊ฒฝํ(UX)์ ์ ํ์ํค๋ ์์ค์ผ๋ก ๋ฐ์ํ์ต๋๋ค. css-in-js์ ์ฑ๋ฅ ์ด์ ๊ด๋ จํ์ฌ ์ ๋ช ํ ๊ธ์ด ์์ผ๋ ํด๋น ๊ธ์ ์ฝ์ด๋ณด๋ ๊ฒ์ ์ถ์ฒํด ๋๋ ค์!
Info
์ฐธ๊ณ ๊ธ:ย CSS-in-JS์ ๊ฒฐ๋ณํ๋ ์ด์ Blog (srmagura
)
์ด๋ฅผ ์ํด ์คํ์ผ๋ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ต์ฒด ์์ ์ด ์ด๋ฃจ์ด์ก๊ณ , ์ฃผ๋ก ๊ณ ๋ฏผํ๋ ํฌ์ธํธ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- JavaScript Bundle, Runtime Overhead๋ฅผ ์ค์ผ ์ ์์ ๊ฒ
- ์ผ๋ฐ์ ์ธ ์คํ์ผ๋ง์ ํ ๋, DX ๊ฒฝํ์ ๊ฐ์์ํค์ง ์์ ๊ฒ
ํ์์๋ TailwindCSS + tailwind-variantsย /ย vanilla-extract + sprinkle์ ๊ฐ์ ๋์์์ด ๋ ผ์๋์์ด์. ์ต์ข ์ ์ผ๋ก๋ย TailwindCSS + tailwind-variants๋ฅผ ์ฑํํ๋๋ฐ์. ์์ ์ธ๊ธํ 1+2๊ฐ ๋ชจ๋ ์ถฉ์กฑ๋์๊ธฐ ๋๋ฌธ์ด์์.
- TailwindCSS๋ PostCSS๋ฅผ ์ด์ฉํด ์ปดํ์ผ ํ์์ ์คํ์ผ์ ์ ์ฒ๋ฆฌ
- JavaScript Bundle ์ฌ์ด์ฆ์ ์ํฅ์ ์ฃผ์ง ์์
- ์คํ์ผ ์์ฑ์ ์ํ Runtime Overhead๊ฐ ์์
- tailwind-variants ์กฐํฉ์ ํตํด ๊ฐ๋ฐ์ ๊ฒฝํ ์ ์ง
- class conflict ๋ฐฉ์ง
- Variant API ๊ธฐ๋ฐ์ ์คํ์ผ๋ง ๊ฒฝํ ์ ๊ณต
- ์๋ ์์ฑ๊ณผ ํ์ ์ธ์ดํํฐ ์ง์
์ถ๊ฐ์ ์ผ๋ก ์๋์ ๊ฐ์ ์ด์ ๋ก ๋์์ธ ์์คํ ์ ์๋นํ๋ ๋ฐ ํจ์จ์ ์ด๋ผ๋ ์ด์ ๋ ์์์ต๋๋ค.
- Theme Configuration ๊ธฐ๋ฐ์ ๊ฐํธํ class utility ์ ์ (color palette, type scale, fonts, breakpoints, border radius values ๋ฑ)
- ํ๋ถํ ์ปค๋ฎค๋ํฐ ๋ฐ ํ๋ฌ๊ทธ์ธ (tailwind-prettier, IDE intellisense ๋ฑ๋ฑ)
TailwindCSS์ ์ํ๊ณ๊ฐ ๊ถ๊ธํ๋ค๋ฉด aniftyco/awesome-tailwindcss
๋ฅผ ํ์ธํด ๋ณด์ธ์!
์ํ์ฐฉ์ค์ ๊ฐ์ ๊ณผ์
๊ทธ๋ ๊ฒ ํ์ฌ ๋์์ธ๋ 37๊ฐ ์ปดํฌ๋ํธ ์ค ์ฝ 30๊ฐ๋ฅผ ์ ์ํ๊ณ , ์๋น์ค์ ๋ฐ์ํ๋๋ฐ์. ์ด ๊ณผ์ ์ด ๋ง๋ฅ ์ํํ์ง๋ ์์์ต๋๋ค. ๋์์ธ ์์คํ ์ ๊ด๋ฆฌํ๋ฉฐ ๊ฒช์๋ ๋ฌธ์ ์ํฉ๋ค๊ณผ ์ด๋ฅผ ํตํด ์ป์ ์ธ์ฌ์ดํธ๋ ํจ๊ป ๊ณต์ ํด ๋ณด๋ ค๊ณ ํด์.
์ํ์ฐฉ์ค 1. ์๋ฒฝํ ์ปดํฌ๋ํธ๋ฅผ ๊ตฌํํ๊ธฐ๋ ์ด๋ ต๋ค
๋์์ธ ์์คํ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ๋ฐํ๋ฉด์ ์๊ฒ ๋ ์ฌ์ค์ โ์๋ฒฝํ๊ฒ ํ ๋ฒ์ ์ ์ฐ์ด๋ ์ปดํฌ๋ํธ๋ฅผ ๊ตฌํํ๊ธฐ๊ฐ ๊ต์ฅํ ์ด๋ ต๋คโ๋ ์ ์ด์์. ๋ค์์ ์ ๊ฐ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค๋ฉด์ ๋ง๋ ๋ฒ๊ทธ๋ค์ด์์.
- Dialog: ๊ธด ์ ๋ชฉ์ด ์์ ๋ย ๋ซ๊ธฐ(X) ๋ฒํผ๊ณผ ๊ฒน์นจ
- Tabs: underline ์คํ ๋๋ฝ
- ProductCard:ย ํด๋ฆญ์ปค๋ธํ ์์ ์ค, ํฌ์ธํฐ ์ปค์๊ฐ ๋ฐ์๋์ง ์์ ๋ถ๋ถ์ด ์์
29CM์์ ํจ๊ป ์ผํ๋ ๋๋ฃ FE ๊ฐ๋ฐ์๋ถ๋ค์ด ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ฉด์ ๋ฆฌํฌํธ ํด์ค ๋ถ๋ถ์ธ๋ฐ์. ์๋น๋๋ ์ปดํฌ๋ํธ์ ์์ ์ฑ์ ๋์ด๊ธฐ ์ํ ์กฐ์น๊ฐ ํ์ํ๋ค๊ณ ์๊ฐํ์ด์.
๋ฐฐ์ด ์
์ปดํฌ๋ํธ๋ฅผ ์๋ฒฝํ๊ฒ ๋ง๋ค๋ ค๊ณ ์๊ฐ์ ๋ง์ด ํฌ์ํ๋ค๊ณ ํด์ ๋ชจ๋ ์ค์๋ฅผ ๋ฐฉ์งํ ์๋ ์์ต๋๋ค.
1.ย ๋น ๋ฅด๊ฒ ๋ง๋ค์ด ํผ๋๋ฐฑ์ ๋ฐ๊ณ ๊ฐ์ ํ๋ ๊ฒ์ด ๋ ํจ๊ณผ์ ์ด์์ต๋๋ค. 2. ๋์ ๊ฐ๋ฅํ ๋ฆฌ์์ค๊ฐ ์๋ ์ํฉ์์ ๋ฒ๊ทธ๊ฐ ์๋ค๋ฉด,ย ๋์์ธ ์์คํ ์ด ์์ํ ์ ์๋ ๊ฐ์ด๋๋ผ์ธ๊ณผ ํ๋ก์ธ์ค ๊ตฌ์ถ์ด ํ์ํ๋ค๊ณ ์๊ฐํ์ด์.
Action1: ํผ๋๋ฐฑ ํ๋ก์ธ์ค โ Chromatic + Storybook
- Chromatic์ ์ฌ์ฉํ๋ฉด, ๋์์ด๋์๊ฒ ์ปดํฌ๋ํธ ๋จ์๋ก ์ข ๋ ์ ํํ ํผ๋๋ฐฑ์ ๋ฐ์ ์ ์์ด์.
- ๊ฐ๋จํย chromatic.yamlย ์ธํ ๋ง์ผ๋ก Storybook CI/CD๋ฅผ ๊ตฌ์ถํด์ QA ๊ฐ๋ฅํ ํ๋ก์ธ์ค๋ฅผ ๋ง๋ค ์ ์์ด์.

Action2: Ruler ์คํ ์์ค โ ๊ธฐ์ฌ ์ ๋ ๋์
- Wiki ๋ด Ruler์ ์์ ํ ์ ์๋ ๊ฐ์ด๋ ๋ฌธ์๋ฅผ ์์ฑํด ๋์์ด์
- ๋๊ตฌ๋ ๋์์ธ ์์คํ ์ ๊ด๋ฆฌํ๋ ๋ฐ ๊ธฐ์ฌํ ์ ์๊ฒ ํจ์ผ๋ก์จ ํธ๋ญ ํฉํฐ 1์ธ ์ํฉ์ ๋ฐฉ์งํ ์ ์๊ฒ ํ์ด์.

์ํ์ฐฉ์ค 2. ์ปดํฌ๋ํธ ์คํ์ ๋ณํํ๋ค.
๋์์ธ ์์คํ ์ ์ด์์๋ ์ ํ์ด๋ผ์ ์ ๊ธฐ์ ์ผ๋ก ๋ณํํ๋ค๋ ์ฌ์ค์ ๊นจ๋ฌ์์ด์. ์ปดํฌ๋ํธ๋ ์ ์๋์๋ค๊ณ ๋๋๋ ๊ฒ์ด ์๋๊ณ , ์ง์์ ์ธ ์ ๊ทธ๋ ์ด๋๊ฐ ํ์ํ๋๋ผ๊ณ ์. ProductCard๋ ์ ์๋ ์ดํ์๋ ์คํ์ด ์ฝ 3๋ฒ ์ ๋ ์ถ๊ฐ๋์์ต๋๋ค.
- ์ด๋ฏธ์ง Preview์ Badge๋ฅผ ๋ ธ์ถํ ์ ์๋ extraBadge ์ถ๊ฐ
- ํ๋จ Badge ๊ทธ๋ฃน์ icon์ ํ๊ธฐํ๋ ์คํ ์ถ๊ฐ
- ๋ธ๋๋๋ช ์ ๋ณ๋ ํด๋ฆญํ ์ ์๋ ์คํ ์ถ๊ฐ
์ฃผ๋ก ์คํ์ด ์ถ๊ฐ๋๋ ์ผ์ด์ค๋ ๋ค์๊ณผ ๊ฐ์ ์ด์ ๊ฐ ์์์ด์.
- ProductCard๋ฅผ ํ์ฉํ์ฌ A/B ํ ์คํธ๊ฐ ์งํ๋ ์ดํ, ์คํ์ ์ฑ๊ณตํ์ฌ ๋กค์์
- ์ ์ฌ ์๋น์ค ๋ฐฉํฅ์ฑ ๋ฐ์
ํน์ ์คํ์ด ๋ณํํ ๋๋ง๋ค Design/AOS/IOS/FE ๋ชจ๋ ๋์์ธ ์์คํ ์ปดํฌ๋ํธ๋ฅผ ์ ๋ฐ์ดํธ๋ฅผ ํด์ผ ํ๋๋ฐ์. ๊ฐ์ ์์ ์ด ๊ฐ๋ฅํ ์๊ธฐ๊ฐ ๋ฌ๋ผ Cross Platform ํ๊ฒฝ์์ ๋์์ธ ์์คํ ์คํ์ ์ผ๊ด์ฑ ์๊ฒ ์ ์งํ๋ ๊ฒ์ด ์์ฃผ ์ด๋ ค์ ์ด์.
๋ฐฐ์ด ์
๋์์ธ ์์คํ ์ย ๋์์๋ ์ ์ง ๋ณด์๊ฐ ํ์ํ ์ ํ์ด๋ผ๋ ์ฌ์ค์ ์๊ฒ ๋์์ด์. ์ ์ง ๋ณด์์ ํ์ํย ํ์คํ ๋ฆฌ๋ฅผ ๋ช ํํย ํ์ง ์์ผ๋ฉด, ์คํ์ ๋ํ ํํธํ๊ฐ ์ผ์ด๋๊ธฐ ์์ฃผ ์ฝ๋ค๋ ์ฌ์ค๋ ์๊ฒ ๋์์ฃ .
Action: ๊นํ๋ธ ํ๋ก์ ํธ๋ก ์ปดํฌ๋ํธ ํธ๋ํน
๊นํ๋ธ ํ๋ก์ ํธ๋ฅผ ํตํด์ ์ปดํฌ๋ํธ ๋จ์๋ก ํ์คํ ๋ฆฌ๋ฅผ ๊ด๋ฆฌํ ์ ์๋๋ก ์ธํ
์ ์ถ๊ฐํ์ต๋๋ค. ์ด๊ธฐ ์คํ์์ ์ด๋ ํ ์ด์ ๋ก ๋ณํํ๋์ง ํ์คํ ๋ฆฌ๋ฅผ ํธ๋ํนํ๊ธฐ ์ํด์์์ด์. ๋์์ธ ์์คํ
์ AOS/IOS/FE ์ธ ํ๋ซํผ์์ ๋ชจ๋ ๊ด๋ฆฌ๋์ด์ผ ํ๊ธฐ ๋๋ฌธ์ ๊ฐ๊ฐ ํ๋ซํผ๋ง๋ค์ ์งํ ์ํฉ๊ณผ ์คํ์ ํ์ธํ๊ธฐ์ ์ฉ์ดํ์ด์. ํ๋ซํผ ๋์์ด๋๋ถ๊ณผ Adobe์ ๊นํ๋ธ ํ๋ก์ ํธ (orgs/adobe
)๋ฅผ ์ฐธ๊ณ ํ์ฌ ๋ง๋ค์์ด์.

์คํ ๊ฐ๋ฅํ ๊ฐ์ด๋
1. ๋์์ธ ์์คํ ์ด ์ฒ์์ด๋ผ๋ฉด? (์์ ๊ฒ๋ถํฐ ์์ํ๊ธฐ โ MVP ์ ๊ทผ)
ํํธํ๋ UI ์ค ์ด๋ค ๊ฒ์ด UX/DX์ ๊ฐ์ฅ ํฐ ๋ฌธ์ ๊ฐ ๋๊ณ ์๋์? ๋ง์ฝ ์ฒ์ ๋์์ธ ์์คํ ์ ๊ฐ๋ฐํ๋ ๋จ๊ณ๋ผ๋ฉด ๋ค์๊ณผ ๊ฐ์ ์ก์ ์ ํด๋ณด๋ ๊ฒ์ ์ถ์ฒํด ๋๋ ค์.
- ๋ฒํผ,ย ์ ๋ ฅ์ฐฝ,ย ๋ด๋น๊ฒ์ด์ ๋ฐ์ ๊ฐ์ย ํต์ฌ ์ปดํฌ๋ํธ๋ถํฐ ๊ตฌ์ถ
- ๋น ๋ฅด๊ฒ ์ ์ฉํ๊ณ ย ์งง์ ํผ๋๋ฐฑ ์ฃผ๊ธฐ๋ก ๊ฐ์
2. ๋ฆฌ์์ค๊ฐ ๋ถ์กฑํ๋ค๋ฉด? (ํจ์จ์ ์ธ ํ์ ๊ตฌ์กฐ ๋ง๋ค๊ธฐ)
๋์์ธ ์์คํ ์ ๊ฐ๋ฐ/์ ์ง๋ณด์์ ์ด๋ ค์์ ๊ฒช๊ณ ์๋ค๋ฉด, ๋ค๋ฅธ ์ฌ๋์ ๋์์ ๋ฐ์ ํ ์คํ ์์ค ๋ฐฉ์์ผ๋ก ์ด์ํ๋ ๊ฒ์ ๊ณ ๋ คํด ๋ณด๋ฉด ์ด๋จ๊น์? ์๋ํ๋ก ๊ฐ์ ํ ์ ์๋ ๋ถ๋ถ์ด ์๋ค๋ฉด ์๋ํ ๋๊ตฌ๋ฅผ ์ถฉ๋ถํ ํ์ฉํด๋ ์ข์ ๊ฑฐ์์.
- ๊ธฐ์ฌ ๊ฐ์ด๋๋ผ์ธย ์์ฑ โ ๊ฐ๋ฐ์ ๋๊ตฌ๋ ๋์์ธ ์์คํ ์ ์ฝ๊ฒ ์ฐธ์ฌํ๋๋ก ์ ๋
- ์๋ํ ๋๊ตฌ(Chromatic)ย ํ์ฉ โ ํ์ง ์ ์ง์ ๋ฆฌ๋ทฐ ์๊ฐ ์ ๊ฐ
๋ง์น๋ฉฐ: ๋น ๋ฅด๊ฒ ๋ง๋ค๊ณ ๊พธ์คํ ๊ฐ์ ํ๊ธฐ
๋์์ธ ์์คํ ์ ์ ํ ๊ด์ ์์ ๋ณผ ๋ ๊ฐ์ฅ ์ค์ํ ๊ฒ์ ๋ฌด์์ผ๊น์? ๊ณ ๊ฐ์ ๋ถํธํจ์ ํด๊ฒฐํด์ฃผ๋ ๊ฒ์ด๋ผ๊ณ ์๊ฐํด์. ํ์ง๋ง, ๋น ๋ฅด๊ฒ ์๋น์ค๊ฐ ์๋น๋์ง ๋ชปํ๋ฉด ๋ฌด์์ด ๋ฌธ์ ์ธ์ง์กฐ์ฐจ ์๊ธฐ ์ด๋ ค์ด ๊ฒฝ์ฐ๋ค์ด ๋ง์ ๊ฒ ๊ฐ์์. ์ ๊ฐ ์ปดํฌ๋ํธ๋ฅผ ์ ์ํ๊ณ ์๋นํ ํ์ ์๊ฒ ๋ ๋ฌธ์ ๋ค์ด ์๋ฏ ๋ง์ด์์.
์์ผ๋ก๋ ๋์์ธ ์์คํ ๊ตฌ๋ ์์ธย **๊ณ ๊ฐ(์ฌ์ฉ์, ๊ฐ๋ฐ์)**์ด ๊ณ์ ํ์๋ก ํ ์ ์๋๋ก ๊ฐ์น๋ฅผ ์ ๊ณตํ ๋์์ธ ์์คํ ์ ๋ง๋ค๊ณ ์ถ์ด์. ์ฌ๋ฌ๋ถ์ด ํ์ํ ๋์์ธ ์์คํ ์ ์ด๋ค ๋์์ธ ์์คํ ์ธ๊ฐ์? ์ ๋ต์ด ์๋ ๋ฌธ์ ์ด์ง๋ง, ์ ๊ฒฝํ์ด ๋์์ด ๋์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค. ๊ทธ๋ผ ์ ๋ Ruler๋ฅผ ํตํด Guide To Better Choice์ ๊ธฐ์ฌํ๋ฌ ๊ฐ๋ณด๊ฒ ์ต๋๋ค. ์ฌ๊ธฐ๊น์ง ์ฝ์ด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค.
์๋ฌธ