UI๐ฑ
UI(User Interface, ์ฌ์ฉ์ ์ธํฐํ์ด์ค)
๋ ์ฌ์ฉ์๋ค์ด ์ปดํจํฐ์ ์ํธ์์ฉํ๋ ์์คํ ์ ๋งํ๋ค. ํ๋ฉด ์์ ๊ทธ๋ํฝ ์์๋ค์ ๋ฌผ๋ก ์ฌ์ฉ์๋ค์ด ํค๋ณด๋๋ ๋ง์ฐ์ค์ ๊ฐ์ ๋ฌผ๋ฆฌ์ ์์๋ฅผ ํตํด์๋ ์ปดํจํฐ์ ์ํตํ ์ ์๊ธฐ์ ์ด ์ญ์ UI๋ผ๊ณ ๋ณผ ์ ์๋ค. ํ์ง๋ง ํ๋กํธ์๋ ๊ฐ๋ฐ์๋ก์ ๊ฐ๋ฆฌํค๋ UI๋ ๋๋ถ๋ถ GUI๋ฅผ ์๋ฏธํ๋๋ฐGUI(Graphical User Interface)
๋ ์ฌ์ฉ์๊ฐ ๊ทธ๋ํฝ์ ํตํด ์ปดํจํฐ์ ์ ๋ณด๋ฅผ ๊ตํํ๋ ์์ ํ๊ฒฝ์ ์๋ฏธํ๋ค.
UX๐ค
UX(User Experience, ์ฌ์ฉ์ ๊ฒฝํ)
๋ ์ฌ์ฉ์๊ฐ ์ด๋ค ์์คํ , ์ ํ, ์๋น์ค๋ฅผ ์งโข๊ฐ์ ์ ์ผ๋ก ์ด์ฉํ๋ฉด์ ๋๋ผ๊ณ ์๊ฐํ๋ ์ด์ฒด์ ๊ฒฝํ์ ๋งํ๋ค. ์ ํ ์์ฒด ๋ฟ๋ง ์๋๋ผ ์ ํ๊ณผ ๊ด๋ จ๋ ๋ชจ๋ ์์๊ฐ UX์ ์ํฅ์ ์ฃผ๊ธฐ ๋๋ฌธ์ ์ด์ฒด์ ๊ฒฝํ์ด๋ผ๊ณ ๋ณผ ์ ์์ผ๋ฉฐ UX์ ์ํฅ์ ์ฃผ๋ ๋ง์ ์์๋ค ์ค ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์๊ฒ ๊ฐ์ฅ ์ค์ํ ์์๋ฅผ ํ ๊ฐ์ง๋ง ๊ผฝ์๋ฉด UI๋ผ๊ณ ๋ณผ ์ ์๋ค.
UI ๋์์ธ ํจํด๐ก
UI ๋์์ธ ํจํด์ด๋ ํ๋ก๊ทธ๋๋ฐ ์ ์์ฃผ ๋ฐ๋ณต๋์ด ๋ํ๋๋ ๋ฌธ์ ์ ์ ํด๊ฒฐํ๊ณ ์ ๊ณผ๊ฑฐ์ ๋ค๋ฅธ ์ฌ๋์ด ํด๊ฒฐํ ๊ฒฐ๊ณผ๋ฌผ์ ์ฌ์ฌ์ฉํ๊ธฐ ์ข์ ํํ๋ก ๋ง๋ ํจํด
๋ชจ๋ฌ(Modal)
: ๊ธฐ์กด์ ์ด์ฉํ๋ ํ๋ฉด ์์ ์ค๋ฒ๋ ์ด ๋๋ ์ฐฝ์ผ๋ก ๋ธ๋ผ์ฐ์ ์ค์ ์ ์ํฅ์ ๋ฐ์ง ์๋๋ค๋ ์ ์์ ํ์
์ฐฝ๊ณผ ๊ตฌ๋ถ๋จํ ๊ธ(Toggle)
: On/Off๋ฅผ ์ค์ ํ ๋ ์ฌ์ฉํ๋ ์ค์์น ๋ฒํผ์ผ๋ก ์๊ฐ์ ํจ๊ณผ๋ฅผ ํตํด ํ ๊ธ์ ์ํ๋ฅผ ์ง๊ด์ ์ผ๋ก ์ ์ ์๋๋ก ํด์ผ ํจํญ(Tab)
: ์ฝํ
์ธ ๋ฅผ ๋ถ๋ฆฌํด์ ๋ณด์ฌ์ฃผ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ ํจํด์ผ๋ก ์น์
์ ๊ตฌ๋ถ์ด ๋ช
ํํ๋ฉฐ ์น์
๋ช
์ด ๊ฐ๊ฒฐํด์ผ ํจํ๊ทธ(Tag)
: ์ฝํ
์ธ ๋ฅผ ์ค๋ช
ํ๋ ํค์๋๋ฅผ ์ฌ์ฉํ์ฌ ๋ผ๋ฒจ์ ๋ถ์ด๋ ์ญํ ๋ก ์ฌ์ฉ์์ ํ๊ทธ ์ถ๊ฐ์ ์ ๊ฑฐ์ ์์จ์ฑ์ ๋ณด์ฅํด์ผ ํจ์๋์์ฑ(Autocomplete)
: ์ฌ์ฉ์๊ฐ ๋ด์ฉ ์
๋ ฅ ์ ์
๋ ฅํ๊ณ ์ํ๋ ๋ด์ฉ๊ณผ ์ผ์นํ ๊ฐ๋ฅ์ฑ์ด ๋์ ํญ๋ชฉ์ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ผ๋ก ์๋ ์์ฑ ํญ๋ชฉ์ ๊ฐ์๋ ์ ์ ํ๊ฒ ์ ํํ๋ ๊ฒ์ด ๋ฐ๋์งํจ๋๋กญ๋ค์ด(Dropdown)
: ์ ํ ๊ฐ๋ฅํ ํญ๋ชฉ๋ค์ ์จ๊ฒจ๋์๋ค๊ฐ ํผ์ณ์ง๋ฉด์ ์ ํํ ์ ์๊ฒ ํด์ฃผ๋ ๋์์ธ ํจํด์ผ๋ก ์ฌ์ฉ์๊ฐ ์์ ์ด ์ ํํ ํญ๋ชฉ์ ์ ํํ ์ ์ ์๊ฒ ๋ง๋๋ ๊ฒ์ด ์ค์์์ฝ๋์ธ(Accordion)
: ์ ์๋ค ํ๋ค ํ ์ ์๋ ์ปดํฌ๋ํธ๋ก ํ๋ฉด ์์ ์ํ๊ด๊ณ๋ฅผ ๊น๋ํ๊ฒ ๊ตฌ์ฑํ๊ธฐ ์ํด ์ฌ์ฉ๋จ์บ๋ฌ์
(Carousel)
: ์ปจ๋ฒ ์ด์ด ๋ฒจํธ๋ ํ์ ๋ชฉ๋ง์ฒ๋ผ ๋น๊ธ๋น๊ธ ๋์๊ฐ๋ฉฐ ์ฝํ
์ธ ๋ฅผ ํ์ํด์ฃผ๋ ๋์์ธ ํจํดํ์ด์ง๋ค์ด์
(Pagination)
: ๋ฒํธ๋ฅผ ๋ถ์ฌ ํ์ด์ง๋ฅผ ๊ตฌ๋ถํด์ฃผ๋ ๋ฐฉ๋ฒ์ผ๋ก ๋งค๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ๊ณผ๋ ๋ค์ ๊ฑฐ๋ฆฌ๊ฐ ๋ฉ๋ค๊ณ ๋ณผ ์ ์์ ๋ฌดํ์คํฌ๋กค(Infinite Scroll, Continuous Scroll)
: ๋ชจ๋ ์ฝํ
์ธ ๋ฅผ ๋ถ๋ฌ์ฌ ๋๊น์ง ๋ฌดํ์ผ๋ก ์คํฌ๋กค์ ๋ด๋ฆด ์ ์๋ ๋์์ธ ํจํด์ผ๋ก ์ฒ์์ ๋ชจ๋ ์ฝํ
์ธ ๋ฅผ ๋ถ๋ฌ์ ์กฐ๊ธ์ฉ ๋ณด์ฌ์ฃผ๋ ๋ฐฉ์์ผ๋ก ๋ฌดํ์คํฌ๋กค์ ๊ตฌํํ๋ ๊ฒ์ ๋ฌดํ์คํฌ๋กค์ด๋ผ๊ณ ๋ณด๊ธฐ ์ด๋ ค์GNB(Global Navigation Bar)
, LNB(Local Navigation Bar)
: GNB๋ ์ด๋ ํ์ด์ง์ ๋ค์ด๊ฐ๋ ์ฌ์ฉํ ์ ์๋ ์ต์์ ๋ฉ๋ด๋ฅผ ๋งํ๋ฉฐ LNB๋ GNB์ ์ข
์๋๋ ์๋ธ๋ฉ๋ด ํน์ ํน์ ํ์ด์ง์์๋ง ๋ณผ ์ ์๋ ๋ฉ๋ด๋ฅผ ๋งํจ๊ทธ๋ฆฌ๋ ์์คํ (Grid System)๐
๊ทธ๋ฆฌ๋ ์์คํ ์ด๋ ํ๋ฉด์ ๊ฒฉ์๋ก ๋๋ ๋ค์ ๊ทธ ๊ฒฉ์์ ๋ง์ถฐ ์ฝํ ์ธ ๋ฅผ ๋ฐฐ์นํ๋ ๋ฐฉ๋ฒ์ผ๋ก ์น ๋์์ธ ๋ถ์ผ์์๋ ์ปฌ๋ผ ๊ทธ๋ฆฌ๋ ์์คํ (Column Grid System)์ ์ฌ์ฉํ์ฌ ํ๋ฉด์ ์ธ๋ก๋ก ๋ช ๊ฐ์ ์์ญ์ผ๋ก ๋๋ ๊ฒ์ธ๊ฐ์ ์ด์ ์ ๋๋ค.
User Flow๐ง
User Flow(์ฌ์ฉ์ ํ๋ฆ)๋ ์ฌ์ฉ์๊ฐ ์ ํ์ ์ง์ ํ ์์ ์ ์์์ผ๋ก ์ทจํ ์ ์๋ ๋ชจ๋ ํ๋์ ๋ปํ๋ฉฐ ๋ณดํต ๋ค์ด์ด๊ทธ๋จ์ ๊ทธ๋ ค ์ ๋ฆฌํ๋ค.
- ์์คํ ์ํ์ ๊ฐ์์ฑ(Visibility of system status)
์ฌ์ฉ์์๊ฒ ์งํ ์ํฉ์ ๋ํ ์ ๋ณด๋ฅผ ์ ๊ณตํ ๊ฒ- ์์คํ ๊ณผ ํ์ค ์ธ๊ณ์ ์ผ์น(Match between system and the real world)
์ฌ์ฉ์์๊ฒ ์น์ํ ๋จ์ด, ๊ตฌ๋ฌธ ๋ฐ ๊ฐ๋ ์ ์ฌ์ฉํ ๊ฒ- ์ฌ์ฉ์ ์ ์ด ๋ฐ ์์ (User control and freedom)
์ค์ํ ์ฌ์ฉ์์๊ฒ ํ์ถ๊ตฌ๋ฅผ ๋ช ํํ๊ฒ ์ ๊ณตํ ๊ฒ- ์ผ๊ด์ฑ ๋ฐ ํ์ค(Consistency and standards)
- ์ธ๋ถ ์ผ๊ด์ฑ: ์ฌ์ฉ์ ๊ฒฝํ์ ์ผ๊ด์ฑ์ ์ํด ํ๋ซํผ ๋ฐ ์ ๊ณ์ ๊ด์ต์ ๋ฐ๋ฅผ ๊ฒ
ex) UI ๋์์ธ ํจํด ์ฌ์ฉ- ๋ด๋ถ ์ผ๊ด์ฑ: ์ ํ์ ์ธํฐํ์ด์ค๋ ์ ๋ณด ์ ๊ณต์ ์ผ๊ด์ฑ์ ๊ฐ์ง ๊ฒ
- ์ค๋ฅ ๋ฐฉ์ง(Error prevention)
์ค๋ฅ๊ฐ ๋ฐ์ํ๊ธฐ ์ฌ์ด ์ํฉ์ ์ ๊ฑฐํ์ฌ ์ฌ์ฉ์์ ์ค์๋ฅผ ๋ฐฉ์งํ ๊ฒ- ๊ธฐ์ต๋ณด๋ค๋ ์ง๊ด(Recognition rather than recall)
์ฌ์ฉ์๊ฐ ๊ธฐ์ตํด์ผ ํ๋ ์ ๋ณด๋ฅผ ์ค์ผ ๊ฒ- ์ฌ์ฉ์ ์ ์ฐ์ฑ๊ณผ ํจ์จ์ฑ(Flexibility and efficiency of use)
์ด๋ณด์์ ์ ๋ฌธ๊ฐ ๋ชจ๋์๊ฒ ๊ฐ๋ณ ๋ง์ถค ๊ธฐ๋ฅ์ ์ ๊ณตํ ๊ฒ- ๋ฏธํ์ ์ด๊ณ ๋ฏธ๋๋ฉํ ๋์์ธ(Aesthetic and minimalist)
์ธํฐํ์ด์ค์ ๊ด๋ จ์ด ์๊ฑฐ๋ ๋ถํ์ํ ์ ๋ณด๊ฐ ํฌํจ๋์ง ์๋๋ก ํ ๊ฒ(์ ๋ณด๋ฅผ ์ฐ์ ์์์ ๋ฐ๋ผ ์ ๊ณต)- ์ค๋ฅ์ ์ธ์, ์ง๋จ, ๋ณต๊ตฌ๋ฅผ ์ง์(Help users recognize, diagnose, and recover from errors)
์ฌ์ฉ์๊ฐ ์ดํดํ ์ ์๋ ์ธ์ด๋ฅผ ์ฌ์ฉํ์ฌ ๋ฌธ์ ๊ฐ ๋ฌด์์ธ์ง ์ ํํ๊ฒ ํ์ํ๊ณ ํด๊ฒฐ๋ฐฉ๋ฒ์ ์ ์ํ ๊ฒ- ๋์๋ง ๋ฐ ์ค๋ช ๋ฌธ์(Help and document)
์ํฉ์ ๋ฐ๋ผ ์ดํดํ๋๋ฐ ๋์์ด ๋๋ ๋ฌธ์๋ฅผ ์ ๊ณตํ ๊ฒ
์์ด์ดํ๋ ์ | ํ๋กํ ํ์ | |
---|---|---|
์์ฑ ์๊ธฐ | ๊ธฐํ ๋จ๊ณ | ๊ฐ๋ฐ ์ ๋จ๊ณ |
์์ฑ ๋ชฉ์ | ํ๋ฉด ๊ตฌ์กฐ ์ค๊ณ | UI ์ํธ์์ฉ ์๋ฎฌ๋ ์ด์ |
ํน์ง | ์ ์ | ๋์ |
ํผ๋ธ๋ฆฌํผ | Low~Middle | Middle~High |
<์ค๋์ ์ผ๊ธฐ>
๋ฌด์์ธ๊ฐ๋ฅผ ๋ง๋ค์ด๋ณด๋ ๊ฒ์ ์ข์ํ๋ ์ฑํฅ์ด๋ผ ๊ต์ฅํ ๊ธฐ๋ํ๋ ์ ๋์ด์๋๋ฐ ํผ๊ทธ๋ง๋ฅผ ์ฒ์ ์ ํด ๊ต์ฅํ ๋นํฉํ๋ค..ใ ๋ถํธ์บ ํ์์ ์ ๊ณต๋๋ ๊ฐ์๋ฅผ ํ๋ํ๋ ๋ฐ๋ผํด๋ณด๋ ๊ณผ์ ์ด ์๊ฐ๋ณด๋ค ์๊ฐ๋ ๊ต์ฅํ ์ค๋๊ฑธ๋ ธ๊ณ ํด๋ ์ฌ์ฉํ๊ธฐ์ ๊ต์ฅํ ๋ฏ์ค์ด์ ์ฝ๊ฐ ์์ํ์ง๋ง ๋์์ ๋ฌด์์ธ๊ฐ๋ฅผ ์ค์ ๋์ํ๋ ๊ฒ์ฒ๋ผ ํ๋กํ ํ์ ์ ๊ตฌํํด๋ณด๋ ๊ฒ์ ๊ต์ฅํ ์๋กญ๊ณ ํฅ๋ฏธ๋ก์ด ์ผ์ด์๋ค.
์ด๋ฒ ํ์ด ๊ณผ์ ๋ฅผ ์งํํ๋ฉด์ ํ์ด๋ถ์ด ์นด์นด์คํก์ ํด๋ณด์๊ณ ์ ์ํด์ฃผ์ ์ ์นด์นด์คํก ํ๋กํ ํ์ ์ ๋ง๋ค์ด๋ดค๋๋ฐ ์นด์นด์คํก์ ์๋ ๊ธฐ๋ฅ์ด ๋ง์ ์์ฑ๊น์ง ํ ์๊ฐ์ ๋ถ์กฑํด ํ ์ ์๋๋ฐ๊น์ง๋ง ์์ฑํ์ง๋ง ๊ทธ๋งํผ ๋ฐฐ์ธ ์ ์ด ๋ง์๋ ์๊ฐ์ด์๋ค.
์ด๋ฒ ํ์ด๋ถ์ ์ํตํ๋๋ฐ ์์ด์ ์์ ์ ์๊ฒฌ๋ ์ ์ ์ํด์ฃผ์๊ณ ์๋๋ฐฉ์ ์๊ฒฌ๋ ์ ๋ค์ด์ค ์ ์๋ ๊ท ํ๊ฐ์ ๊ฐ์ง์ ๋ถ์ด์ด์ ํ๋ํ๋๋ฐ ๋ถ๋ด๊ฐ์ด๋ ์ด์ํจ์์ด ๋งค๋๋ฝ๊ฒ ์งํํ ์ ์์๋ ๊ฒ ๊ฐ์ ๊ทธ๋ฐ ์ ์ ๋ฐฐ์์ผ๊ฒ ๋ค๊ณ ์๊ฐํ๋ค.
์ด์ section3 ์ด๋ฐ์ด์ง๋ง ๋๊น์ง ํฌ๊ธฐํ์ง ์๊ณ ์ด์ฌํ ๊ฑธ์ด๊ฐ์ผ๊ฒ ๋ค!