
โ . ์๋ก
๐ 1. UI์ UX์ ์ ์
๐ 2. UI vs. UX์ ์ฐจ์ด์
โ ก. ๋ณธ๋ก
๐ 1. UI์ UX์ ๊ด๊ณ
๐ 2. UI/UX ๊ฐ์ ์ ์ค์์ฑ
โ ข. ๊ฒฐ๋ก
๐ 1. UI์ UX์ ์ข ํฉ์ ์ธ ์ค์์ฑ
๐ 2. ์ฑ๊ณต์ ์ธ ์ ํ์ ์ํ UI/UX ๊ณ ๋ ค
โ . ์๋ก
๐ UI์ UX์ ์ ์
UI์ UX๋ ๋ฐ์ ํ ๊ด๋ จ์ด ์์ง๋ง,
๊ฐ๊ฐ ๋ค๋ฅธ ์ญํ ์ ์ํํ๋ ๊ฐ๋ ์ ๋๋ค.
โ UI(User Interface, ์ฌ์ฉ์ ์ธํฐํ์ด์ค)๋?
UI๋ ์ฌ์ฉ์๊ฐ ์ ํ๊ณผ ์ํธ์์ฉํ ๋
์ ํ๋ ์๊ฐ์ ์์๋ฅผ ์๋ฏธํฉ๋๋ค.
์ฆ, ์น์ฌ์ดํธ, ๋ชจ๋ฐ์ผ ์ฑ,
์ํํธ์จ์ด ๋ฑ์์ ๋ณด์ด๋ ๋์์ธ,
๋ฒํผ, ์์ด์ฝ, ์์ ๋ฑ์ ์๊ฐ์ ์์๋ฅผ ํฌํจํฉ๋๋ค.
โ UX(User Experience, ์ฌ์ฉ์ ๊ฒฝํ)๋?
UX๋
์ฌ์ฉ์๊ฐ ์ ํ์ ์ฌ์ฉํ ๋
๋๋ผ๋ ๊ฒฝํ๊ณผ ๋ง์กฑ๋๋ฅผ ์๋ฏธํฉ๋๋ค.
์ฆ, ์น์ฌ์ดํธ๋ ์ฑ์ ์ฌ์ฉํ ๋
์ผ๋ง๋ ํธ๋ฆฌํ์ง,
์ํ๋ ์ ๋ณด๋ฅผ
์ฝ๊ฒ ์ฐพ์ ์ ์๋์ง ๋ฑ์ ํฌํจํฉ๋๋ค.
โ UI(User Interface, ์ฌ์ฉ์ ์ธํฐํ์ด์ค) ํต์ฌ ์์
- ๋ฒํผ(Button), ์์ด์ฝ(Icon) ๐ฑ
- ์์(Color), ํ์ดํฌ๊ทธ๋ํผ(Typography) ๐จ
- ๋ ์ด์์(Layout), ์ ๋๋ฉ์ด์ (Animation) ๐ญ
- ๋ค๋น๊ฒ์ด์ (Navigation) ๐
๐ ์ฝ๊ฒ ๋งํด? UI๋ ์ ํ์ "๊ฒ๋ชจ์ต"์ ๊ฒฐ์ ํ๋ ๋์์ธ ์์์ ๋๋ค.
โ UX(User Experience, ์ฌ์ฉ์ ๊ฒฝํ) ํต์ฌ ์์
- ์ฌ์ฉ์์ ๋ชฉํ ๋ฌ์ฑ ์ฉ์ด์ฑ ๐ฏ
- ์ง๊ด์ ์ธ ๋ค๋น๊ฒ์ด์ ๐
- ๋น ๋ฅธ ๋ก๋ฉ ์๋ โก
- ์ค๋ฅ ๋ฐ์ ์ ์น์ ํ ํผ๋๋ฐฑ โ
๐ ์ฝ๊ฒ ๋งํด? UX๋ ์ ํ์ "์ฌ์ฉ์ ๊ฒฝํ"์ ๊ฒฐ์ ํ๋ ์์์ ๋๋ค.
๐ UI vs. UX์ ์ฐจ์ด์
๐ฏ UI vs. UX์ ์ฐจ์ด์
๊ตฌ๋ถ | UI (์ฌ์ฉ์ ์ธํฐํ์ด์ค) | UX (์ฌ์ฉ์ ๊ฒฝํ) |
์ ์ | ์ฌ์ฉ์๊ฐ ๋ณด๋ ํ๋ฉด ๋์์ธ ๋ฐ ์๊ฐ์ ์์ | ์ฌ์ฉ์๊ฐ ์ ํ์ ์ฌ์ฉํ ๋์ ๊ฒฝํ ๋ฐ ํธ๋ฆฌ์ฑ |
๋ชฉ์ | ์ฌ์ฉ์๊ฐ ์ ํ์ ์๋ฆ๋ต๊ณ ์ง๊ด์ ์ผ๋ก ์ธ์ํ๋๋ก ์ค๊ณ | ์ฌ์ฉ์๊ฐ ํธ๋ฆฌํ๊ณ ๋ง์กฑ์ค๋ฝ๊ฒ ์ ํ์ ์ฌ์ฉํ ์ ์๋๋ก ์ต์ ํ |
ํฌํจ ์์ | ๋ฒํผ, ์์ด์ฝ, ์์, ํฐํธ, ์ ๋๋ฉ์ด์ ๋ฑ | ์ฌ์ฉ์์ ํ๋ฆ, ์ ๋ณด ๊ตฌ์กฐ, ํธ๋ฆฌํ ์ธํฐ๋์ ๋ฑ |
์ฃผ์ ๊ณ ๋ ค์ฌํญ | ๋์์ธ, ๋ธ๋๋ ์ผ๊ด์ฑ, ์ฌ๋ฏธ์ฑ | ์ฌ์ฉ์ฑ, ์ ๊ทผ์ฑ, ์ง๊ด์ ์ธ ์ธํฐํ์ด์ค |
์์ | ์ฑ์ ๋ฒํผ ๋์์ธ, ์์ ์กฐํฉ์ด ์ผ๋ง๋ ์ธ๋ จ๋๋๊ฐ? | ์ฌ์ฉ์๊ฐ ์ํ๋ ์ ๋ณด๋ฅผ ์ฝ๊ฒ ์ฐพ์ ์ ์๋๊ฐ? |
๐ ํ๋ง๋๋ก ์ ๋ฆฌํ๋ฉด?
โ UI๋ "๋ณด๋ ๊ฒ", UX๋ "๋๋ผ๋ ๊ฒ"์ ๋๋ค.
โ UI๊ฐ ์๋ฆ๋ต๋ค๊ณ UX๊ฐ ์ข์ ๊ฒ์ ์๋๋ฉฐ, UX๊ฐ ์ข๋ค๊ณ UI๊ฐ ๋ฐ์ด๋ ๊ฒ์ ์๋๋๋ค.
โ UI์ UX๋ ์๋ก ๋ณด์ ๊ด๊ณ์ด๋ฉฐ, ํจ ์ต๊ณ ์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
โ ก. ๋ณธ๋ก
๐ UI์ UX์ ๊ด๊ณ
โ UI๋ UX์ ์ผ๋ถ๋ผ๊ณ ๋ณผ ์ ์์ต๋๋ค.
โ UX๊ฐ ์ข์ ์ ํ์ด๋ผ๋ฉด, ์ฌ์ฉ์๋ ๋ถํธํจ ์์ด ์ํ๋ ๋ชฉํ๋ฅผ ์ฝ๊ฒ ๋ฌ์ฑํ ์ ์์ด์ผ ํฉ๋๋ค.
โ UI๊ฐ ์ข์ ์ ํ์ด๋ผ๋ฉด, ์ฌ์ฉ์๋ ์๊ฐ์ ์ผ๋ก ์๋ฆ๋ต๊ณ , ์ง๊ด์ ์ผ๋ก ์กฐ์ํ ์ ์์ด์ผ ํฉ๋๋ค.
๐ ์์: ๋ชจ๋ฐ์ผ ์ฑ ๋ก๊ทธ์ธ ํ๋ฉด
1๏ธโฃ UI๊ฐ ์ข์ ๊ฒฝ์ฐ→ ๋ก๊ทธ์ธ ๋ฒํผ์ด ์์๊ณ , ์์์ด ์กฐํ๋กญ๋ค.
2๏ธโฃ UX๊ฐ ์ข์ ๊ฒฝ์ฐ → ์ฌ์ฉ์๊ฐ ๋น๋ฐ๋ฒํธ๋ฅผ ์๋ชป ์
๋ ฅํ์ ๋, ์น์ ํ ๊ฐ์ด๋๊ฐ ์ ๊ณต๋๋ค.
๐ก UI๋ "๋ณด๋ ๊ฒ", UX๋ "๊ฒฝํํ๋ ๊ฒ"์ด๋ผ๋ ์ ์ ๊ธฐ์ตํ์ธ์!
๐ UI/UX ๊ฐ์ ์ ์ค์์ฑ
๐ฏ UI/UX ๊ฐ์ ์ด ์ค์ํ ์ด์
โ ์ฌ์ฉ์ ๋ง์กฑ๋ ํฅ์ → UX๊ฐ ์ข์ผ๋ฉด ์ฌ์ฉ์๊ฐ ํธ๋ฆฌํ๊ฒ ์ ํ์ ์ฌ์ฉํ ์ ์์
โ ์ ํ์จ ์ฆ๊ฐ → UI๊ฐ ์ข์ผ๋ฉด ์ฌ์ฉ์๊ฐ ์๋น์ค์ ์ค๋ ๋จธ๋ฌผ๊ณ , ๊ฒฐ์ ์ ํ์จ์ด ๋์์ง
โ ๋ธ๋๋ ๊ฒฝ์๋ ฅ ๊ฐํ → ์ข์ UI/UX๋ ๋ธ๋๋ ์ถฉ์ฑ๋๋ฅผ ๋์ด๊ณ , ์์ฅ์์ ์ฐจ๋ณํ ์์๊ฐ ๋จ
๐ ๊ฒฐ๊ณผ: UI/UX๊ฐ ๋ฐ์ด๋ ๊ธฐ์ ์ ๋ ๋ง์ ์ฌ์ฉ์๋ฅผ ํ๋ณดํ๊ณ , ๋์ ์์ต์ ์ฐฝ์ถํ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค.
โ ข. ๊ฒฐ๋ก
๐ UI์ UX์ ์ข ํฉ์ ์ธ ์ค์์ฑ
๐ฏ ๊ฒฐ๋ก
โ UI๋ ์ฌ์ฉ์๊ฐ ๋ณด๋ ํ๋ฉด ๋์์ธ, UX๋ ์ฌ์ฉ์๊ฐ ๋๋ผ๋ ๊ฒฝํ์ ์๋ฏธํฉ๋๋ค.
โ UI๋ ์ ํ์ ์ธ๊ด์ ๊ฒฐ์ ํ๊ณ , UX๋ ์ ํ ์ฌ์ฉ์ ํธ๋ฆฌ์ฑ์ ๊ฒฐ์ ํฉ๋๋ค.
โ UI์ UX๋ ๋ฐ๋ก ์กด์ฌํ๋ ๊ฒ์ด ์๋๋ผ, ํจ๊ป ๊ฐ์ ๋์ด์ผ ์ต๊ณ ์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
๐ก ์ข์ UI๋ ์ฒซ์ธ์์ ๊ฒฐ์ ํ๊ณ , ์ข์ UX๋ ์ฌ์ฉ์์ ์ง์์ ์ธ ์ด์ฉ์ ์ ๋ํฉ๋๋ค!
๐ UI์ UX๋ฅผ ํจ๊ป ๊ณ ๋ คํ ๋์์ธ์ด ์ฑ๊ณต์ ์ธ ์ ํ์ ๋ง๋ญ๋๋ค.

#UIUX #์ฌ์ฉ์๊ฒฝํ #UI๋์์ธ #UX๋์์ธ #์คํํธ์ ์ ๋ต #IT์ฉ์ด #์คํ๋ฅดํ์ฝ๋ฉํด๋ฝ #์ฝ๋ฉ๋ถํธ์บ ํ