๐ 2024๋ 4์ 4์ฃผ TOP3
1๏ธโฃ ๋ด๋ก ๋์์ธ - ๊ฐ์ ์ ๋์์ธ์ ๋ น์ฌ๋ด๋ ๋จ๊ณ๋ณ ๊ฐ์ด๋
2๏ธโฃ ์คํํธ์ MVP - ๊ฒฝ์๋ ฅ์๋ ํ๋ก๋ํธ ๋ง๋ค๊ธฐ
3๏ธโฃ UI ๋์์ด๋๊ฐ Flexbox์ CSS Grid๋ฅผ ์ดํดํด์ผ ํ๋ ์ด์
1๏ธโฃ ๋ด๋ก ๋์์ธ - ๊ฐ์ ์ ๋์์ธ์ ๋ น์ฌ๋ด๋ ๋จ๊ณ๋ณ ๊ฐ์ด๋
์ ๊ฐ ์ฒ์์ผ๋ก ํ ๋จธ๋์ ํจ๊ป ๋ฐ๋์ ์ ํ ์คํ ์ด์ ๋ค์ด์ฐ์ ๋, ์ ๋ฅผ ๊ฐ์ธ๋ ํน๋ณํ ๋ถ์๊ธฐ๊ฐ ์์์ต๋๋ค. ๋ด ๋๊ธธ์ ์ฌ๋ก์ก์ ๊ฒ์ ๋จ์ํ ๋ฏธ๋๋ฉํ ํฐํฌ ๋ชฉ์ฌ ํ ์ด๋ธ์ด๋ ์ธ๋ จ๋ ๋งฅ๋ถ๋ค ๋๋ฌธ๋ง์ด ์๋์์ต๋๋ค โ ๊ณต๊ธฐ ์ค์ ๋ฌด์ธ๊ฐ ์์์ต๋๋ค.
์ ์์์ผ๊น์? ์๋์์ต๋๋ค.
์ ํ ์คํ ์ด๋ ์๊ทน์ ์ธ์ฌํ๊ฒ ์กฐ์ ํฉ๋๋ค. ์์ํ ํฅ โ ํธ์ํจ์ ๋๋ ์ ์๋๋ก ์ค๊ณ๋์์ต๋๋ค. ํ์ ์ ์ ๋๋ค. ๋ฏธ๋ ์งํฅ์ ์ธ ๊ฒ์ ์ผ๋ถ์ ๋๋ค. ๋ง์ ์์ง์ ์ธ ๋ธ๋๋์ ๋ง์ฐฌ๊ฐ์ง๋ก, ์ ํ์ ์ฌ๋ฐ๋ฅธ ๊ฐ์ ์ ๋ถ๋ฌ์ผ์ผํค๋ ๊ฒ์ด ์ผ๋ง๋ ํฐ ์ํฅ์ ๋ฏธ์น๋์ง ์ ์๊ณ ์์ต๋๋ค. ๊ทธ๊ฒ์ ๊ฐ์ ์ ์๊ทนํ๊ณ ๋ธ๋๋์์ ์ฐ๊ฒฐ์ ์ฌํ์ํค๋๋ก ๋ง๋ค์ด์ง ๊ฐ๊ฐ์ ๊ฒฝํ์ ๋๋ค.
๋์์ธ์ ์๋๋ฅผ ํํํ๋ ๊ฒ์ ๋๋ค. โ Jared Spool
๋ชจ๋ ๋งค์ฅ, ๋ชจ๋ ์ ํ, ๋ชจ๋ ๊ฒฝํ์ ์๋์ ์ผ๋ก ํน์ ๊ฐ์ ์ ๋ถ๋ฌ์ผ์ผํฌ ์ ์์ต๋๋ค. ์ฌ๋ฌ๋ถ์ ์๋ฌด ์ค ์ผ๋ถ๋ ์ฌ์ฉ์์ ๊ฒฝํ์ ๋ น์ฌ๋ฃ๊ณ ์ ํ๋ ๊ฐ์ ์ ์ธต์ ์ ์ํ๋ ๊ฒ์ ๋๋ค.
์ด ๊ฐ์ด๋๊ฐ ๋์์ด ๋ ๊ฒ์ ๋๋ค.
1๋จ๊ณ: ๊ฐ์ ๋ฐํด๋ฅผ ์ฐ๊ตฌํ๊ธฐ
๊ฐ์ ๋ฐํด๋ ๊ธฐ๋ณธ์ ์ธ ๊ฐ์ ๋ถํฐ ๋ ๋ณต์กํ ์ํ์ ์ด๋ฅด๊ธฐ๊น์ง ์ธ๊ฐ์ ๊ฐ์ ์คํํธ๋ผ์ ์ค๋ช ํ๋ ์๊ฐ์ ๋๊ตฌ์ ๋๋ค. ์ด๊ฒ์ ์ฌ๋ฌ๋ถ์ด ๋ถ๋ฌ์ผ์ผํค๊ณ ์ถ์ ๊ตฌ์ฒด์ ์ธ ๊ฐ์ ์ ์ ์ํ๊ณ ์ ํํ ์ฐพ์๋ด๋ ๋ฐ ๋์์ด ๋ ๊ฒ์ ๋๋ค.
. .
๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
2๏ธโฃ ์คํํธ์ MVP - ๊ฒฝ์๋ ฅ์๋ ํ๋ก๋ํธ ๋ง๋ค๊ธฐ
๋ง์ ์ฐฝ์ ์๋ค์ด ์๊ณ ์๋ฏ์ด, MVP๊ฐ ์ค๋๋ ์ ํ๋ก๋ํธ๊ฐ ๊ตฌ์ถ๋๋ ํ์ค์ ๋ฐ์ํ์ง ์์ต๋๋ค.
๊ฐ์น์๋ ๊ฒ์ ๋ง๋ค์ด๋ด๋ ๊ฒ์ ๋ ์ด์ ๊ฐ๋ฅํ ๋นจ๋ฆฌ ์๋ก์ด ์์ด๋์ด๋ฅผ ๊ฒ์ฆํ๋ ๊ฒ ์๋๋๋ค. ์ค๋๋ ์ MVP๋ ํ์ฌ ์กด์ฌํ๋๊ฒ๋ณด๋ค ๋ ๋์ ๋ฒ์ ์ ๋ง๋๋ ๊ฒ์ ๋๋ค. ์ฐ๋ฆฌ ๋๋ถ๋ถ์ ์๋ก์ด ์์ฅ์ ๋ง๋ค์ง ์์ต๋๋ค. ๊ทธ๋ณด๋ค๋ ๊ธฐ์กด ์นดํ ๊ณ ๋ฆฌ๋ฅผ ๊ฐ์ ํ ๊ธฐํ๋ฅผ ์ฐพ์ต๋๋ค. ๊ธฐ์กด ์์ฅ์์ ๊ฒฝ์ํ ์ ์๊ฒ ์ด๊ธฐ ์์ด๋์ด๋ฅผ ๋ฐ๋ณตํ๋ฉฐ ๊ฐ์ ํ๋ ๊ฒ์ ๋์์ด ๋๋ MVP ๊ฐ๋ ์ด ํ์ํฉ๋๋ค.
์ํ์ฌ ์๋น์ค์ธ Linear์ MVP๋ฅผ ๊ตฌ์ถํ๊ธฐ ์์ํ์ ๋, ์ฐ๋ฆฌ๋ ์ฌ์ฉ์์ ๋ง์ ๋ํ๋ฅผ ๋๋๊ณ , ํ๊น์ ์ขํ๊ณ , ์ฐ๋ฆฌ๊ฐ ๋ง๋ค๊ณ ์๋ ๊ฒ์ ํ ์คํธํ์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๊ฒ์ ์ฐ๋ฆฌ ํ๋ก๋ํธ(๊ทธ๋ฆฌ๊ณ ์ผ๋ฐ์ ์ผ๋ก ์๋ํ ํ๋ก๋ํธ๋ฅผ ๋ง๋๋ ๊ฒ)์ ๋ํ ๋ช ๊ฐ์ง ์ค์ํ ๊ตํ์ ๊ฐ๋ฅด์ณ์ฃผ์์ต๋๋ค.
์ด ๊ธ์์๋ ์ค๋๋ ์์ฅ์์ ํ๋ก๋ํธ๋ฅผ ๋ง๋ค๊ธฐ์ํด ์๋กญ๊ฒ ๊ฐ์ ๋ MVP์ ๊ฐ๋ ์ ํ์๋ก ํ๋ ์ด์ , ํ๋ก๋ํธ ๋๊ตฌ๋ฅผํ๊น์ ์ขํ๋ ๊ฒ์ ์ค์์ฑ, ์ ๋ต์ ์จ์ดํธ๋ฆฌ์คํธ ์ฌ์ฉ์ํ, ๊ทธ๋ฆฌ๊ณ ์ด๊ธฐ์ ๋ง์ผํ์ ์ฐพ์ ๋ ๋ณผ ์ ์๋ ๋ช ๊ฐ์ง ์งํ์ ๋ํด ๋ ผ์ํ๊ฒ ์ต๋๋ค.
MVP๋ ์๊ฐ์ด ์๋, ์ฌ์ ์ด๋ค
MVP๋ฅผ ๋น ๋ฅด๊ณ ์ ๋ ดํ๊ฒ ์ ์ํ์ฌ ํ๋ก๋ํธ๋ฅผ ๊ฒ์ฆํ๋ ๋ฐฉ์์ ๋ ์ด์ ํจ๊ณผ๊ฐ ์์ต๋๋ค. ๋ง์ ํ๋ก๋ํธ์ ์นดํ ๊ณ ๋ฆฌ๊ฐ ๋ค์ํ ๋์๋ค๋ก ์ด๋ฏธ ํฌํ ์ํ์ด๋ฉฐ, ์๋ก์ด ์์ด๋์ด์ ์คํ ๊ฐ๋ฅ์ฑ์ ์ง์ ์ผ๋ก ํ ์คํธํ๋ ค๋ฉด ํจ์ฌ ๋ ๋์ ๊ฒ์ ๋ง๋ค์ด์ผ ํฉ๋๋ค.
. . ๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
3๏ธโฃ UI ๋์์ด๋๊ฐ Flexbox์ CSS Grid๋ฅผ ์ดํดํด์ผ ํ๋ ์ด์
์๋๋ฉด ์ด์ ๊ฒฌ๊ณ ํ ์นผ๋ผ ๊ทธ๋ฆฌ๋ ๋ ์ด์์๊ณผ ์๋ ์ ๋๋ค.
๋๋ถ๋ถ์ ๋์์ด๋๋ ๋ชจ๋ ํ๋ฉด ํฌ๊ธฐ๋ฅผ ํฌ๊ดํ๋ ๊ณ ์ ๋ธ๋ ์ดํฌ ํฌ์ธํธ๊ฐ ์๋ ์นผ๋ผ ๊ธฐ๋ฐ ๋ ์ด์์ ์ ๊ทผ ๋ฐฉ์์ธ ๋ฐ์ํ ๋์์ธ์ ์ต์ํฉ๋๋ค. ๊ทธ๋ฌ๋ ํ๋์ ์ธ CSS ๋ ์ด์์์ ์ฌ์ฉํ๋ฉด ๊ฒฝ์ง๋ ๊ตฌ์กฐ๋ฅผ ๋ฐ์ด๋์ด ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์ํํ๊ฒ ์กฐ์ ๋๋ ์ ์ฐํ๊ณ ์ญ๋์ ์ธ ๋์์ธ์ ๋ง๋ค ์ ์์ต๋๋ค.
๋ ์ด์์, ํนํ ๊ทธ๋ฆฌ๋๋ฅผ ๋ ผ์ํ ๋ ๋์์ด๋์ ๊ฐ๋ฐ์๊ฐ ์๋ก ๋ค๋ฅธ ๋ฉํ ๋ชจ๋ธ์ ๊ฐ๊ณ ์๊ธฐ ๋๋ฌธ์ ํ์ ์ ๋ง์ ์คํด๊ฐ ๋ฐ์ํฉ๋๋ค.
์ด ๊ธ์ ์๋ฒฝํ ํธ๋์คํ์ ๊ดํ ๊ฒ์ด ์๋๋ผ(์์ง๋ ๊ทธ๋ฐ ์ผ์ด ์กด์ฌํด์ผ ํ๋์ง ์์ฌ์ค๋ฝ์ต๋๋ค) ๋ํ์ ํ์ ์ ์ํ ๊ณตํต์ ์ ์ฐพ๊ธฐ ์ํด ์๋ก์ ๋๊ตฌ์ ํ๊ณ๋ฅผ ์ดํดํ๋ ๊ฒ์ ๊ดํ ๊ฒ์ ๋๋ค.
์ ๋ ์ฌ๋ฌ๋ถ์๊ฒ ๋ค์ ์ฌํญ์ ๋ํด ์กฐ๊ธ ๋ง์๋๋ฆฌ๊ณ ์ถ์ต๋๋ค.
- ๋ฐ์ํ ์นผ๋ผ ๊ธฐ๋ฐ ๋์์ธ๊ณผ ์ต์ CSS ๋ ์ด์์
- ๋์์ด๋๋ก์ CSS Flexbox ์ดํดํ๊ธฐ
- ๋์์ด๋๋ก์ CSS ๊ทธ๋ฆฌ๋ ์ดํดํ๊ธฐ
- ๋ธ๋ ์ดํฌ ํฌ์ธํธ: ์ฌ์ ํ ํ์ํ๊ฐ์?
ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ ์ ํต์ ์ธ ์นผ๋ผ ๊ธฐ๋ฐ ๋์์ธ
๋จผ์ ์ฐ๋ฆฌ๊ฐ ์ด๋์์ ์๋์ง ์ดํดํฉ์๋ค. UI ๋์์ด๋๋ผ๋ฉด ์์๋ฅผ ๋ฐฐ์นํ๋ ์นผ๋ผ, ๊ฑฐํฐ ๋ฐ ๋ง์ง์ผ๋ก ๊ตฌ์ฑ๋ ๊ณ ์ ์ ์ธ ์นผ๋ผ ๊ทธ๋ฆฌ๋ ์ค์ ์ ๋ ์ต์ํ ๊ฒ์ ๋๋ค. ์ด ๊ทธ๋ฆฌ๋๋ ๋์์ธ์ ๊ธฐ์ด ์ญํ ์ ํ๋ฉฐ ๊ตฌ์กฐํ๋ ํ๋ ์์ํฌ๋ฅผ ์ ๊ณตํฉ๋๋ค.
ํด๋์ ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ๋ธ๋ ์ดํฌ ํฌ์ธํธ ์ดํด
๋ฐ์ํ ๋์์ธ์ ๋ํ ์ด๋ฌํ ์ ๊ทผ ๋ฐฉ์์ ํต์ฌ์ ๋ธ๋ ์ดํฌ ํฌ์ธํธ์ ์์ต๋๋ค. ๋ธ๋ ์ดํฌ ํฌ์ธํธ๋ CSS ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ์ํด ์ ์๋๊ณ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ๋ง๊ฒ ๋ ์ด์์์ ์กฐ์ ํ๋ ๋ฐ ์ค์ํฉ๋๋ค. ์น ์ฌ์ดํธ์ ๊ตฌ์กฐ๋ ๋ฏธ๋ฆฌ ์ ์๋ ์ง์ ์์ ๋์ ์ผ๋ก ์กฐ์ ๋ฉ๋๋ค. ์ฆ, ๊ฐ๋ ์ฑ์ ๋์ด๊ธฐ ์ํด ์์๊ฐ ์ฌ์ ๋ ฌ๋๊ฑฐ๋, ๊ฐ๋จํ ํ์ ๋ฉ๋ด๊ฐ ํ์ฅ๋๊ฑฐ๋, ํ ์คํธ ํฌ๊ธฐ๊ฐ ๋ณ๊ฒฝ๋ ์ ์์ต๋๋ค. ์ด๋ฌํ ์ ์ฐ์ฑ ๋๋ถ์ ๋์์ธ์ ์ฌ๋ฌ ์ฅ์น์ ๊ฑธ์ณ ๊ธฐ๋ฅ์ ์ด๋ฉฐ ๋ฏธํ์ ์ผ๋ก ๋ง์กฑ์ค๋ฌ์ด ์ํ๋ก ์ ์ง๋ฉ๋๋ค.
. . ๐ ๋ ์์ธํ ๋ด์ฉ์ ์๋ ์๋ฌธ์์ ํ์ธํด์ฃผ์ธ์.
๋๊ธ
์๊ฒฌ์ ๋จ๊ฒจ์ฃผ์ธ์