Section4 Unit4 [UX/UI] Design System - ๋์์ธ ์์คํ ๊ตฌ์ถํ๊ธฐ
๐ Chapter3. ๋์์ธ ์์คํ ๊ตฌ์ถํ๊ธฐ
• ๋์์ธ ์์คํ ์ ๋์ ํ๊ธฐ ์ข์ ์๊ธฐ : ์ ํ๊ตฐ ๋ฐ ๊ธฐ๋ฅ์ด ํ์ฅ๋ ๋, ๊ด๋ จ๋ ์ธ์์ด ๋์ด๋ ๋, ์ฑ๋์ด ํ์ฅ๋ ๋
โญ๏ธ ๊ณผ์ . ๋์์ธ ์์คํ ๊ตฌ์ถํ๊ธฐ
์ง๋ ๊ณผ์ ์๋ Component Library๋ ๊ฒจ์ฐ ์ด๋ป๊ฒ ํด์ ์ ์ถ์ ํ๋๋ฐ, ์ด๋ฒ ๊ณผ์ ์ธ ๋์์ธ ์์คํ ๊ตฌ์ถํ๊ธฐ๋ ํ ์๋๊ฐ ์๋์ ํฌ๊ธฐํ๋ค. ์ด๋ค ๋ถ๋ถ์ด ํ ์๋๊ฐ ๋์ง ์์๋ํ๋ฉด, ์คํ ๋ฆฌ๋ถ์ ์ฌ์ฉํ๋๋ฐ์ ๋งํ๋ค. ๋ผ์ด๋ธ ์ธ์ ๊ฐ์๋ฅผ ๋ณด๊ณ ์คํ ๋ฆฌ๋ถ์ ์ธํ ํ๊ณ , ์ปดํฌ๋ํธ ํ๋๋ฅผ ๋ง๋ค๊ธฐ๋ ํ๋๋ฐ ๊ธ์... ์ง๋ Section3 ์์๋ ์คํ ๋ฆฌ๋ถ์ ์ ๋๋ก ๋ณด์ง ์์์ ์ด๋ฒ Section์์ ๋ค์ ํด๋ณด๋ ค๋ ๋น ์ค์ผ์น๋ถ์ ๋ญ ํด์ผํ ์ง ๋ชจ๋ฅด๋ ๊ธฐ๋ถ์ด์๋ค.
๊ทธ๋์! ์ด๋ค ์ปดํฌ๋ํธ๋ฅผ ๋์์ธ ์์คํ ์ ์ถ๊ฐํ ๊ฒ์ธ์ง ๋ถ์๊น์ง๋ง ํ๋ค ^-^
(์ด๊ฒ๋ ๊ฑฐ์ ๋ญ, ๊ฐ์๋ณด๊ณ ๋ฐ๋ผํ ์์ค...์ด์ง๋ง ์๋ฐ๊ฑด ๋น์ฐ ์ดํด๋ ํ๋ค๊ตฌ,,)
์, ์ด์ ์คํ ๋ฆฌ๋ถ์ ์ฌ์ฉํ ์ค ์๋ค๋ฉด, ์ด๊ฑธ ์คํ ๋ฆฌ๋ถ ์ปดํฌ๋ํธ๋ก ๋ง๋ค๋ฉด ๋๋ค! ใ -ใ ์ฆ๊ฑฐ์๋
๋ผ์ด๋ธ ์ธ์ ๋ณด๋ฉฐ ์ ๊ท์ฌ์ด ๋ถ๋งํฌ ๋ณ ํ๋ ์คํ ๋ฆฌ๋ถ์ ์ปดํฌ๋ํธ๋ก ์ถ๊ฐํ๋ค ๐
์ด์ ์ค๋ ์คํ ๋ฆฌ๋ถ ๋์ ๋ฆฌ์กํธ์ ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ํํ๊ณ , ๊ณผ๊ฐํ๊ฒ ์ ํ๊ณผ ์ง์ค์ ๋ค์ด๊ฐ๋ค. (์ด๋ ๊ฒ ์๊ณ ๋ฆฌ์ฆ ๋ฌธ์ ๋ ํฌ๊ธฐํ์๋๋ฐ, ์ง๊ธ ์๊ฐํด๋ณด๋ ์ฝ๋ฉํ ์คํธ ๋๋น๋ ํด์ผํ ๊ฒ ๊ฐ๋ค... ํ์ฌ ์ ํ์ ํญ๋ ๋๋ฌด ์ข์์ง ๊ฒ ๊ฐ๊ณ ๋์๊ฒ๋ ์์ข์ ๊ฒ ๊ฐ๋ค....) ์ฌํผ ๋ญ ์คํ ๋ฆฌ๋ถ, ํ์ฌ์์ ์ฌ์ฉํ๋คํ๋ฉด ๊ทธ๋ ๋ฐฐ์ฐ๋ฉด ๋์ง ์์๊น..? ๋ฐฐ์ฐ๊ณ ์ ๊ฒฐ์ฌํ๋ฉด ํ ์ ์๋ค๊ตฌ..๐ ์ฌํผ ์ง๋ ์น์ ์์๋ ์คํ ๋ฆฌ๋ถ ๋ง๋ค์ด์ ๋ฐฐํฌ๊น์ง ํด๋ณด๊ณ ์ถ์๋๋ฐ, ๋์ค์ ๊ผญ ํด๋ด์ผ๊ฒ ๋ค.
์ค๋ ๊ณผ์ ๋ ํ์ง๋ ์๊ณ ์ ์ฃผ์ ๋ฆฌ์ฃผ์ ๋ฆฌ ๋ง์ด ๋ง์๋ค..ใ ใ
๐ ์ค๋์ ํ๊ณ
์ด๋ฒ์ ์ด์ ์ค๋, ์ดํ๋์์ ํ๊ณ ๋ฅผ ํ๋ฒ์ ์ ๋๋ค. TIL ๋ธ๋ก๊น ์ ์์ํ๊ณ ์ ํ์ ๋, ํ ์ ๋์ ํ๋ฒ์ฉ ๋ฐฐ์ด ๋ด์ฉ์ ์ ๋ฆฌํ๊ณ ํ๊ณ ๊ธ์ ์ธ๊น ํ๋ค๊ฐ ์ ๋๋ณ๋ก ๋ด์ฉ์ด ๋ง์ ๋ถ๋ถ์ด ์๋ ๊ฒ ๊ฐ์์ ํ๋ฃจ์ ํ๋ฒ์ฉ ๊ธ์ ์ฐ๊ธฐ๋ก ๊ฒฐ์ฌํ์๋ค. ์ง๊ธ๊น์ง ํ์ตํ ๋ด์ฉ์ ์ ๋๋ก ์ ๋ฆฌ๋ฅผ ๋ชปํด๋, ์ด๋ ๊ฒ ํ๋ฃจ๋ฅผ ๋์๋ณด๋ ์๊ฐ์ ํ๋ฃจ๋ ๋น ์ง์์ด ๋งค์ผ ๊ฐ์ก๋ ๊ฒ ๊ฐ๋ค. ํญ์ ์์์ ํด๋๊ณ ๋๋งบ์์ด ์์ฌ์ ๋ ๋์๊ฒ ๋๋งบ์์ ๊ผญ ํด๋ณด๋ผ๊ณ , ๋๋ฆ ๊ณต๊ฐ์ (? ์๋ฌด๋ ์ฝ์ง๋ ์์ง๋ง..ใ ใ )์ธ ๊ณต๊ฐ์ ์ ๋ก๋๋ฅผ ํ๊ธฐ ์์ํ๋ค. ์ ์ด๋ ๋ค์ ์ฃผ ํ๋ก์ ํธ๋ฅผ ์์ํ๊ธฐ ์ ๊น์ง, Section4๋ฅผ ๋ง๋ฌด๋ฆฌ ํ ๋๊น์ง๋ ๊พธ์คํ ์ด ์๊ฐ์ ๊ฐ์ง๊ฒ ๋ ๊ฒ์ ํ์คํด์ก๋ค. ๋๋ฆ์ ๋๋งบ์์ ํ๊ฒ ๋ ๊ฒ ๊ฐ๋ค๋๊น. ํ๋ก์ ํธ์ ๋ค์ด๊ฐ๋ฉด ์๋ง ๋ธ๋ก๊ทธ์ ๊ธ์ ๋งค์ผ๊ฐ์ด ์ฌ๋ฆด ๊ฒ ๊ฐ์ง๋ ์๋ค. ์ปค๋ฆฌํ๋ผ ์์ ํ์ต์ ๋์ด ๋๊ธฐ ๋๋ฌธ์ด๋ค.
๋ค์์ฃผ ๊ธ์์ผ์ด ํ๋ก์ ํธ์ ์์๋ ์ด๋ผ๋ ๊ฒ์ ์ด์ ๋ง์น ๋ ์ฏค์ ์๊ฒ ๋์๋ค. ๊ทธ๋๋ 2์ฃผ ์ ๋๋ ๋จ์ ์ค ์์๋๋ฐ, ๋ฒ์จ ๋ค์์ฃผ๊ฐ ํ๋ก์ ํธ ์์์ด๋ผ๊ณ ํ๋ ๊ฐ์๊ธฐ ๋ง๋งํ๊ณ , ๋ง์์ด ๊ธํด์ก๋ค. ์์ง react๋, redux๋ ๋๋ฌด ๋ง์ด ๋ถ์กฑํ๊ณ , ์๋ฒ๋ ๊ณต๋ถํ๋ค ๋ง ๋ถ๋ถ์ด ๋๋ฌด ๋ง์๋ฐ ๋ฒ์จ ํ๋ก์ ํธ์ ๋ค์ด๊ฐ ์ค๋น๋ฅผ ํด์ผ ํ๋ค๋ ๊ฑธ ๋ถ์ ํ๊ณ ์ถ์๋ค ๐ฅฒ
๊ฒ๋ค๊ฐ ์ด์ ์ค๋ ์งํํ ๋์์ธ ์์คํ ๊ตฌ์ถํ๊ธฐ ๊ณผ์ ๋ ํจ์คํ ์๊ฐ์ด์๋๋ฐ..ใ ๋ฑ ๊ทธ๋ฐ ์๊ฐ์ ํ ์ฆ์ ํ๋ก์ ํธ๊ฐ ์๊ธฐ๊น์ง ๋ค์ผ๋ ํ์จ์ด ์ ๋ก ๋์๋ค. ๋ฒ์จ 7์ ๋ง์, ๊ณต๋ถ๋ง ํ์ง, ์ทจ์ ์ ์ํด ํด๋์ ๊ฑด ๋ฑํ ์๋๋ฐ ํ ํ๋ก์ ํธ๋ฅผ ํ์๋ ์ด๊ฒ ๋ง๋๊ฑด์ง๋ ์ ๋ชจ๋ฅด๊ฒ ๋ค. ์์ ๋์น๊ฒ, ์ ๋ง ์ด์ฌํ ํด์๋๋ฐ ๊ฐ์๊ธฐ ์ด๋์๋ถํฐ ๋ฐ๋ก์ก์์ผํ ์ง ๋ฐฉํฅ์ ์์ ๊ฒ ๊ฐ์ ๋๋์ด ๋ค์๋ค.
๊ทธ๋์ ์ด์ ์ค๋ ์กฐ๊ธ ๋ต๋ตํ๋ ๊ฒ ๊ฐ๋ค. ๋ฌผ๋ก ์ง๊ธ๋ ๋ต๋ตํ๋ค. ์ ์๋ ์๊ฐ์ ๋ ์ค์ฌ์ผ ํ๋, ํ ํ๋ก์ ํธ๋ง๊ณ ๋ ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค๋ ์ค๋นํด์ผํ์ง ์๋, ์ฝ๋ฉํ ์คํธ ์ค๋น๋ ์ ํ ์๋์ด ์๋๋ฐ ์๊ณ ๋ฆฌ์ฆ ๊ณต๋ถ๋ฅผ ํ ์๊ฐ์ ๋ฐ๋ก ๋นผ๋ด์ผ ํ๋, ์๋ ๊ทธ์ ์ ํ ํ๋ก์ ํธ ์ ํ ์ ์์๊น, ์ ์๋๋ฉด ์ด์ฉ์ง, ์ ๋ชปํ๋ฉด ์ด๋ปํ์ง. ์ด์ฌํํ๋ฉด ์ ๋ ๊ฑฐ๋ผ๊ณ ์๊ฐํ๋ ๋ชจ๋ ๋ถ๋ถ๋ค์ด ๊ฑฑ์ ์ผ๋ก ๋ฐ๋์ด ์ฐ๋๋ฏธ์ฒ๋ผ ํ์๊ฐ์ ๋ชฐ๋ ค์๋ค. ๊ด์ฐฎ์๊น?
์ข ๋ ๊ณํ์ ๊ตฌ์ฒดํํ๊ณ , ์๊ฐ์ ํด๋ด์ผ๊ฒ ๋ค. (์, ์คํ ๋ฆฌ๋ถ ๊ณผ์ ํจ์คํด๋ฒ๋ฆฐ๊ฑฐ ์ฐ์ฐํด..๐ซ )
'Frontend Dev > ๐ฅ ์ฝ๋์คํ ์ด์ธ FE ๋ถํธ์บ ํ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Section4 Unit6 [Deploy] Amazon Web Service (0) | 2023.07.31 |
---|---|
Section4 Unit5 [TypeScript] ๊ธฐ์ด - ํ์ ์คํฌ๋ฆฝํธ ์์ (0) | 2023.07.26 |
Section4 Unit4 [UX/UI] Design System (0) | 2023.07.21 |
Section4 Unit3 [React] ์ฌํ - React Hooks ์ ์ฉํ๊ธฐ (0) | 2023.07.20 |
Section4 Unit3 [React] ์ฌํ - ์ฝ๋๋ถํ ๊ณผ React.lazy() & Suspense (0) | 2023.07.20 |