1. Design System
๋์์ธ ์์คํ
์ ์ฌ๋ฌ ํ์ด์ง์ ์ฑ๋์์ ๊ณต์ ์ธ์ด
์ ์๊ฐ์ ์ผ๊ด์ฑ
์ ์ ์งํ๋ฉด์ ์ค๋ณต์ ์ค์ฌ
๋๊ท๋ชจ๋ก ๋์์ธ์ ๊ด๋ฆฌํ๊ธฐ ์ํ ์ผ๋ จ์ ํ์ค
์ด๋ค.
์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๊ตฌ์ฑ ์์
์ ํจํด
์ ์ฌ์ฉํ์ฌ ๋๊ท๋ชจ๋ก ๋์์ธ์ ๊ด๋ฆฌํ๊ธฐ ์ํ ํ์ค ์ธํธ๋ผ๊ณ ํํํ ์ ์๋ค.
๋์์ธ ์์คํ ์ ํต์ฌ์ ์ฝํ ์ธ ๋ฅผ ์ต์ ์ผ๋ก ํ์ํ๋ ๊ฒ.
์บ๋ฒ์ค๋ฅผ ๋์์ธํ๋ ๊ฒ์ด ์๋๋ผ ์ฝํ ์ธ ๋ฅผ ๋์์ธํ๋ ๊ฒ์ด๋ค.
theme
primary color, secondary color, font ๋ฑ์ ํฌํจํ๋ ,.
๋ฐ์ํ ์น ๋์์ธ(Responsive web design)
๋ฐ์ํ ์น ๋์์ธ์ ์ฌ์ฉํ๋ฉด ์น ํ์ด์ง์ ๋์์ธ๊ณผ ๋ ์ด์์์ด ํ๋ฉด ํฌ๊ธฐ์ ๋ง์ถฐ ํ๋, ์ถ์ ๋๋ ์ฌ๋ฐฐ์ด ๋๋ค.
์ ์ํ ๋์์ธ์ด๋?
์ ์ํ ์น ๋์์ธ์ ์ฌ์ฉํ๋ฉด ์น ํ์ด์ง์์ ๊ฐ์ง๋ ๊ธฐ๊ธฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ฏธ๋ฆฌ ๋ง๋ค์ด์ง ์ ์ ์ธ ๋ ์ด์์์ ๋ถ๋ฌ์จ๋ค.
์ด๋ฌํ ์์ ์ด ์ํ๋๊ธฐ ์ํด์ ๋์์ด๋๊ฐ ๋ค์ํ ํ๋ฉด ๋๋น์ ๋ง์ถฐ ๋ณ๋๋ก ๋์์ธ ์์ ์ ํด์ผ ํ๋ค.
๊ฐ์ฅ ์ผ๋ฐ์ ์ธ ๋๋น๋ ๋ค์๊ณผ ๊ฐ๋ค.
(320, 480, 760, 960, 1200, 1600)
Atomic Design
๋์์ธ ๋ถํ์ ๋ง๋ค์ด ์กฐ๋ฆฝํ๋ค.
์์๊ฐ ๋ชจ์ฌ ๋ถ์๊ฐ ๋๊ณ ๋ถ์๊ฐ ๋ชจ์ฌ ์ ๊ธฐ์ฒด๊ฐ ๋๋ค๋ ๊ฐ๋ ์ผ๋ก ํํ์ ์ฉ์ด๋ฅผ ์ด์ฉํด ์ค๋ช ํ๋ค.
๋ฐฑ๋ฌธ์ด ๋ถ์ฌ์ผ๊ฒฌ,
https://yozm.wishket.com/magazine/detail/1531/
์ฌ์ฉํ ์ด๋ฏธ์ง๋ ์ข๊ณ best practice๋ฅผ ํฅํ ์ฌ์ ์ด ์ฌ๋ฐ์ด ๋ณด์ธ๋ค.
ใดใด
Last updated