1. Design System
Last updated
Last updated
ํ๋์ ์น์ฌ์ดํธ์์ PC, ์ค๋งํธํฐ, ํ๋ธ๋ฆฟ PC ๋ฑ ์ ์ํ๋ ๋์คํ๋ ์ด์ ์ข ๋ฅ์ ๋ฐ๋ผ ํ๋ฉด์ ํฌ๊ธฐ๊ฐ ์๋์ผ๋ก ๋ณํ๋๋ก ๋ง๋ ์นํ์ด์ง ์ ๊ทผ ๊ธฐ๋ฒ ๋ฐ๋๋ง์ ๋๋ฐ์ด์ค๋ณ๋ก ๋ณ๋์ ์น์ฌ์ดํธ๋ฅผ ์ ์ํ๋ ์ ์ํ ์น(adaptive web)
ํ๋์ ๊ณต์ฉ ์น์ฌ์ดํธ PC์ฉ, ๋ชจ๋ฐ์ผ์ฉ์ผ๋ก ๊ฐ๊ฐ ์ ์ํ์ง ์๊ณ , ํ๋์ ๊ณต์ฉ ์น์ฌ์ดํธ๋ก ๋ค์ํ ๋๋ฐ์ด์ค์ ๋์ ๊ฐ๋ฅ
๋์ผ URL PC์ฉ URL๊ณผ ๋ชจ๋ฐ์ผ์ฉ URL์ด ๋์ผํ๊ธฐ ๋๋ฌธ์, ๊ฒ์ ํฌํธ ๋ฑ ๊ด๊ณ ๋ฅผ ํตํ ์ฌ์ฉ์ ์ ์์ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์์
ํจ์จ์ ์ธ ์ ๋ฐ์ดํธ ์น ํ์ด์ง ๋ด์ฉ์ ์์ ํ ๊ฒฝ์ฐ, ํ๋์ ํ์ด์ง๋ง ์์ ํ๋ฉด PC์ ๋ชจ๋ฐ์ผ ๋ฑ ๋ค์ํ ๋๋ฐ์ด์ค์์ ๋์ผํ๊ฒ ๋ฐ์
๊ฐ๋ณ ๊ทธ๋ฆฌ๋(fluid grid)
์ ์ฐํ ์ด๋ฏธ์ง(flexible images)
๋ฏธ๋์ด ์ฟผ๋ฆฌ(media query)
๋ฐ์ํ ์นํ์ด์ง์ ์์ ๊ธฐ์ค์ด ๋๋ ์ค๋จ์ PC / Tablet / Mobile์ ๊ธฐ์ค์ด ๋๋ ๊ท๊ฒฉ ๋ถ๊ธฐ
Mobile
0 ~ 767px
Tablet
768px ~ 1923px
PC
1024px ~ 1439px
PC Large
1440px ~
Viewport์ ํฌ๊ธฐ PC > Tablet > Mobile
Viewport : ์น ๋ธ๋ผ์ฐ์ ๋ฅผ ํตํด ์นํ์ด์ง์ ์ ์ํ์ ๋, ์ฃผ์์ฐฝ์ด๋ ํญ ๋ฑ์ ์ ์ธํ๊ณ ์ค์ ์นํ์ด์ง์ ์ปจํ ์ธ ๊ฐ ์ฐจ์งํ๋ ์์ญ
breakPoint๋ฅผ ๋ง์ด ๋๋๋ฉด ๋ ์ข์ ์๋น์ค๋ฅผ ๋ง๋ค ์ ์์ง๋ง, ๊ฐ๋ฐํ๋ ์๊ฐ์ด ๋์ด๋๊ณ ์ธ๊ฑด๋น๊ฐ ์ฆ๊ฐ ์น ์๋น์ค๋ฅผ ๊ธฐํ ๋จ๊ณ์์ ํ๋ก์ ํธ์ ์์ฐ๊ณผ ๊ธฐ๊ฐ์ ๊ณ ๋ คํ์ฌ BreakPoint๋ฅผ ๋ช ๋จ๊ณ๋ก ๋๋ ๊ฒ์ธ์ง ๊ฒฐ์
โ๏ธ ์กฐ๊ฐ๊ธ
'๋ฐ์ํ ์น'์ด๋ผ๋ ๋จ์ด๋ฅผ ๊ฐ๋ฐ์ ์์ํ๊ธฐ ์ ๋ถํฐ ํ์ฌ์์ ๋ง์ด ๋ค์ด๋ดค๋๋ฐ ๋ฌด์จ ๋ป์ธ์ง ์ ๋ชฐ๋๋ค. ๊ฐ๋ฐ ์ ๋ฌธ ์์ ์ ์ฝ์ด๋ณด๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ด ์ด๋ ค์ด ์ด์ ๋ก ๋ฐ์ํ์ด ๊ผฝํ๊ณ ์์๋ค. ์ค๋งํธํฐ๋ง ํด๋ ๊ธฐ๊ธฐ์ ์ข ๋ฅ๊ฐ ์ฒ์ฐจ๋ง๋ณ์ด๊ณ ๊ทธ ๋ชจ๋ ํ๋ฉด ํฌ๊ธฐ๋ฅผ ๋ค ๋ง์ถ ์๋ ์๊ธฐ ๋๋ฌธ์ ์ด๋ ต๋ค๋ ๋ป์ด์๋ค. ์ง์ ๊ฐ๋ฐ์ ํด๋ณด๋, ์๋ฌด๋๋ ๊ตฌํ์ ํ ๋ ์ฌ๋ฌ ํ๋ฉด ํฌ๊ธฐ๋ฅผ ์๊ฐํด์ผ ํ๊ธฐ ๋๋ฌธ์ ๋ฒ๊ฑฐ๋กญ๊ณ ๋ณต์กํ๋ค. ์์๋ ์ฌ๋๋ค์ด ์ฃผ๋ก ๋ชจ๋ฐ์ผ ํ๊ฒฝ์ ๋ง์ด ์ด์ฉํ๊ธฐ ๋๋ฌธ์ ์ ์ด์ ๋ชจ๋ฐ์ผ ํฌ๊ธฐ๋ก๋ง ๊ตฌํํด ๋์ ์ฌ์ดํธ๋ ์์๋ค.
๋ฐ์ํ ์น ๋์์ธ ์ดํ์ ๋ฑ์ฅํ ๊ฐ๋ ๋์์ธ ์์คํ ๊ณผ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๊ฐ ์ ๋ง์ ๋จ์ด์ง
๋์์ธ ์์คํ ์ UI ํดํท๋ง์ ์ง์นญํ๋ ๊ฒ์ด ์๋๋ผ ๋ ๋ง์ ๊ฒ์ ํฌํจ ํ๋ก์ ํธ๋ฅผ ์ผ๊ด์ฑ์ด ์๊ฒ ๊ตฌ์ถํ ์ ์๋๋ก ๋์์ธ ์์น(Design Principles), ํ๋ก์ธ์ค, UX ํจํด, UI ํดํท, ์ฝ๋ ๋ฑ ๋ชจ๋ ๊ฒ์ด ํฌํจ๋จ
์ ํ์ ์ธ ์์ : UI ํดํท, ๋์์ธ ์ง์นจ, ๋์์ธ ํจํด ๋ฑ
๋ฌดํ์ ์ธ ์์(๋งค์ฐ ์ถ์์ ) : ๋ธ๋๋ ๊ฐ์น, ํ์ ์์ ๋ฐฉ์, ์ฌ๊ณ ๋ฐฉ์ ๋ฑ
Laura Kalbag์ โDesign Systemsโ ์๊ฐ Laura Kalbag์ โDesign Systemsโ ์ฌ๋ผ์ด๋ Nielsen Norman Group์ โDesign Systems 101โ
๐ Summary: A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.
๋์์ธ ์์คํ ์ ๊ท๋ชจ๊ฐ ํฐ ๋์์ธ์ ๊ด๋ฆฌํ๋ ํ์ค์ ์งํฉ ๊ณต๋์ผ๋ก ์ฌ์ฉํ ์ธ์ด(ํจํด)์, ์ฌ๋ฌ ํ์ด์ง์ ์ฑ๋์์ ์๊ฐ์ ์ธ ์ผ๊ด์ฑ์ ์์ฑํ๋ ๊ณผ์ ์์ ์ค๋ณต์ ์ค์์ผ๋ก์จ, ๊ท๋ชจ์ ๋ง๊ฒ ๋์์ธ์ ๊ด๋ฆฌํ๊ธฐ ์ํ ์ผ๋ จ์ ํ์ค
๐ Definition: A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.
๋์์ธ ์์คํ ์ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ์ ํจํด์ ์ฌ์ฉํ์ฌ ๊ท๋ชจ์ ๋ง๊ฒ ๋์์ธ์ ๊ด๋ฆฌํ๊ธฐ ์ํ ์์ ํ ํ์ค ์ธํธ (ํจํด๋ ์ปดํฌ๋ํธ๋ก ๊ตฌํํ ์ ์์)
Theme : primary color, secondary color, font ๋ฑ์ ํฌํจํ๋ ๊ฐ๋
์ดํด ๊ด๊ณ์ ์ค๋์ด ์ํ ์์ฌ๊ฒฐ์ ์ ๊ธฐ์ค์ด ์ธ์์ ธ ํ๋ก์ ํธ ๊ฐ์ ์ฐธ์ฌ์์๋ ์ํต์ด ์ฌ์์ง
ํ๋ก์ ํธ ์ฐธ์ฌ์๋ค์ ์๊ฒฌ ์ฐจ์ด๋ฅผ ๋ฐฉ์ง ๋ชจ๋ ํ์ ๋ชฉํ๋ฅผ ํต์ผํ ์ ์๊ณ ํ ๊ฐ ์ํต์ด ์์ ๋ก์์ง
์ฌ์ฉ์์ ํผ๋ ๋ฐฉ์ง ์ ํ ๋ฐ ๋ธ๋๋์ ์ผ๊ด์ฑ์ ์ง์์ ์ผ๋ก ์ ์งํ ์ ์๊ธฐ ๋๋ฌธ์ ์ฌ์ฉ์๊ฐ ๊ฒฝํํ ์ ์๋ ํผ๋์ ์ค์
Jakob Nielsen๊ณผ Donald Norman์ UX ๋ถ์ผ์์ ์ ์ค์ ์ธ ์ธ๋ฌผ
์ ์ด์ฝฅ ๋์จ : ์ฌ์ฉ์ฑ ํ ์คํธ๋ก ์ ๋ช
๋๋๋ ๋ ธ๋จผ : UX์ ์ ๊ตฌ์ - ์ดํฌ๋์ค, ์ธํฐ๋ ์ ๋์์ธ
์จ๋ฐ ์ฟ ํผ : ๋น์ฃผ์ผ ๋ฒ ์ด์ง, ์ธํฐ๋ ์ ๋์์ธ
์ผ๊ด๋ ๋ฐฉ์์ผ๋ก ์๋ํ๋๋ก ์ ๊ณต
Atlassian Design System : Jira, Trello, Bitbucket, Sourcetree๋ฅผ ์ด์ํ๋ ํ์ฌ
Mailchimp Pattern Library : ์ด๋ฉ์ผ ๋ง์ผํ ์๋น์ค, ์บ๋ฆญํฐ์ ์ฑ๊ฒฉ๋ ์ง์ ๋์ด ์์
Ant Design : Figma ์์ ์ฌ์ฉ ๊ฐ๋ฅ
โ๏ธ ์กฐ๊ฐ๊ธ
์ํ๋ผ์์์ด๋ผ๋ ํ์ฌ๋ฅผ ์ฒ์ ๋ค์๋๋ฐ ๊ฒ์ํด๋ณด๋ ์ง๋ผ, ํธ๋ ๋ก ๋ฑ์ ๋ง๋ ํ์ฌ์ฌ์ ๋๋๋ค. ์ง์ ์ฌ์ฉํด๋ณธ ์ ์ ์์ง๋ง ์ฃผ๋ณ์์ ์ฌ์ฉํ๋ ๊ฒ์ ๋ณด๊ธฐ๋ ํ๊ณ , ํธ๋ ๋ก ๋ง๋ค๊ธฐ ํ๋ก์ ํธ๋ ํด๋ณธ ์ ์ด ์์ด์ ๋ฌด์์ธ์ง๋ ์๊ณ ์๋ค. ๊ฐ์ ์๋ฃ๋ฅผ ํตํด ๋์์ธ ์์คํ ์ ์ ๊ณตํ๋ ๋ค์ํ ์ฌ๋ก๋ฅผ ๋ณผ ์ ์์๋ค. ์ด ์ค์๋ Material Design๋ง ์๊ณ ์์๋๋ฐ ๋ค๋ฅธ ์ฌ์ดํธ๋ค์ ๊ตฌ๊ฒฝํ๋ฉฐ ๋น๊ตํ ์ ์์ด ์ข์๋ค.
Framer : ๋ค์ด๋ฒ, ํ ์ค
Design Systems Gallery Design Systems
Atomic design is methodology for creating design systems. ์ํ ๋ฏน ๋์์ธ์ ๋์์ธ ์์คํ ์ ๋ง๋๋ ๋ฐฉ๋ฒ๋ก ์ด๋ค.
๋์์ธ ์์คํ ์ ๋ง๋๋ ๋ฐฉ๋ฒ๋ก ์ค ํ๋
์ธ์์ ๋งค์ฐ ๋ณต์กํ์ง๋ง ๋ช ๊ฐ์ง ์์์ ์กฐํฉ์ผ๋ก ์ด๋ฃจ์ด์ง ๊ฒ์ฒ๋ผ, ์์(Atoms) โ ๋ถ์(Molecules) โ ์ ๊ธฐ์ฒด(Organisms) โ ํ ํ๋ฆฟ(Templates) โ ํ์ด์ง(Pages) ์์๋ก ๊ณ์ธต์ ์ ์ง์ ์ผ๋ก ๋ง๋ค์ด ๋๊ฐ์๋ ๋ฐฉ๋ฒ