ํํ๋ก์ ๋ณด์ด์ง๋ง ํํ๋กญ์ง ์์
๊ทธ๋ฐ ํ๋ฃจ์์ด๋ค,,
1-4 ์์ ํ ์๊ฐ์ ๋ฒ์จ ๋ง๋ง
ํ์ ๋ฒ์จ ๋ด์ผ์ด ๊ธ์์ด๋ผ๋
์๊ฐ ๋๋ฌด ๋นจ๋ผ์ใ ใ

<UI ๋์์ธ์ ๋ชจ๋ ๊ฒ 1-3>
์์ ๋ชฉํ
1๏ธโฃ ๋ ์ด์์์ ์ฝํ ์ธ ์ UI ์์๋ฅผ ๋ฐฐ์นํ์ฌ ์ ๋ณด๋ฅผ ์ ๋ฌํ ์ ์๋ค.
2๏ธโฃ ๊ทธ๋ฆฌ๋ ์์คํ ์ ์ ์ฉํ์ฌ ํ๋ฉด ๊ตฌ์ฑ ์์๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๋ฐฐ์นํ ์ ์๋ค.
๋ ์ด์์๊ณผ ๊ทธ๋ฆฌ๋ ์์คํ
๋ ์ด์์
ํน์ ์์ญ ์์ ํ ์คํธ, ์ด๋ฏธ์ง, ์ฌ๋ฐฑ ๋ฑ ๋์์ธ ์์๋ฅผ ์๊ฐ์ ์ผ๋ก ๋ฐฐ์นํ๋ ๊ฒ์ด๋ค.
ํด์๋
(1) ํด์๋ ์ ์ ๊ธฐ์ค
ํ์ฌ ์คํฌ๋ฆฐ ์ ์ ์จ ๊ธฐ์ค์ผ๋ก ์์ ํ๋ ๊ฒ์ด ์ข๋ค.
StatCounter์์ ์กฐํํ์ฌ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ํ์ธํ ์ ์๋ค.

์ ์ ์จ์ ๊ธฐ์ค์ผ๋ก ์์ ํ ๋์์ธ์ ๊ธฐ์ค ํด์๋๋ฅผ ์ค์ ํด์ค๋ค.
๋ํ์ ์ผ๋ก ์๋๋ก์ด๋๋ 360*800, IOS๋ 375*812 ํด์๋๋ฅผ ์ฌ์ฉํ๋ค.

๋ชจ๋ ํด์๋์์ ์ผ๊ด๋์ด ๋ณด์ด๋๋ก ๋์์ธํด์ฃผ๋ ๊ฒ์ด ์ข๋ค.

(2) ์ผ๊ด๋ ๋์์ธ
์ฌ์ฉ์๊ฐ ๋ชจ๋ ํด์๋์์ ์ผ๊ด๋ ๋์์ธ์ ๊ฒฝํํ ์ ์๋๋ก ๋ ธ๋ ฅํด์ผ ํ๋ค.

๊ณ ์ ๊ณผ ๊ฐ๋ณ ์์ญ
(1) ๊ณ ์ (Fix)
ํด์๋๊ฐ ์ปค์ง๊ฑฐ๋ ์์์ ธ๋ ์ ์ํ ์์น๊ฐ์ด ์ผ์ ํ๊ฒ ์ ์ง๋๋ ๊ฒ์ ๋งํ๋ค.
์ข์ฐ ๋ง์ง์ ๋ชจ๋ ํ์ด์ง์ ์ผ๊ด๋๊ฒ ์ ์ฉ๋์ด์ผ ํ๊ธฐ ๋๋ฌธ์ ๊ณ ์ ์ผ๋ก ์ค์ ์ ํ๋ ํธ์ด๋ค.
(2) ๊ฐ๋ณ(Flexible)
๊ณ ์ ๊ณผ ๋ค๋ฅด๊ฒ ํด์๋๊ฐ ์ปค์ง๊ฑฐ๋ ์์์ง๋ฉด ๋น์จ์ ๋ง๊ฒ ๊ฐ์ด ํ๋๋๊ฑฐ๋ ์ถ์๋๋ ๊ฒ์ ์๋ฏธํ๋ค. ์ฆ, ๋๋ฐ์ด์ค ์ฌ์ด์ฆ์ ๋ง์ถฐ ๋ณ๋๋๋ ๋ถ๋ถ๋ค์ ๋งํ๋ค.
ํด์๋์ ๋ฐ๋ผ ํฌ๊ธฐ๊ฐ ๋ณํ๋ ๋ฒํผ, ๋ฐฐ๋์ ๊ฐ์ ์ด๋ฏธ์ง๋ ๊ฐ๋ณ์ผ๋ก ์ค์ ์ ํ๋ ํธ์ด๋ค.


๊ทธ๋ฆฌ๋
์ ๋ณด์ ์์๋ฅผ ์ฒด๊ณ์ ์ผ๋ก ๋ฐฐ์นํ๊ณ , ์๊ฐ์ ์ผ๋ก ํต์ผ๋ ๋์์ธ์ ํ ์ ์๋๋ก ๋์์ค๋ค.
๊ทธ๋ฆฌ๋ ์์คํ
๋์์ธ ๋ ์ด์์์ ๋์ผํ ๊ท์น์ ์ ์ฉํ์ฌ ์ผ๊ด๋ UI๋ฅผ ํ ์ ์๊ฒ ๋์์ค๋ค.
๋๋ฐ์ด์ค ํ๊ฒฝ์ ๋ฐ๋ผ ๋์์ธ ์์๋ฅผ ์ผ์ ํ ๊ฐ๊ฒฉ์ผ๋ก ๋ฐฐ์นํ๊ณ , ํฌ๊ธฐ๋ฅผ ๋ถ์ฌํ์ฌ ์ฒด๊ณ์ ์ธ ๋ฐฐ์ด์ ๋์์ค๋ค.
desktop, tablet, mobile ๋ฐ์ํ ๋์์ธ ์์ ์ ํด์๋ ๋์์ด ์ฉ์ดํด์ง๋ค.
๋์์ด๋์ ๊ฐ๋ฐ์์ ์ํํ ์ปค๋ฎค๋์ผ์ด์ ์ ๋์์ค๋ค.
4๊ฐ์ง ๊ธฐ๋ณธ ์์

(1) ์ปจํ ์ด๋(Container)
์ฝํ ์ธ ๋ฅผ ๊ฐ์ธ๊ณ ์๋ ๋๋น์ด๋ค.
mobile, tablet์ ๊ฒฝ์ฐ ๊ฐ๋ก ๋๋น๊ฐ ์ข๊ธฐ ๋๋ฌธ์ ์ฝํ ์ธ ์์ด ๋ง์ ๊ฒฝ์ฐ ๋ง์ง์ ์ค์ด๊ณ ์ปจํ ์ด๋ ๋๋น๋ฅผ ๋๊ฒ ์ค์ ํ๋ ๊ฒ์ ๊ถ์ฅํ๋ค.
desktop์ ๊ฐ๋ก ๋๋น๊ฐ ๋๊ธฐ ๋๋ฌธ์ ์์ ๋กญ๊ฒ ์ค์ ํ ์ ์๋ค.

(2) ์ปฌ๋ผ(Column)
๋จ์ ๋์ด๋ฅผ ์๋ฏธํ๋ค.
์ฝํ ์ธ ๋ฅผ ์ ๋ ฌํ๊ณ ๋ฐฐ์นํ๋ ์ญํ ์ ํ๋ค.
Mobile : 2~6 (4์ปฌ๋ผ์ ์ฃผ๋ก ์ฌ์ฉ)
Tablet : 6~12 (6~8์ปฌ๋ผ์ ์ฃผ๋ก ์ฌ์ฉ)
Desktop : 12~16 (12์ปฌ๋ผ์ ์ฃผ๋ก ์ฌ์ฉ)

(3) ๊ฑฐํฐ(Gutter)
์ปฌ๋ผ(column)๊ณผ ์ปฌ๋ผ(column) ์ฌ์ด์ ๊ฐ๊ฒฉ์ ์๋ฏธํ๋ค.
์ฝํ ์ธ ์ฌ์ด์ ์ฌ๋ฐฑ์ ์ ๊ณตํ์ฌ ์ฝํ ์ธ ์ ๊ฐ๋ ์ฑ์ ๋์ฌ์ฃผ์ด ์ฌ์ฉ์๊ฐ ์ฝํ ์ธ ๋ฅผ ์ฝ๊ฒ ์ดํดํ ์ ์๊ฒ ๋์์ค๋ค.
Mobile : 8~16
Tablet : 16~24
Desktop : 24~32

(4) ๋ง์ง(Margine)
ํ๋ฉด์ ์ข์ฐ ์ฌ๋ฐฑ์ ๋๋น๋ฅผ ๋ปํ๋ค.
ํํํด์ผ ํ๋ ์ฝํ ์ธ ์ ์๊ณผ ๋ ์ด์์์ ๋ง๊ฒ ๋ง์ง์ ์ค์ ํ๋ค.
๋ง์ง์ ๋ชจ๋ ํ์ด์ง์ ์ผ์ ํ๊ฒ ์ ์ฉํ๋ ๊ฒ์ ๊ถ์ฅํ๋ค.
Mobile : 16~20
Tablet : 20-36
Desktop : 24~36

(5) ๊ทธ๋ฆฌ๋ ์ค์
gridcalculator

๋ฐ์ํ ๋์์ธ
์ ํด๋์ ๋๋ฐ์ด์ค ํ๋ฉด ํฌ๊ธฐ์ ๋ง๊ฒ ๋์์ธ๊ณผ ๋ ์ด์์์ด ์๋์ผ๋ก ๋ณ๊ฒฝ๋๋ ๊ฒ์ด๋ค.
-๋ฐ์ํ ๋์์ธ์ด ์ค์ํ ์ด์
1. ๋ค์ํ ๋๋ฐ์ด์ค ์ฌ์ฉ
2. ์ผ๊ด๋ ๋์์ธ
3. ๋น์ฉ ํจ์จํ
4. ์ฝํ ์ธ ์ต์ ํ
-๋ธ๋ ์ดํฌ ํฌ์ธํธ
๋ฐ์ํ ๋์์ธ์์ ๋ ์ด์์์ด ๋ณํ๋๋ ์ง์ ์ ์๋ฏธํ๋ค.
๋ธ๋ ์ดํฌํฌ์ธํธ๋ฅผ ์ฌ์ฉํ๋ฉด ์ ํด๋์ ์ง์ ์์ ๋ ์ด์์์ ๋ณ๊ฒฝํ ์ ์๋ค.

-์ต์ ํ๋ ๊ทธ๋ฆฌ๋, 12์ปฌ๋ผ

์ค์ต
๊ทธ๋ฆฌ๋ ์์คํ ๋ง๋ค๊ธฐ


์์
์๋น์ค์ ๋ ์ด์์๊ณผ ๊ทธ๋ฆฌ๋ ๋ถ์ํ๊ธฐ


'๋ด์ผ๋ฐฐ์์บ ํ UXUI' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [๋ด์ผ๋ฐฐ์์บ ํ 10์ผ์ฐจ(2)] ์ํฐํด (1) | 2025.04.25 |
|---|---|
| [๋ด์ผ๋ฐฐ์์บ ํ 10์ผ์ฐจ] ๋์์ธ ์นดํ (0) | 2025.04.25 |
| [๋ด์ผ๋ฐฐ์์บ ํ 9์ผ์ฐจ(2)] ์ํฐํด (0) | 2025.04.24 |
| [๋ด์ผ๋ฐฐ์์บ ํ 9์ผ์ฐจ] ๋์์ธ ์นดํ (0) | 2025.04.24 |
| [๋ด์ผ๋ฐฐ์์บ ํ 8์ผ์ฐจ(3)] UI ๋์์ธ์ ๋ชจ๋ ๊ฒ ์๊ฐ (0) | 2025.04.23 |