๐จ 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 ํ๋ฌ๊ทธ์ธ์ด๋ค. ์ฐจํธ๋ฅผ ์์ฃผ ํธ๋ฆฌํ๊ฒ ๋ง๋ค ์ ์์ด ์ฝํ
์ธ ๋ง๋ค ๋ ์์ฃผ ์ ์ฉํ๋ค.