๐ 2021๋ 10์ 1์ฃผ TOP3
- ํ์ดํฌ๊ทธ๋ํผ ํฌ๊ธฐ๋ฅผ ๋ง๋ค ๋ ํผํด์ผ๋ ์ค์ 5๊ฐ์ง (2021๋ )
- ์คํํธ์ ์์ ์ ์ผํ ๋์์ด๋๊ฐ ๋์์ธ ์์คํ ์ ๊ตฌ์ถํ๋ ๋ฐฉ๋ฒ
- ๋น์ ์ด ์์์ผ ํ 10๊ฐ์ง ๊ธฐ๋ณธ UI ๋์์ธ ์์น
ํ์ดํฌ๊ทธ๋ํผ ํฌ๊ธฐ๋ฅผ ๋ง๋ค ๋ ํผํด์ผ๋ ์ค์ 5๊ฐ์ง (2021๋ )
์ด ๊ธ์ ์ ๊ฐ CallHub ๋ง์ผํ ์น์ฌ์ดํธ์ ํ์ (Type) ํฌ๊ธฐ์ ๋ง๋ค๋ฉด์ ์ค์ํ๊ณ ๋ฐฐ์ ๋ 5๊ฐ์ง์ ๋ด์ฉ์ ๋๋ค.
๋ฐฐ๋ฆฌ์ด๋ธ ํฐํธ์์ด ๋๋ฌด ๋ง์ ํฐํธ ๋๊ป๋ฅผ ์ฌ์ฉํ์๋.
ํ์ด์ง ์์์ ๋ํ ๋ช ํํ ๊ณ์ธต ๊ตฌ์กฐ์ ์์ ๊ฐ์ ๋๋น๋ฅผ ๋ง๋ค๊ธฐ ์ํด์๋ ์ฌ๋ฌ ๊ฐ์ ํฐํธ ๋๊ป๊ฐ ํ์ํฉ๋๋ค. ๊ทธ๋ฌ๋ ๊ฐ๋ฐ์๊ฐ ์ผ๋ฐ์ ์ธ(Static) ํฐํธ์ ๊ฒฝ์ฐ์ฒ๋ผ ๊ฐ ํฐํธ ๋๊ป์ ๋ํด ๋ณ๋์ ํฐํธ ํจํค์ง๋ฅผ ๋ฐ๋ก๋ฐ๋ก ์ค์นํด์ผ ํ๋ ๊ฒฝ์ฐ ํ์ด์ง ์๋์๋ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ๋ฐฐ๋ฆฌ์ด๋ธ ํฐํธ๋ ๋จ์ผ ํฐํธ ํ์ผ ํ๋๋ก ์ฌ๋ฌ ํฐํธ ๋๊นจ๋ฅผ ์กฐ์ ํ ์ ์๋ ์ ์ฐ์ฑ์ ์ ๊ณตํด ์ฃผ๋ ํฐํธ์ ๋๋ค.
์์ฝ:
๋ฐฐ๋ฆฌ์ด๋ธ ํฐํธ๋ฅผ ์ฌ์ฉํ์ง ์๋ ๊ฒฝ์ฐ์๋ ๋๊นจ๊ฐ ์ฌ๋ฌ ๊ฐ๋ฅผ ๊ฐ์ง ํฐํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ๊ทธ๋ฌ๋ ๋ชจ๋ ํฐํธ ๋๊ป ํ์ผ์ ํ ๋ฒ์ ๋ง์ด ๊ฐ์ ธ์ค๋ ๊ฒ์ ํผํ์ธ์. ํ์ด์ง ์๋๊ฐ ๋ถ์ ์ ์ธ ์ํฅ์ ๋ฐ์ง ์๋๋ก ํ์ํ ์ต์ํ์ ๋๊ป๋ง ๊ฐ์ ธ์ค์ธ์. ๋ ๋น ๋ฅธ ํ์ด์ง ๋ก๋๋ฅผ ์ํด ๊ตฌ๊ธ ํฐํธ ์ฌ์ดํธ ๋งํฌ์ ์๋ ๋ฐฐ๋ฆฌ์ด๋ธ ํฐํธ๋ฅผ ๊ณ ๋ คํด๋ด ์๋ค.
๋์ผ๋ก ํ๋จํ๋ ๊ฒฝ์ฐ์๋ ๋น๋ก ์ฒ๋๋ฅผ ์ฌ์ฉํ๊ธฐ.
ํ์ ํฌ๊ธฐ์ ๊ฐ ์กฐํฉ์ ์๋ก ๊ฐ๊น์ด ๋ฐฐ์น๋ ๋ ์๊ฐ์ ์กฐํ๋ฅผ ์ด๋ฃจ์ด์ผ ํฉ๋๋ค. ํฌ๊ธฐ๋ฅผ ๋๋ฆฌ๊ฑฐ๋ ์ค์ด๋ ๋ช ํํ ํจํด ์์ด ํ์ ํฌ๊ธฐ๋ฅผ ๋ง๋ค๊ฒ ๋๋ฉด ํ์ ํฌ๊ธฐ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ ์ด๋ ค์์ง๊ณ ๋๋์ค์ผ๋ก ๋ง์ถ๊ฒ ๋๋ ๊ณ์ธต ๊ตฌ์กฐ๋ฅผ ๋ง๋ค ๊ฒ์ ๋๋ค.
ํ์ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๊ธฐ ์ํด ์ฌ๋ฌ ๋น์จ(ํจํด ์ฌ์ฉ)์ ์ฌ์ฉํ ์ ์์ง๋ง(*Jeremy Church์ Type Scale ์ฐธ์กฐ) ํจํด์ ์ฌ์ฉํ๊ฒ ๋๋ฉด ์ข ๋ ๋์ด ํธํด์ง๊ณ ์ธ์์์ ํฌ๊ธฐ์์ ํ์ ํฌ๊ธฐ๋ฅผ ์ถ๊ฐํ ๋ ํธ๋ฆฌํฉ๋๋ค.
1.2์ ๋น์จ์ ์ฌ์ฉํ๋ ์์ (The Musical Interval)์์๋ ๋ง์ด๋ 3๋(Minor Third)๊ฐ ์ข์ ์์๋ผ ํ ์ ์์ต๋๋ค. ์ฌ๊ธฐ์ ํฉ๊ธ๋น(1.62)๋ ์ ์ ์๋๋ฐ์. ๋ฌผ๋ก ์ด๊ฒ๋ค์ ์๊ฒฉํ ๊ท์น์ด ์๋์ ๋ช ์ฌํ์ธ์. ์์ ๋กญ๊ฒ ์๋ํด ๋ณด์ธ์.
์๋ฅผ ๋ค์ด, ๋ง์ด๋ 3๋ถ์ 1 ๋น์จ์ 1, 1.2, 1.44, 1.728, 2.074 ๋ฑ์ด ์์ผ๋ฉฐ ๊ธฐ๋ณธ ํฐํธ ํฌ๊ธฐ๋ก 16px๋ฅผ ๊ณ ๋ คํ๋ ๊ฒฝ์ฐ, ์์์ ๊ฐ์ด ์๋ ๊ธ๊ผด ํฌ๊ธฐ๋ฅผ ์ ๊ณตํฉ๋๋ค. ๊ทธ๋ฌ๋ ์๋ ์ด๋ฏธ์ง์ ๊ฐ์ด ์ฌ๊ธฐ์์ ์ฝ๊ฐ์ ์์ ์ ๊ณ๋ค์ด๋ฉด ํ์ ํฌ๊ธฐ ์์ ํ๊ธฐ์ ํจ์ฌ ์์ํด์ง ๊ฒ์ ๋๋ค.
์์ฝ:
์์ ๊ณผ ์์ฐ์์์๋ ํ์ ํฌ๊ธฐ ๊ฐ์ ์กฐํ๋ฅผ ๋ง๋๋ ๋ฐ ์ฌ์ฉํ ์ ์๋ ๋ง์ ๋น๋ก ๋น์จ๋ค์ ๋ฐ๊ฒฝํ ์ ์์ต๋๋ค. ํ์ ํฌ๊ธฐ๋ฅผ ๋ง๋ค ๋ ์ง์นจ์ผ๋ก ํ๋ฒ ์ฐธ๊ณ ํด๋ณด์ธ์.(*Kevin Powell์ Using a typographic scale ์ฐธ์กฐ).
์น๊ณผ ๋ชจ๋ฐ์ผ์์ ๋์ผํ ํ์ ํฌ๊ธฐ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ.
์ฌ๋ฐ๋ฅธ ํ์ ํฌ๊ธฐ๋ฅผ ์ฐพ๋ ๋ฐ ์ค๋ ์๊ฐ์ ๋ณด๋ด๊ฒ ๋๋ค๋ฉด, ์น์ฌ์ดํธ์์ ์์ ์ ํ์ ํฌ๊ธฐ๋ฅผ ๋ณด๊ณ ์ถ์ด ํ๋ ๊ฒ์ ๋น์ฐํฉ๋๋ค. ๊ทธ๋ฌ๋ ์๋ฆ๋ค์ด ๋น์จ์ ํ์ ๋ค์ด ๋ชจ๋ฐ์ผ ์ธํฐํ์ด์ค์์๋ ์ด์ธ๋ฆฌ์ง ์๊ฑฐ๋ ๋๋ฌด ํฌ๊ฒ ๋ณด์ผ ์๋ ์์ต๋๋ค. ๋ชจ๋ฐ์ผ ํ๋ฉด ์ ์ฒด๋ฅผ ์ฑ์ฐ๊ณ ์๋ H1 ํ์ดํ์ด ๋ง๋ฅ ๋ฐ๊ฐ์ง๋ง์ ์๋ค์. ๋ฐ์คํฌํฑ์ ํ์ ํฌ๊ธฐ๋ฅผ ์์ฑํ ํ์๋ ๋ชจ๋ฐ์ผ ์ธํฐํ์ด์ค์์ ์ด๋ป๊ฒ ๋ณด์ผ์ง ๊ณ ๋ คํ๋ ๋ฐ ์ฝ๊ฐ์ ์ถ๊ฐ ์์ ์ ๊ธฐ์ธ์ผ ํ์๊ฐ ์์ต๋๋ค.
๊ฒ์ ์์ง(SEO)์ด ์ฐ์ ์์๊ฐ ์๋ ๊ฒฝ์ฐ, H2์ด H1์ด ๋ํ๋ผ ์์น ๋ฑ์ ๋์ฒดํ์ฌ ์น๊ณผ ๋ชจ๋ฐ์ผ์์ ๋์ผํ ์ ํ์ผ๋ก ์ ํ๋ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ Google๊ณผ ๊ฐ์ ๊ฒ์ ์์ง์ ํ์ด์ง์ ์ฃผ์ ์ปจํ ์คํธ๋ฅผ ์ดํดํ๊ธฐ ์ํด H1 ์ ๋ชฉ์ ์ฐพ๊ธฐ ๋๋ฌธ์ ๋ชจ๋ฐ์ผ์ฉ ์ค์ผ์ผ์ ๋ง๋๋ ๊ฒ์ด ๋ซ์ต๋๋ค.
์์ฝ:
์น ์ธํฐํ์ด์ค์ฉ์ผ๋ก ๊ตฌ์ถ๋ ํ์ ํฌ๊ธฐ๋ ๋ชจ๋ฐ์ผ์์ ๋ณด๊ธฐ ์ข์ง ์์ ์ ์์ต๋๋ค. ๋ค์ํ ํ๋ฉด ํด์๋์ ๋ํด ํ์ ํฌ๊ธฐ๊ฐ ์ด๋ป๊ฒ ๋ณ๊ฒฝ๋์ด์ผ ํ๋์ง์ ๋ํ ๊ท์น์ ๋ง๋ญ๋๋ค. ์ค๋จ์ ์ ์ค์ ํ๊ณ ํ๋ฉด ํฌ๊ธฐ๊ฐ 1024px ๋ฏธ๋ง์ธ ๊ฒฝ์ฐ, (์: H1 ๊ธ๊ผด ํฌ๊ธฐ๊ฐ 32px์์ 24px๋ก ๋ณ๊ฒฝ๋์ด์ผ ํจ)์ฒ๋ผ ์ํํ ์ ์์ต๋๋ค.
..๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
์คํํธ์ ์์ ์ ์ผํ ๋์์ด๋๊ฐ ๋์์ธ ์์คํ ์ ๊ตฌ์ถํ๋ ๋ฐฉ๋ฒ
ํ์ฌ์์ ํ๋ก๋ํธ ๋์์ธ์ ๋ด๋นํ๋ ์ ์ผํ ์ฌ๋์ด ๋๋ ๊ฒ์ ํญ์ ์ด๋ ต์ต๋๋ค. ๋์์ ์ฌ๋ฌ ๊ฐ์ง ์ผ์ ์ฒ๋ฆฌํ๊ธฐ ๋๋ฌธ์ ํ๋ฃจ๊ฐ ์ ์ ์์ด ๋ฐ์ ๋๊ฐ ์์ต๋๋ค. ํ๋ก๋ํธ ๋์์ธ, ๊ธฐ๋ฅ ์ ๊ณต, ํ๋ก๋ํธ ๋ด๋น์์์ ํ์ , ๊ฐ๋ฐ์์ QA ์ง์, ์ฌ์ฉ์ ์ธํฐ๋ทฐ ๋ฑ์ ์ํ ๊ณ ๋์ ์ ๋ต์ ์ ์ํด์ผ ํฉ๋๋ค.
๋ํ ํญ์ ๊ธฐ์ ์ ๋ฐ๋ผ์ก์์ผ ํฉ๋๋ค. Figma๋ ๋ชจ๋ ํ๋ก๋ํธ ๊ด๋ จ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ ์ฃผ์ ๋๊ตฌ์ ๋๋ค. ๋ชจ๋ ๋์์ธ, ํ์๊ณผ ๋ธ๋ ์ธ์คํ ๋ฐ ์ธ์ ์ด ๊ฑฐ๊ธฐ์ ์์ต๋๋ค.
์ ๊ฐ Statflo์ ํฉ๋ฅํ ์ง ์ผ๋ง ๋์ง ์์ ์ฐ๋ฆฌ๋ ์๋กญ๊ฒ ๋ฆฌ๋ด์ผ๋ ์ฑ์ ๋ง๋ค๊ธฐ ์์ํ์ต๋๋ค. ์ด ๊ณผ์ ์์ ์ ๋ ํด๋ฆญ ๋ช ๋ฒ์ผ๋ก ๋น ๋ฅด๊ฒ ์ด๋ํ๊ณ ํ๋กํ ํ์ ์ ๋ง๋ค ์ ์๋ ๋์์ธ ์์คํ ์ด ํ์ํ์ต๋๋ค.
์ฃผ์ ํ์ง ๋ง๊ณ ์์ค์ ๋์ ์๋ ์คํ ์์ค ๋์์ธ ์์คํ ์ ์ฌ์ฉํฉ๋๋ค.
์ฒ์์๋ ๋ง์ด ํ์ํ์ง ์์ต๋๋ค. ์ฌ์ฉํ ์์์ ๋๋ถ๋ถ์ ๋ฒํผ, ๋๋กญ๋ค์ด, ํผ, ํฐํธ, ์์ ๋ฑ ์์ด์ ์ธ ๊ตฌ์ฑ ์์์ ๋๋ค. ์์คํ ์ ์ด๊ธฐ ์คํ์ผ ์ง์ ์ ์ค์ํ์ง ์์ต๋๋ค. ๋ช ๋ฒ์ ํด๋ฆญ๋ง์ผ๋ก ๋์ค์ ์คํ์ผ์ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค.
ํ์ฌ ๋์์ธ ์์คํ ์์ ์ฐพ์์ผ ํ ๊ฐ์ฅ ์ค์ํ ๊ฒ์ ์ ์ฐ์ฑ๊ณผ ์ ์ ํ ๊ตฌ์ฑ ์์๋ฅผ ํ์๋ก ํฉ๋๋ค. ๋ค์๊ณผ ๊ฐ์ด ์์ํ ์ ์์ต๋๋ค.
๋ฌด๋ฃ: Ant Design open source, Lexicon DSL ์ ๋ฃ: Tetrisly, Venus Design System, 73px
๊ธฐ๋ณธ ๊ตฌ์ฑ ์์, ์์๊ณผ ํ์ดํฌ๊ทธ๋ํผ
๋์์ธ ์์คํ ์ ๊ณ์ ์งํํ๊ธฐ๋ก ๊ฒฐ์ ํ๋ค๋ฉด ๋จผ์ ์์, ํ์ดํฌ๊ทธ๋ํผ ์ ํ์ ๊ตฌ์ฑ ์์์ ๊ฐ์ ๋ช ๊ฐ์ง ๊ฐ๋จํ ์ฌํญ์ ์ค์ ์ ๋์ด์ผ ํฉ๋๋ค.
์ด ์ ๋ต์ ์ฌ์ฉํ๋ฉด ํจ์ฌ ๋ ๋น ๋ฅด๊ฒ ๋์์ธ์ ๋ง๋ค ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์ ๋ ฅ ํ๋๋ฅผ ์์ฑํด์ผ ํ๋ ๊ฒฝ์ฐ ๊ธฐ๋ณธ ์ํ๋ก ์์ํ๊ณ ๋์ค์ ๋ค๋ฅธ ํ๋๋ฅผ ์ถ๊ฐํ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด, ์ ๋ ฅ ํ๋ ๋ด์์ ์ด๋ค ์์ด์ฝ์ ์ฌ์ฉํ ์ง ํ์คํ์ง ์์ ๊ฒฝ์ฐ 16x16 ์ ์ฌ๊ฐํ์ ๋ง๋ค๊ณ ํ์์ผ๋ก ์ฑ์ฐ๊ณ ๊ตฌ์ฑ ์์๋ก ๋ง๋ญ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์์ผ๋ก ๋์๊ฐ ์ ์๊ณ ์์ผ๋ก ์ด ์์ด์ฝ์ ๋ ์ฝ๊ฒ ์ ๋ฐ์ดํธํ ์ ์์ต๋๋ค.
..๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
๋น์ ์ด ์์์ผ ํ 10๊ฐ์ง ๊ธฐ๋ณธ UI ๋์์ธ ์์น
๋๋ถ๋ถ์ ์ฌ์ฉ์๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ๋๋ง ์ฑ์ด๋ ์ํํธ์จ์ด์ UI ๋์์ธ์ ์์์ฐจ๋ฆฝ๋๋ค. ์ด๋ฌํ ์ด์ ๋ก ์ข์ UI ๋์์ธ์ ๊ฑฐ์ ๋์ ๋์ง ์๊ณ ์ฌ์ฉ์๊ฐ ์ค๋จ ์์ด ์์ ์ ์ฐฉ์ํ ์ ์๋๋ก ํด์ค๋ค๊ณ ๋งํ ์ ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ UI ๋์์ธ ํ๋ก์ ํธ๊ฐ ๋ค์ํ ๋งํผ UI ๋์์ธ์ ๋ชจ๋ ์ข์ ์๋ ๋์ผํ ๊ธฐ๋ณธ ํฉ๊ธ๋ฅ ์ ๋ฐ๋ฅด๋ ๊ฒฝํฅ์ด ์์ต๋๋ค.
์ด ๊ธฐ์ฌ์์๋ ์์ ํ ๋งค๋๋ฝ๊ณ ๊ฑฐ์ ๊ฐ์งํ ์ ์๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํด ๋ฐ๋ผ์ผ ํ ๊ฐ์ฅ ์ค์ํ UI ๋์์ธ ์์น์ ์ดํด๋ด ๋๋ค.
10๊ฐ์ง ํ์ UI ๋์์ธ ์์น
ํจ๊ณผ์ ์ธ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๋์์ธ์ ์ฌ์ฉ์ ๊ฒฝํ์์ ๊ฐ๋ฅํ ๋ง์ ์ฅ์ ๋ฌผ, ๋ณ๋ชฉ ํ์, ๊ฑธ๋ฆผ๋ ๋ฐ ์ ์ฌ์ ์ธ ํผ๋ ์์ธ์ ์ ๊ฑฐํ๋ ๊ฒ์ ๋๋ค. ๋ฌด์๋ณด๋ค๋, ๋ชฉํ๋ ๋ชจ๋ ์ฌ์ฉ์๊ฐ ์ ์ฐํ๊ณ ์ง๊ด์ ์ผ๋ก ํ์ํ ์ ์๋ ํ๊ฒฝ์ ์กฐ์ฑํ๋ ๊ฒ์ด๋ฉฐ, ์ต์ํ์ ์๋์ผ๋ก ๋ชฉํ๋ฅผ ๋ฌ์ฑํ ์ ์๋๋ก ํ๋ ๊ฒ์ ๋๋ค.
๋ฌผ๋ก ๋ชจ๋ UI ์ค๊ณ ํ๋ก์ ํธ๋ง๋ค ๋ค๋ฆ ๋๋ค.ํนํ ๋ํ ์ผ์ ๊ดํด์๋์. ์๋ฅผ ๋ค์ด, ๋ชจ๋ฐ์ผ ์ฑ์ ์ ํฉํ ์๋ฃจ์ ์ด ๋ฐ์คํฌํฑ ์ํํธ์จ์ด๋ ์น ์ฌ์ดํธ์ ์ ํฉํ ์๋ฃจ์ ์ด๋ผ๊ณ ๋ ํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ข์ UI ๋์์ธ์ ์ผ๋ฐ์ ์ธ ์์น์ ๋ชจ๋ ํ๋ซํผ๊ณผ ํ๋ก์ ํธ์์ ์ผ๊ด๋๊ฒ ์ ์ง๋ฉ๋๋ค.
๋ค์์ ์์ ์ค์ธ ๊ฑฐ์ ๋ชจ๋ UI ๋์์ธ ํ๋ก์ ํธ์ ์ ์ฉํ ์ ์๋(์ค์ ๋ก ๊ทธ๋์ผ ํ๋) ์ผ๋ จ์ ๊ธฐ๋ณธ UI ๋์์ธ ์์น์ ๋๋ค. ์ํ์ ๋ฌด๋ฆ ์ฐ๊ณ ์ด ํฉ๊ธ๋ฅ ์ ๋ฌด์ํ์ธ์!
- 1) UI ๋์์ธ์ ๋จ์ํ๊ฒ ์ ์งํ์ธ์
- 2) ์์ธกํ๊ณ ์ ์ ํ์ธ์
- 3) ์ฌ์ฉ์๋ฅผ ์ด์ ์์ ์ํ์ธ์
- 4) ์ฒด๊ณ์ ์ด๊ณ ์ผ๊ด์ ์ด์ด์ผ ํฉ๋๋ค
- 5) ๋ถํ์ํ ๋ณต์ก์ฑ์ ํผํ์ธ์
- 6) ๋ช ํํ ์ด์ ํ๋ฅผ ์ ๊ณตํ์ธ์
- 7) ์ค์์ ๊ด๋ํ์ธ์
- 8) ๊ด๋ จ ํผ๋๋ฐฑ์ ์ ๊ณตํ์ธ์
- 9)๊ธฐ๋ฅ์ ์ฐ์ ์์๋ฅผ ์ง์ ํ์ธ์
- 10)์ ๊ทผ์ฑ์ ์ํด UI๋ฅผ ๋์์ธ
1. UI ๋์์ธ์ ๋จ์ํ๊ฒ ์ ์งํ์ธ์.
UI ๋์์ธ ํ๋ก์ธ์ค๋ ์ข ์ข ์ฌ๋ฏธ์์ต๋๋ค. ๊ทธ๋์ผ ํฉ๋๋ค. ๊ทธ๋ฌ๋ ๋ชฉํ๋ฅผ ์ฃผ์ํ๋ ๊ฒ์ด ์ค์ํ๋ฉฐ ๋์์ด๋์ ๊ฐ์ธ์ ์ธ ๋ง์กฑ๋๋ ํญ์ ์ด ๋ชฉ๋ก์ ๋งจ ์๋์ ์์ด์ผ ํฉ๋๋ค.
์๋ง๋ ๋ชจ๋ ์ฃผ์ UI ๋์์ธ ์์น ์ค ๊ฐ์ฅ ์ค์ํ ๊ฒ์ ๋๊ตฌ๋ฅผ ์ํด ์ค๊ณํ๋์ง, ๊ทธ ์ด์ ๊ฐ ๋ฌด์์ธ์ง ์์ง ์๋ ๊ฒ์ ๋๋ค. ์ข์ UI ๋์์ธ์ ์ค์ฉ์ ์ด๋ฉฐ ๊ฒฐ์ฝ ์ฅ์์ ์ด์ง ์์ต๋๋ค. ์ ๋ฉ๋๋ก์ด๊ฑฐ๋ ์ง๋์น๊ฒ ํ์์ ์ธ ๋์์ธ์ ๋ถํ์ํ ์ก์๋ง ์ ๋ฐํ๋ฉฐ, ์ฌ์ฉ์์ ์ค์ ๋ก ๊ด๋ จ๋ ์์๋ก๋ถํฐ ์ฃผ์๋ฅผ ๋ถ์ฐ์ํต๋๋ค.
UI ๋์์ธ์ ์ผ๋ถ๊ฐ ์ฌ์ฉ์์๊ฒ ์ค์ฉ์ ์ธ ๋ชฉ์ ์ ์ ๊ณตํ์ง ์๊ณ ์์ ์ ์ฐฝ์์ ์ทจํฅ๋ง์ ๋ง์กฑ์ํจ๋ค๋ฉด, ๊ทธ๋์๋ ์ ๋ฉ๋๋ค. ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ์์๋ก ๋์์ธ์ ์ ๋ฆฌํ์ธ์. ๋ถํ์ํ ์ฑ์ฅ์ ๋ชจ๋ ์ ๊ฑฐํ๊ณ ์ ๋์ ์ผ๋ก ํ์ํ ์์๋ง ๋จ๊ฒจ ๋์ด์ผ ํฉ๋๋ค.
2. ์์ธกํ๊ณ ์ ์ ํ์ธ์.
๊ทธ๋ฌ๋ ์ฌ์ฉ์์ ๊ด๋ จ๋ ๊ฒ์ด ๋ฌด์์ธ์ง ์ด๋ป๊ฒ ์ ์ ์์๊น์? ๊ฐ์ฅ ๋จผ์ ์ทจํด์ผ ํ UI ๋์์ธ ๋จ๊ณ ์ค ํ๋๋ ์ฌ์ฉ์์ ์ฌ์ฉ์์ ์๊ตฌ๋ฅผ ์์ ํ ์ดํดํ๋ ๊ฒ์ ๋๋ค. ์ด ์์ ์ ์๋ฃํ๋ฉด ์ฌ์ฉ์๊ฐ ๋ค์์ ๋ฌด์์ ํ๊ณ ์ถ์ดํ ์ง ์์ธกํ ์ ์๋ ์์น์ ์๊ฒ ๋ฉ๋๋ค.
์ด์ ์ฌ์ฉ์์๊ฒ ํ์ํ ๋๊ตฌ, ์ ๋ณด ๋ฐ ๋ฆฌ์์ค๋ฅผ ์ ํํ๊ฒ, ๊ทธ๋ฆฌ๊ณ ๊ทธ๋ค์ด ์ ํํ ํ์ํ ๋ ์ ๊ณตํ ์ ์์ต๋๋ค.
๋๋ ์ด๊ฒ์ด ์ฌ์ฉ์๊ฐ ์ํ๋ ๊ฒ๊ณผ ์ผ์นํ์ง ์๋ ๊ฒฝ์ฐ ๋์์ธ์ ์ด๊ธฐ ๋ถ๋ถ์ ๋ณ๊ฒฝํ์ฌ ์ฒ์๋ถํฐ ์์ ํ ๋ค๋ฅธ ๋ฐฉํฅ์ผ๋ก ์ ๋ํ๋๋ก ํ๋์ ์ ์ ํ ์ ์์ต๋๋ค.
3. ์ฌ์ฉ์๋ฅผ ์ด์ ์์ ์ํ์ธ์.
์ฌ์ฉ์๋ ์์ ์ด ์ค์ ๋ก ์ ์ดํ๊ณ ์๋์ง ์ฌ๋ถ์ ๊ด๊ณ์์ด ์์ ํ ์ ์ดํ ์ ์๋ค๊ณ ๋๊ปด์ผ ํฉ๋๋ค. ์ด๊ฒ์ UI๋ฅผ ๋ฐฐ๊ฒฝ์ผ๋ก ํ์ด๋ํ๊ฒ ๋ง๋๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ๋ฌผ๋ก ์ฌ์ฉ์๊ฐ ํ์ํ ๋ ํญ์ ์์ด์ผ ํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๊ทธ๋ค์ด ๊ธฐ๋ํ๋ ๋ฐ๋ก ๊ทธ๊ณณ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์๋ฌด๋ ์ธํฐํ์ด์ค๊ฐ ํน์ ํ๋์ ๊ฐ์ํ๊ฑฐ๋ ๊ฒฐ์ ์ ๋ด๋ฆฌ๋ ๊ฒ์ฒ๋ผ ๋๊ปด์๋ ์๋ฉ๋๋ค. ์ด๋ค ๊ฒฝ์ฐ์๋ ์ด๊ฒ์ด ์ ํํ ์งํ๋๊ณ ์๋ ๊ฒ์ผ ์๋ ์์ต๋๋ค.
4. ์ฒด๊ณ์ ์ด๊ณ ์ผ๊ด์ ์ด์ด์ผ ํฉ๋๋ค.
๋ง์คํฐํด์ผ ํ ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ UI ๋์์ธ ๊ฐ๋ ์ค ํ๋๋ ๋จ์ํ ์ผ๊ด์ฑ์ ์ ์งํ๋ ๊ฒ์ ๋๋ค. ๋ด๋ถ(์ฆ, ์์ฒด ํ๋ซํผ ์ ๋ฐ)๋ฟ๋ง ์๋๋ผ ๋ค๋ฅธ ๊ณณ์์ ์ฑํ๋ ์ ๊ณ ํ์ค๋ ๋ง์ฐฌ๊ฐ์ง์ ๋๋ค. ์ฐ์ํ UI ์ค๊ณ ํ๋ก์ ํธ๋ ์๋ ๋ฐํด๋ฅผ ์ฌ์ฐฝ์กฐํ๋ ๊ฒ์ด ์๋๋ผ ์๋ ๋ฐํด๋ฅผ ๊ฐ์ ํฉ๋๋ค. ์ฐ๋ฆฌ๋ ๋ชจ๋ ํ์ํ ๊ณณ์์ ํ์ ์ ์ถ๊ตฌํฉ๋๋ค. ๊ทธ๋ฌ๋ ๊ทธ๋ค์ด ๋งํ๋ฏ์ด "๊ณ ์ฅ๋ ๊ฒ์ด ์๋๋ผ๋ฉด ๊ณ ์น์ง ๋ง์ธ์."
์ฌ์ค ๊ณ ์ฅ๋๋๋ผ๋ ๊ณ ์น๊ณ ์ถ์ง ์์ ์๋ ์์ต๋๋ค. ์ด ์ ์ ๊ณ ๋ คํ์ธ์. ์ฌ๋ฌ๋ถ์ ์์ด๋์ด๊ฐ ๊ฐ๊ด์ ์ผ๋ก "๋ ๋์" ์ฆ ๋ ผ๋ฆฌ์ ์ธ ๊ฒ์ผ ์๋ ์์ง๋ง, ์ฌ์ฉ์๊ฐ ์์ํ๋ ๊ฒ๊ณผ ๋ค๋ฅผ ๊ฒฝ์ฐ ํผ๋๋ง ์ด๋ํ ๋ฟ์ ๋๋ค.
..๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
๋๊ธ
์๊ฒฌ์ ๋จ๊ฒจ์ฃผ์ธ์