-
โ โถโโ โฃใ2์ฃผ์ฐจ ํ์ต์ผ์ง ์ฒซ๋ฒ์งธ | ํ๋ฆฌ์ค์ฟจ UI ๊ธฐ์ด | Chapter 1~2 ์ ๋ฆฌ | UX์ด๋ก โข๊ธฐ์ด ํํธ 2 | Chapter 0~12 ์๊ฐ | Chapter 0~12 ์ ๋ฆฌ๐ฏ๐๐ง๐ค ๐๐๐จ๐/๐๐๐๐๐๐๐ 2024. 10. 9. 18:29
๐ ์ค๋์ ํ ์ผ ๐
๐ป UX์ด๋ก โข๊ธฐ์ด ํํธ 2 Chapter 0~12 ์๊ฐ
๐ป UX์ด๋ก โข๊ธฐ์ด ํํธ 2 Chapter 0~12 ์ ๋ฆฌ
๐ป ํ๋ฆฌ์ค์ฟจ UI ๊ธฐ์ด Chapter 1~2 ์ ๋ฆฌ
๐ป UX์ด๋ก โข๊ธฐ์ด ํํธ 2 Chapter 0~12
โก๏ธUX๋?
โ ์ฌ์ฉ์๊ฐ ์ด๋ค ์์คํ ์ด๋, ์ ํ, ์๋น์ค๋ฅผ ์ง,๊ฐ์ ์ ์ผ๋ก ์ด์ฉํ๋ฉด์ ๋๋ผ๋ ์ด์ฒด์ ๊ฒฝํ์ ์ด๋ฅด๋ ๋จ์ด๋ก, ์ฌ๋์ ํ๋ ์ ๋ฐ์ ๊ฑธ์ณ ๋ชจ๋ ๊ฒฝํ์ ๊ณ ๋ คํด์ผ ํ๋ค.
โก๏ธUX Research?
โ ์ฌ์ฉ์๊ฐ ๋๋ผ๋ ๊ฒฝํ์ ๊ด์ฐฐํ๊ณ ๋ถ์ํ์ฌ ๊ณ ๊ฐ์ ์ง์ง ๋ฌธ์ (pain point)๋ฅผ ์ฐพ์๋ด๋ ๊ฒ
โก๏ธUsability?
โ ์ฌ์ฉ์ฑ : ์ฌ์ฉ ๊ฒฝํ์ ์ป๊ฒ ๋๋ โ์ฌ์ฉ์์ ํธ์์ฑโ
โ ํ๊ท ์ ์ธ (ํน์ ํ๊ท ์ดํ์) ๋ฅ๋ ฅ๊ณผ ๊ฒฝํ์ ์ง๋ ์ฌ๋์ด ์ด๋ ํ ๋๊ตฌ๋ฅผ ํตํด ๋ฌด์์ ์ํํ๊ณ ์ ํ ๋, ์ค์ค๋ก ์ฌ์ฉ๋ฒ์ ์ ์ ์์ด์ผ ํ๋ค.
โก๏ธUX ๋ฆฌ์์ฒ์ ๋จ๊ณ๋ณ ์๊ฐํ๋ ๋ฐฉ์
โถ ๋ฌธ์ ์ดํด : ํญ์ ๊ทผ๊ฑฐ๋ฅผ ๊ฐ์ง๊ณ ๋ฌธ์ ๋ฅผ ์ดํดํ๋ ค๊ณ ํ ๊ฒ
โ ๋ฐ์ดํฐ๋ฅผ ์ป๊ธฐ ์ ์ ์ด๋ก /๊ฐ์ ์ ์ธ์ฐ๋ ๊ฒ์ ํฐ ์ค์ = ์๋ฌด๊ฒ๋ ์ถ์ธกํ์ง ๋ง๋ผ
โ ์ฌ๋๋ค์ ์ฌ์ค์ ๋ง์ถฐ ์ด๋ก ์ ์์ ํ๋ ๊ฒ์ด ์๋๋ผ ์ด๋ก ์ ๋ง๊ฒ ์ฌ์ค์ ์๊ณกํ๋ค = ์ธ์ง๋ถ์กฐํ
โ ์ ๋ณด ์์ง (๊ด์ฐฐ) : ๊ด์ฐฐ์ UX๋ฆฌ์์น์ ํ์
โ ์ฌ๋๋ค์ด ์ด๋ป๊ฒ ํ๋ํ๋์ง ๋งฅ๋ฝ์ ์ดํดํ๋๋ฐ ๋์์ ์ฃผ๋ฉฐ, ์ฌ์ฉ์ ๋์ฆ ํ์ ์ ํต์ฌ์ด๋ค.
โ ์ข์ ๊ด์ฐฐ์ ์์งํ๊ณ ์๋ ์ ๋ณด์ ์ฐ๊ด๋ ๊ฒ๋ค์ ์ฃ๋ถ๋ฆฌ ์ฐ๊ด์ง์ด ํ๋จํ์ง ์๋ ๊ฒ
โ ์ ์ ๊ฒฌ์ ๊ธ๋ฌผ์ด๋ค
โ ๊ฐ์ค ์ค์ : ํญ์ ๊ฐ์ค์ ์ธ์ฐ์
โ UX๋ฆฌ์์ฒ๋ ์ธ๊ฐ์ ํ๋, ๊ธฐ์ ์ ์ง๋ณด, ์์ฅ ํธ๋ ๋ ๋ฐ ํ์ฌ์ ์ฌ์ ์ ๋ชฉํ์ ๋ํ ์ง์์ ํ์ฉํด ๋ฆฌ์์น์์ ์์งํ ์ฌ์ค๋ค์ ๊ฐ์ฅ ์ ๋ง๋ ๊ฐ์ค์ ์ธ์์ผ ํ๋ค.
โ ๊ฐ์ค ์ค์ ์ ํ์ ํด์ผ ํ๋ ์ ๋ณด : ์ฌ์ฉ์์ ์ฃผ์ ๋ชฉํ, ์ํํ๋ ํ์คํฌ์ ์์ ํ๋ฆ, ๋ฉํ ๋ชจ๋ธ, ์ฌ์ฉํ๋ ๋๊ตฌ, ์ผํ๋ ํ๊ฒฝ, ์ฌ์ฉํ๋ ์ฉ์ด
โ ๊ฐ์ค ์ฐ์ ์์ ์ค์ & ์๋ฃจ์ ๋์ถ : ๊ฐ์ฅ ์ค์ํ ๋ฌธ์ ์ ์ง์คํ ๊ฒ
โ ์ฑ๊ณต์ ์ธ ์๋ฃจ์ ์ ์ํด์๋ ์๊ฑฐ๋ฒ์ ์ฌ์ฉํด ์์ด๋์ด ์ ๊ฑฐ.
โ ์๊ฑฐ๋ฒ์ ํตํ ์๋ฃจ์ ๋์ถ
- ๊ฐ์ค์ ํตํด ๋์ถ๋ ์๋ฃจ์ ์ด ์ค์ ์กฐ์ฌ ๊ฒฐ๊ณผ์ ๋ถํฉํ๋ ์ง ํ์ธ
- ๊ด์ฐฐํ ๋ชจ๋ ๊ฒ์ ์ ๋๋ก ์ค๋ช ํ์ง ๋ชปํ๋ ๋ถ์คํ ์๋ฃจ์ ์ ์ ๊ฑฐ
- ์ง๋์น๊ฒ ๋ณต์กํ๊ฑฐ๋ ๋ถ์์ฐ์ค๋ฝ๊ฒ ๋ฐ์ดํฐ์ ๋ผ์ ๋ง์ถ ์๋ฃจ์ ์ ์ ๊ฑฐ
- ์๋ฃจ์ ์ ๋ณ์ ํญ์ ๊ทผ๊ฑฐ๊ฐ ์์ ๊ฒ
- ์๋ฃจ์ ๊ฒฐ์ ์ ๋ํ ๊ทผ๊ฑฐ๋ ํ๋นํ๋ฉฐ ํธํฅ์ด ์์ด์ผ ํ๋ค.
โ ์๋ฃจ์ ๋์ถ ์ดํ : ํญ์ ๊ฒฐ๊ณผ๋ฅผ ๋์ถํ๊ณ ๋ด๋ถ ๊ณต์
โ ๋ฆฌ๋ทฐ ์ธ์ ์ ๋ง๋ จํด์ ๋ฌด์์ ์ด๋ป๊ฒ ๋ฐ๊ฒฌํ๋์ง ์ค๋ช ํ๊ณ , ์ป์ด์ง ์ธ์ฌ์ดํธ์ ์๋ฃจ์ ์ ์ ๋ฌํ๋ค.
โ ๊ตฌ์ฒด์ ์ด๊ณ ์คํ ๊ฐ๋ฅํ ๋์์ธ ์ ์์ฌํญ์ ์ ๊ณตํ๋ค.
โก๏ธ์ฌ์ฉ์๋ ๋น์ ์ฒ๋ผ ์๊ฐํ์ง ์๋๋ค
โ ์ฌ์ฉ์์ ๋ํ 4๊ฐ์ง ์์น
โ ์ฌ์ฉ์๋ ๋น์ ์ฒ๋ผ ์๊ฐํ์ง ์๋๋ค.
โ ์ฌ์ฉ์๋ ์์ ์ ํ๋์ ๋ํ ์ด์ ๋ฅผ ์ ์์ง ๋ชปํ๋ค.
โ ์ฌ์ฉ์์ ๋ฏธ๋ ํ๋์ ๊ฐ์ฅ ์ ์์ธกํ๋ ๊ฒ์ ๊ทธ๋ค์ ๊ณผ๊ฑฐ ํ๋์ด๋ค.
โ ์ฌ์ฉ์์ ํ๋์ ๋งฅ๋ฝ์ ๋ฐ๋ผ ๋ค๋ฅด๋ค. (๋์ผํ ์ฌ๋์ด๋ผ๋ ํ๊ฒฝ์ด ๋ฐ๋๋ฉด ๋ค๋ฅด๊ฒ ํ๋ํ๋ค)
โก๏ธ๋น์ฆ๋์ค ๊ด์ ๊ณผ ์ฌ์ฉ์ ๊ด์
โ ์ ๊ณต์ ๊ด์ : ๋น์ฆ๋์ค ์ด์ or ํ ๊ฐ๋ฐ ์ด์ ๋ฑ์ ์ ํ ๋งฅ๋ฝ์ ๊ณ ๋ คํ์ฌ ํ์ฌ์ ๋ฐฉ์์ ๋์ ํ์๋๊ฐ?
โ ์ฌ์ฉ์ ๊ด์ : ํ ๋ค์ด ๋ฉ๋ด๋ฅผ ๋ฐ๊ฒฌํ ์ ์๋๊ฐ? ์ด๊ฒ(this)์ด ๋ฌด์์ด๋ผ๊ณ ์๊ฐํ๋๊ฐ? ์ด๊ฒ์ ์ฌ์ฉํ์ฌ ๋ชฉ์ ์ ๋ฌ์ฑํ ์ ์๋๊ฐ?
โก๏ธ๋๋ธ ๋ค์ด์๋ชฌ๋ ๋ฐฉ๋ฒ๋ก ๊ณผ ๋ฆฌ์์น
โ ๋๋ธ ๋ค์ด์๋ชฌ๋ ๋ฐฉ๋ฒ๋ก ?
- Discover (๋ฐ๊ฒฌ), Define (์ ์), Develop (๊ฐ๋ฐ), Deliver (์ ๋ฌ)
- ์ฒซ๋ฒ์งธ ๋ค์ด์๋ชฌ๋๋ โ๋งฅ๋ฝ์ ์ฌ์ฉ์ ๋ฆฌ์์นโ ๋ฅผ ํ๋ฉฐ ๊ด์ฐฐ, ๊ณต๊ฐ, ํด์์ ํ๋ค.
- ๋๋ฒ์งธ ๋ค์ด์๋ชฌ๋๋ โ๋ฐ๋ณต์ ๋์์ธโ ์ ํ๋ฉฐ ๊ฐ๋ฐ, ์ธก์ , ํ์ต์ ํ๋ค.
โถ Discover (๋ฐ๊ฒฌ)
โ ๋ฆฌ์์น, ์ธํฐ๋ทฐ๋ฅผ ํตํด ๋ฌธ์ ๋ฅผ ํ์ํ๊ณ ๋ฐ๊ฒฌํ๋ ๋จ๊ณ
โ Define (์ ์)
โ ๋ฐ๊ฒฌํ ๋ฌธ์ ์ค ์ง์ง ๋ฌธ์ ๊ฐ ๋ฌด์์ธ์ง ์ดํดํ๊ณ ์ฐ์ ์์๋ฅผ ๊ฒฐ์
โ ํผ์๋, ๊ณ ๊ฐ์ฌ์ ์ง๋ ๋ฑ์ ํ์ฉํด ์ฌ์ฉ์๋ค์ ์ดํดํด๋ณธ๋ค.
โ Develop (๋ฐ์ )
โ ์ฐ์ ์์๊ฐ ๋์ ๋ฌธ์ ํด๊ฒฐ์ ์ํด ๊ตฌ์ฒด์ ์ธ ๊ฐ์ ์ ์ํ ์์ด๋์ด๋ฅผ ๋ ผ์
โ ๋์์ธ ์ปจ์ , ๋์์ธ ๊ตฌ์ฒดํ, ํ๋กํ ํ์ ์ ์ ๋ฐ ๊ฒ์ฆ
โ Deliver (์ ๋ฌ)
โ ๊ฐ์ ์์ด๋์ด ์ค ์คํ ๊ฐ๋ฅํ ๊ฒ์ ์ต์ข ์ผ๋ก ์ ๋ฆฌ
โก๏ธ๋ฆฌ์์น์ ๋ฐฉ๋ฒ๋ก
โ ์ ๋์ (์ผ๋ง๋ ๋ง์ ํ์์ด ๋ฐ์ํ๋๊ฐ?)
- A/B ํ ์คํธ, Card sorting, Eyetracking
โ ์ ์ฑ์ (์ด๋ป๊ฒ ๋ฌธ์ ๋ฅผ ๊ณ ์น ๊ฒ์ธ๊ฐ?)
- ๊ด์ฐฐ, ์ธํฐ๋ทฐ ์งํ, ํฌ์ปค์ค ๊ทธ๋ฃน ์ธํฐ๋ทฐ
โก๏ธํผ์๋๋?
โ ์ฐ๋ฆฌ์ ์ ํ์ด๋ ์๋น์ค๋ฅผ ์ฌ์ฉํ๋ ๊ณ ๊ฐ๊ตฐ์ ๋ํํ๊ธฐ ์ํด ๊ฐ์์ผ๋ก ๋ง๋ ์ธ๋ฌผ
โก๏ธ๋ฌธ์ ๊ธฐ์ 3์์
โถ ์๋น์ค์ ํ์ฌ [๋ชฉํ]
โ ์๋น์ค์ ๋ํด ์ฌ์ ์ ์ดํด๊ด๊ณ์๊ฐ ๋ค๋ฃจ๊ณ ์ ํ๋ [๋ฌธ์ ]
โ ์๋น์ค์ ๊ตฌ์ฒด์ ์ธ ์๋ฃจ์ ์ด ์๋ [๊ฐ์ ์ ์ํ ๋ช ํํ ์๊ตฌ์ฌํญ]
โก๏ธ๋น์ฆ๋์ค ๊ฐ์
โ ์ฐ๋ฆฌ ๊ณ ๊ฐ๋ค์ ~ํ๋ ค๋ ๋์ฆ๊ฐ ์๋ค.
โ ์ด๋ฌํ ๋์ฆ๋ ~์ผ๋ก ํด๊ฒฐ๋ ์ ์๋ค.
โ ์ฐ๋ฆฌ์ ์ด๊ธฐ ๊ณ ๊ฐ์ ~์ด๋ค. (~์ผ ๊ฒ์ด๋ค.)
โ ๊ณ ๊ฐ๋ค์ด ์ฐ๋ฆฌ ์๋น์ค์์ ์ป์ด๋ด๋ ค๋ ๊ฐ์ฅ ํฐ ๊ฐ์น๋ ~์ด๋ค.
โ ๊ณ ๊ฐ๋ค์ ๋ถ๊ฐ์ ์ธ ์ด๋์ผ๋ก ~ ๋ํ ์ป์ ์ ์๋ค.
โ ์ฐ๋ฆฌ๋ ~๋ฅผ ํตํด ์ฃผ ๊ณ ๊ฐ์ธต์ ํ๋ณดํ ์ ์์ ๊ฒ์ด๋ค.
โ ์ฐ๋ฆฌ๋ ~์ผ๋ก ๋์ ๋ฒ ์ ์์ ๊ฒ์ด๋ค.
โ ์์ฅ์์ ์ฐ๋ฆฌ์ ์ฃผ ๊ฒฝ์์๋ ~์ด ๋ ๊ฒ์ด๋ค.
โ ์ฐ๋ฆฌ๋ ~์ผ๋ก ๊ทธ๋ค์ ์ด๊ธธ ๊ฒ์ด๋ค.
โ ์ฐ๋ฆฌ์ ๊ฐ์ฅ ํฐ ์ ํ ์ํ์ ~์ด๋ค.
โ ์ฐ๋ฆฌ๋ ~์ ํตํด ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ๊ฒ์ด๋ค.
โก๏ธ์ฌ์ฉ์ ๊ฐ์
โ ์ฌ์ฉ์๋ ๋๊ตฌ์ธ๊ฐ?
โ ๊ทธ๋ค์ด ์ผ์ด๋ ์ถ์ ์์ด์ ์ฐ๋ฆฌ ์ ํ์ด ์ ํฉํ ๊ณณ์ ์ด๋์ธ๊ฐ?
โ ์ฐ๋ฆฌ ์ ํ์ด ํ์ด์ผ ํ ๋ฌธ์ ๋ ๋ฌด์์ธ๊ฐ?
โ ์ธ์ ๊ทธ๋ฆฌ๊ณ ์ด๋ป๊ฒ ์ฐ๋ฆฌ ์ ํ์ด ํ์ฉ๋๋๊ฐ?
โ ์ด๋ค ๊ธฐ๋ฅ์ด ์ค์ํ๊ฐ?
โ ์ฐ๋ฆฌ ์ ํ์ ์ด๋ป๊ฒ ๋ณด์ด๊ณ ํ์ฉ๋์ด์ผ ํ๋๊ฐ?
โก๏ธํผ์๋ ๋ง๋๋ ๊ณผ์
โถ ๊ฐ์ค ์ค์ ์ดํ, ๋ฆฌ์์น๋ฅผ ํตํด ์ ์ฆํ๋ ๊ณผ์ ์ ๊ฑฐ์น๋ค.
โ โ ๊ฐ์ ๋จ๊ณ์์ โํ๋กํ ํผ์๋โ๋ฅผ ์ ์
โ ํ๋กํ ํผ์๋ : ๋๊ฐ ์ ์ฐ๋ฆฌ ์ ํ์ ์ฌ์ฉํ๋์ง, ํ ์ง์ ๋ํด ํ ์ ์๋ ์ต์ ์ ์ถ์
โ ์ค์ ์ฌ์ฉ์์ ํ๋, ์์ธก๋๋ ํ๋ / pain point & needs / ํด๊ฒฐ๋ฐฉ์ ์์ฑ
โ ์ด๊ฒ์ ๋ค๋ฌ์ด โํ๊ฒ ํผ์๋โ ์์ฑ
โ โ ๊ฐ๋ณ๊ฒ ํ๋กํ ํผ์๋๋ฅผ ์์ฑ
โ โ ์ฌ์ฉ์ ์กฐ์ฌ๋ฅผ ํตํด ๊ฐ์ ์ ์ ์ฆํ๋ฉด์ ํ๋กํ ํผ์๋๋ฅผ ์์
โ ํ๋กํ ํผ์๋๋ ์กฐ์ ๋ ์ฌ์ง๊ฐ ์๊ณ , ์๋๋ค ์ถ์ผ๋ฉด ๋ฒ๋ฆด ์๋ ์๋ค.
โ ๋ง๋ค์ด์ง ํผ์๋๋ ํ๋ คํ๊ฒ ๊พธ๋ฏธ๋ ๊ฒ์ ์๊ฐ์ ๋ค์ด์ง ๋ง๋ผ.
โ ํผ์๋๋ ํ ๋ฒ ์์ฑํด์ ์์ํ ์ฌ์ฉํ๋ ๊ฒ์ด ์๋๋ค. (๋ฆฌ์์น ์งํํ๋ฉด์ ์ง์์ ์ผ๋ก ์ ๋ฐ์ดํธ)
โก๏ธ์ฌ์ฉ์ฑ ํ ์คํธ (UT)
โ ์ฌ์ฉ์์๊ฒ ํน์ ๊ณผ์ ์ ์ํํ๋๋ก ๊ณผ์ ๋ฅผ ๋ถ์ฌํ ๋ค, ๊ทธ ์ผ์ ์งํํ๋ ๊ณผ์ (ํ๋)์ ๊ด์ฐฐํ๋ ๋ฒ
โ ์ฌ์ฉ์ฑ ํ๊ฐ (Usability Test) โ ์ ์ ํ ์คํธ (User Test)
- ์ฌ์ฉ์๊ฐ ๊ธฐ๋ฅ์ ํตํด ๋ค์ ๋จ๊ณ ์งํ์ ํ ์ ์๋๊ฐ?
- ๊ณ ๊ฐ์ด ์ฐ๋ฆฌ๊ฐ ์ ๊ณตํ๊ณ ์๋ ์๋น์ค ๊ตฌ์กฐ์ ๊ธฐ๋ฅ์ ์๋ํ ๋๋ก ์ธ์ง / ์ดํด / ์์ธก / ์คํ ํ ์ ์๋๊ฐ?
โ ์ ์ฑ์ ํ ์คํธ, ๋ฌด์ธ๊ฐ๋ฅผ ์ฆ๋ช ํ๋ ๊ฒ์ด ์๋๋ค. (๊ผญ ์ ์์ ์ด์ง ์์๋ ๋๋ค๋ ๋ป)
โ ํ๋ก๋ํธ ์ฌ์ฉ์ฑ ๋ฌธ์ ๋ ๋ง๋๋ ์ฌ๋์ ์ค์ค๋ก ๋ฐ๊ฒฌํ๊ธฐ ์ด๋ ต๊ธฐ ๋๋ฌธ์ ๊ด๋ จ ์๋ ์ฌ๋๋ค์ ๋์์ผ๋ก ํ ์คํธํ ํ์๊ฐ ์๋ค.
โก๏ธ์ฌ์ฉ์ฑ ํ ์คํธ (UT) ๋ฌธ์ ์ ์
โ ๊ฐ์ฅ ์ค์ํ ๋ถ๋ถ (๋ฌด์์ ๋ํด ํ ์คํธ ํ ์ง, ๋๊ตฌ์๊ฒ ์ด๋ป๊ฒ ์ง๋ฌธํ ์ง ๊ณ ๋ คํ๋ ๋จ๊ณ)
โ ์ ๋ ํ์ง ๋ง์์ผ ํ ์ค์ : ๊น์ ๋ถ์ ์์ด ์ผ๋ฐ์ ์ธ ์ง๋ฌธ, ๋ค๋ค ์๊ณ ์๋ ๋ด์ฉ์ ์ ๋ฆฌํ๋ ๊ฒ
โ ํด๊ฒฐํด์ผ ํ ๋ฌธ์ ์ ๊ตฌ์กฐ๋ฅผ ๋ถํดํ๊ณ , ์ง์ ์ฐ๊ด๋ ์ฌ๋๋ค์ ๋ง๋์ ์ธํฐ๋ทฐ๋ฅผ ํ์. ๋ฌธ์ ๋ฅผ ๋ถ์ํ๊ธฐ์ ์์ ๊ณ ๊ฐ์ ์ํฉ ์๋ฎฌ๋ ์ด์ ๋ ํ์.
โก๏ธ์ฌ์ฉ์ฑ ํ ์คํธ (UT) ๋ฐ์คํฌ ๋ฆฌ์์น
โ ์๋น์ค์ ๊ด๋ จ๋ ์ธ๋ถ ์ํฉ๋ถํฐ ๋ด๋ถ ์ํฉ๊น์ง ๋ค๋ฐฉ๋ฉด์ผ๋ก ์ํฉ์ ํ์ ํ๊ธฐ ์ํ ๋ฐฉ๋ฒ๋ก . ๊ฐ์ ํ๊ณ ์ ํ๋ ์๋น์ค์ ๋ํด ๋ถ์ ๋ฐ ํ๊ฐ๋ฅผ ์ํํ๊ธฐ ์ํ ๋ค๋ฅธ ์ฌ๋์ ๋ฆฌ์์น๋ฅผ ์ฐพ๊ณ ๊ฒํ , ๋ฆฌํฌํธ ์๋ฃ ์ฐพ๊ธฐ.
โ ์๋น์ค๋ฅผ ์ด์ฉํ๋ ์ฌ์ฉ์๋ ๋๊ตฌ์ธ์ง, ๊ทธ ์ฌ์ฉ์๊ฐ ์๋น์ค๋ฅผ ์ฌ์ฉํ๋ ํ๊ฒฝ๊ณผ ๋งฅ๋ฝ์ ๋ฌด์์ธ์ง, ๋ชฉํ๋ก ํ๋ ๊ฒ์ ๋ฌด์์ธ์ง ํ์ ํ ๊ฒ. ์ด ์ธ ๊ฐ์ง ๊ด์ ์ด ๊ฒน์น๋ ์ง์ ์ด ์ต์์ ๋ฆฌ์์น.
โ ์ดํด๊ด๊ณ์ ์ธํฐ๋ทฐ๋ฅผ ์งํํ ๋, issue ๋ชฉ๋ก ์์ฑ์ ์์ฒญํ๊ณ , ํจ๊ป ๊ณต์ ๋์ด์ผ ํ๋ค. ๋ฏธ๋ฆฌ ์ฃผ์ ๋ฅผ ์ ๋ฌํด์ฃผ๊ณ , ์ถ๋ ค์ง ์ด์ ์ค์์ ๊ฐ์ฅ ์ค์ํ ๊ฒ์ ํจ๊ป ๋ ผ์. โํนํ ์ปค๋ฎค๋์ผ์ด์ ๋ฐฉ์ ์ฃผ์โ
โก๏ธ์ฌ์ฉ์ฑ ํ ์คํธ (UT) ํ์คํฌ ์์ฑ
โ ๊ฐ ํ๋ฉด ์ธ๋ถ์์ญ ๋ณ๋ก ์ฌ์ฉ์๊ฐ ํ ์ ์์ด์ผ ํ๋ task๋ฅผ ์์ฑํ๊ธฐ.
โ ํ๋ฉด > ์ธ๋ถ์์ญ > ์ฌ์ฉ์๊ฐ ~์ ํ ์ ์์ด์ผ ํ๋ค.
โก๏ธResearcher์ ํฌํธํด๋ฆฌ์ค
โ ์๊ฐ์ ์ธ ์ธํฐํ์ด์ค ๋ณด๋ค๋ ์ปค๋ฎค๋์ผ์ด์ ์คํฌ์ ์ดํํด์ผ ํ๋ค.
โ ๋์์ด๋๊ฐ ์๋๋ผ ๊ฒฝํ์ ๋์์ธ์ ํ๋ ์ฌ๋์ด๊ธฐ ๋๋ฌธ์ ๊ทธ์ ์ค์ ์ ๋ง์ถ ๊ฒ.
โ ๋์ถ๋ ๋์์ธ์ ๋ฆฌ์์น ๊ฒฐ๊ณผ๊ฐ ์ด๋ป๊ฒ ์ ์ฉ๋์๋์ง ๋ณด์ฌ์ ธ์ผ ํ๋ค.
๐ป ํ๋ฆฌ์ค์ฟจ UI ๊ธฐ์ด Chapter 1~2 ์ ๋ฆฌ
๐๏ธFoundation
โถ Font
โ Headline, Body, Flag ๋ก ํฐํธ ์์ฑ ๊ตฌ๋ถ.
โ ์ฃผ๋ก ์ฌ์ฉํ๋ ํฐํธ๊ฐ ์์ผ๋ ๋ํดํธ๋ก ์ฌ์ฉ ํ์.
โ Color
โ ์์ ํ hex 000000์ ์ฌ์ฉํ๋ ๊ฒ๋ณด๋ค 111111 ์ฌ์ฉ์ ๊ถ์ฅ.
โ ๋๋ฌด ๋ค์ํ ์ปฌ๋ฌ ๋ณด๋ค๋ ๋ช ๋ ์ฐจ์ด๋ฅผ ์ฃผ๊ณ , ํฌ์ธํธ ์ปฌ๋ฌ๋ก ์ฌ์ฉํ๋ ๊ฒ์ ๊ถ์ฅ
โ ์ปฌ๋ฌ์นฉ์ ๋ง๋ค์ด ์ฉ๋์ ๋ฐ๋ฅธ ์ปฌ๋ฌ ๊ด๋ฆฌ
โ Grid
โ ํ๋ฉด์์ ๋ณด์ด๋ ๊ธ์ ๋จ ์๋ฅผ ์ด๋ป๊ฒ ์ง์ ํ๋์ ๋ฐ๋ผ ์ค์ ์ด ๋ฌ๋ผ์ง๋ค.
โ ํ์ธํด์ผ ํ๋ ๊ฒ์ column, margin, gap.
โ Icon
โ ๊ธฐ๋ณธ ์์ญ 24px*24px. ์ฃผ๋ณ ํฌ๊ธฐ์ ๋ฐ๋ผ 20px*20px๋ ๊ฐ๋ฅ.
๐๏ธElement
โถ Button
โ ์ฃผ ๋ฒํผ, ๊ธฐ๋ฅ ๋ฒํผ์ผ๋ก ๋ถ๋ฅ๋๋ฉฐ, ์ํ๋ N(normal), O(pressed), D(disabled) ๋ก ๋๋๋ค.
โ normal ์ํ์์ pressed ์ํ๋ก ๋ณํํ ๋, ์ธํฐ๋์ ์ ์ค ์ ์๋ค.
โ Selection Control
โ Check Box : ์ฌ์ฉ์๊ฐ ์ ํํ ์ ์๋ ์ต์ ์ด ํ๋ ์ด์์ผ ๋ ์ฌ์ฉ. ๋ณต์ ์ ํ์ด ๊ฐ๋ฅํ๋ค.
โ Radio Button : ๋ฏธ๋ฆฌ ์ ์๋ ์ต์ ์ด ํ๋ ์์ ๋ ์ฌ์ฉ. ๋ค๋ฅธ radio button ์ ํ ์, ๊ธฐ์กด์ ์ ํ๋์ด ์์๋ ๋ฒํผ์ด ์ ํ ํด์ .
โ Switches Control : ํน์ ์ต์ ์ ์ผ๊ณ ๋ ์ ์๋ ์ปจํธ๋กค.
โ ์ด์ธ์๋ Slider, Toggle Switch, Drop down ๋ฑ ๋ค์ํ ํํ์ ์ ํ UI๊ฐ ์กด์ฌํฉ๋๋ค.
โ Badge
โ ์๋ก์ด ์ ๋ฐ์ดํธ์ ์๋ฆผ์ ๋ํ ์ ๋ณด๋ฅผ ์ ๊ณตํ ๋ ์ฌ์ฉ๋๋ ์ปดํฌ๋ํธ.
โ ํ์ ๋ฐฉ์์ ๋ฐ๋ผ New badge, Dot badge, Flag, Number Badge ๋ก ๋๋ฉ๋๋ค.
โ Dialog
โ ์ฌ์ฉ์์ ์ง์ ์ฌํญ์ด๋ ๊ฒฐ์ ์ ํ์ธํ๊ธฐ ์ํด ๋ํ ํํ๋ก ๋์์ง๋ ์ฐฝ.
โ tooltip, snackbar ์ฒ๋ผ ์ฉ๋๋ก ๋๋์ด์ง๊ฑฐ๋, toast ์ฒ๋ผ ํํ๋ก ๋๋์ด์ง๋ค.
โ Tab
โ ํ์ด์ง ๋ด ์ ์ฌํ ์ ๋ณด๋ฅผ ๊ทธ๋ฃนํํ์ฌ ์ฝํ ์ธ ๋ฅผ ์ ๋ฆฌํ ๋ ์ฌ์ฉ.
โ ํญ์ด ํํํ๋ ์ ๋ณด์ ๋ณผ๋ฅจ์ ๋ฐ๋ผ depth๋ผ๋ ์๊ณ๊ฐ ์๊ธฐ๋ฉฐ, ํด๋น ์๊ณ๋ฅผ ํญ์์๋ ์๊ฐ์ ์ผ๋ก ํํ ๊ฐ๋ฅ.
โ Image Box
โ ๋ฐฐ๋๋ ํ๋ก๋ชจ์ ๋ฑ์ ์ด๋ฏธ์ง ์์ญ๊ณผ ํ ์คํธ ์์ญ์ ๊ตฌ๋ถํ์ฌ ์ฌ์ฉ.
โ ์ฌ์ด์ฆ ๋ฐ ์์น๋ฅผ ์ง์ ํ์ฌ ํต์ผ๊ฐ์ ๋ถ์ฌํ๋ค.
'๐ฏ๐๐ง๐ค ๐๐๐จ๐ > ๐๐๐๐๐๐๐' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ