๐ 2023๋ 8์ 4์ฃผ TOP3
1๏ธโฃ UI ๋์์ธ์ ์ํ ์ฌ์ฉ์ฑ ํด๋ฆฌ์คํฑ: 8๊ฐ์ง ๋ชจ๋ฒ ์ฌ๋ก
2๏ธโฃ UI ๋์์ธ์ ๋๋น - ๋์์ธ ์์น์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ
3๏ธโฃ 6๊ฐ์ง ๋ฉ์ง ์๋ก์ด UI/UX ๋์์ธ ๋๊ตฌ
1๏ธโฃ UI ๋์์ธ์ ์ํ ์ฌ์ฉ์ฑ ํด๋ฆฌ์คํฑ: 8๊ฐ์ง ๋ชจ๋ฒ ์ฌ๋ก
Jakob Nielsen์ ์ด๋ฆ์ด ๋ฌด์ธ๊ฐ๋ฅผ ์๋ ค์ค๋ค๋ฉด, ์๋ง๋ "ํด๋ฆฌ์คํฑ(Heuristics)"์ด ๋ฌด์์ธ์ง ์๊ณ ์์ ๊ฒ์ ๋๋ค. ์ฌ์ค, ํด๋ฆฌ์คํฑ์ ์ธํฐํ์ด์ค์ ์ฌ์ฉ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํ ๋ช ๊ฐ์ง ๊ธฐ๋ณธ์ ์ธ ๊ฒฝํ์ ์ธ ์ง์นจ์ ๋๋ค. ์ ๋ฌธ๊ฐ๋ค์ ์ด๋ฅผ ๊ตฌ์ฒดํํ๊ธฐ๋ก ๊ฒฐ์ ํ๊ณ , ์ด๋ฅผ ํตํด ๊ตฌํํ๊ธฐ ์ํ ๋ชจ๋ฒ ์ฌ๋ก ๋ชฉ๋ก์ ์ป์์ต๋๋ค.
#1: ์ฌ์ฉ์์๊ฒ ์ ๋ณด๋ฅผ ์๋ฆฌ๋ ์งํ ์์ฑ
๊ธฐ์ตํ์ธ์: ๋์์ธ์ ์ฌ์ฉ์์๊ฒ ๊ทธ๋ค์ ๋์ ์ดํ์ ์ด๋ค ์ผ์ด ๋ฐ์ํ๋์ง ํญ์ ์๋ ค์ผ ํฉ๋๋ค. ์ด ์ ๋ณด๋ ํ์ ์ฐฝ, ์๋ก์ด ํ์ด์ง๋ก์ ์ ํ ๋ฑ์ ํตํด ์ต์ํ์ ์๊ฐ ๋ด์ ์ ๋ฌ๋ฉ๋๋ค. ๋ํ ์ด๋ฌํ ์งํ๋ค์ ์ฌ์ฉ์๊ฐ ๋ค์ ๋์์ ์ทจํ ์ ์๋๋ก ์ ๋ํ ์ ์์ด์ผ ํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์๊ฐ ์ต์ข ์ ์ธ ๋ชฉํ ๋์์ ๋๋ฌํ๋ ๋ฐฉ๋ฒ์ ์ดํดํ ์ ์์ต๋๋ค.
#2: ์ฌ์ฉ์์๊ฒ ์๋ฆฌ์ง ์๊ณ ๋ ์ฌ์ฉ์์๊ฒ ์ํฅ์ ๋ฏธ์น๋ ๋์์ ์ํํ์ง ์์์ผ ํฉ๋๋ค
์ฌ์ฉ์์ ๋์์ด ํน์ ํ ์ค๋ฅ๋ฅผ ์ ๋ฐํ๊ฑฐ๋ ์ผ๋ถ ๋์ดํฌ ์ ์๋ ๋ณ๊ฒฝ(ํ์ฐ์ ์ผ๋ก ๋ถ์ ์ ์ด์ง ์์๋ ๋จ)์ผ๋ก ์ด์ด์ง๋ค๋ฉด, ์ฌ์ฉ์๋ ์์คํ ์์ ์ด๋ค ์ผ์ด ์ผ์ด๋ ๊ฒ์ธ์ง ์ดํดํ๊ณ , ๋ง์์ ๋ฐ๊ฟ ์ ์๋ ์ ํ๊ถ์ ๊ฐ์ ธ์ผ ํฉ๋๋ค. ์๋๋ ์ด๋ฌํ ์ฌ์ฉ์์์ ๋ํ์ ๋ํ ํ๋ฅญํ ์์ ๋๋ค.
#3: ๊ฐ๋ฅํ ํ ๋น ๋ฅด๊ฒ ์ฌ์ฉ์์๊ฒ ํผ๋๋ฐฑ ์ ๊ณต
์ธํฐํ์ด์ค ๋ด์์ ์ฌ์ฉ์๊ฐ ๋ฌด์๋ฏธํ ๋์์ ํ๋ ์ํฉ์ ๋ฏธ๋ฆฌ ๋ฐฉ์งํ ์ ์์ด์ผ ํฉ๋๋ค. ์ด๋ฌํ ๋์์ ์ ํ์ ์ธ ์๋ ์ด๊ธฐ์ ์์คํ ์์ ์ฌ์ฉํ ์ ์๋(์ ๋ขฐํ ์ ์๋) ๋น๋ฐ๋ฒํธ๋ฅผ ์ค์ ํ๋ ๊ฒ์ ๋๋ค. ๋ฐ๋ผ์, ์ฌ์ฉ์๊ฐ ๋ถ์ ์ ํ ๋ฌธ์๋ฅผ ์ ๋ ฅํ๊ธฐ ์์ํ์๋ง์ ๊ฒฝ๊ณ ํด์ฃผ์ด์ผ ํฉ๋๋ค. ์๋์ ์์์์ ๋ณด์ฌ์ง๋ฏ์ด ๋ง์ ๋๋ค.
#4: ์ปค๋ฎค๋์ผ์ด์ ์ ํตํด ์ ๋ขฐ ๊ตฌ์ถ
์ฌ์ฉ์์๊ฒ ํผ๋๋ฐฑ์ ์์ฒญํ ์๋ ์์ผ๋ฉฐ, ์ด๋ ์ํธ ์์ฉ์ ํ์ง์ ๊ฐ์ ํ๊ธฐ ์ํ ์ข์ ๋ฐฉ๋ฒ์ด ๋ ์ ์์ต๋๋ค. ํนํ, ์ผ๋ถ ์ฌ์ฉ์๋ค์ ์ต์ ํ๋์ด์ผ ํ๋ ์ธํฐํ์ด์ค ์์์ ๊ดํ ์ ์ฉํ ์ ๋ณด๋ฅผ ์ ๊ณตํ ์ ์์ต๋๋ค.
. .๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
2๏ธโฃ UI ๋์์ธ์ ๋๋น - ๋์์ธ ์์น์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ
์ ๋๋น๋ฅผ ์ถ๊ฐํด์ผ ํ ๊น์?
์ธ์ ํ ์์๋ค์ ์๋ก ๋ค๋ฅด๊ฒ ๋ณด์ด๊ฒ ํจ์ผ๋ก์จ ๋ค์๊ณผ ๊ฐ์ ์ด์ ์ ์ป์ ์ ์์ต๋๋ค:
- ์์ฒญ์์ ๊ด์ฌ์ ์ ๋ํ ์ ์์ต๋๋ค(์: ์ค๋ฅ ๋ฉ์์ง์ ๋ํ ์ฃผ์๋ฅผ ๋๊ธฐ ์ํด).
- ๋ค๋ฅธ ์์๋ค ๊ฐ์ ์๋ฏธ๋ฅผ ๋ถ์ฌํ ์ ์์ต๋๋ค.
- ์๊ฐ์ ์ธ ํฅ๋ฏธ๋ฅผ ์ถ๊ฐํ ์ ์์ต๋๋ค.
์์)
๋๋น๋ฅผ ์ ์ฉํจ์ผ๋ก์จ ์ฌ์ฉ์๊ฐ ์ฃผ์ ์์ ์ ๋ ์ฝ๊ฒ ๋ฐ๊ฒฌํ ์ ์๋๋ก ๋์ธ ์ ์์ต๋๋ค. "๋์ ๊ฐ๋๊ฒ ๋จ๊ณ ํ ์คํธ"๋ฅผ ์ํํ๋ ๊ฒ์ด ์ ์ฉํฉ๋๋ค: ๋์ ๊ฐ๋๊ฒ ๋จ๊ฑฐ๋ (๋๋ ๋ ์ด์ด์ ํ๋ฆผ ํจ๊ณผ๋ฅผ ์ ์ฉํ์ฌ) ์ด๋ค ์์๊ฐ ๋์ ๋๋์? ์ฃผ์ ์์ ์ ์ฌ์ฉ์์ ์ฌ์ฉ์ ํ๋ฆ์ ๋ค์ ๋จ๊ณ๋ก ์ฌ์ฉ์๋ฅผ ์๋ดํด์ผ ํ๋ฉฐ, ๋ณด์กฐ ์์ ์ ๋ ๋์ ๋์ด์ผ ํฉ๋๋ค.
๋ค์์ ์ฌ์ฉ ๊ฐ๋ฅํ ์์ ๋ค ๊ฐ์ ๋ช ํํ ๊ตฌ๋ณ์ด ์๋ ๊ฒฝ์ฐ์ ์์์ ๋๋ค(๋ฌผ๋ก ๋๋ก๋ ๊ณ ์์ ์ธ ๋์์ธ ๊ฒฐ์ ์ ๊ฒฐ๊ณผ์ด๊ฑฐ๋, ์ฃผ์ด์ง ์ ํ ์ฌํญ์ด ๋๋ฑํ ์ค์์ฑ์ ๊ฐ์ง๊ณ ์๋ ๊ฒฝ์ฐ๋ ์์ต๋๋ค):
์ถฉ๋ถํ ๋๋น๋ฅผ ์ถ๊ฐํ์ธ์!
์ ํ ๋๋น๊ฐ ์๋ ๊ฒ๋ณด๋ค ๋ ๋์ ๊ฒ์ ์ถฉ๋ถํ ๋๋น๊ฐ ์๋ ๊ฒ์ ๋๋ค! ๊ฑฐ์ ๊ตฌ๋ณํ๊ธฐ ์ด๋ ค์ด ์ฐจ์ด, ์๋ฅผ ๋ค์ด ๊ฑฐ์ ๊ฐ์ ์์, ๊ฑฐ์ ๊ฐ์ ์์ฒด, ๋ชจ์, ๊ธ๊ผด ํฌ๊ธฐ ๋ฑ์ด ์์ต๋๋ค. ์ด๋ฌํ ๊ฑฐ์ ๊ฐ์ ์์๋ค์ ์ถฉ๋์ ์ผ์ผํค๋ฉฐ, ์ฌ์ฉ์์๊ฒ "์ค์์ธ๊ฐ์?"๋ผ๋ ์๊ฐ์ ํ๊ฒ ๋ง๋ญ๋๋ค.
๋ค์์ ์์์ ๋๋ค: ์ฒซ ๋ฒ์งธ ์นด๋์์ ๋ ๊ฐ์ง ์ธ๋ฆฌํ ์์ฒด๊ฐ ๋๋ฌด ๋น์ทํฉ๋๋ค. ์ฃผ์ ์์ ๋ฐ ๋ณด์กฐ ์์ ๋ฒํผ์ ์์์ด ๊ฑฐ์ ๊ฐ์ต๋๋ค. ๋ํ ํค๋๋ผ์ธ๊ณผ ๋ณธ๋ฌธ ํ ์คํธ ์ฌ์ด์ ์ถฉ๋ถํ ๋๋น๊ฐ ์์ต๋๋ค(๊ธ๊ผด ํฌ๊ธฐ, ์์).
"์๋ฅ์ด" ์์น
๋๋น์ ์ ์ฌ์ฑ์ ๋ง์น ์๋ฅ์ด ํ์ ์ ๊ฐ์ต๋๋ค. ๋ ์์๊ฐ ๋๋น๋ฅผ ์ด๋ฃจ์ง ์์ผ๋ฉด, ๊ทธ๋ค์ ์ ์ฌํฉ๋๋ค. ๋ ์์๊ฐ ์ ์ฌํ๋ฉด, ๊ทธ๋ค์ ๋๋น๋ฅผ ์ด๋ฃจ์ง ์์ต๋๋ค.
UI ์์ ๋ ๊ฐ์ง๊ฐ UI์์ ๋ค๋ฅธ ๋ชฉ์ ์ด๋ ์ญํ ์ ๊ฐ์ง๊ณ ์๋ค๋ฉด, ๊ทธ๋ค์ ์๋ก ๋ค๋ฅด๊ฒ ๋ณด์ด๋๋ก ๋ง๋ค์ด์ผ ํฉ๋๋ค. ์ฐ๋ฆฌ๋ ์ ์ฌํ ๊ฐ์ฒด๊ฐ ๋์ผํ ๊ธฐ๋ฅ์ด๋ ์ญํ ์ ๊ฐ์ง๋ค๊ณ ๊ฐ์ ํฉ๋๋ค.
์ค์บ ๊ฐ๋ฅ์ฑ๊ณผ ๋๋น
๋๋น๋ฅผ ์ ์ฉํจ์ผ๋ก์จ ์ฝํ ์ธ ๋ฅผ ์ค์บํ๊ธฐ ์ฝ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค(ํ์ง๋ง ๊ณผ๋ํ ๋๋น๋ ์๋ ฅ ํผ๋ก๋ฅผ ์ ๋ฐํ ์ ์์ต๋๋ค).
๋๋น๋ฅผ ์ ์ฉํจ์ผ๋ก์จ ๋ค์๊ณผ ๊ฐ์ ์ด์ ์ ์ป์ ์ ์์ต๋๋ค:
- ์๋ฏธ ์๋ ์๊ฐ์ ๊ณ์ธต์ ๋ง๋ค ์ ์์ต๋๋ค.
- ๊ฐ์ฅ ์ค์ํ ๋ถ๋ถ์ ๊ฐ์กฐํ ์ ์์ต๋๋ค(์ฃผ์ ํฌ์ธํธ).
- ๋ ผ๋ฆฌ์ ์ธ ํ๋ฆ์ ์ถ๊ฐํ ์ ์์ต๋๋ค.
๋๋น๋ฅผ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ
์ผ๋ถ ์์:
- ์์ - ๋ณด์์ ์ธ ์์, ๊ฐ์กฐ ์์
- ํ์ดํฌ๊ทธ๋ํผ - ์์ ๊ธ๊ผด ํฌ๊ธฐ VS ๋ํ ๊ธ๊ผด ํฌ๊ธฐ, ์๋ก ๋ค๋ฅธ ๋๊ป, ์ธ๋ฆฌํ vs. ์ฐ์ธ๋ฆฌํ
- ๋ ์ด์์ - ์ํ vs. ์์ง
- ์ง๊ฐ
- ์ด๋ฏธ์ง, ์ผ๋ฌ์คํธ vs. ํ ์คํธ ์ฝํ ์ธ
- ๊ฐ๊ฒฉ, ์์น(๊ณต๋ฐฑ ์ฌ์ฉ)
- ๋ชจ์
- ํฌ๊ธฐ
- ๋ฐฉํฅ
. . ๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
3๏ธโฃ 6๊ฐ์ง ๋ฉ์ง ์๋ก์ด UI/UX ๋์์ธ ๋๊ตฌ
UI/UX ๋์์ธ ์ธ๊ณ๋ ๋์์์ด ๋ณํํ๊ณ , ๊ฐ๋ฐ์๋ค์ ์ธํฐํ์ด์ค๋ฅผ ๊ฐ์ ํ๊ณ ์ฌ์ฉ์ ์นํ์ ์ด๊ณ ๋งค๋ ฅ์ ์ธ ๊ฒ์ผ๋ก ๋ง๋ค๊ธฐ ์ํด ์๋ก์ด ๋ฐฉ๋ฒ์ ์ฐพ๊ณ ์์ต๋๋ค.
์ ๋ 2023๋ 5์์ ๋ช ๊ฐ์ง ์๋ก์ด ๋๊ตฌ๋ค์ ์ํํด๋ณด์๊ณ , ์์ ์ ํ์ ๋ง๋ค์ด ์ฌ๋ฌ๋ถ์ด ์๋ก์ด ๋๊ตฌ๋ค์ ์์๋ณด๊ณ ์์ ์ ์ฝ๊ฒํ๊ณ ํ๋ก์ ํธ์ ํ์ง์ ํฅ์์ํฌ ์ ์๋ ์๋ก์ด ๊ฐ๋ฅ์ฑ์ ๋ฐ๊ฒฌํ ์ ์๋๋ก ํ๊ธฐ๋ก ๊ฒฐ์ ํ์ต๋๋ค.
ํ์ ์ ์ธ๊ณ๋ก ๋น ์ ธ๋ค์ด ํ๋ UI/UX ๋์์ธ์ด ์ ๊ณตํ๋ ์๋ก์ด ๊ฐ๋ฅ์ฑ์ ๋ฐ๊ฒฌํด๋ด ์๋ค!
๋ง์ดํฌ๋ก์ํํธ์ Clarity
๋ง์ดํฌ๋ก์ํํธ Clarity๋ ์ฌ๋๋ค์ด ์ฌ์ดํธ๋ฅผ ์ด๋ป๊ฒ ์ฌ์ฉํ๋์ง ๋ณด์ฌ์ฃผ๋ ํธ๋ฆฌํ ๋ฌด๋ฃ ๋๊ตฌ์ ๋๋ค. ์ด ๋๊ตฌ๋ ์ฌ์ฉ์๊ฐ ์ฌ์ดํธ์ ํ์ด์ง๋ฅผ ์ด๋ป๊ฒ ํ์ํ๊ณ ์ด๋ ์ง์ ์์ ๊ธธ์ ์์ ์ ์๋์ง ์ดํดํ ์ ์๋๋ก ํํธ๋งต๊ณผ ์ธ์ ์ ๊ธฐ๋กํฉ๋๋ค. ๋ชจ๋ ๋ถ์์ ๋ฌธ์ํ๋์ด ์์ด UX ๋์์ด๋์๊ฒ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๊ฒฐ๊ณผ์ ์ฑ๋ฅ์ ์ถ์ ํ ์ ์์ต๋๋ค. ๋ํ Google Analytics์ ํตํฉ์ด ๊ฐ๋ฅํ๋ค๋ ์ ๋ ์ข์ํฉ๋๋ค.
Clarity์ ๊ธฐ๋ฅ์ ๋ชจ๋ฐ์ผ ์ฑ์ ์ต์ ํ๋์ด ์์ต๋๋ค. ์ด ๋๊ตฌ๋ ๋ชจ๋ฐ์ผ ์ธ์ ์ ๋งค์ฐ ์ ํํ๊ฒ ์ฌํํ๋ฉด์ ์ฑ์ ์ฑ๋ฅ์ ์ ํ์ํค์ง ์์ต๋๋ค. ์ด๋ ๋งค์ฐ ์ค์ํฉ๋๋ค!
LottieFiles For Figma
LottieFiles๋ Figma์์ ์์ฑ๋ ์ ๋๋ฉ์ด์ ์ ๋ด๋ณด๋ผ ์ ์๋ ํ๋ฌ๊ทธ์ธ์ ์ถ์ํ์ต๋๋ค. ์ด์ Lottie, GIF ๋ฐ SVG ํ์ผ๋ก ํ๋กํ ํ์ ์ ๋ฐฐํฌํ ์ ์์ต๋๋ค. ๋๋ฃ๋ค์ ์ผ๋ถ ๊ธฐ๋ฅ์ด ์๋ฒฝํ๊ฒ ์๋ํ๋ ๊ฒ์ผ๋ก ์๋ ค์ ธ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ๋ฒกํฐ๊ฐ ์ผ๊ด๋๊ฒ ๋ก๋๋์ง ์๋๋ค๊ณ ํฉ๋๋ค. ํ์ง๋ง ์ด ๋ฌธ์ ๋ ๊ณง ํด๊ฒฐ๋ ๊ฒ์ ๋๋ค.
. . ๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
๋๊ธ
์๊ฒฌ์ ๋จ๊ฒจ์ฃผ์ธ์