๐ฌ๐ง English version: Why AI-Generated UIs Look 'Off' โ and the One Principle That Fixes It
๊ฒช์ด๋ณด์ จ์ ๊ฒ๋๋ค. AIํํ ๋์๋ณด๋๋ฅผ ๋ง๋ค์ด ๋ฌ๋ผ๊ณ ํ๋ฉด, ๋์ค๊ธด ๋์์. ๊ทธ๋ฐ๋ฐโฆ ๋ฌํ๊ฒ ์ด์ํฉ๋๋ค. ์ปดํฌ๋ํธ ํ๋ํ๋๋ ๋ฉ์ฉกํด์. ๋ฒํผ์ ๋ฒํผ๋ต๊ณ , ์นด๋๋ ์นด๋๋ต์ฃ . ๊ทธ๋ฐ๋ฐ ์ ์ฒด๋ฅผ ๋ณด๋ฉด "์์ฑ๋ ํฐ" ๊ฐ ๋ฉ๋๋ค. UI๋ฅผ ์ฐ์ ์คํก ์ฌ์ง ๊ฐ๋ฌ๊น์.
์ ๋ ํ๋์์ "์ปดํฌ๋ํธ๋ฅผ ๋ ์ ๋ง๋ค๋ฉด" ๋๋ "ํ๋กฌํํธ์ ๊ฐ๊ฐ์ ๋ ๋ฃ์ผ๋ฉด" ํด๊ฒฐ๋ ๊ฑฐ๋ผ ์๊ฐํ์ต๋๋ค. ์๋๋๊ตฐ์. ์ค์ ๋์์ธ ๋ฌธํ โ Refactoring UI, Material Design 3, Apple HIG, IBM Carbon, WCAG, Financial Times์ ์๊ฐ ์ดํ์ง โ ์ ํ๊ณ ๋ค์๋ก ์ง์ง ์์ธ์ ์ด๋ฆ์ด ์์์ต๋๋ค.
์ ํฉ์ฑ(coherence)์ ๋ถ์ฌ.
๋ถํ๋ค์ด ์๋ก ์ ๋ง๋ ๊ฒ๋๋ค. ๊ทธ๋ฆฌ๊ณ ํ๋ฒ ๋ณด์ด๊ธฐ ์์ํ๋ฉด, ๋ค์๋ ์ ๋ณด์ด๊ฒ ํ ์๊ฐ ์์ด์.
์ ์ ๋์์ด๋ ์์ด ๋ฐ์ด๋ธ์ฝ๋ฉ์ผ๋ก ํ ์ค๊ธ UI ๋ง๋๋ ๋ฒ์ ๋ค๋ค๋๋ฐ, ์ด๋ฒ ๊ธ์ ๊ทธ ์๋์ '์' โ "์ด์ํจ"์ ์ค์ ๋ฉ์ปค๋์ฆ๊ณผ ๊ทธ๊ฑธ ๊ณ ์น๋ ํ ๊ฐ์ง ์์น์ ํ๋๋ค.
์ฆ์: ์๋ก ์ ๋ง๋ ๋ถํ๋ค
๋ค์ UI์ "ํ๋ฆฐ" ๊ฒ ํ๋๋ ์์ต๋๋ค.
- ๋ชจ์๋ฆฌ๊ฐ ๊ฐ์ง(2px) ์นด๋
- ๊ทธ ์์ ์์ฝ ๋ชจ์ ๋ฒํผ
- ํ๋ ๊ธฐ๋ณธ ๋ฒํผ ์์ ๋ณด๋ผ "์ ๊ทธ๋ ์ด๋" ๋งํฌ
- ์์ด์ฝ: Lucide ์์๋ผ์ธ 2๊ฐ + ์ฑ์์ง ์ด๋ชจ์ง 1๊ฐ
- ์ข์๋จ์์ ๋จ์ด์ง ๊ทธ๋ฆผ์ ํ๋, ์ ์๋์์ ๋จ์ด์ง ๊ทธ๋ฆผ์ ํ๋
ํ๋์ฉ ๋ผ์ด ๋ณด๋ฉด ์ ๋ถ ์ ๋นํ๋ฉ๋๋ค. ๊ทธ๋ฐ๋ฐ ํฉ์น๋ฉด "๋ถํ ์กฐ๋ฆฝ" ์ ํธ๊ฐ ๋ ์. ์ฌ๋ ๋์์ด๋๋ผ๋ฉด ๊ฐ์ ํ๋ฉด์์ ์ด ๊ฒฐ์ ๋ค์ ๋์์ ๋ด๋ฆฌ์ง ์๊ฑฐ๋ ์. ๋์์ด๋๋ ๋ชจ์๋ฆฌ ์คํ์ผ ํ๋, ๊ฐ์กฐ์ ํ๋, ์์ด์ฝ ์ธํธ ํ๋, ๊ด์ ํ๋ ๋ฅผ ๊ณ ๋ฅด๊ณ โ ๊ทธ๊ฑธ ์ด๋์๋ ๋ฐ๋ณตํฉ๋๋ค.
๊ทธ ๋ฐ๋ณต์ด ์ฐ๋ฆฌ๊ฐ "ํ ์ฌ๋์ด ๋ง๋ ๋๋"์ผ๋ก ์ฝ๋ ์ ์ฒด์ ๋๋ค. UX Collective์ Goran Paun์ ์ด๊ฑธ ์๊ฐ์ ์ ํฉ์ฑ์ด๋ผ ๋ถ๋ฅด๊ณ , Steve Schoger์ Refactoring UI ์ ์ฒด๊ฐ ์ด๋ค ์๋ฏธ์์ "๋ถํ์ํ ๋ณ์ฃผ๋ฅผ ๋ง๋ค์ง ๋ง๋ผ"๋ ์ฑ ์ด์ฃ . ์์น ์์ฒด๋ ์ค๋๋์ต๋๋ค. ์๋ก์ด ๊ฑด AI๊ฐ ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์ด๊ฑธ ๊นจ๋จ๋ฆฐ๋ค๋ ์ ์ด๊ณ , ์ ๊นจ๋์ง๋ฅผ ์๋ฉด ์ด๋ป๊ฒ ๊ณ ์น ์ง๊ฐ ๋ณด์ ๋๋ค.
AI๊ฐ ์ ๋ ์ด๊ฑธ ๋ชป ํ๋ ์ด์
์ธ์ด ๋ชจ๋ธ์ UI๋ฅผ ๊ตญ์์ ์ผ๋ก(locally) ์์ฑํฉ๋๋ค. ์นด๋ ์ฐ๊ณ , ๋ฒํผ ์ฐ๊ณ , ๋ชจ๋ฌ ์ฐ๊ณ โ ๊ฐ๊ฐ์ ๊ทธ๋ด๋ฏํ ์ ์กฐ๊ฐ์ผ๋ก ๋ฐ๋ก ๋ง๋ค์ด์. "40์ค ์์ ๋ฒํผ์ด ์์ฝ ๋ชจ์์ด์์ผ๋ ์ด๊ฒ๋ ์์ฝ์ด์ด์ผ ํ๋ค"๋ ๊ธฐ์ต์ด ์์ต๋๋ค. ๊ฐ ์ปดํฌ๋ํธ๋ ์๊ธฐ ํ์ต ๋ฐ์ดํฐ์ ํ๊ท ๊ฐ์ผ๋ก ํ๊ทํ๋๋ฐ, "๋ฒํผ์ ํ๊ท "๊ณผ "์นด๋์ ํ๊ท "์ ์ ์ด์ ์๋ก ๋ง์ถฐ์ง ์ ์ด ์์ฃ .
์ฌ๋์ ์ด๋ ๊ฒ ์ผํ์ง ์์ต๋๋ค. ์ฐ๋ฆฌ๋ ๋จธ๋ฆฟ์์ ์์ฃผ ์์ ๊ฒฐ์ ์งํฉ โ ์ด ์ ํ์ ๋ฅ๊ทผ ๋ชจ์๋ฆฌ, ํ๋ ๊ฐ์กฐ์, 8px ๊ทธ๋ฆฌ๋ โ ์ ๋ค๊ณ ๋ค๋๊ณ , ์ ์์๋ ์ ๋ถ ๊ทธ๊ฑธ ๋ฌผ๋ ค๋ฐ์ต๋๋ค. ๊ทธ ๊ฒฐ์ ์ด ๋๋ํ๊ฒ(sticky) ๋ฐ๋ผ๋ถ์ด์.
๊ทธ๋์ ํด๋ฒ์ "๋ชจ๋ธ์ ๋ ๊ฐ๊ฐ ์๊ฒ" ๊ฐ ์๋๋๋ค. ๊ทธ ๋๋ํ ๊ฒฐ์ ๋ค์ ์ ์ด๋๊ณ , ๋ชจ๋ธ์๊ฒ ์๋ก ๋ง๋ค์ง ๋ง๊ณ ๋ณต์ฌํ๋ผ๊ณ ์ํค๋ ๊ฒ ์ ๋๋ค.
๋ฉํ ๋ฒ์น: ์ถ๋ง๋ค ๊ฐ ํ๋
ํต์ฌ์ ํ ๋ฌธ์ฅ์ ๋๋ค.
๋์์ธ ์ถ๋ง๋ค ๊ฐ(๋๋ ํจ๋ฐ๋ฆฌ)์ ํ๋๋ง ์ ํ๊ณ , ํ ํฐ์ผ๋ก ๋ฐ์์, ์ด๋์๋ ์ ์ฉํ๋ค.
์ ํฉ์ฑ์ "๋ชจ๋ ํ๋ฉด์ด ๋๊ฐ๋ค"๊ฐ ์๋๋๋ค. ๊ฐ์ ๊ฒฐ์ ์ด ๋ฐ๋ณต๋๋ ๊ฑฐ์์. ์ค์ ํ์ด์ง์ ๋์๋ณด๋๋ ์ ํ ๋ค๋ฅด๊ฒ ์๊ฒจ๋ โ ๋ชจ์๋ฆฌ personality, ๊ทธ๋ฆผ์ ์ธ์ด, ๊ฐ์กฐ์, ๊ฐ๊ฒฉ ๋จ์๋ง ๊ณต์ ํ๋ฉด โ ํ ์ ํ์ฒ๋ผ ๋๊ปด์ง๋๋ค.
ํต์ผ๋ผ์ผ ํ๋ ์ถ๋ค:
| ์ถ | ํ๋๋ง ์ ํ๋ค | ์์ด๋ฉด |
|---|---|---|
| ๋ชจ์๋ฆฌ/๋ผ์ด๋ | ๊ฐ์ง 0โ4px ยท ๋ถ๋๋ฌ์ 8โ12px ยท ์์ฝ 9999px | ๊ฐ์ง ๋ค์ด์ผ๋ก๊ทธ + ๋ฅ๊ทผ ๋ฒํผ = "๋ ์ ํ ๋ถ์ธ ๋๋" |
| ๊ทธ๋ฆผ์ | ํ ์ค์ผ์ผ, ํ ๊ด์(์ข์๋จ), ํ ์์กฐ | "ํ์์ด ๋์ธ ์ฅ๋ฉด" |
| ๊ฐ์กฐ์ | ๊ฐ์กฐ๋ 1๊ฐ (+ ์๋ฏธ์ red/green/amber) | ๋ฌด์๋ ๊ทธ ์ก์ ์ผ๋ก ์ ์ฝํ |
| ๊ฐ๊ฒฉ ๋จ์ | 8px ๊ทธ๋ฆฌ๋ ํ๋ (4px ํํ์คํ ) | 7/13/19px ๊ฐ์ ์คํ๊ทธ๋ฆฌ๋ = "์์ฑํจ" |
| ์์ด์ฝ | ํ ํจ๋ฐ๋ฆฌ, ํ ์ฑ์, ํ ๊ตต๊ธฐ | ์ธํธ ์์ด๋ฉด "๊ฒ๋๋" ๋๋ |
| ํ์ ์ค์ผ์ผ | ๋ชจ๋๋ฌ ์ค์ผ์ผ ํ๋, ํฐํธ โค2์ข | ์์ ํฌ๊ธฐ๊ฐ ๋ฆฌ๋ฌ์ ๊นธ |
| ๋ชจ์ | ์ง์์๊ฐ ์ธํธ ํ๋ + ์ด์ง ํจ๋ฐ๋ฆฌ ํ๋ | ์ด๋ค ๊ฑด ๋น ๋ฆฟ, ์ด๋ค ๊ฑด ๊ตผ๋ = ๋ค๋ฅธ ์ฑ |
| ์ปจํธ๋กค ๋์ด | ๊ณต์ ๋์ด ์ธํธ (์: 40px) | 44px ์ธํ ์ 32px ๋ฒํผ = ๋ฒ ์ด์ค๋ผ์ธ ๊นจ์ง |
๋น์ ๊ณต์๊ฐ ํต์ฌ์ ๊ฐ์ฅ ์ ์ฐ๋ฅธ ํํ:
"๋ชจ์๋ฆฌ๋ฅผ ๊ฐ์ง๊ฒ ํ์ผ๋ฉด ๋ค ๊ฐ์ง๊ฒ ๊ฐ์ผ์ง."
์ ํํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๊ฑด ์ ํ์ ๋ชจ๋ ํ์ ๊ทธ๋๋ก ์ ์ฉ๋ผ์. ์ถ์ด ์์ด๋ ๊ฑด ์คํ์ผ ์ ํ์ด ์๋๋ผ lint ์๋ฌ๋ก ์ทจ๊ธํ์ธ์.
์ด ์ค ๋ท์ ์ฝ๋๋ก ๊ตฌ์ฒดํํด ๋ด ์๋ค.
1. ๋ชจ์๋ฆฌ personality ํ๋ (๊ทธ๋ฆฌ๊ณ ์ค์ฒฉ ๋ฒ์น)
๋จผ์ , ๋ผ์ด๋๋ ํ ํฐ์ด์ง ๋งค์ง ๋๋ฒ๊ฐ ์๋๋๋ค. ์์ ์ค์ผ์ผ์ ์ ์ํ๊ณ ์ด๋์๋ ์ฐธ์กฐํ์ธ์.
:root {
--radius-sm: 8px; /* ์ธํ, ๋ฒํผ */
--radius-md: 12px; /* ์นด๋, ๋ฉ๋ด */
--radius-lg: 16px; /* ๋ชจ๋ฌ, ์ํธ */
--radius-full: 9999px;
}
๊ทธ๋ค์ personality ํ๋ โ ์ ๋ถ ๊ฐ์ง๊ฒ, ์ ๋ถ ๋ถ๋๋ฝ๊ฒ, ์ ๋ถ ์์ฝ โ ๋ฅผ ๊ณจ๋ผ ์นด๋/๋ฒํผ/์ธํ/๋ชจ๋ฌ/์ด๋ฏธ์ง์ ์ ์ฉํฉ๋๋ค. ๋ชจ๋ธ์ด rounded-none ํจ๋์ rounded-full ๋ฒํผ์ ๋ฉ๋๋ก ์๊ฒ ๋์ง ๋ง์ธ์.
๋ง์ด๋ค ๋์น๋ ๋ ๋ฒ์งธ ๊ท์น: ์ค์ฒฉ๋ ๋ผ์ด๋๋ ์ค์ฌ์ ๊ณต์ ํด์ผ ํฉ๋๋ค. ๋ฅ๊ทผ ์ปจํ
์ด๋ ์์ ํจ๋ฉ์ ๋๊ณ ๋ฅ๊ทผ ์์๊ฐ ๋ค์ด๊ฐ ๋, ์์ชฝ ๋ฐ์ง๋ฆ์ ๋ ์์์ผ ํด์.
์์ชฝ ๋ฐ์ง๋ฆ = ๋ฐ๊นฅ ๋ฐ์ง๋ฆ โ ํจ๋ฉ
.card {
--pad: 16px;
border-radius: var(--radius-lg); /* 16px */
padding: var(--pad);
}
.card > .thumbnail {
/* 16 โ 16 = 0; ์์๊ฐ ์ ๋๊ฒ clamp */
border-radius: max(0px, calc(var(--radius-lg) - var(--pad)));
}
์์ชฝ ์์์ ๋ฐ๊นฅ๊ณผ ๊ฐ์ ๋ผ์ด๋๋ฅผ ์ฃผ๋ฉด, ์ฝ๋๊ฐ ์ปจํ ์ด๋์ ํธ๋ฅผ ๋น์ง๊ณ ํ์ด๋์ต๋๋ค. Apple์ ์ "Liquid Glass"๊ฐ ๋ฐ๋ก ์ด ๋์ฌ์ ์ฝ๋ ์ํ์ ๊ณต์ํํ๊ณ , Cloud Four์ ์ ์ ๊ธ์ด ์์ต๋๋ค.
2. ๋จ์ผ ๊ด์์ ๋ ์ด์ด๋ ๊ทธ๋ฆผ์
๊น์ด๋ฅผ ๊ฐ์ง๋ก ๋ณด์ด๊ฒ ํ๋ ๊ฐ์ฅ ๋น ๋ฅธ ๋ฐฉ๋ฒ์ด ๋จ์ผ ํ๋ box-shadow์
๋๋ค. ์ง์ง ๊ทธ๋ฆผ์๋ ๊ทธ๋ผ๋ฐ์ด์
(๋ฐ์์)์ด๋ผ, ๋ฎ์ ๋ถํฌ๋ช
๋ ๋ ์ด์ด๋ฅผ ์ฌ๋ฌ ๊ฒน ์๊ณ โ ๊ฒฐ์ ์ ์ผ๋ก โ ๊ฒ์ ๋์ ํ๋ฉด ์์กฐ ์ชฝ์ผ๋ก ์ด์ง ํดํธํ์ธ์. ์์ ๊ฒ์ ์ ํํด์ง๋๋ค.
/* ์นด๋ โ ํ์ด์ง์ ๊ฐ๊น๊ฒ */
--shadow-md:
0 1px 2px hsl(220 40% 20% / 0.08),
0 2px 4px hsl(220 40% 20% / 0.08),
0 4px 8px hsl(220 40% 20% / 0.08);
/* ๋ชจ๋ฌ โ ์ฌ์ฉ์ ์ชฝ์ผ๋ก ๋ ์ค๋ฅด๊ฒ */
--shadow-xl:
0 2px 4px hsl(220 40% 20% / 0.06),
0 8px 16px hsl(220 40% 20% / 0.06),
0 16px 32px hsl(220 40% 20% / 0.06),
0 32px 64px hsl(220 40% 20% / 0.06);
์ ํฉ์ฑ ๊ท์น: ํ์ด์ง ์ ์ฒด๊ฐ ํ ๊ด์ (๊ด๋ก์ ์ + ์ฝ๊ฐ ์ผ์ชฝ), ์์ง ์คํ์ ์ ์ํ์ ์ฝ 2๋ฐฐ. ๊ณ ๋๊ฐ ์ฌ๋ผ๊ฐ๋ฉด ์คํ์ ยท๋ธ๋ฌ๋ ์ปค์ง๊ณ ๋ถํฌ๋ช ๋๋ ๋ฎ์์ง๋๋ค. ๊ทธ๋ฌ๋ฉด ์นด๋์ ๋ชจ๋ฌ์ด ๊ฐ์ ๋น์ด ๋ค๋ฅธ ๋์ด์ ๋ฌผ์ฒด์ ๋ฟ์ ๊ฑธ๋ก ์ฝํ์ โ ๋ณ๊ฐ์ ๋ ํจ๊ณผ๊ฐ ์๋๋ผ. (Josh Comeau, Tobias Ahlin ๊ธ์ด ์ข์ต๋๋ค.)
๋คํฌ ๋ชจ๋์์ ๊ทธ๋ฆผ์๊ฐ ๊ฑฐ์ ์ ๋ณด์ด๋ฏ๋ก ํค ๊ธฐ๋ฐ ๊ณ ๋๋ก ์ ํํ์ธ์ โ ๋์์๋ก ๋ฐ์ ํ๋ฉด. ๋ฒ ์ด์ค๋ ์ ๋ ์์ #000 ๊ธ์ง(Material์ #121212 + ๋ ๋ฒจ๋ณ ํ์ดํธ ์ค๋ฒ๋ ์ด ๊ถ์ฅ).
3. ๊ฐ์กฐ์ ํ๋, ๋๋จธ์ง๋ ๊ทธ๋ ์ด์ค์ผ์ผ
"AI ๋ฌด์ง๊ฐ" UI๋ ๋๊ฐ ๊ฐ์กฐ๊ฐ ํ์ํ ๋๋ง๋ค ์ ์์ ๊บผ๋ด ์จ์ ์๊น๋๋ค. ๊ท์จ:
- ์ํธ์์ฉ ๊ฐ์กฐ๋ ํ๋์ ๊ฐ์กฐ์.
- ํ ์คํธยทํ๋ฉดยทํ ๋๋ฆฌ๋ ํดํธ๋ ๊ทธ๋ ์ด ๋จํ (์์ ํ์ ๋ง๊ณ โ ๋ธ๋๋ ์์กฐ ์ชฝ์ผ๋ก 5โ15% ๋ฐ๊ธฐ).
- ์๋ฏธ์์ ๋ฑ ๋ท โ success / warning / error / info โ ์ด๊ณ ์ค์ง ์๋ฏธ๋ก๋ง, ์ฅ์์ผ๋ก๋ ์ ๋ ์ ์.
:root {
--accent: #5b5bd6;
/* ์ฑ๋ 0 ํ์์ด ์๋๋ผ ๊ฐ์กฐ์ ์ชฝ์ผ๋ก ์ด์ง ํดํธ */
--grey-50: hsl(240 20% 98%);
--grey-200: hsl(240 14% 90%);
--grey-500: hsl(240 8% 55%);
--grey-900: hsl(240 12% 14%); /* ๋ณธ๋ฌธ ํ
์คํธ โ #000 ์๋ */
}
๊ทธ๋ฆฌ๊ณ ํํ ๋ถ๊ฐ ์ ๊ทผ์ฑ ํํ์ (WCAG 2.2 AA): ๋ณธ๋ฌธ ํ ์คํธ 4.5:1, ํฐ ํ ์คํธยทUI ์์ 3:1. ์ ๋ณด๋ฅผ ์์ผ๋ก๋ง ์ ๋ฌ ๊ธ์ง โ ์์ด์ฝยทํ ์คํธยทํํ์ ํจ๊ป. ์ ํจ์ฑ ์คํจ ํ๋์ ๋นจ๊ฐ ํ ๋๋ฆฌ๋ง์ผ๋ก ๋ถ์กฑํ๊ณ , ์์ด์ฝ๊ณผ ๋ฉ์์ง๋ฅผ ๊ฐ์ด ๋ฃ์ผ์ธ์.
4. ๊ฐ๊ฒฉ ๊ทธ๋ฆฌ๋ ํ๋, ๊ทธ๋ฃนํ์ ๊ทผ์ ์ฑ์ผ๋ก
๋ชจ๋ marginยทpaddingยทgap์ ํ ์ค์ผ์ผ โ 4, 8, 12, 16, 24, 32, 48, 64 โ ์ ์ค๋
ํ๊ณ , ๊ทผ์ ์ฑ์ด ์๋ฏธ๋ฅผ ๋๋ฅด๊ฒ ํ์ธ์. Gestalt(๊ทธ๋ฆฌ๊ณ Refactoring UI์ "๋ชจํธํ ๊ฐ๊ฒฉ์ ํผํ๋ผ")์ ๊ท์น: ๊ทธ๋ฃน ๋ฐ๊นฅ ๊ณต๊ฐ์ด ๊ทธ๋ฃน ์ ๊ณต๊ฐ๋ณด๋ค ํ์คํ ์ปค์ผ ํฉ๋๋ค.
ํผ์ ๊ตฌ์ฒด์ ์ฌ๋ค๋ฆฌ:
๋ผ๋ฒจ โ ์ธํ : 4โ8px
์ธํ โ ์ธํ : 12โ16px
๊ทธ๋ฃน โ ๊ทธ๋ฃน (์น์
) : 24โ32px
์ ๋ถ ๊ท ์ผํ๊ฒ ๋์ฐ๋ฉด ๋์ด ๋ฌด์์ด ํ ๋ฉ์ด๋ฆฌ์ธ์ง ์ ์ ์์ต๋๋ค. ๋จ๊ณ๋ง๋ค ๋ ๋ฐฐ๋ก ๋ฒ์ด์ง๋ ๊ฒ, ๋ผ๋ฒจ์ด ์๊ธฐ ํ๋์ ๋ถ๊ณ ์น์ ์ด ๋ค์ ์น์ ๊ณผ ๋ถ๋ฆฌ๋๊ฒ ๋ง๋๋ ํต์ฌ์ด์์.
๊ธฐ๊ณ๊ฐ ์ค์ค๋ก ์ ๊ฒํ๊ฒ
๊ฒฐ์ ์ ์ ์ด๋๋ ๊ฒ ์ ๋ฐ์ด๊ณ , ๋๋จธ์ง ์ ๋ฐ์ ์๋ฐ์ ์ก๋ ๊ฒ๋๋ค. ์ฌ๊ธฐ์ AI๊ฐ ์ค์ ๋ก ์ธ๋ชจ ์์ด์ โ ์ฑ์ ๊ธฐ์ค๋ง ์ฅ์ฌ์ฃผ๋ฉด.
์ ๋ ์ ๋ด์ฉ์ Claude CodeยทCursor๊ฐ ์๋์ผ๋ก ์ฝ๋ ์คํ์์ค ๋์์ธ ์์ง(StyleSeed)์ ๋ฃ์ง๋ง, ์์ด๋์ด ์์ฒด๋ ๋๊ตฌ ๋ฌด๊ด์ ๋๋ค. ๊ฐ์ฅ ์ธ๋ชจ ์๋ ์กฐ๊ฐ์ ์ ํฉ์ฑ ์ฑ์ ๊ธฐ โ ํ์ผ์ ์ ์ํํ๊ณ ์์ธ ์ถ์ ์ค์ ๊ฐ์ ์ผ๋ก ์ก๋ ๊ฒ์ฌ์์ต๋๋ค.
์ถ๋ ฅ ์์(์ถ์ฝ):
## Design Score: 70 / 100 (Dashboard.tsx)
Color discipline 13/18 โโโโ #000 ์ ๋ชฉ; ๊ฐ์กฐ์ 3๊ฐ
Cards & elevation 8/12 โโโโ 1px ํ
๋๋ฆฌ๊ฐ ๋ถ๋ฆฌ๋ฅผ ๋ด๋น
Coherence 6/12 โโโโ ๊ฐ์ง ์นด๋(l.22) + ์์ฝ ๋ฒํผ(l.48); ๊ฐ์กฐ 3๊ฐ
### ๋จผ์ ๊ณ ์น ๊ฒ (์ ์ ์ด๋ ํฐ ์)
1. ๋ผ์ด๋ ํต์ผ(๋ถ๋๋ฌ์ 8โ12px) + ๊ฐ์กฐ์ 1๊ฐ๋ก โ +9
2. ์ฃผ๋ฌธ ๋ฆฌ์คํธ์ empty + loading ์ํ ์ถ๊ฐ โ +7
3. 1px ํ
๋๋ฆฌ ๋นผ๊ณ ํค + โค8% ๊ทธ๋ฆผ์ โ +4
"Coherence" ํญ๋ชฉ์ด "AI ์์ฑ ํฐ"๋ฅผ ๊ฐ์ฅ ์ ์์ธกํฉ๋๋ค. ์ปดํฌ๋ํธ๋ณ ์์จ์ด ์๋๋ผ ์ ์ญ ์ผ๊ด์ฑ์ ์ฌ๊ธฐ ๋๋ฌธ์ด์์. ์ปดํฌ๋ํธ๋ ์๋ป๋ ํ๋ฆด ์ ์์ต๋๋ค โ ์ด์๊ณผ ์ ๋ง์ผ๋ฉด.
๊ฒฐ๋ก
ํ๋๋ง ๊ธฐ์ตํ๋ค๋ฉด:
์์ ๋ถํ์ด ์์ UI๋ฅผ ๋ง๋ค์ง ์์ต๋๋ค. ์๋ก ๋ง๋ ๋ถํ์ด ๋ง๋ญ๋๋ค.
์ถ๋ง๋ค ๊ฐ ํ๋ โ ๋ผ์ด๋, ๊ทธ๋ฆผ์, ๊ฐ์กฐ์, ๊ฐ๊ฒฉ, ์์ด์ฝ, ํ์ , ๋ชจ์ โ ๋ฅผ ๊ณจ๋ผ ํ ํฐ์ผ๋ก ์ ์ด๋๊ณ , ์ ์์๊ฐ ๋งค๋ฒ ์๋ก ๊ณ ๋ฅด๋ ๋์ ๊ทธ๊ฑธ ๋ฌผ๋ ค๋ฐ๊ฒ ํ์ธ์. ๊ทธ ํ ๊ฐ์ง ๊ท์จ์ด "๋ก๋ด์ด ๋ง๋ค์๋ค"์ "๋์์ด๋๊ฐ ๋ง๋ค์๋ค"๋ฅผ ๊ฐ๋ฅด๊ณ , AI๊ฐ ๋ง๋ ์ธํฐํ์ด์ค์ ํ ์ ์๋ ๊ฐ์ฅ ์ธ๊ณ ํจ๊ณผ ํฐ ์ผ์ ๋๋ค.
๋ชจ์๋ฆฌ๊ฐ ๊ฐ์ง๋ค๊ณ ์? ๊ทธ๋ผ ์ ๋ถ ๊ฐ์ง๊ฒ. ๋๊น์ง.
์ซ์๊น์ง ๋ค์ด๊ฐ ํ๋ฒ์ โ ๊ฐ๊ฒฉ ์์น, ์ฑ ์ข ๋ฅ๋ณ ํ์ ๋ ์ํผ, ๋ ์ด์ด๋ ๊ทธ๋ฆผ์ยท์ค์ฒฉ ๋ผ์ด๋ ๋ ์ํผ, ์ ๋ถ Refactoring UI / Material 3 / Apple HIG / WCAG ๊ทผ๊ฑฐ โ ์ ์คํ์์ค(MIT)๋ก ์ฌ๊ธฐ ์์ต๋๋ค: github.com/bitjaru/styleseed. โญ ํ๋๊ฐ ๋ ๋ง์ ๊ฐ๋ฐ์(์ AI ๋๊ตฌ)์๊ฒ ๋ฟ๊ฒ ํฉ๋๋ค.
๐ฌ๐ง The English version of this post is here.











