๐ 2021๋ 11์ 3์ฃผ TOP3
- ๋ ๋์ ๊ณ์ธต ๊ตฌ์กฐ(UI)๋ฅผ ์ํ ๊ณต๋ฐฑ๊ณผ ํ ์คํธ ์ฌ์ฉ ์ดํด
- ์์ฝ๋์ธ ๋์์ธ: ๋ชจ๋ฒ ์ฌ๋ก
- UI/UX ๋์์ธ: ๊ทธ๋ฆฌ๋ ์ค์
๋ ๋์ ๊ณ์ธต ๊ตฌ์กฐ(UI)๋ฅผ ์ํ ๊ณต๋ฐฑ๊ณผ ํ ์คํธ ์ฌ์ฉ ์ดํด
๋์์ธ์ ์จ์ ๋ถ์ด๋ฃ๋ ๊ฒ์ UI ๋์์ธ์์ ํจ์จ์ฑ์ ์ํ ์ผ์ด ๋์๊ณ , ๊ทธ์ ๋น๋กํ์ฌ UI์ ์จ ์ฌ๋ ๊ณต๊ฐ์ ์ถ๊ฐํ๋ ๊ฒ์ ์ค๋ช
๊ฐ๋ฅํ ๋ฐฉ์์ผ๋ก ์ฌ์ฉ์ฑ์ ๋์์ด ๋ฉ๋๋ค. ๋ง์กฑ์ค๋ฌ์ด ์ฌ๋ฐฑ์ ๊ฐ๋ ๊ฒ์ ๋์์ธ์ด UI์ ๊ฐ์ฅ ๋์ ๋๋ ์์๋ฅผ ๊ฐ์กฐํ ์ ์๋๋ก ํ๊ณ ์ ์ฒด ๋์์ธ์ ์ฌ์ฉ์์๊ฒ ์๊ฐ์ ์ผ๋ก ์ดํํ ์ ์์ต๋๋ค.
๊ณต๋ฐฑ์ UI์์ ์์ฒด์ ์ผ๋ก ์ ๊ณตํ๋ ๊ฐ๊ฒฉ ์์์ด๊ณ ๊ณต๋ฐฑ์ UI ์์ ์์ฒด๋ก ๋งค์ฐ ์ค์ํ ์์์
๋๋ค. ํ๋ก๋ํธ์ ์ธ๊ด๊ณผ ์ฌ์ฉ์ฑ์ ๋ง์น ์ ์๋ ๋ฅ๋ ฅ์ด ์์ผ๋ฉฐ, ์ ๋๋ก ํ์ฉํ์ง ์์ผ๋ฉด ํ๋ก๋ํธ์ UI๋ฅผ ๋ต๋ตํ๊ณ ํผ๋์ค๋ฝ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค. ์ฆ, ๊ณต๋ฐฑ์ UI์์ ์์์ ๋ถ์ฌํ๋ ์จ์ฌ๋ ๊ณต๊ฐ์
๋๋ค.
๊ณต๋ฐฑ ์์์ ์์๋ก๋ ํจ๋ฉ, ํ
๋๋ฆฌ(margin, ์ฌ๋ฐฑ)์ผ ์ ์์ต๋๋ค. ๊ณต๋ฐฑ์ UI์์ ๋ ๋ฒ์งธ๋ก ๋ง์ด ์ฌ์ฉ๋๋ ๋์์ธ ์์์ด๊ณ ํ
์คํธ๋ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๋ ์์์
๋๋ค. UI์ ๋ชฉํ๋ฅผ ๋ง์น์ง ์์ผ๋ ค๋ฉด ๊ณต๋ฐฑ์ ํจ๊ป ์ฌ์ฉํ๊ณ ๋
๋ฆฝ์ ์ผ๋ก ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
์ด ์์ ์์ ๊ณต๋ฐฑ์ด ๋ฌด์์ ์๋ฏธํ๊ณ ์ผ๋ฐ์ ์ผ๋ก ํ๋ก๋ํธ์ UI์ ๋ฌด์์ ํ ์ ์๋์ง ์ดํดํ๊ฒ ๋์์ต๋๋ค. ์ด ๊ธฐ์ฌ์์ ๋ฐ๋ผ์ผ ํ ๋ช ๊ฐ์ง ์ง์นจ์ ์ฐพ์ ์ ์์ต๋๋ค. ๊ณ์ ์ฝ์ด๋ณด์ธ์.
๊ณต๋ฐฑ์ผ๋ก ์์
ํ๋ ๊ฐ์ฅ ์ฌ์ด ๋ฐฉ๋ฒ์ ๋์์ธ์ ์ด๊ธฐ ๋จ๊ณ์์ ๊ณต๋ฐฑ์ ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ ๊ฒ์
๋๋ค. ๋๋ ์ค์ ํฌ๊ธฐ๋ฅผ ๋๋ฆฌ๋ ๊ฒ๋ณด๋ค ์ค์ด๋ ๊ฒ์ด ์ผ๋ง๋ ์ฌ์ด์ง ์์ํ ์ ์์ต๋๋ค. UI์๋ ๋์ผํ๊ฒ ์ ์ฉ๋ฉ๋๋ค. ์ถ๊ฐํ๋ ๊ฒ๋ณด๋ค ๊ณต๋ฐฑ์ ์ ๊ฑฐํ๋ ๊ฒ์ด ํจ์ฌ ์ฌ์ธ ๊ฒ์
๋๋ค. ๊ทธ๋ฌ๋ฉด ๋์์ธ์ ๋ญ๊ฐ ๋ฌธ์ ๊ฐ ์๋ค๋ ๋๋์ด ๋ค ๊ฒ์
๋๋ค.
์์ UI๋ฅผ ๋ณด๋ฉด(์ด๋ฏธ์ง ์ฐธ๊ณ ) ์ด๋ฏธ ๊ณต๊ฐ ์์๊ฐ ์๋ก ์ฃผ๊ณ ๋ฐ๋ ์์
์ ๋ํ ๋๋์ด ์์ต๋๋ค. ๋ฌธ์ ๋ ๊ทธ๋๋ก ๋์ค ๊ฑด๊ฐ์? ์๋๋ฉด ์ฌ๋ฐฑ์ ์กฐ์ ํ ๊ฒ์ธ๊ฐ?
๋น์ ์ ๋ํ ์์ ๊ฒ๋ณด๋ค(์ด๋ฏธ์ง ์ฐธ๊ณ ) ๋ ๋์ ์ผ์ ํ ์ ์์ต๋๋ค. ์์ ์ ํ์
ํ๊ธฐ ์ํ ๊ฒ์ผ๋ก, ๊ณต๋ฐฑ์ ํฐ์น ๋์, ์ฌ์ฉ ์ฉ์ด์ฑ, ์ฌ์ฉ์๊ฐ ์๋ํ ์์
์ ์๋ฃํ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ๊ณ ๋ คํ์ฌ ํ๋ก๋ํธ UI์ ์ ๋ฐ์ ์ธ ์ฌ์ฉ์ฑ์ ๋์์ด ๋ฉ๋๋ค.
๊ณต๋ฐฑ๊ณผ ํ
์คํธ๋ฅผ ์ฌ์ฉํ๋ ๋์ ์์ฌ ๊ฒฐ์ ์ ์ฝ๊ฒ ํ๋ ๋ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ ๊ฐ์ด๋๋ก ์ฌ์ฉํ ์์คํ
์ ๋ง๋ จํ๋ ๊ฒ์
๋๋ค. ์ฌ๊ธฐ์๋ ์ด๋ฏธ ๋ด๋ฆฐ ๊ฒฐ์ ์ ๊ธฐ๋กํ๊ณ ํฅํ ๊ฒฐ์ ์ ๋ด๋ฆด ๋๋ ์ฌ์ฉํ ์ ์๋๋ก ํฉ๋๋ค. ํญ์ ๋ฏธ๋ฆฌ ๊ฒฐ์ ํด์๋ ์ ๋ฉ๋๋ค. ์ธํฐํ์ด์ค์์ ์์
ํ๋ ๋์ ๊ฒฐ์ ์ ๋ด๋ ค์ผ ํฉ๋๋ค.
์๋ฅผ ๋ค์ด, 4px์ ๋ฐฐ์์ ๊ฐ์ด ๊ธฐ๋ณธ ๊ฐ์ ์ป๋ ๊ฒ๋ถํฐ ์์ํ ์ ์์ต๋๋ค. ๊ทธ๋ผ์๋ ๋ถ๊ตฌํ๊ณ , ์์ ์ ํฌ๊ฒ ์ ํํด์๋ ์ ๋ฉ๋๋ค. ์ฆ, 4px์ ๋ฐฐ์๊ฐ ์ด๋ ์์ ์์ UI์ ์ ํฉํ์ง ์์ ๋ ๋ค๋ฅธ ๊ฒฐ์ ์ ๋ด๋ฆด ์ ์์ด์ผ ํฉ๋๋ค. ํ๋๋ ๋์์ธํ ๋ ์๊ฒฉํ๊ฒ ๋ง๋ค๋ ค๋ ๊ฒ์ด ์๋๋ผ ํ์ค์ ์ดํดํ๊ณ ํ์ํ ๋ ์ต์ ์ ํ๋จ์ ๋ด๋ฆฌ๊ธฐ๋ง ํ๋ฉด ๋ฉ๋๋ค.
๋ํ ์์คํ
์ด ๊ฐ์ถฐ์ ธ ์๋ค๊ณ ํด์ ๋ชจ๋ ๊ฒ์ ๋์ผํ ๊ฐ๊ฒฉ์ ์ฌ์ฉํด์ผ ํ๋ ๊ฒ์ ์๋๋ฏ๋ก ์ฌ์ฉ์๊ฐ ๋ชจ๋ ์ง์ ์์ ์ด๋์ ์ํ๋์ง ์ธ์งํ ์ ์์ด์ผ ํ๋ฉฐ, ๋ชจํธํ ๊ฐ๊ฒฉ์ ์ต๋ํ ํผํด์ผ ํฉ๋๋ค. ์ด๊ฒ์ ๋์์ธ์ ๋ชจ๋ ์์๊ฐ ์ํ๋ ์์น๋ฅผ ๋ช
์์ ์ผ๋ก ํ์ํ๋ ํ
์คํธ ๋ค์ฌ์ฐ๊ธฐ(์ผ๋ถ๋ ์ค์ฒฉ์ด๋ผ๊ณ ํจ)์ ์ ์๋ํฉ๋๋ค. ์ด๋ ์ฌ์ฉ์ฑ๊ณผ ์์
์๋์ ํฐ ๋์์ด ๋ ๊ฒ์
๋๋ค.
..
๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
์์ฝ๋์ธ ๋์์ธ: ๋ชจ๋ฒ ์ฌ๋ก
์ถ์์ ํ์ฅ ์ํ. ์คํ์ผ๋ง๊ณผ ์์ ์ฌ์ฉ๋ฒ. ์์ฝ๋์ธ ์ํ, ํ
ํ๋ฆฟ ๊ทธ๋ฆฌ๊ณ UX ์ผ์ด์ค๋ก ์ํํ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
์ ๋ ์จ๋ผ์ธ ๊ธฐ์
๊ฐ์ด์ UI ๋์์ด๋์
๋๋ค. Figma์ฉ UI ํคํธ๋ฅผ ๋ง๋ค๊ธฐ ์์ํ์ง โโ3๋
์ด ๋์์ต๋๋ค. Setproduct.com์ ๊ทธ๋ ๊ฒ ์ค๋ฆฝ๋์์ต๋๋ค. ์ด ์น์ฌ์ดํธ์ ์ฌ๋ช
์ ํ์ฌ์ ํ๋ฆฌ๋์๊ฐ ํ๋ก๋ํธ๋ฅผ ํจ์ฌ ๋ ๋นจ๋ฆฌ ์ถ์ํ์ฌ ๋์์ธ์ ๋๋ ๋น์ฉ๊ณผ ์๊ฐ์ ์ ์ฝํ ์ ์๋๋ก ๋๋ ๊ฒ์
๋๋ค.
์ ๋ 20๋
๋๊ฒ ๊ทธ๋ํฝ ๋์์ด๋๋ก ์ผํด ์์ต๋๋ค. ์ง๋ ๋ช ๋
๋์ ์ ๋ ๋งค์ผ ์์ฒ ๊ฐ์ ๋ค์ํ ๊ตฌ์ฑ ์์, ํ๋ฉด, ์ฑ์ ์ดํด๋ณด์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ ๋ ์ฑ๊ณผ ๊ทธ ๊ตฌ์ฑ ์์, ํ
ํ๋ฆฟ ๋ฑ์ ๋์์ธํ๋ ๋ฐ ๋ํ ํฌ๊ด์ ์ธ ์ฑ
์ ๋ง๋๋ ๋ชฉํ๊ฐ ์์๊ธฐ ๋๋ฌธ์ ์ด ์์
์ ์ํํ์ต๋๋ค.
์ต๊ทผ์ ์๋ฐํ์ ๋ํ ์ฒซ ๋ฒ์งธ ์ฅ์ด ์ถํ๋ ๋๋ถ์ ์ด ๊ณผ์ ์ ๋๋์ด ์์ํ ์ ์๊ฒ ๋์ด ๋งค์ฐ ๊ธฐ์ฉ๋๋ค. ๋ค์ํ ์์
๋คํธ์ํฌ์์ ๊ธ์ ์ ์ธ ํผ๋๋ฐฑ์ ๋ฐ๋ ๊ฒ์ด ์ข์์ต๋๋ค. ์ ๊ธฐ์ฌ๋ ์ฌ๋ฌ ์ธ๊ธฐ ์๋ ๋์์ธ ๋ฆฌ์์ค์์ ์ธ๊ธ๋์์ต๋๋ค. ์ด๊ฒ์ ์ ๊ฐ ์์ํ ์ผ์ ๊ณ์ํ ๋๊ธฐ๋ฅผ ๋ถ์ฌํฉ๋๋ค.
์ ๋ ๋ํ ๋
์๋ค์๊ฒ ์ฝํ
์ธ ์ ํํ์ ๋ฐ์๋์ง ๋ฌป๋ ์ค๋ฌธ์กฐ์ฌ๋ฅผ ๋ง๋ค๊ฒ ๋ค๋ ์์ด๋์ด๋ฅผ ์ป์์ต๋๋ค. ์ฌ์ ๊ตฌ์ถ๋ ์ค๋ฌธ์กฐ์ฌ ์์ ฏ์ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ๊ฒฐ๊ณผ๋ฅผ ์ฝ๊ฒ ์ถ์ ํ ์ ์์์ต๋๋ค.
๊ฒฐ๊ณผ๋ ์๋นํ ๊ณ ๋ฌด์ ์ด์์ต๋๋ค! ์ต์ 44๋ช
์ ์ฌ์ฉ์๊ฐ ๊ธฐ์ฌ์ ๊ด์ฌ์ ๊ฐ๊ณ ์์ ํ ์ฝ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ฌด์จ ์ผ์ด ์ผ์ด๋๊ณ ์๋์ง ์ ์ดํดํ์ง ๋ชปํ๋ ์ ์ด๋ ๋ ๋ช
์ ์ฌ์ฉ์๊ฐ์์์ต๋๋ค ๐คฃ
์, ์ด์ ๊ธฐ์ฌ์ ๋ด์ฉ์ผ๋ก ๋์ด๊ฐ๊ฒ ์ต๋๋ค. ์ฌ๊ธฐ์ ๊ณต๊ฐํ UI ์ธ๋ถ ์ ๋ณด๊ฐ ๋ง์ด ์์ต๋๋ค.
๐ ์์ํด๋ณด๊ฒ ์ต๋๋ค!
์์ฝ๋์ธ์ด๋ ๋ฌด์์
๋๊น?
์์ฝ๋์ธ(ํ์ฅ ํจ๋์ด๋ผ๊ณ ๋ ํจ)์ ์ธ๋ก๋ก ์์ด๊ณ ์ถ๊ฐ ๊ด๋ จ ์ฝํ
์ธ ๋ฅผ ํ์ํ๊ฑฐ๋ ์จ๊ธฐ๊ธฐ ์ํด ํ์ฅ/์ถ์ํ ์ ์๋ ์ต์
๋ชฉ๋ก์
๋๋ค.
์ฝํ
์ธ
1. ์์
2. ์ปจํ
์ด๋(container)์ ์คํ์ผ
3. ์ฌ์ฉ์ ๊ฒฝํ๊ณผ ์ฌ์ฉ์ฑ
4. ์ฌ๋ก ๐ฑ/๐ป
1.์์
1. ์์
์ํ(States)
์์ฝ๋์ธ ๊ตฌ์ฑ ์์์ ๊ธฐ๋ณธ ์ํ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๐ฝ ์์(Collapsed)
๐ผ ํ์ฅ(expanded)
๐ฑ ์จ ํธ๋ฒ(on hovered)
๐ ์ด์ (focused)
๐ซ ๋นํ์ฑํ(disabled)
์๋ธ๋ก ์์ด์ฝ(Chevron icons, Vํ ์์ด์ฝ) ๋ฐฐ์น
์์ฝ๋์ธ์ ํด๋ฆญํ๋ฉด ์๋ธ๋ก (Chevron)์ด ํ์ ํ์ฌ ์์๊ฐ ์ฑ๊ณต์ ์ผ๋ก ํ์ฅ๋์์์ ๋ํ๋
๋๋ค. ๋ค์ ํด๋ฆญํ๋ฉด ์ถ์๊ฐ ๋ฐ์ํ์ฌ ์๋ธ๋ก (Chevron)์ด ์ด๊ธฐ ์์น๋ก ๋์๊ฐ๋๋ค.
์๋ธ๋ก (Chevron) ๋์ ๋ค์ ๊ธฐํธ๋ฅผ ์ฌ์ฉํ ์๋ ์์ต๋๋ค.
โข ์บ๋ฟ (Caret, โฒ)
โข ํ์ดํ (Arrow, โ)
โข + / -
์ถ๊ฐ ๊ธฐํธ
์์ฝ๋์ธ์ด ์ค๋ฅธ์ชฝ์ธ ๊ฒฝ์ฐ ์ถ๊ฐ ๊ธฐํธ๋ฅผ ์ฌ์ฉํ์ฌ ์๋ฏธ๋ฅผ ๊ฐ์กฐํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ๊ตฌ์ฑ ์์์ ๋ด์ฉ์ ๊ณผ๋ถํ๊ฐ ๊ฑธ๋ฆด ์ ์์ผ๋ฏ๋ก ์ฃผ์ํฉ๋๋ค.
๋๋ก๋ ์์๋ฅผ ์๊ฐ์ ์ผ๋ก ๊ตฌ๋ถํ๊ธฐ ์ํด ์์์ ์ฌ์ฉํ ์๋ ์์ต๋๋ค.
2. ์ปจํ
์ด๋(container)์ ์คํ์ผ
ํ์ฅ ์์(Expanded element)
์ฌ๋ฌ ๊ฐ์ ์์ฝ๋์ธ์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ํ์ฅ๋ ์ํ๋ฅผ ๊ฐ์กฐ ํ์ํด์ผ ํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์๊ฐ ์ด๋ค ์์ฝ๋์ธ ์์๊ฐ ์ด๋ ค ์๋์ง ์ดํดํ๋๋ก ๋์ต๋๋ค. ํ์ด๋ผ์ดํธ ์คํ์ผ์ ์ง์ ํ๋ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
โข ๊ณ ๋๊ฐ ์๋ ๊ทธ๋ฆผ์
โข ๋ฐฐ๊ฒฝ ์ฑ์ฐ๊ธฐ
โข ์ค๊ณฝ์ ํ
๋๋ฆฌ
๋์ด๊ฐ ํฐ์๊ณผ ๋ฐ์ ํ์ ํ๋ฉด์์ ๋ฉ์ง๊ฒ ๋ณด์ด์ง๋ง ํ์ฅ๋ ์์ฝ๋์ธ ์์์ ๋ฐฐ๊ฒฝ์ 8-12% ๋ถํฌ๋ช
๋๋ก ์ฑ์ฐ๋ ๊ฒ์ ํ๋ฅญํ ์ถ๊ฐ ๊ธฐ๋ฅ์
๋๋ค. ํฐ์ ํ๋ฉด๊ณผ๋ ์ ์ด์ธ๋ฆฝ๋๋ค. ํ์ํ ๊ฒฝ์ฐ ์ค๊ณฝ์ ์ ์ถ๊ฐํ ์ ์์ต๋๋ค.
..
๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
UI/UX ๋์์ธ: ๊ทธ๋ฆฌ๋ ์ค์
๊ฑฐ์ ๋ชจ๋ ํ๋ก์ ํธ์ ๋ํด ๋ฐ์ํ ๋ ์ด์์ ๊ทธ๋ฆฌ๋๋ฅผ ์ค์ ํ๋ ๋ฐฉ๋ฒ์
๋๋ค.
์ค๋ฒ๋ทฐ(Overview)
๋์์ด๋์๊ฒ ๊ทธ๋ฆฌ๋๋ ์ฐ๋ฆฌ๊ฐ ์ ํ๋ ๋ชจ๋ ํ๋ก์ ํธ์ ๊ธฐ๋ณธ ๋๊ตฌ์ ์ญํ ์ ํฉ๋๋ค.
๋ฌธ์ ๋ ์๊ฒฉํ ์ธ์ ๋์์ธ ์๋ ์ดํ, ์ํฉ์ด ํจ์ฌ ๋ ๋ณต์กํด์ก์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ํ๋ ์น์ ์ถํ์ผ๋ก ํฌ๋ก์ค ํ๋ซํผ, ๋ฐ์ํ, ๋ฉํฐ ๋๋ฐ์ด์ค ๊ฒฝํ์ด ์ด์ ํ์ค์ด ๋์์ต๋๋ค.
์ด๋ฅผ ์ํด ์ค๋ ์ฐ๋ฆฌ๋ ๋ค์์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
- ๊ทธ๋ฆฌ๋์ ์ ์์ ์ฉ๋
- ํ๋ ๋์งํธ ๋ ์ด์์ ๊ทธ๋ฆฌ๋์ ์ ํ๊ณผ ์ฐจ์ด์ .
- ์์ง ๊ธฐ์ค์ ์ผ๋ก ๊ธฐ๋ณธ 4pt ๊ทธ๋ฆฌ๋๋ฅผ ์ค์ ํ๋ ๋ฐฉ๋ฒ.
- ๊ทธ๋ฆฌ๋์ ์ฝํ ์ธ ๋ฅผ ์ ๋ ฌํ๋ ๋ฐฉ๋ฒ.
- ๋ณด๋์ค: ์๋ ๋ ์ด์์์ ํ์ฉํ์ฌ ์ถ์ ๋ ์ฝ๊ฒ ๋ง๋๋ ๋ฐฉ๋ฒ.
๋ ์ด์ ๊ณ ๋ฏผํ์ง ์๊ณ ๋ค์ด๊ฐ ๋ณด๊ฒ ์ต๋๋ค.
์ ๊ทธ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ ๊น์?
์ฐ๋ฆฌ ๋ชจ๋๊ฐ ๊ฐ์ ์
์ฅ์ ์ทจํ๊ธฐ ์ํด์, ์ ์ด์ ์ ๊ทธ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ๋์ง ์๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๊ฐ์ฅ ์ค์ํ ์ด์ ๋ช ๊ฐ์ง๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์๊ฐ์ ์ผ๊ด์ฑ
๊ฐ์ฅ ์ค์ํ ์ผ๊ด์ฑ์ ๋ง๋๋ ๊ฒ์
๋๋ค. ๊ทธ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฌธ์๋ฅผ ํ(rows), ์ด(columns)๋ก ๋ฐฐ์นํ ์ ์์ต๋๋ค. ์ฝํ
์ธ ๋ฅผ ์ฐจ๋ณํํ๊ณ ์ฝํ
์ธ ๋ฅผ ๋ณด๋ค ๊ท ์ผํ ๋ฐฉ์์ผ๋ก ๋ฐฐ์นํ ์ ์์ต๋๋ค.
๋ฌธ์ ํ์ด๋ผํค(Hierarchy)
๊ทธ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ๋ ๋ ๋ค๋ฅธ ์ด์ ๋ ์๊ฐ์ ๊ณ์ธต ๊ตฌ์กฐ๋ฅผ ์ํด ๋ฌธ์ ์น์
์ ์ฐจ๋จํ ์ ์๊ธฐ ๋๋ฌธ์
๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ๋ ๋ง์ ๊ทธ๋ฆฌ๋ ๊ณต๊ฐ์ ์ฐจ์งํ๋ ํฐ ์์๊ฐ ๋ ์ค์ํ ๋ฐ๋ฉด, ๋ ์์ ์์๋ ๋ ์ค์ํ ์ ๋ณด๋ฅผ ๋ํ๋
๋๋ค.
๋ฐ๋ณต ๊ฐ๋ฅํ ํจํด
๋ง์ง๋ง์ผ๋ก ๊ทธ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฌธ์์ ๋ฆฌ๋ฌ, ์ฌ๋ฐฑ, ํจ๋ฉ, ์ฌ๋ฐฑ์ ์ ์ํ๊ณ ์ฝํ
์ธ ๋ธ๋ก์ ์บก์ํํ์ฌ ๋ฐ๋ณต ๊ฐ๋ฅํ ํจํด์ ๋ง๋ค ์ ์์ต๋๋ค.
์ฌ๋์ ๋์ ์ผ๊ด์ฑ์ ์ข์ํ๋ฏ๋ก ๊ทธ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ์ฌ ๋ณด๋ค ๊ท ์ผํ๊ณ ์ฝ๊ธฐ ์ฝ๊ณ ๋ช
ํํ๊ฒ ์๋ณํ ์ ์๋ ๋์์ธ ํจํด์ผ๋ก ๋ฌธ์๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
๊ทธ๋ฆฌ๋ ์ ์
๋ ๋์๊ฐ๊ธฐ ์ ์, ๊ฑฐ์ ๋ชจ๋ ์ต์ ์น๊ณผ ๋ชจ๋ฐ์ผ ๋ ์ด์์ ๊ทธ๋ฆฌ๋๋ ๋ค์ ๋ค ๊ฐ์ง ์ ํ์ ๊ทธ๋ฆฌ๋ ์ค ํ๋์์ ๋ง์๋๋ฆฌ๊ณ ์ถ์ต๋๋ค.
- ์๊ณ ๊ฒฉ์ ๊ทธ๋ฆฌ๋(Manuscript Grid)
- ์ปฌ๋ผ ๊ทธ๋ฆฌ๋(Column Grid)
- ๋ชจ๋์ ๊ทธ๋ฆฌ๋(Modular Grid)
- ๊ณ์ธต์ ๊ทธ๋ฆฌ๋(Hierarchical Grid)
๊ด์ฌ์ด ์๋ ๊ฒฝ์ฐ, ์ฌ๊ธฐ์์ ํ์ค ๊ทธ๋ฆฌ๋ ๋ฒ์ฃผ์ ๋ํด ์์ธํ ์์๋ณผ ์ ์์ต๋๋ค.
โ
๊ทธ๋ํฝ ๋์์ด๋์๊ฒ ์ ์ฉํ ๊ทธ๋ฆฌ๋ ์์คํ
์ ํ
๊ทธ๋ฆฌ๋ ์์คํ
์ ์ฑ๊ณต์ ์ธ ๋ ์ด์์์ ๋ง๋๋ ๊ธฐ๋ณธ ์์ ์ค ํ๋์
๋๋ค. ๊ทธ๋ํฝ ๋์์ด๋๊ฐ ๊ทธ๋ฆฌ๋ ์ ํ์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์๋ ค๋๋ฆฝ๋๋ค.
Types of Grid System Useful for Graphic Designers (graphic-design-institute.com)
..
๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
๋๊ธ
์๊ฒฌ์ ๋จ๊ฒจ์ฃผ์ธ์