๐Ÿค” ๋ชฉ์ 

Atomic Design Pattern์„ ๋ณธ๊ฒฉ์ ์œผ๋กœ ์ ์šฉํ•˜๊ธฐ์— ์•ž์„œ ๊ธ€์„ ์ ์–ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

์ด ํŒจํ„ด์„ ์„ค๋ช…ํ•˜๋Š” ์—ฌ๋Ÿฌ ๋ธ”๋กœ๊ทธ๊ธ€์„ ๊ฐ€๋ณ๊ฒŒ ํ›‘์–ด๋ณด๊ณ  ๊ธ€๋“ค ๋งˆ๋‹ค ์žˆ๋Š” ์•„๋ž˜ ๊ทธ๋ฆผ์„ ๋ณด๋ฉด์„œ ์ž‘์€ ๋‹จ์œ„์˜ ์ปดํฌ๋„ŒํŠธ์ธ ์›์ž๋ฅผ ์ž˜ ๋งŒ๋“ค์–ด์„œ ๊ฐœ๋ฐœํ•˜๋Š” ๋Š๋‚Œ์ด๊ตฌ๋‚˜ํ•˜๊ณ  ๋„˜์–ด๊ฐ”๋‹ค.

Atomic-design-pattern-1

ํ•˜์ง€๋งŒ ๋ง‰์ƒ ๊ตฌํ˜„ํ•˜๊ธฐ ์•ž์„œ ์—ฌ๋Ÿฌ ๊ธ€๋“ค์„ ์ง„๋“ํ•˜๊ฒŒ ์•‰์•„์„œ ์ฝ์–ด๋ณด๋‹ˆ ์ค‘์ ์ ์œผ๋กœ ์‹ ๊ฒฝ์จ์•ผํ•˜๋Š” ๋ถ€๋ถ„์ด ์žˆ์—ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๊ฐ€์žฅ ๋งŽ์ด ์ƒ๊ฐ ๋‚ฌ๋˜ ๊ฒƒ์€ ํ”ผํ‚ค๋ฅผ ๊ฐœ๋ฐœํ• ๋•Œ ๋””์ž์ด๋„ˆ๋‹˜๊ณผ ํ•จ๊ป˜ ์ ์šฉ์‹œ์ผœ๋ดค์œผ๋ฉด ๋„ˆ๋ฌด ์ข‹์•˜์„ ๊ฒƒ ๊ฐ™์€ ๋ฐฉ์‹์ด์—ˆ๋‹ค.

์šฐ์•„ํ•œํ…Œํฌ์บ ํ”„์˜ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ์ž˜ ๋ฐฐ์›Œ์„œ ์–ธ์  ๊ฐ€ ํ•˜๊ฒŒ ๋  ๋˜ ๋‹ค๋ฅธ ํ”ผํ‚ค์— ์ž˜ ์ ์šฉ์‹œ์ผœ๋ณด์ž.

๐Ÿ“’ ์ฐธ๊ณ  ๊ธ€

Brad Frost์˜ ๊ฐœ๋…์ ์ธ ๋‚ด์šฉ์— Danilo Woznica์˜ ๊ธ€์„ ์ฐธ๊ณ ์—์„œ ๊ฐœ๋ฐœ์— ํ•„์š”ํ•œ ๊ตฌ์ฒด์ ์ธ ๋‚ด์šฉ์„ ๋‹ด์•„๋ณด์•˜๋‹ค.

โš›๏ธ Atomic Design Pattern

Atomic Design helps to build consistent, solid and reusable design systems.

์ด ๊ฐœ๋ฐœ ๋ฐฉ์‹์€ ์‚ฌ์‹ค ๊ฐœ๋ฐœ์—๋งŒ ์ ์šฉ๋˜๋Š” ๊ฐœ๋…์ด ์•„๋‹ˆ๋ผ ๋””์ž์ธ์—๋„ ์ ์šฉ๋˜๋Š” ์„ค๊ณ„ ํŒจํ„ด์ด๋‹ค.

๋ง ๊ทธ๋ž˜๋„ ์ž‘์€ ๋‹จ์œ„์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์žฌ์‚ฌ์šฉ์„ฑ์ด ๊ฐ•ํ•˜๊ณ , ๋‹จ๋‹จํ•˜๊ฒŒ ์ž˜ ์„ค๊ณ„ํ•จ์œผ๋กœ์„œ ์ ์ง„์ ์œผ๋กœ ์ง€์†์ ์œผ๋กœ ๊ฐœ๋ฐœํ•˜๊ธฐ ์šฉ์ดํ•˜๊ฒŒ ํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค.

์›น ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ์— ๊ฐ€์žฅ ๋งŽ์ด ์“ฐ์ด๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์ธ Vue, React ๋ชจ๋‘ ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋กœ ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด๋Ÿฌํ•œ ์ปดํฌ๋„ŒํŠธ ์ค‘์‹ฌ ์„ค๊ณ„ ํŒจํ„ด์ด ๋”์šฑ ์ฃผ๋ชฉ ๋ฐ›๊ฒŒ ๋˜์—ˆ๋‹ค.(Flutter ๋˜ํ•œ ๋งˆ์ฐฌ๊ฐ€์ง€์ด๋‹ค!)

๊ทธ๋ ‡๋‹ค๋ฉด ๊ฐ ์ปดํฌ๋„ŒํŠธ์˜ ์—ญํ• ์€ ๋ฌด์—‡์ด๊ณ  ๊ตฌ์ฒด์ ์œผ๋กœ ์–ด๋–ค ๋ถ€๋ถ„์— ์ง‘์ค‘ํ•ด์„œ ๊ฐœ๋ฐœํ•ด์•ผ ํ• ์ง€ ๋ณด๋„๋ก ํ•˜์ž.

๐Ÿ… Atom(์›์ž)

  • #Generic #Abstract
  • ์›์ž์€ ์ง„์งœ ๋ง๊ทธ๋Œ€๋กœ ๊ฐ€์žฅ ์ž‘์€ ๋‹จ์œ„์˜ ์ปดํฌ๋„ŒํŠธ์ด๋‹ค.
  • ์›์ž๋Š” ์–ด๋– ํ•œ context๊ฐ€ ์ฃผ์–ด์ง€๋“ ์ง€ ์ด์— ํ•ด๋‹นํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ƒ์„ฑ๋  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค.
  • ๋•Œ๋ฌธ์— ๋‹ค์–‘ํ•œ state๋ฅผ ๋‹ค์–‘ํ•˜๊ฒŒ ๊ฐ€์ง€๊ณ  ์žˆ์–ด์•ผํ•˜๋ฉฐ ์ถ”์ƒ์ ์ด์ง€๋งŒ ์ตœ๋Œ€ํ•œ ํฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์–ด์•ผ ์„ค๊ณ„ ๋˜์–ด์•ผ ํ•œ๋‹ค. Ex) button: disabled, hover, different sizes, etc.
  • ์›์ž๋Š” ๋งˆ์ง„์ด๋‚˜ ์œ„์น˜๊ฐ’์„ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š๋Š”๋‹ค.

๐Ÿฅซ Molecule(๋ถ„์ž)

  • #LittleComplex
  • ์›์ž๋ฅผ ์—ฎ์–ด ์กฐ๊ธˆ ๋ณต์žกํ•œ ๋‹จ์œ„์˜ ๋ถ„์ž๊ฐ€ ์ƒ์„ฑ๋œ๋‹ค.
  • ๋ถ„์ž๋Š” ๋ถ„์ž๋งŒ์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์„ ์ˆ˜ ์žˆ๊ณ  ์ด๋ฅผ ํ™œ์šฉํ•ด ์›์ž์— ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค์–ด ์ค„ ์ˆ˜๋„ ์žˆ๋‹ค.
  • ๋ถ„์ž๊ฐ€ ์›์ž์˜ ์œ„์น˜๊ฐ’์„ ์ง€์ •ํ•˜๊ธฐ๋„ ํ•œ๋‹ค.

๐Ÿ Organism(์œ ๊ธฐ์ฒด)

  • #MoreComplex
  • ์œ ๊ธฐ์ฒด๋Š” ๋ถ„์ž๋ฅผ ์—ฎ์–ด ๋งŒ๋“ค์–ด์„œ ์ƒ์„ฑ๋˜๊ณ  ๋•Œ๋กœ๋Š” ๋ถ„์ž๊ฐ€ ๋˜์ง€ ์•Š์€ ์›์ž๊ฐ€ ์—ฎ์ด๊ธฐ๋„ ํ•œ๋‹ค.
  • ์œ ๊ธฐ์ฒด๊ฐ€ ์™„์„ฑ๋˜๋ฉด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ตœ์ข… ๋ชจ์Šต์„ ๊ฐ€์ง€๊ฒŒ ๋œ๋‹ค.
  • ํ•˜์ง€๋งŒ ์—ฌ์ „ํžˆ contents์— ๋”ฐ๋ผ ์ตœ๋Œ€ํ•œ ์žฌ์‚ฌ์šฉ์„ฑ ๋†’๊ฒŒ ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค!
  • ์œ ๊ธฐ์ฒด๋Š” ๋ถ„์ž์™€ ์›์ž์˜ ์œ„์น˜๊ฐ’์„ ์กฐ์ •ํ•œ๋‹ค!

๐Ÿ“„ Template(ํ…œํ”Œ๋ฆฟ)

  • #Layout #NoStyling
  • ํ…œํ”Œ๋ฆฟ์€ ๋งŒ๋“ค์–ด์ง„ ์œ ๊ธฐ์ฒด์™€ ์ปดํฌ๋„ŒํŠธ์˜ positions, placements์„ ์ •ํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.
  • ๋‹จ, ํ…œํ”Œ๋ฆฟ์—๋Š” Styling์ด๋‚˜ Color๋Š” ๋“ค์–ด๊ฐ€์ง€ ์•Š๋Š”๋‹ค.
  • ํ…œํ”Œ๋ฆฟ์˜ ์—ญํ• ์€ ํŽ˜์ด์ง€์˜ ๊ทธ๋ฆฌ๋“œ๋ฅผ ์ •ํ•ด์ฃผ๋Š” ์—ญํ•  ๋ฟ์ด๋‹ค.

๐Ÿฑ Page(ํŽ˜์ด์ง€)

  • #Final
  • ํŽ˜์ด์ง€๋Š” ํ…œํ”Œ๋ฆฟ์„ ์ด์šฉํ•ด์„œ ๊ฐ ๊ทธ๋ฆฌ๋“œ์— ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ทธ๋ ค์„œ ๋””์Šคํ”Œ๋ ˆ์ดํ•œ๋‹ค.

๐Ÿค“ ํŠน์ง•

  • ๊ฐœ๋ฐœ๋งŒ ์ด๋ ‡๊ฒŒ ์ง„ํ–‰๋˜์„œ๋Š” ์•ˆ๋œ๋‹ค.(๋””์ž์ธ๋„ ์ด ์›์น™์— ๋งž์ถฐ์„œ ์ง„ํ–‰๋˜์–ด์•ผ ํ•œ๋‹ค!)
  • ์ž˜๋งŒ ๊ตฌํ˜„๋œ๋‹ค๋ฉด ๊ณ„์† ๊ฐ€์ ธ๋‹ค ์“ธ ์ˆ˜ ์žˆ๋Š” ์ •๋ง ์ข‹์€ Legacy Code๊ฐ€ ์ƒ๊ฒจ๋‚˜๊ฒŒ ๋œ๋‹ค!
  • ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ์Šคํ† ๋ฆฌ๋ถ์„ ํ•จ๊ป˜ ์ ์šฉํ•˜๊ฒŒ ๋˜๋ฉด ๋” ํฐ ํšจ๊ณผ๋ฅผ ๋‚ณ์„ ์ˆ˜ ์žˆ๋‹ค.
  • ์ดˆ๊ธฐ ๊ฐœ๋ฐœ ์‹œ๊ฐ„์ด ๊ธธ์ง€ ๋ชจ๋ฅด๊ธฐ๋งŒ ์ž‘์€ ๋‹จ์œ„์˜ Component๋ฅผ ์ž˜ ์„ค๊ณ„ํ•ด๋†“์œผ๋ฉด ์ค‘์žฅ๊ธฐ์ ์œผ๋กœ ๊ฐœ๋ฐœ ๊ธฐ๊ฐ„์„ ๋‹จ์ถ•ํ•  ์ˆ˜ ์žˆ๋‹ค ๐Ÿ˜Ž

๐Ÿ‘น ์ ์šฉ๊ธฐ

๊ตฌ์กฐ์™€ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์€ ๋น„์Šทํ–ˆ์œผ๋‚˜ ๋‚ด๋ถ€ ์ฝ”๋“œ๊ฐ€ ๋˜ฅ์ด ๋งŽ์•˜๋‹ค..๐Ÿ’ฉใ…‹ใ…‹

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋งŒ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋‹ˆ ์ปดํฌ๋„ŒํŠธํ™” ํ•˜๋Š”๋ฐ ์–ด๋ ค์›€์ด ์กฐ๊ธˆ ์žˆ์—ˆ๋‹ค.

์ด๋ฅผ ์œ„ํ•ด How I converted my React app to VanillaJS๋ฅผ ์ฐธ๊ณ  ํ–ˆ๋‹ค.

๋‹ค์Œ ํ”„๋กœ์ ํŠธ์—๋Š” css์™€ javascript์— ๋Œ€ํ•ด ์ข€๋” ๊ณต๋ถ€ํ•ด์„œ ๋‚ด๋ถ€ ์ฝ”๋“œ๋„ ์ž˜์งœ๋ด์•ผ๊ฒ ๋‹ค.

๐Ÿ“ฝ๏ธ ํ”„๋กœ์ ํŠธ ๊นƒํ—™ ๋ ˆํฌ์ง€ํ† ๋ฆฌ

[์šฐ์•„ํ•œํ…Œํฌ์บ ํ”„] ๋ฐฐ๋ฏผ์ƒํšŒ ํšŒ์›๊ฐ€์ž…/๋กœ๊ทธ์ธ ๊ตฌํ˜„ ํ”„๋กœ์ ํŠธ