๐ŸŽจ ๋†“์น˜์ง€ ๋ง์•„์•ผ ํ• &nbsp;<br class="hidden-xs hidden-sm">์•„์ž„์›น ๋””์ž์ธ๋ชจ๋“œ ๊ฟ€๊ธฐ๋Šฅ! 2ํƒ„

2021. 10. 07

blog cover image

์ง€๋‚œ <๋†“์น˜์ง€ ๋ง์•„์•ผ ํ•  ๋””์ž์ธ๋ชจ๋“œ ๊ฟ€๊ธฐ๋Šฅ> ๋‰ด์Šค๋ ˆํ„ฐ๋ฅผ ํ†ตํ•ด ๋ชฐ๋ž๋˜ ์•„์ž„์›น ๋””์ž์ธ๋ชจ๋“œ ๊ธฐ๋Šฅ๋“ค์„ ์•Œ๊ฒŒ ๋˜์–ด ์œ ์šฉํ•˜๋‹ค๋Š” ํ”ผ๋“œ๋ฐฑ์„ ๋งŽ์ด ๋ณด๋‚ด์ฃผ์…จ๋Š”๋ฐ์š”. ์›น์‚ฌ์ดํŠธ ๊ตฌ์„ฑ์— ํฐ ๋„์›€์ด ๋˜์…จ๋‹ค๋Š” ๋ถ„๋“ค๋„ ๋งŽ์•„์„œ ์•„์ž„์›น ๋งˆ์ผ€ํŒ…ํŒ€๊ณผ UXํŒ€์€ ์ •๋ง ๋ฟŒ๋“ฏํ–ˆ๋‹ต๋‹ˆ๋‹ค๐Ÿ˜† ์•„์ž„์›น ๊ณ ๊ฐ๋‹˜๋“ค์˜ ์—ด๋ค ์„ฑ์›์— ๋น ๋ฅด๊ฒŒ ๋ณด๋‹ตํ•˜๊ณ ์ž 2ํƒ„์„ ์ค€๋น„ํ•ด์™”์Šต๋‹ˆ๋‹ค! ์ด๋ฒˆ ๋‰ด์Šค๋ ˆํ„ฐ์—๋„ ๋†“์น˜์ง€ ๋ง์•„์•ผ ํ•  ๋””์ž์ธ๋ชจ๋“œ ๊ฟ€๊ธฐ๋Šฅ๋“ค์„ ๋ชจ์•„์™”์–ด์š”๐Ÿ’•




์œ„์ ฏ์— ๋‹ค์–‘ํ•œ ๋งํฌ๋ฅผ ๊ฑธ์–ด๋ณด์„ธ์š”๐Ÿ”—

*๋””์ž์ธ๋ชจ๋“œ > ์œ„์ ฏ ์˜ค๋ฅธ์ชฝ ๋ฒ„ํŠผ ํด๋ฆญ > ์„ค์ • > ๋งํฌ ์„ค์ •


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

๋™์˜์ƒ ๋งํฌ๋ฅผ ํ™œ์šฉํ•œ๋‹ค๋ฉด ๋ธŒ๋žœ๋“œ ์†Œ๊ฐœ ์˜์ƒ๊ณผ ๊ด‘๊ณ  ์˜์ƒ์„ ์ฒจ๋ถ€ํ•  ์ˆ˜๋„ ์žˆ๊ฒ ์ฃ ?๐Ÿ˜Š

โš ๏ธ ์ฃผ์˜ : ์†Œ์…œ๊ณต์œ  ๋งํฌ์˜ ์นด์นด์˜คํ†ก ๋งํฌ ์‚ฌ์šฉ์„ ์›ํ•  ๊ฒฝ์šฐ [ํ™˜๊ฒฝ์„ค์ • > ์†Œ์…œ ๋กœ๊ทธ์ธ/API ์„ค์ •]์—์„œ ์นด์นด์˜ค ๋งํฌ API ๊ฐ’์„ ์ž…๋ ฅํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋™์˜์ƒ ๋งํฌ์˜ ๊ฒฝ์šฐ ์œ ํŠœ๋ธŒ์™€ ๋น„๋ฉ”์˜ค ๋งํฌ ์—ฐ๊ฒฐ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.




๋ฉ”๋‰ด ๋Œ€ํ‘œ์ด๋ฏธ์ง€๋ฅผ ์„ค์ •ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด?๐Ÿ–ผ

*๋””์ž์ธ๋ชจ๋“œ > ์™ผ์ชฝ ์ƒ๋‹จ ๋ฉ”๋‰ด ๊ด€๋ฆฌ ํด๋ฆญ > ๋ฉ”๋‰ด ์˜ค๋ฅธ์ชฝ โ“˜ ์•„์ด์ฝ˜ ํด๋ฆญ > ๋ฉ”๋‰ด ๋Œ€ํ‘œ์ด๋ฏธ์ง€ ์„ค์ •


๊ฒ€์ƒ‰์—”์ง„ ๋˜๋Š” SNS์— ๋ฉ”๋‰ด ๋งํฌ๋ฅผ ๊ณต์œ  ํ–ˆ์„ ๋•Œ ํ‘œ์‹œ๋˜๋Š” ๋Œ€ํ‘œ์ด๋ฏธ์ง€๋ฅผ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ๋ฉ”๋‰ด ๋Œ€ํ‘œ์ด๋ฏธ์ง€๋ฅผ ์„ค์ •ํ•ด ๋ณด์„ธ์š”! ์ผ์‹œ์ ์œผ๋กœ ์ƒ์„ฑํ•œ ์ด๋ฒคํŠธ ๋ฉ”๋‰ด์˜ ํ™๋ณด์šฉ ์„ฌ๋„ค์ผ์„ ์„ค์ •ํ•  ์ˆ˜๋„ ์žˆ์–ด์š”๐Ÿ˜Ž

Tip. ์›น์‚ฌ์ดํŠธ ๋Œ€ํ‘œ ์ด๋ฏธ์ง€๋Š” [ํ™˜๊ฒฝ์„ค์ • > ๊ธฐ๋ณธ์„ค์ •]์—์„œ ์„ค์ • ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.




์ปจ์…‰์— ๋งž๋Š” ๊ฐค๋Ÿฌ๋ฆฌ ์Šคํƒ€์ผ์„ ์ฐพ์•„๋ณด์„ธ์š”๐Ÿ”Ž

*๋””์ž์ธ๋ชจ๋“œ > ๊ฐค๋Ÿฌ๋ฆฌ ์œ„์ ฏ ์˜ค๋ฅธ์ชฝ ๋ฒ„ํŠผ ํด๋ฆญ > ๊ฐค๋Ÿฌ๋ฆฌ ์„ค์ • > ๋””์ž์ธ ํƒญ > ๋‹ค๋ฅธ ๋””์ž์ธ


๊ฐค๋Ÿฌ๋ฆฌ ์œ„์ ฏ์€ ์—ฌ๋Ÿฌ ์ด๋ฏธ์ง€๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์„ ๋•Œ ํ™œ์šฉํ•˜๊ธฐ ์ข‹์€ ์œ„์ ฏ์ด์ฃ . ์ปจ์…‰์— ๋งž๋Š” ๊ฐค๋Ÿฌ๋ฆฌ ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜์—ฌ ์›น์‚ฌ์ดํŠธ๋ฅผ ๊พธ๋ฉฐ๋ณด์„ธ์š”.

โœ… ๊ฐ„๊ฒฐํ•œ ๋А๋‚Œ์—๋Š” ๊ทธ๋ฆฌ๋“œ ๊ฐค๋Ÿฌ๋ฆฌ ์Šคํƒ€์ผ์„ ์ ์šฉํ•ด ๋ณด์„ธ์š”. ์ง€์ •ํ•œ ๋น„์œจ์— ๋งž์ถฐ ์ด๋ฏธ์ง€๋“ค์ด ๋ฐ”๋‘‘ํŒ์ฒ˜๋Ÿผ ์ผ์ •ํ•œ ๋ชจ์–‘์œผ๋กœ ์™„์„ฑ๋ฉ๋‹ˆ๋‹ค.

โœ… Masonry ๊ฐค๋Ÿฌ๋ฆฌ ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜๋ฉด ์ด๋ฏธ์ง€ ์›๋ณธ ๋น„์œจ์— ๋งž์ถฐ ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค.

โœ… ์—ฌ๋Ÿฌ ์žฅ์˜ ์ด๋ฏธ์ง€๋ฅผ ์Šฌ๋ผ์ด๋“œ ํ˜•์‹์œผ๋กœ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์„ ๋•, ์Šฌ๋ผ์ด๋“œ ๊ฐค๋Ÿฌ๋ฆฌ ์Šคํƒ€์ผ์„ ํ™œ์šฉํ•ด ๋ณด์„ธ์š”.




์•„์ž„์›น ๋””์ž์ธ๋ชจ๋“œ ๊ณณ๊ณณ์—๋Š” ์œ ์šฉํ•œ ๊ธฐ๋Šฅ๋“ค์ด ์•„์ฃผ ๋งŽ์€๋ฐ์š”! ์ด ๊ธฐ๋Šฅ๋“ค์„ ํ™œ์šฉํ•ด๋ณด์‹ ๋‹ค๋ฉด ์›น์‚ฌ์ดํŠธ ๋ถ„์œ„๊ธฐ๋„ ํ•œ์ธต ๋” ์ •๋ˆ๋˜๊ณ  ํŽธ๋ฆฌํ•ด์งˆ ๊ฑฐ์˜ˆ์š”. ์ด๋ฒˆ ๋‰ด์Šค๋ ˆํ„ฐ์—์„œ ์†Œ๊ฐœํ•ด๋“œ๋ฆฐ ๊ธฐ๋Šฅ๋“ค๋„ ํ•œ ๋ฒˆ์”ฉ ๊ผญ ์‚ฌ์šฉํ•ด๋ณด์„ธ์š”๐Ÿ‘€


by ๋งˆ์ผ€ํŒ… ์œ ์ง„