2022.06.27(Mon)
[TIL] Day44
[SEB FE] Day43
์ฌ๋๋ค์ด ์ปดํจํฐ์ ์ํธ ์์ฉํ๋ ์์คํ
โย ๋ฌผ๋ฆฌ์ ์์(ํค๋ณด๋, ๋ง์ฐ์ค โฆ)๋ UI
โย GUI (Graphical User Interface, ๊ทธ๋ํฝ ์ฌ์ฉ์ ์ธํฐํ์ด์ค)
์ฌ์ฉ์๊ฐ ๊ทธ๋ํฝ์ ํตํด ์ปดํจํฐ์ ์ ๋ณด๋ฅผ ๊ตํํ๋ ์์ ํ๊ฒฝ
์ฌ์ฉ์๊ฐ ์ด๋ค ์์คํ /์ ํ/์๋น์ค๋ฅผ ์ง/๊ฐ์ ์ ์ผ๋ก ์ด์ฉํ๋ฉด์ ๋๋ผ๊ณ ์๊ฐํ๋ ์ด์ฒด์ ๊ฒฝํ
UI โ UX (์๋ก๋ฅผ ๋ณด์ํ๋ ์ญํ )
๐ โโ๏ธย But, good UX ๐ ๐ good UI ๐ย ์๋ฏธ โ (๋น ์ข์ ๊ฐ์ด๊ตฌ์ผ ์๋ ์๋ค๋ ๋ป!)
ํ๋ก๊ทธ๋๋ฐ ์ ์์ฃผ ๋ฐ๋ณต๋๋ ๋ฌธ์ ์ ํด๊ฒฐ์ ์ํด, ๊ณผ๊ฑฐ ๋ค๋ฅธ ์ฌ๋์ด ํด๊ฒฐํ ๊ฒฐ๊ณผ๋ฌผ์ ์ฌ์ฌ์ฉํ๊ธฐ ์ข์ ํํ๋ก ๋ง๋ ํจํด
๐ย ์์ฃผ ์ฌ์ฉ๋๋ UI Component
Modal
: ๊ธฐ์กด์ ์ด์ฉํ๋ ํ๋ฉด ์์ ์ค๋ฒ๋ ์ด ๋๋ ์ฐฝ / ๋ชจ๋ฌ ๋ซ๊ธฐ ์ ๊น์ง ๊ธฐ์กด ํ๋ฉด๊ณผ ์ํธ์์ฉ โ
โย ย ํ์ ์ฐฝ(๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ํ์ด์ง๋ฅผ ์ถ)๊ณผ ๋ค๋ฅธ ๊ฐ๋
โ๏ธย ๋ชจ๋ฌ์ ๋ธ๋ผ์ฐ์ ์ค์ ์ํฅ โย โ ๋ฐ๋์ ๋ณด์ฌ์ค์ผ ํ๋ ๋ด์ฉ์ ๋ชจ๋ฌ ์ฌ์ฉ ๊ถ์ฅ
Toggle
: On/Off ์ค์ ์ ์ฌ์ฉํ๋ ์ค์์น ๋ฒํผ (3๊ฐ ์ด์์ ์ฌ๋ฌ ์ต์
์ด ์์ ๋๋ ์ฌ์ฉ ๊ฐ๋ฅ)
โย But, ๋๋ฌด ๋ง์ ์ต์
์ด ์กด์ฌํ ๋ Tab
์ฌ์ฉ ๊ถ์ฅ
Tab
: ์ฝํ
์ธ ๋ฅผ ๋ถ๋ฆฌํด์ ๋ณด์ฌ์ฃผ๋ ์ถ์ ๋ ์ฌ์ฉ (๊ฐ๋ก ํ ์ค ๋ฐฐ์ด ํํ๋ฅผ ์ฃผ๋ก ์ฌ์ฉ)
โย ์ธ๋ก ๋ฐฐ์ด / ์ฌ๋ฌ ์ค๋ก ๋ฐฐ์ด๋ ๊ฐ๋ฅ
Tag
: ์ฝํ
์ธ ๋ฅผ ์ค๋ช
ํ๋ ํค์๋๋ฅผ ์ฌ์ฉํด์ ๋ผ๋ฒจ ๋ถ์ด๋ ์ญํ
โย Tag๋ก ์ฝํ ์ธ ๋ถ๋ฅ / ์ํ๋ ์ฝํ ์ธ ๋ค๋ง ๊ฒ์ ๊ฐ๋ฅ
Autocomplete(์๋์์ฑ)
: ์ฌ์ฉ์๊ฐ ๋ด์ฉ ์
๋ ฅ ์ค์ผ ๋ ์
๋ ฅํ๊ณ ์ ํ๋ ๋ด์ฉ๊ณผ ์ผ์นํ ๊ฐ๋ฅ์ฑ์ด ๋์ ํญ๋ชฉ์ ๋ณด์ฌ์ฃผ๋ ๊ฒ
๐ย ์ฌ์ฉ์์ ์ ๋ณด ์
๋ ฅ ์๊ฐ ๋จ์ถํด์ฃผ๋ฉฐ, ์ ๋ณด ๊ฒ์์ ๋ง์ด ์ฌ์ฉ
โย ์๋ ์์ฑ ํญ๋ชฉ์ so many ํญ๋ชฉ ๋์ค์ง ์๋๋ก ๊ฐ์ ์ ํํ๋ ๊ฒ์ด ์ข์ ๐
Dropdown
: ์ ํํ ์ ์๋ ํญ๋ชฉ์ ์จ๊ฒจ๋จ๋ค๊ฐ, ํผ์ณ์ง๋ฉด์ ์ ํํ ์ ์๋๋ก ํด์ค
๐ย ์ฌ์ฉ์๊ฐ ์์ ์ด ์ ํํ ํญ๋ชฉ์ ์ ํํ ์ ์ ์๊ฒ ๋ง๋๋ ๊ฒ์ด ์ค์!
Accordion(์์ฝ๋์ธ)
: ์ ์๋ค ํ๋ค ํ ์ ์๋ ์ปดํฌ๋ํธ / ๋ณดํต ๊ฐ์ ๋ถ๋ฅ ์์ฝ๋์ธ ์ฌ๋ฌ๊ฐ ์ฐ์ ๋ฐฐ์น
โฐย ๋ณดํต ๊น๋ํ ํ๋ฉด ๊ตฌ์ฑ์ ์ํด ์ฌ์ฉ
โฐย ํธ๋ฆฌ ๊ตฌ์กฐ / ๋ฉ๋ด๋ฐ๋ก ์ฌ์ฉํ ๊ฒฝ์ฐ์ ์ํ ๊ด๊ณ ํํ์ ์ํด ์ฌ์ฉ
โฐย ์ฝํ
์ธ ๋ด๋ ์ฉ๋๋ก ์ฌ์ฉํ ๊ฒฝ์ฐ์ ํต์ฌ ๋ด์ฉ์ ๋จผ์ ์ ๋ฌํ๊ธฐ ์ํด ์ฌ์ฉ
Carousel(์บ๋ฌ์
)
: like ํ์ ๋ชฉ๋ง ๐ ย ๐ย ๋น๊ธ๋น๊ธ ๋์๊ฐ๋ฉด์ ์ฝํ
์ธ ํ์
โฐย ์๋์ผ๋ก ์ฝํ ์ธ ๊ฐ ๋์๊ฐ๊ฑฐ๋, ์ฌ์ฉ์๊ฐ ์์ผ๋ก ๋๊ฒจ์ผ๋ง ๋์ด๊ฐ๋๋ก ์ ํ ๊ฐ๋ฅ
Pagination
: ํ ํ์ด์ง์ ๋์ธ ๊ฒฝ์ฐ๊ฐ ๋๋ฌด ๋ง์ ๊ฒฝ์ฐ, ๋ฒํธ๋ฅผ ๋ถ์ฌ ํ์ด์ง ๊ตฌ๋ถํด์ฃผ๋ ๊ฒ
๐ย ์ฌ์ฉ์๊ฐ ์ํ๋ ํ์ด์ง๋ก ๋ฐ๋ก๋ฐ๋ก ์ ๊ทผ ๊ฐ๋ฅ
๐ย ํ์ด์ง๋ฅผ ๋๊ธฐ๊ธฐ ์ํด์ ์ ์ ๋ฉ์ถฐ์ผ ํ๋ฏ๋ก ๋งค๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ๊ณผ๋ ๊ฑฐ๋ฆฌ๊ฐ ๋ฉ ์๋..
Infinite Scroll, Continuous Scroll(๋ฌดํ ์คํฌ๋กค)
: ๋ชจ๋ ์ฝํ
์ธ ๋ฅผ ๋ถ๋ฌ์ฌ ๋๊น์ง ๋ฌดํ์ผ๋ก ์คํฌ๋กค ๋ด๋ฆผ ๊ฐ๋ฅ
โฐย ํ ๋ฒ์ ๋์ฐ๊ธฐ์ ์ ๋ณด๊ฐ ๋๋ฌด ๋ง์ ๋ ์ฌ์ฉ
โฐย ๋ณดํต ํ์ด์ง ๋งจ ์๋์ ๋๋ฌํ๋ฉด ์ถ๊ฐ ์ฝํ
์ธ ๋ก๋ํด์ค๋ ๋ฐฉ์์ผ๋ก ๋ง๋ฆ
โย ๋ชจ๋ ์ฝํ
์ธ ๋ฅผ ํ ๋ฒ์ ๋ฐ์์จ ํ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ ๋ฌดํ ์คํฌ๋กค์ด๋ผ๊ณ ๋ณผ ์ ์์
๐ย ์ ์ ๋ฉ์ถฐ์ ํ์ด์ง ์ ํํ ํ์ โย ๐ย ๋ณด๋ค ๋ ๋งค๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ ์ ๊ณต
๐ย ์ง๋์น ์ฝํ
์ธ ์ฐพ๊ธฐ ํ๋ฆ / ์ฝํ
์ธ ๋์ด ์ด๋์ง ์ ์ ์์ where.. ๐คทโโ๏ธ
GNB(Global Navigation Bar)
& LNB(Local Navigation Bar)
โ๏ธย GNB
: ์ด๋ ํ์ด์ง์์๋ ์ฌ์ฉํ ์ ์๋ ์ต์์ ๋ฉ๋ด๋ก, ํญ์ ๋์ผํ ์์น์ ์์ด์ผ ํจ
โ๏ธย LNB
: GNB์ ์ข
์๋๋์๋ธ ๋ฉ๋ด / ํน์ ํ์ด์ง์์๋ง ๋ณผ ์ ์๋ ๋ฉ๋ด
โ๏ธย Grid System
์ง์ ์๋ ๊ตฌ์กฐ์ UI ๊ตฌ์ฑ์ ๋์์ฃผ๋ system์ผ๋ก์จ,
ํ๋ฉด์ ๊ฒฉ์๋ก ๋๋ ๋ค์, ๊ทธ ๊ฒฉ์์ ๋ง์ถฐ ์ฝํ ์ธ ๋ฅผ ๋ฐฐ์นํ๋ ๋ฐฉ๋ฒ
โ๏ธย Column Grid System
: ํ๋ฉด์ ์ธ๋ก๋ก ๋ช ๊ฐ์ ์์ญ์ผ๋ก ๋๋ ๊ฒ์ธ๊ฐ์ ์ด์
โฐย Margin
, Column
, Gutter
3๊ฐ์ง ์์๋ก ๊ตฌ์ฑ
Margin
: ํ๋ฉด ์์ชฝ ์ฌ๋ฐฑ
Column
: ์ฝํ
์ธ ๊ฐ ์์นํ๊ฒ ๋ , ์ธ๋ก๋ก ๋๋์ด์ง ์์ญ
โฐย ํ์ค์ ์ผ๋กย ๐ฑPhone: 4๊ฐ, Tablet: 8๊ฐ, ๐ปย PC: 12๊ฐ column์ผ๋ก ๋๋
โฐย break point
: ์ด๋ฏธ์ง ์ ํ๋ฉด ํฌ๊ธฐ ๊ตฌ๋ถ์
๐ย ์๋ ๋จ์๋ฅผ ์ฌ์ฉํ์ฌ ์ฝํ ์ธ ๊ฐ ์ฐฝ ํฌ๊ธฐ์ ๋ง์ถฐ์ ํฌ๊ธฐ๊ฐ ๋ณํ๋๋ก ์ค์ ํ๋ ๊ฒ์ด ์ข์
Gutter
: Column ์ฌ์ด ๊ณต๊ฐ์ผ๋ก, ์ฝํ
์ธ ๊ตฌ๋ถ์ ๋์
โฐย Gutter ๊ฐ๊ฒฉ์ด ์ข์์๋ก ์ฝํ
์ธ ๋ค๊ฐ์ ์ฐ๊ด์ฑ์ด ์์ด ๋ณด์ด๋ฉฐ, ๋์์๋ก ๊ฐ ์ฝํ
์ธ ๊ฐ ๋
๋ฆฝ์ ์ธ ๋๋์ ์ค
โย Gutter๋ ์๋ฌด๋ฆฌ ๋์ด๋ Column ๋๋น๋ณด๋ค๋ ์๊ฒ ์ค์ ํ๊ธฐ
โย UX ํ๊ฐ์๋ ์ฌ์ฉ๋ ์ ์์
์ ์ฉ์ฑ(Useful)
: ์ฌ์ฉ ๊ฐ๋ฅํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ณ ์๋๊ฐ?์ฌ์ฉ์ฑ(Usable)
: ์ฌ์ฉํ๊ธฐ ์ฌ์ด๊ฐ?๋งค๋ ฅ์ฑ(Desirable)
: ์ ํ์ด ์ฌ์ฉ์๋ค์๊ฒ ๋งค๋ ฅ์ ์ธ๊ฐ?์ ๋ขฐ์ฑ(Credible)
: ์ฌ์ฉ์๊ฐ ์ ํ/์๋น์ค๋ฅผ ๋ฏฟ๊ณ ์ฌ์ฉํ ์ ์๋๊ฐ?์ ๊ทผ์ฑ(Accessible)
: ๋๊ตฌ๋ ์ง ์ ํ/์๋น์ค์ ์ ๊ทผํ๊ธฐ ์ฌ์ด๊ฐ?๊ฒ์ ๊ฐ๋ฅ์ฑ(Findable)
: ์ฌ์ฉ์๊ฐ ์ํ๋ ๊ธฐ๋ฅ/์ ๋ณด๋ฅผ ์ฝ๊ฒ ์ฐพ์ ์ ์๋๊ฐ?๊ฐ์น์ฑ(Valuable)
: ๊ณ ๊ฐ์๊ฒ ๊ฐ์น๋ฅผ ์ ๊ณตํ๊ณ ์๋๊ฐ?์ฌ์ฉ์๊ฐ ์ ํ์ ์ง์ ํ ์์ ์ ์์์ผ๋ก ์ทจํ ์ ์๋ ๋ชจ๋ ํ๋์ ๋ค์ด์ด๊ทธ๋จ์ ๊ทธ๋ ค์ ์ ๋ฆฌ
๐ย ์ฌ์ฉ์ ํ๋ฆ ์ ์ด์ํ๊ฑฐ๋ ๋งค๋๋ฝ์ง ์์ ๋ถ๋ถ์ ๋ฐ๊ฒฌํ์ฌ ์์ ๊ฐ๋ฅ
๐ย ์์ผ๋ฉด ์ข์ ๊ธฐ๋ฅ์ ๋ฐ๊ฒฌํ์ฌ ์ถ๊ฐ / ์์ด๋ ์๊ด ์๋ ๊ธฐ๋ฅ์ ๋ฐ๊ฒฌํ๊ณ ์ญ์ ๊ฐ๋ฅ
๐ย UX ๊ฐ์ ๊ฐ๋ฅ ูฉ( แ )ู
์ง์ฌ๊ฐํ
โฝ๏ธ: ์ฌ์ฉ์๊ฐ ๋ณด๊ฒ ๋ ํ๋ฉด๋ค์ด์๋ชฌ๋
๐ธ: ์ฌ์ฉ๊ฐ ์ทจํ๊ฒ ๋ ํ๋ํ์ดํ
โก๏ธ: ํ๋ฉด๊ณผ ํ๋์ ์ฐ๊ฒฐ์์ผ์ฃผ๋ ํ์ดํ์์คํ
์ํ์ ๊ฐ์์ฑ(Visibility of system status)
์์คํ
& ํ์ค ์ธ๊ณ ์ผ์น(Match between system and the real world)
์ฌ์ฉ์ ์ ์ด & ์์ (User control and freedom)
์ผ๊ด์ฑ & ํ์ค (Consistency and standards)
์ค๋ฅ ๋ฐฉ์ง(Error prevention)
๊ธฐ์ต๋ณด๋จ ์ง๊ด(Recognition rather than recall)
์ฌ์ฉ์ ์ ์ฐ์ฑ & ํจ์จ์ฑ(Flexibility and efficiency of use)
๋ฏธํ์ ์ด๊ณ ๋ฏธ๋๋ฉํ ๋์์ธ(Aesthetic and minimalist design)
์ค๋ฅ ์ธ์, ์ง๋จ, ๋ณต๊ตฌ ์ง์(Help users recognize, diagnose, and recover from errors)
๋์๋ง & ์ค๋ช
๋ฌธ์(Help and documentation)
โ๏ธ ์ค๋ ํ์ตํ ๋ด์ฉ์ UI/UX๋ก ๊ทธ๋๋ง ๋ถ๋ด์๋ ๋ด์ฉ์ด๋ผ coplit ๋ฌธ์ ๋ฅผ ์ฒ์ ํผ์ง 2๋ฌ๋ง์ '๋ณ์์ ์๋ฃํ(10)', '์กฐ๊ฑด๋ฌธ(17)', '๋ฌธ์์ด(17)', '๋ฐ๋ณต๋ฌธ(21)' ๋ฌธ์ ๋ฅผ ๋ณต์ตํ๋ค. ๋ฐ๋ณต๋ฌธ์ ์ ์ธํ ๋๋จธ์ง ์ฑํฐ๋ 1~2๋ฌธ์ ๋นผ๊ณ ์ ์ ํ๋ฆฐ ํธ์ด์์ง๋ง ๋ฐ๋ณต๋ฌธ์์ ๋ฌด๋ ค 7๋ฌธ์ ๋ ์ด๋ป๊ฒ ์ ๊ทผํ์๋์ง ๊ธฐ์ต๋ ์ ๋ฌ๋ค.. ์ ์ ํ๋ ธ๋ ๋ฌธ์ ๋ github์ ๋ฐ๋ก ๊ธฐ๋กํด๋๊ธฐ!
โ ์ค๋์ Programmers - Lv.1_๋๋์ด ๋จ์ด์ง๋ ์ซ์ ๋ฐฐ์ด.js ์๊ณ ๋ฆฌ์ฆ ๋ฌธ์ ํ