[3/6] 2์ฃผ์ฐจ HW - ๋์์ธ ์์น ๊ธฐ๋ฐ์ผ๋ก ์ฑ ๋ถ์ํ๊ธฐ
๐ ์ค์ต ๋ชฉํ
๋์์ธ ์์น(๊ฒ์ํํธ ์ฌ๋ฆฌํ, UX ๋น์ฃผ์ผ ๋์์ธ ์์น) ๊ธฐ๋ฐ์ผ๋ก ์ฑ ํ๋ฉด์ ๋ถ์ํด๋ณด์!
๐ ์ด๋ก ์ ๋ฆฌ
๊ฒ์ํํธ ์ฌ๋ฆฌํ
1. ์ ์ฌ์ฑ์ ์๋ฆฌ :
๋ชจ์๊ณผ ํฌ๊ธฐ, ์์๊ณผ ๋ฐฉํฅ ๋ฑ ํน์ฑ์ด ๋น์ทํ ๊ฒ๋ผ๋ฆฌ ๋ฌถ์ด์ ์ง๊ฐํ๋ ค๋ ๊ฒฝํฅ์ ๋๋ค.
๋ชจ์์ด๋ผ๋ ํน์ฑ๋ณด๋ค ํฌ๊ธฐ์ ์์์ด ์ฌ๋์ ๋์ ์ ์ฌํ๋ค๊ณ ์ธ์ํ๋ ๋ฐ์ ๋ ํฌ๊ฒ ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
์ ์ฌ์ฑ์ด ๋ฐ์ด๋ ํ๋ฉด์ ์ ๋ณด์ ๊ทธ๋ฃนํ๊ฐ ์๋์ด ์ฌ์ฉ์๊ฐ ๋ด์ฉ์ ํ์ ํ๊ธฐ๊ฐ ํธํฉ๋๋ค.




2. ๊ทผ์ ์ฑ์ ์๋ฆฌ :
๊ฐ๊น์ด ๊ฒ๋ผ๋ฆฌ ๋ฌถ์ด์ ์ง๊ฐํ๋ ค๋ ๊ฒฝํฅ์ ์๋ฏธํฉ๋๋ค.
์ฌ๋๋ค์ ์๋ก ๊ฐ๊น์ด ์๋ ์์๋ค์ด ๋ฉ๋ฆฌ ์๋ ์์๋ณด๋ค ๊ด๋ จ์ด ๋ง์ ๊ฒ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
๋ชจ๋ ์์๋ค์ด ๊ฐ์ ๊ฐ๊ฒฉ์ ์ ์งํ๊ณ ์๋ค๋ฉด ๋ชจ๋ ์๋ก์๊ฒ ํน๋ณํ ์ฐ๊ด์ฑ์ด ์๋ค๊ณ ์๊ฐํ๊ฒ ๋ฉ๋๋ค.




3. ํ์์ฑ์ ์๋ฆฌ :
์ฌ๋ฐฑ์ด ์๋๋ผ๋ ํ์ด๋ ๊ฐ๊ฒฉ์ ๋ฉ์์ ๋ซํ ํํ๋ก ์ธ์ํ๋ ค๋ ๊ฒฝํฅ์ ์๋ฏธํฉ๋๋ค.
๋จ์ํ๋ ๋ํ์ผ๋ก ๋ง๋ค์ด์ง๋ ์์ด์ฝ์ ๋ง์ด ํ์ฉ๋๋ ์๋ฆฌ์ ๋๋ค.


ํ์์ฑ์ ์๋ฆฌ ๋๋ถ์ ์ด๋ฏธ์ง์ ์ผ๋ถ๊ฐ ์๋ ค์์ด๋ ์์ผ๋ก ๊ณ์ํด์ ์์๋ค์ด ์ด์ด์ง ๊ฒ์ด๋ ๊ฑธ ์ถ์ธกํ ์ ์์ต๋๋ค.
4. ์ฐ์์ฑ์ ์๋ฆฌ :
์ฐ์์ ์ผ๋ก ์ง์ ์ด๋ ๊ณก์ ์ ์ด๋ฃจ๋ ์์๋ฅผ ์ ์ธ์งํ๋ ๊ฒฝํฅ์ ์๋ฏธํฉ๋๋ค.
์ฌ๋์ ์ด๋ค ์์๊ฐ ๋ฐฉํฅ์ฑ์ ๊ฐ์ง๊ณ ์ฐ์๋์ด ์์ ๋ ํธ์ํจ์ ๋๋๋๋ค.
์ง์ ์ด๋ ๊ณก์ ์ ๋ฐ๋ผ ๋ฐฐ์ด๋ ๋์์ ํ๋์ ๋จ์๋ก ์ธ์ํฉ๋๋ค.

์์๋ณด๋ค ์ฐ์๋ ๋ฐฐ์ด์ด ๋ ํฐ ํ์ ๊ฐ์ง๊ธฐ ๋๋ฌธ์ ์์ ์ด๋ฏธ์ง์์๋ ์ง์ ๊ณผ ๊ณก์ ์ด ๋ ๋จผ์ ๋์ ๋ค์ด์ค๊ฒ ๋ฉ๋๋ค.
5. ๊ณตํต์ฑ์ ์๋ฆฌ :
๊ฐ์ ๋ฐฉํฅ์ผ๋ก ์์ง์ด๋ ๊ฒ๋ค๋ผ๋ฆฌ ๋ ๊ด๋ จ์ฑ์ด ๋๋ค๊ณ ์ธ์ํ๋ ๊ฒฝํฅ์ ์๋ฏธํฉ๋๋ค.
๋ชจ์, ์์ ๋ฑ์ ๊ด๊ณ์์ด ํจ๊ป ์์ง์ด๊ฑฐ๋ ๋ฐ๋๋ ์์๋ ์๋ก ๋ ๊ด๋ จ์ด ์๋ค๊ณ ๋๋๋๋ค.
์ฃผ๋ก ๋ชจ์ ๊ทธ๋ํฝ์์ ์์ฃผ ์ฌ์ฉ๋๋ ์๋ฆฌ์ ๋๋ค.


UX ๋น์ฃผ์ผ ๋์์ธ ์์น
1. ์ค์ผ์ผ (Scale) :
์๋์ ์ธ ํฌ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ๊ตฌ์ฑ์ ์ค์๋์ ์์๋ฅผ ํ์ํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
๊ฐ์ฅ ์ค์ํ ์์๋ ๋ ์ค์ํ ์์๋ณด๋ค ํฌ๊ฒ ํํํด์ ์ฃผ๋ชฉ๋ฐ์ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค.
์๊ฐ์ ์ผ๋ก ๋ณด๊ธฐ ์ข์ ๋์์ธ์ ์ผ๋ฐ์ ์ผ๋ก 3๊ฐ์ง ์ดํ์ ํฌ๊ธฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค.

2. ์๊ฐ์ ์๊ณ (Visual hierarchy) :
์ค์ํ ์์์ ๋ฐ๋ผ ์์ ์ ํ๋ฆ์ด ์ด๋ํ๋๋ก ๋์์ธํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
์๊ฐ์ ์๊ณ๋ ํฌ๊ธฐ, ์์, ๊ฐ๊ฒฉ, ๋ฐฐ์น ๋ฑ์ ํน์ฑ์ ํ์ฉํด ํํํฉ๋๋ค. ์ฌ์ฉ์๊ฐ ํ๋ฉด์์ ์ ๋ณด๋ฅผ ์ฐพ๋ ๋ฐ ์ด๋ ค์์ ๊ฒช๋ ๊ฒฝ์ฐ ๋ช ํํ ์๊ฐ์ ์๊ณ๊ฐ ์์ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค.
๋ช ํํ ์๊ฐ์ ์๊ณ๋ฅผ ๋ง๋ค๊ธฐ ์ํด์๋ 2~3๊ฐ ์ ๋์ ํ ์คํธ ํฌ๊ธฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
์ค์ํ๋ค๊ณ ์๊ฐ๋๋ ์์๋ ์ฑ๋๊ฐ ๋๊ณ ์์ ๋๋น๊ฐ ํฌ๊ฒ, ๋ ์ค์ํ ์์์๋ ์ฑ๋๊ฐ ๋ฎ๊ณ ์์ ๋๋น๊ฐ ํฌ์ง ์๋๋ก ์์ ์ฌ์ฉํฉ๋๋ค.

3. ๊ท ํ (Balance) :
๋์์ธ ์์ ๊ฐ์ ์ ๋นํ ๋ฐฐ์ด์ด๋ ๋น์จ์ ์ฃผ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
์์ง์ด๋, ์ํ์ ๊ฐ์ ์ถ์ ๋น์ทํ ์์ ์๊ฐ์ ์ ๋ณด๊ฐ ๋ฐฐ์นํ์ฌ ์ฌ์ฉ์๋ก ํ์ฌ๊ธ ์์ ๊ฐ์ ์ฃผ๊ณ , ์ฝํ ์ธ ๋ฅผ ๋ณด๊ธฐ ํธํ๊ฒ ํฉ๋๋ค. ์ด๋, ๊ผญ ๋์นญ์ด ์๋์ด๋ ๊ด์ฐฎ์ต๋๋ค.

4. ๋๋น (Contrast) :
๋์ ๋๊ฒ ๊ตฌ๋ณ๋๋๋ก ๊ฐ์กฐํ๊ธฐ ์ํด ๋ ์์ ๊ฐ์ ์ฐจ์ด๋ฅผ ๋๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
ํน์ ๋ถ๋ถ์ ์ฌ์ฉ์์๊ฒ ๋๋ณด์ด๊ฒ ํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋๋ค. ํฌ๊ธฐ๋ ์์ ๋ฑ์ ํน์ฑ์ ํ์ฉํด ๋ ๋์์ธ ์์ ๊ฐ์ ๋๋ ทํ ์ฐจ์ด๋ฅผ ์ค๋๋ค.์ฃผ๋ก ๋ช ์์ ์ฐจ์ด๋ฅผ ์ฃผ๊ฑฐ๋ ์์์ ์ฐจ์ด๋ฅผ ์ฃผ๋ ๋ฐฉ๋ฒ์ ๋ง์ด ์ฌ์ฉํฉ๋๋ค.
๋ ์ค์ํ ํ ์คํธ์ ๊ฐ์กฐ๋ฅผ ์ค์ด๊ธฐ ์ํด ๋ฐฐ๊ฒฝ๊ณผ์ ๋ช ๋ ์ฐจ์ด๋ฅผ ๋๋ฌด ์ค์ด์ง ์๋๋ก ์ฃผ์ํด์ผ ํฉ๋๋ค. ๋๋ฌด ํ๋ฆฟํ ๊ธ์๋ ์ฌ์ฉ์ฑ์ ๋จ์ด๋จ๋ฆด ์ ์์ต๋๋ค.

๐ ๊ณผ์
์ก์ฝ๋ฆฌ์์ ํํ๋ฉด๊ณผ ์กํ๋๋์ด ๋ด์ค ํ๋ฉด์ ๋์์ธ ์์น์ ๊ธฐ๋ฐ์ผ๋ก ๋ถ์ํด๋ณด์๋ค.

๐ Figma ์ค์ต ํ๋ฉด ๋ฐ๋ก๊ฐ๊ธฐ
Figma
Created with Figma
www.figma.com