์ ์ UX/UI๊ธฐํ์๋ฅผ ์ํ 10๊ฐ์ง ์ค์ TIP
brunch

๐ช ์ ์ UX/UI ๊ธฐํ์๋ฅผ ์ํ 10๊ฐ์ง ์ค์ TIP ๐ ํ ์ค ์์ฝ - UX/UI ์ ๋ฌด์ ์ํ๊ธฐ ์ํ ์์ฃผ ๊ธฐ์ด์ ์ธ ์ค์ TIP โ UX/UI ๊ธฐํ์์ ์ฃผ ์ ๋ฌด 1. ํ๋ก์ ํธ ์ ์ 2. ๋ฆฌ์์น & ์ธํฐ๋ทฐ & ์ปจ์ ์ค์ & ์ฃผ์ํ๋ฉด UI ๊ธฐํ (๋์ ๋ฐ๋ผ์ ์ธํฐ๋ทฐ ์๋ต) 3. IA(Information Architecture) ์์ฑ 4. UI ํ๋ฉด์ ์์ ์์ฑ 5. ๋์์ธ ๊ฒ์ 6. ํผ๋ธ๋ฆฌ์ฑ ๊ฒ์ 7. ์ฌ์ฉ์ฑ ํ ์คํธ โ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ ํด๊ณผ ์ฐ์ถ๋ฌผ 1. ํ์ํฌ์ธํธ 2. ์์ 3. ํ๋กํ ํ์ด 4. ์ค์ผ์น โ ํ์คํ ๋ฆฌ์ ๋ฒ์ ๊ด๋ฆฌ - ๋์์ด๋, ๊ฐ๋ฐ์ ๋๋ ์ธ์ฃผ์ฌ์ ์์ฌ์ํตํ๊ธฐ ์ํ ์๋จ์ ๋๋ค. ํ์คํ ๋ฆฌ๋ ์์ ํ ๋ด์ฉ์ ๋ค๋ฅธ ํ๋ ฅ์ฌ ๋๋ ๊ณ ๊ฐ์ฌ์ ๊ณต์ ํ๋ ๊ผญ ํ์ํ ๋ด์ฉ์ด๋ฉฐ, ๋ถ์ ๋ฐ์ ์ ๋๋ ๋ฐ์ํด์ผ ํ ์ ๋ฌด์ ๋๋ฝ๋ ๊ฒ์ ์๋์ง ํ์ธํ ์ ์๋ ์งํ๊ฐ ๋ฉ๋๋ค. โ ๊ณตํต(Common)์ ์ค์์ฑ - ๊ณตํต์ ๋ค๋ฅธ ์ฌ๋๋ค์ด ๋๋ ์ ์์ ํ๋๋ผ๋ ๊ณตํต์ ์ธ ๋ฃฐ๊ณผ ์ปดํฌ๋ํธ(์์)๋ค๋ก ๋์ผํ ์์ ์ ํ ์ ์๋๋ก ๋ง๋๋ ์ง์นจ์์ ๊ฐ์ต๋๋ค. ๋ํ, ์ฌ๋ฌ ํ์ด์ง์ ๋ค์ด๊ฐ ๋ด์ฉ๋ค์ ๊ณตํต์ผ๋ก ์ ์ํ๋ฉด ๋ชจ๋ ํ์ด์ง์ ๋ด์ฉ์ ์์ ํ์ง ์์๋ ๋๋ ์ด์ ์ด ์์ต๋๋ค. โ ๊ณตํต์ ์์๋ค - ๊ณตํต์ ์์๋ก ์ ์ํด์ผ ํ๋ ๊ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค. 1. GNB (Global Navigation Bar) / Footer / Menu 2. ์คํ๋์ฌ / ์ ๋ฐ์ดํธ ์ ์ฑ / ํํ ๋ฆฌ์ผ / ๊ถํ ์ค์ ํ์ 3. ํ์ด์ง ๋ก๋ฉ / ์ด๋ฏธ์ง ๋๋ ํ ์คํธ ๋ก๋ฉ / ์๋ก๊ณ ์นจ / ๋ฐ์ดํฐ ์ ๋ฐ์ดํธ 4. ๋ฐ์ดํฐ๊ฐ ์์ ๋ - ๋ด์ฉ์ด ์ญ์ ๋์๊ฑฐ๋, ๋ฐ์ดํฐ๊ฐ ์๋ ๊ฒฝ์ฐ (๋ง์ดํ์ด์ง์ ์ฐ ํ๋ฉด/๊ฒ์ ๊ฒฐ๊ณผ ์์ ํ์ด์ง) 5. ์ค๋ฅ๊ฐ ๋ฐ์ํ์ ๋ - ์ญ์ ๋ ํ์ด์ง, ๋คํธ์ํฌ ์ค๋ฅ, ์ ๊ทผ๊ถํ์ด ์๋ ๊ฒฝ์ฐ, ์์คํ ์ ๊ฒ ๋ฑ 6. ํ์ ์ ํ ๋ฐ ์ธํฐ๋ ์ - ์์คํ ํ์ (์๋ฟ) / ์ปค์คํ ํ์ (๋ ์ด์ด, ์๋ฆผ, ํ ์คํธ ๋ฑ) 7. ์ ๋ ฅ๋ ์ธํฐ๋์ - Text ์ ๋ ฅ ์ / ์ ๋ ฅ ์ / ์ญ์ ์ / ์๋ชป ์ ๋ ฅ ์ 8. ํ ์คํธ ํ๊ธฐ๋ฒ - ๋ ์ง / ์๊ฐ / ๊ธ์ก / ์ ํ๋ฒํธ / ๋์ด ๋ฑ 9. ํ์ด์ง ๋ค๋น๊ฒ์ด์ / ๋๋ณด๊ธฐ ๋ฒํผ ์ธํฐ๋์ 10. ์ ํ ๋ถ๊ฐ, ์ ํ ๊ฐ๋ฅ, ์ ํ๋ ์ํ ๋ฑ ์ ์ - ์ ํ ๋ถ๊ฐ ์ Dimmed ๋ ๋ฒํผ ๋ ธ์ถ / ์ ํ ๊ฐ๋ฅํ ๊ฒฝ์ฐ ์์ ๋ณ๊ฒฝ 11. ๋๊ธ ์์ญ ๊ด๋ จ ์ ์ - ์ธํฐ๋์ / ๋ต๊ธ / ์ ๊ณ / ๋ฆฌ์คํธ ๋ ธ์ถ ๊ฐ์ / ๊ธ์ ๋ ธ์ถ ์ / ๊ณต์ / ์ข์์ ๋ฑ 12. ๊ทธ ์ธ ์๋น์ค์ ๋ฐ๋ฅธ ๊ณตํต ์ ์ฑ - ํ์ด์ง๊ฐ ์ด๋ / ํ๋กํ ๋ฐ ๋ฐฐ์ง ๋ ธ์ถ ์ ์ฑ โ ๋น ๋จ๋ฆฌ๊ธฐ ์ฌ์ด ๊ฒ๋ค - '๊ณต๋ฐฑ'์ด ํ์๋๋ ๊ฒฝ์ฐ 1. ์๋ฌด๊ฒ๋ ์๋ค. 2. ๋ค๋ฅธ ์ ์์ ๋ณด์ฌ์ค๋ค. โ ๋ฒํผ์ด๋ ํํฐ๋ฅผ ๋ ๋์ ์๊ณ์ง์ - ๊ธฐ๋ฅ์ ์๊ณ์ง์ 1. ํฌ ๋ฒํผ ์์น ๋ฐฐ์น (๋ถ์ / ๊ธ์ ) 2. ์์น์ ๋ฐ๋ฅธ ์์ธ ์ ๋ณด ์ฐจ์ด โ ํด๋ฆญ ์์ญ๊ณผ ์ ๋ ฅ ์์ญ์ ์ต์/์ต๋๊ฐ - ํ ์คํธ ๋ฐ์ค์ ์ ๋ ฅ๋ ํ ์คํธ์ ์ต์ ๊ธธ์ด์ ์ต๋ ๊ธธ์ด๋ฅผ ๊ณ์ฐํ๋ฉฐ, ์์ญ์ ํฌ๊ธฐ๊ฐ ์ ๋นํ์ง ์์ํฉ๋๋ค. โ ์๋น์ค ํ๋ก์ฐ - ํ๋ก์ฐ ์ฐจํธ ๋๋ ์ ์ ์๋๋ฆฌ์ค๋ผ ๋ถ๋ฆฌ๋ ํญ๋ชฉ์ผ๋ก, ํ๋ฉด์ ๊ธฐํํ ๋ ๋๋ฝ๋๋ ๊ฒ์ ์๋์ง ์ ๊ฒํ ์ ์๋ ์ญํ ์ ํฉ๋๋ค. โ Why!!!!!!!! - '์ ์ด๋ ๊ฒ ํ๋๊ฐ?'์ ๋ํ ํ๋นํ ๊ทผ๊ฑฐ๊ฐ ํ์ํฉ๋๋ค. ์ง๊ฐ์ด๋ ์ต์ํ๋ค ๋๋ ๋จ๋ค์ด ๊ทธ๋ ๊ฒ ํด์๊ฐ ์๋๋ผ, '~์ฌ์ฉ์ฑ์ ๊ณ ๋ คํ์ฌ, ์๋น์ค๊ฐ ~์ฌ์ฉ์๋ฅผ ํ๊ฒ์ผ๋ก ํ ~ํ ์ปจ์ ์ด๊ธฐ ๋๋ฌธ์, ๋๋ ์ฝํ ์ธ ๊ฐ ํ์ ์ ์ด๊ธฐ ๋๋ฌธ์' ๋ฑ ์๋น์ค๋ฅผ '์' ๊ทธ๋ฌํ ๋ฐฉ์์ผ๋ก ๊ธฐํํ๋์ง ๋ช ํํ๊ฒ ์ค๋ช ํ ์ ์์ด์ผ ํฉ๋๋ค. _____________________________________________________ โ ์ ๋ ์ 10๊ฐ์ง ์ค ๋จ์ฐ Why๊ฐ ๊ฐ์ฅ ์ค์ํ๋ค๊ณ ์๊ฐํฉ๋๋ค. ๊ธฐํ์ ์์์ด๋ฉฐ, ๊ธฐํ์ ๋์ด๋ผ ์๊ฐํ๊ธฐ ๋๋ฌธ์ธ๋ฐ์. ์ธ์ ๋ Why์ ๋ํ ๋ต์ ์ ์ฐํ๊ฒ ์ ํด๋ธ๋ค๋ฉด, ๋ฌด์์ด๋ ์ํ ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ํนํ, Why๋ ํ์ธ์ ์ค๋ํ ๋ ํ์๋ก ์๊ตฌ๋๋ ์ง์ ์ ๋๋ค. โ ์ ๋ Why๋ฅผ ์ ์์ ์๊ฒ ๋ฌผ์ด๋ณธ ํ, 'How-What'์ผ๋ก ๋์๊ฐ๋ ๋ฐฉํฅ์ ์ ํํฉ๋๋ค. ์ด๋ ๊ณจ๋ ์ํด์ธ๋ฐ, ์ด ์ธ ๊ฐ์ง ๋ฐฉ๋ฒ์ ํตํด ํ์ธ์ ์ค๋ํ๊ณค ํฉ๋๋ค. ์กํ์์น์ ์๋์ง๋ง Why, How, What์ ๊ณ ๋ คํ์ ๋, ๋ด๊ฐ ์๊ฐํ ๊ทธ๋ฆฌ๊ณ ๊ธฐํํ ์๊ฑด์ ํ์ ๋ด์ฉ์ด ํฌํจ๋๊ธฐ ๋๋ฌธ์ ํจ๊ณผ์ ์ ๋๋ค. โ ์ ์ ์ ๊ฒฝ์ฐ(์ง๋ ์ง๊ธ ์ ์ ์ด๋ฉด์), ๋ ผ๋ฆฌ์ ์ธ ํ๋ฆ์ ๋ฐ๋ผ ๊ธฐํ์์ ์์ฑํ๋ค๋ฉด ํจ๊ปํ๋ ๊ฐ๋ฐ์, ๋์์ด๋ ๋ฑ ๋๋ฃ๋ฅผ ์ค๋ํ๋๋ฐ ํจ์ฌ ์์ํ ๊ฒ์ ๋๋ค. ์ ๋ํ, Why๋ ํ ๋ฒ๋ง ์๊ฐํ ๊ฒ์ด ์๋๋ผ, ๊ผฌ๊ผฌ๋ฌผ(๊ผฌ๋ฆฌ์ ๊ผฌ๋ฆฌ๋ฅผ ๋ฌผ๊ณ )ํ์ฌ ์๊ฐํด๋ณด๋ ๊ฒ์ ์ถ์ฒํฉ๋๋ค. ํ๊ณ ๋ค์๋ก ๋์ฑ ๋ช ํํ ๋ชฉ์ ์์์ด ๋๋ฌ๋๊ธฐ ๋๋ฌธ์ ๋๋ค! โ ๊ทธ๋ผ ์ ์ ์ด๋ฉด์ ์ ์ ์ด ์๋ ๊ฑฐ ๊ฐ๊ณ , ์ ์ ์ธ ๊ฑฐ ๊ฐ๊ธฐ๋ ํ, ์ ์ ์ ๊ทธ๋ง ๋งํ๋๋ก ํ๊ฒ ์ต๋๋ค. ์์ธํ ๋ด์ฉ์ ๋ธ๋ฐ์น ๋งํฌ๋ฅผ ์ฐธ๊ณ ํด ์ฃผ์ธ์!!!!!! ๋ฌผ๋ก , ๋งํฌ๋ ์ ์ ๊ธ์ด ์๋๋๋ค. ๐
2021๋ 11์ 23์ผ ์ค์ 8:24
ํ์ง์๋ค์ '์ง์ง ์ธ์ฌ์ดํธ'๊ฐ ๋ด๊ธด ์ ๊ณ ์ฃผ์ ์์์ ๋ฐ์๋ณด์ธ์.
์ปค๋ฆฌ์ด๋ฆฌ | ๊ฐ๋ฐ์๋ฅผ ์ํ ์ปค๋ฆฌ์ด SNS