Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

ํผ๋ธ”๋ฆฌ์…” ์ทจ์—…ํ•˜๋Š” ํ›Œ๋ฅญํ•œ ์ด๋ ฅ์„œ ์ž‘์„ฑ ๊ฐ€์ด๋“œ

ํผ๋ธ”๋ฆฌ์…” ์ทจ์—…์„ ์œ„ํ•ด ์ฑ„์šฉ ๋‹ด๋‹น์ž์—๊ฒŒ ์–ดํ•„ํ•  ์ˆ˜ ์žˆ๋Š” ์ด๋ ฅ์„œ ์ž‘์„ฑ๋ฐฉ๋ฒ•์„ ์ƒ์„ธํžˆ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์ด๋ ฅ์„œ ์ž‘์„ฑ์„ ์–ด๋””์„œ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์•ผ ํ• ์ง€ ์–ด๋ ค์šด ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์‹ ์ž… ๋˜๋Š” ์ด์ง์„ ์œ„ํ•ด ํผ๋ธ”๋ฆฌ์…” ์ด๋ ฅ์„œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์‹ค์ œ ์‚ฌ๋ก€๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ ์˜ˆ์‹œ์™€ ํ•จ๊ป˜ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ, ์ง€์›์ž ์ž…์žฅ์—์„œ์˜ ์ด๋ ฅ์„œ ์ž‘์„ฑ ๋ฐฉ๋ฒ•์ด ์•„๋‹ˆ๋ผ ์ฑ„์šฉ ๋‹ด๋‹น์ž ์ž…์žฅ์—์„œ ๋ƒ‰์ •ํ•œ ๊ด€์ ์—์„œ ๋ฉด์ ‘์„ ๋ถ€๋ฅด๋Š” ์ด๋ ฅ์„œ ์ž‘์„ฑ ๊ฐ€์ด๋“œ์ž…๋‹ˆ๋‹ค. ์–ดํ•„ํ•˜๋Š” ์ด๋ ฅ์„œ ์ž‘์„ฑ ๋ฐฉ๋ฒ•๊ณผ ํ•จ๊ป˜ ๊ฐ•์กฐํ•  ์‚ฌํ•ญ, ์ฃผ์˜ํ•  ์‚ฌํ•ญ ๊ทธ๋ฆฌ๊ณ  ๊ตฌ์ฒด์ ์ธ ๊ฟ€ํŒ๊ณผ ์ฝ”๋”ฉ์›์Šค๊ฐ€ ์ œ์ž‘ํ•œ ์ด๋ ฅ์„œ ํ…œํ”Œ๋ฆฟ๊นŒ์ง€ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

Thumbnail

[์ƒˆ๋กœ์šด ๊ฐ•์˜ ์˜คํ”ˆ ์†Œ์‹] SCSS(SASS)+FLEX ์‹ค์ „ ๋ฐ˜์‘ํ˜• ์›น ํ”„๋กœ์ ํŠธ with Figma

์•ˆ๋…•ํ•˜์„ธ์š”. ์ฝ”๋”ฉ์›์Šค์ž…๋‹ˆ๋‹ค.
์ด๋ฒˆ์— ์ƒˆ๋กญ๊ฒŒ <SCSS(SASS)+FLEX ์‹ค์ „ ๋ฐ˜์‘ํ˜• ์›น ํ”„๋กœ์ ํŠธ with Figma> ๊ฐ•์˜๊ฐ€ ์˜คํ”ˆ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

SCSS(SASS)์™€ FLEX Layout์„ ์‹ค์ „์— ์™„๋ฒฝํ•˜๊ฒŒ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค! ํ”ผ๊ทธ๋งˆ๋กœ ์ „์ฒด ์›น์‚ฌ์ดํŠธ์˜ ๋ฉ”์ธ ํŽ˜์ด์ง€ ๋ฐ ํ•ต์‹ฌ ์„œ๋ธŒ ํŽ˜์ด์ง€ UI๋ฅผ ๋””์ž์ธํ•˜๊ณ , ์ผ๊ด€์„ฑ ์žˆ๋Š” ํด๋ž˜์Šค๋„ค์ž„๊ณผ ํ•จ๊ป˜ HTML ์™€์ด์–ดํ”„๋ ˆ์ž„ ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“ค์–ด ํผ๋ธ”๋ฆฌ์‹ฑ๊นŒ์ง€ ์™„๋ฃŒํ•˜๋Š” ์ฒด๊ณ„์ ์ธ ๋ฐ˜์‘ํ˜• ์›น ์‚ฌ์ดํŠธ ํ”„๋กœ์ ํŠธ ์ œ์ž‘ ๊ณผ์ •์ž…๋‹ˆ๋‹ค. ์ด 35์‹œ๊ฐ„ ์ด์ƒ์˜ ๊ณผ์ • ์†์—์„œ ํ•ต์‹ฌ ์ด๋ก  ๋ฐ ์‹ค๋ฌด ํ™œ์šฉ ๋Šฅ๋ ฅ์„ ์ถฉ๋ถ„ํžˆ ์ตํžˆ๊ณ , PC - ๋ชจ๋ฐ”์ผ - ํƒœ๋ธ”๋ฆฟ ๋Œ€์‘ ๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ์„ ์„ค๊ณ„ ๋ฐ ์ œ์ž‘ํ•˜๋ฉด์„œ ๋ฐ˜์‘ํ˜• ์›น ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•œ ๊ฒฝํ—˜๊ณผ ๋…ธํ•˜์šฐ๋Š” ๋ฌผ๋ก  ์ œ์ด์ฟผ๋ฆฌ(jQuery) ํ•ต์‹ฌ ์ด๋ก  ๋ฐ ์‹ค๋ฌด ํ™œ์šฉ ๋Šฅ๋ ฅ๊นŒ์ง€ ๋Œ€ํญ ํ–ฅ์ƒ์‹œํ‚ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

๐Ÿšฉ ๊ฐ•์˜์†Œ๊ฐœ ๋ณด๋Ÿฌ๊ฐ€๊ธฐ : https://inf.run/TH3b

image"SCSS(SASS)+FLEX ์‹ค์ „ ๋ฐ˜์‘ํ˜• ์›น ํ”„๋กœ์ ํŠธ with Figma ๊ฐ•์˜๋กœ ์ฒด๊ณ„์ ์ธ ๋ฐ˜์‘ํ˜• ์›น ์‚ฌ์ดํŠธ ํ”„๋กœ์ ํŠธ ์ œ์ž‘ ๋Šฅ๋ ฅ ์™„์„ฑ"

SCSS(SASS)์™€ FLEX๋ฅผ ์‹ค์ „์— ์™„๋ฒฝํ•˜๊ฒŒ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค! 

Point 1. ํ”ผ๊ทธ๋งˆ(Figma)๋กœ SCSS(SASS)+FLEX ์›น์‚ฌ์ดํŠธ UI ๋””์ž์ธ ์ œ์ž‘
Point 2. SCSS(SASS)+FLEX ์›น์‚ฌ์ดํŠธ HTML ์™€์ด์–ดํ”„๋ ˆ์ž„ ๋ชจ๋“  ํŽ˜์ด์ง€ ์ƒ์„ธํ•œ ์ œ์ž‘
Point 3. SCSS(SASS)+FLEX๋ฅผ ํ™œ์šฉํ•œ ๋‹ค์–‘ํ•œ ๋‹ค์ˆ˜์˜ ์›น ํŽ˜์ด์ง€ ํผ๋ธ”๋ฆฌ์‹ฑ ์ œ์ž‘
Point 4. PC, ๋ชจ๋ฐ”์ผ, ํƒœ๋ธ”๋ฆฟ ๋Œ€์‘ ๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ ์„ค๊ณ„, ์ œ์ž‘ ๊ทธ๋ฆฌ๊ณ  ์™„๋ฒฝํ•œ ํผ๋ธ”๋ฆฌ์‹ฑ ์ž‘์—…๊นŒ์ง€
Point 5. ๋ฐ˜์‘ํ˜• ์›น ํ”„๋กœ์ ํŠธ ์ œ์ž‘์„ ์œ„ํ•œ ์ œ์ด์ฟผ๋ฆฌ ํ•ต์‹ฌ ์ด๋ก  ๋ฐ ์‹ค๋ฌด ํ™œ์šฉ ๋Šฅ๋ ฅ

์ฝ”๋”ฉ์›์Šค๊ฐ€ ์ง€๊ธˆ๊นŒ์ง€ ์ˆ˜๋งŽ์€ ์˜คํ”„๋ผ์ธ ํ•™์›๊ณผ ๊ฐœ์ธ ํฌํŠธํด๋ฆฌ์˜ค ํ™ˆํŽ˜์ด์ง€ ์ œ์ž‘ ๊ณผ์ •์—์„œ ์ˆ˜์—…ํ•œ ์ค‘์ƒ๊ธ‰ ํผ๋ธ”๋ฆฌ์‹ฑ ์ œ์ž‘ ๋…ธํ•˜์šฐ๊ฐ€ ๋‹ด๊ฒจ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ SCSS(SASS)+FLEX๋ฅผ ๊ธฐ๋ณธ์œผ๋กœ ์ œ์ž‘ํ•˜๋Š” ๋ฐ˜์‘ํ˜• ์›น ํผ๋ธ”๋ฆฌ์‹ฑ ํ”„๋กœ์ ํŠธ๋ผ์„œ SCSS(SASS)+FLEX ๋Šฅ๋ ฅ์„ ์ตœ๋Œ€ํ•œ์œผ๋กœ ๋Œ์–ด์˜ฌ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์™„๊ฐ• ํ›„ ํ•œ์ธต ํ–ฅ์ƒ๋œ ์ค‘์ƒ๊ธ‰ ๋ฐ˜์‘ํ˜• ์›น ํผ๋ธ”๋ฆฌ์‹ฑ ๋Šฅ๋ ฅ์„ ๊ฐ–๊ฒŒ ๋˜์‹ค ๊ฑฐ๋ผ๊ณ  ํ™•์‹ ํ•ฉ๋‹ˆ๋‹ค!

image

๋Œ“๊ธ€