๋„ทํ”Œ๋ฆญ์Šค ์„ฑ๋Šฅ ์ผ€์ด์Šค์Šคํ„ฐ๋””

๋„ทํ”Œ๋ฆญ์Šค ์„ฑ๋Šฅ ์ผ€์ด์Šค์Šคํ„ฐ๋””

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

Pinterest ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น ์•ฑ ์„ฑ๋Šฅ ์ผ€์ด์Šค ์Šคํ„ฐ๋””

Pinterest ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น ์•ฑ ์„ฑ๋Šฅ ์ผ€์ด์Šค ์Šคํ„ฐ๋””

Pinterest๊ฐ€ ๋ชจ๋ฐ”์ผ ํ•˜๋“œ์›จ์–ด์—์„œ๋„ ๋น ๋ฅด๊ฒŒ ๋กœ๋“œ๋  ์ˆ˜ ์žˆ๋„๋ก ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ฐ€๋ณ๊ฒŒ ํ•˜๊ณ , ๋„คํŠธ์›Œํฌ ํƒ„๋ ฅ์„ฑ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋„๋ก ์„œ๋น„์Šค ์›Œ์ปค(Service Worker)๋ฅผ ๋„์ž…ํ•œ ๊ฒƒ์— ๋Œ€ํ•ด ๋‹ค๋ฃฌ๋‹ค.

Tinder์˜ ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น ์•ฑ ์„ฑ๋Šฅ ์ผ€์ด์Šค ์Šคํ„ฐ๋””

Tinder์˜ ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น ์•ฑ ์„ฑ๋Šฅ ์ผ€์ด์Šค ์Šคํ„ฐ๋””

Tinder๋Š” ์ตœ๊ทผ ์›น ์•ฑ์„ ์ถœ์‹œํ–ˆ๋‹ค. (swiped right: ์•„์ดํฐ์˜ ๋ฐ€์–ด์„œ ์ž ๊ธˆ ํ•ด์ œ์™€, Tinder ์•ฑ์—์„œ ์šฐ์ธก์œผ๋กœ ๋ฐ€์–ด ๋งˆ์Œ์— ๋“œ๋Š” ์ƒ๋Œ€๋ฅผ ํ™•์ธํ•˜๋Š” ๊ฒƒ์„ ์—ฐ์ƒ์‹œํ‚ค๋Š” ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์˜๋„๋ฅผ ํฌํ•จํ–ˆ๋‹ค). Tinder Online์€ ์ƒˆ๋กœ์šด ๋ฐ˜์‘ํ˜• ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น ์•ฑ(Progressive Web App)์œผ๋กœ, ๋ฐ์Šคํฌํƒ‘๊ณผ ๋ชจ๋ฐ”์ผ์˜ ๋ชจ๋“  ์‚ฌ์šฉ์ž๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์„ฑ๋Šฅ ์ตœ์ ํ™”, ๋„คํŠธ์›Œํฌ ํšŒ๋ณต์„ฑ์„ ์œ„ํ•œ ์„œ๋น„์Šค ์›Œ์ปค(Service Worker) ๊ทธ๋ฆฌ๊ณ  ์ฑ„ํŒ… ์ฐธ์—ฌ๋ฅผ ๋„์šธ ํ‘ธ์‹œ ์•Œ๋ฆผ(Push Notifications)์ด ์ฃผ๋Š” ์ด์ ์„ ๋ˆ„๋ฆฌ๊ฒŒ ๋˜์—ˆ๋‹ค. ์˜ค๋Š˜์€ Tinder๊ฐ€ ์›น ์„ฑ๋Šฅ์— ๋Œ€ํ•ด ๋ฐฐ์šด ๊ฒƒ๋“ค ์•Œ์•„๋ณด์ž.

๋Ÿฌ์ŠคํŠธ (๊ทธ๋ฆฌ๊ณ  ๋ชจ๋“  ์–ธ์–ด)์—์„œ ์›น์–ด์…ˆ๋ธ”๋ฆฌ๋ฅผ ๋” ์ข‹๊ฒŒ๋งŒ๋“ค๊ธฐ

๋Ÿฌ์ŠคํŠธ (๊ทธ๋ฆฌ๊ณ  ๋ชจ๋“  ์–ธ์–ด)์—์„œ ์›น์–ด์…ˆ๋ธ”๋ฆฌ๋ฅผ ๋” ์ข‹๊ฒŒ๋งŒ๋“ค๊ธฐ

2018๋…„ ์›น ์–ธ์–ด๋ฅผ ๋ชฉํ‘œ๋กœํ•˜๋Š” ๋Ÿฌ์ŠคํŠธ ์ปค๋ฎค๋‹ˆํ‹ฐ๋Š” ์ด๋ฅผ ์œ„ํ•ด ๋‹ค์–‘ํ•œ ๋…ธ๋ ฅ์„ ํ•˜๊ณ ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋ฅผ ์‹คํ˜„์‹œํ‚ค๊ธฐ ์œ„ํ•ด ๋Ÿฌ์ŠคํŠธ๋กœ ์ž‘์„ฑํ•œ ์›น ์–ด์…ˆ๋ธ”๋ฆฌ ๋„๊ตฌ๋“ค์„ ๋งŒ๋“ค๊ณ  ์žˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ์˜ค๋ธŒ์ ํŠธ๋ฅผ ์ฃผ๊ณ  ๋ฐ›๊ณ , npm ๋ชจ๋“ˆ๋กœ ํŒจํ‚ค์ง• ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ES ๋ชจ๋“ˆ๊ณผ์˜ ํ˜ธํ™˜๊นŒ์ง€. wasm-bindgen, wasm-pack ์ด ์–ด๋–ค ์›๋ฆฌ๋กœ ๋ฌด์Šจ ์ผ์„ ํ•ด์ฃผ๊ณ  ์žˆ๋Š”์ง€ ์•Œ์•„๋ณธ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋Ÿฌํ•œ ๋…ธ๋ ฅ๋“ค์€ ๋Ÿฌ์ŠคํŠธ ์ด์™ธ์˜ ์–ธ์–ด๊นŒ์ง€ ์ง€์›ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ€๋Šฅ์„ฑ์„ ๋„“ํ˜€์ฃผ๊ณ  ์žˆ๋‹ค.

ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น์•ฑ ์„ฑ๋Šฅ์— ๋Œ€ํ•œ ๋ฆฌ์—‘ํŠธ, ํ”„๋ฆฌ์—‘ํŠธ ์ผ€์ด์Šค ์Šคํ„ฐ๋”” : Treebo

ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น์•ฑ ์„ฑ๋Šฅ์— ๋Œ€ํ•œ ๋ฆฌ์—‘ํŠธ, ํ”„๋ฆฌ์—‘ํŠธ ์ผ€์ด์Šค ์Šคํ„ฐ๋”” : Treebo

ํ”„๋ก ํŠธ์—”๋“œ ๋ฆฌ์—‘ํŠธ ์„ฑ๋Šฅ ์ผ€์ด์Šค ์Šคํ„ฐ๋””. Treebo๋Š” ์žฅ๊ณ ๋กœ ๋งŒ๋“ค์–ด์ ธ ์žˆ๋˜ ๊ธฐ์กด ๋ชจ๋ฐ”์ผ ์‚ฌ์ดํŠธ์˜ ์„ฑ๋Šฅ์„ ๊ฐœ์„ ํ•˜๋ฉฐ ์–ป์€ ๊ฒฝํ—˜์„ ์ผ€์ด์Šค ์Šคํ„ฐ๋””๋กœ ๊ณต์œ ํ•œ๋‹ค. ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น ์•ฑ์˜ ์„ฑ๋Šฅ ๊ฐ์‚ฌ ํฌ์ธํŠธ๋กœ First Meaningful Paint, First Interactive, Consistenly Interactive ๋“ฑ์„ ๊ธฐ์ค€์œผ๋กœ, ์„œ๋ฒ„์‚ฌ์ด๋“œ ๋ Œ๋”๋ง, ์ฝ”๋“œ ๋ถ„ํ• , HTML ์ŠคํŠธ๋ฆฌ๋ฐ, ์Šคํƒ€์ผ ์ธ๋ผ์ด๋‹ ๋“ฑ์˜ ์ ์šฉ์ด ์–ด๋–ป๊ฒŒ ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š”์ง€ ์•Œ์•„๋ณธ๋‹ค.