Community

๐ŸŽจ 2020 ์ตœ๊ณ ์˜ ํˆด๋กœ ๋ฝ‘ํžŒ Figma ์ด์•ผ๊ธฐ ๐ŸŽˆ ํ•œ ์ค„ ์š”์•ฝ - Figma๋Š” ์ƒ๊ฐ๋งŒํผ ์‰ฝ๊ณ , ์ƒ๊ฐ ์ด์ƒ์œผ๋กœ ์–ด๋ ต๋‹ค. โœ”๏ธ Figma๋Š” ์ œ๊ฐ€ ์ฒ˜์Œ์œผ๋กœ ์“ด '๋””์ž์ธ ํ˜‘์—…ํˆด'์ž…๋‹ˆ๋‹ค. ์ง€๊ธˆ

๐ŸŽจ 2020 ์ตœ๊ณ ์˜ ํˆด๋กœ ๋ฝ‘ํžŒ Figma ์ด์•ผ๊ธฐ ๐ŸŽˆ ํ•œ ์ค„ ์š”์•ฝ - Figma๋Š” ์ƒ๊ฐ๋งŒํผ ์‰ฝ๊ณ , ์ƒ๊ฐ ์ด์ƒ์œผ๋กœ ์–ด๋ ต๋‹ค. โœ”๏ธ Figma๋Š” ์ œ๊ฐ€ ์ฒ˜์Œ์œผ๋กœ ์“ด '๋””์ž์ธ ํ˜‘์—…ํˆด'์ž…๋‹ˆ๋‹ค. ์ง€๊ธˆ ํšŒ์‚ฌ์— ์ž…์‚ฌํ•˜๋ฉฐ ์ฒ˜์Œ์œผ๋กœ ์‚ฌ์šฉํ•œ ํ”„๋กœ๋•ํŠธ์ฃ . ์‚ฌ์‹ค, ๊ณต๋™ ์ฐฝ์—…ํ–ˆ์„ ๋•Œ, ์™€๋””์ฆˆ ์Šคํ† ๋ฆฌ ๋””์ž์ธ์„ ๊ธฐํšํ•˜๋ฉฐ ๋„์ž…ํ•ด๋ณผ๊นŒ ํ–ˆ์—ˆ์–ด์š”. โœ”๏ธ ํ•˜์ง€๋งŒ ๊ทธ๋•Œ๋Š” '์–ธ์–ด์˜ ์žฅ๋ฒฝ'์ด ๋„ˆ๋ฌด๋‚˜ ์ปค์„œ ํฌ๊ธฐํ–ˆ๋”๋žฌ์ฃ . ๊ทธ๋•Œ ํฌ๊ธฐ ์•ˆ ํ–ˆ์œผ๋ฉด ์ง€๊ธˆ ๋” ์œ ์šฉํ•˜๊ณ  '์ž์•Œ' ์‚ฌ์šฉํ–ˆ์„ ํ…๋ฐ๋ผ๋Š” ์•„์‰ฌ์›€์ด ๋‚จ๊ธฐ๋„ ํ•ด์š”. ํฌ๊ธฐํ•˜๊ณ  ํ–ˆ๋˜ ์ƒ๊ฐ์€ 'ํ•œ๊ตญ์–ด ๋ฒ„์ „ ๋‚˜์˜ค๋ฉด ์‚ฌ์šฉํ•ด์•ผ์ง€.' โœ”๏ธ ํ—ˆ๋‚˜ ํ˜„์žฌ, ํ•œ๊ตญ์–ดํŒ์€ ๋‚˜์˜ค์ง€ ์•Š์•˜์ง€๋งŒ ์—ด์‹ฌํžˆ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์–ด์š”. ์šฐ๋ฆฌ ๋””์ž์ด๋„ˆ๋‹˜์˜ ์นœ์ ˆํ•œ ์„ค๋ช…์„ ํ†ตํ•ด ๋ฐฐ์šฐ๊ณ , ์œ ํŠœ๋ธŒ๋ฅผ ํ†ตํ•ด ๋ฐฐ์šฐ๋ฉฐ, ๋ฐ”๋กœ๋ฐ”๋กœ ์‹ค์ „์œผ๋กœ ์ดํ–‰ํ•˜๊ณ  ์žˆ์ฃ . ์ƒ๊ฐ๋ณด๋‹ค ์‰ฌ์› ๊ณ , ์ƒ๊ฐ ์ด์ƒ์œผ๋กœ ์–ด๋ ค์›Œ์š”. โœ”๏ธ ๋ญ๋ž„๊นŒ ๋‹จ์ˆœํ•œ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ๋•Œ๋Š” ๊ฐ„ํŽธํ•˜๊ณ  ํŽธ๋ฆฌํ•ด์š”. PPT๋ณด๋‹ค ๋น ๋ฅด๊ฒŒ ์ž‘์—…์„ ํ•  ์ˆ˜ ์žˆ๊ณ , ์ด๋ฏธ์ง€ ํŒŒ์ผ๋กœ ๋‹ค์šด๋กœ๋“œํ•˜๊ฑฐ๋‚˜ ๋‚ด๋ณด๋‚ผ ๋•Œ๋„ ํŽธํ•ด์š”. ๋˜ํ•œ, ์ž‘์—… ์ค‘์ธ ํŽ˜์ด์ง€๋ฅผ ๋งํฌ๋กœ ์ „๋‹ฌํ•˜์—ฌ, ํ˜‘์—…๋„ ๋น ๋ฅด๊ฒŒ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ์–ด์š”. โœ”๏ธ ์ œ๊ฐ€ ํ”ผ๊ทธ๋งˆ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ถ„์€ ๋‹จ์ˆœํžˆ ์ด ์ •๋„(?)์—์š”. ๋ญ ๊ฐ€๋” ์ธ๋„ค์ผ๋„ ๋งŒ๋“ค๊ณ , ํฌ์ƒต ๋Œ€์‹ ํ•ด์•ผ ํ•˜๋Š” ์ด๋ฏธ์ง€ ์ž‘์—…๋„ ํ•˜์ง€๋งŒ ์ •๋ง ๋‹จ์ˆœํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์ฃ . ์•„ ๊ฐ€๋”์€ ํ”ผ๊ทธ๋งˆ ์žผ์„ ํ™œ์šฉํ•˜๊ธฐ๋„ ํ•ด์š”. โœ”๏ธ ๋‹ค์–‘ํ•˜๊ฒŒ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ํ•˜๋Š”๋ฐ ์—ฌ์ „ํžˆ ์ €๋Š” Figma๋ผ๋Š” ๊ทธ๋†ˆ์„ ์ž˜ ๋ชจ๋ฅด๊ฒ ์–ด์š”. ๋‹ค๋ฅธ ๋ถ„๋“ค ๋ณด๋ฉด ์—„์ฒญ ํœ™ํœ™! ์“ฑ์‹น! ํ•˜๋ฉด์„œ ํ™”๋ คํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๋˜๋ฐ, ๋””์ž์ธ์  ๊ฐ๊ฐ์ด ์—†์–ด์„œ ๊ทธ๋Ÿฐ ๊ฑด์ง€ ์ €๋Š” ๋ถˆ๊ฐ€๋Šฅํ•˜๋„ค์š”. (์Šฌํฌ๋‹ท๐Ÿคฃ) โœ”๏ธ ์•„ํ‹ฐํด์—์„œ๋„ ๋ช‡ ๊ฐ€์ง€ ์žฅ์ ์ด ์žˆ๋Š”๋ฐ์š”. ์ €๋„ ๊ณต๊ฐํ•˜๋Š” ์ธก๋ฉด์ด ์žˆ์–ด์„œ ์š”์•ฝ ์ข€ ํ•ด๋ณผ๊ฒŒ์š”. ๐Ÿ’• ํ”ผ๊ทธ๋งˆ ์žฅ์  ๋ช‡ ๊ฐ€์ง€ 1. Pages โœ”๏ธ pages๋ฅผ ํ™œ์šฉํ•˜๋ฉด ๋‹ค์–‘ํ•œ ์ฃผ์ œ์˜ ํ™”๋ฉด๋“ค์„ ํ•˜๋‚˜์˜ ๋งํฌ ์•ˆ์— ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์Šฌ๋ž™์— ๊ณต์œ ํ•  ๋•Œ ๋งํฌ๋ฅผ ํŽ˜์ด์ง€ ์ด๋ฆ„์œผ๋กœ ์ง€์ •ํ•˜์—ฌ ๊ณง๋ฐ”๋กœ ํ•ด๋‹น ํŽ˜์ด์ง€๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ฐ€์ด๋“œํ•˜๋Š” ์ค‘์ด๋‹ค. โœ”๏ธ ํŠนํžˆ ํ”Œ๋กœ์šฐ์— ๋”ฐ๋ฅธ ํ™”๋ฉด ๊ธฐํš์„ ์ „๋‹ฌํ•  ๋•Œ, pages์˜ ์ˆœ์„œ๋ฅผ ๋งž์ถฐ๋†” ๋ˆ„๊ตฌ๋‚˜ ํ๋ฆ„์„ ์‰ฝ๊ฒŒ ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋˜ํ•œ, ๊ถ๊ธˆํ•œ ์‚ฌํ•ญ์ด๋‚˜ ์•„์ด๋””์–ด๊ฐ€ ์žˆ์œผ๋ฉด ํ•ด๋‹น ํŽ˜์ด์ง€์—๋งŒ ์ฒดํฌํ•˜๊ณ  ์•ˆ๋‚ดํ•˜๋ฉด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋”์šฑ ํŽธ๋ฆฌํ•˜๋‹ค. โœ”๏ธ ์•„์ฃผ ์žฌ๋ฏธ์žˆ๋Š” ํ›„๋ฌธ ํ•œ ๊ฐ€์ง€, ์–ด๋А ํ•œ ๋Œ€ํ‘œ๋‹˜์€ AWS ๋•Œ๋ฌธ์— ์™ธ์ฃผ๋ฅผ ๋งก๊ฒผ์œผ๋ฉฐ, AWS ์‹œ์Šคํ…œ์„ ๋ชจ๋ฅด๋Š” ์ƒํ™ฉ, ๊ฐ‘์ž๊ธฐ ์•ž์— ์žˆ๋Š” ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์ด๋ ‡๊ฒŒ ์งœ์ฆ ๋‚ธ๋‹ค. "์™œ AWS๋Š” Figma์ฒ˜๋Ÿผ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์—…๋ฌด ํ•˜๋Š” ๊ฑฐ ํ™•์ธ์ด ์•ˆ ๋˜๋Š” ๊ฑฐ์˜ˆ์š”?!" 2. ์‹ค์‹œ๊ฐ„ ํ˜‘์—… โœ”๏ธ ์šฐ๋ฆฌ๋Š” ์žฌํƒ ํ•  ๋•Œ ๊ฐ์ž์˜ ์ง‘์—์„œ ํ”ผ๊ทธ๋งˆ ํŽ˜์ด์ง€๋ฅผ ๋ณด๋ฉฐ ํšŒ์˜ํ–ˆ๋Š”๋ฐ, ํ•œ ์‚ฌ๋žŒ์„ ์„ ํƒํ•˜์—ฌ ์˜ต์ €๋น™์„ ํ•  ์ˆ˜ ์žˆ์–ด, ์Šคํ”ผ์ปค์˜ ์›€์ง์ด๋Š” ํ™”๋ฉด์„ ๋”ฐ๋ผ๊ฐ€๋ฉฐ ๋‚ด์šฉ์„ ์‰ฝ๊ฒŒ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. โœ”๏ธ ํž˜๋“ค๊ฒŒ ๋งˆ์šฐ์Šค ํฌ์ธํ„ฐ๊ฐ€ ์›€์ง์ด๋Š” ๊ฒƒ์„ ๋”ฐ๋ผ๊ฐˆ ํ•„์š” ์—†์ด, ์˜ต์ €๋น™๋งŒ ์ฒดํฌํ•˜๋ฉด ๊ทธ ์‚ฌ๋žŒ์˜ ์‹œ์•ผ๋กœ ๋ณด์—ฌ์ฃผ๋‹ˆ ์ •๋ง ํŽธ๋ฆฌํ•˜๋‹ค. ๊ฒŒ๋‹ค๊ฐ€ ๋ฝ ๊ธฐ๋Šฅ์„ ์ง€์ •ํ•˜๋ฉด ๊ณ ์ •๊ฐ’์ด ๋ณ€ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ž‘์—…ํ•  ๋•Œ ํŽธ๋ฆฌํ•˜๋‹ค. 3. ๋””์ž์ธ ์‹œ์Šคํ…œ ๊ตฌ์„ฑ โœ”๏ธ ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ๊ตฌ์„ฑํ•  ๋•Œ, ํ•œ ์œ„์น˜์— ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ณ ์ •์‹œํ‚ค๋ฉด ์–ธ์ œ๋“ ์ง€ ๊ฐ€์ ธ๋‹ค ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ์‚ฌ์‹ค ๊ธฐํš์ด๋“  ๋ญ๋“  ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์—†๋‹ค๋ฉด ์ผ์ผ์ด ๊ทธ๋ฆฌ๊ฑฐ๋‚˜, ๋ณต์‚ฌํ•ด์™€์•ผ ํ•˜๋Š”๋ฐ ์—์…‹์—์„œ ์„ ํƒํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ํŽธ๋ฆฌํ•˜๋‹ค. 4. ๋‹จ์ถ•ํ‚ค โœ”๏ธ ๋‹จ์ถ•ํ‚ค๋Š” ์ƒ๊ฐ๋ณด๋‹ค ์ง๊ด€์ ์ด๋‹ค. ๋™๊ทธ๋ผ๋ฏธ๋ฅผ ๊ทธ๋ฆด ๋•Œ๋Š” o, ํ…์ŠคํŠธ๋ฅผ ๋„ฃ์„ ๋•Œ๋Š” t, ์ค„ ๊ทธ์„ ๋•Œ๋Š” ์†Œ๋ฌธ์ž l ๋“ฑ์ด ๊ทธ๋ ‡๋‹ค. ๋˜ํ•œ ๋ณต์‚ฌ๋Š” alt๋งŒ ๋ˆ„๋ฅด๋ฉด ๋ผ, ์‰ฝ๊ฒŒ ๋ณต์‚ฌํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ๋•Œ๋ฌธ์ธ์ง€ ppt๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ๋„ ์•ŒํŠธ๋ฅผ ๋ˆ„๋ฅด๋ฉฐ '์™œ ๋ณต์‚ฌ๊ฐ€ ์•ˆ ๋˜๋Š” ๊ฑฐ์•ผ?'๋ผ๋Š” ์ƒ๊ฐ๋„ ํ•œ๋‹ค. 5. plug in โœ”๏ธ ์ฒ˜์Œ์—๋Š” ํ”ผ๊ทธ๋งˆ๊ฐ€ ์˜์–ด๋กœ ๋ผ ์žˆ๋‹ค ๋ณด๋‹ˆ, ๋งˆ์šฐ์Šค ์˜ค๋ฅธ์ชฝ ํ‚ค๋ฅผ ๋ˆŒ๋ €์„ ๋•Œ ํ˜ผ๋ž€ํ•œ ๊ฐ์ •๋งŒ ๋А๊ผˆ์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ์žˆ๋Š” ์ค„๋„ ๋ชฐ๋ž๊ณ , ํ•„์š” ์—†๋‹ค๋Š” ์ƒ๊ฐ๋งŒ ํ–ˆ์—ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ต์ˆ™ํ•ด์ง€๊ณ  ๋‚˜๋‹ˆ '์ด๋ ‡๊ฒŒ ํŽธ๋ฆฌํ•œ ๊ฒƒ๋“ค์ด ์žˆ์–ด?'๋ผ๋Š” ์ƒ๊ฐ์„ ํ•˜๊ฒŒ ๋๊ณ , ์ ๊ทน์ ์œผ๋กœ ํ™œ์šฉ ์ค‘์ด๋‹ค. โœ”๏ธ ๋ชจ๋“  ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ, ์•„์ด์ฝ˜ ํ”Œ๋Ÿฌ๊ทธ์ธ์ด๋‚˜ wireframe ํ”Œ๋Ÿฌ๊ทธ์ธ, HTML To Figma๊ฐ€ ์ด์— ํ•ด๋‹นํ•œ๋‹ค. ์•„, ํ•˜๋‚˜ ๋” ์žˆ๋Š”๋ฐ charts ํ”Œ๋Ÿฌ๊ทธ์ธ์ด๋‹ค. ์ฐจํŠธ๋ฅผ ์•„์ฃผ ํŽธ๋ฆฌํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์–ด ์ฝ˜ํ…์ธ  ๋งŒ๋“ค ๋•Œ ์•„์ฃผ ์œ ์šฉํ•˜๋‹ค.

์•Œ๋ฆผ

์•Œ๋ฆผ์ด ์—†์Šต๋‹ˆ๋‹ค