๋ฐ์ํ ์น์ฌ์ดํธ ํฌํธํด๋ฆฌ์ค
(App Official Landing) ์ ์ ๊ณผ์
'์ด 22์๊ฐ ์ด์์ ๋ฐ์ํ ์น์ฌ์ดํธ ํฌํธํด๋ฆฌ์ค ๊ฐ์'
'ํต์ฌ์ด๋ก ์์
๊ณผ ๋ฐ์ํ ์น์ฌ์ดํธ ์ ์ ๊ณผ์ '
'ํผ๋ธ๋ฆฌ์
์ทจ์
์ ์ํ ๋ฐ์ํ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง ์ ์ ์ฝ์ค'
'์ค๋ฌด ํผ๋ธ๋ฆฌ์ฑ ์ง์ง ์ค๋ ฅ์ ์ํ ํ๋์ฝ๋ฉ ์์
'
'9์๊ฐ ์ด์์ ํ์ ์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ ์ฌ์ฉ๋ฒ ๋ฐ CSS ํ์ ํต์ฌ์ด๋ก ์์'
'ํ์ง ํผ๋ธ๋ฆฌ์
๊ฒธ ํผ๋ธ๋ฆฌ์ฑ ์ ๋ฌธ ๊ฐ์ฌ์ ๊ผผ๊ผผํ๊ณ ์ฒด๊ณ์ ์ธ ์์
'
๐ ๋ฐ์ํ ์น์ฌ์ดํธ ํฌํธํด๋ฆฌ์ค ์ ์ ๊ณผ์ ํน์ง
01) ์์ CSS ๋ ์ด์์ ๋ฐฐ์น ๋ฐฉ์์ผ๋ก ๋ง๋๋ ๋ฐ์ํ ์น์ฌ์ดํธ
02) ํด๋ก ์ฌ์ดํธ, ์นดํผ์ฌ์ดํธ๊ฐ ์๋ ์ฝ๋ฉ์์ค๊ฐ ์ง์ UI ๋์์ธ๋ถํฐ ํผ๋ธ๋ฆฌ์ฑ๊น์ง ์ ์ํ ์น์ฌ์ดํธ
03) ๊ฐ์ ์น์
๋ณ 14๊ฐ์ ๋จ๊ณ๋ณ ์์ฑ๋ณธ๊ณผ UI ๋์์ธ PSDํ์ผ ์ ๊ณต
โป ํฌํ ์ต UI ๋์์ธ์ Photoshop CC 2019 ๋ฒ์ ์ผ๋ก ์ ์๋์์ต๋๋ค.
04) ์ด 22์๊ฐ ์ด์์ ์ ์๊ฐ์
05) ์ด๋ก ํ์ต๊ณผ ์ ์์ ์ํ ํ
์คํธ์๋ํฐ
์ด๋ฒ ๋ฐ์ํ ์น์ฌ์ดํธ ์ ์ ๊ฐ์์ ์ฌ์ฉ๋ ํ
์คํธ ์๋ํฐ๋ ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(Visual Studio Code)์ ๋ธ๋ผ์ผ์ธ (Brackets)์
๋๋ค. ๋ฌผ๋ก ๋ค๋ฅธ ํ
์คํธ ์๋ํฐ๋ฅผ ์ฌ์ฉํ์
๋ ๊ด์ฐฎ์ต๋๋ค. ์๊ฐ์์ด ์ต์ํ ํ
์คํธ ์๋ํฐ๋ฅผ ์ฌ์ฉํ์๋ฉด ๋ฉ๋๋ค. ๋จ, ์ค์๊ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๊ธฐ๋ฅ์ด ์๋ ํ
์คํธ ์๋ํฐ๋ ๋ฐ๋ผ์ค์๊ธฐ ๋ฒ
์ฐฐ ์ ์์ต๋๋ค.
06) ์ํํ ์ ์ ๊ณผ์ ํ์ต์ ์ํ ํ์ ํต์ฌ์ด๋ก ์์(Slick Slider, Reveal Animation)
๋ฐ์ํ ์น์ฌ์ดํธ ํฌํธํด๋ฆฌ์ค(App Official Landing Website) ์ ์ ๊ฐ์๋ฅผ ์ ์ธํ๊ณ ์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ ์ฌ์ฉ๋ฒ, ์ ์์ ์ํ ํ์์ ์ธ CSS ์ด๋ก ๋ฑ 9์๊ฐ ์ด์์ ํต์ฌ์ด๋ก ๊ฐ์ ์์์ด ์์ต๋๋ค. ํด๋น ์์๋ค์ ๋ณด์์ง ์๊ณ ์ค์ ์ ์ ์น์
์ผ๋ก ์ค์๋ฉด ๋ฐ๋ผ์ค์๊ธฐ ๋ฒ
์ฐจ์ค ์๋ ์์ต๋๋ค. [์น์
2. ํ์ ์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ ์ฌ์ฉ๋ฒ ๋ฐ CSS ํ์ ํต์ฌ์ด๋ก ]์์ ์์ํ๊ฑฐ๋ ๋ถ์กฑํ๋ค๊ณ ์๊ฐ๋์๋ ๋ด์ฉ๋ค์ ์ถฉ๋ถํ ํ์ตํ๊ณ ์ค์๊ธฐ ๋ฐ๋๋๋ค.
๐ก PC ๋ ์ด์์ ์น์
์ ํ ๋ฏธ๋ฆฌ๋ณด๊ธฐ(Preview)


๐ก Mobile ๋ ์ด์์ UI/UX ๋ฏธ๋ฆฌ๋ณด๊ธฐ(Preview)


๐๐ปโโ๏ธ ๊ฐ์ ์๊ฐ์ ์ํ ์ ์์ง์
์ด๋ฒ ๋ฐ์ํ ์น์ฌ์ดํธ ์ ์์ ๋์ด๋๋ ์
๋ฌธ ๋๋ ์ด๊ธ์ ์ด๋ ต์ต๋๋ค. ์๊ฐ ๋ ๋ฒจ์ ์ค๊ธ์ด๊ฑฐ๋, ๋๋ ๊ทธ ๊ฐ๊น์ด๋ ๋์ด์ผ ์ ๋ฐ๋ผ์ค์ค ์ ์์ต๋๋ค. ์ต์ํ ์ด๊ธ์ ์๋๋ผ๊ณ ์๊ฐํ์๋ ๋ถ์ด๋ฉด ๋ฐ๋ผ์ค์๋ ๋ฐ ํฐ ์ด๋ ค์์ ์๋ ๊ฑฐ๋ผ ์๊ฐํฉ๋๋ค.
์๊ฐ์ ์ํ ์ ์ ์ง์์ผ๋ก๋ HTML+CSS์ ๋ํ ๊ธฐ๋ณธ์ ์ธ ๋ด์ฉ์ ์๊ณ ์์ผ์๋ฉด ๋ฉ๋๋ค. ๊ทธ๋ ๋ค๊ณ HTML+CSS๋ฅผ ์ํ๋ ์ํ์ผ ํ์๋ ์์ต๋๋ค. 20์๊ฐ์ด ๋๋ ๊ฐ์์์ ์ฌ์ ์๊ฒ ์ถฉ๋ถํ ์ค๋ช
ํ๊ณ ์์ต๋๋ค. ๋ง์ฝ ์์์ ๋ณด์๋ค ์๊ฐ์์ ์ฝ๋ฉ์ด ๋ฆ์ด์ HTML+CSS ์์ฑ์ด ๋ฆ๋ ๊ฒฝ์ฐ, ์์์ ๋ฉ์ถ์๊ณ HTML+CSS ์์ฑ์ ํ์๊ณ ๋ค์ ์คํ
์ ๋ฐ๋ผ์ค์๋ฉด ๋ฉ๋๋ค.
์์์ ๋ฉ์ถ๊ณ ์ฝ๋ฉํ๊ณ ํ๋๋ผ ๋จ๋ค๋ณด๋ค ์๊ฐ์ด ์ข ๋ ํ์ํ ๊ฒ๋ฟ์
๋๋ค. ์คํ๋ ค ์ฐจ๋ถํ๊ฒ ์ค์ค๋ก ์ฝ๋ฉํ๋ ์๊ฐ์ ๊ฐ๋ ๋ฉด์์ ๋ ์ข์ต๋๋ค. ๋๋ฌด ๊ฑฑ์ ๋ง๊ณ ํจ๊ป ๊ณต๋ถํ์
จ์ผ๋ฉด ํฉ๋๋ค. ^^
์ ๊ฐ์ ์ค์ 'HTML+CSS+JQUERY ํฌํธํด๋ฆฌ์ค ์ค๊ธ ์ค์ ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์'๊ฐ ์์ต๋๋ค. ์ด ๊ฐ์์ ์๋ ์ด๋ก ๋ด์ฉ๊ณผ ์ค์ ์์ ์ ์ ๋ด์ฉ์ด ์ด๋ฒ ๋ฐ์ํ ์น์ฌ์ดํธ ์ ์ ํ์ํ ๋ด์ฉ์ด ๊ฑฐ์ ๋ชจ๋ ๋ค์ด๊ฐ ์์ต๋๋ค. ๊ณง, HTML+CSS+JQUERY ๊ธฐ๋ณธ๊ธฐ๋ฅผ ํ์คํ ๋ง๋ค ์ ์๋ ๊ฐ์๋ผ๊ณ ์๊ฐํฉ๋๋ค.
์ด๋ฒ ๋ฐ์ํ ์น์ฌ์ดํธ ์ ์์์ ๋ช ๊ฐ์ง๋ฅผ ์ ์ธํ๊ณ ๋ 'HTML+CSS+JQUERY ํฌํธํด๋ฆฌ์ค ์ค๊ธ ์ค์ ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์'์ ์๋ ๋ด์ฉ์ 1ํ์ฐจ ์ ๋ ํ์ตํ์๊ณ ์ค์๋ฉด ๋ฐ๋ผ์ค์๊ธฐ๊ฐ ํจ์ฌ ์์ํ ๊ฒ์ด๋ผ ์๊ฐํฉ๋๋ค.
๊ฒฐ๋ก ์...
์
๋ฌธ์ด๋ ์ด๊ธ์ด ์๋์๋ฉด ๋ฐ๋ผ์ค์๋ ๊ฑด ๋ฌธ์ ์์ง๋ง ์กฐ๊ธ ๋ฒ๊ฑฐ์ด ๋๋์ด์ค ๊ฑฐ๊ณ ์.
๋ค๋ฅธ ๊ฐ์๋ฅผ ํตํด์ HTML+CSS ๊ธฐ๋ณธ๊ธฐ๋ฅผ ์ตํ๊ณ ์ค์
จ๋ค๋ฉด ์ถฉ๋ถํ ๋ฐ๋ผ์ฌ ๋ฟ๋ง ์๋๋ผ ์ ์ด๋ ๊ฒ ํ๋์ง์ ๋ํ ์ดํด๋๋ฅผ ๊ฐ๊ณ ๋ฐ์ํ ์น์ฌ์ดํธ ์ ์ ๊ณผ์ ์ ๋ง์น์๊ฒ ๋ ๊ฑฐ๋ผ ์๊ฐํฉ๋๋ค.
๐ ํจ์จ์ ์ธ ํ์ต์ ์ํ ์ฝ๋ฉ์์ค์ ํ์ต ๋ฐฉ๋ฒ ์ ์
ํ์ต๋ฐฉ๋ฒ์ ์ฌ๋๋ง๋ค ๋ชจ๋ ๋ค๋ฅด๋ค๊ณ ์๊ฐํฉ๋๋ค. ๊ทธ๋์ ์ ๋ต์ ์์ต๋๋ค. ํ์ง๋ง ๊ฒฝํ์์ด์ ์ ์์๊ฐ ์๊ฐํ๋ ํจ์จ์ ์ธ ํ์ต๋ฐฉ๋ฒ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ๊ทธ๋์ ์ฝ๋ฉ์์ค๊ฐ ์๊ฐํ๋ ํจ์จ์ ์ธ ํ์ต๋ฐฉ๋ฒ์ ์ ์๋๋ฆฝ๋๋ค.
[1๋จ๊ณ]
์น์
3๋ถํฐ ์น์
16๊น์ง ์ ์ฒด ์ ์ ๊ณผ์ ์ ์ค์ต ์์ด ์์์ ์ฒ์๋ถํฐ ๋๊น์ง ๋ด
๋๋ค. (12์๊ฐ์ด ๋๋ ์ ์ ๊ณผ์ ์ด๋ผ ๊ทธ๋ฅ ๋ณด๋ ๊ฒ๋ง์ผ๋ก๋ ๋ง๋งํ์ง๋ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ด๋ํ๋ฉด์ ๋ฐฅ ๋จน์ผ๋ฉด์ ๋ถ๋ด ์์ด ๋ณด์ธ์. ๊ทธ๋ฅ ๋ญ ๋ง๋๋์ง ์ด๋ค ์์๋ก ๋ง๋๋์ง ์ ๋๋ง ๋์ฌ๊ฒจ๋ณด์๋ฉด ๋ฉ๋๋ค.)
[2๋จ๊ณ]
1๋จ๊ณ๋ฅผ ํ์๋ฉด ์ด๋ค ๋ถ๋ถ์ ๋ํ ์ด๋ก ์ด ํ์ํ์ง ์ด๋ค ๋ถ๋ถ์ ๋ํ ์ค๋น๊ฐ ํ์ํ์ง ์์ฐ์ค๋ฝ๊ฒ ์๊ฒ ๋ฉ๋๋ค. ๊ทธ๋ผ ๊ทธ๋ฐ ๋ถ๋ถ์ ์๋ฒฝํ๊ฒ๋ ์๋๋๋ผ๊ณ ์ ์์ ํ์ํ ์ด๋ก ์ฌํญ์ ์ด๋ ์ ๋ ํ์ตํฉ๋๋ค. ๊ธฐ์ด ๋ ๋ฒจ์ด ์๋์๋ผ๋ฉด ์น์
2. ํ์ ์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ ์ฌ์ฉ๋ฒ ๋ฐ CSS ํ์ ํต์ฌ์ด๋ก ์ ์์์ ์ค๋นํด ๋์์ผ๋ ๋ถ์กฑํ์ง ์์ ๊ฑฐ๋ผ ์๊ฐํฉ๋๋ค. ํ์ง๋ง ๊ฐ์ํด๋์ค, ์ ํ์ ๋ฑ HTML+CSS ํ์์ ์ธ ์ด๋ก ์ฌํญ์ ์ฝ๋ฉ์์ค ์ ํ๋ธ ์ฑ๋์์ ๊ณต๋ถํ์๊ธฐ ๋ฐ๋๋๋ค.
[3๋จ๊ณ]
์น์
3๋ถํฐ ์์ ๊ผผ๊ผผํ ๋ณด์๋ฉด์ ์ค์ตํ์๊ธฐ ๋ฐ๋๋๋ค. ์ฌ์ ์ค๋น๊ฐ ์ถฉ๋ถํ ๋์์ผ๋ ๋ฐ๋ผ์ค์๊ธฐ๊ฐ ํจ์ฌ ์ฌ์ธ ์ค ๊ฑฐ๋ผ ์๊ฐ๋ฉ๋๋ค.
[4๋จ๊ณ]
์์๊ณผ ํจ๊ฒ ์ ์ฒด ๋ฐ์ํ ์น์ฌ์ดํธ๋ฅผ ์ ์์ ๋ง์น์
จ์ผ๋ฉด ์ ๊ณต๋ ํฌํ ์ต PSD ํ์ผ์ ์ด๊ณ UI ๋์์ธ์ ๋๋ฆ์ ํ
๋ง๋ฅผ ์ ํด์ ์์ ํ์ธ์. ๋ ์ด์์์ ํฐ ๋ณํ๋ ์ฃผ์ง ๋ง์๊ณ ๊ธฐ์กด์ ๋ ์ด์์์์ ๋ถ๋ถ์ ์ผ๋ก ์์ ํ์
์ ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค UI ๋์์ธ์ ๋ง์น์ธ์.
[5๋จ๊ณ]
์ ์๋ UI ๋์์ธ์ ๊ธฐ์ด๋ก PPT์์ ๊ธฐ๋ฅ์ ์์์ HTML ๊ตฌ์กฐ๋ฅผ ๋ง๋์๊ณ ์ค์ ํผ๋ธ๋ฆฌ์ฑ์ ์งํํด์ ์์ฑํ์ธ์. ๊ทธ๋ผ ์ฌ๋ฌ๋ถ๋ง์ ๋์์ธ ํฌํธํด๋ฆฌ์ค์ ํผ๋ธ๋ฆฌ์ฑ ํฌํธํด๋ฆฌ์ค๊ฐ ์์ฑ๋ฉ๋๋ค.
๐๐ปโโ๏ธ ๊ฐ์ ๊ด๋ จ ์์๋๋ ์ง๋ฌธ๊ณผ ํ๋
์ฌํญ
Q. ์์ ์ ์ํ๋ฉด์ ๋์ค๋ ์ค๊ธ CSS ์ด๋ก ์ค๋ช
์์์ด ์๋์?
A. '์์ ์ ์ํ๋๋ฐ ๊ธฐ์ด์ด๋ก ์ ๋์ค์ง ์์ ์ค๊ธ์ด๋ก ์ด ๋ง์ด ๋์ค๋๋ฐ ์ค๊ธ ์ด๋ก ์์
์ ์ด๋์ ๋ฃ๋์?' ์ด๋ฐ ์ง๋ฌธ์ด ๊ฒ์ํ์ ์์ฃผ ์ฌ๋ผ์ต๋๋ค.
์ง๊ธ ๊ณผ์ ์ ์ด๊ธ ํผ๋ธ๋ฆฌ์ฑ ์์ ์ ์์ ํ๋ ๊ณผ์ ์ ์๋๋๋ค. ์ด๊ธ~์ค๊ธ ํผ๋ธ๋ฆฌ์ฑ ์์ ๋ฅผ ์ ์ํ๋ ๊ณผ์ ์
๋๋ค. ๊ทธ๋์ CSS ์ด์ค๊ธ ์ด๋ก ์ ์ด๋ ์ ๋ ์๊ณ ์์ผ์
์ผ ํฉ๋๋ค. ๊ทธ๋ ๋ค๊ณ ๊ผญ ์ ์์ค ํ์๋ ์์ต๋๋ค. CSS ์ด์ค๊ธ ์ด๋ก ์ ์์ ๋ฅผ ์ ์ํ๋ฉด์ ์ง์์ ์ผ๋ก ๋ฐ๋ณตํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ฝ๋ฉ์์ค ์ ํ๋ธ ํผ๋ธ๋ฆฌ์ฑ ์ฑ๋์ [์ค๊ธ์ด๋ก ] CSS ์ค๊ธ์ด๋ก ์ด๋ผ๋ ์ฌ์ ๋ชฉ๋ก์ ์์ ์ ์์ ํ์ํ ํ์ ์ค๊ธ ์ด๋ก ์์์ด ์์ธํ ์์ผ๋, ์ง๊ธ ๊ณผ์ ์ ๋ค์ผ์๋ฉด์ ์ค๊ธ ์ด๋ก ์ ๋ณํํ์๋ฉด ์ข์ต๋๋ค.
โฒ ์ฝ๋ฉ์์ค ์ ํ๋ธ ์ฑ๋ ๋ฐ๋ก๊ฐ๊ธฐ
Q. ์ด ๊ณผ์ ์๊ฐํ๋ฉด ์ค๋ฌด์์ ํผ๋ธ๋ฆฌ์
๋ก ์ผํ ์ ์์๊น์?
A. ์ด ๊ณผ์ ์ ์๋ ํผ๋ธ๋ฆฌ์ฑ ๋ด์ฉ์ ๋ชจ๋ ์ดํดํ๊ณ ์ ํ์ฉํ ์ ์๋ค๋ฉด ๊ฐ๋ฅํฉ๋๋ค. ํ์ง๋ง ํผ๋ธ๋ฆฌ์ฑ์ด๋ผ๋๊ฒ ์ถฉ๋ถํ ๊ฒฝํ๊ณผ ๋ค์ํ ์ข
๋ฅ์ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค์ด ๋ณธ ๊ฒฝํ์ด ์์ด์ผ ์ค๋ฌด์์ ์ผํ ์ ์์ต๋๋ค. ์ง๊ธ ๊ณผ์ ๊ณผ ๊ฐ์ ๊ฐ์๋ค์ ๋ช ๊ฐ ๋ ๊ณต๋ถํ์๊ณ ์ ์ฒด ์น์ฌ์ดํธ ์ ์ ๊ณผ์ ์ ๋ช ๊ฐ ๊ณต๋ถํ์๋ฉด ๋ ๊ฑฐ๋ผ ์๊ฐํฉ๋๋ค. ๋ฌผ๋ก ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง ์ ์๋ ํ์
์ผ ๋ฉ๋๋ค. ํผ๋ธ๋ฆฌ์ฑ์ ์ง์
์ฅ๋ฒฝ์ด ์๊ฐ๋ณด๋ค ๋์ ํธ์
๋๋ค. ์์ ํ ๋ฒ ๋ณด์ ๋ค๊ณ ๊ทธ ์์ ๋ด์ฉ๊ณผ ๋
ธํ์ฐ๊ฐ ๋ชจ๋ ํ์์๊ฒ ์ ํด์ง๋ ๊ฑด ์๋๊ธฐ ๋๋ฌธ์ ์์ ์ค๋ช
ํ ํ์ต๋ฐฉ๋ฒ์ ํตํด์ ๋ด ๊ฒ์ผ๋ก ๋ง๋๋ ๊ณผ์ ์ ํ์๊ธฐ ๋ฐ๋๋๋ค.
Q. ์น์ฌ์ดํธ ์ ์ํ๋ฉด์ ๋์ค๋ ์ด๋ก ์ ์ค๋ช
ํ๋ ์ด๋ก ํํธ๊ฐ ๋ฐ๋ก ์๋๋ฐ์?
A. ์ง๊ธ ์๊ฐํ์๋ ๊ณผ์ ์ ์
๋ฌธ, ์ด๊ธ ๊ณผ์ ์ด ์๋๊ณ ์ค๊ธ ๋ ๋ฒจ์ ๋ฐ์ํ ์น์ฌ์ดํธ ์ ์ฒด ์ ์ ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์์
๋๋ค. ๊ธฐ๋ณธ ์ด๋ก ํํธ์ ์ค์ ์์ ์ ์ ํ์ต์ ๋ค๋ฅธ ๊ณผ์ ์ ํตํด์ ์คํฌ์
ํ์๊ธฐ๋ฅผ ์ถ์ฒ๋๋ฆฝ๋๋ค.
Q. ๊ณต๋ถํ๋ค๊ฐ ๋ชจ๋ฅด๋ ๊ฒ ์์ผ๋ฉด ์ง๋ฌธ์ ์ด๋์ ํ๋์?
A. ์ง๋ฌธ์ด ์์ผ์๋ฉด [์ง๋ฌธ&๋ต๋ณ] ๊ฒ์ํ์ ๊ธ์ ๋จ๊ธฐ์๋ฉด ๋ฐ๋ก๋ ์๋์ด๋ ํ์ธ๋๋ฉด ๋ต๋ณ์ ๋๋ฆฝ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ง๋ฌธ์ ์ต๋ํ ๊ตฌ์ฒด์ ์ผ๋ก ํด์ฃผ์ธ์. ์ง๋ฌธ์ด ๊ตฌ์ฒด์ ์ด์ง ์์์ ๋ ์ถฉ๋ถํ ๋ต๋ณ์ด ์ข์ฒ๋ผ ์ฝ์ง ์์ต๋๋ค. ๊ทธ๋์ ์ง๋ฌธํ์ค ๋๋ ๊ถ๊ธํ์ ๋ด์ฉ๊ณผ ํจ๊ป ์์ฑ ์ค์ด์ HTML, CSS, JQUERY ์ฝ๋ฉ ํ๋ฉด ์บก์ฒํด์ ์ฒจ๋ถํด ์ฃผ์๋ฉด ๋ต๋ณ๋๋ฆฌ๊ธฐ๊ฐ ํจ์ฌ ์์ํฉ๋๋ค.
Q. ๊ฐ์ฌ๋ ์์
์ค <ํผ๋ธ๋ฆฌ์
์ทจ์
์ง์ง ์ค์ ๊ฐ์ด๋>๋ฅผ ๋จผ์ ๋ณด๋ฉด ์ข์๊น์?
A. ํผ๋ธ๋ฆฌ์ฑ ์คํฌ์ ๋ ์ตํ๋ ๊ฒ๋ ์ค์ํ์ง๋ง ๋จผ์ ํผ๋ธ๋ฆฌ์
๋ก์ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๊ฐ์ถ๋ ๊ฒ์ด ์ฐ์ ๋์ด์ผ ํฉ๋๋ค. ํผ๋ธ๋ฆฌ์
์ทจ์
์ค์ ๊ฐ์ด๋ ์ ์์ฑ
(PDF)์์๋ ํผ๋ธ๋ฆฌ์ฑ ๊ธฐ๋ณธ๊ธฐ๋ ๋ฐ๋์งํ ์ฝ๋ฉ ์ต๊ด๊ณผ ์์น, ๊ฒฝ๋ ฅ์ ์ฒ๋ผ ํผ๋ธ๋ฆฌ์ฑํ๊ธฐ ๋ฑ ํผ๋ธ๋ฆฌ์
๋ก์ ๋ฐ๋์ ์์์ผ ํ๋ ๋ด์ฉ์ ๊ผผ๊ผผํ ์ ๋ฆฌํ์ต๋๋ค. ํผ๋ธ๋ฆฌ์
์ทจ์
์ค์ ๊ฐ์ด๋ ์ ์์ฑ
(PDF)์ ๋จผ์ ๋ณด์๊ณ ํผ๋ธ๋ฆฌ์ฑ ๊ธฐ๋ณธ๊ธฐ์ ๋ํ ์ดํด๋๋ฅผ ์ถฉ๋ถํ ๊ฐ๊ณ ํ์ตํ์๊ธฐ๋ฅผ ๊ถํด๋๋ฆฝ๋๋ค. ์๋ ์ด๋ฏธ์ง๋ฅผ ํด๋ฆญํ์๋ฉด ์์
์๊ฐ ๋ด์ฉ์ ๋ณด์ค ์ ์์ต๋๋ค.
โฒ ํผ๋ธ๋ฆฌ์
์ทจ์
์ ์ํ ์ฝ๋ฉ์์ค ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์ ๋ก๋๋งต
โค ์ฝ๋ฉ์์ค ์๊ฐ์์๊ฒ ์จ ํผ๋ธ๋ฆฌ์
ํฉ๊ฒฉ ์์
โฒ ๊ตญ๋น์ง์ ํผ๋ธ๋ฆฌ์ฑ ๊ณผ์ ์ ํํ
4๊ฐ์ ๋ฐ ์ ๋ ๋ฐฐ์ด ํ์์ธ๋ฐ, ์ทจ์
ํ๋ค๊ณ ์นดํก์ด ์์ต๋๋ค.
โฒ ์ฝ๋ฉ์์ค ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ์ ์ ์คํ๋ผ์ธ ๊ฐ์ ์๊ฐ์ ๋ฉด์ ์ทจ์
๊ฒฐ๊ณผ ์นดํก์ ๋ฐ์์ต๋๋ค.(2023.4.24)
โค ์ฝ๋ฉ์์ค ์๊ฐ์๊ป์ ํผ๋ธ๋ฆฌ์
์ทจ์
ํ ๋ณด๋ด ์ฃผ์ ์ด๋ฉ์ผ
์ ์๋ ์๋
ํ์ธ์ :)
์ ์๋ ์ธํ๋ฐ ๊ฐ์ ๋ฃ๋ ํ์ ๊นO์ ์
๋๋ค.
์ด๋ฒ ์ฌ๋ฆ ๊ฐ์ธํฌํธํด๋ฆฌ์ค ๊ด๋ จํด์ ์กฐ์ธ ์ป๊ณ ์ ์ด๋ฉ์ผ ๋ณด๋๋ ํ์์
๋๋ค.
๊ธฐ์ต๋์ค๋ จ์ง์?ใ
ใ
๋ค๋ฆ์ด ์๋๋ผ,
์ ์๋๊ป ์กฐ์ธ ์ป์๋ ํฌํธํด๋ฆฌ์ค๋ก ํผ๋ธ๋ฆฌ์
์ทจ์
์ฑ๊ณตํ๋ค๋ ์์์ ์ ํ๊ณ ์ ๋ฉ์ผ ๋ณด๋ด์!
์ฌ์ง์ด!!
์ฌ๋์ธ์ ์ฌ๋ ค๋ ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ณด๊ณ ํ์ฌ์ชฝ์์ ๋จผ์ ์ฐ๋ฝ์ด ์๊ณ , ์ค์ผ๋ก ๋ฉด์ ์ ๋ณด๊ณ ํฉ๊ฒฉํ์ต๋๋ค!
ํ์ฌ์ชฝ์์ ํฌ๋ง์ฐ๋ด์ ๋ง์ถฐ์คฌ๊ณ ๋์์ธ, ๊ฐ๋ฐ ์
๋ฌด๋ฅผ ํ์ง ์๋ ์ ๋ง ํผ๋ธ๋ฆฌ์
! ์
๋ฌด๋ง ํ ์ ์๋ ํ์ฌ์ ๋ค์ด์ค๊ฒ ๋์์ต๋๋ค.
๊ฒฝ๋ ฅ์ง ํผ๋ธ๋ฆฌ์
๋ฅผ ๊ตฌํ๋ ํ์ฌ์๋๋ฐ, ์ ์
์ธ ์ ์๊ฒ ์ฐ๋ฝ์ด ์์ ์ ์ ์๊ฒ ์ฐ๋ฝ์ ์ฃผ์
จ๋๊ณ ๋ฌผ์ด๋ณด๋
๋ค๋ฅธ ์ฌ๋๋ค ํฌํธํด๋ฆฌ์ค๋ ์์ฒญ ๋ง์ด ๋ดค๋๋ฐ, ์ ํฌํธํด๋ฆฌ์ค์์ ๋ณธ "๊ธฐ๋ฅ์ ์์"๊ฐ ๋์ ๋์ด์ ์ฐ๋ฝ์ ์ฃผ์
จ๋ค๊ณ ํฉ๋๋ค
์ด๊ฒ ๋ค ์ ์๋์ ๊ฐ์ ๋๋ถ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
์ ์๋ ๊ฐ์๋ฅผ ๋ฃ์ง์์๋ค๋ฉด ์ ์ญ์ ๊ทธ๋ฅ ํ๋ฒํ ํฌํธํด๋ฆฌ์ค๊ฐ ๋์์ํ
๋ฐ ์ ์๋๊ป์ ๋ง์ํด์ฃผ์ ๊ฟํ๋ค๋ก ์ทจ์
์ ์ฑ๊ณต ํ ์ ์์์ต๋๋ค!
๋น๋ก ์ค์ ๋ก ๋ต์ ์ ์์ง๋ง,
ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ง๋๋ ๋ด๋ด ์ ์๋ ๊ฐ์ ๋ณด๋ฉด์ ์์ฒญ ์์งํ๊ณ ๋ฏฟ๊ณ ์ด์ฌํ ๋ง๋ค์์ต๋๋ค!
ํ์์์ ๊ธด ์๊ฐ ์์
์ ๋ค์ผ๋ฉด์ ์์๋ ์ค๋ ฅ๋ณด๋ค ์ ์๋ ๊ฐ์๋ฅผ ๋ฃ๊ณ ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ง๋ 3๋ฌ๋์ ์ค๋ ฅ์ด ์์ฒญ ์์นํ๋ค๋๊ฒ ๋๊ปด์ง๋๋ค
๊ฐ์ ํ ์ํ๊ณ ,
์ ์๋์ด ๋ง์ํด์ฃผ์ ๋๋ก ๋ฏฟ๊ณ ํ๋๋ ์ ๋ง ์ข์ ๊ฒฐ๊ณผ๊ฐ ๋์์ต๋๋ค.
์ ๋ง ๊ฐ์ฌ๋๋ฆฝ๋๋ค!
์ฝ๋ก๋ ์กฐ์ฌํ์๊ตฌ์
๋ ์ข์ ๊ฐ์๋ก ๋ง๋๊ณ ์ถ์ต๋๋ค :)
์ ์๋ ์๋
ํ์ธ์~ ์ธํ๋ฐ ์๊ฐ์ OOO์ด์์~ ๋ฉ์ผ ์ฃผ์๋ ๋ค๋ฅธ ์๊ฐ์ ๋ต๋ณ๋ณด๊ณ ์์์ต๋๋ค..ใ
ใ
๊ฐ์ฌ ์ธ์ฌ ์ ํด๋๋ฆฌ๋ ค๊ตฌ์ ใ
ใ
์ง๊ธ๊น์ง ์ ์๋ ๊ฐ์ ์๊ฐํ๊ณ 2์ฃผ ์ ๋ ์ด๋ ฅ์ ๋ด๋ณด๋ฉด์ ๊ณ ์ ์ข ํ๋๋ฐ์..
ํ์ฌ ํ ๊ณณ ๋ฉด์ ํฉ๊ฒฉํ์ฌ ์ถ๊ทผํ๊ธฐ๋ก ํ์ต๋๋ค.. ์ ๋ง ๊ฐ์ฌ๋๋ฆฝ๋๋ค..ใ
ใ
์ฌ์ค ์ ๊ฐ ๋์ด๊ฐ 32์ด์ด๋ผ ๊ฑฑ์ ์ด ๋ง์์ต๋๋ค ์ด๋ ฅ์๋ฅผ ๋ง์ด ๋ฃ์๋๋ฐ ์ฐ๋ฝ๋ ์ ์์ค๊ณ ..
๊ทผ๋ฐ ์ด ํ์ฌ ์ธ์ฌ๋ด๋น์๊ฐ ๋ณธ์ธ์ ํ์ ์ถ์ ์ ์์ข์ํ๋ค๊ณ ํ๋๋ผ๊ตฌ์ ใ
ใ
์ ๊ฐ ์
์ฌํ๊ธฐ๋ก ํ ํ์ฌ๋ ์์ง๋ง ๊ฐ๋ฐ์๋ ์๊ณ ์น๋์์ด๋๋ ์์ต๋๋ค.
3๊ฐ์๋์ ๊ต์ก์ํค๊ณ ์ค๋ฌด์ ํฌ์
ํ๋ ์์ด๋๋ผ๊ตฌ์.
๊ฑฐ๋ฆฌ๋ ์ข ์๊ณ ์ฐ๋ด๋ ๋ฎ๊ธดํ์ง๋ง.. ์ด์ฌํ ๋ฐฐ์์ ์ฐ๋ด์ ์ฌ๋ ค๋ณด๋ ค๊ตฌ์~ ใ
ใ
๊ทธ ๋์ ์ ๋ง ๊ฐ์ฌํ์ต๋๋ค. ์ง๋ฌธ ๋ต๋ณ๋ ์ํด์ฃผ์๊ณ ์ด๋ ๊ฒ ์จ๋ผ์ธ์ผ๋ก ๊ฐ์๋ฅผ ๋ค์ด์ ์ทจ์
์ด ๋๋๊น ๋๋ฌด ์ ๊ธฐํ๋ค์..
์์ผ๋ก๋ ์ ์๋ ๊ฐ์ ๋ค์ผ๋ฉด์ ์ค๋ ฅ ๋ ํค์ฐ๋ฉด์ ๊ณต๋ถํ๊ฒ ์ต๋๋ค. ํ์ดํ
~!
๐๐ปโโ๏ธ ์ง๋ฌธํ์๊ธฐ ์ ์ ๊ผญ! ์ฝ์ด์ฃผ์ธ์~!!
ํ์ตํ์๋ฉด์ ๊ถ๊ธํ์ ์ฌํญ์ด ์์ผ์๋ฉด ์ง๋ฌธํด์ฃผ์ธ์. ์ง๋ฌธ ์ฃผ์ค ๋๋ ์๋๋ ๋ด์ฉ๊ณผ ์ฝ๋ ๊ทธ๋ฆฌ๊ณ ๋ธ๋ผ์ฐ์ ๊ฒฐ๊ณผ ํ๋ฉด ์บก์ณ๋ฅผ ์ฌ๋ ค์ฃผ์
์ผ ํฉ๋๋ค. ์ฝ๋์ ๊ฒฝ์ฐ HTML, CSS, JS ์ฝ๋ ๋ชจ๋ ์ฌ๋ ค์ฃผ์
์ผ ์ ํํ ๋ต๋ณ์ ๋๋ฆด ์ ์์ต๋๋ค.
์ง๋ฌธ๊ธ์ ์ฝ๋ ์์ด ๊ธ๋ก๋ง ๋ฌธ์ ๋ฅผ ์ค๋ช
ํ์๋ฉด ์ ๋ง ๊ฐ๋จํ๊ฒ ์๋๋ผ๋ฉด ์ ํํ ๋ต๋ณ์ ๋๋ฆฌ๊ธฐ ์ด๋ ต์ต๋๋ค. ๊ทธ๋ผ ์ ๊ฐ 'HTML, CSS, JS ์ฝ๋์ ๋ธ๋ผ์ฐ์ ์บก์ณ๋ฅผ ์ฌ๋ ค์ฃผ์ธ์~' ๋ผ๊ณ ๋ค์ ๋ต๋ณ์ ๋ฌ ์ ๋ฐ์ ์๊ณ ๊ฒฐ๊ตญ ํด๊ฒฐ์ฑ
์ ์ป๋๋ฐ ๋ฒ๊ฑฐ๋กญ๊ณ ์๊ฐ์ด ๋ ๊ฑธ๋ฆฝ๋๋ค.

โฒ ํด๋น ๊ฐ์ ์ปค๋ฎค๋ํฐ์ ์์ฃผ๋ฌป๋ ์ง๋ฌด ๋ณด๊ธฐ๋ฅผ ๋จผ์ ํ์ธํด์ฃผ์ธ์~
โก ํจ๊ณผ์ ์ธ ํ์ต์ ์ํด ๊ผญ! ์ฝ๋ฉ์์ค ํผ๋ธ๋ฆฌ์ฑ ์ ํ๋ธ๋ฅผ ์ฐธ๊ณ ํด์ฃผ์ธ์.

์ฝ๋ฉ์์ค ํผ๋ธ๋ฆฌ์ฑ ์ ํ๋ธ ์ฑ๋์์ ์ด๋ก ์์ ๊ฐ์์ ๋ณํํ์๊ธฐ ๋ฐ๋๋๋ค. ๋ฌผ๋ก ๋ชจ๋ ์ด๋ก ์์์ด ์ ํ๋ธ ์ฑ๋์ ์๋๊ฑด ์๋์ง๋ง ์ค์ํ ์ด๋ก ์์์ ๊ฑฐ์ ๋ค ์์ต๋๋ค. ์์์ด ๋ง์ผ๋๊น ์์์ ์ฐพ๋ ๋ฐฉ๋ฒ์ ์๋ ์์์ฒ๋ผ ๊ฒ์ํ์๋๊ฒ ์ข์ต๋๋ค.
์ฝ๋ฉ์์ค ํผ๋ธ๋ฆฌ์ฑ ์ ํ๋ธ ์ฑ๋ : https://www.youtube.com/codingworks
๐จ๐ผโ๐ซ ๊ฐ์ฌ์๊ฐ
- (ํ์ฌ) ํ๋ฆฌ๋์ ํ๋ก ํธ์๋ ํผ๋ธ๋ฆฌ์
- ๋์กฐ์ ์ปดํจํฐ์์นด๋ฐ๋ฏธ ์น ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์ฌ
- ์ด์ ์ปดํจํฐ์์นด๋ฐ๋ฏธ ์น ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์ฌ
- ํ๋ก ํธ์๋ ํผ๋ธ๋ฆฌ์
, ํ๋ก ํธ์๋ ํผ๋ธ๋ฆฌ์ฑ ์ ๋ฌธ๊ฐ์ฌ
- ์ด์ ์ปดํจํฐ์์นด๋ฐ๋ฏธ ์น๋์์ธ ๊ธฐ๋ฅ์ฌ ์ค๊ธฐ ์๊ฒฉ์ฆ๋ฐ
- ๋ผํฌํผ์ ICT ํธ๋ ์ด๋ ์ผํฐํ๋ก ํธ์๋ ํผ๋ธ๋ฆฌ์ฑ ๋ง์คํฐ ์ฝ์ค ๊ฐ์ฌ
- ์ด์ง์ค์๋ํ๋ก ํธ์๋ ํผ๋ธ๋ฆฌ์ฑ, UI/UX ๋์์ธ
- HTML+CSS+JQUERY ํผ๋ธ๋ฆฌ์ฑ ์ ํ๋ธ ์ฑ๋ '์ฝ๋ฉ์์ค' ์ด์
- โก ์ฝ๋ฉ์์ค ํผ๋ธ๋ฆฌ์ฑ ์ ํ๋ธ ์ฑ๋ - https://www.youtube.com/codingworks
๋ฉด์ ๊ณผ ์ทจ์
์ ๋ถ๋ฅด๋ ํผ๋ธ๋ฆฌ์
๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง ์ ์, scss, sass, flex, grid, html, css, html/css, website, ์น ํผ๋ธ๋ฆฌ์
, ํผ๋ธ๋ฆฌ์
์ทจ์
, ์น์ฌ์ดํธ, ์ฝ๋ฉ, coding, jquery, javascript, ์ ์ด์ฟผ๋ฆฌ, ์๋ฐ์คํฌ๋ฆฝํธ, ๋ ์ด์์, ์ธํฐ๋ ํฐ๋ธ์น, interactive web, web design, ์น๋์์ธ, ํฌํธํด๋ฆฌ์ค, ํผ๋ธ๋ฆฌ์ฑ, ๋ฐ์ํ ์น, ์น๋์์ธ๊ธฐ๋ฅ์ฌ ์ค๊ธฐ์ํ, bootstrap, ๋ถํธ์คํธ๋ฉ, css frameworks, ํ๋ ์์ํฌ