๐ 2022๋ 4์ 2์ฃผ TOP3
1๏ธโฃ ์ฐ๋ฆฌ๊ฐ ๋งค์ผ ์ง๋ฉดํ๋ UX ๋์์ธ์ 15๊ฐ์ง ๋ฒ์น (2๋ถ)
2๏ธโฃ ์คํฌํฐํ์ด ์์ด์ฝ ์์คํ ์ ๋ฐ์ดํธ
3๏ธโฃ 10๊ฐ์ง ํ์ UI(์ฌ์ฉ์ ์ธํฐํ์ด์ค) ๋์์ธ ํ
1๏ธโฃ ์ฐ๋ฆฌ๊ฐ ๋งค์ผ ์ง๋ฉดํ๋ UX ๋์์ธ์ 15๊ฐ์ง ๋ฒ์น (2๋ถ)
์ด ๊ธฐ์ฌ์ 1๋ถ์์ ์ฐ๋ฆฌ๋ ๋์์ธ ํ๋ก์ธ์ค์์ ์ธ๊ฐ ํ๋์ ์ค์์ฑ์ ๊ดํด ์ด์ผ๊ธฐํ๊ธฐ ์์ํ์ต๋๋ค.
์์ฒ ๋ช ์ ๋ ์๊ฐ ๊ธฐ์ฌ๊ฐ ํ๋ฅญํ๊ณ ์ ์ฉํ๋ค๋ ๊ธ์ ์ ์ธ ์๊ฒฌ์ ๋จ๊ฒผ์ต๋๋ค. ๊ทธ๋์ ์ฌ๋๋ค์ด ์ผ๋ถ ์ฌ์ดํธ๋ฅผ ์ข์ํ๊ณ ์ซ์ดํ๋ ์ด์ ์ ๊ดํ ์ค๋ช ์ ์ด์ด๊ฐ๋ 2๋ถ๋ฅผ ์๊ฐํ๊ฒ ๋์ด ๊ธฐ์ฉ๋๋ค. ์ด๋ฏธ ๋งํ๋ฏ์ด, ์ด๋ฌํ ์์น์ ์ฌ๋๋ค์ ์ํด ํ๋ก๋ํธ๋ฅผ ์์ฐํ๋ ๋ชจ๋ ์ฌ๋์๊ฒ ์ ์ฉํ ๊ฒ์ ๋๋ค. ์์ํด ๋ด ์๋ค!
#6 โ ํผํฌ ์๋ ๋ฒ์น
ํผํฌ ์๋ ๋ฒ์น์ ์ฐ๋ฆฌ์ ์ธ์์ด ์ด๋ป๊ฒ ๊ธฐ์ต๋๋์ง ์ค๋ช ํฉ๋๋ค. ๊ทธ๊ฒ์ ์ฐ๋ฆฌ๊ฐ ๊ฒฝํ์ ์ ๋ฐ์ ์ธ ์ธ์์ด ์๋ ๊ฐ์ฅ ๊ธ์ ์ ์ด๊ฑฐ๋ ๋ถ์ ์ ์ธ ์๊ฐ๊ณผ ๋ง์ง๋ง ์๊ฐ๋ง์ ๊ธฐ์ตํ๋ค๊ณ ๋งํฉ๋๋ค.
์ฌ์ฉ ๋ฐฉ๋ฒ
1. ๋ฆฌ์์น ํผํฌ ์๋ ๋ฒ์น์ UX ๋ฆฌ์์น๋ฅผ ์ค๊ณํ๋ ๋ฐ ๋งค์ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. ์ ํ์ด ์ด๋ค ์ธ์์ ์ฃผ๋์ง ์๊ณ ์ถ๋ค๋ฉด ๊ฐ๋จํ ์ง๋ฌธ์ ํ์ธ์. ์๋ฅผ ๋ค์ด, ์ ํ์ ์ฌ์ฉํ๋ฉด์ ๊ฐ์ฅ ์ด๋ ค์ ๋ ์ ์ด๋ ๋ถํธํ ์ ์ ๋ฌผ์ด๋ณผ ์ ์์ต๋๋ค. ๋ต๋ณ์ ๋ถ์ ์ ์ธ ํผํฌ๋ฅผ ์ฐพ์ ๋ค์ ์ ๊ฑฐํ๊ฑฐ๋ ๊ธ์ ์ ์ธ ํผํฌ๋ก ๋ฐ๊พธ๋๋ก ๋์์ค ๊ฒ์ ๋๋ค.
2. ๋ ๋์ ์ธ์ ๋์์ธํ๊ธฐ ์ด๊ฒ์ ๊ธ์ ์ ์ธ ํผํฌ๋ฅผ ๋ ๋ง์ด ๋ง๋ค๊ณ ๋ถ์ ์ ์ธ ํผํฌ๋ฅผ ์ ๊ฑฐํ๋ ๊ฒ์ ๋๋ค.
์ฌ๊ธฐ์์ ๊ฐ์ฅ ์ข์ ์๋ ํ์ต์ ๊ฒ์ํ์ ๋๋ค. ์ฐ๋ฆฌ๋ ์๋ก์ด ๊ฒ์ ๋ฐฐ์ฐ๋ ๊ฒ์ด ๋งค์ฐ ์คํธ๋ ์ค๋ฅผ ์ค ์ ์๋ค๋ ๊ฒ์ ์๊ณ ์์ผ๋ฏ๋ก, ๊ทธ ๊ณผ์ ์ ๊ฒ์์ฒ๋ผ ๋๋ผ๊ฒ ํ๋ ๊ฒ์ด ์ข์ ํด๊ฒฐ์ฑ ์ ๋๋ค. ์ด๊ฒ์ ์ข์ ๊ธฐ์ต์ ๋ง๋ญ๋๋ค. ์๋ฅผ ๋ค์ด, ์ ์์ ์ฑ์ทจ ์์คํ ์ ๋์ ์์ค์ ๋๊ธฐ ๋ถ์ฌ๋ฅผ ์ ์งํ๋ ๋ฐ ๋์์ด ๋๋ ๊ธ์ ์ ์ธ ํผํฌ๋ฅผ ๋ง๋ญ๋๋ค.
3. ๋ง์ง๋ง ๋ถ๋ถ์ ์ง์คํ๊ธฐ ํนํ ๋ณต์กํ ์ ํ์ ๊ฒฝ์ฐ ๋์ฑ ๊ทธ๋ ์ต๋๋ค.
20๋จ๊ณ๋ก ๊ตฌ์ฑ๋ ๋ณต์กํ ์์์ด ์๋ค๊ณ ๊ฐ์ ํด ๋ณด๊ฒ ์ต๋๋ค. ์ฌ์ฉ์๊ฐ ํธ์ํจ์ ๋๋ ์ ์๋๋ก ์๋ ์์ฑ๊ณผ ์๋ ์์ ์ ํ์ฑํํ๊ณ , ์ด๋ฌํ ๋จ๊ณ๋ฅผ ๋ฒ์ฃผ๋ก ๋๋๊ณ , ์ธ๋ผ์ธ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ์ถ๊ฐํ๋ ๋ฑ์ ์์ ์ ์ํํ ์ ์์ต๋๋ค. ์ด๊ฒ์ด ๋ถ์ ์ ์ธ ํผํฌ๋ฅผ ์ ๊ฑฐํ ๋ฐฉ๋ฒ์ ๋๋ค. ํ์ง๋ง ๋ชจ๋ ํ๋ก์ธ์ค๋ฅผ ์๋ฃํ๋ ๋ฐ ๋ง์ ์๊ฐ๊ณผ ์กฐ์น๊ฐ ํ์ํ ๊ฒฝ์ฐ ๋ชฉํ๋ ์ฌ์ฉ์๊ฐ ํด๋น ํ๋ก์ธ์ค๋ฅผ ์๊ฒ ๋ง๋๋ ๊ฒ์ ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ฌ๊ธฐ์ ์ข์ ๋ง์ง๋ง ๋ถ๋ถ์ด ์ ์ฉํ ์ ์์ต๋๋ค.
์ฌ์ฉ์์๊ฒ ๊ณต๊ฐ๊ณผ ์ง์์ ์ ๊ณตํ์ธ์. ์๋ฅผ ๋ค์ด, ์์ ์์ฑ์ด ๊ฐ๋จํ์ง ์์์์ ์ดํดํ๋ค๋ ๊ฒ์ ๊ฐ์กฐํ ์ ์์ผ๋ฉฐ, ์์ ์ด ์๋ฃ๋๋ฉด ์ฌ์ฉ์ ๋ง์กฑ๋๋ฅผ ๊ณต์ ํ ์ ์์ต๋๋ค.
์ฃผ์ ๋ด์ฉ
- ๋ ๋์ UX ๋ฆฌ์์น๋ฅผ ๋์์ธํ๋ ค๋ฉด ํผํฌ ์๋ ๋ฒ์น์ ์ฌ์ฉํ์ธ์.
- ๋ฐ์ ์ธ์์ ์ค์์ฑ์ ๊ธฐ์ตํ์ธ์. ๊ทธ๋ค์ด ์ ์ฒด ๊ฒฝํ์ ๋ง๋ญ๋๋ค.
- ๋ง์ง๋ง ๋จ๊ณ์ ์ข์ ๋์์ธ์ ๋ถ์ ์ ์ธ ์ธ์์ ๋ถ๋๋ฝ๊ฒ ํ ์ ์์ง๋ง, ๋ง์ง๋ง ๋จ๊ณ๋ ํญ์ ๊ธ์ ์ ์ธ ์ธ์๋ณด๋ค ๋ ์์ํฉ๋๋ค. ๊ฐ๋ฅํ๋ฉด ๋ถ์ ์ ์ธ ํผํฌ๋ฅผ ์ ๊ฑฐํ๋๋ก ๋ ธ๋ ฅํ์ธ์.
..
๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
2๏ธโฃ ์คํฌํฐํ์ด ์์ด์ฝ ์์คํ ์ ๋ฐ์ดํธ
๋ณ๊ฒฝ ์ด์ ์ ๋นํ์ธ๋ ์คํ ๋ฆฌ
์ฐ๋ฆฌ์ ํ์ฌ ์์ด์ฝ ๋ชจ์์ 2016๋ ๋ง์ง๋ง ์ฌ์ค๊ณ ์ดํ๋ก ์ฐ๋ฆฌ์ ํจ๊ป ํ๊ณ ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ๊ทธ๊ฒ๋ค์ด ์ฐ๋ฆฌ์๊ฒ ์ข์ ์ญํ ์ ํ์ง๋ง ์ต๊ทผ์ ์ฐ๋ฆฌ๋ ์๊ฐ์ ์ธ์ด์ ์งํ์ ๋ง์ถฐ ์์ด์ฝ์ ์ ๋ฐ์ดํธํ ํ์๊ฐ ์์์ ํ์ธํ์ต๋๋ค.
๋ฌธ์ ๊ตฌ์ฑํ๊ธฐ
์์ด์ฝ์ ์๋ก ๊ณ ์น๊ธฐ ์ํด ๋์์ธ ์์คํ ํ ์ค ํ๋์ธ Encore Foundation์ 2016๋ ์ฌ์ค๊ณ์ ์ฐธ์ฌํ ์๋ จ๋ ์์ด์ฝ ์ ์์ Rob Bartlett์ ํ๋ ฅํ์ต๋๋ค. ํจ๊ป ์ฐ๋ฆฌ๋ ๊ทธ๋ค์ด ํด๊ฒฐํด์ผ ํ ์ฃผ์ ๊ณผ์ ๋ฅผ ์๋ณํ์ต๋๋ค.์ ์ ๋ฌด๊ฒ์ ๊ตต๊ธฐ๊ฐ ๋๋ฌด ๊ฐ๋์๋ค.
์ฐ๋ฆฌ๋ ๋ค์ ๋ช ๊ฐ์ง๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์์ด์ฝ์ ๋ฌด๊ฒ๋ฅผ ์ฌ๊ฒํ ํ๊ณ ์ถ์์ต๋๋ค.
- ์ง๋ ๋ช ๋ ๋์ ์๊ฐ์ ์ธ์ด๊ฐ ๋ฐ์ ํ๋ฉด์ ์์ด์ฝ์ ๋ํ ํ ์คํธ ๊ธฐ๋ฐ ๋ฒํผ์ ์ ์ ๋ ๋ง์ด ๋ฐ๊พธ๊ณ UI์์ ๋ ๋์ ๋๊ฒ ๋ง๋ค์์ต๋๋ค.
- ๋ํ ํ์ดํฌ๊ทธ๋ํผ์ ํฌ๊ธฐ์ ๋ฌด๊ฒ๋ฅผ ๋๋ ค ์์ ์์ด์ฝ์ด ์ฝ๊ฐ ๊ท ํ์ด ๋ง์ง ์๊ฒ ๋ณด์ด๊ฒ ํ์ต๋๋ค.
- ๊ฐ์ฅ ์ค์ํ ๊ฒ์ ํนํ ์์ด์ฝ์ด ๋ค์ํ ๋ฐฐ๊ฒฝ ์์ ๋ฐฐ์น๋์ด ์์ ๋ ์์ด์ฝ์ ๊ฐ๋ ์ฑ์ ๋์ผ ์ ์๋ค๋ ์ ์ ๋๋ค.
๋ณํฉํ ๋ช ๊ฐ์ง ๋ค๋ฅธ ์์ด์ฝ ์ธํธ๊ฐ ์์์ต๋๋ค. ์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ Encore์์คํ ์ ๋ค์ํด์ก์ผ๋ฉฐ ์ฐ๋ฆฌ๋ ๋ชจ๋ ๊ฒ์ ์์ฉํ ์ ์๋ ์๋ก์ด ์ธํธ๋ฅผ ๋ง๋ค๊ธฐ ์์ํ์ต๋๋ค.
์์ด์ฝ์ ๋ง๋ค๊ณ ๊ด๋ฆฌํ๋ ๊ฒ์ด ์๊ฐ๋งํผ ์ฝ์ง ์์์ต๋๋ค. ์ฐ๋ฆฌ๋ ์ผ๋ฐ์ ์ผ๋ก ํ์ ์ํ ์์ด์ฝ ์์คํ ์ ๋จ์ํํด์ผ ํ ํ์์ฑ์ ๋ณด์์ต๋๋ค. ํ ๊ฐ์ง ์ฃผ์ ์ธก๋ฉด์ ์์ด์ฝ & ์์ฑ ํ๋ฆ์ ๋ํ ๋์์ธ ์์ค ํ์ผ์ ์์ ํ ๊ฐ์ ธ์์ ์ต๊ทผ Figma๋ก์ ์ ํ์ ๊ธฐ๋ฐ์ผ๋ก ๊ตฌ์ถํ๋ ๊ฒ์ ๋๋ค. ๋ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ ์์คํ ์ ์ถ๊ฐ๋๋ ๋ชจ๋ ๋จ์ผ ์์ด์ฝ์ ๋ํด ๋ง๋ค์ด์ผ ํ๋ ์์ด์ฝ ํฌ๊ธฐ์ ์๋ฅผ ์ค์ด๋ ๊ฒ์ด์์ต๋๋ค.
๋ชจ๋๋ฅผ ์ํ ์ํํ ์ ํ ์ง์ํฉ๋๋ค.
์ฐ๋ฆฌ๋ ์ด ์ ๋ฐ์ดํธ๊ฐ ์ต์ข ์ฌ์ฉ์๋ฅผ ์ํ ์ํํ ์ ํ์ฒ๋ผ ๋๊ปด์ง๊ธฐ๋ฅผ ์ํ์ต๋๋ค. ๋๋ค์์ ์์ด์ฝ์ ๋ํด ์ฌ์ฉ์๊ฐ ๊ธธ์ ์ฐพ์ ์ ์์ง๋ง ์๋ก์์ง ์์ด์ฝ ์คํ์ผ์ ์ฆ๊ธธ ์ ์๋๋ก ๋ฐ๋ก ์ด๋ฌํ ์ด์ ๋ก ํ์ฌ์ ๋น์ ๋ฅผ ๊ทธ๋๋ก ์ ์งํ์ต๋๋ค.
๊ทธ๋์ ์๋ก์ด์ ์?
์ ๋ฐ์ ์ธ ์ ๋ฐ์ดํธ์ ํจ๊ป ์ฃผ์ ์ฐจ์ด์ ์ ๊ธฐ๋ณธ ์ ์ํฌ๊ธฐ๋ฅผ ๋ณ๊ฒฝํ์ฌ ์์ด์ฝ์ ๊ฐ์ค์น๋ฅผ ๋๋ฆฌ๊ณ ์๋ค๋ ๊ฒ์ ๋๋ค. 24px ์์ด์ฝ ํฌ๊ธฐ์์ 1px์์ 2px๋ก ๋๊ป๋ฅผ ๋๋ฆฝ๋๋ค.
๋ ๊ตต์ ํฌ๊ธฐ: 24 & 16ํฝ์ ์์ด์ฝ์ ์ ๋๊ป๋ฅผ ๋๋ฆฌ๊ณ ์ด์ ๋ค์ ๋ ๊ฐ์ง ํฌ๊ธฐ์ ์์ด์ฝ๋ง ์ ์งํ์ฌ ์์ด์ฝ ์์คํ ์ ๋จ์ํํฉ๋๋ค.
- 2px ๋๊ป๋ฅผ ์ฌ์ฉํ๋ 24ํฝ์ (๋ฉ์ธ/๊ธฐ๋ณธ ํฌ๊ธฐ๋ก ๊ฐ์ฃผ)
- 1.5px ๋๊ป ์ฌ์ฉํ๋ 16ํฝ์
ํ์ํ ๋ค๋ฅธ ๋ชจ๋ ํฌ๊ธฐ๋ ์ด๋ฌํ ๊ณ ์ ํ ํฌ๊ธฐ์ ํฌ๊ธฐ ์กฐ์ ๋ฒ์ ์ ๋๋ค. ๊ทธ ๊ฒฐ๊ณผ ๋ ์ฝ๊ธฐ ์ฌ์ด ์์ด์ฝ๊ณผ ํ์ดํฌ๊ทธ๋ํผ์ ๊ท ํ ์กํ ์ธํธ๊ฐ ๋ง๋ค์ด์ก์ต๋๋ค.
์ธํธ ์ ์ฒด์ ๊ฑธ์ณ ์๋ก์์ง ์คํ์ผ ๋ ๋๊บผ์ด ์ ์ผ๋ก ์ ์คํ์ผ์ ๋ชจ๋ ๋จ์ผ ์์ด์ฝ์ ๋ค์ ๊ทธ๋ ค ์ธํธ๋ฅผ ๋ณํฉํ์ต๋๋ค. ๋๋ค์์ ์์ด์ฝ์ ์ด์ ๊ณผ ๋์ผํ ์์ ๋ฅผ ์ ์งํฉ๋๋ค.
ํ์ฑ ์ํ์ ์ฐจ์ด ์ฆ๊ฐ ๋ช ํ์ฑ์ ๋์ด๊ธฐ ์ํด ํ์ฑ ์ํ๋ ๋ ์ด์ ๊ฐ์ค์น์ ๋ํ ๋ฏธ๋ฌํ ๋ณ๊ฒฝ๋ง ์ฌ์ฉํ์ง ์๊ณ ๋์ ์์ด์ฝ์ ์ผ๋ถ๋ฅผ ์ฑ์๋๋ค.
์ด๊ฒ์ด ์ฐ๋ฆฌ๊ฐ ํ ๋ฐฉ๋ฒ์ ๋๋ค.
Rob Bartlett์ ํํธ๋ ๊ด๊ณ Encore Foundation์ Spotify ๋์์ธ ์ธ์ด์ ๋ชจ๋ ํต์ฌ ์์๋ฅผ ๋ด๋นํฉ๋๋ค. ๋ช ๋ฌ ๋์ Rob Bartlett์ ๋งค์ฐ ๊ธด๋ฐํ๊ณ ์ฑ๊ณต์ ์ธ ํ์ ์ ๋ณด์ฅํ๊ธฐ ์ํด ํ์ ํฉ๋ฅํ์ต๋๋ค.
์ ์์ด์ฝ ๊ฐ์ค์น ์๋ณ ์ด ํ๋ก์ธ์ค์ ์ฃผ์ ๋จ๊ณ ์ค ํ๋๋ ์์ผ๋ก ์ฌ์ฉํ ์์ด์ฝ ๊ฐ์ค์น๋ฅผ ์ ์ํ๋ ๊ฒ์ด์์ต๋๋ค. ์ฐ๋ฆฌ๋ ์ฃผ๋ก 1px ์ ๋๊ป๋ฅผ ์ฌ์ฉํ๊ณ ์ฐ๋ฆฌ๋ ๊ทธ๊ฒ์ ๋๋ฆฌ๊ณ ์ถ๋ค๋ ๊ฒ์ ์๊ณ ์์์ต๋๋ค. ํ์ง๋ง ์ผ๋ง๋ ํ ๊น์? ์ฐ๋ฆฌ๋ ๋ช ๊ฐ์ง ๋ค๋ฅธ ์ต์ ์ ์๋ํ์ต๋๋ค. ์ฐ๋ฆฌ๊ฐ ์์๋ ๊ณณ์์ ๋ ๋๋ดํ ์๋ก ๋ ๋ช ํํ ๊ฐ์ ์ ๋ณผ ์ ์์์ต๋๋ค. ๋ฐ๋ณต ์์ ํ์ ์ฐ๋ฆฌ๋ ๋ ๊ฐ์ง ์๋ก์ด ๊ฐ์ค์น๋ฅผ ๊ฒฐ์ ํ์ต๋๋ค. ์ด ๊ฒฐ์ ์ ๋ ๊ฐ์ง ์ฃผ์ ์ธก๋ฉด์ ๊ธฐ๋ฐ์ผ๋ก ํ์ต๋๋ค.
- ํ๋ก์ ํธ์ ๋ํ ์ฐ๋ฆฌ์ ๋ชฉํ๋ฅผ ๋ฌ์ฑํ๊ธฐ ์ํด ์๋ก์ด ๊ฐ์ค์น๋ ์ด์ ๋ณด๋ค ๋์ ๋๊ฒ ๋ ๊ณผ๊ฐํด์ผ ํ์ต๋๋ค. 1.5px & 2px๋ฅผ ์ฌ์ฉํ์ฌ 16px ํฌ๊ธฐ์ ๊ฒฝ์ฐ 50%, 24px ํฌ๊ธฐ์ ๊ฒฝ์ฐ 100%๋ก ์ ๋๊ป๋ฅผ ๋๋ ธ์ต๋๋ค.
- ์ ์์ด์ฝ์ ๋ง๋ค ๋ ์ ๊ฐ์ค์น๋ฅผ ์ฝ๊ฒ ๋์์ธํด์ผ ํ์ต๋๋ค. ์ด๋ ์ค๊ณ์๊ฐ ๋ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ์์ ํ ์ ์๋ ์ ์ฒด ํฝ์ ๋๋ ์ ๋ฐ ํฝ์ ๊ฐ์ ์ต๋ํ ๊ฐ๊น๊ฒ ์ ์งํ๋ ๊ฒ์ ์๋ฏธํ์ต๋๋ค.
์์ผ๋ก ์ด๋ค ํฌ๊ธฐ๋ฅผ ์ฌ์ฉํ ๊น์? ์ด์ ์์ด์ฝ ์ธํธ์๋ 220๊ฐ ์ด์์ ์์ด์ฝ x 5๊ฐ์ง ํฌ๊ธฐ ๋ณํ = 1,100๊ฐ์ ๊ฐ๋ณ ์์ฐ์ด ์์์ต๋๋ค. ์ ๋ฐ์ดํธ์ ๋ชฉํ๋ ํ์ด ์์คํ ์ ๋ ๋น ๋ฅด๊ณ ์ฝ๊ฒ ์ถ๊ฐํ ์ ์๋๋ก ๊ฐ๋ณ ์์ฐ์ ์๋ฅผ ์ต๋ํ ์ค์ด๋ ๊ฒ์ด์์ต๋๋ค.
Encore Web์ด 24px ์์ด์ฝ๋ง ์ฌ์ฉํ๋๋ก ์ฑ๊ณต์ ์ผ๋ก ์ ํํ๋ค๋ ์ฌ์ค์ ์ด๋ฏธ ์๊ณ ์์์ง๋ง ์ ์ฒด ์์คํ ์ ์๊ตฌ ์ฌํญ๋ ๊ณ ๋ คํด์ผ ํ์ต๋๋ค. ๋ถ์์ ์ฌ์ฉํ์ฌ 16ํฝ์ ๊ณผ 24ํฝ์ ์ด ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๋ ์์ด์ฝ ํฌ๊ธฐ์์ ๋ถ๋ช ํ ์ ์ ์์์ต๋๋ค.
16px ์์ด์ฝ์ ์ฃผ์ ์ฌ์ฉ ์ฌ๋ก๋ ๋ฐ์คํฌํฑ๊ณผ ๊ฐ์ ์ฑ๊ณผ ๋ชจ๋ ํธ๋ ํ์ ๋ค์ด๋ก๋ ํ์๊ธฐ์ ๊ฐ์ด ์์ด์ฝ์ด ๋ ์์์ผ ํ๋ ๊ฒฝ์ฐ์ ๋ฐ๊ฒฌ๋์์ต๋๋ค. ์ด๋ฌํ ๊ฒฝ์ฐ ์ถ์๊ฐ ์ ๋๋ก ์๋ํ๋ ค๋ฉด ํด๋น ์์ด์ฝ ๊ณต๊ฐ์ ์ ์ฒด ๋๋น์ ๋์ด๋ฅผ ์ฌ์ฉํด์ผ ํ๋ 16ํฝ์ ์์ด์ฝ์ด ํ์ํ์ต๋๋ค.
์์ด์ฝ์ด ๋ ํฐ ํฌ๊ธฐ๋ก ํ์ํ ๋๋ถ๋ถ์ ๊ฒฝ์ฐ 24px ํฌ๊ธฐ๋ฅผ ๋๋ฆฌ๋ฉด ํจ๊ณผ๊ฐ ์๋ค๊ณ ํ๋จํ์ต๋๋ค.
์ต์ข ๊ฒฐ๊ณผ๋ 5๊ฐ ๋์ 2๊ฐ ํฌ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ์์คํ ์ ํฌ๊ธฐ ๋ณํ ์๋ฅผ ์ด์ ์ 40%๋ก ์ค์์ต๋๋ค. ๊ฐ๋ณ์ ์ผ๋ก ๊ทธ๋ ค์ง ์์ด์ฝ์ด 660๊ฐ๋ก ์ค์ด๋ญ๋๋ค. ์์ผ๋ก ์ธํธ๋ฅผ ์๋ก ์ถ๊ฐํ๊ฑฐ๋ ๋ณ๊ฒฝํ๋ฉด ํจ์จ์ฑ ํฅ์์ด ํฐ ์ํฅ์ ๋ฏธ์น ๊ฒ์ ๋๋ค.
..
๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
3๏ธโฃ 10๊ฐ์ง ํ์ UI(์ฌ์ฉ์ ์ธํฐํ์ด์ค) ๋์์ธ ํ
์น์ฌ์ดํธ๋ ๋งํฌ๋ก ์ฐ๊ฒฐ๋ ํ์ด์ง ๊ทธ๋ฃน ๊ทธ ์ด์์ ๋๋ค. ์ธํฐํ์ด์ค๋ ์๋ก ๋ค๋ฅธ ์ฌ๋ฌผ(์ด ๊ฒฝ์ฐ ๊ฐ์ธ๊ณผ ํ์ฌ ๋๋ ๊ฐ์ธ์ ์น ์กด์ฌ)์ด ๋ง๋๊ณ , ์ํตํ๊ณ , ์๋ก ์ํฅ์ ๋ฏธ์น๋ ๊ณต๊ฐ์ ๋๋ค. ์ด๋ฌํ ์ํธ ์์ฉ์ ๋ฐฉ๋ฌธ์์๊ฒ ๊ฒฝํ์ ์ ๊ณตํ๋ฉฐ ์น ๋์์ด๋๋ก์ ๊ฐ๋ฅํ ํ ์ข์ ๊ฒฝํ์ ๋ณด์ฅํ๋ ๊ฒ์ด ๋น์ ์ ์๋ฌด์ ๋๋ค.
์น์ฌ์ดํธ๋ ๋งํฌ๋ก ์ฐ๊ฒฐ๋ ํ์ด์ง ๊ทธ๋ฃน ๊ทธ ์ด์์ ๋๋ค. ์ธํฐํ์ด์ค๋ ์๋ก ๋ค๋ฅธ ์ฌ๋ฌผ(์ด ๊ฒฝ์ฐ ๊ฐ์ธ๊ณผ ํ์ฌ ๋๋ ๊ฐ์ธ์ ์น ์กด์ฌ)์ด ๋ง๋๊ณ , ์ํตํ๊ณ , ์๋ก ์ํฅ์ ๋ฏธ์น๋ ๊ณต๊ฐ์ ๋๋ค. ์ด๋ฌํ ์ํธ ์์ฉ์ ๋ฐฉ๋ฌธ์์๊ฒ ๊ฒฝํ์ ์ ๊ณตํ๋ฉฐ ์น ๋์์ด๋๋ก์ ๊ฐ๋ฅํ ํ ์ข์ ๊ฒฝํ์ ๋ณด์ฅํ๋ ๊ฒ์ด ๋น์ ์ ์๋ฌด์ ๋๋ค.
๊ทธ๋ฆฌ๊ณ ๊ทธ ํต์ฌ์ ์ฌ์ฉ์๋ฅผ ์ต์ฐ์ ์ผ๋ก, ๊ทธ๋ฆฌ๊ณ ํญ์ ์๊ฐํ๋ ๊ฒ์ ๋๋ค.
๊ณ ๋ง๊ฒ๋ ์น ๋์์ธ์ ๋น๊ต์ ์๋ก์ด ๋ถ์ผ์ด์ง๋ง HCI(์ธ๊ฐ-์ปดํจํฐ ์ํธ ์์ฉ)์ ๋ํ ๊ณผํ์ ์ฐ๊ตฌ ๋๋ถ์ ๋๋ค. ๊ทธ๋ฆฌ๊ณ HCI ์ฐ๊ตฌ์์ ๋์จ ์ด 9๊ฐ์ง ํธ๋ฆฌํ ์ง์นจ์ ๋์์ธ ํ๋ก์ธ์ค๋ฅผ ์งํํ ๋ ์ฌ์ฉ์์๊ฒ ์ง์คํ๋ ๋ฐ ๋์์ด ๋ ๊ฒ์ ๋๋ค.
์ธํฐํ์ด์ค์ ๊ธฐ๋ฅ ๋ ์ด์์์ ์ค์ ์ ๋ ์ธํฐํ์ด์ค ๋์์ธ์ ์ฌ์ฉ์ ๊ฒฝํ ๋์์ธ์ ํ์ ์งํฉ์ผ๋ก, ๋ ํฐ ๊ทธ๋ฆผ, ์ฆ ์ธํฐํ์ด์ค๋ฟ๋ง ์๋๋ผ ์ ์ฒด ๊ฒฝํ์ ์ค์ ์ ๋ก๋๋ค.
1. ์ฌ์ฉ์๋ฅผ ํ์ ํ๋ผ
๋ฌด์๋ณด๋ค๋ ๋ด๋ถ & ์ธ๋ถ ์ฌ์ฉ์๊ฐ ๋๊ตฌ์ธ์ง ์์์ผ ํฉ๋๋ค. ์ฆ, ๋ถ์ ์ฑ์ด ๊ฐ์ ธ์ฌ ์ ์๋ ๋ชจ๋ ์ธ๊ตฌ ํต๊ณ ๋ฐ์ดํฐ๋ฅผ ์๊ณ ์์ด์ผ ํฉ๋๋ค. ๊ทธ๋ฌ๋ ๋ ์ค์ํ ๊ฒ์ ๊ทธ๋ค์ด ํ์๋ก ํ๋ ๊ฒ๊ณผ ๋ชฉํ๋ฅผ ๋ฌ์ฑํ๋ ๋ฐ ๋ฐฉํด๊ฐ ๋๋ ๊ฒ์ด ๋ฌด์์ธ์ง ์๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
๊ณต๊ฐ์ ์์ค์ ๋๋ฌํ๋ ค๋ฉด ํต๊ณ๋ฅผ ์ฃผ์ ๊น๊ฒ ๋ถ์ํ๋ ๊ฒ ์ด์์ด ํ์ํฉ๋๋ค. ์น์ฌ์ดํธ๋ฅผ ์ฌ์ฉํ๋ ์ฌ๋๋ค์ ์์์ผ ํฉ๋๋ค. ๊ทธ๊ฒ์ ๊ทธ๋ค๊ณผ ์ผ๊ตด์ ๋ง๋๊ณ ์ด์ผ๊ธฐํ๊ณ , ๊ทธ๋ค์ด ๋น์ ์ ์ ํ(๊ทธ๋ฆฌ๊ณ ์๋ง๋ ๋ค๋ฅธ ์ฌ๋๋ค)์ ์ฌ์ฉํ๋ ๊ฒ์ ์ง์ผ๋ณด๊ณ , "์ด ๋์์ธ์ ๋ํด ์ด๋ป๊ฒ ์๊ฐํ์ธ์?"๋ณด๋ค ๋ ๊น์ ์ง๋ฌธ์ ํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
๊ทธ๋ค์ ๋ชฉํ๋ ๋ฌด์์ ๋๊น? ๊ทธ๋ค์ด ๊ทธ๋ฌํ ๋ชฉํ๋ฅผ ๋ฌ์ฑํ๋ ๋ฐ ๋ฐฉํด๊ฐ ๋๋ ๊ฒ์ ๋ฌด์์ ๋๊น? ์น์ฌ์ดํธ๊ฐ ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ๊ทน๋ณตํ๊ฑฐ๋ ํด๊ฒฐํ๋ ๋ฐ ์ด๋ป๊ฒ ๋์์ด ๋ฉ๋๊น?
์ฌ์ฉ์๊ฐ ๋ฌด์์ ์ํ๋์ง ์๋๊ฒ์ ๋ฉ์ถ์ง๋ง์ธ์. ๋ ๊น์ด ํ๊ณ ๊ทธ๋ค์ด ํ์ํ ๊ฒ์ ์ฐพ์ผ์ธ์. ๊ฒฐ๊ตญ ์๋ง์ ์๊ตฌ์ ํ์๋ฌผ์ผ ๋ฟ์ ๋๋ค. ์ฌ์ฉ์์ ๊ทผ๋ณธ์ ์ธ ์๊ตฌ ์ฌํญ์ ํด๊ฒฐํ ์ ์๋ค๋ฉด ์ฌ์ฉ์์ ์๊ตฌ ์ฌํญ์ ํด๊ฒฐํ๋ ๋์์ ๋ณด๋ค ๊ทผ๋ณธ์ ์ธ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑํ ์ ์์ต๋๋ค.
๋ฐ์ดํฐ๋ฅผ ๋ถ์ํ๊ณ ์ฌ์ฉ์์ ๋ํํ๋ฉด์ ์๊ฒ ๋ ํต์ฐฐ๋ ฅ์ ์ฌ๋๋ค์ด ์ธํฐํ์ด์ค๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ์๋ถํฐ ํด๋น ์ธํฐํ์ด์ค์์ ๊ฐ์กฐํ ์ฝํ ์ธ ์ ํ์ ์ด๋ฅด๊ธฐ๊น์ง ๋ชจ๋ ๊ฒฐ์ ์ ์ ๋ณด๋ฅผ ์ ๊ณตํฉ๋๋ค.
2. ์ฌ๋๋ค์ด ์ธํฐํ์ด์ค๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ ์ ์
์ธํฐํ์ด์ค๋ฅผ ๋์์ธํ๊ธฐ ์ ์ ์ฌ๋๋ค์ด ์ธํฐํ์ด์ค๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ ์ํด์ผ ํฉ๋๋ค. ํฐ์น ๊ธฐ๋ฐ ์ฅ์น์ ๋ณด๊ธ์ด ์ฆ๊ฐํจ์ ๋ฐ๋ผ ์๊ฐ๋ณด๋ค ์ค์ํ ๋ฌธ์ ์ ๋๋ค.
Tinder: ์ฑ์ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง ๊ทธ๋๋ก ๊ฐ๋จํ ์ค์์ดํ์ ์ฉ์ด์ฑ๊ณผ ์ถฉ๋์ผ๋ก ์ ์๋ฉ๋๋ค.
์ฌ๋๋ค์ ์น์ฌ์ดํธ์ ์ฑ์ ๋ ๊ฐ์ง ๋ฐฉ์์ผ๋ก ์ฌ์ฉํฉ๋๋ค. ์ง์ (์ ํ์ ์ธํฐํ์ด์ค ์์์ ์ํธ ์์ฉ) & ๊ฐ์ ์ (์ ํ ์ธ๋ถ์ UI ์์์ ์ํธ ์์ฉ)์ ๋๋ค.
์ง์ ์ ์ธ ์ํธ์์ฉ์ ์
- ๋ฒํผ ๋๋ฅด๊ธฐ (Tapping a button)
- ์นด๋ ๊ธ๊ธฐ ( Swiping a card)
- ์๊ฐ๋ฝ ๋์ผ๋ก ํญ๋ชฉ ๋๋๊ทธ ์ค ๋๋กญํ๊ธฐ (Dragging and dropping an item with a fingertip)
๊ฐ์ ์ํธ์์ฉ์ ์
- ๋ง์ฐ์ค๋ก ๊ฐ๋ฆฌํค๊ณ ํด๋ฆญ (Pointing and clicking with a mouse)
- ์ฃผ์ ๋ช ๋ น/๋จ์ถํค ์ฌ์ฉ(Using key commands/shortcuts)
- ์์ ํ๋์ ์ ๋ ฅ (Typing into a form field)
- Wacom ํ๋ธ๋ฆฟ์์ ๊ทธ๋ฆฌ๊ธฐ(Drawing on a Wacom tablet)
๋๋ก๋ ์ํธ ์์ฉ์ด ๋๋ฌด ์ฝ์ต๋๋ค. ์ฌ์ฉ์๊ฐ ๋๊ตฌ์ด๋ฉฐ ์ด๋ค ์ฅ์น๋ฅผ ์ฌ์ฉํ๋์ง ์ฌ๊ธฐ์์ ๊ฒฐ์ ์ ๊น์ด ์ํฅ์ ์ฃผ์ด์ผ ํฉ๋๋ค. ๋ ธ์ธ์ด๋ ์์ฌ์ฃผ๊ฐ ์ ํ๋ ์ฌ๋๋ค์ ์ํด ๋์์ธํ๋ ๊ฒฝ์ฐ ์ค์์ดํ์ ์์กดํ๊ณ ์ถ์ง ์์ ๊ฒ์ ๋๋ค. ์ฃผ๋ก ํค๋ณด๋๋ฅผ ํตํด ์ฑ๊ณผ ์ํธ ์์ฉํ๋ ์๊ฐ๋ ์ฝ๋๋ฅผ ์ํด ๋์์ธํ๋ ๊ฒฝ์ฐ ๋ชจ๋ ์ผ๋ฐ์ ์ธ ํค๋ณด๋ ๋จ์ถํค๋ฅผ ์ง์ํ์ฌ ๋ง์ฐ์ค ์์ ์๊ฐ์ ์ต์ํํ๊ณ ์ถ์ ๊ฒ์ ๋๋ค.
3. ๊ธฐ๋์น ์ค์
์ฌ์ดํธ ๋๋ ์ฑ๊ณผ์ ๋ง์ ์ํธ ์์ฉ์ ๊ฒฐ๊ณผ๋ฅผ ๊ฐ์ ธ์ต๋๋ค. ๋ฒํผ์ ํด๋ฆญํ๋ฉด ๋์ ์ฐ๊ฑฐ๋, ์น์ฌ์ดํธ๋ฅผ ์ง์ฐ๊ฑฐ๋, ํ ๋จธ๋์ ์์ผ ์ผ์ดํฌ์ ๋ํด ํ๋ฏ๋ ๋ง์ ํ ์ ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๋ ํ ๊ฒฐ๊ณผ๊ฐ ์์ ๋๋ง๋ค ๋ถ์ํจ๋ ์์ต๋๋ค.
๋ฐ๋ผ์ ์ฌ์ฉ์๊ฐ ๋ฒํผ์ ํด๋ฆญํ ํ ์ด๋ค ์ผ์ด ์ผ์ด๋ ์ง ๋ฏธ๋ฆฌ ์๋ ค์ผ ํฉ๋๋ค. ๋์์ธ & ๋ณต์ฌ๋ฅผ ํตํด ์ด ์์ ์ ์ํํ ์ ์์ต๋๋ค.
๋์์ธ์ผ๋ก ๊ธฐ๋์น ์ค์
- ์ํ๋ ์์ ์ ํด๋นํ๋ ๋ฒํผ ๊ฐ์กฐ ํ์
- ๋๋ฆฌ ์ดํด๋๋ ๊ธฐํธ(์: ์ญ์ ๋ฒํผ์ ํด์งํต, ํญ๋ชฉ ์ถ๊ฐ๋ฅผ ์ํ ๋ํ๊ธฐ ๊ธฐํธ, ๊ฒ์์ ์ํ ๋๋ณด๊ธฐ ๋ฑ)๋ฅผ ๋ณต์ฌ์ ํจ๊ป ์ฌ์ฉ
- ์๋ฏธ๊ฐ ์๋ ์์ ์ ํ("์ด๋" ๋ฒํผ์ ๋ น์, "์ค์ง"๋ ๋นจ๊ฐ์)
์นดํผ๋ก ๊ธฐ๋์น ์ค์
- ํด๋ฆฌ์ด ๋ฒํผ ์นดํผ ์์ฑ
- ๋น ์ํ์์ ๋ฐฉํฅ์ฑ/์ ๋์ฑ ์นดํผ ์ ๊ณต
- ๊ฒฝ๊ณ ์ ๋ฌ & ํ์ธ ์์ฒญ
๋ฌด์ธ๊ฐ๋ฅผ ์๊ตฌ์ ์ผ๋ก ์ญ์ ํ๋ ๊ฒ๊ณผ ๊ฐ์ด ๋๋๋ฆด ์ ์๋ ๊ฒฐ๊ณผ๋ฅผ ์ด๋ํ๋ ์์ ์ ๊ฒฝ์ฐ ์ฌ๋๋ค์๊ฒ ํ์คํ์ง ๋ฌป๋ ๊ฒ์ด ์ข์ต๋๋ค.
InVision์์๋ ํด์งํต ์์ด์ฝ์ ํด๋ฆญํ์ฌ ์ฆ์ ์ญ์ ํ์ง ์์ต๋๋ค. ๋์ , ํ์คํ์ง ๋ฌป๊ณ ์ทจ์ํ ์ ์์์ ์๋ ค์ค๋๋ค.
..
๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
๋๊ธ
์๊ฒฌ์ ๋จ๊ฒจ์ฃผ์ธ์