์ฝ๊ฒ ๋ฐฐ์ฐ๋ adobe XD ๊ธฐ์ด๋ถํฐ ์ค๋ฌด๊น์ง ์๋ฒฝ ๊ฐ์ด๋ ๊ณผ์ ์ ๋๋ค. ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ design๋ถํฐ prototype์ผ๋ก ๊ฐ ํ์ด์ง ์ฐ๊ฒฐ ๊ทธ๋ฆฌ๊ณ ์์์ ์๊น์ง ์งํํด ๋ณด๋ ๊ณผ์ ์ ๋๋ค.
๊ตญ๊ธฐ๊ณผ์ ์ด์์ ๋
ธํ์ฐ๋ฅผ ๋ด์๋ค!
์ค๋ฌด์์ ๋ฐ๋ก ํ์ฉ ๊ฐ๋ฅํ ๋ฐ์ํ ์น ํ
ํ๋ฆฟ ์ ์
HTML5 + CSS3
HTML5์ CSS์ ๊ธฐ์ด์
๋ฐ์ํ ์น์ ๋ํด ํ์ตํ๊ณ
์ต์ข
์ ์ผ๋ก ๋ฐ์ํ ์น ํ
ํ๋ฆฟ์
๋ง๋ค์ด๋ณด๋ ๊ฐ์ข์
๋๋ค!
์ด ๊ฐ์๋ ์น ํ์ค์ ์ฒ์ ์ ํ์๋ ๋ถ๋ค์ ์ํด ์ ์๋์์ต๋๋ค. HTML/CSS์ ์์ฃผ ์ฌ์ด ๊ธฐ์ด๋ถํฐ HTML ์ ๋ณด์ค๊ณ ๋ฐ CSS Layout์ ์ ์์ ์ตํ ๋ค์, ์ต์ข
์ ์ผ๋ก ๋ฐ์ํ ์น ํ
ํ๋ฆฟ์ ๋ง๋๋ ๊ฒ์ด ๋ชฉํ์
๋๋ค.
์ค๋ฌด์์ ๋ฐ๋ก ํ์ฉํ ์ ์๋๋ฐ ๋
ธํ์ฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ฐ์ํ ์น ํ
ํ๋ฆฟ์ ์ ์ ๊ณผ์ ์ ๋ด๊ณ ์ ํฉ๋๋ค. HTML ๊ธฐ์ด, CSS ์ฌ์ฉ๋ฒ, ์ค๋ฌด์์ ์ฃผ๋ก ์ฐ์ด๋ CSS Layout์ ๋ง๋๋ ๋ฒ, Flex ์ฌ์ฉ๋ฒ๊น์ง ์์ฐจ์ ์ผ๋ก ์ตํ๊ณ ์น ํผ๋ธ๋ฆฌ์
๋ฅผ ํฅํด ํ ๊ฑธ์์ฉ ๋ค๊ฐ๊ฐ์ธ์.
๊ธฐ์ด์ ์ธ ๋ด์ฉ๋ถํฐ ์ค๋ฌด์์ ํ์ํ ์ฌํ ํ์ต๊น์ง. ๊ฐ ํํธ์ ์ค์ต ๋ฌธ์ ์ ๊ฐ์ ๋
ธํธ๋ฅผ ํ์ธํด๋ณด์ธ์!
์น์
์ ๋ง์ง๋ง์๋ ์น์
๋ณ ์ฐ์ต ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ๋ฌธ์ ๋ฅผ ๋จผ์ ํ์ด๋ณด์๊ณ ๊ฒฐ๊ณผ๋ฅผ ํ์ธ ํ, ๋ค์ ์น์
์ ๊ฐ์๋ฅผ ๋ฃ๋ ๊ฒ์ ์ถ์ฒํด ๋๋ฆฝ๋๋ค.
ํ์๋ค์ด ์ข ๋ ์ฝ๊ฒ ์ดํดํ๊ณ ํธํ๊ฒ ๊ณต๋ถํ ์ ์๋๋ก ๊ฐ์ ๋
ธํธ๋ฅผ PDF๋ก ์ ๊ณตํ๊ณ ์์ต๋๋ค. ์จยท์คํ๋ผ์ธ์์ ์์
์ ์งํํ๋ฉฐ ๋ชธ์ ๋๋ ๋
ธํ์ฐ๋ฅผ ๋ด์ ๋ฐ์ ์ํจ ๊ฒ์ผ๋ก ์ฌ๋ฌ๋ถ์ ํ์ต์ ํฐ ๋์์ด ๋ ๊ฒ์
๋๋ค.
์จยท์คํ๋ผ์ธ ๊ต์ก์ ์ ์๊ฐ ๋ด๊ธด ๊ฐ์ ๋
ธํธ
์ฝ๋ฉ ํ ๋ฒ
๋ฐฐ์๋ณผ๊น?
์ฝ๋ฉ ์
๋ฌธ์ ์ํ๋
์ฝ๋ฉ ์์ด๋ณด
์น ํผ๋ธ๋ฆฌ์
๊ฐ
๋๊ณ ์ถ์ด์
์ฝ๋ฉ์ ์ ํ ๋ชจ๋ฅด์ง๋ง
์ ์ง์ ํฌ๋งํ์๋ ๋ถ
์ ๋ณด์ค๊ณ๋
์ด๋ป๊ฒ ํ์ง?
UI ๋์์ธ์ ์ํ
์ ๋ณด์ค๊ณ๊ฐ ํ์ํ ๋ถ
ํฌํธํด๋ฆฌ์ค์ฉ
ํ
ํ๋ฆฟ์ ์๋?
๋ฐ์ํ ์น ์ฌ์ดํธ
ํ
ํ๋ฆฟ์ด ํ์ํ์ ๋ถ
์น ์ฝ๋ฉ์ ์
๋ฌธํ๊ณ ์ถ์ผ์ ๋ถ, ์ฝ๋ฉ์ ์ ํ ๋ชจ๋ฅด๋ ์ํ์์ ์น ํผ๋ธ๋ฆฌ์
๋ก์ ์ ์ง์ ์ํ์๋ ๋ถ, UI ๋์์ธ ์ ์ ๋ณด ์ค๊ณ๊ฐ ํ์ํ์ ๋ถ, ํผ๋ธ๋ฆฌ์ฑ์ ๋ฐฐ์์ผ ํ๋ ๋์์ด๋โฆ. ๋ค์ํ ๋ถ๋ค์๊ฒ ๋์์ด ๋๊ธฐ ์ํด ์ฒด๊ณ์ ์ด๊ณ ํ์์ ์ธ ๋ด์ฉ๋ง ๊ณจ๋ผ์ ๋ง๋ค์์ต๋๋ค. ํผ์์ ๊ณต๋ถํ๋ ๊ฒ์ด ๋๋ฌด ์ด๋ ต๊ณ ๋ฐฉ๋ํ ์์ ๋์ปฅ ๊ฒ์ ๋จน์ผ์
จ๋ค๋ฉด ๋์๋๋ฆฌ๊ฒ ์ต๋๋ค!
๋ํ ํผ๋ธ๋ฆฌ์ฑ์ ์ตํ๋ ๋์์ด๋๋ ์น ํผ๋ธ๋ฆฌ์
๋ฅผ ํฌ๋งํ์๋ ๋ถ๋ค์ ๊ฐ์๋ฅผ ํตํด ๋ง๋๋ ํ
ํ๋ฆฟ์ ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ง๋๋ ๋ฐ ์ด์ฉํ ์ ์์ ๊ฒ์
๋๋ค.
part1. html / css ๊ธฐ์ด
html ๊ธฐ์ด๋ฌธ๋ฒ๊ณผ vscode๋ฅผ ์ด์ฉํ ๋ฌธ์ ๋ง๋ค๊ธฐ tag์ ํน์ฑ์ ๋ํด ๋ฐฐ์๋๋ค.
part2. css๊ธฐ์ด
css์ ๊ธฐ์ด๋ฌธ๋ฒ๊ณผ ์ฌ์ฉ๋ฒ, ๋ค์ํ ์ ํ์์ ๊ดํด์ ๊ณต๋ถํฉ๋๋ค.
part3. html / semantic / list / ์ฌ์ฉ์ ์
๋ ฅ tag / grouping
html์์ ์ฃผ๋ก ๋ง์ด ์ฌ์ฉ๋๋ tag์ semantic /list /์ฌ์ฉ์์
๋ ฅ tag / grouping์ ๋ค์ํ tag์ ์ฌ์ฉ๋ฒ์ ๋ํด์ ๋ฐฐ์๋๋ค.
part4. font / unit
CSS์ ์๋ ํด๋ ์ค์ ๋ฌธ๋จ ์ ๋ ฌ, ๊ธ๊ผด, ๋จ์์ ๊ดํด ๊ณต๋ถํฉ๋๋ค.
part5. css / background / display / border / boxmodel
CSS์ ํต์ฌ ์ค์ ํ๋๋ก display์ boxmodel์ ๊ดํด ์ง์ค์ ์ผ๋ก ๊ณต๋ถํฉ๋๋ค.
part6. css / flex / position / transition / animation / transform
css์ ๋ ์ด์์์ ์ฃผ๋ก ๋ง์ด ์ฌ์ฉ๋๋ flex์ position ๊ทธ๋ฆฌ๊ณ transition / animation / transform์ ๊ดํด ๊ณต๋ถํฉ๋๋ค
part7. css / media query /๋ฐ์ํ ์น
๋ฐ์ํ ์น ์์
์ ์ํ media query์ ๊ดํด์ ๊ณต๋ถํฉ๋๋ค.
์ง์๊ณต์ ์์ ๋ง๋ค ์์ ์์
์ ํ์ธํ์ธ์! ํ ๋ ํ ๋ ํจ๊ป ๋ง๋ค์ด๋ด
์๋ค!
์ด ๊ฐ์์์๋ ์์, ์ฆ ๋์์ธ ์์
์ ๋ง๋๋ ๊ณผ์ ์ ํฌํจ๋์ด ์์ง ์์ต๋๋ค. ์ฐธ๊ณ ํด์ฃผ์ธ์.
์ข ํฉ ์์ ๋ณด๊ธฐ
desktop ํ๋ฉด
tablet ํ๋ฉด
navigation
responsive
mobile ํ๋ฉด
Q. ๋น์ ๊ณต์๋ ๋ฐฐ์ฐ๋๋ฐ ์ด๋ ต์ง ์๋์?
๋ค, ๋น์ ๊ณต์๋ ์ฝ๊ฒ ์ต๋ํ ์ ์๋๋ก ์ค๋ช ๋ ธํธ๋ฅผ ์ค๋นํ์ต๋๋ค. ๊ฐ์๋ฅผ ๋ฃ๋ค๊ฐ ์ด๋ ค์ด ๋ถ๋ถ์ด ์๊ธธ ๊ฒฝ์ฐ ์ธ์ ๋ ์ง๋ฌธํด์ฃผ์ธ์. ์ต๋ํ ๋นจ๋ฆฌ ์๋ตํด ๋๋ฆฌ๊ฒ ์ต๋๋ค.
Q. ์ด ์์ ์ ๋ค์ด์ ํผ๋ธ๋ฆฌ์ ๊ฐ ๋ ์ ์์๊น์?
์์์ด ๋ฐ์ ๋๋ค. ์ด ๊ฐ์๋ฅผ ์ ํ์ตํ์๊ณ ๋์ ์ค์ค๋ก ์ผ๋ง๋ ๋ ธ๋ ฅํ์ฌ ํ์ตํ๋๋์ ๋ฐ๋ผ ๋ฌ๋ ธ์ง๋ง ์ถฉ๋ถํ ํผ๋ธ๋ฆฌ์ ๊ฐ ๋ ์ ์๋ค๊ณ ์๊ฐ๋ฉ๋๋ค. ๋น๋ง์ด ์๋๋ผ ์คํ๋ผ์ธ ๊ฐ์์์ ์ง์ ๋ชธ์ ๋๋ ๋ฐ์ ๋๋ค.
Q. ์์ ๋ด์ฉ์ ์ด๋ ์์ค๊น์ง ๋ค๋ฃจ๋์?
HTML5/CSS3 ํนํ layout ์ ์ ์ค flex๋ฅผ ์ฃผ๋ก ํ์ฉํ ๋ฐ์ํ ์น ์ ์ ๋ฐ ์ ๋ณด์ค๊ณ๋ฐฉ๋ฒ์ ์ด์ ์ ๋ง์ท์ต๋๋ค.
์ง์๊ณต์ ์ LizB์
๋๋ค ์น๋์์ธ ๊ธฐ๋ฅ์ฌ ์ค๊ธฐ ๊ฐ์ข์
์ ์ฒด ๋ด์ฉ์ ์์ฑํ๋ ๊ฐ์๊ฐ ์๊ฒฉ์ฆ ํฉ๊ฒฉ์ ๋์์ด ๋ ๊ฑฐ๋ผ
์๊ฐํด์ ๊ฐ์๋ฅผ ์
๋ฐ์ดํธ ํ๊ฒ ๋์์ต๋๋ค.
์๊ฐํ์๊ณ ์ค๊ธฐ ์ํ์ ๊ผญ ํฉ๊ฒฉํ์๊ธฐ๋ฅผ ๊ธฐ์ํ๊ฒ ์ต๋๋ค.
์ง๋ฌธ, ์ด๋ฉ์ผ, ์๊ฐํ๋ฑ์ ํผ๋๋ฐฑ ํด์ฃผ์๋ฉด
์ถ๊ฐ ๊ฐ์๋ฅผ ์ํ์๋ฉด ๋ค๋ฅธ ์ ํ๋ ์
๋ฐ์ดํธ๋ ๊ณ ๋ คํด ๋ณด๊ฒ ์ต๋๋ค.
๋ ๋
ธ๋ ฅํ๋ ์ง์๊ณต์ ์๊ฐ ๋๊ฒ ์ต๋๋ค. ๋ ๊ฐ์ฌํฉ๋๋ค. :)
์๋
ํ์ธ์~ XD๋ฅผ ๊ธฐ์ด๋ถํฐ ์ค๋ฌด๊น์ง ํ๋ฒ์ ๋ฐฐ์ธ์ ์๋ ๊ฐ์๋ฅผ ์คํํ์ต๋๋ค.
prototype์ด๋ UI/UX Design์ ๊ด์ฌ์ด ์์ผ์๊ฑฐ๋ ๊ทธ๋ํฝ ํฌํธํด๋ฆฌ์ค๊ฐ ํ์ํ ์๋น ๋์์ด๋์๊ฒ ๋์์ด ๋ ์ ์์๊ฑฐ์์.
๋ง์ ๊ด์ฌ ๋ถํ ๋๋ฆฌ๊ฒ ์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค^^ ์ํด๋ณต ๋ง์ด ๋ฐ์ผ์ธ์!
๋งํฌ๊ฐ ์๋ชป๋ ๋ค์ ๋ณด๋
๋๋ค. ~~~
์๋
ํ์ธ์~ XD๋ฅผ ๊ธฐ์ด๋ถํฐ ์ค๋ฌด๊น์ง ํ๋ฒ์ ๋ฐฐ์ธ์ ์๋ ๊ฐ์๋ฅผ ์คํํ์ต๋๋ค.
prototype์ด๋ UI/UX Design์ ๊ด์ฌ์ด ์์ผ์๊ฑฐ๋ ๊ทธ๋ํฝ ํฌํธํด๋ฆฌ์ค๊ฐ ํ์ํ ์๋น ๋์์ด๋์๊ฒ ๋์์ด ๋ ์ ์์๊ฑฐ์์.
๋ง์ ๊ด์ฌ ๋ถํ ๋๋ฆฌ๊ฒ ์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค^^ ์ํด๋ณต ๋ง์ด ๋ฐ์ผ์ธ์!
๊ณต๊ฐํ์ง ์๋ ๊ฐ์๋ก ์๊ฐ์ด ์ ํ๋ฉ๋๋ค.