๐Ÿ‘ฉ‍๐Ÿ’ปDeep Wide School/๐Ÿ’˜Product Design

๋””์ž์ธ ์‹œ์Šคํ…œ(Design System)๊ณผ ์„œ๋น„์Šค ๊ธฐํš(Service Design)

Deep Wide Studio 2020. 6. 29. 15:45
728x90
๋ฐ˜์‘ํ˜•

๋””์ž์ธ ์‹œ์Šคํ…œ์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€? 

 

๋””์ž์ธ ๊ฐœ๋…์˜ ํ™•์žฅ/ ์ถœ์ฒ˜: https://story.pxd.co.kr/1434

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

 

ํ† ์Šค์˜ ๋””์ž์ธ ์‹œ์Šคํ…œ/ ํ† ์Šค ๊ณต์‹ ๋ธ”๋กœ๊ทธ

Toss ๊ณต์‹ ๋ธ”๋กœ๊ทธ https://blog.toss.im/

 

๋””์ž์ธ์‹œ์Šคํ…œ์˜ ๊ฐœ๋…์„ ์•Œ๊ธฐ ์œ„ํ•ด์„œ๋Š”, UI ๊ฐ€์ด๋“œ ๋ผ์ธ, UX ๊ฐ€์ด๋“œ ๋ผ์ธ์— ๋Œ€ํ•ด ๋จผ์ € ์ดํ•ดํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค. 

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

ํ”„๋กœํ† ํƒ€์ž… ์ œ์ž‘ ํˆด UXpin์ด ๋งŒ๋“  '๋””์ž์ธ ์‹œ์Šคํ…œ' ์‚ฌ๋ก€ ํ๋ ˆ์ด์…˜ ํŽ˜์ด์ง€ ์บก์ณ

https://adele.uxpin.com/

 


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

1. ํŒ€ ๋‚ด์˜ ๋‹ค์–‘ํ•œ ์ดํ•ด๊ด€๊ณ„์ž๋“ค๊ณผ ํ•จ๊ป˜ ๊ณต๋™ ์ง€์‹ ์ž์‚ฐ์„ ์Œ“๊ณ , ์ดํ•ด๋„์˜ ์‹ฑํฌ๋ฅผ ๋งž์ถ”๊ธฐ ์œ„ํ•ด.

2. ๋‹ค์–‘ํ•œ ์ฑ„๋„์— ๊ฑธ์ณ ๋ธŒ๋žœ๋“œ ์•„์ด๋ดํ‹ฐํ‹ฐ๋ฅผ ์ผ๊ด€๋˜๊ฒŒ ์ „๋‹ฌํ•˜๊ณ , ๋†’์€ ์ˆ˜์ค€์˜ ์‚ฌ์šฉ์„ฑ์„ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด.

3. ๋‹ค์–‘ํ•œ ๋ถ€์„œ/ํŒ€ ๊ฐ„ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ์˜ค์ฐจ๋ฅผ ์ค„์ด๊ธฐ ์œ„ํ•ด 

 

์ด๋Ÿฌํ•œ ๋””์ž์ธ ๊ฐ€์ด๋“œ๋ผ์ธ์ด๋‚˜ ๋””์ž์ธ ์‹œ์Šคํ…œ ๊ตฌ์ถ•์€, ์ œํ’ˆ์˜ ๊ธฐ๋Šฅ ํ™•์žฅ/ ์ œํ’ˆ๊ณผ ์„œ๋น„์Šค ๊ตฐ์˜ ํ™•์žฅ/ ์ƒˆ๋กœ์šด ์‹œ์žฅ ์ง„์ถœ ๋“ฑ์˜ ์ƒํ™ฉ์—์„œ ์š”๊ตฌ๋œ๋‹ค. 

 

SOCAR FRAME

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

 

1) Socar Design System guide page https://socarframe.socar.kr/8bb3aba4a/p/5857a5-socar-frame

2) Socar Design System guide tech blog https://tech.socarcorp.kr/design/2020/06/23/socar-design-system-01.html?fbclid=IwAR1ayGl8x1QZken7_3FCu7aTpa5mdK28eOAajG1RqBqX2lpCxyF3q_5Kl5w

 

[SOCAR FRAME ๋งŒ๋“ค๊ธฐ # 1] ์˜์นด์˜ ๋””์ž์ธ ์‹œ์Šคํ…œ ๋ง›๋ณด๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š”, ์˜์นด ํ”„๋กœ๋•ํŠธ ๋””์ž์ธํŒ€์˜ ๊ฐ€๋””์ž…๋‹ˆ๋‹ค. ๋จผ์ €, ์˜์นด ์•ฑ์˜ ๋””์ž์ธ ์‹œ์Šคํ…œ์ธ SOCAR FRAME ์‚ฌ์ดํŠธ๋ฅผ ๊ณต๊ฐœํ•ฉ๋‹ˆ๋‹ค!! ๐ŸŽ‰ ์•ž์œผ๋กœ SOCAR FRAME ๊ตฌ์ถ• ๊ณผ์ •์„ ๊ธ€๋กœ ์กฐ๊ธˆ์”ฉ ํ’€์–ด๋‚˜๊ฐ€๋ ค๊ณ  ํ•˜๋Š”๋ฐ์š”, ์ด

tech.socarcorp.kr

 


 

Where am I? 

UX์™€ BX์˜ ๊ฒฐ์ •์ ์ธ ์ ‘์ ์€ ์–ด๋””์ผ๊นŒ์™€ ๊ฐ™์€ ๊ณ ๋ฏผ์„ ํ•ด๋ดค์—ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ด ๋‘˜์€ ๋ถ„๋ฆฌ๋œ ์ฑ„ ์–ด๋””์„ ๊ฐ€ ๋งŒ๋‚˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ํ•œ ๋งฅ๋ฝ ์†์— ์žˆ์„ ๋ฟ์ด์—ˆ๋‹ค. ์˜์นด์˜ BXํŒ€์—์„œ ๋””์ž์ธ์‹œ์Šคํ…œ๊ฐ€์ด๋“œ๋ฅผ ๋งŒ๋“  ๊ฒƒ๋งŒ ํ•ด๋„ ๊ทธ๋ ‡๋‹ค. Adobe์—์„œ๋Š” Visual ํŒ€๊ณผ UXํŒ€์ด ๋‚˜๋ˆ„์–ด์ ธ ์žˆ์ง€ ์•Š๊ณ , ํ•œ ํŒ€์—์„œ ๋‘˜ ๋‹ค๋ฅผ ์ˆ˜ํ–‰ํ•œ๋‹ค๊ณ  ํ•œ๋‹ค.

 

์ถœ์ฒ˜: http://designbase.co.kr/

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

 

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

 

 


์ฐธ๊ณ ์ž๋ฃŒ

https://story.pxd.co.kr/965

 

๋งˆ์Œ์„ ์ƒ๊ฐํ•˜๋Š” ๋””์ž์ธ - ์‹ฌ๋ฆฌํ•™์œผ๋กœ ๋ฐ”๋ผ๋ณด๋Š” UI ๊ฐ€์ด๋“œ๋ผ์ธ

์•ž์„œ ๊ฒŒ์žฌ๋œ ์ด์žฌ์šฉ๋‹˜์˜ ๊ธ€(http://story.pxd.co.kr/949)์—์„œ UI ๊ฐ€์ด๋“œ๋ผ์ธ์„ ์ ์šฉํ•  ๋•Œ์˜ ๊ณ ๋ ค์‚ฌํ•ญ ๋ช‡ ๊ฐ€์ง€๋ฅผ ์งš์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ์ค‘ '๊ฐ€์ด๋“œ๋ผ์ธ์ด ๋‚˜์˜จ ์ธ์ง€์ /์‹ฌ๋ฆฌ์  ๋ฐฐ๊ฒฝ์„ ์ดํ•ดํ•œ๋‹ค.' ๋ผ๋Š” ๋‚ด์šฉ์€, ๊ฐ€๏ฟฝ

story.pxd.co.kr

https://tech.socarcorp.kr/design/2020/06/23/socar-design-system-01.html?fbclid=IwAR1ayGl8x1QZken7_3FCu7aTpa5mdK28eOAajG1RqBqX2lpCxyF3q_5Kl5w

 

[SOCAR FRAME ๋งŒ๋“ค๊ธฐ # 1] ์˜์นด์˜ ๋””์ž์ธ ์‹œ์Šคํ…œ ๋ง›๋ณด๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š”, ์˜์นด ํ”„๋กœ๋•ํŠธ ๋””์ž์ธํŒ€์˜ ๊ฐ€๋””์ž…๋‹ˆ๋‹ค. ๋จผ์ €, ์˜์นด ์•ฑ์˜ ๋””์ž์ธ ์‹œ์Šคํ…œ์ธ SOCAR FRAME ์‚ฌ์ดํŠธ๋ฅผ ๊ณต๊ฐœํ•ฉ๋‹ˆ๋‹ค!! ๐ŸŽ‰ ์•ž์œผ๋กœ SOCAR FRAME ๊ตฌ์ถ• ๊ณผ์ •์„ ๊ธ€๋กœ ์กฐ๊ธˆ์”ฉ ํ’€์–ด๋‚˜๊ฐ€๋ ค๊ณ  ํ•˜๋Š”๋ฐ์š”, ์ด

tech.socarcorp.kr

http://icunow.co.kr/design-system/

 

๊ตญ๋‚ด ์Šคํƒ€ํŠธ์—…๋“ค์˜ ๋””์ž์ธ ์‹œ์Šคํ…œ์€? ๊ทธ๋ฆฌ๊ณ  ๋””์ž์ธ ์‹œ์Šคํ…œ์— ๋Œ€ํ•œ ์‚ฌ๋ก€ ํ™•์ธ๊ณผ ๊ณต๋ถ€๋ฅผ ํ•  ์ˆ˜ ์žˆ

– ์–ผ๋งˆ ์ „, ๋””์ž์ธ ์‹œ์Šคํ…œ๊ณผ ๊ด€๋ จ๋œ ์•„์ฃผ ํฅ๋ฏธ๋กœ์šด ์งˆ๋ฌธ๊ณผ ๋‹ต๋ณ€์„ ๋ณด๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ‘Yes, design systems will replace design jobs’ ์ด๋ž€ ๋‚ด์šฉ์ด์—ˆ์ฃ . ๋ญ? ๋””์ž์ธ ์‹œ์Šคํ…œ์ด ๋””์ž์ด๋„ˆ๋ฅผ ๋Œ€์ฒดํ• ๊ฑฐ๋ผ๊ณ ? ๋Œ€

icunow.co.kr

 

728x90
๋ฐ˜์‘ํ˜•