๋ถํธ์คํธ๋ฉ์ผ๋ก ๋ฉ์ง ์น์ ๋๋ฑ!
๋ฐ์ํ ์น์ฌ์ดํธ ๋น ๋ฅด๊ฒ ๋น๋ํ๊ธฐ โจ
โ
์ด ๊ฐ์๋ [ํ์คํ ์น ๊ฐ๋ฐ์ ๋ก๋๋งต] ์๋ฆฌ์ฆ ๊ฐ์์
๋๋ค.
- ๋ณธ ๊ฐ์๋ ํ์คํ ์น ๊ฐ๋ฐ์ ์์ฑ์ ์ํ [์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค] ๊ฐ์ ์๋ฆฌ์ฆ ์ค ๋ถํธ์คํธ๋ฉ ๊ธฐ์ด๋ฅผ ๋ค๋ฃจ๋ ๊ฐ์์
๋๋ค.
- ์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค๋ HTML&CSS โ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ โ ๋ถํธ์คํธ๋ฉ โ Vue.js โ ๋ฐ์ดํฐ๋ฒ ์ด์ค โ Node.js โ ํฌํธํด๋ฆฌ์ค๊น์ง ํ์คํ ์น ๊ฐ๋ฐ์ ์ํ ์ ๊ณผ์ ์ ํฌํจํ๊ณ ์์ต๋๋ค.
- ์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค๋ฅผ ๋ชจ๋ ์๊ฐํ๋ฉด ์ฌ๋ฌ๋ถ์ ์น ๊ฐ๋ฐ์ ๋ํ ๊ธฐ์ด ๋ฟ๋ง ์๋๋ผ ์ค๋ฌด์ ๋ฐ๋ก ์ ์ฉํ ์ ์๋ ๊ธฐ์ ์ ์ตํ๊ฒ ๋ฉ๋๋ค.
- ๋ณธ ๊ฐ์๋ฅผ ์๊ฐํ๊ธฐ ์ [์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค] HTML&CSS โ [์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค] ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์๋ฅผ ์ฐจ๋ก๋ก ์๊ฐํ๋ ๊ฒ์ ์ถ์ฒํฉ๋๋ค.
What is Bootstrap?

๋ฐ์ํ ์น์ ํ๋์ ์ฝ๋๋ก ๋น ๋ฅด๊ฒ ๋ง๋ค ์ ์๊ฒ ๋์์ฃผ๋ HTML/CSS/JS ํ๋ ์์ํฌ์
๋๋ค.
๋ถํธ์คํธ๋ฉ์ ๋ฐ์ํ ์น์ ๋น ๋ฅด๊ฒ ๋ง๋ค ์ ์๊ฒ ๋์์ฃผ๋ HTML, CSS, JS ํ๋ ์์ํฌ์
๋๋ค. ํ๋์ ์ฝ๋๋ก ์ค๋งํธํฐ, ํ๋ธ๋ฆฟ, ๋ฐ์คํฌํ๊ณผ ๊ฐ์ ๋ค์ํ ํฌ๊ธฐ์ ๊ธฐ๊ธฐ์ ์ต์ ํ๋ ์น์ ๋ง๋ค ์ ์์ผ๋ฉฐ, ๋ฏธ๋ฆฌ ๋ง๋ค์ด์ง ์ปดํฌ๋ํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ฝ๊ฒ ์น์ ๊ตฌํํ ์ ์๋๋ก ํฉ๋๋ค.

๋ถํธ์คํธ๋ฉ, ์ ๋ฐฐ์์ผ ํ ๊น์?

๋น ๋ฅธ ๊ฐ๋ฐ, ์ผ๊ด์ฑ, ํธํ์ฑ... ํจ์จ์ ์ผ๋ก ์น ํ์ด์ง๋ฅผ ๋ง๋ค๊ณ ์ถ๋ค๋ฉด!

๋น ๋ฅธ ๊ฐ๋ฐ
๋ถํธ์คํธ๋ฉ์ ๋ฐ์ํ ๋ฐ ๋ชจ๋ฐ์ผ First ์น์ฌ์ดํธ๋ฅผ ๋น ๋ฅด๊ฒ ๊ตฌ์ถํ๋ ๋ฐ ๋์์ด ๋๋ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ์
๋๋ค. ๊ธฐ๋ณธ ์ ๊ณต๋๋ CSS ์คํ์ผ, ์ปดํฌ๋ํธ ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ์ฌ ์น์ฌ์ดํธ๋ฅผ ๊ฐ๋ฐํ๊ธฐ ์ํ ์๊ฐ๊ณผ ๋
ธ๋ ฅ์ ์ ์ฝํ ์ ์์ต๋๋ค.
์ผ๊ด์ฑ๊ณผ ํธํ์ฑ
๋ถํธ์คํธ๋ฉ์ ๋ฐ์ํ ๊ทธ๋ฆฌ๋ ์์คํ
์ ์ ๊ณตํ์ฌ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์ต์ ํ๋ ์น์ฌ์ดํธ๋ฅผ ์ฝ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ๋ชจ๋ฐ์ผ, ํ๋ธ๋ฆฟ ๋ฐ ๋ฐ์คํฌํ์์ ์น์ฌ์ดํธ๊ฐ ์ฌ์ฉ์์๊ฒ ์ฌ๋ฐ๋ฅด๊ฒ ์ ๊ณต๋๋ ๊ฒ์ ๋ณด์ฅํ ์ ์์ต๋๋ค.
์ปค๋ฎค๋ํฐ ์ง์
๋ถํธ์คํธ๋ฉ์ ๊ฐ๋ฐ์ ์ปค๋ฎค๋ํฐ์ ์ ์ ๋ฆฌ๋ ๋ฌธ์๋ฅผ ๊ฐ์ถ๊ณ ์์ด์ ๋์์ด ํ์ํ ๊ฒฝ์ฐ ์ฝ๊ฒ ์ฐพ์ ์ ์์ต๋๋ค. ๋ํ ๋ค์ํ ํ๋ฌ๊ทธ์ธ, ํ
๋ง ๋ฐ ์์ ๊ฐ ์ ๊ณต๋์ด ์น์ฌ์ดํธ๋ฅผ ๋์ฑ ํ๋ถํ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค.
์ ์ง ๊ด๋ฆฌ
๋ถํธ์คํธ๋ฉ์ ์ผ๊ด๋ ์คํ์ผ ๊ฐ์ด๋๋ฅผ ์ ๊ณตํ๊ธฐ ๋๋ฌธ์ ์ฝ๋๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ ์ง ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
์ด ๊ฐ์์ ํน์ง!
์ฝ๊ณ ์์ธํ๊ฒ
์ค๋ฌด ์์ฉ ์ค์ฌ
์์ ์ฝ๋๊น์ง!
- ๋ถํธ์คํธ๋ฉ์ ๊ธฐ๋ณธ ๋ฌธ๋ฒ ๋ฐ ์ฌ์ฉ๋ฒ์ ์ฐจ๊ทผ์ฐจ๊ทผ ์๋ ค๋๋ ค์.
- ์น ๊ฐ๋ฐ ํ๋ก์ ํธ์ ํ์ํ ๋ถํธ์คํธ๋ฉ์ ์ ์ฉํด ๋ด
๋๋ค.
- ๋ชจ๋ ์์ ์ฝ๋๋ ๊นํ๋ธ๋ฅผ ํตํด ์ ๊ณต๋ฉ๋๋ค.
๋ฌด์์ ๋ฐฐ์ฐ๋์?
VSCode
BootStrap
- ๊ฐ๋ฐ IDE ํด๋ก๋ ๋น์ฃผ์ผ์คํ๋์ค์ฝ๋(Visual Studio Code)๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๋น์ฃผ์ผ์คํ๋์ค์ฝ๋๋ฅผ ์ด์ฉํ ๊ฐ๋ฐ ๋ฐฉ๋ฒ ๋ฐ ์ ์ฉํ ํ์ฅ ํ๋ก๊ทธ๋จ์ ์๊ฒ ๋ฉ๋๋ค.
- ๋ถํธ์คํธ๋ฉ Layout, Contents, Forms, Components, Helpers, Utilities, Extend์ ๋ํด์ ์๊ฒ ๋ฉ๋๋ค.
- ๋ถํธ์คํธ๋ฉ์ CRUD ํ๋ฉด์ ์ ์ฉํด ๋ด
๋๋ค.
- ๋ถํธ์คํธ๋ฉ ํ
๋ง ์์ฅ์ ์ดํดํ๊ณ ํ
๋ง๋ฅผ ์ฌ์ฉํด์ ์น์ ๋น ๋ฅด๊ฒ ๋ง๋ค ์ ์๋ ๋ฐฉ๋ฒ์ ์๋ ค๋๋ฆฝ๋๋ค.
๋ถํธ์คํธ๋ฉ์ผ๋ก ์์ฑ ํ๋ฉด ๋ง๋ค๊ธฐ
๋ถํธ์คํธ๋ฉ์ผ๋ก ์์ ํ๋ฉด ๋ง๋ค๊ธฐ
์ ์ ์ง์์ ํ์ธํ์ธ์!

- HTML์ ๋ํ ๊ธฐ๋ณธ ์ง์์ด ์์ด์ผ ํด์.
- CSS๋ฅผ ์์์ผ ํด์.
- ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์์์ผ ํด์
- ๋ณธ ๊ฐ์๋ฅผ ์๊ฐํ๊ธฐ ์ ์ [์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค] HTML&CSS โ [์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค] ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์๋ฅผ ์๊ฐํ๋ ๊ฒ์ ์ถ์ฒํฉ๋๋ค.
์ด ๊ฐ์๋ฅผ ๋ง๋ ์ฌ๋์
๋๊ตฌ์ผ๊น์?
๊ฐ๋ฐ์์ ํ๊ฒฉ
์ํํธ์จ์ด ๊ธฐ์ ์ ํตํด ์ธ์์ ์ ํ ์ํฅ๋ ฅ์ ์ฃผ๊ณ ์ถ์ 24๋
์ฐจ ์ํํธ์จ์ด ๊ฐ๋ฐ์.
์ง์์ ๋๋๋ ๊ฒ์ ์ข์ํ๊ณ , ํญ์ ์๋ก์ด ๊ธฐ์ ์ ์ตํ๋ ๊ฒ์ ์ฆ๊ฒจ์.
๊ตญ๋ด์ธ 60๊ฐ๊ฐ ๋๋ ๊ธ๋ก๋ฒ ๊ธฐ์
ERP ์์คํ
์ ๊ตฌ์ถํ๋ ์ปจ์คํดํธ ๋ฐ ๊ฐ๋ฐ์๋ก ํ๋ํ์๊ณ , ์ง์ ๊ฐ๋ฐํ ์ํํธ์จ์ด๋ฅผ ๊ตญ๋ด๋ ๋ฌผ๋ก ํด์ธ ์ ์์ ๊ธฐ์
์ ํ๋งค๋ฅผ ํ ๊ฒฝํ ๋ํ ๊ฐ์ง๊ณ ์์ด์. IT ์คํํธ์
๋ํ์ด์ฌ์ด๊ธฐ๋ ํด์.
๊ฐ๋ฐ์๋ฟ๋ง ์๋๋ผ UX ์ปจ์คํดํธ๋ก, ๋๋ก๋ ๋น์ฆ๋์ค ์ปจ์คํดํธ๋ก ์ผํ๋ฉด์ ์ ํ๋ฆฌ์ผ์ด์
๊ณผ ์๋น์ค ๊ฐ๋ฐ ์ ๊ธฐํ์์ ๊ฐ๋ฐ๊น์ง ์ ๊ณผ์ ์ ๋ํ ์๋ง์ ๊ฒฝํ์ ์์์ต๋๋ค. ์ด์ ๋ 20๋
์ด ๋๋ ์ค๋ฌด ๊ฒฝํ์ ๋ฐํ์ผ๋ก ํ๋ฐฐ๋ค์๊ฒ ์ ๋ง ํ์ํ ๊ธฐ์ , ์ ๋ง ์ ๋๋ก ๋ ์ง์์ ์ ๋ฌํ๋ ์ฌ๋ช
๊ฐ์ ๊ฐ๊ณ ์ง์์ ๋๋๋ ์ผ์ ํ๊ณ ์์ด์.
๋ ์์๋ณผ๊น์?
[์น ๊ฐ๋ฐ ํ์คํ ์ฝ์ค] ์๋ฆฌ์ฆ ๋ชจ์๋ณด๊ธฐ