
โ . ์๋ก
๐ 1. ์์ด์ดํ๋ ์(Wireframe)์ด๋?
๐ 2. ์์ด์ดํ๋ ์์ ํต์ฌ ๊ฐ๋
โ ก. ๋ณธ๋ก
๐ 1. ์์ด์ดํ๋ ์์ ๋ง๋๋ ๊ฒ์ด ์ค์ํ ์ด์
๐ 2. ์์ด์ดํ๋ ์์ ์์
โ ข. ๊ฒฐ๋ก
โ . ์๋ก
๐ ์์ด์ดํ๋ ์(Wireframe)์ด๋?
์์ด์ดํ๋ ์(Wireframe)์
์น์ฌ์ดํธ๋ ์ฑ์ ๊ฐ๋ฐํ๊ธฐ ์ ์
ํ๋ฉด์ ๊ธฐ๋ณธ ๋ ์ด์์๊ณผ ๊ตฌ์กฐ๋ฅผ
์๊ฐ์ ์ผ๋ก ํํํ ์ด์(์ค๊ณ๋)์ ๋๋ค.
์์ด์ดํ๋ ์์
๋์์ธ ์์(์์, ์ด๋ฏธ์ง ๋ฑ) ์์ด
๊ธฐ๋ฅ๊ณผ ๋ฐฐ์น๋ฅผ ์ค์ฌ์ผ๋ก
ํ๋ฉด ๊ตฌ์ฑ์ ๋ฏธ๋ฆฌ ๊ณํํ๋ ์ญํ ์ ํฉ๋๋ค.
์ฆ, ์ด๋ค ๊ธฐ๋ฅ์ด ์ด๋์ ๋ฐฐ์น๋ ์ง,
์ฌ์ฉ์๊ฐ ์ด๋ป๊ฒ ์ด๋ํ ์ง๋ฅผ ์ค๊ณํ๋ ๊ณผ์ ์ ๋๋ค.
๐ ์์ด์ดํ๋ ์์ ํต์ฌ ๊ฐ๋
โ ์์ด์ดํ๋ ์์ ํต์ฌ ๊ฐ๋
โ ์น์ฌ์ดํธ/์ฑ์ ์ ์ฒด์ ์ธ ๊ตฌ์กฐ๋ฅผ ๊ณํ
โ ๋ฒํผ, ๋ฉ๋ด, ์ฝํ
์ธ ๋ฐฐ์น ๋ฑ์ ์๊ฐ์ ์ผ๋ก ์ ๋ฆฌ
โ ์ฌ์ฉ์์ ์ด๋ ๊ฒฝ๋ก(๋ค๋น๊ฒ์ด์
) ์ค๊ณ
โ UI/UX ๋์์ธ ๋ฐ ๊ฐ๋ฐ ์ ์ ๋ ์ด์์์ ์ ๊ฒ
โ ก. ๋ณธ๋ก
๐ ์์ด์ดํ๋ ์์ ๋ง๋๋ ๊ฒ์ด ์ค์ํ ์ด์
๐ฏ ์ ์์ด์ดํ๋ ์์ ๋ง๋๋ ๊ฒ์ด ์ค์ํ๊ฐ์?
์์ด์ดํ๋ ์์ ๋จผ์ ๋ง๋ค์ง ์๊ณ
๋ฐ๋ก UI ๋์์ธ์ ์์ํ๋ฉด,
โ ๋ ์ด์์์ด ์์ฑํด์ง๊ณ
โ ๊ฐ๋ฐ ๊ณผ์ ์์ ๋น๋ฒํ ์์ ์ด ๋ฐ์ํ๋ฉฐ
โ ๊ฒฐ๊ณผ์ ์ผ๋ก ์๊ฐ๊ณผ ๋น์ฉ์ด ์ฆ๊ฐํ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค.
๐น 1. ์ ์ฒด์ ์ธ ํ๋ฉด ๊ตฌ์กฐ๋ฅผ ํ๋์ ํ์ ํ ์ ์์
์์ด์ดํ๋ ์์ ์ ์ํ๋ฉด
์น์ฌ์ดํธ๋ ์ฑ์ ์ ์ฒด์ ์ธ ๊ตฌ์ฑ๊ณผ
ํ๋ฆ์ ์ฝ๊ฒ ์ดํดํ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด,
- ๋ค๋น๊ฒ์ด์ (๋ฉ๋ด)์ด ์ด๋์ ๋ฐฐ์น๋ ์ง
- ์ฃผ์ ๋ฒํผ์ด ์ด๋ค ์์น์ ์์ด์ผ ํ๋์ง
- ์ฌ์ฉ์๊ฐ ์ํ๋ ์ ๋ณด๋ฅผ ์ฝ๊ฒ ์ฐพ์ ์ ์๋์ง
์ด๋ฌํ ์์๋ค์ ์ด๊ธฐ ๋จ๊ณ์์ ๋ฏธ๋ฆฌ ์ ๋ฆฌํ ์ ์์ต๋๋ค.
๐น 2. ๋์์ธ๊ณผ ๊ธฐ๋ฅ์ ํจ๊ณผ์ ์ผ๋ก ๊ณํํ ์ ์์
UI/UX ๋์์ธ์ ํ๊ธฐ ์ ์
์ด๋ค ๊ธฐ๋ฅ์ด ํฌํจ๋ ์ง,
์ด๋ค ๋ฐฉ์์ผ๋ก ์๋ํ ์ง๋ฅผ
์ ๋ฆฌํ ์ ์์ต๋๋ค.
โ ๊ธฐ๋ฅ ๋ฐฐ์น ๊ฒฐ์ → ๋ฒํผ, ์
๋ ฅ ํผ, ๋ฉ๋ด ์์น ๋ฑ์ ๋จผ์ ์ค์
โ ์ ๋ณด ๊ณ์ธต ๊ตฌ์กฐ ์ค๊ณ → ์ด๋ค ์ ๋ณด๊ฐ ๋จผ์ ๋ณด์ด๊ณ , ์ด๋ค ์ ๋ณด๊ฐ ๋ค์ ๋์ค๋์ง ๊ฒฐ์
โ ์ฌ์ฉ์ ๊ฒฝํ ์ต์ ํ → ์ฌ์ฉ์๊ฐ ์ฝ๊ฒ ์ดํดํ๊ณ ์ฌ์ฉํ ์ ์๋๋ก ๋์ ์ ์ค๊ณ
๐น 3. ํ์ ๊ฐ ์ํํ ํ์ ์ด ๊ฐ๋ฅํจ
โ ๊ฐ๋ฐ์, ๋์์ด๋, ๊ธฐํ์๊ฐ ๋์ผํ ๋ฐฉํฅ์ ๋ฐ๋ผ๋ณผ ์ ์๋๋ก ์ ๋ฆฌํ๋ ์ญํ ์ ํฉ๋๋ค.
โ ์์ด์ดํ๋ ์์ ํตํด ํ์๋ค๊ณผ ์ด๊ธฐ ๊ธฐํ์ ๊ณต์ ํ๋ฉด, ๋ถํ์ํ ์์ ์ด ์ค์ด๋ค๊ณ ๊ฐ๋ฐ ์๋๊ฐ ๋นจ๋ผ์ง๋๋ค.
โ ํด๋ผ์ด์ธํธ์ ํ์
ํ ๋๋ ์๊ฐ์ ์ผ๋ก ๊ฐ๋
์ ์ค๋ช
ํ๊ธฐ ์ฌ์ ์ปค๋ฎค๋์ผ์ด์
์ด ์ํํด์ง๋๋ค.
๐น 4. ๋์์ธ ๋ฐ ๊ฐ๋ฐ ๊ณผ์ ์์ ์์ ๋น์ฉ์ ์ค์ผ ์ ์์
โ ์์ด์ดํ๋ ์์ ๋ง๋ค๋ฉด ๊ฐ๋ฐ ์ ์ ๋ฏธ๋ฆฌ ๋ฌธ์ ์ ์ ๋ฐ๊ฒฌํ๊ณ ๊ฐ์ ํ ์ ์์ต๋๋ค.
โ ๋ฐ๋ก ๋์์ธ์ ์งํํ ๊ฒฝ์ฐ, ํ๋ฐ๋ถ์ ์์ ์ด ํ์ํ ๊ฒฝ์ฐ ํฐ ๋น์ฉ๊ณผ ์๊ฐ์ด ์์๋ ์ ์์ต๋๋ค.
โ ์์ด์ดํ๋ ์ ๋จ๊ณ์์ ์ฌ์ฉ์์ ํผ๋๋ฐฑ์ ๋ฐ์ํ๋ฉด, ๊ฐ๋ฐ์ด ์์๋ ํ ๋ณ๊ฒฝํด์ผ ํ๋ ๋ถ๋ถ์ ์ต์ํํ ์ ์์ต๋๋ค
๐ ์์ด์ดํ๋ ์์ ์์
โ ๋ก์ฐํ์ด(Lo-Fi) ์์ด์ดํ๋ ์ (๊ธฐ๋ณธ์ ์ธ ์ค์ผ์น)
๐ ์ฐํ์ด๋ ๊ฐ๋จํ ๋๊ตฌ๋ก ํ๋ฉด์ ๋ ์ด์์์ ๋๋ต์ ์ผ๋ก ์ค์ผ์น
๐ ๋ฒํผ, ์
๋ ฅ ํ๋, ๋ค๋น๊ฒ์ด์
๋ฑ์ด ์ด๋์ ๋ฐฐ์น๋ ์ง ์๊ฐ์ ์ผ๋ก ํํ
๐ ์ธ๋ถ์ ์ธ ๋์์ธ ์์ ์์ด ๊ตฌ์กฐ๋ง ์ ๋ฆฌํ๋ ํํ
โ ํ์ดํ์ด(Hi-Fi) ์์ด์ดํ๋ ์ (์ ๊ตํ ํ๋กํ ํ์ )
๐ Figma, Adobe XD, Sketch ๋ฑ์ ํด์ ํ์ฉํ์ฌ ์ ๊ตํ ์์ด์ดํ๋ ์ ์ ์
๐ ํด๋ฆญ์ด ๊ฐ๋ฅํ ์ธํฐ๋ํฐ๋ธ ํ๋กํ ํ์
์ ์ ๊ฐ๋ฅ
๐ ์ค์ ๋์์ธ๊ณผ ์ ์ฌํ ํํ๋ก ์ ์ํ์ฌ ์ฌ์ฉ์ ํ
์คํธ ๊ฐ๋ฅ
โ ข. ๊ฒฐ๋ก
โ ์์ด์ดํ๋ ์์ UI/UX ๋์์ธ ๋ฐ ๊ฐ๋ฐ์ ์ํ ํ์์ ์ธ ๊ธฐ์ด ๋จ๊ณ์
๋๋ค.
โ ์ ์ฒด์ ์ธ ํ๋ฉด ๊ตฌ์กฐ๋ฅผ ์ ๋ฆฌํ๊ณ , ํ์ ๊ฐ ํ์
์ ์ํํ๊ฒ ํ๋ฉฐ, ์์ ๋น์ฉ์ ์ ๊ฐํ๋ ํจ๊ณผ๊ฐ ์์ต๋๋ค.
โ ๋ก์ฐํ์ด(๊ธฐ๋ณธ ์ค์ผ์น) → ํ์ดํ์ด(์ ๊ตํ ๋์์ธ) ๊ณผ์ ์ผ๋ก ๋ฐ์ ํ๋ฉด์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ต์ ํํ ์ ์์ต๋๋ค.
๐ก ์ข์ ์์ด์ดํ๋ ์์ด
์ข์ UI/UX ๋์์ธ์ ๋ง๋ค๊ณ ,
์ข์ UI/UX ๋์์ธ์ด
์ฑ๊ณต์ ์ธ ์ ํ์ ๋ง๋ญ๋๋ค!

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