์ค๋ ๋๋์ด ๊ณผ์ ๊ฐ ์ฃผ์ด์ก๋๋ฐ์,,
์ง์ง ํ๊ฑฐ๋ฉ์ค,,
์ด๊ฑฐ ์ธ์ ๋คํจ์ใ ใ ์ ์์ ๋ ๋ฒ ์ฐฌ๋ฐ์ใ ใ
์ค๋ ํ๋ฃจ์ข ์ผ ํ๋๋ฐ๋ ์์ ๋ชปํ์ต๋๋ค์,,
์ฃผ๋ง์์๋ ๊ผญ ํ๊ฒ ์ด๋ค,,
์ง๊ธ์ ๋๋ฌด ํ๋๋ฌ,,

<UI ๋์์ธ์ ๋ชจ๋ ๊ฒ 1-4>
์์ ๋ชฉํ
1๏ธโฃ UI ๋์์ธ์ ๋ถ์ํ์ฌ ๋ฐ๋ณต๋๋ ์์๋ฅผ ์ฐพ์ ์ ์๋ค.
2๏ธโฃ ์ปดํฌ๋ํธ ๋ฒ์๋ฅผ ์ดํดํ๊ณ ์ค๊ณํ ์ ์๋ค.
3๏ธโฃ ์คํ์ผ์ ์ ์ฉํ์ฌ ์ปดํฌ๋ํธ๋ฅผ ์ ์ํ ์ ์๋ค.
๋ฐ๋ณต๋๋ UI ๋์์ธ ๋ถ์
๊ณตํต UI ์์ ์ฐพ์๋ณด๊ธฐ
1๏ธโฃ ๊ธฐ๋ณธ ์์(Item)
๊ฐ์ฅ ์์ ์์์ ์ปดํฌ๋ํธ
์นฉ, ์์ด์ฝ, ๋ผ๋์ค ๋ฒํผ, ์ฒดํฌ๋ฐ์ค, ๋ฒํผ ๋ฑ์ด ์๋ค.

2๏ธโฃ ์กฐํฉ ์์(Module)
๊ธฐ๋ณธ ์์ + ๊ธฐ๋ณธ ์์, ๊ธฐ๋ณธ ์์ + ์กฐํฉ ์์
์นด๋(์ด๋ฏธ์ง+ํ ์คํธ), ์์น๋ฐ(์์ด์ฝ + ์ ๋ ฅ ํ๋), Snackbar(ํ ์คํธ+๋ฒํผ) ๋ฑ์ด ์๋ค.

3๏ธโฃ ์น์ (Section)
์กฐํฉ ์์ + ์กฐํฉ ์์ + ์ฌ๋ฐฑ(๋ง์ง, ํจ๋ฉ)
๋ค๋น๊ฒ์ด์ ๋ฐ, ์ฑ ๋ฐ, ์บ๋ฌ์ , ํญ, ๋ฆฌ์คํธ ๋ฑ์ด ์๋ค.

4๏ธโฃ ๊ฐ๋ฐ์ ๋ชจ๋์์ ๋ถ์ํ๊ธฐ
(1) ์๋๋ก์ด๋ ๊ฐ๋ฐ์ ๋ชจ๋
์ค์ > ํด๋์ ํ ์ ๋ณด > ์ํํธ์จ์ด ์ ๋ณด > ๋น๋ ์ ๋ณด - 7๋ฒ ํด๋ฆญ > pin๋ฒํธ ์ ๋ ฅ
์ค์ > ๊ฐ๋ฐ์ ์ต์ > ๋ ์ด์์ ๋ฒ์ ํ์
(2)web ๊ฐ๋ฐ์ ๋ชจ๋
๋งฅ : โฅ Option + โcommand + i
์๋์ฐ : F12
์ปดํฌ๋ํธ ๊ตฌ์ฑ
1๏ธโฃ ์๋ฆฌ๋จผํธ(Element)
๋ ์ด์ ์ชผ๊ฐ์ง์ง ์์ ๊ฐ์ฅ ์์ ๋จ์
์ปฌ๋ฌ, ํ์ดํฌ๊ทธ๋ํผ, ์์ด์ฝ, ์ฌ๋ฐฑ, ๊ณก๋ฅ , ๊ทธ๋ฆฌ๋ ๋ฑ์ ์์๋ค์ด ์๋ฆฌ๋จผํธ์ ์ํ๋ค.

2๏ธโฃ ์ปดํฌ๋ํธ(Component)
์๋ฆฌ๋จผํธ + ์๋ฆฌ๋จผํธ๋ฅผ ์กฐํฉํ์ฌ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ ๋ธ๋ก์ ํํ์ธ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ ๋ค.

3๏ธโฃ ํฉ์ฑ ์ปดํฌ๋ํธ(Compound Component)
์ปดํฌ๋ํธ + ์ปดํฌ๋ํธ๋ฅผ ์กฐํฉํ์ฌ ํฉ์ฑ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ์ ์๋ค.

4๏ธโฃ ํ์ด์ง(Page)
ํฉ์ฑ ์ปดํฌ๋ํธ๋ฅผ ํ์ฉํ์ฌ UI ํ๋ฉด์ ๊ทธ๋ ค๋ผ ์ ์๋ค.

์ปดํฌ๋ํธ๋ ์์ ๋จ์๋ถํฐ ์ ์ง์ ์ผ๋ก ํฐ ๋จ์๋ก ์์ ํด ์ค๋ค.
์ปดํฌ๋ํธ ๋ค์ด๋ฐ
1๏ธโฃ ์๋ฌธ ๋ค์ด๋ฐ
์์ด์ฝ๊ณผ ์ปดํฌ๋ํธ ๋ค์ด๋ฐ์ ๊ฐ๋ฐ๋ก ํ์ฉ๋ ํ๋ฅ ์ด ๋๊ธฐ ๋๋ฌธ์ ์๋ฌธ์ผ๋ก ์ ์ํด ์ฃผ์๋ ๊ฒ์ด ์ข๋ค.

2๏ธโฃ ์ฌ์ฉ ๋งฅ๋ฝ์ ๋ฐ๋ฅธ ๋ค์ด๋ฐ

3๏ธโฃ Assets ํจ๋ ์ ์ฉ
Assets ํจ๋์ ํ์ผ์ ๊ตฌ์กฐ๋ฅผ ๋ฐ์ํ์ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ฒฝ๋ก๋ฅผ ํ์ํ๊ณ ์๋ค.
ํ์ผ ๊ฒฝ๋ก๋ file > page > frame(section) ์ ๊ตฌ์กฐ๋ฅผ ๋ฐ๋ฅด๊ณ ์๋ค.
ํ์ผ ๊ฒฝ๋ก์ ๊ฐ ๋จ๊ณ๋ Assets ํจ๋์ ์ ๋ชฉ์ ๋ํ๋ธ๋ค.
์ํ๋ฒณ์์ผ๋ก ํ์ด์ง๋ฅผ ํ์ํ๊ณ ์๋ค.

์์
์นด๋ ์ปดํฌ๋ํธ ๋ง๋ค๊ธฐ



<UI ๋์์ธ์ ๋ชจ๋ ๊ฒ 1-5>
์์ ๋ชฉํ
1๏ธโฃ UI ์ปดํฌ๋ํธ๋ฅผ ํ์ฉํ์ฌ ํ๋ฉด ๋์์ธ์ ์ค๊ณํ ์ ์๋ค.
2๏ธโฃ ํ๋ฉด์ ๊ตฌ์กฐ๋ฅผ ์ดํดํ๊ณ ํด๋ก ๋์์ธ์ ํ ์ ์๋ค.
UI ํด๋ก ๋์์ธ
UI ํ๋ฉด ๊ตฌ์กฐ
ํฐ ๋ธ๋ก(ํ์ด์ง) → ์์ ๋ธ๋ก(์ปดํฌ๋ํธ)

์ปดํฌ๋ํธ๋ฅผ ๋ธ๋ก์ฒ๋ผ ์ค๊ณํ๋ฉด ํ์ฅ์ฑ๊ณผ ์ ์ง ๋ณด์๊ฐ ์ฉ์ดํด์ง๋ค.
์ฌ์ฌ์ฉ์ฑ : ๊ฐ์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ๋ฌ ๊ณณ์ ํ์ฉํ ์ ์๋ค.
์ ์ง ๋ณด์ ์ฉ์ด : ํ๋ฒ์ ์์ ์ผ๋ก ์ ์ฒด UI์ ๋ฐ์ํ ์ ์๋ค.
์ ์ฐ์ฑ : ์ถ๊ฐ, ์ญ์ ํน์ ์์น๋ฅผ ๋ณ๊ฒฝํ ๋, ๋ ์ด์์์ ํฐ ๋ณํ ์์ด ์ ์ฐํ๊ฒ ์ ์ฉํ ์ ์๋ค.
์น์ ์ ์กฐ๋ฆฝํด์ ํ์ด์ง๋ฅผ ๋ง๋ค ๋ ํ ํธ๋ฆฌ์ค ๋ธ๋ก์ฒ๋ผ ๋นํ์์ด ์์์ผ ํ๋ค.

์์
ํด๋ก ๋์์ธํ๊ธฐ
์ ๋ฆฌ๋ฅผ ์ํด์ ์ง์ ๋ถํ์ง๋ง ํ๊ณ ์๋ ์ค์๋ค,,

์ด๋ฒ ์ฃผ๋ฅผ ๋์๋ณด๋ฉฐ,,
์๊ฐ์ด ๋๋ฌด ๋นจ๋ฆฌ ๊ฐ์,, ์ง๋๊ฐ ๋๋ฌด ๋นจ๋ผ์,, ์์์ง๋ ์ค์ต์ ๊ณผ์ ๊น์ง ํ๋ฃจํ๋ฃจ ๋๋ฌด ๋นจ๋ฆฌ ๊ฐใ ใ ๋ด๊ฐ ์ ๋๋ก ํ๊ธฐ๋ ํ๋๊ฑด์ง ์์ง ๋ชจ๋ฅด๊ฒ ๋ค ์ ๋ฆฌํ๋ฉด์ ํด์ผํ๋๋ฐ ๋ฐ์๋๊น ๋ง ํ๊ฒ ๋๊ณ ๋ง์ด ๊ธํ๋๊น ํ๋ ค๋ ๊ฒ๋ ์ ์๋๋ ๊ฒ ๊ฐ๋ค,, ๋ 4๊ฐ์ ํ์๋ ์ด๋ฌ๋ฉด ์ด์ฉ์ง..? ์ฃผ๋ง์๋ ๊ณ์ ๊ณผ์ ํด์ผํ ๊ฒ ๊ฐ๋ค ์ฒด๋ ฅ ๋ง์ด ๋น์ถํด๋์,,
'๋ด์ผ๋ฐฐ์์บ ํ UXUI' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [๋ด์ผ๋ฐฐ์์บ ํ 11์ผ์ฐจ(2)] ๊ฐ์ธ ๊ณผ์ (0) | 2025.04.28 |
|---|---|
| [๋ด์ผ๋ฐฐ์์บ ํ 11์ผ์ฐจ] ๋์์ธ ์นดํ (0) | 2025.04.28 |
| [๋ด์ผ๋ฐฐ์์บ ํ 10์ผ์ฐจ(2)] ์ํฐํด (1) | 2025.04.25 |
| [๋ด์ผ๋ฐฐ์์บ ํ 10์ผ์ฐจ] ๋์์ธ ์นดํ (0) | 2025.04.25 |
| [๋ด์ผ๋ฐฐ์์บ ํ 9์ผ์ฐจ(3)] UI ๋์์ธ์ ๋ชจ๋ ๊ฒ ์๊ฐ (2) | 2025.04.24 |