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