์ฝ๋Š” ๋””์ž์ธ ๋””๋…
๋””์ž์ธ ์‹œ์Šคํ…œ ๋ฌธ์„œ ๋งŒ๋“ค๊ธฐ 1ํŽธ
โšก๏ธ์š”์•ฝ
๋””์ž์ธ ์‹œ์Šคํ…œ ๋ฌธ์„œํ™”์— ๋Œ€ํ•œ ๊ธ€. ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ์ž‘์—…์ž๋“ค์ด ๋ณด๊ธฐ ํŽธํ•œ ํ˜•ํƒœ์˜ ์ฝ˜ํ…์ธ ๋กœ ๊ฐ€๊ณตํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ด์•ผ๊ธฐํ•ฉ๋‹ˆ๋‹ค. 1)์˜ค๋””์–ธ์Šค, 2)์ „๋‹ฌํ•  ์ฝ˜ํ…์ธ , 3)์ฝ˜ํ…์ธ  ๋ถ„๋ฐฐ ๊ตฌ์กฐ์— ๋Œ€ํ•ด ๊ณ ๋ คํ•ด์•ผ ํ•  ์ ๋“ค์„ ๊ฐœ๊ด„์ ์œผ๋กœ ์งš์–ด์ฃผ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ“– ๋ชฉ์ฐจ
  1. ์„œ๋ก 
  2. ์˜ค๋””์–ธ์Šค
  3. ์ฝ˜ํ…์ธ 
  4. ํŽ˜์ด์ง€ ๊ตฌ์กฐ ์„ค๊ณ„

์‹œ์Šคํ…œ ์˜ค๋””์–ธ์Šค์—๊ฒŒ ์ž˜ ๊ตฌ์กฐํ™”๋œ ์ฝ˜ํ…์ธ  ์ „๋‹ฌํ•˜๊ธฐ

#์ปดํฌ๋„ŒํŠธ ๋ฌธ์„œํ™” 7๊ฐœ ์‹œ๋ฆฌ์ฆˆ ์ค‘ ์ฒซ ๋ฒˆ์งธ ์ฝ˜ํ…์ธ ์ž…๋‹ˆ๋‹ค.


๊ณ ํ€„๋ฆฌํ‹ฐ ์ปดํฌ๋„ŒํŠธ ๋ฌธ์„œ๋Š” ํšจ์œจ์ ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋งŒ๋“ค์–ด์ค€๋‹ค. ์šฐ๋ฆฌ๋Š” ํšจ์œจ์ ์ธ ๋””์ž์ธ ์˜์‚ฌ ๊ฒฐ์ •๊ณผ ๋น ๋ฅธ ๊ฐœ๋ฐœ์— ์ดˆ์ ์„ ๋งž์ถ”์–ด, UI ์ปดํฌ๋„ŒํŠธ๋“ค์„ ์—„๊ฒฉํ•˜๊ฒŒ ์ •์˜ํ•œ๋‹ค. ์ข‹์€ ๋ฌธ์„œ๋Š” ๊ณต์งœ๋กœ ์–ป์„ ์ˆ˜ ์—†๋‹ค. ์ฐจ๋ณ„์ ์„ ์ง€๋‹ˆ๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ข‹์€ ์‚ฌ๋ก€์™€ ๊ฐ€์ด๋“œ๋ผ์ธ์„ ๋งŒ๋“œ๋Š” ๊ณ„ํš, ๋…ธ๋ ฅ ๊ทธ๋ฆฌ๊ณ  ๊ณผ์ •์„ ๋“ค์—ฌ์•ผ ํ•œ๋‹ค.

์ด์ œ๋ถ€ํ„ฐ, ์ด 6๊ฐœ์˜ ์•„ํ‹ฐํด ์ปฌ๋ ‰์…˜์€ ์ปดํฌ๋„ŒํŠธ ๋ฌธ์„œํ™”์— ๋Œ€ํ•œ ์ด์•ผ๊ธฐ๋ฅผ ์ „๋ฐ˜์ ์œผ๋กœ ํ›‘์–ด๋ณผ ๊ฒƒ์ด๋‹ค. ์˜ค๋””์–ธ์Šค, ์ฝ˜ํ…์ธ , ๊ทธ๋ฆฌ๊ณ  ๊ตฌ์กฐ ์ „๋žต๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๊ณ ์ž ํ•œ๋‹ค. ๊ทธ ๋‹ค์Œ์—๋Š”, ์•„ํ‹ฐํด๋งˆ๋‹ค ์†Œ๊ฐœ, ์‚ฌ๋ก€, ๋””์ž์ธ/์ฝ”๋“œ ๊ฐ€์ด๋“œ ๊ทธ๋ฆฌ๊ณ  ๊ณผ์ •์„ ํฌํ•จํ•œ ๊ฒฐ๋ก ์— ๋Œ€ํ•ด ๋‹ค๋ฃฐ ์˜ˆ์ •์ด๋‹ค. ๋‚ด๊ฐ€ ๋ช‡ ๋…„ ๊ฐ„ ์ตํ˜€์˜ค๊ณ , ์š”์ฆ˜๊นŒ์ง€๋„ ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ๊ณต์œ ํ•˜๋ฉฐ ์–ป๊ณ  ์žˆ๋Š” ์˜๊ฐ๋“ค์„ ์Šต๋“ํ•  ์ˆ˜ ์žˆ๋Š” ํŒ๋“ค์„ ์ œ๊ณตํ•  ๊ฒƒ์ด๋‹ค.

๋จผ์ €, ์งˆ๋ฌธ์œผ๋กœ ์ด ๊ธ€์„ ์‹œ์ž‘ํ•ด๋ณด์ž. : ์ด ๋ฌธ์„œ์˜ ์˜ค๋””์–ธ์Šค๋Š” ๋ˆ„๊ตฌ์ด๋ฉฐ, ๊ทธ๋“ค์ด ์›ํ•˜๋Š” ์ฝ˜ํ…์ธ ๋Š” ๋ฌด์—‡์ด๋ฉฐ, ๊ทธ๊ฒƒ์„ ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•ด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํŽ˜์ด์ง€๋ฅผ ์ตœ์ ์œผ๋กœ ๊ตฌ์กฐํ™”ํ•  ์ˆ˜ ์žˆ์„๊นŒ?


1. ์˜ค๋””์–ธ์Šค
๊ฐ€์žฅ ๋จผ์ € ๊ณ ๋ คํ•ด์•ผ ํ•  ๊ฒƒ : ๋ˆ„๊ตฌ๋ฅผ ์œ„ํ•œ ๊ฒƒ์ธ๊ฐ€? ์ด์— ๋Œ€ํ•œ ๋Œ€๋‹ต์€ ๋ณดํ†ต ํ•˜๋‚˜๊ฐ€ ์•„๋‹ํ…๋ฐ, ์–ด๋Š ์ชฝ์ด ๋” ์ค‘์š”ํ•œ๊ฐ€?

1) ์—”์ง€๋‹ˆ์–ด, ๋””์ž์ด๋„ˆ, ๊ทธ๋ฆฌ๊ณ  ๋ชจ๋“  ์‚ฌ๋žŒ๋“ค!
๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์ฝ”๋“œ๋ฅผ ์ œ๊ณตํ•œ๋‹ค๋ฉด, ์˜ค๋””์–ธ์Šค๋Š” ๋‹น์—ฐํžˆ ์—”์ง€๋‹ˆ์–ด์ด๋‹ค. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์ฝ”๋“œ๋กœ๋งŒ ๊ตฌ์„ฑ๋˜์–ด์žˆ๋‹ค๋ฉด, ๊ทธ ๋ฌธ์„œ๊ฐ€ ๋””์ž์ด๋„ˆ์—๊ฒŒ ์ œ๊ณต๋˜์–ด์•ผ ํ•  ํ•„์š”๊ฐ€ ์žˆ์„๊นŒ? ๋ฌธ์„œ์— ์ฝ”๋“œ ์—†์ด ๋””์ž์ธ ๊ฐ€์ด๋“œ๋งŒ ์žˆ๋‹ค๋ฉด(์˜ˆ: ๊ตฌ๊ธ€ ๋จธํ„ฐ๋ฆฌ์–ผ), ์—”์ง€๋‹ˆ์–ด๊ฐ€ ๋ณผ ํ•„์š”๊ฐ€ ์žˆ์„๊นŒ?

๋ฌผ๋ก  ๋‘ ๊ฒฝ์šฐ ๋ชจ๋‘ ํ‹€๋ฆฐ ๋‹ต์€ ์•„๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ ๋ฌธ์„œ๋Š” ํ•ญ์ƒ ๋‘ ์˜ค๋””์–ธ์Šค ๋ชจ๋‘๋ฅผ, ๋‹ค์–‘ํ•œ ๊ฐ๋„์—์„œ ๊ณ ๋ คํ•ด์•ผ ํ•œ๋‹ค.

ํ•˜์ง€๋งŒ ๊ทธ ์™ธ์—, ๋˜ ๋ˆ„๊ฐ€ ์žˆ์„๊นŒ? ํŠนํžˆ ์‹œ์Šคํ…œ์ด ๊ณง ํŒ€์ด ์ผํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์ด์–ด์ง€๋Š” ๊ฒฝ์šฐ์— ๋ง์ด๋‹ค. ํŒŒ์›Œํ’€ํ•˜๊ณ , ๊ฐ„๊ฒฐํ•œ ์ธํŠธ๋กœ๋Š” PM์„ ๊ฐ๋™ํ•˜๊ฒŒ ๋งŒ๋“ ๋‹ค. ์‚ฌ๋ก€๋Š” QA ์ „๋ฌธ๊ฐ€๋“ค์—๊ฒŒ ์ ์ ˆํ•œ ์ƒํƒœ๋ฅผ ๋…ธ์ถœํ•œ๋‹ค. ์Šคํƒ€์ผ, ํŒจํ„ด(behavior), ํŽธ์ง‘ ๋ฌธ์ œ๋Š” ๋ฆฌ์„œ์ฒ˜์™€ ์ฝ˜ํ…์ธ  ์ „๋žต๊ฐ€ ๊ฐ™์€ ์‚ฌ๋žŒ์—๊ฒŒ ๋ฐฉํ–ฅ์„ ์ œ์‹œํ•œ๋‹ค. ์‚ฌ์šฉ์„ฑ ์ „๋ฌธ๊ฐ€๋Š” ๊ทธ๋“ค์ด ํ•ด์˜ค๋˜ ์ผ์„ ํ•˜๋Š” ๊ฑฐ๊ณ .

๋งŽ์€ ์‹œ์Šคํ…œ ํŒ€์€ ๊ทธ๋“ค์ด ๋งŒ๋“  ์‹œ์Šคํ…œ์„ ์™ธ๋ถ€์— ๊ณต๊ฐœ์ ์œผ๋กœ ๋ณด์ด๋„๋ก ๋ฐฐํฌํ•˜๊ธฐ๋„ ํ•œ๋‹ค. ๋ณธ์งˆ์ ์œผ๋กœ๋Š” ๊ณต์œ ๋ฅผ ์œ„ํ•จ์ด์ง€๋งŒ, ์ถ”๊ฐ€์ ์œผ๋กœ๋Š” ์‚ฌ์ดํŠธ๋ฅผ ์ฑ„์šฉ ์ˆ˜๋‹จ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•จ๋„ ์žˆ๋‹ค. ์‹œ์Šคํ…œ์€ ๋†’์€ ํ€„๋ฆฌํ‹ฐ, ๊ธฐ์ˆ ๋ ฅ๊ณผ ํ˜‘์—…๋ ฅ, ์ž˜ ์ •๋ฆฌ๋œ ์‚ฌ๋ก€๋“ค์„ ๋ณด์—ฌ์ฃผ์–ด, ์žฌ๋Šฅ ์žˆ๋Š” ์‹ ์ž… ์‚ฌ์›์ด ํšŒ์‚ฌ์—์„œ ๊ฐ•์ ์„ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค.

๋ฌธ์„œ์˜ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๋ชฉ์ ์€ ์ด๊ฒƒ์ด๋‹ค. : ์ „๋ฌธ๊ฐ€๋“คใ…ก์—”์ง€๋‹ˆ์–ด, ๋””์ž์ด๋„ˆ, ๊ด€๋ จ๋œ ๋ชจ๋“  ์‚ฌ๋žŒ๋“คใ…ก์ด ์‹œ์Šคํ…œ์„ ํšจ๊ณผ์ ์ด๊ณ  ํšจ์œจ์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ฌด์žฅ์‹œํ‚ค๋Š” ๊ฒƒ. ์‹œ์Šคํ…œ์ด ์„ฑ์žฅํ• ์ˆ˜๋ก, ๋‹ค์–‘ํ•œ ๋‹ˆ์ฆˆ์™€ ์žฆ์€ ์‚ฌ์šฉ ๋นˆ๋„์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๋งŽ์€ ๊ฒƒ๋“ค์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋‹ค.

2) ์—”์ง€๋‹ˆ์–ด, ๊ทธ ๋‹ค์Œ ๋””์ž์ด๋„ˆ, ๊ทธ ๋‹ค์Œ ๋‚˜๋จธ์ง€ ์‚ฌ๋žŒ๋“ค
๋ชจ๋“  ์‚ฌ๋žŒ์—๊ฒŒ ์ œ๊ณตํ•œ๋‹ค๋Š” ๊ฒŒ ๋ชจ๋‘ ๋˜‘๊ฐ™์ด ์ œ๊ณตํ•œ๋‹ค๋Š” ๋œป์€ ์•„๋‹ˆ๋‹ค. ์—”์ง€๋‹ˆ์–ด๋Š” ํ•˜๋ฃจ์— ๋ฌธ์„œ๋ฅผ 5๋ฒˆ, 10๋ฒˆ, ํ˜น์€ ๊ทธ ์ด์ƒ ๋“ค์—ฌ๋‹ค๋ณธ๋‹ค. ์ฝ”๋“œ ์—๋””ํ„ฐ ์˜†์— ํ•ญ์ƒ ๋„์›Œ์ ธ์žˆ์„ ์ˆ˜๋„ ์žˆ๋‹ค! ๋””์ž์ด๋„ˆ๋Š” ์ด๊ฒƒ์ €๊ฒƒ ๋น„๊ตํ•˜๋ฉด์„œ ๊ฐ€๋” ์„ธ๋ถ€์‚ฌํ•ญ์„ ๋ฐ˜์˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ๊ทธ๋ณด๋‹ค๋Š” ์ข€ ๋” ์ ๊ฒŒ ๋ฐฉ๋ฌธํ•  ๊ฒƒ์ด๋‹ค. ์ฝ˜ํ…์ธ  ์ „๋žต๊ฐ€๋‚˜ ๋ฆฌ์„œ์ฒ˜๋Š” ์˜์‚ฌ ๊ฒฐ์ • ํ•  ๋•Œ์—๋งŒ ์•„์ฃผ ๊ฐ€๋”์”ฉ ๋ฐฉ๋ฌธํ•  ๊ฒƒ์ด๋‹ค.

์ž, ๊ทธ๋Ÿผ ๋ˆ„๊ฐ€ ๊ฐ€์žฅ ์ค‘์š”ํ• ๊นŒ? ๋‚ด ๊ฒฝํ—˜์ƒ์œผ๋กœ ์‹œ์ž‘์ ์€ ๋งค์šฐ ๋ถ„๋ช…ํ•˜๋‹ค. : ์‹œ์Šคํ…œ์€ ์—”์ง€๋‹ˆ์–ด์™€ ๋””์ž์ด๋„ˆ์˜, ์— ์˜ํ•ด, ๋ฅผ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ ธ์•ผ ํ•œ๋‹ค. ๋ฌผ๋ก  ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค๋„ ์˜ค๋””์–ธ์Šค ์ค‘ ํ•˜๋‚˜๊ฐ€ ๋  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ด์ ์„ ์–ป๊ฒ ์ง€๋งŒ ๋””์ž์ด๋„ˆ์™€ ์—”์ง€๋‹ˆ์–ด์— ๋น„ํ•ด์„œ๋Š” ๋œ ์ค‘์š”ํ•˜๋‹ค. ๋ถ€์ฐจ์ ์ธ ์˜ค๋””์–ธ์Šค๋ฅผ ์ฑ™๊ธฐ๋Š” ๊ฒƒ์€ ์–ด์ฉŒ๋ฉด ํŠธ๋ ˆ์ด๋“œ ์˜คํ”„์™€๋„ ๊ฐ™๋‹ค. ์—”์ง€๋‹ˆ์–ด์™€ ๋””์ž์ด๋„ˆ๋ฅผ ์ค‘์š”ํ•˜๊ฒŒ ์ƒ๊ฐํ•˜์ง€ ์•Š๋Š” ๊ฑด ๋ฌธ์ œ๋‹ค. ์ง„์งœ ํฐ ๋ฌธ์ œ.

์—”์ง€๋‹ˆ์–ด VS ๋””์ž์ด๋„ˆ๋Š” ์–ด๋–จ๊นŒ? ๋‚ด๊ฐ€ ์ž‘์—…ํ–ˆ๋˜ ๋ชจ๋“  ์‹œ์Šคํ…œ์€ ๋””์ž์ธ๊ณผ ์ฝ”๋“œ ๋ชจ๋‘๋ฅผ ์ œ๊ณตํ–ˆ๋‹ค. ๋‚ด๊ฐ€ ๋‹ค๋ฅธ ์กฐ์ง์—์„œ ๋ดค๋˜ ๋ช‡๋ช‡ ๋ฌธ์„œ๋Š” ๊ฐ๊ฐ์—๊ฒŒ ๊ฐ•ํ•˜๊ฒŒ ํŽธ์ค‘๋˜์–ด์žˆ๊ฑฐ๋‚˜, ๋”ฐ๋กœ ๋…ธ๋Š” ๋ชฉ์ ์„ฑ์„ ๋„๊ณ  ์žˆ์—ˆ๋‹ค(์ด ๋ถ€๋ถ„์€ ๋‹ค์Œ์— ๋” ์–˜๊ธฐํ•˜๊ธฐ๋กœ). ์‹œ์Šคํ…œ์„ ๋งŒ๋“ค ๋•Œ์—๋Š” ๋งŽ์€ ๊ด€์ ์—์„œ ๊ณ ๋ คํ•ด์•ผ ํ•œ๋‹ค. : ๋งŒ๋“œ๋Š” ๋ชฉ์ , ์‚ฌ์šฉ ๋นˆ๋„, ์ฝ˜ํ…์ธ  ๋Ž์Šค, ํ€„๋ฆฌํ‹ฐ, ์ฝ˜ํ…์ธ  ์ƒ์‚ฐ ๋น„์šฉ, ์—…๋ฌด ์—ฐ๊ด€๋„ ๊ฐ™์€ ๊ฒƒ๋“ค.

๋‚˜๋Š” ๋””์ž์ด๋„ˆ๋‹ค. ๋™์‹œ์— ํ”„๋กœ๊ทธ๋ž˜๋จธ์ด๊ธฐ๋„ ํ•˜๋‹ค. ์•„๋ฌด ๋งฅ๋ฝ ์—†๋Š” ์ƒํƒœ์—์„œ ๋‘˜ ์ค‘์— ํ•˜๋‚˜๋ฅผ ๊ณ ๋ฅด๋ผ๋ฉด, ์—”์ง€๋‹ˆ์–ด์ชฝ์„ ์„ ํ˜ธํ•˜๋Š” ํŽธ์ด๋‹ค. ์ด๋ฏธ ์ฝ”๋“œ๋กœ ๊ตฌํ˜„๋œ ์˜์‚ฌ ๊ฒฐ์ •์„ ๋‘๊บผ์šด ๊ฐ€์ด๋“œ๋ถ์œผ๋กœ ์ฝ๊ณ  ์žˆ๋Š” 50๋ช…์˜ ๋””์ž์ด๋„ˆ๋ณด๋‹ค ์ž˜ ๋””์ž์ธ๋œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ฝ”๋”ฉํ•˜๋Š” ์—”์ง€๋‹ˆ์–ด 50๋ช…์„ ๊ตฌํ•˜๋Š” ๊ฒƒ์ด ๊ฒฝํ—˜์„ ํšจ๊ณผ์ ์œผ๋กœ ๋นŒ๋”ฉํ•  ํ™•๋ฅ ์ด ๋†’๊ธฐ ๋•Œ๋ฌธ.
๋…ธํŠธ: ์˜ค๋””์–ธ์Šค ์šฐ์„ ์ˆœ์œ„๋Š” ๋‹ค์–‘ํ•œ ์š”์†Œ๋“ค์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง„๋‹ค. ๋””์ž์ด๋„ˆ์™€ ์—”์ง€๋‹ˆ์–ด๊ฐ€ ์ถฉ๋Œํ•  ๊ฒƒ์ด๋ผ๋Š” ๊ฑธ ์˜ˆ์ƒํ•˜๊ณ , ๊ทธ ๋‘˜์„ ์ตœ์ ํ™”ํ•˜๊ธฐ ์œ„ํ•œ ์‹œ๋„๋ฅผ ํ•ด์•ผ ํ•œ๋‹ค. ๊ทธ๋Ÿด ์ˆ˜ ์—†๋‹ค๋ฉด, ์ตœ์ข… ๊ฒฐ๊ณผ๋ฌผ์— ์ข€ ๋” ๊ฐ€๊นŒ์šด ์ˆ˜๋‹จ์„ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์„ ์œ„ํ•œ ๊ฒฐ์ •์„ ๋‚ด๋ ค์•ผ ํ•˜๋ฉฐ, ์ด๋Š” ๋Œ€๋ถ€๋ถ„ ์ฝ”๋“œ๋‹ค. ์ฆ‰, ์—”์ง€๋‹ˆ์–ด๊ฐ€ ๋จผ์ €๊ณ  ๋””์ž์ด๋„ˆ๋Š” ๊ทธ ๋‹ค์Œ์ด๋ผ๋Š” ๊ฒƒ.


2. ์ฝ˜ํ…์ธ 
์ปดํฌ๋„ŒํŠธ ๋ฌธ์„œ๋Š” ๋‹น์‹ ์ด ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋Š” ์ฝ˜ํ…์ธ ์™€ ์˜ค๋””์–ธ์Šค๋ฅผ ์—ฐ๊ฒฐํ•ด์ค€๋‹ค. ์ฝ˜ํ…์ธ ๋Š” ๋‹ค์–‘ํ•œ ํ˜•ํƒœ๋ฅผ ๊ฐ–์ถ”๊ณ  ์žˆ๊ณ , ๋ชจ๋‘ ๊ฐ™์€ ๋น„์šฉ์ด ๋“œ๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋ฉฐ ๊ทธ๊ฒƒ๋“ค์„ ํ•œ ๋ฐ ์—ฎ๋Š” ๊ฒƒ๋„ ๋‹น์‹ ์—๊ฒŒ ๋‹ฌ๋ ค์žˆ๋‹ค.

ํฌ๊ฒŒ ๋ณด๋ฉด, ์ปดํฌ๋„ŒํŠธ ๋ฌธ์„œ๋Š” ๋ณดํ†ต ๋‹ค์Œ ๋„ค ๊ฐ€์ง€ ์œ ํ˜•์„ ํฌํ•จํ•˜๊ณ  ์žˆ๋‹ค.
  • ์†Œ๊ฐœ: ์ปดํฌ๋„ŒํŠธ์˜ ์ด๋ฆ„๊ณผ ํ•ด๋‹น ์š”์†Œ์˜ ํ†ค์„ ์„ค์ •ํ•˜๋Š” ๊ฐ„๋‹จํ•œ ์„ค๋ช…. (ํ•„์ˆ˜)
  • ์‚ฌ๋ก€: ์ปดํฌ๋„ŒํŠธ์˜ ๋ฒ ๋ฆฌ์—์ด์…˜, ์ƒํƒœ ๋ฐ ๊ธฐํƒ€ ์ˆ˜์น˜๋ฅผ ๋‚˜ํƒ€๋‚ด๋ฉฐ, ์ •์ ์ธ ์ด๋ฏธ์ง€๋ณด๋‹ค๋Š” ์ฝ”๋“œ์™€ ๊ฒฐํ•ฉํ•˜์—ฌ ํ‘œ์‹œํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.
  • ๋””์ž์ธ ๋ ˆํผ๋Ÿฐ์Šค: ์–ธ์ œ ์‚ฌ์šฉํ•˜๋Š”์ง€์™€ Do&Don't, ๋น„์ฃผ์–ผ, ์ธํ„ฐ๋ž™์…˜, ์นดํ”ผ์— ๋Œ€ํ•œ ๊ฐ€์ด๋“œ๋ผ์ธ. (๊ถŒ์žฅ)
  • ์ฝ”๋“œ ๋ ˆํผ๋Ÿฐ์Šค: ๋””ํ…Œ์ผํ•œ ์ฝ”๋“œ API(Props๊ฐ™์€)์™€ ๋‹ค๋ฅธ ๋ณด์ถฉ ์„ค๋ช…. (์ฝ”๋“œ ์žˆ์„ ์‹œ ํ•„์ˆ˜)


1) ์ข…๋ฅ˜์— ๋”ฐ๋ฅธ ์ฝ˜ํ…์ธ  ์ œ์ž‘ ๋น„์šฉ ๋ณ€ํ™”
๊ฐ๊ฐ์— ๋“œ๋Š” ๋น„์šฉ์€ ์ฒœ์ฐจ๋งŒ๋ณ„์ด๋‹ค. ์†Œ๊ฐœ๋Š” ๋น ๋ฅด๊ณ  ๊ฐ€๋ฒผ์›Œ์•ผ ํ•˜๋ฉฐ, ํ•œ ๋‘ ๋ฌธ์žฅ์„ ์“ฐ๋Š” ๊ฒƒ์œผ๋กœ ์‚ฌ๋ก€๋ฅผ ๋Œ€์‹ ํ•œ๋‹ค. ์ž˜ ๊ตฌ์„ฑ๋œ ์‚ฌ๋ก€๋Š” ์‹œ๊ฐ„์ด ์ง€๋‚˜๋ฉด์„œ ์˜ˆ์ธก ๊ฐ€๋Šฅํ•˜๋„๋ก ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ ํ•„์ˆ˜์ ์ธ ํˆฌ์ž๋‹ค. ์ฝ”๋“œ ๋ ˆํผ๋Ÿฐ์Šค๋Š” ์—”์ง€๋‹ˆ์–ด๋“ค์ด ๋‹จ์ˆœ ๋นˆ์นธ ์ฑ„์šฐ๊ธฐ๋ฅผ ํ•ด์•ผ ํ•˜๋Š” ์ง€๋ฃจํ•œ ํ…œํ”Œ๋ฆฟ์ด ์žˆ์„ ๊ฒฝ์šฐ์—๋Š” ์ง๊ด€์ ์œผ๋กœ ๋“œ๋Ÿฌ๋‚˜์•ผ ํ•œ๋‹ค.

์ž ๊น, ์ˆจ์„ ํฌ๊ฒŒ ๋“ค์ด์‰ฌ์ž. ํšจ์œจ์ ์ธ ๋””์ž์ธ ๋ ˆํผ๋Ÿฐ์Šค๋Š” ๋งค์šฐ ๋น„์šฉ์ด ๋งŽ์ด ๋“ค๊ฑฐ๋‚˜, ๊ธฐ๋ณธ ์‚ฌํ•ญ๋งŒ ์ž‘์„ฑํ•˜๊ฑฐ๋‚˜, ์•„์˜ˆ ์ƒ๋žตํ•  ์ˆ˜๋„ ์žˆ๋‹ค. ๋””์ž์ธ ๋‚ด๋Ÿฌํ‹ฐ๋ธŒ๋Š” ์‹œ์Šคํ…œ์˜ ๋ชฉ์ ๊ณผ ํŒ€์˜ ์ผ€ํŒŒ์™€ ์—ญ๋Ÿ‰, ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ํ•„์š”์— ๋‹ฌ๋ ค์žˆ๋‹ค.
๋…ธํŠธ: ์ปดํฌ๋„ŒํŠธ ๋ฌธ์„œ๋Š” ๋„“์€ ๋ฒ”์œ„์˜ ์ฝ˜ํ…์ธ ๋ฅผ ํฌํ•จํ•œ๋‹ค. ๊ทธ๋Ÿฌ๋‹ˆ ํŒ€์˜ ๊ฐ€์น˜๋ฅผ ์ƒ๊ธฐํ•˜๊ธฐ ์œ„ํ•ด ์ƒ๋‹จ์—์„œ๋ถ€ํ„ฐ ๋…ผ์˜๋ฅผ ์‹œ์ž‘ํ•˜๊ณ , ๋””์ž์ด๋„ˆ์™€ ์—”์ง€๋‹ˆ์–ด๊ฐ€ ๊ตฌ๋ถ„๋˜๋Š”(์ฝ”๋“œ VS ๋””์ž์ธ ๋ ˆํผ๋Ÿฐ์Šค), ๊ฒน์ณ์ง€๋Š”(์ธํŠธ๋กœ), ํ˜น์€ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š”(๋„ค์ด๋ฐ๊ณผ ์ฝ˜ํ…์ธ , ์ˆœ์„œ ๋“ฑ์˜ ์‚ฌ๋ก€) authoring ์œ ํ˜•์— ๋Œ€ํ•ด ๋…ผ์˜ํ•˜์ž.



3. ํŽ˜์ด์ง€ ๊ตฌ์กฐ ์„ค๊ณ„
1) ๋””์ž์ธ&์ฝ”๋“œ: ๋ถ„์ ˆํ•˜๊ธฐ ์œ„ํ•จ์ธ๊ฐ€, ๊ฒฐํ•ฉํ•˜๊ธฐ ์œ„ํ•จ์ธ๊ฐ€?
์‹ค์ œ๋กœ, ์ปดํฌ๋„ŒํŠธ ๋ฌธ์„œ๋Š” ์˜๋„์ ์ธ ์„ ํƒ ๋ฐ ์–ด์ฉ” ์ˆ˜ ์—†๋Š” ์ œ์•ฝ ๋ชจ๋‘์—๊ฒŒ์„œ ๋‚˜์˜ฌ ์ˆ˜ ์žˆ๋‹ค. ์ข…์ข…, ์ปดํฌ๋„ŒํŠธ ๋ฌธ์„œ๋Š” ๋ถ„์ ˆ๋œ ์ฝ˜ํ…์ธ ๋กœ ๊ท€๊ฒฐ๋˜๊ณค ํ•œ๋‹ค.: ๋””์ž์ด๋„ˆ๋Š” ๋””์ž์ด๋„ˆ๋ฅผ ์œ„ํ•ด ๋ฐœํ–‰ํ•˜๊ณ , ์—”์ง€๋‹ˆ์–ด๋Š” ์—”์ง€๋‹ˆ์–ด๋ฅผ ์œ„ํ•ด ๋ฐœํ–‰ํ•˜๋Š” ์‹์œผ๋กœ... ์ด๋Ÿฌํ•œ ๋ถ„์ ˆ์€ ์–‘์ธก ๋ชจ๋‘์— ์‚ฌ๊ณ ๋ฅผ ์ผ์œผํ‚ฌ ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ, ์ปดํฌ๋„ŒํŠธ ํŽ˜์ด์ง€์˜ IA๋ฅผ ์ดˆ๋ฐ˜์— ๋…ผ์˜ํ•ด์•ผ ํ•œ๋‹ค.

๊ตฌ๊ธ€ ๋จธํ„ฐ๋ฆฌ์–ผ์˜ ๋ฌธ์„œ๋Š” ๋ถ„์ ˆ๋˜์–ด์žˆ๋‹ค. ๋จธํ„ฐ๋ฆฌ์–ผ์˜ ๋””์ž์ธ ํŒŒ์šด๋ฐ์ด์…˜์€ Material Design Lite์™€ Polymer Project๋ถ€ํ„ฐ ์•ˆ๋“œ๋กœ์ด๋“œ ๊ฐœ๋ฐœ์ž์˜ ๋””์ž์ธ ์„น์…˜๊ณผ Meterial UI(๋ฆฌ์•กํŠธ๋ฅผ ์œ„ํ•ด ์„ค๊ณ„๋œ)๊ฐ€ ๊ตฌํ˜„๋˜๊ธฐ ์ „์— ์ƒ๊ฒจ๋‚ฌ๋‹ค. ์ด๋Ÿฌํ•œ ๊ตฌํ˜„ ์‚ฌ๋ก€๋Š” ๊ทธ๋“ค์˜ ๋””์ž์ธ ์ƒ์œ„ ๊ฐœ๋…๊ณผ ๋Š์Šจํ•˜๊ฒŒ ์—ฐ๊ฒฐ๋˜์–ด์žˆ์œผ๋ฉฐ, ์ฝ”๋“œ์— ์ง€์žฅ์„ ์ฃผ์ง€ ์•Š๋Š” ์„ ์—์„œ๋งŒ ์œ ์ง€๋˜๊ณ  ์žˆ๋‹ค.

Google Material์€ Material Design, Material Design Lite, Material UI์˜ ๋ฐ๋ชจ์™€ API์— ๊ฑธ์ณ ๊ทธ๋“ค์˜ ์Šคํ† ๋ฆฌ๋ฅผ ๋ฟŒ๋ฆฌ๊ณ  ์žˆ๋‹ค.

์ด๋Ÿฌํ•œ ๋ถ„์ ˆ์€ ํ•„์ˆ˜์ ์ผ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ์˜๋ฏธ์žˆ๊ณ  ์ •๋‹นํ•œ ๋ฐฉ์‹์ด๊ธฐ๋„ ํ•˜๋‹ค. ์†”์งํžˆ Material์ด ๋ฟŒ๋ ค๋†“์€ ํ”„๋ ˆ์ž„์›Œํฌ, ํŒ€, ํ”Œ๋žซํผ์€ ํ˜„์กดํ•˜๋Š” ๋‹ค๋ฅธ ์–ด๋–ค ๋””์ž์ธ ์‹œ์Šคํ…œ๋ณด๋‹ค ์šฐ์ˆ˜ํ•˜๋‹ค. ํ•˜์ง€๋งŒ ์ฃผ์˜: ์šฐ๋ฆฌ๋Š” Google Material์ด ๋˜๋Š” ๊ฒƒ์„ ๋ชฉํ‘œ๋กœ ํ•˜๋Š” ๊ฒŒ ์•„๋‹ˆ๋‹ค!

๋‚˜๋จธ์ง€ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ๋Š”, ๋””์ž์ธ์€ ์—ฌ๊ธฐ์— ์žˆ๊ณ , ์—”์ง€๋‹ˆ์–ด๋ง์€ ์ €๊ธฐ์— ์žˆ๋Š” ์‹์ด ์ผ๋ฐ˜์ ์ด๋‹ค. ์ด๋Ÿฌํ•œ ๋ฐฉ์‹๋Š” ๊ฐ๊ฐ์˜ ์˜ค๋””์–ธ์Šค์˜ ๋ฆฌ๋”ฉ ๊ฒฝํ—˜์„ ๋ณ„๋„๋กœ ์ตœ์ ํ™”ํ•˜๋ฉด์„œ, ์ผ๊ด€์ ์ธ ๊ทœ์น™์„ ํ†ตํ•ด ๋‚ด์šฉ์— ์ง‘์ค‘์‹œํ‚จ๋‹ค.

์ปดํฌ๋„ŒํŠธ ๋””์ž์ธ ๊ฐ€์ด๋“œ์™€ ์ฝ”๋“œ&API ๋ฌธ์„œ๋Š” ๋ณ„๋„์˜ ์‚ฌ์ดํŠธ๋ฅผ ํ†ตํ•ด ๋Š์Šจํ•˜๊ฒŒ ์ง์ง€์–ด์ ธ์žˆ๋‹ค. ์‚ฌ๋ก€: Atlassian

๋””์ž์ธ/์ฝ”๋“œ๋ฅผ ๋ถ„๋ฆฌํ•˜๋Š” ๊ฒƒ์€ ๋ฆฌ์Šคํฌ๋ฅผ ๊ฐ€์ ธ์˜ค๊ธฐ๋„ ํ•œ๋‹ค. ์‹œ๊ฐ„์ด ์ง€๋‚˜๋ฉด, ์‚ฌ์ดํŠธ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฌธ์ œ์— ๋น ์ง€๊ฒŒ ๋œ๋‹ค.
  • ๋ถ„๋ฅ˜ ์ฒด๊ณ„ ๋ถ„๋ฆฌ(loader&spinner๊ฐ™์€ ์•„์ฃผ ๊ฐ„๋‹จํ•œ ์ด๋ฆ„์กฐ์ฐจ๋„)
  • ํ”ผ์ณ ๋ถ„๋ฆฌ: ๋””์ž์ธ์ด ์ฝ”๋“œ์—์„œ ๊ตฌํ˜„ํ•  ์ˆ˜ ์—†๋Š” ๋”ฅํ•œ ํ”ผ์ณ๊นŒ์ง€ ํ‘œํ˜„ํ•˜๊ฑฐ๋‚˜, ์ฝ”๋“œ๊ฐ€ ๋””์ž์ธ๋˜์ง€ ์•Š์€ ๊ฒฐ๊ณผ๋ฌผ์„ ๋งŒ๋“ค์–ด๋‚ด๊ฑฐ๋‚˜.

์„œ๋กœ ํ•ฉ์˜๋˜์ง€ ์•Š์•˜๋‹ค๋Š” ๋Š๋‚Œ ์ •๋„๋Š” ๊ดœ์ฐฎ๋‹ค. ์Šคํ† ๋ฆฌ๋ผ์ธ๋„ ๋ณ„๊ฐœ๊ณ . ๋ญ, ์ ์–ด๋„ ๊ฐ๊ฐ์˜ ์ž‘์—…์ž๋“ค์˜ ์›Œํฌํ”Œ๋กœ์šฐ์—๋Š” ์ผ๊ด€์ ์œผ๋กœ ์ œ๊ณต๋˜๊ณ  ์žˆ์œผ๋‹ˆ๊นŒ.

ํ•˜์ง€๋งŒ ์ด๊ฒƒ๋“ค์„ ์‹ค์ œ๋กœ ์ ์šฉํ•ด์•ผ ํ•˜๋Š” adopter๋“ค์€ ํ•˜๋‚˜๋กœ ํ†ต์ผ๋œ ์†Œ์Šค๋ฅผ ์›ํ•œ๋‹ค. ๋‘ ๊ฐ€์ง€ ๋ชจ๋‘์— ์—ญํ• ์ด ๋ถ„๋ฐฐ๋˜์–ด์žˆ๋Š” ์‚ฌ๋žŒ๋“ค์€ ํ…Œ๋‹ˆ์Šค ๊ณต์ฒ˜๋Ÿผ ์•ž๋’ค๋กœ ์™”๋‹ค๊ฐ”๋‹คํ•œ๋‹ค. ๋งˆ์น˜ adopter๋“ค์ด ์•Œ์•„์„œ ์งœ๋งž์ถฐ์•ผ ํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ, ๋šœ๋ ทํ•˜๊ฒŒ ์„ค๊ณ„๋œ ์œ ์šฉํ•œ ๋””ํ…Œ์ผ๋“ค์ด ์–‘์ธก ๋ชจ๋‘์— ์กด์žฌํ•œ๋‹ค.

๋…ธํŠธ: ๋””์ž์ธ๊ณผ ์ฝ”๋“œ๋ฅผ ๋‚˜๋ˆŒ ๋•Œ๋Š” ์ฃผ์˜ํ•˜์ž. ์ฒ˜์Œ์—๋Š” author๋“ค์—๊ฒŒ, ๋˜ ํผ๋ธ”๋ฆฌ์‹ฑํ•˜๊ธฐ์— ํŽธํ• ์ง€ ๋ชฐ๋ผ๋„, ์‹œ๊ฐ„์ด ์ง€๋‚˜๋ฉด ๊ทธ๋Ÿฌํ•œ ์ด์ต์„ ๋„˜์–ด์„œ๋Š” ๋ฆฌ์Šคํฌ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค. ์Œ๋‘ฅ์ด ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์€ ๋””์ž์ธ๊ณผ ์—”์ง€๋‹ˆ์–ด๋ง ๊ฐ„์˜ ๊ฑฐ๋ฆฌ๊ฐ์„ ํ™•์—ฐํ•˜๊ฒŒ ๋“œ๋Ÿฌ๋‚ผ ์ˆ˜๋„ ์žˆ๋‹ค.


2) ์Šค๋ ˆ๋“œ ์ฝ˜ํ…์ธ ์ธ๊ฐ€, ์Šคํƒ ํ˜น์€ ํƒญ์ธ๊ฐ€?
Morningstar Design System๊ฐ™์€ ๋‚ด๊ฐ€ ๋ช‡ ๋…„๊ฐ„ ๋ฆฌ๋“œํ•ด์˜จ ๋งŽ์€ ์‹œ์Šคํ…œ์—์„œ๋Š” ๋””์ž์ธ๊ณผ ์ฝ”๋“œ๋ฅผ ํ•จ๊ป˜ ์Šค๋ ˆ๋“œํ•˜์—ฌ ์ œ๊ณตํ•ด์™”๋‹ค. adopter๋“ค์€ ํ†ต์ผ๋œ ์ด๋ฆ„๊ณผ ๊ฐ€์ด๋“œ, ๋ฒ ๋ฆฌ์—์ด์…˜๊ณผ ํ”ผ์ณ๋ฅผ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ๋‚ด๋Ÿฌํ‹ฐ๋ธŒ๋ฅผ ์ฐพ์•„๋ณผ ์ˆ˜ ์žˆ๋‹ค.

๋””์ž์ธ๊ณผ ์ฝ”๋“œ ์ฝ˜ํ…์ธ ๋ฅผ ํ•œ ์Šคํฌ๋กค ๋‚ด์—์„œ ํ•จ๊ป˜ ์—ด๋žŒํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“  ์ปดํฌ๋„ŒํŠธ ๋ฌธ์„œ ํŽ˜์ด์ง€.(Morningstar Design System


์Šค๋ ˆ๋“œ ํ˜•์‹์œผ๋กœ ๊ตฌ์„ฑ๋œ ํŽ˜์ด์ง€๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฆฌ์Šคํฌ๋ฅผ ์ง€๋‹ˆ๊ณ  ์žˆ๋‹ค.: ๊ด€๋ จ๋œ ๋‹ค์–‘ํ•œ ์ฝ˜ํ…์ธ ๋ฅผ ์ œ๊ณตํ•จ์œผ๋กœ์จ ์Šคํฌ๋กค์ด ํ›จ์”ฌ ๊ธธ์–ด์ง„๋‹ค. ๋Œ€์•ˆ์œผ๋กœ์จ, ๋‹ค๋ฅธ ์‹œ์Šคํ…œ์€ ํƒญ ํ˜•ํƒœ์˜ ์†Œ๊ฐœ๋ฅผ ์ œ๊ณตํ•˜๊ธฐ๋„ ํ•œ๋‹ค.

๋…ธํŠธ: ๋””์ž์ธ๊ณผ ์ฝ”๋“œ๋ฅผ ํ•œ ๋ฐ ๋‘๋Š” ๊ฒƒ์€ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํŒ€์€ ๊ทธ๋“ค์˜ ์šฉ๋„์— ๋งž๋Š” UI๋ฅผ(์Šคํƒ, ํƒญ, ๊ทธ ์™ธ ๋‹ค๋ฅธ ๊ฒƒ๋“ค) ์„ ํƒํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋œ๋‹ค.


3) ์ฝ˜ํ…์ธ ๋ฅผ ํƒ€์ž…๋ณ„๋กœ ๊ทธ๋ฃนํ•‘ํ•˜๊ณ  ๋‚˜์—ดํ•˜๊ธฐ
์Šคํƒ์ด๋“  ํƒญ์ด๋“ , ๋‚˜๋Š” ์ผ๊ด€์ ์ธ ์ฝ˜ํ…์ธ  ์šฐ์„  ์ˆœ์œ„์™€ ๋‚˜์—ด ์ˆœ์„œ๋ฅผ ์ค‘์š”์‹œํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

(1) ์†Œ๊ฐœ
(2) ์‚ฌ๋ก€: ๊ฐ€์žฅ ์ค‘์š”ํ•˜๊ฒŒ ์ƒ๊ฐํ•˜๋Š” ใ…ก์ „๋ฉด, ๊ทธ๋ฆฌ๊ณ  ์ค‘์•™์— ๋‚ด๋†“๊ณ  ์‹ถ์€ ์ด์ƒ์ ์ธ ์ปดํฌ๋„ŒํŠธ
(3) ๋””์ž์ธ ๊ฐ€์ด๋“œ๋Š” ์‚ฌ๋ก€๋กœ ๋ง๋ถ™์—ฌ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์ฝ˜ํ…์ธ ๊ฐ€ ์ง€๋‚˜์น˜๊ฒŒ ๊ธธ์–ด์งˆ ์ˆ˜ ์žˆ๋‹ค.
(4) ์ฝ”๋“œ ๋ ˆํผ๋Ÿฐ์Šค๋Š” ์˜ˆ์ธก ๊ฐ€๋Šฅํ•˜๊ฒŒ ์„ค๊ณ„๋˜๊ณ  ๋ฏฟ์„๋งŒํ•˜๊ฒŒ ์ ์šฉ๋œ๋‹ค. ์—”์ง€๋‹ˆ์–ด๊ฐ€ ํŒ€ ๋‚ด์—์„œ ๊ฐ€์žฅ ์ค‘์š”ํ•˜๊ณ  ์šฐ์„ ๊ถŒ์„ ์ง€๋‹ˆ๊ณ  ์žˆ๋‹ค๋ฉด, ์ด ๋ ˆํผ๋Ÿฐ์Šค๋ฅผ ์ค‘์š”ํ•œ ์œ„์น˜์— ๋ฐฐ์น˜ํ•ด์•ผ ํ•œ๋‹ค.

์‚ฌ๋ก€ ๊ทœ์น™, ๊ทธ๋ฆฌ๊ณ  ๋”ฅํ•œ ๋””์ž์ธ๊ณผ ์ฝ”๋“œ ๋ ˆํผ๋Ÿฐ์Šค๋Š” ํด๋ฆญ ํ•œ ๋ฒˆ ์ •๋„์˜ ๊ธธ์ด๋ผ๋ฉด ๊ดœ์ฐฎ์„ ๊ฒƒ์ด๋‹ค. ํฅ๋ฏธ๋กญ๊ฒŒ๋„, ์—…๊ณ„์˜ ์‚ฌ๋ก€๋“ค์€ ์ผ๊ด€์„ฑ ์—†๋Š” ๋ผ๋ฒจ๊ณผ ๋‹ค์–‘ํ•œ ์ˆœ์„œ๋กœ ๋””์ž์ธ ๋ฐ ์ฝ”๋“œ์˜ ์ด๋ฆ„์„ ์ง€์ •ํ•˜๊ณ  ์šฐ์„  ์ˆœ์œ„๋ฅผ ์ •ํ•œ๋‹ค.

๋ถ„๋ฆฌ๋œ ์ฝ˜ํ…์ธ ๋Š” ์–ด๋–ค ์ฝ˜ํ…์ธ ๊ฐ€ ์šฐ์„  ์ˆœ์œ„์ธ์ง€ ํ‘œ๊ธฐํ•  ์ˆ˜ ์žˆ๋‹ค.: (์˜ˆ๋ฅผ ๋“ค๋ฉด) ์ฝ”๋“œ ๋จผ์ €, ๋””์ž์ธ ๋จผ์ €, ํ˜น์€ ์œ„ ์‚ฌ๋ก€์ฒ˜๋Ÿผ ๋ชจ๋‘ ํ•œ ํƒญ์— ๋ชฐ์•„๋‘๊ฑฐ๋‚˜

IBM Carbon์€ ์ฝ”๋“œ๋ฅผ ๊ฐ€์žฅ ์ค‘์š”์‹œํ•˜๊ณ  ๋””์ž์ธ ๋””ํ…Œ์ผ์„ ์šฉ๋ฒ•์ด๋‚˜ ์Šคํƒ€์ผ ๊ฐ™์€ ์ถ”๊ฐ€์ ์ธ ํƒญ์— ๋‚จ๊ฒจ๋‘”๋‹ค. Hudl's Uniform ์‹œ์Šคํ…œ์€ ์šฐ์„  ์ˆœ์œ„๋ฅผ ๋ฐ”๊พธ์–ด, ๋””์ž์ธ์„ ์ฝ”๋“œ ์•ž์— ๋‘๊ณ  ๋น„์Šทํ•˜์ง€๋งŒ ๋˜‘๊ฐ™์ง€๋Š” ์•Š์€ ๋‚ด์šฉ ๋ถ„๋ฅ˜ ๋ฐฉ์‹์„ ๊ฐ€์ง„ ๋‘ ๋ฒˆ์งธ ํƒญ์œผ๋กœ ๋‚ด๋ ธ๋‹ค.

Salesforce์˜ Lightning Design System์€ ๊ฐœ๋ฐœ์ž ๊ฐ€์ด๋“œ๋ผ์ธ ํƒญ์„ ๊ธฐ๋ณธ์œผ๋กœ ํ•˜๊ณ , ๊ทธ ์œ„์— ์ปดํฌ๋„ŒํŠธ๋ฅผ ํƒ์ƒ‰ํ•  ์šฉ๋„๋กœ ๊ฐ๊ฐ์ ์ธ ์‚ฌ๋ก€๋“ค์„ ์ œ์‹œํ•˜์ง€๋งŒ, ๊ตฌํ˜„ ๋…ธํŠธ์™€ ๋””์ž์ธ ๊ฐ€์ด๋“œ๋ผ์ธ ํƒญ์€ ์ด์ƒํ•˜๋ฆฌ๋งŒ์น˜ ๋น„์›Œ๋‘์—ˆ๋‹ค.

์กฐ์ง์— ๋”ฐ๋ผ, ๋””์ž์ธ ํƒญ ์ „ํ›„์— ์ถ”๊ฐ€์ ์ธ ์„น์…˜(์ฃผ๋กœ ์ ‘๊ทผ์„ฑ)๋„ ํ•จ๊ป˜ ๋‚˜ํƒ€๋‚˜๊ธฐ๋„ ํ•œ๋‹ค.

๋…ธํŠธ: ์†Œ๊ฐœ๋กœ ์‹œ์ž‘ํ•˜์—ฌ ์‚ฌ๋ก€๋ฅผ ๋ˆˆ์— ๋„๋Š” ์ž๋ฆฌ์— ๋ฐฐ์น˜ํ•˜์ž. ๊ทธ ์™ธ์—๋„, ๋””์ž์ธ๊ณผ ์ฝ”๋“œ ๊ฐ€์ด๋“œ์˜ ์šฐ์„  ์ˆœ์œ„๋Š” ์กฐ์ง๊ณผ ๊ทธ๋“ค์ด ์˜ค๋””์–ธ์Šค์™€ ์Šคํ† ๋ฆฌํ…”๋ง์— ๋‘๋Š” ๊ฐ€์น˜์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง„๋‹ค.


4) ํŽ˜์ด์ง€๊ฐ€ ๊ธธ์–ด์งˆ ๋•Œ๋Š”, ์ง€์†์ ์œผ๋กœ ๋ถ™์–ด์žˆ๋Š” ๋กœ์ปฌ ๋„ค๋น„๊ฒŒ์ด์…˜์„ ํ™œ์šฉํ•œ ์•ต์ปค ๋ฆฌ๋”.
ํŽ˜์ด์ง€๊ฐ€ ๊ธธ์–ด์งˆ์ˆ˜๋ก, ์ด ํŽ˜์ด์ง€๊ฐ€ ๋ฌด์—‡์ธ์ง€, ๊ทธ๋ฆฌ๊ณ  ํ˜„ ์œ„์น˜๊ฐ€ ์–ด๋””์ธ์ง€ ์งš์–ด์ฃผ๋Š” ๊ฒƒ์ด ๋” ์ค‘์š”ํ•ด์ง„๋‹ค. ์ด๋Ÿด ๋•Œ๋Š”, ์„ธ๋กœํ˜• ๋กœ์ปฌ ๋„ค์ด๊ฒŒ์ด์…˜์ด ํšจ๊ณผ์ ์ด๋‹ค.: ํ•ญ์ƒ ๋– ์žˆ๊ณ , ์Šคํฌ๋กค ์‹œ ์œ„์น˜ ์ถ”์ ์ด ๊ฐ€๋Šฅํ•˜๊ณ , ๋„์ค‘์— ์„œ๋ธŒ ํƒ€์ดํ‹€๋กœ ์ด๋™ ๊ฐ€๋Šฅํ•œ ๋„ค๋น„๊ฒŒ์ด์…˜.

Morningstar Design System์€ ํŽ˜์ด์ง€์˜ ์˜ค๋ฅธ์ชฝ ์˜์—ญ์„ ๋”ฐ๋ผ ๋‘ ๋‹จ๊ณ„์˜ ์œ„๊ณ„๋ฅผ ์‚ฌ์šฉํ•ด ๋กœ์ปฌ ๋„ค๋น„๊ฒŒ์ด์…˜์„ ๊ตฌ์„ฑํ–ˆ๋‹ค.  

๋…ธํŠธ: ๋งŽ์€ ์‚ฌ์ดํŠธ ํŠธ๋ Œ๋“œ๊ฐ€ ๋ถ™์–ด์žˆ๋Š” ๋ฒ„ํ‹ฐ์ปฌ ๋„ค๋น„๊ฒŒ์ด์…˜์„ ์‚ฌ์šฉํ•˜๊ธดํ•˜์ง€๋งŒ, UI(ํƒญ์ด๋‚˜ ๋‹จ์ผ ์Šคํฌ๋กค ๋ทฐ)๋Š” ์ทจํ–ฅ์— ๋”ฐ๋ผ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋‹ค. ์˜ค๋””์–ธ์Šค์—๊ฒŒ ์งˆ๋ฌธํ•˜๊ณ , ์ฝ˜ํ…์ธ ๋ฅผ ์ดํ•ดํ•˜๊ณ , ์‚ฌ์šฉ์„ฑ์„ ๊ทน๋Œ€ํ™”ํ•˜๊ณ , ๋ฌด์Šจ ์ผ์ด ์žˆ์–ด๋„ ์„น์…˜๋ช…๊ณผ ์ปดํฌ๋„ŒํŠธ๋ช…์„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ „๋ฐ˜์— ๊ฑธ์ณ ์ผ๊ด€๋˜๊ฒŒ ์œ ์ง€ํ•˜์ž.


5) ๋””์ž์ธ? ์ฝ”๋“œ? ๋‘˜ ๋‹ค?
๋””์ž์ธ๊ณผ ์ฝ”๋“œ ์Šค๋ ˆ๋“œ๊ฐ€ ๋” ๋งŽ์„์ˆ˜๋ก, ์ข€ ๋” ๊ด€์‹ฌ์ด ๋งŽ์€ ์˜ค๋””์–ธ์Šค๋“ค์€ ๊ทธ๋“ค์˜ ์šฉ๋„์— ๋งž๊ฒŒ ํŽ˜์ด์ง€์˜ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋‹ค๋“ฌ์–ด ๋‹ฌ๋ผ๊ณ  ์š”์ฒญํ•  ๊ฒƒ์ด๋‹ค.

๋””์ž์ธ ๋งค๋‹ˆ์ €: ์ฝ”๋“œ ์ƒ˜ํ”Œ๊ณผ ๋ ˆํผ๋Ÿฐ์Šค ํ…Œ์ด๋ธ”์„ ์•ˆ ๋ณด์ด๊ฒŒ ํ•  ์ˆ˜๋Š” ์—†๋‚˜์š”?
์—”์ง€๋‹ˆ์–ด: ์ด ๊ธธ๋‹ค๋ž€ ๋””์ž์ธ ์Šคํ† ๋ฆฌํ…”๋ง ์ข€ ์—†์• ๋ฒ„๋ฆด ์ˆ˜ ์—†๋‚˜์š”?

๋””์ž์ธ์ด๋‚˜ ์ฝ”๋“œ ์ฝ˜ํ…์ธ ๋ฅผ ์ˆจ๊ธธ ์ˆ˜ ์žˆ๋Š” ํ† ๊ธ€์„ ๊ณ ๋ คํ•ด๋ณด๋Š” ๊ฒƒ๋„ ์ข‹๋‹ค. ์ด๋ฅผ ์œ„ํ•ด์„œ๋Š” ๊ฐ ์ฝ˜ํ…์ธ  ์œ ํ˜•์„ ํ•˜๋‚˜์—๋งŒ ํ•ด๋‹นํ•˜๋Š” ๊ฒƒ, ๋‹ค๋ฅธ ํ•˜๋‚˜์— ํ•ด๋‹นํ•˜๋Š” ๊ฒƒ ํ˜น์€ ๋‘˜ ๋ชจ๋‘์™€ ๊ด€๋ จ๋œ ๊ฒƒ์œผ๋กœ ๋ถ„๋ฅ˜ํ•ด์•ผ ํ•œ๋‹ค.

  • ํ•ญ์ƒ ํ‘œ์‹œ๋˜๋Š” ์†Œ๊ฐœ, ์‚ฌ๋ก€, ์ ‘๊ทผ์„ฑ๊ณผ ๊ด€๋ จ๋œ ๋ชจ๋“  ์š”์†Œ๋“ค.
  • "๋””์ž์ธ๋งŒ" ์›ํ•œ๋‹ค๋ฉด ์ฝ”๋“œ ์ •๋ณด์™€ Prop๋‚˜ CSS Modifier Calsses๊ฐ™์€ ํ…Œํฌ๋‹ˆ์ปฌํ•œ ๊ฐ€์ด๋“œ๋ฅผ ์ˆจ๊ธธ ์ˆ˜ ์žˆ๋‹ค.
  • "์ฝ”๋“œ๋งŒ" ์›ํ•œ๋‹ค๋ฉด ๋น„์ฃผ์–ผ ์Šคํƒ€์ผ์— ๊ด€ํ•œ ๊ธฐ๋‹ค๋ž€ ์„น์…˜๊ณผ ํŽธ์ง‘(์นดํ”ผ)์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ์ˆจ๊ธธ ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ์—”์ง€๋‹ˆ์–ด์™€๋„ ๊ด€๋ จ๋œ ๋ช‡๋ช‡ ๊ธฐ๋ณธ ๊ฐ€์ด๋“œ ใ…กํŠนํžˆ, ์–ธ์ œ ์‚ฌ์šฉํ•˜๋Š”์ง€ใ…ก๋Š” ๋‚จ๊ฒจ๋‘์–ด์•ผ ํ•œ๋‹ค.

๋น„์Šทํ•œ ๋งฅ๋ฝ์—์„œ, Hudl's Uniform์€ ํŽ˜์ด์ง€ ๋‚ด์—์„œ ๋””์ž์ธ๊ณผ ์ฝ”๋“œ๋ฅผ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๋Š” ํ† ๊ธ€๊ณผ, ์œ ์ € ์ง€ํ–ฅ์ ์ธ ํƒญ์„ ์ œ๊ณตํ–ˆ๋‹ค

Hudl's Uniform ๋””์ž์ธ ์‹œ์Šคํ…œ์€ ํŽ˜์ด์ง€ ๋‹จ์œ„์˜ ํ† ๊ธ€(์šฐ์ƒ๋‹จ)์„ ํ†ตํ•ด ๋””์ž์ธ๊ณผ ์ฝ”๋“œ ๊ฐ€์ด๋“œ๋ฅผ ๊ตฌ๋ถ„ํ–ˆ๋‹ค. 

์ด๋Ÿฌํ•œ ๋ฐฉ์‹์€ ๊ตฌํ˜„์€ ์›ํ™œํ•˜์ง€๋งŒ UI ๊ตฌ์ถ•๊ณผ ์ฝ˜ํ…์ธ ์˜ ํšจ์œจ์ ์ธ ๊ด€๋ฆฌ๋ผ๋Š” ๋น„์šฉ์ด ์š”๊ตฌ๋œ๋‹ค. ๋‚ด๊ฐ€ ๊ฒช์€ ๋‹ค๋ฅธ ํด๋ผ์ด์–ธํŠธ๋“ค๋„ ๋””์ž์ธ๊ณผ ์—”์ง€๋‹ˆ์–ด๋ง์„ ๊ตฌ๋ถ„ํ•˜๋Š” ๋™์‹œ์— ๊ฐœ๋ฐฉ๋œ ๊ฒฝ๊ณ„๋ฅผ ์ธ์ •ํ•˜๋ฉด์„œ ๋น„์Šทํ•œ ํ•œ๊ณ„์— ๋ถ€๋‹ฅ์น˜๊ณค ํ–ˆ๋‹ค.

๋…ธํŠธ: ์ฝ˜ํ…์ธ  ํƒ€์ž… ๊ธฐ๋ฐ˜ ํ•„ํ„ฐ๋ง์€ ๊ธฐ์ˆ ์ ์ธ ๊ฒƒ๋ณด๋‹ค ์ฝ˜ํ…์ธ  ๋งค๋‹ˆ์ง•์— ๋Œ€ํ•œ ๋น„์šฉ์„ ๋“ค์ด๊ฒŒ ๋œ๋‹ค. IA๊ฐ€ ์—„๊ฒฉํ• ์ˆ˜๋ก, ๊ธฐํšŒ๋Š” ๋” ๋งŽ์•„์ง€๊ฒ ์ง€๋งŒ ์ด๋Š” ํšจ๊ณผ์ ์ธ authoring ์›Œํฌ ํ”Œ๋กœ์šฐ์™€ ๊ณผ์—…์˜ ๋ถ„๋ฆฌ์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง„๋‹ค.

์˜ค๋””์–ธ์Šค์— ๋Œ€ํ•œ ๊ฐ•ํ•œ ๊ฐ๊ฐ์„ ์ง€๋‹ˆ๊ณ , ์ œ์ž‘๋œ ์ฝ˜ํ…์ธ ์˜ ์ข…๋ฅ˜๋ฅผ ์ดํ•ดํ•˜๋ฉฐ, ํฐ ๋ฒ”์œ„์˜ ํŽ˜์ด์ง€ ๊ตฌ์กฐ๋ฅผ ํ•ฉ์˜ํ–ˆ๋‹ค๋ฉด, ์ด์ œ ์ž‘์—…์„ ์‹œ์ž‘ํ•ด๋ณด์ž.

๋‹ค์Œ ๊ธ€ โ†’ #2 ์†Œ๊ฐœ
์ €์ž : Nathan Curtis
๋ฒˆ์—ญ์ž : ๊น€๊ฐ•๋ น
*๋ฌด๋‹จ ์ „์žฌ ๋ฐ ์žฌ๋ฐฐํฌ ๊ธˆ์ง€(๋งํฌ ๊ณต์œ  ๊ฐ€๋Šฅ)
๐Ÿ‘€ ๊ฐ•๋ น's ํ๋ ˆ์ดํŒ… ๋ฉ˜ํŠธ

๋””์ž์ธ ์‹œ์Šคํ…œ ๋ฌธ์„œ ์ž‘์—…์— ๊ด€ํ•œ ์‹œ๋ฆฌ์ฆˆ ์ค‘ ์ฒซ ๋ฒˆ์งธ ์•„ํ‹ฐํด์ž…๋‹ˆ๋‹ค. ๋ฏธ๋””์—„์—์„œ ๋””์ž์ธ ์‹œ์Šคํ…œ ๊ด€๋ จ ๊ธ€๋กœ ์œ ๋ช…ํ•œ Nathan cutis๋‹˜์˜ ๊ธ€์ธ๋ฐ์š”. Morningstar Design System์„ ๊ตฌ์ถ•ํ•˜์‹  ๋ถ„์ด๋ผ๊ณ  ํ•˜๋„ค์š”.
author๋“ค์ด ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ฌธ์„œํ™”ํ•˜๋Š” ๊ฒƒ๋„ ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ๊ตฌ์ถ•ํ•˜๋Š” ๊ฒƒ๋งŒํผ ์ค‘์š”ํ•œ ์ผ์ธ๋ฐ์š”. ์ด๋Ÿฌํ•œ ๋ฌธ์„œํ™”๋ฅผ ํ•  ๋•Œ ๊ณ ๋ คํ•ด์•ผ ํ•  ์ ๋“ค์„ ์ž˜ ์งš์–ด์ฃผ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
์˜ค๋Š˜ ์ฝ˜ํ…์ธ ๋Š” ์–ด๋– ์…จ๋‚˜์š”?

๊ฐ™์ด ์ฝ๊ณ  ์‹ถ์€ ์นœ๊ตฌ๊ฐ€ ๋– ์˜ค๋ฅธ๋‹ค๋ฉด  
  ๐Ÿ‘‰๊ตฌ๋…๋งํฌ ๊ณต์œ ํ•˜๊ธฐ  

๋ฒˆ์—ญ์ด ํ•„์š”ํ•œ ์•„ํ‹ฐํด์ด ์žˆ๋‹ค๋ฉด  

[๋””๋… ๋„๋„ค์ด์…˜ OPEN] 
์ž‘์€ ๊ธˆ์•ก์ด๋ผ๋„ ๋””๋…์˜ ์„œ๋น„์Šค ์œ ์ง€๋ฅผ ์œ„ํ•ด ํ›„์›ํ•ด์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. :)
์นด์นด์˜ค๋ฑ…ํฌ 3333 14 0517 920  (์‹ฌ์˜ˆ์ง€)
*ํ›„์›ํ•ด์ฃผ์‹  ๊ธˆ์•ก์€ ์ „์•ก ์„œ๋น„์Šค ์šด์˜(๋ฉ”์ผ ๋ฐœ์†ก ์†”๋ฃจ์…˜ ๋น„์šฉ)์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. 
*ํ›„์›์ž(์ž…๊ธˆ์ž๋ช…) ๋ฆฌ์ŠคํŠธ ๊ธฐ์ž…์„ ์›ํ•˜์ง€ ์•Š์œผ์‹œ๋Š” ๋ถ„์€ ๋ฉ”์ผ๋กœ ๋ง์”€ํ•ด์ฃผ์„ธ์š”.
4์›” ํ›„์›ํ•ด์ฃผ์‹  ๋ถ„๋“ค 
์ฃผํ˜„์ •, ์ดํ˜œ๋นˆ, ๊น€์ˆ˜ํ˜„, ํ™ฉํ•˜๋‚˜, ์„œ์€์ •, ๋ฐ•์ง€์œค, ๋ฐ•์žฌ๋•, ํ—ˆ์‚ฌ๋ž‘, ์ •์ฐฌ์šฐ ์™ธ 2๋ถ„
 
ํ›„์›ํ•ด์ฃผ์‹  ๋ถ„๋“ค, ์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ๋•๋ถ„์— ์„œ๋น„์Šค๋ฅผ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. :)
๋””๋…
d.dok.newsletter@gmail.com
-
์ˆ˜์‹ ๊ฑฐ๋ถ€ Unsubscribe