Designer - KimTaebin-ai/study_posts GitHub Wiki
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ผ๋ฉด ์์์ผ ํ UI ์ฉ์ด
UI ์์์ ์ํ
UI ์์์ ์ํ๋ UI ์์๋ค์ด ์ฌ์ฉ์์ ์ ๋ ฅ์ ๋ฐ๋ผ ๋ณํํ๋ ๊ฒ์ ๋งํ๋ค.
- ์ผ๋ฐ
- ํ์ฑ
- ๋นํ์ฑ
- ํฌ์ปค์ค
- ์ ํ
GNB & LNB
GNB์ LNB๋ ์น์ฌ์ดํธ์ ๋ด๋น๊ฒ์ด์ ์ ๊ตฌ์ฑํ๋ ์์์ด๋ค
GNB๋ Global Navigation Bar์ ์ฝ์๋ก, ์น์ฌ์ดํธ ์ต์๋จ์ ์์นํ ์ฃผ์ ๋ฉ๋ด๋ฅผ ๋งํ๋ค.
LNB๋ Local Navigation Bar์ ์ฝ์๋ก, GNB ๋ฉ๋ด๋ฅผ ํด๋ฆญํ๊ฑฐ๋ ๋ง์ฐ์ค ์ค๋ฒ ์ํ์ผ ๋ ๋ํ๋๋ ์๋ฉ๋ด๋ฅผ ๋งํ๋ค
๋ฉ์ธ ๋ฐฐ๋ ๋๋ ํ์ด๋ก ๋ฐฐ๋
๋ฉ์ธ ๋ฐฐ๋ ๋๋ ํ์ด๋ก ๋ฐฐ๋๋ ์น์ฌ์ดํธ ๋ฉ์ธ ์๋จ์ ์์นํ๋ ๋ํ ๋ฐฐ๋์ด๋ค.
์ด ์์ญ์ ์ฌ์ฉ์์ ์ฃผ๋ชฉ์ ๋๊ณ ์ค์ํ ์ฝํ ์ธ ๋ฅผ ์ ๋ฌํ๋ ์ญํ ์ ํ๋ค. ๋ฉ์ธ ๋ฐฐ๋ ๋๋ ํ์ด๋ก ๋ฐฐ๋์๋ ์ด๋ฏธ์ง, ํ ์คํธ, ๋ฒํผ ๋ฑ์ ์์๊ฐ ํฌํจ๋ ์ ์๋ค.
๋๋กญ ๋ค์ด ๋ฆฌ์คํธ
๋๋กญ ๋ค์ด ๋ฆฌ์คํธ๋ ๋ฒํผ์ ํด๋ฆญํ๊ฑฐ๋ ์ปค์๋ฅผ ์ฌ๋ ธ์ ๋, ์ธ๋ถ ํญ๋ชฉ๋ค์ด ํผ์ณ์ง๊ณ ๊ทธ์ค ํ๋์ ํญ๋ชฉ์ ์ ํํ ์ ์๋ ์์์ด๋ค. ๋๋กญ ๋ค์ด ๋ฆฌ์คํธ๋ ๊ณต๊ฐ์ ์ ์ฝํ๊ณ ์ฌ์ฉ์์๊ฒ ์ ํ์ ํญ์ ์ ๊ณตํ๋ ์ฅ์ ์ด ์๋ค.
๋ชจ๋ฌ๊ณผ ํ์
๋ชจ๋ฌ๊ณผ ํ์ ์ ์ฌ์ฉ์์๊ฒ ์ถ๊ฐ์ ์ธ ์ ๋ณด๋ ์์ ์ ์ ๊ณตํ๋ ์์์ด๋ค. ๋ชจ๋ฌ์ ๊ธฐ์กด์ ์ด๋ ค์๋ ํ์ด์ง ์์ ์๋ก์ด ๋ ์ด์ด๋ฅผ ๋ฎ๋ ๊ธฐ๋ฅ์ด๊ณ , ํ์ ์ ํ์ด์ง ์์ ๋ ํ๋์ ๋ธ๋ผ์ฐ์ ํ์ด์ง๋ฅผ ๋์ฐ๋ ๊ฐ๋ ์ด๋ค. ๋ชจ๋ฌ๊ณผ ํ์ ์ ์ฌ์ฉ์์ ์ง์ค๋๋ฅผ ๋์ด๊ณ ์ค์ํ ๋ด์ฉ์ ๊ฐ์กฐํ ์ ์์ง๋ง, ๋จ์ฉํ๋ฉด ์ฌ์ฉ์ ๊ฒฝํ์ ์ ํดํ ์ ์๋ค.
์ค๋ต๋ฐ์ ํ ๊ธ
์ค๋ต๋ฐ์ ํ ๊ธ์ ์ฌ์ฉ์๊ฐ ์ํํ ์์ ์ ๋ํ ๊ฒฐ๊ณผ๋ ์ค์ ์ ๋ณด์ฌ์ฃผ๋ ์์์ด๋ค. ์ค๋ต๋ฐ๋ ์ฌ์ฉ์๊ฐ ์ํํ ์์ ์ ๋ํ ๊ฒฐ๊ณผ๋ฅผ ๊ฐ๋จํ ํ ์คํธ ๋ ์ด๋ธ ํํ๋ก ๋ณด์ฌ์ฃผ๋ ์์์ด๊ณ , ํ ๊ธ์ ์ค์ ์ผ๊ธฐ/๋๊ธฐ์ ๊ฐ์ ํญ๋ชฉ์ ์ ์ฉํ ์ ์๋ ์์์ด๋ค. ์ค๋ต๋ฐ์ ํ ๊ธ์ ์ฌ์ฉ์์๊ฒ ํผ๋๋ฐฑ์ ์ ๊ณตํ๊ณ ์ธํฐ๋์ ์ ์ฆ์ง์ํฌ ์ ์๋ค.
ํดํ๊ณผ ์ธํ ํ๋
ํดํ๊ณผ ์ธํ ํ๋๋ ์ฌ์ฉ์์๊ฒ ๋์์ด ๋๋ ์์์ด๋ค. ํดํ์ ํน์ ํ๋ฉด ์์์ ๋ง์ฐ์ค๋ฅผ ๊ฐ์ ธ๊ฐ๋ฉด ๋ํ๋๋ ์ค๋ช ์ด๊ณ , ์ธํ ํ๋๋ ์ฌ์ฉ์๊ฐ ํ ์คํธ๋ฅผ ์ ๋ ฅํ๊ณ ํธ์งํ ์ ์๋ ์ ๋ ฅ๋์ด๋ค. ํดํ๊ณผ ์ธํ ํ๋๋ ์ฌ์ฉ์์๊ฒ ์ ๋ณด๋ฅผ ์ ๊ณตํ๊ณ ์ ๋ ฅ์ ๋์์ค๋ค.
์ฒดํฌ๋ฐ์ค์ ์์ฝ๋์ธ
์ฒดํฌ๋ฐ์ค์ ์์ฝ๋์ธ์ ์ฌ๋ฌ ๊ฐ์ ๋ชฉ๋ก์ ๋ค๋ฃจ๋ ์์์ด๋ค. ์ฒดํฌ๋ฐ์ค๋ ์ฌ๋ฌ ๊ฐ์ ๋ชฉ๋ก์์ ๊ฐ์ ๋ค์ค ์ ํํด์ผ ํ ๊ฒฝ์ฐ ์ฌ์ฉํ๋ ์ปดํฌ๋ํธ์ด๊ณ , ์์ฝ๋์ธ์ ๋ด์ฉ์ ํผ์ณค๋ค๊ฐ ์ ์ ์ ์๋ ์ปดํฌ๋ํธ์ด๋ค. ์ฒดํฌ๋ฐ์ค์ ์์ฝ๋์ธ์ ์ฌ์ฉ์์๊ฒ ์ ํ์ ์์ ์ ๋ด์ฉ์ ๊ฐ์์ฑ์ ์ ๊ณตํ๋ค.
๋ธ๋ ๋ ํฌ๋ผ
๋ธ๋ ๋ ํฌ๋ผ์ PC ์น ํ๊ฒฝ์์ ์์ฃผ ํ์ฉ๋๋ ์ ๋ณด ๊ตฌ์กฐ ๊ธฐ๋ฒ์ด๋ค. ๋ธ๋ ๋ ํฌ๋ผ์ ์ฌ์ฉ์๊ฐ ์ง๋์จ ์์น๋ฅผ ํฌํจํ์ฌ ํ์ฌ์ ์์น๋ฅผ ์๊ฐ์ ๊ณ์ธต ๊ตฌ์กฐ๋ก ๋ํ๋ด๋ ๋ด๋น๊ฒ์ด์ ์ด๋ค. ๋ธ๋ ๋ ํฌ๋ผ์ ์ฌ์ฉ์์๊ฒ ํ์ฌ ์์น๋ฅผ ์ธ์ํ๊ณ ์ด์ ๋จ๊ณ๋ก ์ฝ๊ฒ ๋์๊ฐ ์ ์๋๋ก ๋์์ค๋ค.