Adobe๊ฐ ๋ฌด๋ ค $200์ต์ Figma๋ฅผ ์ธ์ํ๋ค๋ ์์์ ๋ค์ด๋ณด์ จ์ ๊ฒ์ ๋๋ค. ์ด๋ก ์ธํด Adobe๊ฐ Figma๋ฅผ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ ์ง์ ๋ํ ์๋ฌธ์ด ์๋์ผ๋ก ์ ๊ธฐ๋ฉ๋๋ค. ๋ฌด๋ฃ ์๊ธ์ ๋ฅผ ๊ณ์ ์ ๊ณตํ ์์ ์ธ๊ฐ์? ์๋๋ฉด ์ทจ์ํ ์์ ์ธ๊ฐ์? ์ฌ์ ํ ๋ฌด๋ฃ ํ๋์ด ์ค๋น๋์ด ์์ง๋ง Adobe๋ ์ธ์ ๋ ์ง Figma์ ๋ฌด๋ฃ ํ๋์ ์ทจ์ํ๊ธฐ๋ก ๊ฒฐ์ ํ ์ ์์ต๋๋ค.
๊ทธ๋ฌ๋ฏ๋ก ๋น์ ์ด ๋๋ํ๊ณ ์ ๊ทน์ ์ด๋ผ๋ฉด ๋ค์๊ณผ ๊ฐ์ ์ฌํญ์ ๋ํด ์๊ฐํ๊ณ ์์ด์ผ ํฉ๋๋ค. ๋ฌด๋ฃ Figma ๋์ ๋ฏธ๋ฆฌ. ๊ทธ๋ฆฌ๊ณ ๋น์ ์ ์ฌ๋ฅ์ ์ฝ๊ณ ์ํํ๊ฒ ํ๊ธฐ ์ํด, ๋๋ ๋ค์๊ณผ ๊ฐ์ ๊ฒ๋ค์ ๋ชจ์์ต๋๋ค. ์ต๊ณ ์ 6๊ฐ์ง ๋ฌด๋ฃ Figma ๋์. ๋น์ฐํ ์ด๋ฌํ ๋๊ตฌ์ ๋๋ถ๋ถ์๋ ๋ฌด๋ฃ ๊ณํ๊ณผ ํจ๊ป ์ ๋ฃ ๊ณํ์ด ์์ต๋๋ค.
Figma ๋ฌด๋ฃ ๋์์ด๋ ๋ฌด๋ฃ Figma ๋๋ฑํ ๋๊ตฌ์ ๋ํด ์์ธํ ์์๋ณด๊ธฐ ์ ์ Figma์ ๋ํ ๊ฐ์๋ฅผ ์ค๋ช ํ๊ฒ ์ต๋๋ค. ํ์คํ, UI/UX ๋์์ด๋๋ค์ ์ด๋ฏธ Figma์ ์ ํตํฉ๋๋ค. ํ์ง๋ง ์ด๋ณด์์๊ฒ๋ Figma์ ๋ํ ๊ฐ์๊ฐ ๋งค์ฐ ์ ์ฉํ ๊ฒ์ ๋๋ค. ๊ทธ๋ ์ง ์๋์?
Figma๋ ๋ฌด์์ ๋๊น:
๊ฐ๋จํ ๋งํด์, ํผ๊ทธ๋ง ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋์์ธํ๋ ๋ฐ ํ์ฉ๋๋ ํ์ ๋์์ธ ๋๊ตฌ์ ๋๋ค. ๊ทธ๊ฒ์ ์น์ฌ์ดํธ ์์ด์ดํ๋ ์, ํ๋กํ ํ์ , ์ฑ ์ธํฐํ์ด์ค ๋์์ธ์ ์ํ ํฌ๋ํน ๋๊ตฌ. ๋์์ธ ๋๊ตฌ์ ๊ฐ์ฅ ์ข์ ๋ถ๋ถ์ ๊ฐ๋ ฅํ ๋ฒกํฐ ๋๊ตฌ, ์ค์๊ฐ ํผ๋๋ฐฑ, ์คํ ์ค์ธ ์์ ์ ์ฆ๊ฐ์ ์ธ ๊ณต์ , ๋ฌด์ ํ ๋ ์ด์ด ๋ฑ์ ํฌํจํ ์ฌ๋ฌ ๊ฐ์ง ํธ๋ฆฌํ ๊ธฐ๋ฅ์ ๋๋ค.
Figma๋ ๋ค๋ฅธ ์ ์ฌํ ๋์์ธ ๋๊ตฌ์ ๋ฌ๋ฆฌ ์ ์ ์ผ๋ก ๋ธ๋ผ์ฐ์ ๊ธฐ๋ฐ์ ๋๋ค. ์ฆ, ํ๋ก์ ํธ์ ์ก์ธ์คํ๊ธฐ ์ํด ๋ค๋ฅธ ์ฅ์น๋ ํ๋ซํผ์ ์ํํธ์จ์ด๋ฅผ ์ค์นํ ํ์๊ฐ ์์ต๋๋ค. ๋์ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ด๊ธฐ๋ง ํ๋ฉด ์ธ์ ๋ ์ง ์ด๋ค ์ฅ์น์์๋ ํ๋ก์ ํธ์ ์ก์ธ์คํ ์ ์์ต๋๋ค.
Figma์ ๊ฐ์ฅ ํฐ ํน์ง์ 3๊ฐ์ ํ์ฑ ํ๋ก์ ํธ๋ฅผ ๋์์ ์์ฑํ๊ณ ์ ์ฅํ ์ ์๋ค๋ ๊ฒ์ ๋๋ค. ์ ๋ง ๋ฉ์ง์ฃ ? ์๊ท๋ชจ ํ๋ก์ ํธ๋ฅผ ํตํด ๋ฐฐ์ฐ๊ณ ์คํํ ์ ์๋ ์์ฒญ๋ ๊ธฐํ๋ฅผ ์ ๊ณตํฉ๋๋ค.
Figma ๋์์ด ํ์ํ ์ด์ :
์ผ์ง๋ผ๋ Figma์๋ ์ ์ฉํ ๊ธฐ๋ฅ๊ณผ ์ด์ ์ด ์์ต๋๋ค., ์์ฒด์ ์ธ ๋จ์ ๋ ์์ต๋๋ค. ๊ทธ๊ฒ์ด ๋ฌด์์ธ์ง ๊ถ๊ธํ์์ฃ ? ๊ธ์์, ์ด๊ฒ์ด ๋ฐ๋ก ์ ๊ฐ ์ด ์น์ ์์ ๋ค๋ฃฐ ๋ด์ฉ์ ๋๋ค. Figma์ ์ด๋ฌํ ๋จ์ ์ผ๋ก ์ธํด Figma ๋์์ ์ฐพ์์ผ ํฉ๋๋ค.
๊ทธ ์ธ์๋ ์ต๊ทผ Adobe๊ฐ Figma๋ฅผ ์ธ์ํ๋ฉด์ ์ฌ์ฉ์๋ค ์ฌ์ด์์๋ ์ฐ๋ ค๊ฐ ์ ๊ธฐ๋์์ต๋๋ค. ์ธ์ ๋๋ฌธ์ด ์๋๋ผ ๋ฌด๋ฃ ๊ณํ์ ๊ฐ์ฉ์ฑ๊ณผ ํจ๊ป ์ปค๋ฎค๋ํฐ์์ ์ ๋ณํ ๋ฆฌ์์ค์ ๋ํ ์ก์ธ์ค๋ฅผ ์์ ๊ฒ์ด๋ผ๋ ๋๋ ค์ ๋๋ฌธ์ ๋๋ค.
UI๋ฅผ ๋์์ธํ๊ณ ์ถ์์ง ์ฌ๋ถ์ ๊ด๊ณ์์ด ์๋ํ๋ ์ค ์น์ฌ์ดํธ ๋๋ ์ด๋ค ์ฑ์ ์ฌ์ฉํ๋ Figma์ ๋จ์ ์ด ๋ฐ์ํ ์ ์์ต๋๋ค. Figma ๋์์ด ํ์ํ ์ด์ ๋ฅผ ๊ฐ๋จํ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
- ์ฌ์ฉํ๊ธฐ ์ด๋ ค์ด ์์ฉ ํ๋ก๊ทธ๋จ
- ์คํํ๋ ค๋ฉด ๊ณ ๊ธ ์์คํ ์ด ํ์ํฉ๋๋ค.
- ํ๋/์ถ์ ๊ธฐ๋ฅ์ด ๋ง์กฑ์ค๋ฝ์ง ์์ต๋๋ค.
- ๋์์ด๋ ์จ๋ณด๋ฉ์ ํฐ ๋์ ์ ๋๋ค
- ํ๋ฆฌ๋ฏธ์ ํ๋์ ์์ฐ ์นํ์ ์ด์ง ์์ต๋๋ค.
์ ํํ ์ ์๋ ์์ 6๊ฐ ๋ฌด๋ฃ Figma ๋์:
์ด์ ํ ์๊ฐ์ด๋ค ๋ฌด๋ฃ ๋ฐ ์คํ ์์ค Figma ๋์ ์์ 6๊ฐ๋ฅผ ์๊ฐ๋ฐ์ผ์ธ์.. ๋๋ ์คํ ์์ค Figma ๋์์ ๋ํ ์ฌ์ธต์ ์ธ ์ฐ๊ตฌ๋ฅผ ์ํํ์ต๋๋ค. UI์ ์ต๊ณ ๊ทธ๋ฆฌ๊ณ UX ๋์์ธ ๋๊ตฌ. ์ด๋ฌํ Figma์ ๊ฐ์ ๋๊ตฌ๋ ๊ธฐ๋ฅ์ด ํ๋ถํ๊ณ ์ฌ์ฉ์ ์นํ์ ์ด๋ฉฐ UI ๋ฐ UX ๋์์ธ์ ์ ์ฉํฉ๋๋ค. ํ์ธํด ๋ณผ๊น์-
์ธ๋น์ :
์ธ๋น์ ์ ํ๋กํ ํ์ดํ ๋๊ตฌ ๊ทธ๋ฆฌ๊ณ Figma์ ๋ํ ํฌ๋ํน ๋์์ด ์์ต๋๋ค. ์ด๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค/๊ฒฝํ์ ๋์์ธ๊ณผ ๊ฐ๋ฐ ๋ชจ๋์ ํ์ฉ๋ฉ๋๋ค. InVision์ ํ์์ ํ๋ซํผ์ด์ง๋ง ์ข์ ์ ์ ํ์๊ณผ ๋นํ์ ๋ชจ๋๊ฐ ํ๋ก์ ํธ์ ๋ํด ํ์ ํ ์ ์๋ค๋ ๊ฒ์ ๋๋ค.
InVision์ ํ์ด ํจ์จ์ ์ผ๋ก ํ์ ํ๊ณ ์๋ก ๋ ๋น ๋ฅด๊ฒ ์กฐ์ ํ ์ ์๋ ์ค์๊ฐ ์์ ๊ณต๊ฐ์ ์๋ํฉ๋๋ค. Figma์ ๋๋ฑํ ํ์ ๊ธฐ๋ฅ์ ํตํด ํ๋ก์ ํธ์ ์ฐธ์ฌํ๋ ๋์์ด๋๋ ์ฝ๊ฒ ๋๊ธ์ ์ถ๊ฐํ๊ณ ๋ณผ ์ ์์ผ๋ฉฐ ์๊ฐ์ ์ผ๋ก ๋ธ๋ ์ธ์คํ ๋ฐํ ์ ์์ต๋๋ค.
๋์์ด๋๋ฟ๋ง ์๋๋ผ ๊ฐ๋ฐ์๋ ์์ ์ ์ธ๋ถ ์ฌํญ์ ๋งค์ฐ ํธ์ํ๊ฒ ์ ๋ฌํ ์ ์์ต๋๋ค. Figma์ ๋นํด ์ ๊ทธ๋ ์ด๋ ๊ฐ๊ฒฉ์ ํจ์ฌ ๋ ๊ฒฝ์๋ ฅ ์๊ณ ์ ์ฐํฉ๋๋ค. ๋ฌด๋ฃ ํ๋์์๋ 10๋ช ์ ํ์ฑ ์ฌ์ฉ์๊ฐ 3๊ฐ์ ๋ฌธ์๋ฅผ ์์ฑํ ์ ์์ต๋๋ค. InVision์ ํ๋ฆฌ๋ฏธ์ ํ๋์ ๋ ๋ง์ ๊ธฐ๋ฅ๊ณผ ํํ์ ์ ๊ณตํฉ๋๋ค.
ํต์ฌ ํ์ด๋ผ์ดํธ:
- ์๋ง์ ์ฌ์ฉ์ ์ ์ ์ต์ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค
- ๊ฐ๋จํ๊ณ ์ง๊ด์
- ๋ฌด๋ฃ ํ๋์์๋ 10๋ช ์ ํ์ฑ ์ฌ์ฉ์์ 3๊ฐ์ ๋ฌธ์ ์์ฑ์ด ๊ฐ๋ฅํฉ๋๋ค.ย
- ๋์์ด๋๋ฅผ ์ํ ๊ฐํธํ ํ๋ก์ ํธ ๊ด๋ฆฌ
- ๋์์ธ ํ์ ๋ฐ ์กฐ์ง
- ๋์์ธ ์ฝ๋ฉํธ ๋ฐ ํผ๋๋ฐฑ
์ฅ์ :
- ์ต์ ํ๋ ์จ๋ณด๋ฉ ํ๋ก์ธ์ค
- ๋์์ธ์ ๋ํ ํต์ ๋ ฅ์ด ๋ฐ์ด๋จ
- Slack, Sketch, Microsoft Teams, Adobe ๋ฑ๊ณผ ๊ฐ์ ์ฌ๋ฌ ํ๋ซํผ๊ณผ ํตํฉ๋ฉ๋๋ค.
- ํ๋ฆฌ๋์๋ถํฐ ๊ธ๋ก๋ฒ ๊ธฐ์ ๊น์ง ๋ชจ๋๋ฅผ ์ํด ์ค๊ณ๋์์ต๋๋ค.
- ๋ฒ์ ๊ธฐ๋ก ์ฌ์ฉ ๊ฐ๋ฅ
๋จ์ :
- ๋๊ท๋ชจ ํ์๋ ๊ฐ๊ฒฉ์ด ๋น์
- ๋๋๋ก ํตํฉ์ด ๋ถ์์ ํ ์ ์์ต๋๋ค.
Quant-UX:
Quant-UX์๋ ๊ฒฌ๊ณ ํ ๋์์ธ ์ธํฐํ์ด์ค Figma๋ฅผ ๋์ฒดํ๊ธฐ ์ํด ์ ๊ฒฝ์ํฉ๋๋ค. ์ด ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐ์์๊ฒ ํธ๋์คํ ํ๋ก์ธ์ค๋ฅผ ์ต๋ํ ์ฝ๊ณ ํธ๋ฆฌํ๊ฒ ๋ง๋๋ ๋ฐ ์ค์ ์ ๋๊ณ ์์ต๋๋ค. Quant-UX์๋ ๋ฐ์ด๋ ๊ธฐ๋ฅ์ด ํฌํจ๋์ด ์์ผ๋ฉฐ ๋์์ธ ๋ก์ง๊ณผ ๋น์ฆ๋์ค ๋ก์ง์ ๋ถ๋ฆฌํ๋ ๊ธฐ๋ฅ์ด ์์ต๋๋ค.
์ด๋ ์ฆ์ ์ฝ๋๋ฅผ ์์ฑํ๋ QUX ๊ตฌ์ฑ ์์๋ฅผ ํ์ฉํ์ฌ ์คํ๋ฉ๋๋ค. ์ด ํ๋กํ ํ์ ๋์์ธ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ง์ถคํ ํ๋กํ ํ์ ์ ๋ง๋ค ์ ์์ต๋๋ค. Android ํด๋ํฐ, iPhone ๋๋ ๋ฐ์คํฌํฑ์ ์ฌ์ฉ ๊ฐ๋ฅํ ํ๋ฉด ํฌ๊ธฐ๋ฅผ ์ ํํ ์๋ ์์ต๋๋ค.
Quant-UX์ ๋์ ๋๋ ์ธก๋ฉด ์ค ํ๋๋ ์๋ก์ด ๊ธฐ๋ฅ์ด ์ง์์ ์ผ๋ก ์ถ๊ฐ๋๋ค๋ ๊ฒ์ ๋๋ค. ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋์์ธ์ ๊ฐ์ ธ์ค๊ฑฐ๋ ๊ฐ๋จํ ๋ชจํ์ ๋ง๋ค ์ ์๋๋ก ํ์ฌ ํ ์คํธ์ ์ค์ ์ ๋ก๋๋ค. ๊ฒ๋ค๊ฐ ์ด ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ์ ํ์ง ์๊ณ ๋ ํน์ ํญ๋ชฉ์ ์ก์ธ์คํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ๋ชจ๋ ๊ธฐ๋ฅ์ ์ด์ฉํ๋ ค๋ฉด ๊ณ์ ์ ๊ฐ์ ํด์ผ ํฉ๋๋ค.
ํต์ฌ ํ์ด๋ผ์ดํธ:
- ํ๋กํ ํ์ดํ ๋ฐ ํ ์คํธ๋ฅผ ์ํ ํ๋ฅญํ ๋๊ตฌ
- ํ์๊ฐ์ ์์ด ์ ํ๋ ์ก์ธ์ค ์ ๊ณต
- ์๋ก์ด ๋ฒ ํ ๊ธฐ๋ฅ์ด ์ง์์ ์ผ๋ก ์ถ๊ฐ๋ฉ๋๋ค.
- ์์ฒด ํธ์คํธ ์ต์ ์ฌ์ฉ ๊ฐ๋ฅ
์ฅ์
- ์๊ฐ์ ๋์์ธ์ ์ํ ๊ฐ๋ ฅํ ๋๊ตฌ
- HTML, CSS ๋ฑ์ ์ฝ๋ ์์ฑ์ด ์ฆ์ ์ด๋ฃจ์ด์ง๋๋ค.
- UI์ ๋น์ฆ๋์ค ๋ก์ง์ด ๋ณ๋๋ก ํ์๋์ด ๋์์ด๋์ ๊ฐ๋ฐ์๊ฐ ๋๊ตฌ๋ฅผ ๋ ์์ ๋กญ๊ฒ ์ ํํ ์ ์์ต๋๋ค.
- ํ๋ถํ ์์ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ฐ์ถ ๊ตฌ์ฑ ์์ ์คํ์ผ๋ง ์ ๊ณต
- ๊ฐ์ฅ ์ค์ํ ๊ฒ์ 100% ์คํ ์์ค์ ๋๋ค.
๋จ์
- ์น ์ ํ๋ฆฌ์ผ์ด์ ์ผ๋ก๋ง ์ฌ์ฉ ๊ฐ๋ฅํ๋ฉฐ ๋ค์ด๋ก๋ ์ต์ ์ ์์ต๋๋ค.
- ์์ฐ์ ๋ํ ์ ํ๋ ํต์ ๋ฅผ ์ ๊ณตํฉ๋๋ค.
Wondershare Mockitt๋ Figma์ ์ ์ฌํ ๋ ๋ค๋ฅธ UI ๋์์ธ ๋๊ตฌ์ ๋๋ค. ๋ฟ๋ง ์๋๋ผ ๊ธฐ๋ฅ ์กฐ์ ๋ฐ ํ์ ๊ธฐ๋ฅ ์ ๊ณต, ํ์ง๋ง ๊ทธ๊ฒ๋ ๋ ๋์ OS ํ๋ซํผ ์ง์์ ์ ๊ณตํฉ๋๋ค.. ์ด๋ฌํ ํ๋ซํผ์๋ ์ค์๊ฐ ๋๊ธฐํ ๊ธฐ๋ฅ์ ๊ฐ์ถ ๋ธ๋ผ์ฐ์ , Windows, macOS ๋ฐ Ubuntu(Linux)๊ฐ ํฌํจ๋ฉ๋๋ค.
๋จ์ํ UI์ด์ง๋ง ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ๊ฐ์ถ ๋์์ธ ๋๊ตฌ๋ฅผ ์ฐพ๊ณ ์๋ค๋ฉด Mockitt๊ฐ ๋น์ ์ ์ํ ํ๋ซํผ์ ๋๋ค. ํ์ต ๊ณก์ ์ด ์ ํ ์๊ธฐ ๋๋ฌธ์ ์ด๋ณด์๋ ์ด ์ง๊ด์ ์ธ UI/UX ๋์์ธ ์ฑ์ ๋ฐฐํฌํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ํํ์ ๋ชจ์์ ์ง์คํ ์ ์๋๋ก ํฝ์ ๋จ์๊น์ง ์๋ฒฝํ๊ณ ํ์ฅ ๊ฐ๋ฅํ ๋ฒกํฐ ๊ทธ๋ํฝ์ ์์ฑํ ์ ์์ต๋๋ค.
ํต์ฌ ํ์ด๋ผ์ดํธ:
- ๋ชจ๋ ๋์์ธ ๊ด๋ จ ์์ด์ฝ, ๊ตฌ์ฑ ์์, ์์ ฏ ๋ฐ ํ ํ๋ฆฟ์ด ํฌํจ๋ ๋๊ท๋ชจ ๋ฌด๋ฃ ์์ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- ๋ค์ํ๊ณ ํ๋ถํ ๋์์ธ ๋๊ตฌย
- ํด๋ผ์ด์ธํธ ํ๋ ์ ํ ์ด์ ์ ๋์ฑ ๋๋ณด์ด๊ฒ ๋ง๋๋ ๋ค์ํ ํ๋ ์ ํ ์ด์ ๋ชจ๋
- ๋ฐ์คํฌํฑ ๋ฐ ๋ชจ๋ฐ์ผ ์ฅ์น์์ ๋ณผ ์ ์๋๋ก ํ๋กํ ํ์ ์ ์ฝ๊ฒ ๊ณต์
- ์ง์ ๋ธ๋ผ์ฐ์ ์ก์ธ์ค๋ฅผ ์ํ ํด๋ผ์ฐ๋ ๋ฒ์ ๊ฐ์ฉ์ฑ
- ๋์์ด๋์ ์ ๋ฌด๋ฅผ ์์ ๋กญ๊ฒ ํ๊ณ ๊ฐ๋ฐ์์ ์ญ๋์ ๊ฐํํ๋ ์ฒ ์ ํ ํธ๋์คํ ๋ฉ์ปค๋์ฆ
์ฅ์ :
- ๋น ๋ฅด๊ณ ๋ฐ์์ด ๋น ๋ฅธ ์ธํฐํ์ด์ค
- 500๊ฐ ์ด์์ ์์ ฏ๊ณผ ํ ํ๋ฆฟ ์ ๊ณต
- ์ฌ๋ฌ ํ๋ก์ ํธ๋ฅผ ๊ณต๋ ํธ์งํ๊ณ ๊ณต๋ ๊ด๋ฆฌ
- ๋ง์ถคํ ๊ตฌ์ฑ์์๋ฅผ ๊ฐ์ถ ํฌ๊ด์ ์ธ ์ค๊ณ ๋๊ตฌ
- ๊ด๋ฒ์ํ ์์ฐ ๋ฐ ํจ๊ณผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- ๋จ์ผ ๊ณ์ ์ผ๋ก ์ด๋์๋ ์์ ํ ์ ์๋ ์์ค
- ํ๋ซํผ ๋ ๋ฆฝ์
๋จ์ :
- ๋ฌด๋ฃ ๋ฒ์ ์์๋ ์ ํ๋ ํ๋ฉด ์ฌ์ฉ ๊ฐ๋ฅ
์์ด์ดํ๋ก์ฐ:
Wireflow๋ ์น ์ฌ์ดํธ, ์ฑ ๋ฐ ๋์งํธ ์ ํ์ ๋งคํน์ ์ธ ํ๋กํ ํ์ ์ ๋์์ธํ ์ ์๋ ๋ฐ์ด๋ ์ฌ์ฉ์ ํ๋ฆ ํ๋กํ ํ์ ๋๊ตฌ์ ๋๋ค. ๋์์ธ ๋๊ตฌ์ ํน๋ณํ ๋งค๋ ฅ์ ์ ๋ฃ ์ต์ ์ด ์๋ค๋ ๊ฒ์ ๋๋ค. ์ฆ, ๋ฌด๋ฃ๋ก ์ฌ์ฉํ ์ ์๋ค๋ ๋ป์ ๋๋ค.
๊ฒ๋ค๊ฐ ๋๊ตฌ์ ์ก์ธ์คํ๊ธฐ ์ํด ๊ณ์ ์ ๊ฐ์ ํ ํ์๊ฐ ์์ต๋๋ค. ๋น์ ์ด ํด์ผ ํ ์ผ์ ๊ทธ๋ค์ ์น์ฌ์ดํธ๋ฅผ ๋ฐฉ๋ฌธํ์ฌ ๋ฐ๋ก ์์ํ๋ ๊ฒ๋ฟ์ ๋๋ค. ๊ทธ๋ฐ ๋ค์ ๋ธ๋ ์ธ์คํ ๋ฐ์ ํ๊ณ ๋ค๋ฅธ ์ฌ๋๋ค๊ณผ ํ๋ ฅํ์ฌ ํ๋ก์ ํธ๋ฅผ ๊ณํํ ์ ์์ต๋๋ค.
2021๋ ์ดํ Wireflow์ ๋ํ ์ต๊ทผ ๊ฐ๋ฐ ํ๋์ด ์์์์๋ ๋ถ๊ตฌํ๊ณ ์ฌ์ ํ ํ๋ ์ค์ด๋ฉฐ ๋ฌด๋ฃ ์คํ ์์ค ์๋ฃจ์ ์ ์ํ ์ต๊ณ ์ ์ ํ ์ค ํ๋๋ก ๋จ์ ์์ต๋๋ค. Wireflow์ ๋ํ ์์ธํ ๋ด์ฉ์ GitHub ํ์ด์ง๋ฅผ ํ์ธํ์ธ์.
ํต์ฌ ํ์ด๋ผ์ดํธ:
- ์์ ๋ฌด๋ฃ๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ํ๋ฆฌ๋ฏธ์ ์ต์ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค
- ์ ๊ทน์ ์ผ๋ก ์ ์ง๋์ง ์์
์ฅ์ :
- ๋ ๋์ ํ์ ์ ๊ณต
- ํ๋ก์ ํธ ์ค์์ ๊ฐ๋น์ผ ์ฌ์ค๊ณ ๋ฐฉ์ง
- ๋ธ๋ ์ธ์คํ ๋ฐ ๋๊ตฌ ํฌ๋์ปค
๋จ์ :
- ์์ธํ ์ฌ์ฉ์ ํ๋ฆ์ด ๋ถ์กฑํฉ๋๋ค.
ํํ:
Penpot์ UI ๋ฐ UX ๋์์ด๋๋ค ์ฌ์ด์์ ๋น ๋ฅธ ๊ด์ฌ์ ๋ฐ๊ณ ์์ผ๋ฉฐ ๊ฒฌ๊ณ ํ Figma์ ์ ์ฌํ ์ํํธ์จ์ด ๋๋ ์ฌ์ง์ด Figma ํฌ๋ฌ๋ก๋ ์ ์๋ฆฌ์ก๊ณ ์์ต๋๋ค. ์ฌ์ฉ์๋ ๋ถ๋ช ํ ๋๊ตฌ์ ํด๋น ์๋น์ค๋ฅผ ์ข์ํฉ๋๋ค. ์ฃผ๋ก ๋๋ฉ์ธ ๊ฐ ํ์ ์ํด ์ค๊ณ๋์์ต๋๋ค.
Penpot์ ์ด์ ์ฒด์ ์ ๋ ๋ฆฝ์ ์ด๋ฉฐ ์์ ํ ์น ๊ธฐ๋ฐ ํ๋ซํผ์ ๋๋ค. Penpot์ด ๋์ ๋๋ ์ด์ ๋ SVG๋ฅผ ๊ธฐ๋ณธ ํ์์ผ๋ก ๋ฐฐํฌํ๋ค๋ ์ ์ ๋๋ค. ์ด๋ ๋๋ฌผ์ง๋ง ๋์์ด๋์๊ฒ ์๋นํ ์ด์ ์ ์ ๊ณตํฉ๋๋ค.
ํต์ฌ ํ์ด๋ผ์ดํธ:
- ์์ฒด ํธ์คํ ์ต์ ์ฌ์ฉ ๊ฐ๋ฅ
- SVG๋ฅผ ๊ธฐ๋ณธ ํ์์ผ๋ก ํ์ฉํฉ๋๋ค.
- ์์ ํ ์น ๊ธฐ๋ฐ์ด๋ฉฐ ํฌ๋ก์ค ํ๋ซํผ ๋๊ตฌ์ ๋๋ค.
- ์ปค๋ฎค๋ํฐ ๊ธฐ๋ฐ
์ฅ์ :
- ์คํ ์์ค ๋ฐ ์น ๊ธฐ๋ฐ ํ๋ซํผ
- ํ๋ ํธ ํตํฉ
- ๋๊ตฌ์ ํตํฉ๋ ํผ๋๋ฐฑ
- ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ UI ํคํธ ์ฌ์ฉ ๊ฐ๋ฅ
๋จ์ :
- ์ ํ๋ ์์ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
์ฐํ ํ๋ก์ ํธ:
๊ทธ๋ํฝ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๋๊ตฌ์ธ Pencil Project๋ ๋์์ด๋์ ๊ฐ๋ฐ์ ๋ชจ๋๊ฐ ํ์ฉํฉ๋๋ค. ๊ทธ๋ค์ ์ด๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ๋ด์ฅ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ ์น์ฌ์ดํธ ์์ด์ดํ๋ ์, ํ๋กํ ํ์ ๋ฐ ๋ชจํ์ ๊ตฌ์ถํฉ๋๋ค. ์ด ๊ธ์์๋ ๋ฌด๋ฃ ์คํ ์์ค ๋๊ตฌ๋ฅผ ๋ค๋ฃจ๊ธฐ ๋๋ฌธ์ Pencil Project๋ ์ ๊ณตํ๋ ๊ธฐ๋ฅ์ ๊ณ ๋ คํ ๋ ์ต๊ณ ์ ์ ํ ์ค ํ๋์ ๋๋ค.
Pencil Project๋ GUI๋ฅผ ์ฒ์๋ถํฐ ๋์์ธํ๊ธฐ ์ํ ๋๊ตฌ๋ฅผ ๋ฐฐํฌํ๋ ๊ฒ ์ธ์๋ ๋ค์ํ ๋์์ธ ๋ฒ์ฃผ์ ๋ํด ์ฌ์ ์ ์๋ ๋ชจ์์ ํตํฉํฉ๋๋ค. Pencil ํ๋ก์ ํธ๋ Figma์ ๋ฌ๋ฆฌ ๋ฒกํฐ ๊ธฐ๋ฐ์ด ์๋๋๋ค. ๋์ ํด๋น ํ๋ก์ ํธ๋ ์น ํ์ด์ง, PNG ํ์ผ, PDF ๋๋ SVG ํ์ผ๋ก ๋ด๋ณด๋ด์ง๋๋ค.
ํต์ฌ ํ์ด๋ผ์ดํธ:
- ๋ฌด๋ฃ ๋ฐ ์คํ ์์ค
- ํ๋ฐํธ์๋์ ์ฝ๊ณ ๋์์ด ๋จ
- PNG, SVG, PDF ๋ฑ ๋ค์ํ ํ์ผ ํ์์ผ๋ก ๋ด๋ณด๋ผ ์ ์์ต๋๋ค.
- ์๋๋ก์ด๋์ ๋ฐ์คํฌํฑ ๋ชจ๋๋ฅผ ์ํ ์์ด์ดํ๋ ์, ํ๋กํ ํ์ , ๋ชจํ ๋์์ธ ๊ฐ๋ฅ
์ฅ์ :
- Android ๋๋ IOS ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ๊ธฐ ์ํ ์ ์ฐํ ๋๊ตฌ์ ๋๋ค.
- ํ๋กํ ํ์ ์ ์๊ณผ ์์ด์ดํ๋ ์ ๋์์ธ์ ์ํ ์๋ฒฝํ ๋๊ตฌ์ ๋๋ค.
- ๋ชจํ ๋์์ธ ์์ ์ ํ์ด ์์ผ๋ฉฐ ์ฌ๋๋ค๊ณผ ๊ณต์ ํ ์ ์์ต๋๋ค.
๋จ์ :
- ์คํ์ด ์กฐ๊ธ ๋๋ฆผ
- ์ฌ์ฉ์ ์ธํฐํ์ด์ค๊ฐ ๊ตฌ์์ ๋๋ค.
๋น์ ์๊ฒ๋ก
์์ฝํ์๋ฉด, Figma๋ ์ฅ์ํ UI์ด๋ฉฐ UX ๋์์ธ ๋๊ตฌ์ด๋ฉฐ ๊ทธ๊ฒ์ ๋ํด ์์ฌ์ ์ฌ์ง๊ฐ ์์ต๋๋ค. ๊ทธ๋ผ์๋ ๋ถ๊ตฌํ๊ณ UI ๋ฐ UX ๋์์ด๋ ์ค ์๋น์๋ Figma๋ฅผ ์ต๊ณ ์ ๋์์ธ ๋๊ตฌ๋ก ์ฌ๊ธฐ๊ณ ์์ต๋๋ค. ํ๋กํ ํ์ ์ ์, ์์ด์ดํ๋ ์ ์ ์ ๋๋ ์์ ํ ์ธํฐํ์ด์ค ๋์์ธ ๋ฑ ๋ฌด์์ ์ํ ๊ฒ์ด๋ Figma๋ ์ฌ์ ํ ์ต๊ณ ์ ์ ํ์ ๋๋ค.
๊ทธ๋ฌ๋ ์ด๊ฒ์ด Figma ๋์์ ์๊ฐํด์๋ ์ ๋๋ค๋ ์๋ฏธ๋ ์๋๋๋ค. ์ค์ ๋ก UI์ UX ๋์์ธ์ ๋ชจ๋ ๋ง์คํฐํ๋ ค๋ฉด ์ ์ฌํ ๋ค๋ฅธ ๋์์ธ ์ฑ๊ณผ ๋๊ตฌ์ ๋ํ ์ญ๋์ด ์์ด์ผ ํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๋ฌํ ๋๊ตฌ ์ค ์ผ๋ถ๊ฐ ์คํ ์์ค๋ผ๋ฉด ๊ธ์์ฒจํ์ ๋๋ค.
์ด๊ฒ์ด ๋ฐ๋ก ์ด ๊ธ์ด ์ต๊ณ ์ ๋ฌด๋ฃ Figma ๋์ 6๊ฐ์ ์ด์ ์ ๋ง์ถ๊ณ ์์ฝํ ๊ฒ์ ๋๋ค. ์ ์ฉํ๊ณ ํธ๋ฆฌํ๋ค๊ณ ์๊ฐ๋๋ ๊ฒ์ ์ ํํ๋ ๊ฒ์ด ๊ฐ์ฅ ์ข์ต๋๋ค. ๋ค๊ฐ์ค๋ ๋์์ธ ํ๋ก์ ํธ์ ์ต์ ์ ๋คํ๊ธธ ๋ฐ๋๋๋ค! ๋น์ฌ์ ๋น์ฌ ์ ํ์ ๋ํด ๋ ์์ธํ ์๊ณ ์ถ์ผ์๋ฉด ๋น์ฌ ์น์ฌ์ดํธ๋ฅผ ๋ฐฉ๋ฌธํ์ญ์์ค.
๋ต๊ธ์ฐ๊ธฐ