์ฑํฐ1_ํผ๊ทธ๋ง ํ์ฉ ์ฌํ_1
1. ๋ค์ํ ํ๊ฒฝ์ ๋ํ UI ์ฐจ์ด ์ดํด
* ์น๊ณผ ์ฑ์ ํน์ฑ

* ๋ํ์ ์ธ ์น๊ณผ ์ฑ์ UI์ฐจ์ด
๐ UI๋ ๊ธฐ๋ฅ๊ณผ ๋ชฉ์ ์ด ์ค์ํ๋ค. ์ด๋ฐ UI์ ์ฐจ์ด๊ฐ ์๋ค๋ ๊ฑด ๋ชฉ์ ์ ์ฐจ์ด๊ฐ ์๋ค๋ ๋ป์ด๊ณ , ๋ชฉ์ ์ ์ฐจ์ด๊ฐ ์๋ค๋ฉด UX์์๋ ์ฐจ์ด๊ฐ ์๊ธด๋ค.
- ํ์ด์ง ์ด๋
- ์ฑ์ ์์๋ก ์ฃผ์๋ฅผ ์
๋ ฅํด์ ์ด๋ํ ์ ์๋ค.
- ๋ฐ๋ฉด ์น์ ์ฃผ์์ฐฝ์์ URL์ ์
๋ ฅํ๋ฉด ์ด๋๋ ์ ๊ทผํ ์ ์๋ค.
- ๋ค๋ก๊ฐ๊ธฐ
- ์ฑ์ ๊ฒฝ์ฐ, ์ผ๋ฐ์ ์ผ๋ก ํ๋ฉด ์๋ด์ ์์ด์ฝ ๋ฑ ๋ฒํผ์ ๋๋ฌ ํ๋ฉด์ ์ด๋ํ๋ค.
- ๋ฐ๋ฉด, ์น์ ๊ฒฝ์ฐ ๋ธ๋ผ์ฐ์ ์์ฒด ๊ธฐ๋ฅ์ ํตํด ์ด์ ํ๋ฉด์ผ๋ก ๋์๊ฐ๋ ๊ฒ์ด ์์ ๋กญ๋ค.
- ์ฃผ์ ๋ฉ๋ด ์ด๋
- ๋ชจ๋ฐ์ผ ์น์์ ์ผ๋ฐ์ ์ผ๋ก ํ๋ฉด ์๋จ์ ์ฃผ์ ๋ฉ๋ด๋ก ์ด๋ํ ์ ์๋ UI๋ฅผ ๋ฐฐ์นํ๋ค.
- ์ฑ์์ ํ๋ฉด ํ๋จ์ ๊ณ ์ ๋ ํญ์ ๋ฐฐ์นํด ์ฃผ์ ๋ฉ๋ด๋ก ์ด๋ํ ์ ์๋๋ก ํ๋ค.
- ๋ UI๋ ๋์ผํ ๋ชฉ์ ๊ณผ ๊ธฐ๋ฅ์ ๊ฐ์ง๊ณ ์์ง๋ง, ์น๊ณผ ์ฑ์์ ๋ค๋ฅด๊ฒ ๋ํ๋๋ ๋ํ์ ์ธ UI
- ์ต๊ทผ ๋ชจ๋ฐ์ผ ์น๋ค๋ ์ฑ์ฒ๋ผ ํ๋ฉด ํ๋จ์ ๊ณ ์ ๋ ๋ฉ๋ด๋ฅผ ๋์ ๊ฑธ๋ก ๋ฐ๋๊ณ ์๋ค.
- ๋ฐํ
์ํธ (Bottom Sheet)
๐ ํ๋ฉด ํ๋จ์ ๊ณ ์ ๋์ด ํ์ฌ ํ๋ฉด๊ณผ ๊ด๋ จ๋ ์ต์
์ด๋ ๋ฉ๋ด๋ฅผ ์ ๊ณตํ๋ UI.
- ๋ฐํ
์ํธ์ ๊ฒฝ์ฐ ํ๋ฉด์ ํ๋จ์ ๊ณ ์ ๋์ด ์๋ค.
- ์ฑ์์๋ ๋ฐํ
์ํธ๋ฅผ ๋ค์ํ ์ฉ๋๋ก ํ์ฉํ์ง๋ง, ๋ชจ๋ฐ์ผ ์น์์๋ ์ฌ์ฉํ๊ธฐ ๊น๋ค๋กญ๋ค.
- ์ฑ์์๋ ๋ฐํ
์ํธ๋ฅผ ๋๋๊ทธํด์ ๋ซ์ ์ ์์ง๋ง, ๋ชจ๋ฐ์ผ ์น์์๋ ๋๋๊ทธํด์ ๋ซ๊ธฐ ์ด๋ ต๋ค.
- ์น ๋ธ๋ผ์ฐ์ ์์ ์๋๋ก ํ๋ฉด์ ๋๋๊ทธ ํ๋ฉด ์๋ก๊ณ ์นจ์ด ๋ ๊ฐ๋ฅ์ฑ์ด ์๋ค.
* OS๋ณ ์ฐจ์ด
- OS์ ๋ฐ๋ผ UI๋ฅผ ๋ค๋ฅด๊ฒ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๊ฐ ์์ด์.
- ์์ดํฐ์ ๊ฒฝ์ฐ, ์ ํ ๋ก๊ทธ์ธ์ด ๋ค๋ฅธ ๋ก๊ทธ์ธ ์๋จ์ ๋นํด ๋ ์ค์ํ๊ฒ ๋ณด์ด์ง ์๋๋ก ํด์ผ ํ๋ค.
- ๋ํ ์์
๋ก๊ทธ์ธ์ด ์๋ ๊ฒฝ์ฐ, ์ ํ ๋ก๊ทธ์ธ๋ ๋ก๊ทธ์ธ ์๋จ์ ๋ฐ๋์ ํฌํจ์์ผ์ผ ํ๋ค.
- iOS ํ ์ธ๋์ผ์ดํฐ
- ํ ์ธ๋๊ฒ์ดํฐ๊ฐ ์๋ ๊ฒฝ์ฐ, ํ๋จ์ ๊ณ ์ ๋ UI๋ค์ ์ ๊ฒฝ ์จ์ผ ํ๋ค.
- ์๋๋ก์ด๋ ๋ค๋น๊ฒ์ด์
๋ฐ์ ๋ค๋ก๊ฐ๊ธฐ
- ์๋๋ก์ด๋์ ๊ฒฝ์ฐ ๋ค๋ก๊ฐ๊ธฐ ๋ฒํผ์ด ๊ธฐ๋ณธ UI๋ก ์ ๊ณต๋๋ค.
- ์๋๋ก์ด๋์์ ์ฑ์ ์ฌ์ฉํ๋ค๊ฐ ๋ค๋ก ๊ฐ๊ธฐ๋ฅผ ๋๋ฅด๋ ๊ฒฝ์ฐ, 2๊ฐ์ง์ ๊ฒฝ์ฐ๊ฐ ์กด์ฌํ๋ค.
- ์ด์ ํ๋ฉด์ผ๋ก ๊ฐ๊ธฐ (History Back) : ํ์ฌ ํ๋ฉด ์ ์ ๋ฐฉ๋ฌธํ ํ๋ฉด์ผ๋ก ๋ค์ ๋์๊ฐ๋ ๊ฒ์ ๋ปํ๋ค.
- ์์ ํ๋ฉด์ผ๋ก ๊ฐ๊ธฐ (Hierarchy Back) : ํ์ฌ ํ๋ฉด๋ณด๋ค ๋ ์์์ ์๋ ํ๋ฉด์ผ๋ก ์ฌ๋ผ๊ฐ๋ ๊ฒ์ ๋ปํ๋ค.
* ์ ๋ฆฌ
๐ UI์ ์ฐจ์ด๋ฅผ ๋๊ธฐ ์ํด์ UI๋ฅผ ์ฌ์ฉํ๋ ๋ชฉ์ ๊ณผ ์ํฉ์ ๋ชจ๋ ๊ณ ๋ คํด์ ๋ค๋ฅด๊ฒ ํด์ผ ํ๋ค.
- UI๋ ์น๊ณผ ์ฑ์ ์ฐจ์ด์์ ๋ง์ด ๋ํ๋จ.
- ์์ดํฐ๊ณผ ์๋๋ก์ด๋์ฒ๋ผ OS๊ฐ ๋ค๋ฅธ ๊ฒฝ์ฐ์๋ ์กฐ๊ธ์ฉ ๋ค๋ฅผ ์ ์๋ค.
- ๊ฐ์ ์์ดํฐ์ด๋ผ๋, ํ ์ธ๋์ผ์ดํฐ๋๋ฌธ์ ์ฐจ์ด๊ฐ ์๊ธธ ์ ์๋ค.
- ์ฐจ์ด์ ๋ฐ๋ฅธ UI๋์์ธ์ ์ ๋์ ์ธ ๊ธฐ์ค์ด ์๋๊ธฐ ๋๋ฌธ์, ์ฌ์ฉ์ฑ์ ๊ณ ๋ คํด์ ์ ํํด์ผ ํ๋ค.
2. ๋ถ๊ธฐ์ ๊ณผ ๊ทธ๋ฆฌ๋
* ๋ถ๊ธฐ์ (Breakpoint)
- ๋ถ๊ธฐ์ ์ ๊ฐ๋
- ๋์คํ๋ ์ด์ ํด์๋์ ๋ฐ๋ผ ๊ฐ๊ฐ ๋ค๋ฅธ ํ๋ฉด์ ๋ณด์ฌ์ฃผ๊ธฐ ์ํ ๊ธฐ์ค์ ์ ๋ถ๊ธฐ์ ์ด๋ผ๊ณ ํ๋ค.
- ๋ถ๊ธฐ์ ์ด ์ค์ํ ์ด์
- ์น์ฌ์ดํธ๋ฅผ ๋ฐฉ๋ฌธํ ๋ ์ฃผ๋ก ์ค๋งํธํฐ์ ์น๋ธ๋ผ์ฐ์ ๋ฅผ ์ฌ์ฉํ์ง๋ง, ํ๋ธ๋ฆฟ๋ ์๊ณ , ํ
์คํฌํฑ์ด๋ ๋
ธํธ๋ถ์ผ๋ก๋ ์น์ฌ์ดํธ๋ฅผ ๋ฐฉ๋ฌธํ๋ค.
- ์ด๋, ์น์ฌ์ดํธ๋ ์ฐ๋ฆฌ๊ฐ ์ฐ๋ ๋๋ฐ์ด์ค ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ค๋ฅธ ๋ค์ฆ ๋์์ธ์ ๋ณด์ฌ์ค๋ค.
- ์ฆ, ์ฐ๋ฆฌ๋ ์ฌ์ฉ์์ ๋๋ฐ์ด์ค ํ๋ฉด ํฌ๊ธฐ๋ฅผ ๊ณ ๋ คํด์ ๋์์ธ์ ๋๋ ์ ์์ด์ผ ํ๋ค.
- ๊ทธ ๋๋๋ ๊ธฐ์ค์ ์ด ๋ฐ๋ก ๋ถ๊ธฐ์ ์ด๋ค.
- ์ผ๋ฐ์ ์ธ ๋ถ๊ธฐ์ ์ ํ๊ธฐ
- ์ผ๋ฐ์ ์ผ๋ก ๋ฐ์คํฌํ, ํ๋ธ๋ฆฟ, ๋ชจ๋ฐ์ผ 3๊ฐ์ง ๊ธฐ์ค์ ์ ์ธ์ด๋ค.
- ๋ถ๊ธฐ์ ์ ๊ฐ๋ก ๊ธธ์ด๋ฅผ ๊ธฐ์ค์ผ๋ก ํฉ๋๋ค.
- ๊ฐ๋ก๊ฐ 1024px ์ด์์ด๋ผ๋ฉด ๋ฐ์คํฌํ ํ๋ฉด
- ๊ฐ๋ก๊ฐ 768px ์ด์, 1024px ๋ฏธ๋ง์ด๋ผ๋ฉด ํ๋ธ๋ฆฟ ํ๋ฉด
- ๊ฐ๋ก๊ฐ 768px ๋ฏธ๋ง์ด๋ผ๋ฉด ๋ชจ๋ฐ์ผ ํ๋ฉด
- ๋ชจ๋ฐ์ผ ์ต์ ๊ฐ๋ก์ฌ์ด์ฆ๋ฅผ ์ ํด์ฃผ๋ ๊ฒ์ด ์ข๋ค. ์๋ฌด๋ฆฌ ๋ชจ๋ฐ์ผ ํ๋ฉด์ด ์๋ค๊ณ ํด๋ ๋ ์ด์ ์์์ง์ง ์๋ ์ง์ ๋ฐ ์์ด์ผ ๋ ์ด์์์ด ๊นจ์ง๋ ๊ฑธ ๋ง์ ์ ์๋ค.
- ๋ถ๊ธฐ์ ์ ์ ํ ๋ ์๊ฐํ๋ฉด ์ข์ ๊ฒ
- ํ๋ธ๋ฆฟ ํด์๋ ๋์
- ํ๋ธ๋ฆฟ์ ์๋ตํ๊ฑฐ๋, ํ๋ธ๋ฆฟ ํด์๋ ์ ์ฒด๋ฅผ ๋ชจ๋ฐ์ผ ๋ถ๊ธฐ์ ์ผ๋ก ํตํฉํ๋ ๊ฒฝ์ฐ๋ ๋ง๋ค.
- ํ๋ธ๋ฆฟ ์ฌ์ฉ์๊ฐ ๋ฐ์คํฌํฑ๊ณผ ๋ชจ๋ฐ์ผ์ ๋นํ๋ฉด ๋งค์ฐ ์ ๊ธฐ ๋๋ฌธ์ด๋ค.
- ๋ํ ๋์์ธ๊ณผ ๊ฐ๋ฐํด์ผ ํ๋ ํ๋ฉด ์ธํธ๊ฐ 1๊ฐ์ฉ ๋ ๋์ด๋๊ธฐ ๋๋ฌธ์ด๋ค.
- ํ์ง๋ง ์จ๋ผ์ธ ๊ฐ์๋ ๊ต์ก์ ํ๋ธ๋ฆฟ์ผ๋ก ๋ง์ด ํ๊ธฐ ๋๋ฌธ์, ์ด๋ฐ ๊ฒฝ์ฐ์๋ ํ๋ธ๋ฆฟ ํด์๋๋ ์ ๊ฒฝ ์จ์ผ ํ๋ค.
- ์ผ๋ฐ์ ์ธ ํด์๋ ๋ง๊ณ ๋ค๋ฅธ ํด์๋๋ฅผ ์ ํ๊ณ ์ถ๋ค๋ฉด?
* ๊ทธ๋ฆฌ๋(Grid)
- ๊ทธ๋ฆฌ๋์ ๊ฐ๋
- ๊ทธ๋ฆฌ๋๋ ํ๋ฉด์ ๋์์ธ์ ๋ฐฐ์นํ๋ ๊ฐ์ด๋๋ผ์ธ์ด๋ค.
- ์ผ๋ฐ์ ์ผ๋ก๋ ์ธ๋ก ๋ฐฉํฅ์ ๊ธฐ๋ฅ๋ค์ ์ข์ฐ๋ก ์ธ์ฐ๋๋ฐ, ๊ฐ๋ก ์ค์ ์ถ๊ฐ๋ก ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๋ ์๋ค.
- ๋์์ธ์ ๋ฐฐ์นํ ๊ธฐ์ค์ ์ด ๋๋ ๊ฐ์์ ์ ์ ๊ธ๊ณ , ๊ทธ ์ ์ ๋ง์ถฐ์ ๋ ์ด์์์ ์ง๊ฒ ๋๋ค.
- ๊ทธ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ๋ ์ด์
๐ ๋ฐ์ํ ์น์ด ๋ถ๊ธฐ์ ๋ง๋ค ๋์์ธ์ ๋ฐ๊ฟ ๋, ๊ทธ๋ฆฌ๋๋ฅผ ๋ฐ๋ผ ์ ๋ ฌ๋๋ค.
- ์๋ ๊ทธ๋ฆฌ๋๋ ํธ์ง ๋์์ธ์์ ์ฐ๋ ์ฉ์ด์ธ๋ฐ, ์ข
์ด์ ๊ธ๊ณผ ๊ทธ๋ฆผ์ ๋ฐฐ์นํ๋ ๊ธฐ์ค์ ์ด๋ค.
- ๊ทธ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ๋ ์ด์ ๋ ๊ธ๊ณผ ๊ทธ๋ฆผ๋ค์ ๊ท ํ๊ฐ ์๊ฒ ๋ฐฐ์นํ๊ธฐ ์ํด์์ด๋ค.
- ๋ํ ์ฃผ๋ชฉํด์ ์ฝ์ด์ผ ํ๋ ๋ถ๋ถ์ ๊ฐ์กฐํ๊ณ , ์ ๋นํ ๊ฐ๊ฒฉ์ ๋ง๋ค์ด ๋ ์ ์ฝํ๊ฒ ํ๊ธฐ๋ ํ๋ ๋ฑ ์ ์ฒด์ ์ธ ์์ฑ๋๋ฅผ ์ฌ๋ฆฌ๊ธฐ ์ํด์์ด๋ค.
- ์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๋ ๊ทธ๋ฆฌ๋์ ๊ฐ๋
์ ์ข
์ด ๋ฌธ์๊ฐ ๋์งํธ ๋ฌธ์, ์ฆ ์นํ์ด์ง๋ก ๋ฐ๋์์ ๋ฟ์ด๋ค.
- ์น์์ ๊ทธ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ๋ ์ด์ ์ญ์ ๊ท ํ๊ฐ๊ณผ ์์ฑ๋, ์ผ๊ด์ฑ์ ์ํด์์ด๋ค.
- ๊ทธ๋ฆฌ๋๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ
- ์ผ๋ฐ์ ์ผ๋ก ๋ฐ์คํฌํฑ ํ๋ฉด์ ๊ธฐ์ค์ผ๋ก ๊ธฐ๋ฅ์ 12๊ฐ๋ฅผ ์ฌ์ฉํ๋ค. 12๊ฐ๋ฅผ ์ฌ์ฉํ๋ ๋ ์ด์์์ 12์นผ๋ผ ๊ทธ๋ฆฌ๋(12 Column Grid)๋ผ๊ณ ํ๋ค.
- ๊ทธ๋ฆฌ๋๋ ์์น์ด ์๋ ๊ฐ์ด๋๋ผ์ธ์ด๊ธฐ ๋๋ฌธ์ ๊ผญ ์์ด์ผ ํ๋ ๊ฑด ์๋์ง๋ง, ๋ด ๋์์ธ์ด ์ด๋๊ฐ ๋ชจ๋ฅด๊ฒ ์ด์ํ๊ณ ์ ๋ ฌ์ด ๋์ง ์๋ ๋๋์ด๋ผ๋ฉด ๊ทธ๋ฆฌ๋๋ฅผ ์ต๋ํ ํ์ฉํ์.
- ๊ทธ๋ฆฌ๋์ ๊ตฌ์กฐ
- ์นผ๋ผ์ ์ ๋(Unit)๊ณผ ๊ฑฐํฐ(Gutter)๋ก ์ด๋ฃจ์ด์ ธ ์์ด์.
- ์ ๋์ ์ค์ ์ฝํ
์ธ ๋ฅผ ์ ๋ ฌํ๋ ๊ธฐ์ค์ ์ด๊ณ , ๊ฑฐํฐ๋ ์ ๋๊ณผ ์ ๋ ์ฌ์ด์ ์ฌ๋ฐฑ์ด์์.
- ํ ๊ฐ์ ์นผ๋ผ์ ์ ๋ 1๊ฐ์ ์์ชฝ์ ๊ฑฐํฐ ์ ๋ฐ์ฉ์ ํฉ์น ํฌ๊ธฐ์์.
- ๋งจ ์๋์ ์นผ๋ผ ๋์๋ ๊ฑฐํฐ ์ ๋ฐ์ด ๋จ๋๋ฐ, ์ด๊ฑด ์ข์ฐ ์ฌ๋ฐฑ์ผ๋ก ์ฌ์ฉํด์.
- ์์ฃผ ์ฌ์ฉํ๋ ๊ทธ๋ฆฌ๋ ์์
- 960 (์ ๋ ๋๋น:60 / ๊ฑฐํฐ ๋๋น: 20)
- 1200 (์ ๋ ๋๋น:76 / ๊ฑฐํฐ ๋๋น: 24)
- 1440 (์ ๋ ๋๋น:96 / ๊ฑฐํฐ ๋๋น: 24)
์ ๋ณด๋ค ์ง๋๊ฐ ๋๋ฌด ๋น ๋ฅด์ ์...์ ๋ ๋นจ๋ฆฌ ๋ฐ๋ผ๊ฐ๋๋ก ํ๊ฒ ์ต๋๋ค! :) ์ค๋๋ ์๊ณ ํ์ จ์ด์!