Design System

Design System

์ปดํฌ๋„ŒํŠธ ์žฌ์‚ฌ์šฉ์ด ํ•„์š”ํ•œ ์‹œ์ 

  • ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‹ด๋‹นํ•˜๋Š” ์—ญํ• ์ด ๋งŽ์•„์ ธ ๊ณตํ†ต์˜ ์—ญํ• ์ด ๋˜๋Š” ๊ฒฝ์šฐ

  • ์—ฌ๋Ÿฌ ๊ตฌ์„ฑ์›์ด ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒฝ์šฐ

  • ๋™์ผํ•œ ๋กœ์ง์ด ์—ฌ๋Ÿฌ ์ฝ”๋“œ์— ๋“ค์–ด๊ฐ€๋Š” ๊ฒฝ์šฐ

์ปดํฌ๋„ŒํŠธ ์žฌ์‚ฌ์šฉ์ด ํ•„์š”ํ•œ ์‹œ์ ์€ ๊ทœ์น™์ด ๋˜์–ด์•ผ ํ•œ๋‹ค.

  • ๋™์ผํ•œ ์ฝ”๋“œ๊ฐ€ 2๊ตฐ๋ฐ/3๊ตฐ๋ฐ ์ด์ƒ ์žˆ๋Š” ๊ฒฝ์šฐ

  • ๊ด€์‹ฌ์‚ฌ๊ฐ€ ๋‘ ๊ฐœ ์ด์ƒ์ด ๋˜๋Š” ๊ฒฝ์šฐ

    • e.g. DatePicker (์บ˜๋ฆฐ๋”๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ์ปดํฌ๋„ŒํŠธ, ๋‚ ์งœ๋ฅผ ์„ ํƒํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ)

  • ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์— ๋ฆฌ์†Œ์Šค๊ฐ€ ๋งŽ์ด ๋“ค์–ด์žˆ๋Š” ๊ฒฝ์šฐ (์ฝ”๋“œ๋ฆฌ๋ทฐํ•˜๊ธฐ ๋ฒ…์ฐธ)

์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•œ ์‹œ์ ์— ์ปดํฌ๋„ŒํŠธ๋ฅผ ์žฌ์‚ฌ์šฉํ•˜๋Š” ๊ทœ์น™์ด ์žˆ์–ด์•ผ ํ•œ๋‹ค.

์ ์  ๋น„๋Œ€ํ•ด์ง€๋Š” ๊ณตํ†ต ์ฝ”๋“œ

  • ๊ณตํ†ต์˜ ๊ทœ์น™๋Œ€๋กœ ์ž‘์—…์„ ์ง„ํ–‰ํ•˜๋ฉด ๊ณตํ†ต ๋กœ์ง์ด ๋งŽ์•„์ง„๋‹ค.

  • ๊ณตํ†ต ๋กœ์ง์„ ์ž˜ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ํด๋”๋ง์„ ํ•˜๊ณ , ๊ทœ์น™์„ ๋งŒ๋“ค์–ด๋„ ํŒŒ์ผ์ˆ˜๊ฐ€ ์ ˆ๋Œ€์ ์œผ๋กœ ๋งŽ์•„์ง

  • ์ธ์›์ˆ˜์™€ ๋”๋ถˆ์–ด ๊ฐœ๋ฐœ ์—…๋ฌด๊ฐ€ ๋งŽ์•„์ง€๋ฉด์„œ, ํŒŒ์ผ์„ ์ˆ˜์ •ํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋Š˜์–ด๋‚˜๊ฒŒ ๋จ

๊ณตํ†ต ์ฝ”๋“œ์— ๋Œ€ํ•œ ๋ฒ„์ „ ๊ด€๋ฆฌ๊ฐ€ ํ•„์š”ํ•ด์ง€๋Š” ์‹œ์ 

  • ๊ณตํ†ต ์ฝ”๋“œ์— ๋Œ€ํ•œ ์˜์กด๋„๊ฐ€ ๋†’์•„์ง€๊ณ , ์‚ฌ์šฉ๋ฅ ์ด ํ”„๋กœ๋•ํŠธ ๋ณ„๋กœ ๋งŽ์•„์ง€๋Š” ์ƒํ™ฉ

  • ์ฝ”๋“œ ํ•œ ์ค„์„ ์ˆ˜์ •ํ•  ๋•Œ ์‚ฌ์ด๋“œ์ดํŽ™ํŠธ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋ฐœ์ƒํ• ์ง€ ๋ชจ๋ฆ„

  • ํ”„๋กœ๋•ํŠธ ๋ ˆ๋ฒจ์—์„œ ์‹ ๊ทœ ๋ฒ„์ „ ํ…Œ์ŠคํŠธ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋„๋ก ๋ฒ„์ „์„ ํ†ตํ•ด ํ•˜์œ„ํ˜ธํ™˜์„ฑ ์œ ์ง€ ํ•„์š”

์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ๋””์ž์ธ์‹œ์Šคํ…œ

  • ์ปดํฌ๋„ŒํŠธ(UI) ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

    • ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ค๊ณ , ํŒ€ ๊ฐ„์˜ ํ˜‘์—…์„ ๊ฐ„์†Œํ™”ํ•˜์—ฌ, ์ œํ’ˆ์˜ UI๋ฅผ ๋น ๋ฅด๊ฒŒ ๊ตฌ์ถ•ํ•˜๋Š”๋ฐ ๋„์›€์ด ๋จ

    • UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๊ตฌ์ฒด์ ์ธ ์ฝ”๋“œ๋ฅผ ํฌํ•จํ•˜๋Š”, ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI ์ปดํฌ๋„ŒํŠธ๋“ค์˜ ๋ชจ์Œ

      • ์‹ค์ œ ๊ฐœ๋ฐœ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฒ„ํŠผ, ์ž…๋ ฅ ํผ ๋“ฑ์˜ ๊ตฌํ˜„์ฒด

    • "๊ณตํ†ต์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„"๋กœ "๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌํ™” ํ•˜์—ฌ ๋ฒ„์ „ ๊ด€๋ฆฌ"๊ฐ€ ๋˜๋Š” ๊ฒƒ์„ ํ‘œํ˜„

  • ๋””์ž์ธ ์‹œ์Šคํ…œ

    • ๋ธŒ๋žœ๋“œ์™€ ์ œํ’ˆ์˜ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๊ณ , ํŒ€ ๊ฐ„ ํ˜‘์—…์„ ํ–ฅ์ƒ์‹œ์ผœ ๋” ๋น ๋ฅด๊ณ  ํšจ๊ณผ์ ์œผ๋กœ UI๋ฅผ ๋””์ž์ธํ•˜๊ณ  ๊ตฌ์ถ•ํ•˜๋Š”๋ฐ ๋„์›€์ด ๋จ

    • ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š”๋ฐ ํ•„์š”ํ•œ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์ •์˜ํ•˜๋Š” ํฌ๊ด„์ ์ธ ๋ฌธ์„œ์™€ ๊ฐ€์ด๋“œ๋ผ์ธ ์ง‘ํ•ฉ

      • ์ปดํฌ๋„ŒํŠธ, ํŒจํ„ด, ๋””์ž์ธ ์›์น™, ์‚ฌ์šฉ ๊ฐ€์ด๋“œ๋ผ์ธ, ํˆด, ์Šคํƒ€์ผ ๊ฐ€์ด๋“œ ๋“ฑ

    • ๋‹ค์–‘ํ•œ ํ”„๋กœ๋•ํŠธ์—์„œ ๋””์ž์ธ ์ฒ ํ•™์„ ๋ฐ”ํƒ•์œผ๋กœ ์‹œ๊ฐ์ ์ธ ์š”์†Œ๋ฅผ ๋ธŒ๋žœ๋”ฉ ๊ฐ€์น˜์™€ ํ•จ๊ป˜ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ์‹œ์Šคํ…œ

      • ๋‹จ์ˆœํžˆ "์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„"๊ฐ€ ์•„๋‹Œ, "์‹œ์Šคํ…œ ๋‹จ์œ„" ์ด๋ฉฐ

        • ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋””์ž์ธ์‹œ์Šคํ…œ์˜ ํ•œ ๋ถ„๋ฅ˜

        • ํ•œ ์กฐ์ง์ด ๋””์ž์ธ๊ณผ ๊ฐœ๋ฐœ์„ ์—ฎ์–ด ์ผ๊ด€์ ์ธ UX๋ฅผ ์ œ๊ณตํ•˜๋Š” ์‹œ์Šคํ…œ/์กฐ์ง๊ตฌ์กฐ

์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๊ฐœ๋ฐœ์— ํ•œ์ •์ ์ด๋ผ๋ฉด, ๋””์ž์ธ ์‹œ์Šคํ…œ์€ ๋” ํฐ ๋ฒ”์œ„

์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ œ์ž‘ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ

  • ๋‹จ์ˆœ ์ฝ”๋“œ ๋ ˆ๋ฒจ์—์„œ์˜ ์žฌ์‚ฌ์šฉ์„ ์ปค๋ฒ„ํ•˜๊ธฐ ์œ„ํ•œ ์ •์ฑ…์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ

  • ๋น ๋ฅด๊ฒŒ ๊ฐœ๋ฐœํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ

๋””์ž์ธ ์‹œ์Šคํ…œ์„ ์ œ์ž‘ ํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ

  • ๋†€๋ž๊ฒŒ๋„ ๋””์ž์ธ์‹œ์Šคํ…œ์„ ์ œ์ž‘ํ•ด์•ผํ•˜๋Š” ์ด์œ ๋Š” ์—†๋‹ค.

  • ๋””์ž์ธ ์กฐ์ง๊ณผ ๊ฐœ๋ฐœ ์กฐ์ง์ด ๋Œ€๊ธฐ์—… ์ˆ˜์ค€์ด๊ณ  ๋ชจ๋‘๋ฅผ ์ปค๋ฒ„ํ•˜๋Š” ์•„ํ‚คํ…์ฒ˜๊ฐ€ ํ•„์š”ํ•œ ๊ฒฝ์šฐ

  • ๊ทธ๋ ‡์ง€ ์•Š๋‹ค๋ฉด ๋””์ž์ธ ์‹œ์Šคํ…œ์€ ์˜คํžˆ๋ ค ๋…์ด๋ฉฐ, ๋ˆ์„ ๋‚ญ๋น„ํ•˜๋Š” ํ˜•ํƒœ๊ฐ€ ๋  ํ™•๋ฅ ์ด ๋†’์Œ

  • ๋˜ํ•œ ๋น„์ฆˆ๋‹ˆ์Šค์˜ ํž˜์ด ๋„ˆ๋ฌด ๋ง‰๊ฐ•ํ•˜์—ฌ ์˜คํžˆ๋ ค ์—ญ๊ด€๊ณ„๊ฐ€ ๋˜์–ด ์‹œ์Šคํ…œ์ด ๋˜์ง€ ์•Š์„์ˆ˜๋„ ์žˆ๋‹ค.

  • ์œ„์˜ ๋Œ€๋žต์ ์ธ ์ด์•ผ๊ธฐ๋ฅผ ์ปค๋ฒ„ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๊ฐœ๋ฐœํ•˜๋Š”๊ฒŒ ์ข‹๋‹ค.

์ค‘์š”ํ•œ๊ฑด ๋Œ€์„ธ๋ฅผ ๋”ฐ๋ฅธ๋‹ค๊ณ  ๋””์ž์ธ์‹œ์Šคํ…œ์„ ์Šคํƒ€ํŠธ์—…์—์„œ ๊ฐœ๋ฐœํ•˜์ง€ ๋ง ๊ฒƒ์„ ์ถ”์ฒœ

๋น„์ฆˆ๋‹ˆ์Šค ๋ชฉํ‘œ๋ฅผ ์ด๋ฃจ๊ธฐ ์œ„ํ•ด ๋””์ž์ธ์‹œ์Šคํ…œ์ด ์žˆ๋Š”๊ฒƒ์ด์ง€ ๋น„์ฆˆ๋‹ˆ์Šค์—์„œ ๋””์ž์ธ์‹œ์Šคํ…œ ๋ˆˆ์น˜๋ฅผ ๋ณด๊ธฐ์œ„ํ•ด ๋””์ž์ธ์‹œ์Šคํ…œ์ด ์žˆ๋Š”๊ฒŒ ์•„๋‹ˆ๋‹ค.

๋””์ž์ธ ์‹œ์Šคํ…œ์— ๊ธฐ๋Œ€ํ•˜๋Š” ๊ฒƒ

ํ˜•ํƒœ (style)

  • ํ˜•ํƒœ์—๋Š” ์ •๋‹ต์ด์—†๋‹ค.

  • ํŒ€์˜ ์ƒํ™ฉ์ด๋‚˜ ๊ฐœ๋ฐœ ํŽธ์˜์„ฑ์— ๋”ฐ๋ผ ์–ธ์ œ๋“ ์ง€ ๋‹ฌ๋ผ์ง

  • ์ œ์•ฝ๊ณผ ์ž์œ ๋กœ์›€ ์ค‘ ์ ์ ˆํ•จ์„ ์ฐพ์•„์•ผ ํ•œ๋‹ค.

์ œ์•ฝ๋œ ์Šคํƒ€์ผ (Constrain)

  • ๊ทœ์น™์ด ์ •ํ•ด์ ธ์žˆ์–ด ์›ํ•˜๋Š” ๊ฐ’๋งŒ ๋„˜๊ธฐ๋ฉด ์•Œ์•„์„œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‚˜์˜ค๋Š” ํ˜•ํƒœ

  • ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฝ์ง€๋งŒ, ๋ชจ๋“  ์ผ€์ด์Šค์— ๋Œ€ํ•ด ๋Œ€์‘ํ•˜๊ธฐ ๋นก์…ˆ

์ž์œ ๋กœ์šด ์Šคํƒ€์ผ (Custom)

  • ํ•ฉ์„ฑ(์ปดํŒŒ์šด๋“œ) ํŒจํ„ด์„ ํ†ตํ•œ ์ปดํฌ๋„ŒํŠธ ์กฐํ•ฉ์œผ๋กœ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ์‹

  • ๋‹ค์–‘ํ•œ ์ผ€์ด์Šค์— ๋Œ€ํ•ด ๋Œ€์‘ํ•˜๊ธฐ ์‰ฝ์ง€๋งŒ ์‚ฌ์šฉํ•˜๊ธฐ ๋นก์…ˆ

ํƒ€ ์„œ๋น„์Šค ๋””์ž์ธ ์‹œ์Šคํ…œ ๋‘˜๋Ÿฌ๋ณด๊ธฐ

๋””์ž์ธ์‹œ์Šคํ…œ ๊ตฌ์กฐ

๋””์ž์ธ์‹œ์Šคํ…œ ๊ตฌ์กฐ๋Š” ํฌ๊ฒŒ 8๊ฐ€์ง€ ๊ตฌ์กฐ๋กœ ๋‚˜๋ˆŒ์ˆ˜ ์žˆ๋‹ค.

์›์น™ (Principles)

  • ๋””์ž์ธ๊ณผ ๊ฐœ๋ฐœ์— ๋Œ€ํ•œ ํ•ต์‹ฌ ๊ฐ€์น˜ ๋ฐ ์ง€์นจ

  • ๋””์ž์ธ๊ณผ ๊ด€๋ จ๋œ ์ง€์นจ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ESLint, CSS ๋ฐ Naming ๊ทœ์น™, ํ…Œ์ŠคํŠธ ๋“ฑ ๊ธฐ์ˆ ์ ์ธ ๊ทœ์น™๋„ ์ด์— ํฌํ•จ๋จ

ํ…Œ๋งˆ (Theming)

  • ์ƒ‰์ƒ, ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ, ๊ทธ๋ฆฌ๋“œ, ์ŠคํŽ˜์ด์‹ฑ ๋“ฑ๊ณผ ๊ฐ™์€ ๊ธฐ๋ณธ ๋””์ž์ธ ์š”์†Œ์— ๋Œ€ํ•œ ์ง€์นจ

  • ๋””์ž์ธ์‹œ์Šคํ…œ์˜ ํ† ๋Œ€๊ฐ€ ๋˜๋Š” ๋ถ€๋ถ„์ด๋ผํ•ด์„œ ํŒŒ์šด๋ฐ์ด์…˜(Foundation)์ด๋ผ ๋ถ€๋ฅด๊ธฐ๋„ ํ•œ๋‹ค.

์ปดํฌ๋„ŒํŠธ (Components)

  • ๋ฒ„ํŠผ, ์ž…๋ ฅ ํผ, ๋ชจ๋‹ฌ ๋“ฑ๊ณผ ๊ฐ™์€ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI ์š”์†Œ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

  • ๊ฐ ์ปดํฌ๋„ŒํŠธ๋Š” ์‚ฌ์šฉ ๋ฐฉ๋ฒ•, ๋ชฉ์ , UI, ๋™์ž‘์— ๋Œ€ํ•ด ๋ฌธ์„œ์™€ ํ•จ๊ป˜ ์ œ๊ณต๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Œ

ํŒจํ„ด (Patterns)

  • ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฒฐํ•ฉํ•˜์—ฌ ๋งŒ๋“ค์–ด์ง„ ๋ณต์žกํ•œ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ์š”์†Œ

  • ex: ๊ฒ€์ƒ‰ ํผ, ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฉ”๋‰ด, ๋ฐ์ดํ„ฐ ํ…Œ์ด๋ธ”, ์˜ต์…˜ ํ•„ํ„ฐ ๋“ฑ์ด ํŒจํ„ด์— ํ•ด๋‹น๋œ๋‹ค.

๋„๊ตฌ ๋ฐ ์œ ํ‹ธ๋ฆฌํ‹ฐ

  • ๋””์ž์ธ์‹œ์Šคํ…œ์„ ์‹ค์ œ ์ œํ’ˆ์— ํ†ตํ•ฉํ•˜๊ธฐ ์œ„ํ•œ ๋„๊ตฌ์™€ ํ”Œ๋Ÿฌ๊ทธ์ธ

  • CSS Framework, ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ๋””์ž์ธ ํˆด ํ”Œ๋Ÿฌ๊ทธ์ธ ๋“ฑ

    • ex: Chakra UI, Radix UI, Panda CSS

๋ฌธ์„œํ™” (Documentation)

  • ๋””์ž์ธ์‹œ์Šคํ…œ์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ• ๋“ฑ

  • ๋ฒ„ํŠผ ์ปดํฌ๋„ŒํŠธ๋Š” ์–ด๋–ค ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์ „๋‹ฌ๋ฐ›์„ ์ˆ˜ ์žˆ๊ณ  ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์ง€๋Š”์ง€ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ ๋“ฑ

  • Storybook, Nextra

๊ฐ€์ด๋“œ๋ผ์ธ[์ง€์นจ ๋ฐ ๊ถŒ์žฅ์‚ฌํ•ญ] (Guidelines)

  • ์ข‹์€ ์‚ฌ์šฉ์„ฑ, ์ ‘๊ทผ์„ฑ ๋“ฑ์˜ ๊ฐ€์ด๋“œ์™€ ๊ถŒ์žฅ์‚ฌํ•ญ ๋“ฑ

  • ์›น ํ‘œ์ค€์„ฑ

ํ”„๋กœ์„ธ์Šค ๋ฐ ์›Œํฌํ”Œ๋กœ์šฐ

  • ๋””์ž์ธ์‹œ์Šคํ…œ ์—…๋ฐ์ดํŠธ, ํ™•์žฅํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•œ ํ”„๋กœ์„ธ์Šค

  • ์ƒˆ๋กœ์šด ์ปดํฌ๋„ŒํŠธ๋‚˜ ์Šคํƒ€์ผ์„ ๋””์ž์ธ ์‹œ์Šคํ…œ์— ์ถ”๊ฐ€ํ•˜๋ ค๋Š” ๊ฒฝ์šฐ ๊ฒ€ํ†  ๋ฐ ์Šน์ธ๋“ฑ์˜ ํ”„๋กœ์„ธ์Šค๊ฐ€ ๊ตฌ์ถ•๋˜์–ด์žˆ์–ด์•ผ ํ•จ์„ ์˜๋ฏธ

์œ ์ € ์‹œ๋‚˜๋ฆฌ์˜ค

๋””์ž์ธ์‹œ์Šคํ…œ ์ฒดํฌํฌ์ธํŠธ

  1. ๋””์ž์ด๋„ˆ์™€ ๊ฐœ๋ฐœ์ž๊ฐ„์˜ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ๋น„์šฉ์ด ๊ฐœ๋ฐœ๋น„์šฉ๋ณด๋‹ค ํฌ๊ฒŒ ๋“œ๋Š” ๊ฒฝ์šฐ

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

  3. ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ „๋ฌธ์ ์œผ๋กœ ์œ ์ง€๋ณด์ˆ˜ํ•  ์ธ๋ ฅ(๋ฆฌ์†Œ์Šค)๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ

  4. ๋ธŒ๋žœ๋”ฉ ์ฒ ํ•™์ด ์žˆ์–ด ๋””์ž์ธ์— ํ•ด๋‹น ์ฒ ํ•™์ด ๋…น์•„๋“ค์–ด๊ฐ€์•ผํ•˜๋Š” ๊ฒฝ์šฐ

  5. ์ด๋ฏธ ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ˜น์€ ๋น„์Šทํ•œ ๊ฒƒ์„ ์‹œ๋„ํ•ด๋ณธ ๊ฒฝํ—˜์ด ์žˆ๋Š” ๊ฒฝ์šฐ

OR ์กฐ๊ฑด์ด ์•„๋‹Œ AND ์กฐ๊ฑด, ์•„๋‹ˆ๋ผ๋ฉด ๋””์ž์ธ ์‹œ์Šคํ…œ์€ ์‹œ๋„ํ•˜์ง€ ๋ง๊ธฐ๋ฅผ?

๋””์ž์ธ์‹œ์Šคํ…œ์œผ๋กœ ๊ฐ€๋Š” ์ฒซ ๋ฒˆ์งธ ๊ฑธ์Œ

๋””์ž์ธ์‹œ์Šคํ…œ์„ ๊ฐœ๋ฐœํ•  ๋•Œ ๊ณ ๋ฏผํ•ด์•ผํ•˜๋Š” ๋‘ ๊ฐ€์ง€

  1. ๋””์ž์ธ์‹œ์Šคํ…œ ๊ฐœ๋ฐœ์ž

    1. ๊ฐœ๋ฐœ์ž

    2. ๋””์ž์ด๋„ˆ

  2. ๋””์ž์ธ์‹œ์Šคํ…œ ์‚ฌ์šฉ์ž

    1. ๊ฐœ๋ฐœ์ž

    2. ๋””์ž์ด๋„ˆ

    3. PM

๋””์ž์ธ์‹œ์Šคํ…œ์„ ๊ตฌ์ถ•ํ•˜๊ธฐ ์ „, ๋ช…์‹ฌํ•ด์•ผ ํ•  ์‚ฌํ•ญ

๋””์ž์ธ์‹œ์Šคํ…œ์„ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ์€ ํฌ๊ฒŒ ์„ธ ๋ถ„๋ฅ˜๋กœ ๋‚˜๋‰จ

  • ์ฒซ ๋ฒˆ์งธ๋กœ ๋””์ž์ธ์‹œ์Šคํ…œ์„ ์ด์šฉํ•ด ๊ฐœ๋ฐœํ•˜๋Š” ๊ฐœ๋ฐœ์ž

  • ๋‘ ๋ฒˆ์งธ๋กœ ๋””์ž์ธ์‹œ์Šคํ…œ์„ ์ด์šฉํ•ด ๋””์ž์ธํ•˜๋Š” ๋””์ž์ด๋„ˆ

  • ๋งˆ์ง€๋ง‰์œผ๋กœ ๋””์ž์ธ์‹œ์Šคํ…œ์„ ์ด์šฉํ•ด ๊ธฐํš์„ ๋งŒ๋“œ๋Š” PM

๋””์ž์ธ์‹œ์Šคํ…œ์€ ์„ธ ๊ฐ€์ง€ ๋ฐฉํ–ฅ์„ฑ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ณ ๋ฏผํ•ด์•ผ ํ•œ๋‹ค.

๋””์ž์ธ์‹œ์Šคํ…œ ๊ฐœ๋ฐœ์ž์™€ ๋””์ €์ด๋„ˆ ์ž…์žฅ์—์„œ๋งŒ ๊ณ ๋ฏผํ•˜๊ฒŒ ๋˜๋ฉด ์•ˆ๋œ๋‹ค.

๋””์ž์ธ์‹œ์Šคํ…œ ์‚ฌ์šฉ์ž ๊ด€์ ์—์„œ ๊ณ ๋ฏผํ•ด๋ณด๊ธฐ

  • ๋””์ž์ธ์‹œ์Šคํ…œ ์ ์šฉ์ด ํ•„์š”ํ•œ ์•ฑ/์›น ์ปค๋ฒ„๋ฆฌ์ง€ ์‚ดํŽด๋ณด๊ธฐ

  • ์–ด๋–ค ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ค ๊ณ ํ†ต์„ ๊ฒช๊ณ  ์žˆ๋Š”๊ฐ€

    • ์–ด๋–ค ๊ณ ํ†ต์„ ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ•ด์ฃผ์–ด์•ผ ๋น ๋ฅด๊ฒŒ ํ•ด๊ฒฐ์ด ๋˜๋Š”๊ฐ€

  • ๊ณ ํ†ต์„ ๊ฒช๋Š” ๊ฐœ๋ฐœ์ž/๋””์ž์ด๋„ˆ/PM์˜ ๊ด€์ ์—์„œ ๊ณ ๋ฏผํ•ด๋ณด๊ธฐ

    • ํ”ผ๊ทธ๋งˆ ๋“ฑ์˜ ๋””์ž์ธ ํˆด์—์„œ ํ˜‘์—…์ด ํ•ด๊ฒฐ๋œ๋‹ค๋ฉด ์‹ค์ œ ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ตฌ์ถ•ํ•˜์ง€ ์•Š์•„๋„ ๋œ๋‹ค.

  • ์‹œ์ž‘๋ถ€ํ„ฐ ์—„์ฒญ๋‚œ ๊ฒƒ์„ ๋งŒ๋“œ๋ ค๊ณ  ์‹œ์Šคํ…œ์„ ๊ฒฌ๊ณ ํ•˜๊ฒŒ ์„ค๊ณ„ํ•˜์ง€ ๋ง๊ธฐ

    • ์‹œ์Šคํ…œ์€ ์ ์ง„์ ์œผ๋กœ ์ปค๊ฐ€๋Š” ๊ฒƒ, ์ฒ˜์Œ๋ถ€ํ„ฐ ๋ชจ๋“  ์‹œ์Šคํ…œ์„ ์„ค๊ณ„ํ•˜๋ ค๊ณ  ํ•˜์ง€ ๋ง๊ณ  ํ•„์š”ํ•œ ๋ถ€๋ถ„ ๋ถ€ํ„ฐ

์˜ˆ์‹œ 1) ๋””์ž์ธ์ด ์ž์ฃผ ๋ณ€๊ฒฝ ๋˜์–ด์„œ ๊ฐœ๋ฐœ์ด ๋”ฐ๋ผ๊ฐ€๊ธฐ ํž˜๋“ค์–ด์š”

  • ๋””์ž์ธ์—์„œ ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒƒ์ด ์–ด๋–ค ๋‹จ์œ„์ธ์ง€ ์ฒดํฌ ํ•„์š”

    • ์ƒ‰์ƒ, ๊ฐ„๊ฒฉ ๋“ฑ์˜ atomicํ•œ ์š”์†Œ์ธ์ง€

      • ์ƒ‰์ƒ, ๊ฐ„๊ฒฉ ๋“ฑ์˜ ์š”์†Œ๋ฅผ ํ”ผ๊ทธ๋งˆ์—์„œ ๋ถ„๋ฆฌํ•˜์—ฌ ๊ณตํ†ต์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์ œ๊ณต

    • ๋ ˆ์ด์•„์›ƒ์˜ ์กฐํ•ฉ(ํŒจํ„ด)์ด ๋งŽ์•„์ง€๋Š” ๊ฒƒ์ธ์ง€

      • ๋ ˆ์ด์•„์›ƒ์˜ ์กฐํ•ฉ์ด ๋งŽ์•„์ง„๋‹ค๋ฉด ์—ฌ๋Ÿฌ ์ตœ์†Œํ™”๋œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ„๋ฆฌํ•˜๊ณ , ์กฐํ•ฉ๊ณผ ๋ ˆ์ด์–ด๋ฅผ ๋‘”๋‹ค.

    • ๋””์ž์ธ ํˆด์˜ ์—ฌ๋Ÿฌ ๊ธฐ๋Šฅ์„ ์ฒดํฌ (e.g. ํ”ผ๊ทธ๋งˆ)

      • Variable

      • Dev Mode

      • Custom Plugins

์˜ˆ์‹œ 2) ๋””์ž์ธ์„ ๊ฐœ๋ฐœ์—์„œ ๊ฐœ๋ฐœํ•  ๋•Œ ์‹ฑํฌ๊ฐ€ ์•ˆ๋งž๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๋‹ค.

  • ๋””์ž์ธ๊ณผ ๊ฐœ๋ฐœ์˜ ์›ํ™œํ•œ sync-up์„ ์œ„ํ•ด ์ž๋™ํ™”ํ•  ์ˆ˜ ์žˆ๋Š” ์—ฌ์ง€๋ฅผ ์ฒดํฌํ•˜๊ธฐ

    • ๋””์ž์ธ ํˆด์—์„œ ์ œ๊ณตํ•ด์ฃผ๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ ๊ธฐ๋Šฅ ์ฒดํฌ

    • "์ฝ”์–ด"์™€ "์ปดํฌ๋„ŒํŠธ"๋ฅผ ๋ถ„๋ฆฌํ•˜๊ธฐ

      • "์ฝ”์–ด"๋ฅผ "๊ฐ’" ๋‹จ์œ„๋กœ ๋งŒ๋“ค์–ด์„œ ์ž๋™์œผ๋กœ ์ถ”์ถœํ•  ์ˆ˜ ์žˆ๋„๋ก ์ œ๊ณตํ•˜๊ธฐ

      • e.g.) ์‹คํ–‰์‹œ๋งˆ๋‹ค ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์„œ ๊ธฐ์กด ๊ฐ’์„ ๋ฎ์–ด์“ฐ๊ธฐ

    • ๋ฐฐํฌ๋  ๋•Œ ์ตœ์ข…์ ์œผ๋กœ validation ํ•˜๋Š” ์Šคํฌ๋ฆฝํŠธ ์งœ๊ธฐ

    • ํˆด ๋“ฑ์—์„œ ๋ฒ„์ „๊ด€๋ฆฌ๊ฐ€ ๋  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๊ธฐ

์˜ˆ์‹œ 3) ์ปดํฌ๋„ŒํŠธ๋Š” ์ž˜ ๋ถ„๋ฆฌ๋˜์–ด ์žˆ๋Š”๋ฐ ๊ธฐํš์„œ๋ž‘ ์ •์ฑ…์ด ์ถฉ๋Œ์ด ์ผ์–ด๋‚œ๋‹ค.

  • ๊ธฐํš์„œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” PM์ด ํ”„๋ฆฌ๋ทฐ๋‚˜ ์ •์ฑ…์„ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ๋„ํ๋จผํŠธ ์ œ๊ณตํ•˜๊ธฐ

    • Docusaurus, Nextra ๋“ฑ ํ˜„์žฌ ์ŠคํŽ™์— ๋งž๋Š” ๊ฐ„๋‹จํ•œ ๋ฌธ์„œ ์ œ๊ณต

    • ์ด๋ฅผ ๊ฐ€์ด๋“œ๋ผ์ธ์ด๋ผ๊ณ  ์ œ๊ณตํ•˜์—ฌ, ํ”Œ๋ ˆ์ด๊ทธ๋ผ์šด๋“œ ์ œ๊ณต

      • ํ•ด๋‹น ํ”Œ๋ ˆ๊ธฐ์œผ๋ผ์šด๋“œ๋กœ PM์ด ์Šคํฌ๋ฆฐ์ƒท ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ์ œ๊ณต

    • PM์ด ๋””์ž์ธ ํˆด๊นŒ์ง€ ๋‹ค๋ฃจ๋Š” ๊ฒฝ์šฐ ์›์ž๋‹จ์œ„ ์ปดํฌ๋„ŒํŠธ ์ œ๊ณต X

      • ์ถฉ๋Œ์ด ๋งŽ์ด ๋ฐœ์ƒํ•˜๊ธฐ ๋•Œ๋ฌธ

      • ์กฐํ•ฉ๋œ ์ปดํฌ๋„ŒํŠธ๋งŒ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๊ธฐ

๋””์ž์ธ์‹œ์Šคํ…œ์œผ๋กœ ๊ฐ€๋Š” ๋‘ ๋ฒˆ์งธ ๊ฑธ์Œ

๋””์ž์ธ์‹œ์Šคํ…œ์€ ํ˜„์žฌ ๋น„์ฆˆ๋‹ˆ์Šค ์ƒํ™ฉ์— ๋”ฐ๋ผ ๊ฐœ๋ฐœ ๋ฐฉ๋ฒ•๋ก  ๋ถ€ํ„ฐ ๋ฆฌ์†Œ์Šค ์‚ฌ์šฉ ๋ฐฉํ–ฅ๊นŒ์ง€ ๋ชจ๋‘ ๋‹ค๋ฅผ ์ˆ˜๋ฐ–์— ์—†๋‹ค.

  1. ํƒ‘ ๋‹ค์šด์ด ๊ฐ•์ œ๋œ ์กฐ์ง์˜ ๊ฒฝ์šฐ

    1. ๋น„์ฆˆ๋‹ˆ์Šค ์กฐ๊ฑด ์ƒ ์ˆ˜์ต์„ ์˜ฌ๋ฆฌ๊ธฐ ์œ„ํ•œ ์ƒ์œ„์˜ ๊ฒฐ์ •๋Œ€๋กœ ์›€์ง์—ฌ์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ

  2. ์• ์ž์ผ ์กฐ์ง์˜ ๊ฒฝ์šฐ

    1. ๋ชฉ์  ๋‹จ์œ„๋กœ ์„ฑ๊ณผ๋ฅผ ์ด๋ฃจ๊ธฐ ์œ„ํ•œ ํŒ€ ๋‹จ์œ„๋กœ ๋น ๋ฅด๊ฒŒ ์›€์ง์ด๋Š” ๊ฒฝ์šฐ

๋น„์ฆˆ๋‹ˆ์Šค ์ƒํ™ฉ์— ๋”ฐ๋ฅธ ๋””์ž์ธ์‹œ์Šคํ…œ์˜ ๋‹ˆ์ฆˆ

  • ์กฐ์ง๋งˆ๋‹ค ๋‹ค๋ฅธ ๋น„์ฆˆ๋‹ˆ์Šค ๊ฐœ๋ฐœ์˜ ํ˜•ํƒœ, ๋””์ž์ธ์‹œ์Šคํ…œ์ด ๋น„์ฆˆ๋‹ˆ์Šค ํ˜•ํƒœ์— ์–ด๋–ค ์˜ํ–ฅ์„ ๋ผ์น˜๋Š”์ง€ ์•Œ์•„์•ผ ํ•œ๋‹ค.

    • ํ˜„์žฌ ๋น„์ฆˆ๋‹ˆ์Šค ํ˜•ํƒœ์— ๋”ฐ๋ผ ๋””์ž์ธ์‹œ์Šคํ…œ์˜ ์ปค๋ฒ„๋ฆฌ์ง€๊ฐ€ ๋„“์–ด์งˆ์ˆ˜๋„ ์žˆ๊ณ  ์ข์•„์งˆ ์ˆ˜๋„ ์žˆ๊ธฐ ๋•Œ๋ฌธ

์‚ฌ๋ก€ 1. ํƒ‘ ๋‹ค์šด์ด ๊ฐ•์กฐ๋œ ์—…๋ฌด ํ˜•ํƒœ ์ƒํ™ฉ

์ƒ์œ„ ํ˜น์€ ์‚ฌ์—…์˜ ์—…๋ฌด ์š”๊ตฌ -> PM/PO์˜ ์ •๋ฆฌ ๋ฐ ๊ธฐํš์„œ ์ž‘์„ฑ -> ๋””์ž์ธ -> ๊ฐœ๋ฐœ -> ์™„๋ฃŒ

๊ฐœ๋ฐœ: ์—ฌ๋Ÿฌ ์ƒํ™ฉ์„ ์ปค๋ฒ„ํ•  ์ˆ˜ ์žˆ๋Š” ๋””์ž์ธ ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์ค‘์š”์„ฑ ๋Œ€๋‘

๋””์ž์ธ: ์ƒ์œ„์˜ ์—ฌ๋Ÿฌ ์š”๊ตฌ์‚ฌํ•ญ์„ ์ปค๋ฒ„ํ•˜๋ฉฐ ๋””์ž์ธ ์ผ๊ด€์„ฑ์„ ๊ฐ€์ง„ ๋””์ž์ธ์‹œ์Šคํ…œ์˜ ํ•„์š”

PM: ์ƒ์œ„ ์˜์‚ฌ๊ฒฐ์ •์„ ๋น ๋ฅด๊ฒŒ ์ •๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ์—ฌ๋Ÿฌ ๋„๊ตฌ์˜ ํ•„์š”

์ƒ์œ„์˜ ์˜์‚ฌ๊ฒฐ์ •์ด ๋น ๋ฅด๊ณ  ๋นˆ๋ฒˆํ•˜๊ฒŒ ์ผ์–ด๋‚จ์— ๋”ฐ๋ผ UX/UI๋ฅผ ํ†ต์ผํ•˜๋ฉด์„œ ์†๋„๋ฅผ ๋‚ผ ์ˆ˜ ์žˆ๋Š” ๋ฌด์–ธ๊ฐ€๊ฐ€ ํ•„์š”

์‚ฌ๋ก€ 2. ์• ์ž์ผ ํ˜•ํƒœ์˜ ๋ชฉ์ ์„ ํ•ด๊ฒฐํ•˜๋Š” ์กฐ์ง

ํ•ด๋‹น ์กฐ์ง์˜ ๊ฒฝ์šฐ ์กฐ์ง ๋‚ด์˜ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ๋ณด๋‹จ, ์ „์‚ฌ์ ์ธ ๋ฌธ์ œ์ ์„ ๋ฐ”ํ…€์—…ํ•ด์„œ ์ •์ œํ•˜๊ณ  ํ•ด๊ฒฐ์„ ์œ„ํ•œ ๊ฒฐ์ •์ด ๋˜์—ˆ์„ ํ™•๋ฅ ์ด ๋†’๋‹ค.

๋ชฉ์ ์„ ๋น ๋ฅด๊ฒŒ ๋‹ฌ์„ฑํ•˜๊ธฐ ์œ„ํ•œ ์ค‘์•™ํ™”๋œ ์‹œ์Šคํ…œ์— ๋Œ€ํ•œ ๋‹ˆ์ฆˆ๋กœ ๊ฒฐ์ •์ด ๋˜์—ˆ์„ ๊ฒƒ ํ•ด๋‹น ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ์• ์ž์ผ ์กฐ์ง์ด ๋งˆ๋ จ๋˜๊ณ  ์‹œ์Šคํ…œ ๊ณ ๋„ํ™” ์ง„ํ–‰

๋น ๋ฅด๊ฒŒ ๋Œ์•„๊ฐ€๋Š” ์—ฌ๋Ÿฌ ์• ์ž์ผ ์กฐ์ง์—์„œ์˜ ๊ณตํ†ต ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ์ค‘์•™ํ™”๋œ ๋””์ž์ธ์‹œ์Šคํ…œ ํ•„์š”

Last updated