๐ 2022๋ 5์ 1์ฃผ TOP3
1๏ธโฃ ๋ ์ค๋งํธํ UI ํคํธ๋ฅผ ๊ตฌ์ถํ๋ ๋ฐฉ๋ฒ
2๏ธโฃ 10๋ฒ์ UX ๋์์ด๋ ๊ตฌ์ง ๋ฉด์ ์ ํตํด ์๊ฒ ๋ ๊ฒ
3๏ธโฃ ๋ฐ์ํ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ธฐ ์ํ ์๋ฒฝํ ๊ฐ์ด๋
1๏ธโฃ ๋ ์ค๋งํธํ UI ํคํธ๋ฅผ ๊ตฌ์ถํ๋ ๋ฐฉ๋ฒ
ํผ๊ทธ๋ง ํ ํฐ๊ณผ ์คํ์ผ๋ฌ ํ๋ฌ๊ทธ์ธ์ผ๋ก
์ต๊ทผ์ ์ ๋ ํผ๊ทธ๋ง์ ๋์์ธ ๋ณด์ผ๋ฌ ํ๋ ์ดํธ๋ฅผ ๊ณต๊ฐํ๊ณ , ์ ๋ง์ ๋์์ธ ํ๋ก์ธ์ค๋ฅผ ์์ํ๊ธฐ ์ํด ์ด๊ฒ์ ๋ง๋ค์์ต๋๋ค. ์์ ๋กญ๊ฒ ์ฌ์ฉํด ๋ณด์๊ณ , ๊ฐ์ ํ ์ ์๋ ๋ฐฉ๋ฒ์ ๊ดํ ํผ๋๋ฐฑ์ ๋ถํ๋๋ฆฝ๋๋ค.
๋ช ๋ฌ ๋์ ์ ๋ ์ ํ๋ก์ธ์ค๋ฅผ ์ถ์ ํ๊ธฐ ์์ํ์ต๋๋ค. ๋ฌผ๋ก ๋ชจ๋ ํ๋ก์ ํธ๋ ๋ค๋ฅด์ง๋ง, ๋ง์ ํ๋ก์ ํธ์์ ์ ํ๋ก์ธ์ค ์ค ์ผ๋ถ๊ฐ ๋์ผํ๋ค๋ ๊ฒ์ ์๊ฒ ๋์์ต๋๋ค. ๊ทธ๋์ ์ ๋ ๋ชจ๋ ํ๋ก์ ํธ์ ๋ฒ ์ด์ค๋ก ์ฌ์ฉํ ์คํํฐ ํคํธ๋ (์ค๊ณ ์์คํ ์ด ์๋)๋ณด์ผ๋ฌ ํ๋ ์ดํธ ๊ฐ์ ๊ฒ์ ๋ง๋ค๊น ์๊ฐํ์ต๋๋ค. ์ฒ์์๋ ๊ณต๊ฐ๋์ด ์๋ ์ผ๋ถ UI ํคํธ๊ฐ ์ ๊ฐ ํ์ํ ๊ฒ์ ์ค ์ ์์ ๊ฑฐ๋ผ๊ณ ์๊ฐํ์ต๋๋ค. ํ์ง๋ง ์ ์ด๋ ์ ๊ฐ ์ฐพ๋ ๊ฒ์ ์ฐพ์ ์ ์์์ต๋๋ค.
์ฐธ๊ณ ๋ก Skeleton์ CSS Boilerplate๊ฐ ์ข์ ์์ ๋๋ค. ์ด๋ ๊ฐ๋ณ๊ณ , ๋ฐ์ํ ๊ทธ๋ฆฌ๋ ์์คํ , ์์ ์์ ์คํ์ผ, ๋ฐ์ํ ํ ์คํธ ๋ถ๋ฅ ์ฒด๊ณ์ ์ผ๋ถ ์ฌ์ฉ์ฑ ๋ถ๋ฅ ์ฒด๊ณ๋ฅผ ๊ฐ์ถ๊ณ ์์ต๋๋ค. ๊ทธ๋ฟ์ ๋๋ค. ์์์ด๋ ์ด๋ฏธ์ง์ ๊ดํ 100๊ฐ์ง ๋ค๋ฅธ ์คํ์ผ๊ณผ ์ปดํฌ๋์ธ ๋ฑ์ ์์ต๋๋ค. ์์ํ๋ ๋ฐ ํ์ํ ๊ฐ์ฅ ๊ฐ๋จํ ํญ๋ชฉ๋ง ์์ผ๋ฉด ๋๋ฉฐ ๊ฑฐ๊ธฐ์๋ถํฐ ๋์๊ฐ๋ฉด ๋ฉ๋๋ค. ์คํดํ์ง ๋ง์ธ์. ํฐ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ์ง ๋ง๋ผ๋ ๊ฒ์ ์๋๋๋ค(ํญ์ ํ์ํ ๊ฒ์ ๋๋ค).
๋ณด์ผ๋ฌ ํ๋ ์ดํธ๊ฐ ๊ฐ์ถฐ์ผ ํ๋ค๊ณ ์๊ฐํ๋ ํต์ฌ์ผ๋ก ๋์ด๊ฐ ๋ณด๊ฒ ์ต๋๋ค.
- ์์/์์์ ๋น ๋ฅด๊ฒ ๋ง๋ค๊ณ ๋ณ๊ฒฝํ๊ธฐ
- ์์๊ณผ ํ ์คํธ ์คํ์ผ ๋งํฌ๊ฑธ๊ธฐ
- ๋ค๋ฅธ ํ ์คํธ ์คํ์ผ๊ณผ ํจ๊ป ์ฐธ์กฐ๋๋ ํฌ๊ด์ ์ธ ํ ์คํธ ์คํ์ผ
- ๊ทธ๋ฆผ์์ ํ ๋๋ฆฌ ๋ฐ์ง๋ฆ์ ๊ดํ ํฌ๊ด์ ์ธ ์คํ์ผ
๋ฐ๋ผ์ ๊ฐ์ฅ ํฐ ๋ฌธ์ ๋ ์์ ๋์ด๋ ๊ฑฐ์ ๋ชจ๋ ์ ์ ๋ํด ํผ๊ทธ๋ง์ ๋ด๋ถ ์ต์ ์ด ์ ํ๋์ด ์๋ค๋ ๊ฒ์ ๋๋ค. ๊ทธ๋์ ์ ์๊ฒ ๋์์ด ๋ ๋งํ ๋ช ๊ฐ์ง ํ๋ฌ๊ทธ์ธ์ ์ฐพ์๊ณ , Figma tokens plugin์ ๋ฐ๊ฒฌํ์ต๋๋ค.
์ด๋ ํ ๋๋ฆฌ ๋ฐ์ง๋ฆ ๋๋ ๊ณต๊ฐ ๊ตฌ์ฑ ๋จ์๋ถํฐ ๋ค๋ฅธ ํ ํฐ์ ์ฐธ์กฐํ ์ ์๋ ์๋งจํฑ ์์๊ณผ ํ์ดํฌ๊ทธ๋ํผ ์คํ์ผ์ ์ด๋ฅด๊ธฐ๊น์ง, ์ ์ฒด ๋ฒ์์ ๋์์ธ ์ต์ ์ ์ฌ์ฉ๋ ์ ์๋ ๋์์ธ ํ ํฐ์ ์ฌ์ฉํ ์ ์๋ ๋ฅ๋ ฅ์ ์ค ๊ฒ์ ๋๋ค. ์ ๋ ์ด ํ๋ฌ๊ทธ์ธ์ ์ค์นํ๊ณ , ๋ณด์ผ๋ฌ ํ๋ ์ดํธ๋ฅผ ์ ์ํ๊ธฐ ์์ํ์ต๋๋ค.
์๋๋ ๊ทธ ๊ณผ์ ์ ๊ดํ ์์ธํ ๋ด์ฉ์ ๋๋ค.
์์
์์์ ๊ดํด์๋ ์ผ๋ฐ์ ์ผ๋ก ๊ธฐ๋ณธ ์์์ด ์๋ "์์ ์ ๊ทผ ๋ฐฉ์โ์ ์ทจํ๊ณ , ๊ทธ๋ก๋ถํฐ ๋ค๋ฅธ ์์์ ์์ฑํ ๋ค์ ์ค์ฑ ์์กฐ(ํ์)์ ์์ ํ๋ ํธ์ ๊ฒฐํฉํฉ๋๋ค.
๋๋ก๋ ๋ณด์กฐ ์์๋ ์ฌ์ฉํฉ๋๋ค. ์ด๋ฌํ ์ ๊ทผ ๋ฐฉ์์ Adam Wathans์ Steve Shoger์ ์ฑ Refactoring UI์์ ๊ฐ์ ธ์จ ๊ฒ์ ๋๋ค. (์ ๋ ์ด ์ฑ ์ ๊ฐ๋ ฅํ ์ถ์ฒํฉ๋๋ค. ์ด ์ฑ ์์ ํค์ ๋ํด ๋ฐฐ์ ์ต๋๋ค.)
์ ๋ CSS์์ ํ๋์ ๋ณ์๋ฅผ ๋ณ๊ฒฝํ๋ฉด ๋ค๋ฅธ ๋ชจ๋ ์์์ด ๋ณ๊ฒฝ๋๋ ๊ฒ๊ณผ ๊ฐ์ด ์ค๋งํธํ๊ฒ ์๋ํ๋ ์์ ์์คํ ์ ์ํ์ต๋๋ค. ์ด๋ฅผ ์ํด HSL ํ์์ ๊ธฐ๋ฐ์ผ๋ก ํ๋ "Figma ํ ํฐ ํ๋ฌ๊ทธ์ธ" ์์ ๋ถ๋ฅ ์ฒด๊ณ๋ก ๊ตฌ์ถํ์ต๋๋ค. ํ ํฐ ํ๋ฌ๊ทธ์ธ์์ "๋ง์คํฐ ๊ธฐ๋ณธ ์์ ๊ฐ"์ ๋ณ๊ฒฝํ๋ฉด ๊ธฐ๋ณธ ์์์ ๋ค๋ฅธ 9๊ฐ์ง ์์์ด ๊ทธ์ ๋ฐ๋ผ ๋ณ๊ฒฝ๋ฉ๋๋ค. ๋ํ ์์์ ๋ค๋ฅธ ํ ์คํธ ์คํ์ผ์ ์ฐ๊ฒฐ์ํฌ ์ ์์ผ๋ฉฐ, ๊ทธ๊ฒ๋ค๋ ๋ณ๊ฒฝ๋ฉ๋๋ค.
์ ํ
์ ํ ์คํธ ์คํ์ผ์ ๊ดํ ํฌ๊ธฐ ์กฐ์ ์์คํ ์ ํฌ๊ฒ ๋ณํ์ง ์์ผ๋ฏ๋ก ๊ฐ์ฅ ์์ฃผ ์ฌ์ฉํ๋ 3๊ฐ์ง ํ์ค์ ๋ง๋ ํ๋ฆฌ์ ์ ๊ตฌ์ถํฉ๋๋ค.
- ์น 4px ๊ธฐ๋ฐ
- iOS โ ํด๋จผ ์ธํฐํ์ด์ค ์ง์นจ
- Android- ๋จธํฐ๋ฆฌ์ผ ๊ฐ์ด๋๋ผ์ธ
.. ๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
2๏ธโฃ 10๋ฒ์ UX ๋์์ด๋ ๊ตฌ์ง ๋ฉด์ ์ ํตํด ์๊ฒ ๋ ๊ฒ
UX ๋์์ธ ์ง๋ฌด์ ์ง์ํ ์ง ํ ๋ฌ์ด ์ง๋ฌ๊ณ , 10๋ฒ์ ๋ฉด์ ์ ๊ฑฐ์ณค์ต๋๋ค. ์ ๊ฐ ์ด ๊ณผ์ ์ ํตํด ๋ฐฐ์ด ๊ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๋ง์ฝ ์ฌ๋ฌ๋ถ์ด ์ ๋ฅผ ํ๋ก์ฐํ๊ณ ๊ณ์ ๋ค๋ฉด, ์ง๊ธ์ฏค ์ ๊ฐ 2๊ฐ์ UX ๋์์ธ ์๊ฒฉ์ฆ์ ๋ง์ณค๋ค๋ ๊ฒ์ ์์ค ๊ฒ๋๋ค. ๊ทธ์ค ํ๋๋ Google UX ๋์์ธ ์๊ฒฉ์ฆ์ด๊ณ , ๋ค๋ฅธ ํ๋๋ UX ์ ๋ต, UX ๋ผ์ดํ ๊ณผ UI ๋์์ธ์ ๋ ์ง์คํ ์ ์์๋ ๋ธ๋ผ์ง UX ๋์์ธ ์๊ฒฉ์ฆ์ด์์ต๋๋ค.
์ ๋ ๋ฒํ ํ์๋ฅผ ์ทจ๋ํ๊ธฐ ๋๋ฌธ์, UX ๋์์ธ์ผ๋ก ์ง๋ฌด๋ฅผ ์ ํํ๋ ๊ฒ์ด ์ฌ๋ฏธ์๊ณ ๋ ํ๋ ์ฌ์ ์ด์์ต๋๋ค.
ํ์ง๋ง ๋ง์ ์ ๋ฌธ๊ฐ๊ฐ ์ง๊ธ ์ด๋ฌํ ์ ํ์ ํ๊ณ ์๋ค๋ ๊ฒ์ ์๊ณ ์๊ณ , ๊ทธ๊ฒ์ด ์ ๊ฐ ์ฌ๊ธฐ ์๋ ์ด์ ์ ๋๋ค. ์ฐ๋ฆฌ ํจ๊ป ์ด ์ฌ์ ์ ํค์ณ ๋๊ฐ ๋ด์.
์ด ๊ธฐ์ฌ์์๋ ๋ค์๊ณผ ๊ฐ์ ๋ด์ฉ์ ๊ณต์ ํ๊ฒ ์ต๋๋ค:
- LinkedIn์์ ํค๋ํํฐ๊ฐ ์ฌ๋ฌ๋ถ์๊ฒ ์ฐ๋ฝํ๋๋ก ํ๋ ๋ฐฉ๋ฒ
- ๋ฉด์ ์ ์ ๋ฆฌํ๊ณ ์ค๋นํ๋ฉฐ, ๊ฐ์ฅ ์ค์ํ ๊ฒ์ธ ๋ฉด์ ์ง๋ฌธ์ ์ฌ๋ฐ๋ฅด๊ฒ ๋๋ตํ๋ ๋ฐฉ๋ฒ
์ ๋ ์ ์ฌ์ ์ ๊ณต์ ํ๊ธฐ ์ํด ์ฌ๊ธฐ์ ์์ผ๋ฉฐ, ๋ฐ๋ผ๊ฑด๋ ์ฌ๋ฌ๋ถ์ ์ ์ ๊ฐ์ ์ค์๋ฅผ ํ์ง ์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค.
๋ฉด์ ์ ์ฐจ๋ ๋ณดํต ์ด๋ป๊ฒ ๋๋์? ๋จผ์ ํค๋ํํฐ๊ฐ ์ฐพ์์ค๊ณ , ์ด๋ค ๊ฒฝ์ฐ์๋ ์ฌ๋ฌ๋ถ์ด ์ด๋ ฅ์๋ฅผ ๋ณด๋ด๋ฉด ํค๋ํํฐ๊ฐ ๋น์ ์๊ฒ ๋ฌธ์๋ฅผ ๋ณด๋ด๊ฑฐ๋ LinkedIn ๋ฑ์์ ์ฌ๋ฌ๋ถ์ ์ฐพ๋ค๊ฐ ๋ฌธ์๋ฅผ ๋ณด๋ผ ๊ฒ์ ๋๋ค. Linkedin์์ ๋ฌธ์๋ฅผ ๋ณด๋ธ ํ ์ ํ๋ฅผ ๊ฑธ๊ฑฐ๋ ์ง์ ์ฌ๋ฌ๋ถ์ ์ ํ์ ์ด๋ฉ์ผ๋ก ๋ฌธ์๋ฅผ ๋ณด๋ผ ์๋ ์์ต๋๋ค. ๋ธ๋ผ์ง์์๋ ์ผ๋ฐ์ ์ผ๋ก WhatsApp์์ ๋ฌธ์๋ฅผ ๋ณด๋ด๋ฏ๋ก ํ๋กํ ์ฌ์ง์ ์ ๊ฒฝ ์ฐ์๊ธธ ๋ฐ๋๋๋ค.
ํค๋ํํฐ ๋ฉด์
์ ๊ฒฝํ์ ๋ฐ๋ฅด๋ฉด ์ด๋ฌํ ๋ฉด์ ์ ๋งค์ฐ ๋น ๋ฅด๊ณ ๋น๊ณต์์ ์ด์์ผ๋ฉฐ, ๋๋ก๋ ์ ํ ํตํ๋ก, ๋๋ถ๋ถ์ 30๋ถ์ ๋์ง ์๋ ํ์ ํตํ๋ก ์งํ๋์์ต๋๋ค.
๋๋ถ๋ถ ํค๋ํํฐ๋ ๊ธฐ์ ์ ์ธ UX ๋์์ธ ์ ์ฐจ์ ๋ํด ์์ง ๋ชปํ๊ณ , ํ์ฌ๊ฐ ์ฐพ๊ณ ์๋ ์ ๋ณด๋ง ๊ฐ๊ณ ์์ผ๋ฉฐ, ์ฌ๋ฌ๋ถ์ ์ด๋ฌํ ์๊ตฌ ์ฌํญ์ ์ ํฉํ๋ค๋ ๊ฒ์ ์ฆ๋ช ํด์ผ ํฉ๋๋ค.
- ์คํฌ(๋ฐฐ๊ฒฝ)
- ํฌ๋ง ์ฐ๋ด
- ์ง๋ฌด ๊ฒฝํ
- ๋ฌธํ์ ์ ํฉ์ฑ(์ด๋ค ๊ฒฝ์ฐ์๋ ๋์ค์ผ๋ก ๋จ๊ฒจ๋๊ธฐ๋ ํฉ๋๋ค.)
๋ฉด์ ํ, ํค๋ํํฐ๊ฐ ์ฌ๋ฌ๋ถ์ ์ ๋ณด๋ฅผ ํ์ฌ์ ๋ณด๋ด๋ฉด, ๊ทธ๋ค์ ๋น์ ์๊ฒ ๋ค์ ๋ฉด์ ์ ๋ณผ ์๋ ์๊ณ ๊ทธ๋ ์ง ์์ ์๋ ์์ต๋๋ค.
๋ง์ฝ ์ฌ๋ฌ๋ถ์ด ์๋ ๊ฐ์ ๊ฒฝํ์ด ์๋๋ฐ ์ค๊ฐ ์์ค์ ์ง์ฑ ์ ๋งก์ ์ํ์ด ์๋ ๊ฒฝ์ฐ, ๊ทธ๋ค์ ๋ค์ ์ ํ๋ฅผ ๊ฑธ์ง ์์ ๊ฐ๋ฅ์ฑ์ด ํฌ์ง๋ง, ์ด๋ ๊ณผ์ ์ ์ผ๋ถ์ผ ๋ฟ์ด๋ฏ๋ก ์์์ ์์ง ๋ง๊ณ ๊ณ์ ์ง์ํ์ธ์.
์์ํ๊ธฐ ์ ์ ๊ฐ๋จํ ํ
์ง์ํ๋ ๋ชจ๋ ์ง๋ฌด์ ๋ํด ์ง๋ฌด ์ค๋ช ์ ์ ์ฅํ๊ณ , ์ง์ํ๋ ๋์ ์์ํ ํ ์คํธ ๋๋ ๋ต๋ณํ ์ง๋ฌธ์ ๋ํด ๋ฉ๋ชจํ์ธ์. ๋ชจ๋ ์ง๋ฌด ์ค๋ช ์ ๋ฉด์ ์ ๊ท์คํ ์ ๋ณด๊ฐ ๋ ์ ์์ผ๋ฏ๋ก ์ ์ฅํ๋ ๊ฒ์ ์์ง ๋ง์ธ์.
.. ๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
3๏ธโฃ ๋ฐ์ํ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ธฐ ์ํ ์๋ฒฝํ ๊ฐ์ด๋
๋ฐ์ํ ์น ๋์์ธ์ ๋ชจ๋ ๋๋ฐ์ด์ค ๋๋ ๋ธ๋ผ์ฐ์ ์ ํฌ๊ธฐ์ ๊ธฐ๋ฅ์ ๋ง๊ฒ ์กฐ์ ๋๋ฏ๋ก ๋ฐฉ๋ฌธ์๊ฐ ํญ์ ์ต์์ ์ฌ์ดํธ ๋ฒ์ ์ ๋ณผ ์ ์์ต๋๋ค. ์ค๋๋ ์์ฅ์์ ์ฌ์ฉํ ์ ์๋ ์ฅ์น, ๋ธ๋ผ์ฐ์ , ํด์๋๊ฐ ๋๋ฌด ๋ค์ํ๊ธฐ ๋๋ฌธ์ ๋ฐ์ํ ์น ์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๊ฒ์ ์ด์ ์ฑ๊ณต์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋๋ ๋ฐ ํ์์ ์ ๋๋ค.
์๋ก์ด ๋ฐ์ํ ํ๋ก์ ํธ๋ฅผ ์์ํ๋ ค๋ ๋์์ด๋ ๋๋ ์น ์ ์์๋ผ๋ฉด ํ๋์ ๊ณ ์ ๋ ์ต์ข ๋ ์ด์์์ ๊ตฌ์ํ๊ธฐ๋ณด๋ค ์๋์ ์ธ ํฌ๊ธฐ์ ๋น์จ๋ก ์๊ฐํ๋ ๋ฐ ์ ์ํด์ผ ํ ๊ฒ์ ๋๋ค. ๋ฐ์ํ ์น ์ฌ์ดํธ๋ฅผ ์ฒ์๋ถํฐ ๋๊น์ง ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ํ ์ ๋ฌธ๊ฐ ํ์ ์ฝ๊ณ ๊ฐ์ธ์.
๋ฐ์ํ ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ
- ์์ด์ด ํ๋ ์์ ์์ํฉ๋๋ค.
- ์ค๋จ์ (breakpoints)์ ์ ์ํฉ๋๋ค.
- ์์ ํ๋ฉด๋ถํฐ ๋์์ธํ์ธ์.
- ๊ฐ๋ณ ๊ทธ๋ฆฌ๋๋ฅผ ๋ง๋ญ๋๋ค.
- ๋ฐ์ํ ๋์์ธ์ ๋ง๊ฒ ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํฉ๋๋ค.
- ๋ฐ์์ฑ์ด ๋ฐ์ด๋ ์ค๊ณ๋ฅผ ์ํด ํ์ดํฌ๊ทธ๋ํผ๋ฅผ ์ต์ ํํฉ๋๋ค.
1. ์์ด์ดํ๋ ์ ์์ํ๊ธฐ
๋ฐ์ํ ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๊ณผ์ ์ ํญ์ ๋ ์ด์์ ๊ณํ ์ธ์ฐ๊ธฐ๋ถํฐ ์์๋๋ฉฐ ์ด๊ธฐ ๋ ์ด์์์ ์์ด์ดํ๋ ์๋ณด๋ค ๋ ์ข์ ๋๊ตฌ๋ ์์ต๋๋ค. ์์ด์ดํ๋ ์์ ๋ฏธ๋ ๋์์ธ์ ๋์์ ํํ์ด๋ฉฐ, ์กฐ์ง์ ์ด๋ฉด์๋ ์ถฉ์ค๋๊ฐ ๋ฎ์ ๋ฐฉ์์ผ๋ก ๋ ์ด์์์ ๊ตฌ์กฐํํ๋ ํธ๋ฆฌํ ๋ฐฉ๋ฒ์ ๋๋ค.
๋ค์์ ์์ด์ดํ๋ ์ด๋ฐ ์ ๊ณ ๋ คํด์ผ ํ ๋ช ๊ฐ์ง ์ค์ํ ์ฌํญ์ ๋๋ค.
โ๏ธ WIREFRAME์ ๊ดํ์ด ๋์ง ์๊ฒ ์ ์งํฉ๋๋ค.
์๋์ ๋จ์์ฑ์ ์์ด์ดํ๋ ์์ ๋ ๊ฐ์ง ์ฃผ์ ์์ฑ์ ๋๋ค. ์ ํ ์ค๊ณ์ ์ด๊ธฐ ๋จ๊ณ์์ ์ฌ์ฉ์์๊ฒ ๊ฐ์ฅ ์ ํฉํ ์๋ฃจ์ ์ ์คํํ๊ณ ํ์ธํด์ผ ํฉ๋๋ค. ์์ด์ดํ๋ ์ ํฝ์ ์ ์๋ฒฝํ๊ฒ ๋ง๋๋ ๋ฐ ์ถ๊ฐ ์๊ฐ์ ์๋นํ์ง ๋ง์ธ์. ๋์ ๋ ์ด์์์ ์์ฑํ๊ณ ๋ฏธํ๋ณด๋ค๋ ๊ธฐ๋ฅ ๋ฐ ์ ๋ณด ์ํคํ ์ฒ์ ์ค์ ์ ๋๊ณ ๋์ ๊ณ ๊ฐ ๋ฐ ์ดํด ๊ด๊ณ์์ ํจ๊ป ์ ํจ์ฑ์ ๊ฒ์ฌํ์ธ์.
โ๏ธ ๋ค์ํ ๋๋ฐ์ด์ค์ ๋ํ ์์ด์ดํ๋ ์ ์์ฑ
๋ชจ๋ฐ์ผ, ํ๋ธ๋ฆฟ, ๋ฐ์คํฌํ์ ์ฌ๋๋ค์ด ์น์ ํ์ํ๋ ๋ฐ ์ฌ์ฉํ๋ ๊ฐ์ฅ ์ผ๋ฐ์ ์ธ ์ ํ์ ์ฅ์น์ ๋๋ค. ์์ด์ดํ๋ ์์ ์์ฑํ ๋ ์ธ ๊ทธ๋ฃน ๋ชจ๋๋ฅผ ์๋ํ๊ณ ์ฃผ์๋ฅผ ์ง์ ํ์ฌ ๋์์ธ์ด ์ด๋ค ๊ทธ๋ฃน์ ๊ฑธ์ณ ์ ํ์ฅ๋๋์ง ํ์ธํ์ธ์.
2. ์ค๋จ์ (breakpoints) ์ ์ํ๊ธฐ
์ค๋จ์ ์ ๋ฐ์ํ ๋์์ธ์ ๋น๋ฉ ๋ธ๋ก์ผ๋ก ๋ฐ์ํ ์น ์ฌ์ดํธ๋ฅผ ๋ง๋ค ๋ ์ค์ํ ๋จ๊ณ์ ๋๋ค. ์ค๋จ์ ์ ๋ฐฉ๋ฌธ์๊ฐ ๋ชจ๋ ํ์ ์์ญ ํฌ๊ธฐ์์ ํญ์ ๊ฐ๋ฅํ ์ต์์ ์ฌ์ดํธ ๋ฒ์ ์ ๋ณผ ์ ์๋๋ก ๋์์ธ์ด ์กฐ์ ๋๋ ํฝ์ ๊ฐ์ ๋๋ค.
์ค๋จ์ ์ CSS ๋ฏธ๋์ด ์ฟผ๋ฆฌ ๋๋น(์ต์ ๋๋น ๋ฐ ์ต๋ ๋๋น) ๋ฐ ๋์ด(์ต์ ๋์ด ๋ฐ ์ต๋ ๋์ด)๋ก ์ ์๋ฉ๋๋ค. ์ด๋ฌํ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ํน์ ๋ฏธ๋์ด ์์ฑ์ด ์ ์ฉ๋๋ ์กฐ๊ฑด์ ๊ฒฐ์ ํ๋ฏ๋ก ์ฝํ ์ธ ๋ฅผ ๋ ๋๋งํ๋ ์ฅ์น ๋๋ ๋ธ๋ผ์ฐ์ ์ ํ์ ๋ฐ๋ผ ์คํ์ผ์ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค.
Editor X์์ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๋ ๊ฒฝ์ฐ ๋ฐ์คํฌํฑ(1,001ํฝ์ ์ด์), ํ๋ธ๋ฆฟ(751-1,000ํฝ์ ) ๋ฐ ๋ชจ๋ฐ์ผ(350-750ํฝ์ )๊ณผ ๊ฐ์ 3๊ฐ์ ๊ธฐ๋ณธ ์ค๋จ์ ์ด ์์ต๋๋ค. ๊ธฐ์กด ์ค๋จ์ ์ ํธ์งํ๊ฑฐ๋ ์ฝ๋ ์์ด ํ๋ก์ ํธ์ ์๊ตฌ ์ฌํญ์ ๋ง๊ฒ ์ฌ์ฉ์ ์ง์ ์ค๋จ์ ์ ์ถ๊ฐํ ์๋ ์์ต๋๋ค.
๋ณดํธ์ ์ธ ์ค๋จ์ ์ธํธ๋ ์์ง๋ง ์ ํํ ๋ ๋ฐ๋ฅผ ์ ์๋ ๋ช ๊ฐ์ง ๊ถ์ฅ ์ฌํญ์ด ์์ต๋๋ค.
๊ฐ๋ฅํ ์ต์ํ์ ์ค๋จ์ ์๋ฅผ ์ ์งํ๋ ค๊ณ ํฉ๋๋ค. ๋์์ด๋๋ ์ค๋จ์ ๊ณผ ์ผ์นํ๋๋ก ์ฝํ ์ธ ๋ฅผ ์กฐ์ ํด์ผ ํ๋ฏ๋ก ์ต๋ ์ฅ์น ์ ์ฐ์ฑ์ ์ํด ์ฝ 3๊ฐ์ ์ค๋จ์ ์ ์ํด ๋ ธ๋ ฅํด์ผ ํฉ๋๋ค.
์ค๋จ์ ์ ์ ํํ๋ ์ฃผ์ ๊ธฐ์ค์ ์ฅ์น๊ฐ ์๋๋ผ ๋ณด์ ํ๊ณ ์๋ ์ฝํ ์ธ ์ฌ์ผ ํฉ๋๋ค. ์ฝํ ์ธ ๋ ๋ ์ด์์์ด ์ปจํ ์ด๋์ ๋ง๊ฒ ์กฐ์ ๋๋ ๋ฐฉ์์ ๊ฒฐ์ ํด์ผ ํฉ๋๋ค.
โ๏ธ ๋ชจ๋ ๋ทฐํฌํธ์ ๋ํ ๋์์ธ ์ปค์คํ ๋ง์ด์ฆ
๋ค์ํ ์ค๋จ์ ์์ ํ์ํ๊ฑฐ๋ ์จ๊ธธ ํญ๋ชฉ์ ๋ํด ์๋์ ์ด์ด์ผ ํฉ๋๋ค. ์๋ฅผ ๋ค์ด ๋ชจ๋ฐ์ผ์์ ์ผ๋ฐ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ์ต์์ ํ์ ์ต์ ์ ์จ๊ธฐ๊ณ ๋์ ํ๋ฒ๊ฑฐ ๋ฉ๋ด๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ์ฌ์ฉํ๋ฉด ํ๋ฉด์ ๊ณต๊ฐ์ ๋ ๋ง์ด ์ ์ฝํ ์ ์๊ณ ์ฝํ ์ธ ์ค์ฌ์ ๊ฒฝํ์ ํ ์ ์์ต๋๋ค. ๋์์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ํดํ ์ ์๋ ์ฝํ ์ธ ๋ฅผ ์จ๊ธฐ์ง ์๋๋ก ํฉ๋๋ค. .. ๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
..๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
๋๊ธ
์๊ฒฌ์ ๋จ๊ฒจ์ฃผ์ธ์