๋ฉ์ง ์น์ฌ์ดํธ๋ฅผ ์ํ ์ต๊ณ ์ UI ํคํธ
์๋ฒฝํ ์น์ฌ์ดํธ๋ฅผ ์ฆ์ ์ ์ํ๋ ๋ฐ ๋์์ด ๋๋ ์ต์์ UI ํคํธ ์ต์ ์ ์ฐพ์ผ์ญ์์ค.

UI ํคํธ๋ ์น ๋์์ด๋์๊ฒ ์ ์ฉํ ์ ์์ต๋๋ค. UI ํคํธ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ชจ๋ ๊ฐ๋ณ ์์๋ฅผ ๋์์ธํ๋ ๋ฐ ์๊ฐ์ ๋ค์ด์ง ์๊ณ ๋ ์ ๋ฌธ์ ์ด๊ณ ์ธ๋ จ๋ ์น ์ฌ์ดํธ๋ฅผ ์ฝ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค. ๋ฉ์ง ์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๋ฐ ์ฌ์ฉํ ์ ์๋ ํ์ฌ ์์ฅ์์ ์ฌ์ฉํ ์ ์๋ ์ต๊ณ ์ UI ํคํธ๋ฅผ ๊ฒํ ํด ๋ณด๊ฒ ์ต๋๋ค.
์น์ฌ์ดํธ ์ ์์ ๋งค์ฐ ๋ณต์กํ ์์ ์ ๋๋ค. ๋์์ธ, ๋ ์ด์์, ์ฝํ ์ธ ๋ฑ ๊ณ ๋ คํด์ผ ํ ์ฌํญ์ด ๋๋ฌด ๋ง์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ชจ๋ ์น์ฌ์ดํธ์ ์ค์ํ ์ธก๋ฉด์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค(UI)์ ๋๋ค. UI๋ ์ฌ์ฉ์๊ฐ ์ฌ์ดํธ๋ฅผ ๋ฐฉ๋ฌธํ ๋ ๋ณด๊ณ ์ํธ์์ฉํ๋ ๊ฒ์ด๋ฏ๋ก ์ ๋์์ธ๋๊ณ ์ฌ์ฉ์ ์นํ์ ์ด์ด์ผ ํฉ๋๋ค.
UI ํคํธ๋ ์น ์ฌ์ดํธ ๊ตฌ์ถ์ ๋จ์ํํ๊ณ ์ ๋ฌธ์ ์ด๊ณ ์ธ๋ จ๋ ์น ์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. UI ํคํธ๋ ์น ๋์์ธ์ ๋ง๋๋ ๋ฐ ์ฌ์ฉํ ์ ์๋ ๋ฏธ๋ฆฌ ๋์์ธ๋ UI ์์ ๋ชจ์์ ๋๋ค. ๋ชจ๋ ๊ฐ๋ณ ์์๋ฅผ ๋์์ธํ๋ ๋ฐ ์๊ฐ์ ํ ์ ํ ํ์๊ฐ ์์ต๋๋ค. UI ํคํธ์์ ์ ํํ์ฌ ์๋ฆ๋ค์ด ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ธฐ๋ง ํ๋ฉด ๋ฉ๋๋ค.
UI ํคํธ ์ฌ์ฉ์ ์ด์
๋ค์์ ํฌํจํ์ฌ UI ํคํธ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ง์ ์ด์ ์ด ์์ต๋๋ค.
- ์๊ฐ ์ ์ฝ. UI ํคํธ๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ก์ ํธ์ ๋ชจ๋ ๊ฐ๋ณ ๋ถ๋ถ์ ๋์์ธํ๋ ๋ฐ ๋ช ์๊ฐ์ ๋ณด๋ผ ํ์๊ฐ ์์ต๋๋ค.
- ๋์ ์ ์ฝ. ์๊ฐ์ ๋จ์ถํ๊ณ ๊ฐ๋น์ผ ๊ธฐ์ ์ ํตํฉํ ํ์๊ฐ ์์ผ๋ฏ๋ก ์ค๊ณ ๋น์ฉ์ ์ ๊ฐํ ์ ์์ต๋๋ค.
- ์ฌ์ฉ์ ์น๊ทผ์ฑ. ์ ๋์์ธ๋ UI ํคํธ๋ ์ฌ์ฉ์ ์นํ์ ์ธ ๋์์ธ์ ๋ง๋ค๊ธฐ ์ํด ๋ง๋ค์ด์ก์ต๋๋ค.
- ์ ๋ฌธ ์ง์ ์์. UI ํคํธ๋ฅผ ์ฌ์ฉํ๋ฉด ์ ๋ฌธ ๋์์ด๋๊ฐ ์๋๋๋ผ๋ ์ ๋ฌธ์ ์ธ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
- ๋ค์ฌ. UI ํคํธ๋ ๋ค๋ชฉ์ ์ด๋ฉฐ ๊ฐ์ธ ์น์ฌ์ดํธ์์ ๋น์ฆ๋์ค ์น์ฌ์ดํธ์ ์ด๋ฅด๊ธฐ๊น์ง ๋ค์ํ ํ๋ก์ ํธ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
์น์ฌ์ดํธ์ฉ UI ํคํธ๋ฅผ ์ ํํ๋ ๋ฐฉ๋ฒ์ ๋ฌด์์ ๋๊น?
UI ํคํธ๋ฅผ ์ ํํ๊ธฐ ์ ์ ๋ช ๊ฐ์ง๋ฅผ ๊ณ ๋ คํ์ญ์์ค.
์ฌ์ดํธ์ ๋ชฉ์ . ์น์ฌ์ดํธ์ ๋ชฉ์ ์ ์ ์ํ์ญ์์ค. ์ด๋ค ์ข ๋ฅ์ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ณ ์์ต๋๊น? ๊ฐ์ธ ์ฌ์ดํธ์ ๋๊น, ๋น์ฆ๋์ค ์ฌ์ดํธ์ ๋๊น? ์ ํ ๋ฒ์๋ฅผ ์ขํ๊ณ ์ ํฉํ UI ํคํธ๋ฅผ ์ฐพ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
๊ทํ์ ์์ฐ . UI ํคํธ๋ ๊ฐ๊ฒฉ์ด ๋ค๋ฅผ ์ ์์ผ๋ฏ๋ก ์์ฐ์ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋ง์ ํ๋ฅญํ ๋ฌด๋ฃ UI ํคํธ๋ฅผ ์ฌ์ฉํ ์ ์์ผ๋ฏ๋ก ๋ง์ ๋น์ฉ์ ์ง๋ถํ ํ์๊ฐ ์์ต๋๋ค.
๋์์ธ. UI ํคํธ์ ๋์์ธ์ ๊ฒํ ํ๊ณ ์คํ์ผ์ ๋ง๋์ง ํ์ธํ์ธ์.
ํน์ง. UI ํคํธ์ ์น์ฌ์ดํธ์ ํ์ํ ๋ชจ๋ ๊ธฐ๋ฅ์ด ์๋์ง ํ์ธํ์ญ์์ค.
๋น์ ์ ๊ธฐ์ ์์ค. UI ํคํธ๋ ๋จ์ํ๊ฑฐ๋ ๋ณต์กํ ์ ์์ผ๋ฏ๋ก ๊ธฐ์ ์์ค์ ์ ํฉํ ํคํธ๋ฅผ ์ ํํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ด๋ณด์๋ผ๋ฉด ์ฌ์ฉํ๊ธฐ ์ฌ์ด UI ํคํธ๋ฅผ ์ฐพ์ผ์ญ์์ค. ๊ฒฝํ์ด ๋ง์ผ๋ฉด ๋ ๋ณต์กํ UI ํคํธ๋ฅผ ์ ํํ ์ ์์ต๋๋ค.
๋น์ ์ ๋์์ธ ์คํ์ผ. UI ํคํธ๋ฅผ ์ ํํ ๋ ๋์์ธ ์คํ์ผ์ ๋ง๋ ํคํธ๋ฅผ ์ ํํ์ธ์. ๋ฐ๋ผ์ UI ํคํธ๊ฐ ์น์ฌ์ดํธ์ ๋๋จธ์ง ๋ถ๋ถ๊ณผ ์ ๋ง์ ๊ฒ์ด๋ผ๊ณ ํ์ ํ ์ ์์ต๋๋ค.
์์ฅ์๋ ๋ค์ํ UI ํคํธ๊ฐ ์์ผ๋ฏ๋ก ์ต์์ ์ต์ ์ ์ ํํ๊ธฐ ์ด๋ ค์ธ ์ ์์ต๋๋ค. ๊ทํ๋ฅผ ๋๊ธฐ ์ํด ์ต๊ณ ์ UI ํคํธ ๋ชฉ๋ก์ ์์ฑํ์ต๋๋ค.
๋ฉ์ง ์น์ฌ์ดํธ๋ฅผ ์ํ ์ต๊ณ ์ UI ํคํธ
Material Design ํคํธ. ์ด UI ํคํธ๋ Google์ Material Design ์ธ์ด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ๋ฉฐ ๋ฒํผ, ๋ฉ๋ด, ํ์ดํฌ๊ทธ๋ํผ ๋ฑ ๋ค์ํ ์์๋ฅผ ํฌํจํฉ๋๋ค. ํ๋์ ์ด๊ณ ์ธ๋ จ๋ ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๋ฐ ์ ํฉํฉ๋๋ค. ์ธ๋ จ๋๊ณ ์ฐ์ํ ์น ์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๋ฐ ํ์ํ ๋ชจ๋ ์์๊ฐ ํฌํจ๋ UI ํคํธ๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค. ์์ฌ๋ ๋์์ธ๊ณผ ๊ธฐ์ ์ ๊ณ ์ ์ ์ธ ์์น์ ๊ฒฐํฉํฉ๋๋ค.
Bootstrap . Bootstrap ์ ๋๋ฆฌ ์ฌ์ฉ๋๋ HTML, CSS ๋ฐ JavaScript ํ๋ ์์ํฌ์ ๋๋ค. ์ฌ๊ธฐ์๋ ๋ฐ์ํ ์น ์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๋ฐ ํ์ํ ๋ชจ๋ ๊ตฌ์ฑ ์์๊ฐ ํฌํจ๋ UI ํคํธ๊ฐ ํฌํจ๋์ด ์์ต๋๋ค. ์ด ํคํธ์๋ UI Bootstrap ๊ทธ๋ฆฌ๋ ์์คํ ์ ๊ธฐ๋ฐ์ผ๋ก ํ๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ์์๊ฐ ํฌํจ๋์ด ์์ต๋๋ค. ๊ทธ๋ค์ ์ฌ์ฉํ๊ณ ์ฌ์ฉ์ ์ ์ํ๊ธฐ๊ฐ ์ฝ์ต๋๋ค.
Semantic UI . Semantic UI ๋ ์น์ฌ์ดํธ๋ฅผ ์ํ ์๋ฆ๋ต๊ณ ๋ฐ์์ ์ธ ๋ ์ด์์์ ๋ง๋๋ ๋ฐ ๋์์ด ๋๋ ๊ฐ๋ฐ ํ๋ ์์ํฌ์ ๋๋ค. UI ํคํธ์๋ ๋ฒํผ, ์์, ๊ทธ๋ฆฌ๋ ๋ฑ ๋ค์ํ ์์๊ฐ ํฌํจ๋์ด ์์ต๋๋ค. Semantic์ ๋์์ธ์ ์์ ๋ฅผ ์ ๊ณตํ๊ธฐ ์ํด ํ ๋ง ๋ณ์๊ฐ ์๋ ์ง๊ด์ ์ธ ์์คํ ์ ๊ฐ์ง๊ณ ์์ต๋๋ค.
Quicksmart UI ํคํธ๋ ๊ฐ๋จํ๊ณ ์ฌ์ฉํ๊ธฐ ์ฌ์ด UI ํคํธ๊ฐ ํ์ํ ์น ๋์์ด๋์๊ฒ ํ์ํ ์ต์ ์ ๋๋ค. ์น ์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๋ฐ ํ์ํ ๋ชจ๋ ํ์ ๊ตฌ์ฑ ์์๊ฐ ์์ต๋๋ค. ์น ๋์์ธ์ ๋ง ์์ํ๋ ์ด๋ณด์์๊ฒ ์ ํฉํฉ๋๋ค.
Fortis UI Kit ๋ ๋ช ๋ถ ์์ ๋ฉ์ง ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๋ฐ ๋์์ด ๋๋ ํฌ๊ด์ ์ด๊ณ ์ฌ์ฉํ๊ธฐ ์ฌ์ด ์น ๋์์ธ ํคํธ์ ๋๋ค. ํคํธ์๋ ๋ค์ํ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ฑ ์์, ํ ํ๋ฆฟ ๋ฐ ์์ต์๊ฐ ํฌํจ๋์ด ์์ผ๋ฏ๋ก ๋น ๋ฅด๊ฒ ์์ํ๊ณ ์คํํ ์ ์์ต๋๋ค.
Fortis UI Kit์ ๊ฐ์ฅ ์ข์ ์ ์ค ํ๋๋ ์๋ก์ด ๊ธฐ๋ฅ๊ณผ ์ถ๊ฐ ๊ธฐ๋ฅ์ผ๋ก ์ง์์ ์ผ๋ก ์ ๋ฐ์ดํธ๋์ด ์ต๊ณ ์ ์ต์ ์น ๊ธฐ์ ์ ์ ๊ณตํฉ๋๋ค. Fortis UI Kit๋ ๋ํ ๊ณ ๋๋ก ์ฌ์ฉ์ ์ ์ํ ์ ์์ต๋๋ค. ๋ธ๋๋์ ์คํ์ผ์ ๋ง๊ฒ ๊ตฌ์ฑ ์์์ ์์, ๊ธ๊ผด ๋ฐ ๋ ์ด์์์ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค. ๋์์ด ํ์ํ๋ฉด Fortis UI Kit ํ์ด ํ์ํ ๊ณ ๊ฐ ์ง์์ ์ ๊ณตํฉ๋๋ค.
InkUI ๋ ์๋ฆ๋ค์ด ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๋ฐ ํ์ํ ๋ชจ๋ ๊ฒ์ด ํฌํจ๋ ํ๋์ ์ด๊ณ ๊น๋ํ ์น ๋์์ธ ํคํธ์ ๋๋ค. ํคํธ๋ ๊ด๋ฒ์ํ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ฑ ์์, ํ ํ๋ฆฟ, ์์ด์ฝ ๋ฐ ์์ต์๋ก ๊ตฌ์ฑ๋ฉ๋๋ค.
InkUI ๋ ์ธ๋ จ๋๊ณ ์ธ๋ จ๋ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ณ ์ ํ๋ ๋์์ด๋์๊ฒ ์ ํฉํฉ๋๋ค. ์ฌ๊ธฐ์๋ ๊ด๋ฒ์ํ ์น ๊ธฐ์ ์ด ํฌํจ๋์ด ์์ผ๋ฏ๋ก ์น ์ฌ์ดํธ๊ฐ ๋ฐ์ํ์ด๊ณ ๋ชจ๋ ์ฅ์น์์ ๋ฉ์ง๊ฒ ๋ณด์ผ ์ ์์ต๋๋ค.
Designio ๋ ๋ช ๋ถ ๋ง์ ๋ฉ์ง ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์๋ ์ต๊ณ ํ์ง์ UI ํคํธ์ ๋๋ค. ๊ทธ๊ฒ์ ๊ด๋ฒ์ํ ์์์ ๋ชจ๋ ํ์ ๊ตฌ์ฑ ์์์ ํจ๊ป ์ ๊ณต๋ฉ๋๋ค. ๋ํ ์๋ฒฝํ๊ฒ ๋ฐ์ํ๋ฏ๋ก ์ด๋ค ๊ธฐ๊ธฐ์์ ๋ณด๋ ์น์ฌ์ดํธ๊ฐ ๋ฉ์ง๊ฒ ๋ณด์ ๋๋ค.
Designio ๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ํคํธ๋ฅผ ๋ค์ด๋ก๋ํ ๋ค์ ์ํ๋ ๋์์ธ ํ๋ก๊ทธ๋จ์ผ๋ก ๊ฐ์ ธ์ค๊ธฐ๋ง ํ๋ฉด ๋ฉ๋๋ค. ์์ ์ ์คํ์ผ์ ๋ง๊ฒ ์์๋ฅผ ์ฌ์ฉ์ ์ ์ํ ์ ์์ต๋๋ค. Designio ๋ ๋ชจ๋ ๊ฐ๋ณ ์์๋ฅผ ๋์์ธํ๋ ๋ฐ ์๊ฐ์ ๋ค์ด์ง ์๊ณ ๋ ์ ๋ฌธ์ ์ด๊ณ ์ธ๋ จ๋ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ณ ์ ํ๋ ๋ชจ๋ ์ฌ๋์๊ฒ ํ์ํ ์ ํ์ ๋๋ค.
๋ณด๋ค ๋ฏธ๋๋ฉํ ๋์์ธ์ UI ํคํธ๋ฅผ ์ฐพ๊ณ ์๋ค๋ฉด Minimal Interface๋ฅผ ํ์ธํ์ญ์์ค. ์ด ํคํธ๋ ์ฝํ ์ธ ๋ฅผ ๋งค๋๋ฝ๊ณ ์คํ์ผ๋ฆฌ์ํ๊ฒ ๋ณด์ฌ์ฃผ๋ ๊นจ๋ํ๊ณ ํ๋์ ์ธ ์ธํฐํ์ด์ค์ ํจ๊ป ์ ๊ณต๋ฉ๋๋ค. ํคํธ๋ ์๋ฒฝํ๊ฒ ๋ฐ์ํ๋ฏ๋ก ์น ์ฌ์ดํธ๋ ๋ชจ๋ ์ฅ์น์์ ๋ฉ์ง๊ฒ ๋ณด์ ๋๋ค.
์ต์ ์ธํฐํ์ด์ค๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ํคํธ๋ฅผ ๋ค์ด๋ก๋ํ๊ณ ๋์์ธ ํ๋ก๊ทธ๋จ์ผ๋ก ๊ฐ์ ธ์ค์ธ์. Minimal Interface๋ ํ์ํ๊ธฐ ์ฌ์ด ๊นจ๋ํ๊ณ ํ๋์ ์ธ ์น์ฌ์ดํธ๋ฅผ ์ํ๋ ๋ชจ๋ ์ฌ๋์๊ฒ ํ์ํ ์ ํ์ ๋๋ค.
๋ฉ์ง ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๊ฒ์ ๋ณต์กํ๊ฑฐ๋ ์๊ฐ์ด ๋ง์ด ์์๋ ํ์๊ฐ ์์ต๋๋ค. UI ํคํธ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ช ๋ถ ์์ ์ ๋ฌธ์ ์ด๊ณ ์ธ๋ จ๋ ์น ์ฌ์ดํธ๋ฅผ ์ฝ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค. ์น ์ฌ์ดํธ ์์ฑ ํ๋ก์ธ์ค๋ฅผ ๋จ์ํํ๊ณ ๋ค์ ๋จ๊ณ๋ก ์งํํ๋ ค๋ฉด ์ฌ์ฉ ๊ฐ๋ฅํ UI ํคํธ ์ต์ ์ ํ์ธํ์ญ์์ค.


