๐ 2021๋ 12์ 5์ฃผ TOP3
- ์ด์ฌ์๋ฅผ ์ํ 5๊ฐ์ง ์ฃผ์ UI ๋์์ธ ์์น
- ์ ์ฉํ Figma ํ๋ฌ๊ทธ์ธ 12๊ฐ์ง
- UX ๋์์ธ์ ๋ฐฐ์ฐ๋ ๋์ ์ ์ง๋ฅธ ๋์ ์ค์
์ด์ฌ์๋ฅผ ์ํ 5๊ฐ์ง ์ฃผ์ UI ๋์์ธ ์์น
์ ์ UI ๋์์ด๋๋ค์ ์ํ ์ฌ์ด ๊ธฐ๋ณธ ๋์์ธ ์์น ๊ฐ์ด๋
์ ์ UI ๋์์ด๋๋ค์ ์ํ ์ฌ์ด ๊ธฐ๋ณธ ๋์์ธ ์์น ๊ฐ์ด๋์ ์ ์ธํฐํ์ด์ค(UI) ๋์์ธ์ ๋ฒํผ์ ํด๋ฆญํ์ฌ ์์์ ์ ์ถํ๊ฑฐ๋ ์ฌ์ง ๊ฐค๋ฌ๋ฆฌ๋ฅผ ์คํฌ๋กคํ๋ ๋ฑ ๋์งํธ ํ๋ก๋ํธ์ ํต์ ํ๊ณ ์ํธ ์์ฉํ ์ ์์ต๋๋ค.
ํ๋ฅญํ UI ๋์์ธ์ ์ฌ์ฉ์๊ฐ ์์์ฐจ๋ฆฌ์ง๋ ๋ชปํ๋ ๋์์ ์ํํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํด์ฃผ๋ ๊ฒ์ ๋๋ค. ๋์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ ์ข์ ๊ฐ์ ๋ถ๋ฌ์ผ์ผํค๊ฒ ๋๊ณ ์ฌ์ฉ์๊ฐ ํ๋ก๋ํธ๋ฅผ ํฌ๊ธฐํ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค.
์ด์ ์ฐ๋ฆฌ๋ ์ฌ์ฉ์ ์นํ์ ์ธ UI ๋์์ธ์ด ์ ์ค์ํ์ง ์์์ต๋๋ค. ๊ทธ๋ผ ์ด์ ๋์์ธ์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ํด์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๋ชจ๋ ๋์์ด๋๋ค์ ๊ณ ์ฑ๋ฅ์ UI๋ฅผ ๋ง๋๋ ๋์ ์ผ๋ จ์ ์์น๊ณผ ์ง์นจ๋ค์ ์ผ๋์ ๋ก๋๋ค. ์ด๋ฌํ ๋์์ธ ์์น์ ์๋ ๊ฒ์ ๋์์ธ์ ๊ฐ์ ํ๊ณ ๋์์ธ ๋ถ์ผ์์ ์ฑ๊ณต์ ์ธ ๊ฒฝ๋ ฅ์ ๋ณด์ฅํ๋ ์ด์ ๊ฐ ๋ฉ๋๋ค.
๋ค์์ ๋์์ธ์ ํ ๋ ์ผ๋์ ๋์ด์ผ ํ 5๊ฐ์ง ์ฃผ์ ๋์์ธ ์์น๋ค์ ๋๋ค.
1. ์ ๋ช ๋
์ธํฐํ์ด์ค๋ ์ฌ์ฉ์๊ฐ ์์ ์ ๋ ์ฝ๊ฒ ์ํํ ์ ์๋๋ก ํ๊ธฐ ์ํ ๊ฒ์ ๋๋ค. ์ฌ์ฉ์๊ฐ ์ธํฐํ์ด์ค๋ฅผ ํ์ํ๋ ๋ฐฉ๋ฒ์ ์ดํดํ์ง ๋ชปํ๋ฉด ๋ชจ๋ ๋ชฉ์ ์ ์๊ฒ ๋ฉ๋๋ค.
๋์์ธ์ ๊นจ๋ํ๊ฒ ์ ์งํ๊ณ ์ฌ์ฉ์์๊ฒ ๋ชฉ์ ์ ์ ๊ณตํ์ง ์๋ ๋ฒํผ์ด๋ ๊ธฐํ ๋ฐฉํด์ ์ธ ์์๋ฅผ ์ฌ์ฉํ์ง ๋ง์ธ์. ์ฌ์ฉ์๊ฐ ๋ฌด์จ ์ผ์ด ์ผ์ด๋๊ณ ์๋์ง ์ ํํ ์ ์ ์๋๋ก ๋ช ํํ CTA์ ํผ๋๋ฐฑ์ ์ ๊ณตํ์ธ์.
2. ์ผ๊ด์ฑ
๋น์ ์ ๋์์ธ์ด ํ ๋์ ๋น์ ๋ฌธ์ ์ผ๋ก ๋ณด์ผ ์ ์๋ ํ ๊ฐ์ง๊ฐ ์๋ค๋ฉด, ๊ทธ๊ฒ์ ์ผ๊ด์ฑ์ ๋ถ์กฑ๋๋ฌธ์ ๋๋ค.
์ ์ฌํ ๋์์ธ ์์๋ฅผ ์ฌ์ฉํ๋ฉด ๋์์ธ์ด ์ ์ฒด์ ์ผ๋ก ์ฐ๊ฒฐ๋์ด ๋ณด์ ๋๋ค. ํ์์ ๋์ผํ ์ ํ์ ์์ด์ฝ์ ์ฌ์ฉํ๊ณ ์์ ๊ตฌ์ฑํ๋ฅผ ๊ณ ์ํ์ฌ ๋์์ธ์ ์ผ๊ด๋๊ฒ ์ ์งํ์ธ์.
์ ๋ฌธ๊ฐ ํ: ๋์์ธ์ ์ฌ์ฉํ ๋ฉ์ง๊ณ ์ผ๊ด๋ ์์ด์ฝ ๋ชจ์์ ์์ด์ฝ ํฉ์ ํ๋ฒ ์ฌ์ฉํด๋ณด์ธ์. ์ฌ๊ธฐ์๋ ๋ด๊ฐ ์ ์ํ๋ ๊ฒ๋ค์ด ์์ต๋๋ค.
3. ์ ์ด๋ก
์ด ์ ์ฒด ์ํฐํด์์ ์ค๋ช ํ ์ ์๋ ๊ฒ๋ณด๋ค ์์์๋ ๋ ๋ง์ ๊ฒ๋ค์ด ์์ผ๋ฏ๋ก ์ด์ ๋ํด ์์ธํ ์ค๋ช ํ๋ ๋ค๋ฅธ ์ํฐํด์ ์ถํ์ ์์ฑํ๊ฒ ์ต๋๋ค. ๊ทธ๋ฌ๋ ์ง๊ธ์ ๊ธฐ๋ณธ์ ์ถฉ์คํฉ์๋ค.
์์์ ๋ํด ์ดํดํด์ผ ํ๋ ์ธ ๊ฐ์ง ์ฉ์ด๊ฐ ์์ต๋๋ค:
Hue, Saturation ๋ฐ Value.
Hue
Hue๋ ๋ฐ์์ด๋ ์ด๋์์ ๋ณํ๊ฐ ์๋ ์์ฐ ์ํ์ ์์์ ๋๋ค. ์๋ฅผ ๋ค์ด ๋นจ๊ฐ, ํ๋, ๋ น์ ๋ฑ์ด ์์ต๋๋ค.
Saturation
์ฑ๋๋ ์์์ ๊ฐ๋๋ฅผ ๋ํ๋ ๋๋ค. ์ฑ๋๊ฐ ๋ฎ์์๋ก ํ์๋น์ด ๊ฐ๋๋ ํ๋ฆฟํ ์์์ ์๋ฏธํ๊ณ ์ฑ๋๊ฐ ๋์์๋ก ๋ฐ๊ณ ์ ๋ช ํ ์์์ ์๋ฏธํฉ๋๋ค.
Value
์ด์ Value์ ๋ํด ๋ ผ์ํด ๋ณด๊ฒ ์ต๋๋ค. ์ด ์์ ๊ฐ์ ๊ฐ ์์์ ๋ช ์ ์ ๋๋ฅผ ๋ํ๋ ๋๋ค. ๊ฐ์ด 0%์ด๋ฉด ํฐ์์ด ๋๊ณ ๊ฐ์ด 100%์ด๋ฉด ๊ฒ์ ์์ด ๋ฉ๋๋ค.
์ ๊ตฌ์ฑํ ๋ง๋ค๊ธฐ
์, ๊ทธ๋ผ ์ด์ ์ด๋ฌํ ์ฉ์ด๋ฅผ ์ดํดํ์ผ๋ฏ๋ก ์์์ ์กฐํ๋กญ๊ฒ ์ฌ์ฉํ์ฌ ๋์์ธ์ ๋ฉ์ง ์์ ๊ตฌ์ฑํ๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์์์ผ ํฉ๋๋ค.
์๋ ์ด๋ฏธ์ง๋ ์์์ ์กฐํ์ ๊ฒฐํฉํ๋ ๋ค์ํ ๋ฐฉ๋ฒ์ ์ค๋ช ํฉ๋๋ค.
60โ30โ10 ๊ท์น
์ด๋ณด์๊ฐ ์ ๊ตฌ์ฑํ๋ฅผ ๋ง๋ค ๋ ์ฐธ๊ณ ํ ์ข์ ๋ฐฉ๋ฒ์ ๋ฐ๋ก ์ธ ๊ฐ์ง ์์์ ์ ํํ๋ ๊ฒ์ ๋๋ค.
๊ทธ ์ค ํ๋๋ฅผ Dominant/Primary ์์์ผ๋ก ์ ํํ์ฌ ๋์์ธ์ 60%์ ์ฌ์ฉํฉ๋๋ค.
Secondary ์์์ ์ ํํ์ฌ ๋์์ธ์ 30%์ ์ฌ์ฉํฉ๋๋ค.
๋๋จธ์ง ์ธ ๋ฒ์งธ ์์์ CTA ๋ฐ ์ฆ๊ฐ์ ์ธ ์ฃผ์๊ฐ ํ์ํ ์์์ ์ฌ์ฉ๋๋ Accent ์์์ ๋๋ค.
..
๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
์ ์ฉํ Figma ํ๋ฌ๊ทธ์ธ 12๊ฐ์ง
ํ๋ก์ ํธ ์์ ์ ์ฌ์ฉ๋๋ Figma ์์ ์ ์ ์ฉํ ํ๋ฌ๊ทธ์ธ๋ค์ ๋ชจ์๋ณด์์ต๋๋ค. ์ฌ๋ฐ๋ฅธ ํ๋ฌ๊ทธ์ธ์ ์ฝ๊ฒ ์ฐพ์ ์ ์๋๋ก 3๊ฐ์ง ๋ฒ์ฃผ๋ก ๋๋์์ต๋๋ค.
์ฝํ ์ธ ์์ฑ์ ์ํ ํ๋ฌ๊ทธ์ธ
Unsplash
Unsplash๋ ๊ฐํธํ ๊ฒ์ ๊ธฐ๋ฅ์ ๊ฐ์ถ ๋ฐฉ๋ํ ์คํก ์ฌ์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. ์ข์ํ๋ ์ฌ์ง ์ฝํ ์ธ ๋ค์ ํ๋ก์ ํธ์ ์ง์ ์ฝ๊ฒ ์ถ๊ฐํ ์ ์์ต๋๋ค.
Icons8 Icons
์์ด์ฝ์ ์ฐพ์ Figma์ ์ง์ ์ถ๊ฐํ๋ ๋ฐ ๋งค์ฐ ์ ์ฉํ ํ๋ฌ๊ทธ์ธ์ ๋๋ค. ์ปฌ๋ ์ ์๋ 38๊ฐ์ง ์คํ์ผ์ 190,000๊ฐ์ ์์ด์ฝ์ด ํฌํจ๋์ด ์์ผ๋ฉฐ ๊ธฐ๋ฐ์ ์ง์์ ์ผ๋ก ํ์ฅ๋๊ณ ์์ต๋๋ค. ๋ชจ๋ PNG ๋ฐ SVG ํ์ผ์ ์์์ ์ผ๋ก ๋ง๋ค์ด์ง ๊ฒ๋ค์ด๋ฉฐ ํฝ์ ํฌ๊ธฐ๊ฐ ์๋ฒฝํฉ๋๋ค.
Streamline Icons
30,000๊ฐ ์ด์์ ์์ด์ฝ ๋ชจ์์ด ์๋ ๋ ๋ค๋ฅธ ํ๋ฌ๊ทธ์ธ์ ๋๋ค. ๊ฐ๊ฐ์ ์์, ์ผ๋ฐ ๋ฐ ๋๊บผ์ด์ 3๊ฐ์ง ์คํ์ผ๋ก ์ ๊ณต๋๋ฏ๋ก ์ ํ์ ํญ์ด ๋์ต๋๋ค.
User Profile
ํ๋กํ ํ์ ๋์์ธ์์ ๋ฉ์ง๊ฒ ์์ฑ๋ ์๋ฐํ๋ค์ ํ์ํ ์ ์์ต๋๋ค.
๊ทธ๋ํฝ ๋ฐ ๋ ์ด์์ ์์ ์ ์ํ ํ๋ฌ๊ทธ์ธ
Color Kit
๋๋๋ก ํน์ ์์์ ์์์ ์์ฑํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด, 45๊ฐ์ ๋ น์ ์์ ์ค 1๊ฐ๋ฅผ ์ฐพ์์ผ ํ๋ ๊ฒฝ์ฐ ์ฌ์ฉ์๋ฅผ ์ฆ๊ฒ๊ฒ ํ ๊ฒ์ ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ง์งํ๊ฒ, ํ๋ก์ ํธ์ฉ UI ํคํธ๋ฅผ ๋ง๋ค ๋๋ ๋์์ด ๋ฉ๋๋ค.
Image Palette
์ ๋ก๋๋ ์ด๋ฏธ์ง๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์์ ํ๋ ํธ๋ฅผ ์์ฑํ๋ ํ๋ฌ๊ทธ์ธ์ ๋๋ค.
Content Buddy
ํ ๋ฒ์ ์ฌ๋ฌ ๋ ์ด์์์ ๋์ผํ ํ ์คํธ๋ฅผ ๊ต์ฒดํด์ผ ํ๋ ๊ฒฝ์ฐ์ ์ด ํ๋ฌ๊ทธ์ธ์ ์ฐ๋ฉด ์์ฐ์ฑ์ด ํฌ๊ฒ ํฅ์๋ฉ๋๋ค. ์ด ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ๋ฉด ๊ฐ ๋ ์ด์์์ ๊ฐ๋ณ์ ์ผ๋ก ์ด ์ ์์ผ๋ฉฐ ํน์ ์์ ๋ ์ด์์(์ต๋ 50๊ฐ)์ ์๋์ผ๋ก ๋ณ๊ฒฝํ ์ ์์ต๋๋ค.
Remove BG
์ด๋ฏธ์ง์ ๋ฐฐ๊ฒฝ์ ์ฆ์ ์ ๊ฑฐํ ์ ์๋ ํ๋ฌ๊ทธ์ธ์ ๋๋ค.
..
๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
UX ๋์์ธ์ ๋ฐฐ์ฐ๋ ๋์ ์ ์ง๋ฅธ ๋์ ์ค์
์ ํ๋ธ์์ Figma Tutorial ์์์ ๋ณธ์ง 4๊ฐ์์ด ๋์์ต๋๋ค. ์ ๋ ๋์ด ์์๊ธฐ ๋๋ฌธ์ ๋ถํธ ์บ ํ์ ๊ฐ์ง ์์์ด์. ์ ๋ ๋ ํ์ผ๋ก ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๊ณต๋ถํ์ต๋๋ค. ์ด ์๊ฐ ๋์ ์ ๋ ์ค์๋ฅผ ํ๊ณ , ์ ์์ ์ ํ๊ฐํ๊ณ , ์๋ก์ด ๊ฒ์ ๋ฐฐ์ ์ต๋๋ค.
๊ทธ๋์ ์ด ๊ธ์ 4๊ฐ์ ๋์ UX ๋์์ธ์ ์๋ชป ๋ฐฐ์ด ์ ๊ฒฝํ์ ๋ํ ๊ฒ์ ๋๋ค. ์ด๊ฒ์ด ์ ๊ฐ ํ ๊ฒ๊ณผ ๊ฐ์ ์ค์๋ฅผ ์ฌ๋ฌ๋ถ์ด ์ ์ง๋ฅด๋ ๊ฒ์ ๋ง์ ์ ์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค.
๊ธฐ์ด๋ฅผ ๋ฐฐ์ฐ์ง ๋ชปํ์ต๋๋ค.
๋๋ ์ด๊ฒ์ด ๋งค์ฐ ๊ณ ์ ์ ์ด๋ผ๋ ๊ฒ์ ์๊ณ ์์ง๋ง, ๋น์ ๋ ๋์ฒ๋ผ ๋ ํ์ผ๋ก ๋ฐฐ์ฐ๋ ์ฌ๋์ด๋ผ๋ฉด '๋ฌด์๋ฏธํ ํ์ต ์งํ'์ ์๊ฐ์ ๋ญ๋นํ์ง ์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค. ๊ทธ๋ ๋ค๋ฉด ์ค๋ฌด์ ๋ค์ด๊ฐ๊ธฐ ์ ์ ์ดํดํด์ผ ํ ๊ธฐ๋ณธ ์ฌํญ์ ๋ฌด์์ผ๊น์?
a. UX์ ๋ฒ์น, ๋ชจ๋ UX ๋์์ด๋๊ฐ ์ดํดํด์ผ ํ ๊ฐ์ฅ ์ค์ํ ๊ธฐ๋ณธ๊ณผ ์์น์ด ์์ต๋๋ค. ์ฌ๊ธฐ์์ ์ฝ์ ์ ์์ต๋๋ค.
b. ์ ์ด๋ก ์ ์์ ํ๋ ํธ๋ฅผ ์ ํํ๋ ๊ฒ์ด ์ ๋ถ๋ผ๊ณ ์๊ฐํ๊ธฐ ๋๋ฌธ์ ์ง๋ฃจํ๊ฒ ๋ค๋ฆด ์ ์์ต๋๋ค. ํ์ง๋ง ๊ทธ๊ฒ์ ๋น์ ์ ๋์์ธ์ ์ข์ ์์์ ์ ํํ๋ ๋ฐฉ๋ฒ ๊ทธ ์ด์์ ๋๋ค. ์์ ์ด๋ก ์ ๋ฐฐ์ฐ๋ฉด ์ด๋ค ์์ ๋ชจ๋ธ์ด ์์ ์๊ฒ ๋ง๋์ง ์ ์๋ ์์ฃ .
c. ํ์ดํฌ๊ทธ๋ํผ๋ ๊ธ์ด ๋๋ ทํ๊ณ ์ดํดํ๊ธฐ ์ฝ๊ณ , ๋งค๋ ฅ์ ์ผ๋ก ์ฝํ ์ ์๋๋ก ํ์๋ฅผ ๋ฐฐ์ดํ๋ ๊ธฐ์ ์ ๋๋ค. ํ์ดํฌ๊ทธ๋ํผ์ ๋ํ ์ดํด๋ UX ๋์์ธ์ ๋ฐฐ์ฐ๊ณ ์ ํ๋ ๋ชจ๋ ์ฌ๋์๊ฒ ํ์์ ๋๋ค.
..
๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
๋๊ธ
์๊ฒฌ์ ๋จ๊ฒจ์ฃผ์ธ์