์ด๋ฒ ์ฃผ ๊ณ์ ๋ฌ๋ ค์ ๊ทธ๋ฐ๊ฐ
์ฐํด๊ฐ ์์ด์ ๊ทธ๋ฐ๊ฐ
์ง์ค๋ ฅ์ด ๋ฐ์ด ๋ ๊ธ์์ผ์ด๋ค,,
๋ค์ ์ฃผ๋ถํด ์ ์ ์ฐจ๋ฆฌ๊ณ ํ์!!

<ํผ๊ทธ๋ง ํ์ฉ ์ฌํ 3์ฃผ์ฐจ>
์์ ๋ชฉํ
1๏ธโฃ ๋ณต์กํ UI ์ปดํฌ๋ํธ ๊ตฌ์กฐ๋ฅผ ํ์ ํ๊ณ ์ฒด๊ณ์ ์ผ๋ก ์ค๊ณํ๋ ๋ฒ์ ๋ฐฐ์ด๋ค.
2๏ธโฃ ๋ค์ํ UI ์ฌํ ๊ฐ๋ ์ ๋ฐฐ์ฐ๊ณ ํผ๊ทธ๋ง ๊ธฐ๋ฅ์ผ๋ก ํํํ๋ ๋ฒ์ ๋ฐฐ์ด๋ค.
๋ฐฐ๋ฆฌ์ธ์ธ ์ ํ๋กํผํฐ ํ์ฉ
๋ฒํผ ์ปดํฌ๋ํธ ์คํ (Stack)
1๏ธโฃ ์คํ(Stack)์ ๋ป
๋ฒํผ์ ์ํ๋ ์ข์ฐ๋ก 2๊ฐ ์ด์์ ๊ฐ์ด ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๋ฅผ ์คํ(Stack;์๋ค)์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.

2๏ธโฃ ํผ๊ทธ๋ง์์ ๋ฒํผ ์คํ์ ๋ง๋ค๋ฉด ์ข์ ์
๋ฒํผ ์ปดํฌ๋ํธ๋ ๋ค์ํ UI ํํ๋ก ์ฌ์ฉํ๋ ์์์ด๋ค.
ํนํ ์ข์ฐ ๋๋ ์ํ๋ก 2๊ฐ์ฉ ๋ฐฐ์นํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ฐ,
๋งค๋ฒ ๋ฒํผ์ ํ๋์ฉ ๋ฃ๋ ๊ฒ์ ๋ฒ๊ฑฐ๋ก์ด ์ผ์ด ๋ ์ ์๋ค.
๋ฐ๋ผ์ 2๊ฐ์ฉ ๋ฌถ์ธ ๋ฒํผ ์ธ์คํด์ค๋ฅผ ํ๋์ ํฉ์ฑ ์ปดํฌ๋ํธ๋ก ํ์ฉํ๋ ๊ฒ ์คํ์ด๋ค.
๐ก ์คํ์ UI ๋ช ์นญ๋ณด๋ค๋, 2๊ฐ์ ๋ฒํผ์ ๋์์ ๋ฐฐ์นํ๊ธฐ ์ํ ํผ๊ทธ๋ง ์คํฌ์ด๋ผ ํ ์ ์๋ค.
๋ฒํผ ์ปดํฌ๋ํธ ๋ (Dock)
1๏ธโฃ ๋ (Dock)์ ๋ป
์ค์ ๋ก ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๋ ๋ฒํผ ์ปดํฌ๋ํธ์ ํํ์ด๋ค.
๋ฒํผ ์ปดํฌ๋ํธ๋ ๋จ์ผ ์์๋ก ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๋ ์์ง๋ง,
๋๋ถ๋ถ์ ๊ฒฝ์ฐ ํ๋ฉด์ ํ๋จ์ ๊ณ ์ ๋ ๋ (Dock) ํํ๋ก ์ฌ์ฉ๋๋ค.
์ฌ๋ฐฑ ์์๊น์ง ๊ณ ๋ คํด์ ํ๋จ์ ๊ณ ์ ๋๋ ๋ฒํผ ์ปดํฌ๋ํธ ํํ๋ฅผ ๋ง๋ค์ด๋๋ฉด
๋งค์ฐ ๋น ๋ฅด๊ฒ ๋์์ธ์ ์งํํ ์ ์๋ค.

๐ก ์ค๋ฌด์์๋ ๊ธฐ๊ธฐ ํ๋จ์ ์ธ๋์ผ์ดํฐ ์์๊น์ง ๊ณ ๋ คํด์ ๋ง๋ค์ด ๋๋ ํธ์ด๋ค.

ํฌ์ง์ (Position)
ํฌ์ง์ (Position)์ ํ๋ฉด ์์์ ์์๊ฐ ์์นํ๋ ๋ฐฉ์์ด๋ค.
UI ์์๋ ํ๋ฉด ์์ ๋ค๋ฅธ ์์๋ค๊ณผ ์๋์ ์ธ ๊ด๊ณ๋ฅผ ๊ฐ์ง๋ฉด์ ์์นํ๋ค.
1๏ธโฃ ์คํํฑ(Static)
๊ฐ์ฅ ๊ธฐ๋ณธ๊ฐ์ผ๋ก, ์์์ ์๋ฌด๋ฐ ์์ฑ๊ฐ์ ์ฃผ์ง ์์ ๊ทธ๋๋ก์ ์ํ์ด๋ค.
ํผ๊ทธ๋ง์์๋ ์ผ๋ฐ ํ๋ ์์ ์์๋ฅผ ๋ฐฐ์นํ๋ฉด ๋๋ค.
์คํํฑ ์์ฑ์ ํ๋ ์ ์์์ ์์ ๋กญ๊ฒ ์์ง์ผ ์ ์๋ค.

2๏ธโฃ ํฝ์ค๋(Fixed)
ํ๋ฉด ์ ์ฒด๋ฅผ ๊ธฐ์ค์ผ๋ก ์์๋ฅผ ๊ทธ ์์น์ ๊ณ ์ ํ๋ค.
ํฝ์ค๋ ์์ฑ์ ๊ฐ์ง ์์๋ ์คํฌ๋กค, ๋ค๋ฅธ ์์์ ๊ตฌ์ ๋ฐ์ง ์๋๋ค.
ํผ๊ทธ๋ง์์๋ ํ๋กํ ํ์ ์์ ์ค์ ํ ์ ์๋ค.

ํผ๊ทธ๋ง์์๋ Fixed ์์ฑ์ผ๋ก ๋ฐ๋ก ๊ตฌ๋ถ๋๋ค.

3๏ธโฃ ์ฑ์๋ฃจํธ(Absolute)
ํฝ์ค๋์ ๊ฐ์ง๋ง, ์์๊ฐ ๊ณ ์ ๋๋ ์์๋ฅผ ๊ฐ์ผ ์์ ์ปจํ ์ด๋๋ฅผ ๊ธฐ์ค์ผ๋ก ํ๋ค.
์คํํฑ๊ณผ์ ๋ค๋ฅธ ์ ์, ์์ ์ปจํ ์ด๋๊ฐ ๋ฐ๋์ ์คํ ๋ ์ด์์์ด์ด์ผ ํ๋ค.
์คํ ๋ ์ด์์์ด ์๋ ์ผ๋ฐ ํ๋ ์ ์์์๋ ์ฑ์๋ฃจํธ ํฌ์ง์ ์ ์ฌ์ฉํ ์ ์๋ค.
์ฑ์๋ฃจํธ ํฌ์ง์ ์ด ์ ์ฉ๋ ํ๋ ์์ ์คํ ๋ ์ด์์ ์์์๋ ์์น๋ฅผ ์์ ๋กญ๊ฒ ์์ง์ผ ์ ์๋ค.
ํผ๊ทธ๋ง์์ ์ฑ์๋ฃจํธ ํฌ์ง์ ์ ์คํ ๋ ์ด์์ ํฌ์ง์ ์์์ ์์ ์์น๋ฅผ ๊ณ ์ ํ ๋ ์ฌ์ฉํ๋ค.
ํผ๊ทธ๋ง์์๋ ๋์์ธ ํจ๋์์ ์ค์ ํ ์ ์๊ณ ,
์ฑ์๋ฃจํธ ํฌ์ง์ ์ด ์ ์ฉ๋ ์์๋ ํ ๋๋ฆฌ์ ๋ค๋ฅธ ํ์๊ฐ ์๊ธด๋ค.


4๏ธโฃ ์คํฐํค(Sticky)
์คํฐํค ํฌ์ง์ ์ ํฝ์ค๋์ ์คํํฑ์ ์ ํํ๋ฉฐ ์ ์ฉ๋๋ ์์ฑ์ด๋ค.
์คํฌ๋กค ์์์๋ ์คํํฑ์ด๋ค๊ฐ, ์คํฌ๋กค์ ๋์ด๊ฐ๋ฉด ํ๋ฉด ์๋จ์ ๊ณ ์ ๋๋ค.
์คํฌ๋กค๊ณผ ๊ด๋ จ ์๊ธฐ ๋๋ฌธ์ ํ๋กํ ํ์ ํจ๋์์ ์ค์ ํ ์ ์๋ค.

์ค๋ฒ๋ ์ด์ ๋ชจ๋ฌ
์ธํฐ๋ท์ด๋ ์ฑ์ ์ฐ๋ค ๋ณด๋ฉด ์ ๋ง ๋ง์ ํ๋ฉด๋ค์ ๋ณด๊ฒ ๋๋ค.
์น์ฌ์ดํธ์ ๊ฒฝ์ฐ ์ฑ์ ๊ฒฝ์ฐ์ฒ๋ผ ์๋ก์ด ์ธํฐ๋ท ์ฐฝ์ ๋์์ฃผ๋ ๊ฒฝ์ฐ๋ ์๋ค.
ํ๋ฉด ์์ ์๋ก์ด ํ๋ฉด์ ๋์ฐ๋ ๊ฑธ ์ผ๋ฐ์ ์ผ๋ก ํ์ ์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.


ํ์ ์ ์ ํ
1) ์๋์ฐ ํ์
์ฑ ์ฒ๋ผ ์๋ก์ด ์๋์ฐ(๋ธ๋ผ์ฐ์ ์ฐฝ)์ ๋์์ฃผ๋ ๋ฐฉ์์ด๋ค.
์ผ๋ฐ์ ์ผ๋ก ํ์ ์ด๋ผ๊ณ ๋ถ๋ฅด๋ ๊ฑด ์ด ๋ฐฉ์์ ์ด์ผ๊ธฐํ๋ค.
์๋์ฐ ํ์ ์ ์ ์ ์ฌ์ฉํ์ง ์๋ ์ถ์ธ์ด๋ค.

2) ๋ ์ด์ด ํ์
ํ์ฌ ํ๋ฉด์์ ์ฝ๋๋ก ๋ง๋ ์ปดํฌ๋ํธ๋ฅผ ๋ณด์ฌ์ฃผ๋ ๋ฐฉ์์ด๋ค.
๋๋ถ๋ถ์ ์๋น์ค๋ ์ด ๋ฐฉ์์ผ๋ก ํ์ ์ ๋ณด์ฌ์ฃผ๊ณ ์๋ค.

๋ชจ๋ฌ
๋ชจ๋ฌ์ ์ฌ์ฉ์๊ฐ ํ๋์ ์ทจํ๊ธฐ ์ ๊น์ง ๋ค์ ๊ฐ๋ ค์ง ํ๋ฉด์ ์กฐ์ํ ์ ์๋ ๊ฒ์ ๋ปํ๋ค.
๋ชจ๋ฌ(Modal)์ด๋ผ๋ ๊ฑด UI์ ์ด๋ฆ์ด ์๋๋ผ, UI๋ฅผ ๋ถ๋ฅํ๋ ๊ธฐ์ค ์ค ํ๋์ด๋ค.
๋ก๊ทธ์ธ ํ๋ฉด์์ ๋ค์ ๊ฐ๋ ค์ง ๋ถ๋ถ์ ์กฐ์ํ ์ ์๋ค๋ฉด, ๋ก๊ทธ์ธ ํ๋ฉด์ ๋ชจ๋ฌ์ด๋ค.
ํ์ , ํ ์คํธ, ๋ฐํ ์ํธ, ๋ค์ด์ผ๋ก๊ทธ, ์ฌ์ด๋๋ฐ ๋ฑ ๋ง์ UI๋ค์ด ๋ชจ๋ฌ๋ก ์ฌ์ฉ๋๊ณ ์๋ค.


์ค๋ฒ๋ ์ด์ ๋ผ์ดํธ๋ฐ์ค
1) ์ค๋ฒ๋ ์ด์ ๊ฐ๋
์ค๋ฒ๋ ์ด๋ ๋ชจ๋ฌ๊ณผ ํจ๊ป ์์ฃผ ์ฌ์ฉ๋๋ ๊ฐ๋ ์ด๋ค.
UI๊ฐ ํ๋ฉด ์์ ์ค์ฒฉ๋ ๋, ์ค๋ฒ๋ ์ด ์์ฑ์ ๊ฐ์ก๋ค๊ณ ํ๋ค.
์ฐ๋ฆฌ๊ฐ ํํ ๋ณด๋ ์์๋ค ์ค์๋ ์ค๋ฒ๋ ์ด ์์ฑ์ ๊ฐ์ง ๊ฒ๋ค์ด ๋ง๋ค.

2) ๋ผ์ดํธ๋ฐ์ค์ ๊ฐ๋
๋ชจ๋ฌ UI๋ฅผ ์ฌ์ฉํ ๋๋ ์ผ๋ฐ์ ์ผ๋ก ‘๋ค์ ๊ฐ๋ ค์ง ํ๋ฉด์ ์ฌ์ฉํ ์ ์๋ค’
๋ ๊ฑธ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด ๋ฐํฌ๋ช ํ ์ธต์ ๋ง๋ค์ด ์ค๋ค.
์ด ๋ฐํฌ๋ช ํ ์ธต์ ๋ผ์ดํธ๋ฐ์ค(Lightbox)๋ผ๊ณ ๋ถ๋ฅธ๋ค.

3) ์ค๋ฒ๋ ์ด์ ๋ชจ๋ฌ, ๋ผ์ดํธ๋ฐ์ค์ ๊ด๊ณ

๐ก '์ฌ์ฉ์๋ฅผ ๋ฐฉํดํ๋ฉด์๋ผ๋ ๋ฐ๋์ ํ์ธํด์ผ ํ๋ ๋ถ๋ถ์ด๊ฑฐ๋, ๋๋ ๊ทธ๋งํผ ์ค์ํ ์ ํ์ด ํ์ํ ์์ ’์ ์ฌ์ฉํด์ผ ํ๋ ๊ฒ์ด ๋ชจ๋ฌ์ด๋ค.
๋ค์ด์ผ๋ก๊ทธ ์ปดํฌ๋ํธ
์ปดํฌ๋ํธ์ ์ข ๋ฅ ์ค ์ปจํ ์ด๋์ ํด๋นํ๋ ์ปดํฌ๋ํธ์ด๋ค.
์ค๋ฒ๋ ์ด-๋ชจ๋ฌ ์์ฑ์ ๊ฐ์ง ์ปดํฌ๋ํธ์ด๋ค.
๋ค์ด์ผ๋ก๊ทธ๋ ์ฌ์ฉ์์๊ฒ ์ค์ํ ์ ํ์ ๋ฐ๊ณ , ์ฌ์ฉ์๊ฐ ์ ํํ ํ๋์ ํ์ธํ๋ ์ปดํฌ๋ํธ์ด๋ค.


<ํผ๊ทธ๋ง ํ์ฉ ์ฌํ 4์ฃผ์ฐจ>
์์ ๋ชฉํ
1๏ธโฃ ํ๋กํ ํ์ดํ์ ํตํด ๋์์ธ์ ํ์ฉํ ์ ์๋ ํผ๊ทธ๋ง ์ธํฐ๋์ ์ ๋ง๋ค ์ ์๋ค.
2๏ธโฃ ์ค์ ์๋น์ค๋ค์ ์ธํฐ๋์ ์ ํผ๊ทธ๋ง์์ ์ ์ฌํ๊ฒ ๊ตฌํํด ๋ณด๋ฉฐ ์๋ฆฌ๋ฅผ ์ดํดํ ์ ์๋ค.
์ปดํฌ๋ํธ ์ธํฐ๋์
UI๋ค์ ์ฐ๋ฆฌ ํ๋์ ๋ฐ๋ผ ์ ํฉํ ์๊ฐ์ ํผ๋๋ฐฑ์ ์ ๊ณตํด ์ค๋ค.
์) ๋ฒํผ์ ๋๋ฅด๊ณ ์์ ๋๋ ์์์ด ๋ณํ๊ฑฐ๋ ๋ฒํผ์ด ์ค์ ๋ก ๋๋ฆฐ ๊ฒ ๊ฐ์ ํจ๊ณผ๋ฅผ ๋ณด์ฌ์ค๋ค.
ํผ๊ทธ๋ง์์ ํ๋กํ ํ์ ์ ์ฌ์ฉํด์ UI์ ์๊ฐ์ ํผ๋๋ฐฑ์ ์ธํฐ๋์ ์ผ๋ก ๊ตฌํํด ์ค ์ ์๋ค.
๋ํ UI์ ์ํ๊ฐ ๋ฌ๋ผ์ง๋ ๊ฒฝ์ฐ๋ฅผ ์ผ์ผ์ด ์ถ๊ฐ ํ๋ฉด์ผ๋ก ๋ง๋ค์ง ์์๋ ๋๊ธฐ ๋๋ฌธ์,
์๊ฐ๊ณผ ๋น์ฉ์ ์ ์ฝํ ์ ์๋ค.
์ค๋ฒ๋ ์ด ํ๋กํ ํ์
๋ค์ด์ผ๋ก๊ทธ์ฒ๋ผ ์ค๋ฒ๋ ์ด ์์ฑ์ ๊ฐ์ง UI๋ค์ ํ๋กํ ํ์ ์์ ์ค๋ฒ๋ ์ด๋ฅผ ํ์ฉํด ๋ง๋ค ์ ์๋ค.
ํ๋กํ ํ์ ๋์ ๋ค์ด์ผ๋ก๊ทธ๊ฐ ๋ณด์ด๋ ํ๋ฉด ๋์์ธ ์์ฒด๊ฐ ํ์ํ ๊ฒฝ์ฐ๋ ์๊ธฐ ๋๋ฌธ์
ํ๋กํ ํ์ ์ผ๋ก ๋ง๋ค ๊ฑด์ง, ํ๋ฉด ๋์์ธ์ผ๋ก๋ง ๋ ๊ฑด์ง๋ ์ํฉ์ ๋ง๊ฒ ์ ํํด๋ ๊ด์ฐฎ๋ค.
๋๋๊ทธ ํ๋กํ ํ์
๋๋๊ทธํ๋ ๋ฐฉํฅ์ ๋ฐ๋ผ ํ๋ ์ ์ ํ์ด ๋ฐ์ํ๋ ๋ ํนํ ๊ธฐ๋ฅ์ด๋ค.
ํ๋์ ํ๋ ์์ ๋๋๊ทธ๋ผ๋ ๋์ผํ ํธ๋ฆฌ๊ฑฐ๋ก ์ฌ๋ฌ ํ๋ ์์ ์ ์ฉํ ์ ์๋ค.
์ฆ, ๋๋๊ทธ ๋ฐฉํฅ์ ๋ฐ๋ผ ๋ค๋ฅธ ํ๋ฉด์ด ๋์ค๋๋ก ๋ง๋ค ์ ์๋ค.
์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ ๊ฐ์ ์บ๋ฌ์ ์ด๋ ํ์ ๋ฑ์ ์ธํฐ๋์ ์ ๋ง๋ค ๋ ์ ์ฉํ๊ฒ ์ฌ์ฉํ ์ ์๋ค.






์ด๋ฒ ์ฃผ๋ฅผ ๋์๋ณด๋ฉฐ,,
๊ณผ์ ๊ณผ์ ๊ณผ์ ๊ณผ์ ๋ฐ์ ์๊ฐ์ด ์ ๋๋ค,, ๊ณผ์ ํ๋ฉด์ ์ ๋ง๋ ์์ด์ง๊ณ ๋งจ๋ ์ผ๊ทผํ๋ค ๋ณด๋ ์ด์ด ์ ์ ๋ก ๋น ์ก๋ค ์ด๊ฑด ์ซ ๊ฐ์ด๋ ์ฒ์์ ์น์ , ๋ชจ๋ ๋ถ์ํ๊ณ ์คํ์ผ ๋ถ์ํ ๋ ์ง์ง ๋์๋ฒ๋ฆฌ๋ ์ค ์์๋ค ํ ์ง์ง ์ด๋ป๊ฒ ํ๋ ๊ฑด์ง ๋ชฐ๋ผ์ ๋ด ๋ง๋๋ก ํ๋๋ฐ ์ด๊ฒ ๋ง๋ ์ถ์ด์ ๋ช ๋ฒ ๊ฐ์์๊ณ ๊ทธ๋ ๋ค๊ณ ๊ฒฐ๊ณผ๋ฌผ์ด ์ข๋? ๊ทธ๊ฒ๋ ์๋๋ค ๊ทธ๋ฅ ๋๋ฌผ๋ง ์ฃผ๋ฅต์ด์๋คใ ๊ณผ์ ํ ๋ ํ์ ๋ค ์์์ ๊ทธ๋ฐ์ง ๊ณผ์ ๋๋๊ณ ๋๋ ์กฐ๊ธ ํด์ดํด์ง ๊ฒ ๊ฐ๋ค,, ์ฐํด ๋๋๋ฉด ๋ค์ ๊ธฐ๊ฐ ์ก์
'๋ด์ผ๋ฐฐ์์บ ํ UXUI' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [๋ด์ผ๋ฐฐ์์บ ํ 16์ผ์ฐจ(2)] ์ํฐํด (0) | 2025.05.07 |
|---|---|
| [๋ด์ผ๋ฐฐ์์บ ํ 16์ผ์ฐจ] ๋์์ธ ์นดํ (0) | 2025.05.07 |
| [๋ด์ผ๋ฐฐ์์บ ํ 15์ผ์ฐจ(2)] ์ํฐํด (0) | 2025.05.02 |
| [๋ด์ผ๋ฐฐ์์บ ํ 15์ผ์ฐจ] ๋์์ธ ์นดํ (0) | 2025.05.02 |
| [๋ด์ผ๋ฐฐ์์บ ํ 14์ผ์ฐจ(3)] ํผ๊ทธ๋ง ํ์ฉ ์ฌํ ์๊ฐ (4) | 2025.05.01 |