Community

๐Ÿ— ๊ฒŒ์ŠˆํƒˆํŠธ ์ด๋ก ์„ UI์— ํ™œ์šฉํ•˜๋Š” 7๊ฐ€์ง€ ๋ฐฉ๋ฒ•

๐ŸŽˆ ํ•œ ์ค„ ์š”์•ฝ - ๊ฒŒ์ŠˆํƒˆํŠธ(Gestalt)๋Š” ํ˜•ํƒœ, ํ˜•์ƒ์„ ๋œปํ•˜๋Š” ๋…์ผ์–ด๋กœ ํŠน์ •ํ•œ ์ƒํ™ฉ์ด ์ฃผ์–ด์กŒ์„ ๋•Œ ์‚ฌ๋žŒ๋“ค์ด ์‹œ๊ฐ ์š”์†Œ๋ฅผ ์ธ์ง€ํ•˜๋Š” ๋ฐฉ์‹ โœ”๏ธ ๊ฒŒ์ŠˆํƒˆํŠธ๋ผ๋Š” ๋ง์„ ๋งŽ์ด ๋“ค์–ด๋ดค์„ ๊ฑฐ์˜ˆ์š”. ํŠนํžˆ ๊ฒŒ์ŠˆํƒˆํŠธ ๋ถ•๊ดด๋ผ๋Š” ์ง€๊ฐ ํ˜„์ƒ ์ค‘ ํ•˜๋‚˜๋ฅผ ๋ง์ด์ฃ . ๊ฒŒ์ŠˆํƒˆํŠธ ๋ถ•๊ดด๋Š” ์–ธ๋œป ๋ณด๋ฉด ์‹ฌ๋ฆฌํ•™ ์šฉ์–ด, ํ•™์ˆ  ์šฉ์–ด์ฒ˜๋Ÿผ ๋ณด์ด๋Š”๋ฐ์š”. ์‚ฌ์‹ค์€ ๊ทธ๋ ‡์ง€ ์•Š์•„์š”. โœ”๏ธ ๊ฒŒ์ŠˆํƒˆํŠธ ๋ถ•๊ดด๋Š” ์ผ๋ณธ์—์„œ ๋งŒ๋“ค์–ด์ง„(?) ์šฉ์–ด์ธ๋ฐ์š”. ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ๋„์‹œ์ „์„ค์ฒ˜๋Ÿผ ์“ฐ์ด๋˜ ์šฉ์–ด์˜ˆ์š”. ๋‹ค๋ฅธ ๋ง๋กœ ํ•˜๋ฉด ์‹ ์กฐ์–ด๋ผ ํ•  ์ˆ˜ ์žˆ์–ด์š”. ๊ฒŒ์ŠˆํƒˆํŠธ ๋ถ•๊ดด ์ด๋ก  ๋˜ํ•œ, ๋„์‹œ๊ดด๋‹ด์ฒ˜๋Ÿผ ์กด์žฌํ•  ๋ฟ ์‹ค์ œํ•˜์ง€ ์•Š๋Š” ์šฉ์–ด์ฃ . โœ”๏ธ ์ฆ‰, ์ •๋ฆฌํ•ด์„œ ๋งํ•˜์ž๋ฉด ๊ฒŒ์ŠˆํƒˆํŠธ ๋ถ•๊ดด๋Š” ํ•™์ˆ ์  ์šฉ์–ด๊ฐ€ ์•„๋‹ˆ๋ฉฐ, ์ผ๋ณธ ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์ƒ๊ฒจ๋‚œ '์‹ ์กฐ์–ด'๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ์ดํ•ด๊ฐ€ ์‰ฌ์šธ ๋“ฏ ํ•ด์š”. ๐Ÿคช โœ”๏ธ ์—ฌํŠผ, ๊ฒŒ์ŠˆํƒˆํŠธ๋ผ๋Š” ์šฉ์–ด๋Š” ์ด๋ ‡๊ฒŒ ๋งŽ์ด ์•Œ๋ ค์กŒ๊ณ , ์ธํ„ฐ๋„ท์—์„œ๋„ ํ”ํžˆ ์“ฐ์ด๋Š”๋ฐ, ์‹ค์ œ ๋‚ด์šฉ์€ ์–ด๋–ค์ง€ ๋‹ค๋“ค ๋ชจ๋ฅด๊ณ  ์žˆ์–ด์š”. ๊ทธ์ €, ๊ฒŒ์ŠˆํƒˆํŠธ ๋ถ•๊ดด๋ผ๋Š” ์‹ ์กฐ์–ด๋ฅผ ํ†ตํ•ด ์ ‘ํ•ด๋ดค๊ธฐ ๋•Œ๋ฌธ์ด์ฃ . โœ”๏ธ ๊ทธ๋Ÿผ ์ง„์งœ ๊ฒŒ์ŠˆํƒˆํŠธ๋Š” ์ž˜ ์•ˆ ์“ฐ์ด๋Š” ์šฉ์–ด์ด๋ƒ? ๊ทธ๊ฑด ์•„๋‹ˆ์—์š”. ๊ฒŒ์ŠˆํƒˆํŠธ๋Š” ํ˜•ํƒœ, ํ˜•์ƒ์„ ๋œปํ•˜๋Š” ๋…์ผ์–ด๋กœ, ํŠน์ •ํ•œ ์ƒํ™ฉ์ด ์ฃผ์–ด์กŒ์„ ๋•Œ, ์‚ฌ๋žŒ๋“ค์ด ์‹œ๊ฐ ์š”์†Œ๋ฅผ ์ธ์ง€ํ•˜๋Š” ๋ฐฉ์‹์„ ์„ค๋ช…ํ•ด์ค˜์š”. ์ด๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฒŒ์ŠˆํƒˆํŠธ ์ด๋ก ์ด ์žˆ๊ณ , UI์— ์ ์šฉํ•˜์—ฌ ๋ฐ”๋ผ๋ณผ ์ˆ˜๋„ ์žˆ์ฃ . โœ”๏ธ ์ผ๋ฐ˜์ ์œผ๋กœ ์šฐ๋ฆฌ๋Š” ํ•ญ์ƒ ์ด์ „์˜ ๊ฒฝํ—˜์ด๋‚˜ ์‹œ๊ฐ์  ํŒจํ„ด์„ ์„œ๋กœ ๋น„๊ตํ•˜๊ณ ์ž ํ•ด์š”. ๊ฒฝํ—˜ ์ฆ‰, ์ง€๊ฐํ•˜๊ฑฐ๋‚˜ ์ธ์ง€ํ•œ ๊ฒƒ์„ ํ•˜๋‚˜์˜ ํ˜„์ƒ์œผ๋กœ ๋ฐ›์•„๋“ค์ด๊ธฐ ๋•Œ๋ฌธ์ด์ฃ . โœ”๏ธ ๊ทธ๋ฆฌ๊ณ  ๊ทธ ๋‚ด์šฉ๋“ค์„ ์„œ๋กœ ์—ฐ๊ฒฐํ•˜๊ณ , ํ˜•ํƒœ๋ฅผ ์ธ์‹ํ•˜๊ณ , ์ •๋ณด๋ฅผ ๋ถ„๋ฅ˜ํ•˜๊ณ , ๊ฐ„๊ฒฉ์„ ๋ฉ”์šฐ๋ฉฐ ํฐ ๊ทธ๋ฆผ์„ ๊ทธ๋ฆฌ์ฃ . ํฐ ๊ทธ๋ฆผ์ด ์™„์„ฑ๋˜๋ฉด? ๋งต(์ง€๋„)์ด ๋˜์ฃ . โœ”๏ธ ํŠน์ •ํ•œ ์‚ฌ๋žŒ๋งŒ ๊ทธ๋Ÿฐ ๊ฑฐ ์•„๋‹ˆ๋ƒ๊ณ ์š”? ์•„๋‹ˆ์—์š”. ๋ชจ๋“  ์ธ๊ฐ„์˜ ์Šต์„ฑ์ด๋ผ ํ•  ์ˆ˜ ์žˆ์ฃ . ์šฐ๋ฆฌ๋Š” ์—ฐ๊ณ„๋œ ๊ฒƒ์œผ๋กœ๋ถ€ํ„ฐ ์œ ์‚ฌํ•จ์„ ๋„์ถœํ•˜๊ณ , ๊ทธ๊ฒƒ์„ ํ†ตํ•ด ์ต์ˆ™ํ•จ์„ ์Šต๋“ํ•˜๊ณ  ๋ฐ˜๋ณต๋œ ํ–‰๋™์„ ๋ณด์—ฌ์š”. โœ”๏ธ ๊ทธ๋Ÿฐ ์ ์—์„œ UI/UX ๋””์ž์ธ์— ์žˆ์–ด ๊ฒŒ์ŠˆํƒˆํŠธ๋Š” ์ง„๋ฆฌ๋ผ๊ณ  ์—ฌ๊ธธ ์ˆ˜ ์žˆ์–ด์š”. ํ•˜์ง€๋งŒ ์šฐ๋ฆฌ๋Š” ํ•ญ์ƒ ์กฐ์‹ฌํ•ด์•ผํ•˜์ฃ . ๊ฒŒ์ŠˆํƒˆํŠธ ์ด๋ก  ์€ ํ•˜๋‚˜์˜ ๋ฒ•์น™์ด๋ผ๋Š” ์ ์ด์š”. โœ”๏ธ ์–ด๋–ค ๋ฒ•์น™์ด์š”? ์ธ๊ฐ„์˜ ์‹œ์ง€๊ฐ์  ์›๋ฆฌ ์ค‘ ํ•˜๋‚˜๋กœ ๊ทœ๋ช…ํ•œ ๋ฒ•์น™์ด์š”. ์ฆ‰, ๋ชจ๋“  ๋””์ž์ธ ์ธก๋ฉด์—์„œ ์ธ๊ฐ„์˜ ์š•๋ง์˜ ํ‘œํ˜„๋ฐฉ์‹์„ ๋‹ค๋ฃฌ ๊ฒŒ์ŠˆํƒˆํŠธ ์ด๋ก ์ด ์ ์šฉ๋œ๋‹ค๊ธฐ ๋ณด๋‹ค๋Š” ๊ฐ๊ฐ์˜ ์š”์†Œ์— ๋”ฐ๋ฅธ ๋ฉด๋ชจ๋ฅผ ๋ณด์ธ๋‹ค๋Š” ์‚ฌ์‹ค์ด์ฃ . โœ”๏ธ ๊ฐ€๋” UT๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์„ฑ์„ ์กฐ์‚ฌํ•˜๋‹ค๋ณด๋ฉด ์‚ฌ๋žŒ๋“ค์€ ๊ทธ๋“ค์˜ ์š•๋ง์ด๋‚˜ ์š•๊ตฌ ๋ณด๋‹ค๋Š” '์ต์ˆ™ํ•จ'์— ๋”ฐ๋ผ ํ–‰๋™ํ•˜๋Š” ๋ชจ์Šต์ด ๋ณด์—ฌ์š”. ์ฆ‰, ์–ด๋А ๋ง ๋‚˜๋„ ๋ชจ๋ฅด๊ฒŒ ๋ชธ์— ๋ฐฐ์–ด๋ฒ„๋ฆฐ ํ–‰๋™์„ ๊ทธ๋Œ€๋กœ ๋ณด์—ฌ์ฃผ๋Š” ๊ฑฐ์ฃ . โœ”๏ธ ์—ฌํŠผ, ์ด๋Ÿฌํ•œ ์ ๋“ค์„ ์ฃผ์˜ํ•˜๋ฉฐ, ๋‹ค์Œ ๋‚ด์šฉ์„ ํ™•์ธํ•˜์‹œ๊ธธ ๋‹น๋ถ€๋“œ๋ ค์š”. 1๏ธโƒฃ ๊ทผ์ ‘์„ฑ์˜ ์›์น™: ๊ทผ์ ‘ํ•œ ๊ฐœ์ฒด๋“ค์€ ๋™์ผํ•œ ๊ฐœ์ฒด๋กœ ์ธ์‹๋œ๋‹ค. โœ”๏ธ ๊ฐ€๊นŒ์ด ์žˆ์œผ๋ฉด ํ•˜๋‚˜์˜ ๊ทธ๋ฃน์ฒ˜๋Ÿผ ๋ฌถ์„ ์ˆ˜ ์žˆ์ฃ . ์—ฌ๊ธฐ์„œ ๋ฌถ๋Š”๋‹ค๋Š” ํ–‰์œ„ ์ž์ฒด๊ฐ€ ๊ทผ์ ‘ํ•˜๊ฒŒ ๋งŒ๋“ ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•˜๊ณ , ์œ ์‚ฌํ•œ ๋‚ด์šฉ๋“ค๋กœ ๋ฌถ๋Š”๋‹ค๋Š” ๊ฒƒ๋„ ์˜๋ฏธํ•˜์ฃ . ๊ทธ๋Ÿฐ ์ธก๋ฉด์—์„œ ์„œ๋กœ ์—ฐ๊ด€๋œ ์ •๋ณด๋Š” ๊ฐ€๊นŒ์ด, ๊ด€๋ จ ์—†๋Š” ํ•ญ๋ชฉ์€ ๋ฉ€๋ฆฌ ๋–จ์–ด์ ธ ์žˆ๊ฒŒ ๊ตฌ์„ฑํ•˜๋ฉด ์‹œ๊ฐ์  ๊ณ„์ธต๊ณผ ์ •๋ณด ํ๋ฆ„์„ ๋†’์ผ ์ˆ˜ ์žˆ์–ด์š”. 2๏ธโƒฃ ๊ณตํ†ต ์˜์—ญ์˜ ์›์น™: ๊ณตํ†ต ์˜์—ญ ๋‚ด์—์„œ ๋ฐฐ์น˜๋œ ์š”์†Œ๋“ค์€ ๊ทธ๋ฃน์œผ๋กœ ์ธ์‹๋œ๋‹ค. โœ”๏ธ ๊ทผ์ ‘์„ฑ์˜ ์›์น™๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋™์ผํ•œ ์˜์—ญ์— ์š”์†Œ๊ฐ€ ๋ฐฐ์น˜๋˜๋ฉด ์„œ๋กœ ์—ฐ๊ด€์„ ๊ฐ€์ง„ ๊ทธ๋ฃน์œผ๋กœ ์ธ์‹๋ผ์š”. ์ด ๋ฐฉ์‹์€ ์ •๋ณด ๊ทธ๋ฃนํ™”, ์ฝ˜ํ…์ธ  ๋ฐฐ์น˜์— ์œ ์šฉํ•˜๋ฉฐ, ํฐ ๊ทธ๋ฃน ๋‚ด์—์„œ๋„ ์ผ๊ด€์„ฑ์„ ๊ฐ–๊ฒŒ ์ •๋ฆฌํ•  ์ˆ˜ ์žˆ์–ด์š”. 3๏ธโƒฃ ์œ ์‚ฌ์„ฑ์˜ ์›์น™: ์œ ์‚ฌํ•˜๊ฒŒ ์ƒ๊ธด ์š”์†Œ๋“ค์€ ๊ฐ™์€ ์š”์†Œ๋กœ ๋ณด์ธ๋‹ค. โœ”๏ธ ์šฐ๋ฆฌ๋Š” ์œ ์‚ฌ์„ฑ์ด ๋†’์œผ๋ฉด ๋” ์—ฐ๊ด€์„ฑ์ด ๋†’๋‹ค๊ณ  ์ธ์‹ํ•ด์š”. ์ด๋•Œ ์œ ์‚ฌ์„ฑ์„ ๋†’์ด๋Š” ๋ฐฉ๋ฒ•์—๋Š” ์ปฌ๋Ÿฌ, ์Šค์ผ€์ผ, ์‰์ž…, ํŒจํ„ด, ์‚ฌ์ด์ฆˆ ๋“ฑ์ด ์žˆ๋Š”๋ฐ, ๊ทธ ์ค‘ ์ปฌ๋Ÿฌ๋Š” ์œ ์‚ฌ์„ฑ์„ ๊ฐ€์žฅ ๋†’์ผ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด์—์š”. 4๏ธโƒฃ ๊ด€๋… ์† ์›ํ˜• ์›์น™: ๋Š์–ด์ง€๊ฑฐ๋‚˜ ๋ถˆ์™„์ „ํ•œ ์›ํ˜•์„ ๋ฐœ๊ฒฌํ•œ ๊ฒฝ์šฐ ๊ด€๋… ์†์˜ ์›ํ˜•์„ ๋ณด๋ คํ•œ๋‹ค. โœ”๏ธ ํ˜•ํƒœ๊ฐ€ ๋ถˆ์™„์ „ํ•˜๊ฑฐ๋‚˜ ์ผ๋ถ€์˜ ์™ธ๊ณฝ์„ ์ด ๋ช…ํ™•ํ•˜์ง€ ์•Š์„ ๋•Œ, ์šฐ๋ฆฌ๋Š” ๊ณผ๊ฑฐ์˜ ๊ฒฝํ—˜์„ ํ† ๋Œ€๋กœ '์™„์ „ํ•œ ํ˜•ํƒœ'๋กœ ๋งŒ๋“ค๊ณ ์ž ๋…ธ๋ ฅํ•ด์š”. ์ฆ‰, ๋ถˆ์™„์ „ํ•จ์—์„œ ์™„์ „ํ•จ์„ ์œ ์ถ”ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฑฐ์ฃ . ๋Œ€ํ‘œ์ ์ธ ์˜ˆ๋กœ ์•„์ด์ฝ˜์ด๋‚˜ ๋‹จ์ˆœํ™”๋œ ๋กœ๊ณ  ๋“ฑ์ด ์žˆ์–ด์š”. 5๏ธโƒฃ ๋Œ€์นญ์˜ ์›์น™: ๋Œ€์นญ์ ์ธ ์š”์†Œ๋“ค์€ ์„œ๋กœ ํ†ต์ผ์„ฑ์„ ๊ฐ€์ง„๋‹ค. โœ”๏ธ ๋Œ€์นญ์€ ๊ธฐ์ดˆ์ ์ธ ๋ฏธ์  ๊ฐ๊ฐ ์ค‘ ํ•˜๋‚˜์˜ˆ์š”. ์•ˆ์ •์ ์ธ ํ˜•ํƒœ๋ฅผ ๊ฐ–๊ธฐ ๋•Œ๋ฌธ์ด์ฃ . ์•ˆ์ •์ ์ผ ๊ฒฝ์šฐ ๋‹จ์กฐ๋กญ๊ณ  ์ •์ ์ธ ๊ฒฐ๊ณผ๋ฅผ ๋งŒ๋“ค์–ด ๋‚ด๋Š”๋ฐ์š”. ์ด๋ฅผ ์‚ด์ง ๋น„ํ‹€์–ด ๋น„๋Œ€์นญ ์š”์†Œ๋ฅผ ํ™œ์šฉํ•˜๋ฉด ์ข€ ๋” ๋™์ ์ธ ๊ฒฐ๊ณผ๋ฅผ ๋งŒ๋“ค์–ด ๋‚ผ ์ˆ˜ ์žˆ์–ด์š”. ๋‹จ, ๋Œ€์นญ๊ณผ ๋น„๋Œ€์นญ์ด ์ ์ ˆํ•œ ์กฐํ™”๋ฅผ ์ด๋ค„๋‚ด์•ผ ํ•œ๋‹ค๋Š” ์ ์€ ์žŠ์ง€ ๋ง์•„์•ผ ํ•ด์š”. 6๏ธโƒฃ ์—ฐ์†์„ฑ์˜ ์›์น™: ์—ฐ์†๋˜๋Š” ์š”์†Œ๋Š” ํ•˜๋‚˜์˜ ํ๋ฆ„์œผ๋กœ ์ธ์‹๋œ๋‹ค. โœ”๏ธ '์—ฐ์†์  ์š”์†Œ > ํ•˜๋‚˜์˜ ์„  ๋˜๋Š” ํ๋ฆ„ > ํ•˜๋‚˜์˜ ํŒจํ„ด, ๊ทธ๋ฃน'์œผ๋กœ ์‚ฌ๋žŒ๋“ค์€ ์ธ์‹ํ•ด์š”. ์ด์— ๋”ฐ๋ผ ๋ ˆ์ด์•„์›ƒ๊ณผ ๋‚ด์šฉ ๊ตฌ์„ฑ์— ํฐ ๋„์›€์„ ์ฃผ์ฃ . ์—ฐ์†์„ฑ์ด ์ž˜ ๋ฐฐ์น˜๋ผ ์žˆ์œผ๋ฉด ๋ถ€๋“œ๋Ÿฌ์šด ํ๋ฆ„์„ ๋„์™€์ค˜์š”. ๋ฐ˜๋ฉด, ์—ฐ์†์„ฑ์„ ์ผ๋ถ€๋Ÿฌ ๊นจ๋Š” ๊ฒฝ์šฐ๋„ ์žˆ๋Š”๋ฐ์š”. ์‹œ์ž‘๊ณผ ๋์ฒ˜๋Ÿผ ๋ณ€ํ™”๋ฅผ ์•Œ๋ ค์ค„ ์ˆ˜ ์žˆ๋Š” ์ˆ˜๋‹จ์ด ๋˜๊ธฐ๋„ ํ•ด์š”. 7๏ธโƒฃ ๋™์‹œ ์ด๋™์˜ ์›์น™: ๋™์‹œ์— ์ด๋™ํ•˜๋Š” ์š”์†Œ๋“ค์€ ์„œ๋กœ ๋™์ผํ•œ ํŒจํ„ด์œผ๋กœ ์ธ์‹๋œ๋‹ค. โœ”๏ธ ๋™์ผํ•œ ๋ฐฉํ–ฅ์œผ๋กœ ์ด๋™ํ•  ๊ฒฝ์šฐ ์šฐ๋ฆฌ๋Š” ๊ฐ™์€ ๊ทธ๋ฃน์œผ๋กœ ์ธ์‹ํ•ด์š”. ์ด๋•Œ ๊ฐœ๋ณ„ ์š”์†Œ๊ฐ€ ์–ด๋–ป๋ƒ๋Š” ์ค‘์š”ํ•˜์ง€ ์•Š์•„์š”. ๋‹จ์ง€, ํ•จ๊ป˜ ์›€์ง์ด๋ƒ, ์›€์ง์ด์ง€ ์•Š๋А๋ƒ๋งŒ ์ค‘์š”ํ•œ ์š”์†Œ๋กœ ๋ณด๋Š” ๊ฑฐ์ฃ . ๋˜ํ•œ, ๊ฐœ๋ณ„์š”์†Œ๊ฐ€ ๊ฐ™์€ ๋ฐฉํ–ฅ๊ณผ ์†๋„๋กœ ์›€์ง์ด๋ฉด, ๋”์šฑ ๊ฐ•ํ•œ ์—ฐ๊ด€์„ฑ์„ ๊ฐ–๊ฒŒ ๋ผ์š”.

์•Œ๋ฆผ

์•Œ๋ฆผ์ด ์—†์Šต๋‹ˆ๋‹ค