์๋์ด ์ธ๋๋ฅผ ์ํ ๋ชจ๋ฐ์ผ UX ๋์์ธ Tips
Brunch Story
๐ ๋ํ ์ผ์ ๊ฐ๊ฒฉ ์๋ฆฌ์ฆ! [โจ ์๋์ด ์ธ๋๋ฅผ ์ํ ๋ชจ๋ฐ์ผ UX ๋์์ธ ํ!] (๐๊ฐ๋จ ์์ฝ) 20๋, 30๋ UX/UI ๋์์ด๋๋ค์ด ๋ชจ๋ฐ์ผ ์ฑ์ ๋์์ธํ ๋ ๊ฐ๊ณผํ๊ธฐ ์ฌ์ด ๋ถ๋ถ ์ค์ ํ๋๊ฐ ์๋์ด ์ธ๋๋ฅผ ์ํ UX ๋์์ธ์ด๋ค. ๋๋ถ๋ถ์ ๋ชจ๋ฐ์ผ ์์ฅ์ด 10-30๋์ ๋ง์ถฐ์ ธ ์๊ณ ๊ทธ ์์ฅ์ด ๊ฐ์ฅ ํฌ๊ธฐ ๋๋ฌธ์ ๋ ธ์ธ ์ธ๋๋ฅผ ์ํ ๋์์ธ์ ์๊ฐํ๋ ๊ฒ์ ์ฝ์ง ์๋ค. โ ๋ง 65์ธ ์ด์ ๋ ธ์ธ์ธ๊ตฌ๊ฐ ์ ์ฒด ์ธ๊ตฌ์์ ์ฐจ์งํ๋ ๋น์ค์ 2025๋ ๊น์ง 20.3%๋ก ๋์ด๋ ๊ฒ์ผ๋ก ์ ๋ง โ 2030๋ ์๋ 25.0%, 2035๋ ์ 29.5%, 2040๋ ์ 33.9%๋ก ๋น์ค์ด ์ปค์ง ๊ฒ์ผ๋ก ์์ โ 5๋ ํ์๋ ์ฑ์ธ ์ธ๊ตฌ 5๋ช ์ค 1๋ช ์ด 65์ธ ์ด์์ด๊ณ 10๋ ํ์๋ 4๋ช ์ค 1๋ช ์ด ๋ ธ์ธ ์ธ๋ ๋ฐ๋ผ์ ๋ชจ๋ฐ์ผ ์ฑ ์๋น์ค์ ๋ฐ๋ผ์ ๊ณ์ธต์ ํญ์ด ๋ ธ์ธ๊น์ง ํฌํจํ๋ ์๋น์ค๋ฅผ ํ๋ ๊ธฐ์ ๋ค์ ๋ ธ์ธ ์ธ๋๊ฐ ํ์ฐ์ ์ผ๋ก ๊ฒช๋ ๋ณํ๋ค์ ์ ๋ ํ์ฌ ๋์์ธํ๋ ๊ฒ์ด ํ์ํ๋ค. ๋ ธํ๊ฐ ์งํ๋๋ฉด์ ๊ฒช๊ฒ ๋๋ ๋ณํ๋ค์๋ ์ด๋ค ๊ฒ๋ค์ด ์์๊น? ๊ฐ์ฅ ๋๋ ท์ด ๋ํ๋๋ ํ์๋ค์๋ ํฌ๊ฒย **์๋ ฅ์ ๋ณํ, ์ธ์ง์ ๋ณํ, ์ด๋ ์ ์ด ๋ฅ๋ ฅ**ย ๋ฑ์ ๊ผฝ์ ์ ์๋ค. ๐ ์๋ ฅ ์ ์๋ ฅ ์ํ๋ ๋์ด๊ฐ ๋ค์ด๊ฐ์ ๋ฐ๋ผ ๊ธ๊ฒฉํ ์ฆ๊ฐํด ๋ง 50์ธ ์ด์์ ์ฌ๋๋ค ์ค ์ ๋ฐ์ ์๋ ฅ์ด ์ด๋ ์ ๋ ์ ํ๋๋ ์ฆ์์ ๊ฒช๋๋ค. ํฉ๋ฐ ๋ณ์, ๋น๋จ๋ณ์ฑ ๋ง๋ง์ฆ, ๋ฐฑ๋ด์ฅ, ์์์ฑ ๋ง๋ง์ผ ๋ฑ ์ง๋ณ์ ์๊ณ ์๋ ์ฌ๋๋ค๊ณผ ๋์ด๊ฐ ๋ค์ด๊ฐ์ ๋ฐ๋ผ ์์ฑ ์๋ ฅ์ด ๋จ์ด์ ธ ์์ฑ์ ๋๋น ๊ฐ๋๊ฐ ์ฌํ๊ฒ ์ ํ๋๋ค. ๋น์ทํ ์์ ๊ตฌ๋ณํ๋ ๊ฒ์ด ํ๋ค์ด์ง๊ณ ํ๋์ ์์์ ํฌ๋ฏธํ๊ฒ ๋ณด์ด๊ธฐ๋ ํ๋ค. ๋์ด ๋์ ๋ถ๋ค์ด ์์์ ์จํ ์ปฌ๋ฌ๋ฅผ ์ข์ํ๋ ๊ฒ๋ ์ผ๋งฅ์ํตํ๋ค. โ ์์ ๋๋น ๋น์จ ๊ฒ์ฌ(Color-Contrast Ratio Checkers) ํน์ ๋์์ ํฌํจํ๋ ๋ชจ๋ฐ์ผ ๋์์ธ์ ํ ๊ฒฝ์ฐ, UX/UI ๋์์ด๋๋ค์ ๋์์ธ์ ์์ ์ ํ ๋ ์์ ๋๋น ๋น์จ ๊ฒ์ฌ์ ์ ๊ฒฝ์ ์ธ ํ์๊ฐ ์๋ค. ([https://webaim.org/resources/contrastchecker/](https://webaim.org/resources/contrastchecker/) - 16์ง์ ๊ฐ์ผ๋ก ์ง์ ๋ ์์ ์ฝ๋๋ฅผ ํ ์คํธ ) Figma๋ฅผ ์ฌ์ฉํ๋ UX/UI ๋์์ด๋๋ผ๋ฉด Able ํ๋ฌ๊ทธ์ธ์ ์ค์นํด์ ์์ ๋๋น ๋น์จ ๊ฒ์ฌ๋ฅผ ์ฝ๊ฒ ํ ์ ์๋ค. ๐ ์๋ ฅ : ๋ชจ๋ฐ์ผ ๋์์ธ ํ โ ํฐํธ ๋์์ธ ๋ชจ๋ฐ์ผ ๋๋ฐ์ด์ค์ ๋ฐ๋ผ ์ฐจ์ด๊ฐ ์๊ฒ ์ง๋ง ๊ธ์ ํฐํธ๋ 16pt ์ด์์ผ๋ก ๋์์ธํ๋ค. (50~65์ธ์ ์ค๋งํธ ์๋์ด๋ ์ ์ ์ธต๊ณผ ๊ฑฐ์ ์ฐจ์ด๋ฅผ ๋ณด์ด์ง ์์ผ๋ฏ๋ก 10~13pt์ ๊ธ์ ํฌ๊ธฐ๋ ์์ ์ฑ ์ธก๋ฉด์์๋ ๋ฌธ์ ๊ฐ ์๋ค.) -์ฌ์ฉ์๊ฐ ํ ์คํธ๋ฅผ ์ปค์คํฐ๋ง์ด์ฆ ํ ์ ์๋ ์ต์ ์ ๊ณต -๊ธ๊ผด์ ํ๋ ํน์ ๋ ๊ฐ๋ก ํต์ผ. ๋์์ธ์ ์์๊ฐ ๋ง์ด ๊ฐ๋ฏธ๋ ๊ธ๊ผด๋ณด๋ค๋ ์ต์ํ๊ฒ ๋ณด์์๋ ๊ธ๊ผด๋ก ์ ์ฉ โ ์ปฌ๋ฌ ๋์์ธ -ํ ์คํธ ๋ฐ ์ด๋ฏธ์ง(ํ์)์ ์๊ฐ์ ํ์๋, ์ ์ด๋ 4.5:1์ ์ฝํธ๋ผ์คํธ ๋น์จ์ด์ด์ผ -๋ฌธ์ ์ฌ์ด์ฆ๊ฐ ํฐ ํ ์คํธ๋ ์ ์ด๋ 3:1์ ์ฝํธ๋ผ์คํธ ๋น์จ์ ์ ์ฉ -์ค์ํ ์์ด์ฝ์ ์์์ ๊ฐ๋ฅํ ํธ๋ฅธ์ ๊ณ์ด ๋ฐฐ์ -์๋ณ์ฑ์ด ๋ฐ์ด๋ ์ปฌ๋ฌ๋ฅผ ์ ํํ๊ณ ์ค์๋์ ๋ฐ๋ผ ์ผ๊ด์ฑ ์๊ฒ ๋ ์ด์์ ๊ตฌ์ฑ -์ถ์์ ์ธ ์์ด์ฝ์ ๋ฐฐ์ ํ๊ณ ์ฝ๊ฒ ๋ถ๋ณ์ด ๊ฐ๋ ์์ด์ฝ ์ ํ -์๋งน์ด ์๋ ๋ ธ์ธ๊น์ง ๊ณ ๋ คํ๋ค๋ฉด ๋ ๋์ ๊ทธ๋ฆฐ ์ ์ฌ์ฉํ ๋ ์ฃผ์ -์ด๋ฏธ์ง๋ ๊ทธ๋ํฝ์ ํ ์คํธ๋ฅผ ๊ฒน์น์ง ์๊ณ , ๋ถ๋ฆฌํด์ ์๊ฐ์ ์ผ๋ก ๋์ ๋๊ฒ ์ฝ๊ฒ ๋์์ธ -๋ชจ๋ ๋์์ธ์ ๊ทธ๋ ์ด ์ค์ผ์ผ๋ก ๋ฐ๊พธ์์ ๋ ๋ค ์ฝํ๋์ง ํ์ธ ๐ ์ธ์ง์ ๋ณํ ๋ ธ์ธ์ธ๋๋ฅผ ์ํ ์ธ์ง์ ๋ณํ๋ฅผ ์ดํด๋ณผ ๋๋ ๊ธฐ์ต(memory), ์ฃผ์๋ ฅ(attention), ์์ฌ ๊ฒฐ์ (decision-making)์ ํจ๊ป ์ดํด๋ด์ผ ํ๋ค. ๋จ๊ธฐ ๊ธฐ์ต์ด ์ฝํด์ง์๋ก ์๋ก์ด ๊ฒ์ ๋ฐ์๋ค์ด๋๋ฐ ์ค๋ ๊ฑธ๋ ค ์๋ก์ด ๊ธฐ๋ฅ์ ๋ฐฐ์ฐ๊ณ ์กฐ์ํ๋๋ฐ ์ด๋ ค์์ ๊ฒช๋๋ค. ๐ ๊ธฐ์ต : ๋ชจ๋ฐ์ผ ๋์์ธ ํ ํ ํ๋ฉด ์์ ์ฌ๋ฌ ๊ธฐ๋ฅ์ ๋ฃ์ง ์๊ธฐ. ์ด๊ฒ์ one thing per page์ ์์น๊ณผ๋ ์ผ๋งฅ์ํตํ๋ค. ์์ ๋ชจ๋ฐ์ผ ํ๋ฉด ์์๋ ํ ๊ฐ์ง ๊ธฐ๋ฅ์ ์ง์คํ ์ ์๋๋ก ๋์์ธํ๋ค. -๋จ์ํด์ผ ํ๋ค -์ง๊ด์ ์ด์ด์ผ ํ๋ค -์ฝ๊ณ ๊ฐ๊ฒฐํ ์ธ์ด๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค -ํ ํ๋ฉด์์๋ ํ ๊ฐ์ง ํ๋๋ง ์ง์คํ๊ฒ ํด์ผ ํ๋ค -์๊ฐ์ ์ผ๊ด์ฑ์ ์ ์งํ๋ค -์น์ ํ๊ณ ๋ ์น์ ํ๊ฒ ๋ฐ์ํ๋ค -์๋ฌ ๋ฉ์์ง๋ฅผ ์ ํํ๊ฒ ์ ๋ฌํ๋ค ๐ ์ฃผ์๋ ฅ(Attention) : ๋ชจ๋ฐ์ผ ๋์์ธ ํ ํธํก์ด ๊ธด ํ ์คํธ ์ฌ์ฉ์ ๋๋ ค์ํ์ง ๋ง๋ผ. ๋ ธ์ธ ์ธ๋๋ค์ ์ ์ ์ธ๋๋ณด๋ค ๊ธด ๊ธ์ ๋ ์ต์ํ ์ ์๋ค. ์ ์ ์ธต์ ํ๊น์ผ๋ก ํ๋ค๋ฉด ํ ์คํธ๊ฐ ์งง์์๋ก ์ข์ง๋ง ๋ ธ์ธ ์ธ๋๋ค์ ๋ฌธ์ฅ์ ํธํก์ด ๊ธด ํ ์คํธ๋ฅผ ์ ํธํ๊ธฐ๋ ํ๋ค. -์ํธ ์์ฉ์ด ํ์ํ ๋์์ธ์ ํ ๋ ๊ธด ์๊ฐ ๊ฐ๊ฒฉ์ ํ์ฉํ๋ ๊ฒ ์ข๋ค -ํ ํ๋ฉด ์์์๋ ํ๋์ ๊ธฐ๋ฅ์ ์ง์ค์ํจ๋ค. (one thing per page ์์น ์งํค๊ธฐ) -์ฌ์ฉ์๋ค์ด ๊ฐ์ฅ ์ ํธํ๋ ์์ญ์ด ํ๋ฉด ์ค์์ด๋ผ๋ ๊ฒ์ ๊ณ ๋ คํด ์ค์ํ ํญ๋ชฉ์ ํ๋ฉด ์ค์์ ๋ฐฐ์นํ๋ค ๐ ์์ฌ๊ฒฐ์ (Decision-making) : ๋ชจ๋ฐ์ผ ๋์์ธ ํ -์๋ก์ด ๋์์ธ์ ์ง์คํ๊ธฐ๋ณด๋ค๋ ์ด๋ฏธ ์ต์ํ ๋์์ธ๊ณผ ๋ ์ด์์, ์์์ ์ง์คํ๋ค. -์๋น์ค์ ํน์ฑ์ ๋ฐ๋ผ ์ ๋ขฐ๋ฅผ ๋ฐํ์ผ๋ก ์ ๊ณต๋๋ ์ฑ์ด๋ผ๋ฉด ๊ถ์ ์๋ ์ ๋ฌธ๊ฐ์ ์๊ฒฌ์ ๋ ธ์ถํ๋ ๊ฒ์ด ํ์ํ๋ค. ๐ ์ด๋ ์ ์ด๋ฅ๋ ฅ(Motor Control) ๋ ธ์ธ์ฑ ์ง์ ์ ์๋์์ ๊ฐ์ฅ ์ ๋ํ๋๊ธฐ ๋๋ฌธ์ ํํ '์์ ์ฆ'์ด๋ ์ด๋ฆ์ผ๋ก ๋ง์ด ๋ถ๋ฆฌ๊ธฐ๋ ํ๋ค. ๋ฐ๋ผ์ ๋ ธ์ธ์ ์ํ ๋ชจ๋ฐ์ผ ๋๋ฐ์ด์ค๋ฅผ ๋์์ธํ ๋๋ ์์ด์ฝ์ด ๋๋ฌด ์๊ฑฐ๋ ๋ณต์กํด์๋ ์๋๋ค. ๐ ์ด๋ ์ ์ด๋ฅ๋ ฅ(Motor Control) : ๋ชจ๋ฐ์ผ ๋์์ธ ํ -ํฐ์น ์ธํฐํ์ด์ค์ ๋ฒํผ์ ๋๊ฐ์ ์ ๊ธธ์ด๊ฐ ์ต์ 9.6m ์ด์์ ์ ์งํด์ผ ํ๋ค(ipad์ ๊ฒฝ์ฐ 44x44ํฝ์ ) -๋ ธ์ธ์ ์ํ ๊ฒ์์ ๋ง๋ ๋ค๋ฉด ๋ชจ์ ์คํฌ์ ํฅ์ํ๊ธฐ ์ํด ๋จ์ํ๊ณ ๋ฐ๋ณต์ ์ผ๋ก ์๊ฐ๋ฝ ํํ ์ด๋์ ์ ๋ํ ์ ์๋ ๊ฒ์์ ๊ฐ๋ฐํ๋ ๊ฒ์ด ํ์ํ๋ค. -๋ ธ์ธ๋ค์ ํ๊ฑฐ ํํ์ด ์ต์ํ๋๋ผ๋ ๊ณผ๋ํ ํ๊ฑฐ ํํ์ ์ฌ์ฉํ๊ธฐ ํ๋ค์ดํ๋ค. (์) ๋ชจ๋ฐ์ผ๋ก ํ ์คํธ ๋ณด๋ด๊ธฐ). ๊ณผ๋ํ ํ๊ฑฐ ํํ์ ํ๋ ํ๋ฅ ์ ์ค์ผ ์ ์๋ ๋์์ธ์ด ํ์ํ๋ค. (๐์ค์ํ ์ด์ ๊ฐ ๋ญ๊ฐ์?) ์ ๊ทผ์ฑ๊ณผ๋ ๊ฐ์ ๋งฅ๋ฝ์์ ๋ฐ๋ผ๋ด์ผ ํ ์ด์๋ผ๊ณ ์๊ฐํด์. ์ฅ์ ๋ฅผ ์ง๋ ์ฌ๋๊ณผ ์ง๋์ง ์์ ์ฌ๋์ ๋ฌธ์ ๊ฐ ์๋๋ผ ์๋น์ค์ ๋ํ ์ ๊ทผ์ด ๋น ๋ฅธ ์ฌ๋๊ณผ ๊ทธ๋ ์ง ๋ชปํ ๋๋ ์๋น์ค์ ๋ํ ์ดํด๋๊ฐ ๋์ ์ฌ๋๊ณผ ๊ทธ๋ ์ง ๋ชปํ ๋ฑ์ผ๋ก ๋ง์ด์ฃ . ํํ ์ ๊ทผ์ฑ์ ์ด์ผ๊ธฐ ํ ๋ ์ฐ๋ฆฌ๋ ๊ทธ ์ ๋๊น์ง ๋์ ํ ํ์๊ฐ ์์ด, ๋ผ๊ณ ๋งํ๋ ๊ณณ์ด ๋ง์์ด์. ์ผ๋ฐ ์ฌ์ฉ์๋ค์ ๋์์ผ๋ก ํ๊ธฐ์๋ ๋ฒ ์ฐฌ๋ฐ ์ ๊ทผ์ฑ ๊ฐ์ด๋ ๋ผ์ธ์ ์ค์ํ์ฌ ๊ทธ์ ์์ํ๋ ๋์๋ค์ ํ๋์ฉ ์ ์ฉํ๊ธฐ๊ฐ ์ฝ์ง ์๋ค๋ ์ด์ ๋ก ๋ง์ด์ฃ . ์์งํ ์ ๋ ๊ทธ๋ ๊ฒ ๋ง์ด ์๊ฐํ๊ณ ์๊ณ ์ด๋ ์๋น์ค ์ฑ๊ฒฉ๊ณผ ๊ท๋ชจ์ ๋ฐ๋ผ ์ถฉ๋ถํ ๋ด๋ฆด ์ ์๋ ํ๋จ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. ํ์ง๋ง ์ ์ฐ๋ น๋๊ฐ ์ฌ์ฉํ ์ ๋ฐ์ ์๋ ์๋น์ค์ด๊ฑฐ๋ ์๋์ด๊ฐ ๋ง์ด ์ฌ์ฉํ๊ฒ ๋ ์๋น์ค๋ผ๋ฉด ์ฐ์ ์์๋ฅผ ๋์ฌ ์๊ฐ ํ ์ ๋ฐ์ ์๊ณ , ๊ทธ ๊ด์ ์์ ๋ง์ ๋์์ ๋ฐ์ ์ ์์๋ ๊ธ์ด์์ด์. ์ค์ํ ๊ฑด ์์๋ถํฐ ๊ณ ๋ ค๋์ด์ผ ํ๋ค๋ ์ . ์ด๋ฏธ ํ์ฑํ ๋ ์๋น์ค์ ์ ๊ทผ์ฑ, ์๋์ด๋ค์ ์ํ ๋ฐฐ๋ ค ๋ฑ์ ์ฝ๊ฒ ์ ์ฉ ํ ์ ์์๊น์? ๋๋ฌธ์ ์๋์ด๊ฐ ๋ง์ด ์ฌ์ฉํ๊ฒ ๋ ์๋น์ค๋ผ๋ฉด ์ฒ์ ๊ธฐํ ๋จ๊ณ์์๋ถํฐ ์ด์ ๊ฐ์ ๊ณ ๋ ค์ ๋ ผ์๊ฐ ์ถฉ๋ถํ ์ด๋ค์ ธ์ผ ํ๋ค๊ณ ์๊ฐํฉ๋๋ค. ํ๊ตญ๋, ์ฝ์์ด์์ ์ด์ . ์งํ์ค์ด์์ ์ถฉ๋ถํ! (๐ํจ๊ป ์ฝ์ด๋ณด์ธ์!) 70๋ ์๋ง์๊ฒ ์ผ์ฑํ์ด, ์ฑ๋ฐฐ์ก ์๋ ค๋๋ฆฐ ๋ : https://brunch.co.kr/@windydog/377 ์๊ฐ์ฅ์ ์ธ์ ํด๋ํฐ์ ์ด๋ป๊ฒ ์ฌ์ฉํ ๊น? : http://theindigo.co.kr/archives/9631
2020๋ 10์ 15์ผ ์ค์ 3:02