2022.06.29(Wed)
[TIL] Day46
[SEB FE] Day44
์ค๋์ ์ด์ Figma Clone์ ์งํํ๋ ์ฌ์ดํธ์ธ ์นด์นด์คํก์ UI/UX๋ฅผ ๋ถ์ํด๋ณด๊ณ UI๋ฅผ ๊ฐ์ ํด๋ณด๋ ์๊ฐ์ ๊ฐ์ก๋ค. ๋ง์ ์ฌ์ฉ์๊ฐ ์นด์นด์คํก์ ์ด์ฉํ๋ ๋งํผ ๋ค๋ฐฉ๋ฉด์์ UI/UX๊ฐ ๋ฐ์ด๋ ํธ์ด์๋ค. ๐
Tab
: ์น๊ตฌ๋ชฉ๋ก, ์ฑํ
๋ชฉ๋ก, ๋๋ณด๊ธฐ... ํญModal
: ํ๋กํ ์ฌ์ง ํด๋ฆญ์ ์์ธ ํ๋กํ ํ๋ฉด ๋ชจ๋ฌToggle
: ์ค์ ํญ์ ์กด์ฌTag
: ์ถ์ฒ ํค์๋ ๋ฐ ๋จํก๋ฐฉ์์ ํน์ ์ธ๋ฌผ ํธ์ถ๋ฌดํ ์คํฌ๋กค
: ์น๊ตฌ๋ชฉ๋ก, ์ฑํ
๋ชฉ๋ก, ์ฑํ
๋ฐฉ ๋ด์ฉ ์คํฌ๋กค์๋ ์์ฑ
: ๋จํก๋ฐฉ ํน์ ์ธ๋ฌผ ํธ์ถ์ ์ด๋ฆ ์๋ ์์ฑ, ์น๊ตฌ ๊ฒ์์์ฝ๋์ธ
: ์ฑํ
๋ฐฉ ๊ณต์ง ์ ๊ธฐ ๋ฐ ์์ผ์ธ ์น๊ตฌ, ์ฆ๊ฒจ์ฐพ๊ธฐ, ์ฑ๋ ๋ฑ์บ๋ฌ์
: ์ผํ ํญ์์์ ๊ด๊ณ ๋๋กญ๋ค์ด
: ์ ๋ฌผํ๊ธฐ ํญ์์ ์ ๋ฌผ ์นดํ
๊ณ ๋ฆฌ ์ ํํ์ด์ง๋ค์ด์
: ์ผํ ํก๋๋ฐ์ค ํญ๋ชฉ์ ์กด์ฌ์ค์ ์นดํก์์ ์ฌ์ฉํ๋์ง๋ ๋ชจ๋ฅด๊ฒ ์ง๋ง Figma Clone์์ Column Grid๋ ๋ฐ๋ก ์ฌ์ฉํ์ง ์์๋ค.
๋ค๋ง, Column Grid ๋์ ์ฑํ ๋ชฉ๋ก์ ๋ณด์ฌ์ค ๋ Row Grid (10์ค)๋ฅผ ์ฌ์ฉํ์๋ค.
์์คํ
์ํ์ ๊ฐ์์ฑ
: โญ๏ธ ์ฌ์ง, ๋์์ ์ ์ก ๋ฑ์์ ๋ก๋ฉ ์งํ ์ํฉ ๋ณด์ฌ์ค์์คํ
& ํ์ค ์ธ๊ณ ์ผ์น
: โญ๏ธ ํฝํ ๊ทธ๋จ, ์์ด์ฝ ๋ง์ด ์ฌ์ฉ / ์ฌ์ด ๋จ์ด ์ฌ์ฉ(์์ผ์ธ ์น๊ตฌ, ์ฆ๊ฒจ์ฐพ๊ธฐ ...) โ ์ฝ๊ธฐ ์ฌ์์ฌ์ฉ์ ์ ์ด & ์์
: โญ๏ธ ์ค์๋ก ์ ์กํ ๋ฉ์ธ์ง ์ญ์ ๊ฐ๋ฅ ๋จ, ์ญ์ ์ทจ์๋ ๋ชปํจ์ผ๊ด์ฑ & ํ์ค
: โญ๏ธ ๋ค๋ฅธ ๋ฉ์ ์ ์ฑ๊ณผ ๋น๊ตํ์ฌ ๋น์ทํ UI๋ก ๊ตฌ์ฑ์ค๋ฅ ๋ฐฉ์ง
: โญ๏ธ ์ฑํ
๋ฉ์ธ์ง ์ญ์ ์ ์ฌ์ฐจ ํ์ธ๊ธฐ์ต๋ณด๋จ ์ง๊ด
: โญ๏ธ ์ต๊ทผ ๊ฒ์ ์ ์ฅ ๊ธฐ๋ฅ ์กด์ฌ์ฌ์ฉ์ ์ ์ฐ์ฑ & ํจ์จ์ฑ
: โ ๋ชจ๋์๊ฒ ๊ฐ์ ๊ธฐ๋ฅ ์ ๊ณต๋ฏธํ์ ์ด๊ณ ๋ฏธ๋๋ฉํ ๋์์ธ
: โ ๋ถ๊ฐ ๊ธฐ๋ฅ ๋๋ฌด ๋ง์-๊ฒ์, ์ผํ, ์ ๋ฌผํ๊ธฐ, ๋ฉ์ด์ปค์ค, ํค์ด์ต ...์ค๋ฅ ์ธ์, ์ง๋จ, ๋ณต๊ตฌ ์ง์
: โญ๏ธ ์ค๋ฅ ์์ธ ๋ช
์-์ ์ก ์คํจ, ์ธํฐ๋ท ์ฐ๊ฒฐ ๋ถ์์ ...๋์๋ง & ์ค๋ช
๋ฌธ์
: โญ๏ธ ๊ณ ๊ฐ์ผํฐ/๋์๋ง, ๊ฐ์ด๋ ์กด์ฌ์ด์ ํ๋ Figma Clone ์์ ์ ํ๋กํ ํ๋ฉด ํด๋ฆญ์ ์์ธ ํ๋กํ ํ๋ฉด์ด ๋ชจ๋ฌ์ฐฝ์ผ๋ก ๋์ค๋๋ก ๊ฐ์ ํ์ผ๋ฉฐ, ๋๋ณด๊ธฐ ํญ ํ๋จ์ ๊ด๊ณ ๋ค์ ์บ๋ฌ์ ๋ก ๋ฑ์ฅํ๋๋ก ๊ฐ์ ํ์๋ค.
๐ค ์๋ฃ๊ตฌ์กฐ ์ง์์ด ๊ฑฐ์ ๋ฌด์งํ ์ํ์์ ์์ฆ Coplit ๋ฌธ์ ๋ฅผ ํ๋ ค๊ณ ํ๋๊น ์ด๋ป๊ฒ ํ์ด์ผ ํ ์ง ์ ๊ทผ์ด ๋ถ๊ฐํ๋ค,, ๊ฐ๋ ์ฐพ์๋ด๋ ๊ฑฐ์ ๋ธ๋ก๊ทธ ๊ธ์ด ๋๋ถ๋ถ์ด๋ผ ์ ๋๋ก ํ์ตํ๊ธฐ๊ฐ ์ด๋ ค์ ๋ฌ๊น.. ๊ทธ๋ฌ๋ ์ฐฐ๋์ ์ค๋ Udemy - 'JavaScript ์๊ณ ๋ฆฌ์ฆ & ์๋ฃ๊ตฌ์กฐ ๋ง์คํฐํด๋์ค' ๊ฐ์ ์ธ์ผํ๊ธธ๋ ํนํด์ 17,000โฉ์ ๊ตฌ๋งคํ๋ค. ์ด์ฌํ ๋ฃ์ใ ๐ช
โ ํ๋ก๊ทธ๋๋จธ์ค Lv.1_๋ฌธ์์ด ๋ค๋ฃจ๊ธฐ ๊ธฐ๋ณธ ๋ฌธ์ ํ
โ๏ธ Coplit-๋ฐฐ์ด, ๊ฐ์ฒด ๋ถ๋ถ ๋ฌธ์ ๋ค์ ํ์ด๋ณด๊ธฐ
โ๏ธ ํ์ ๋ฆฌ์กํธ ๊ฐ์ JS ํํธ ๊ฐ์ ๋ฃ๊ธฐ
โ๏ธ Udemy ์๊ณ ๋ฆฌ์ฆ&์๋ฃ๊ตฌ์กฐ ๊ฐ์ - ํธ๋ฆฌ ์ํ(๊น์ด์ฐ์ ํ์) ๋ถ๋ถ ๊ฐ์ ๋ฃ๊ธฐ