About AB180
home
๐ŸŽค

Inside AB180 : ์—์–ด๋ธŒ๋ฆฟ์ง€ ํ”„๋ก ํŠธ์—”๋“œ๋Š” ์ด๋ ‡๊ฒŒ ์ผํ•œ๋‹ค

Created
2020/10/29 01:48
Tags
Inside AB180 ์ธํ„ฐ๋ทฐ์˜ ๋„ค ๋ฒˆ์งธ ์ฃผ์ธ๊ณต์€ '์—์–ด๋ธŒ๋ฆฟ์ง€ ํ”„๋ก ํŠธ์—”๋“œ ํŒ€' ์ž…๋‹ˆ๋‹ค.
์—์–ด๋ธŒ๋ฆฟ์ง€๋Š” ํ•˜๋ฃจ ๊ธฐ์ค€ 300๋งŒ ๋Œ€์˜ ๋ชจ๋ฐ”์ผ ๋””๋ฐ”์ด์Šค์™€ ์•ฝ 3,000๋งŒ ๊ฐœ์˜ ์ฟ ํ‚ค ๋ฐ์ดํ„ฐ๋ฅผ ๋ถ„์„ํ•˜๊ณ  ์žˆ๋Š” ๊ธฐ์—ฌ๋„๋ถ„์„ ์„œ๋น„์Šค(๊ธฐ์—ฌ๋„๋ถ„์„ ์„œ๋น„์Šค๊ฐ€ ๊ถ๊ธˆํ•˜์‹œ๋‹ค๋ฉด ยป ๋ชจ๋ฐ”์ผ์•ฑ ๋งˆ์ผ€ํŒ…์— ์–ดํŠธ๋ฆฌ๋ทฐ์…˜ ํˆด์„ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ์ด์œ ) ์ž…๋‹ˆ๋‹ค. ์ด 20๋ช…์ด ๋„˜๋Š” ๊ฐœ๋ฐœํŒ€์ด ํ•จ๊ป˜ ์ผํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ํ”„๋ก ํŠธ์—”๋“œํŒ€์€ ์—์–ด๋ธŒ๋ฆฟ์ง€์˜ ๋Œ€์‹œ๋ณด๋“œ, ๋žœ๋”ฉํŽ˜์ด์ง€, ์ด์šฉ๊ฐ€์ด๋“œ ๋“ฑ์„ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๋Œ€์‹œ๋ณด๋“œ๋Š” ์ผ๋ฐ˜์ ์ธ B2C ์„œ๋น„์Šค์— ๋น„ํ•ด์„œ ๋‹ค๋ฃจ๋Š” ์ •๋ณด๋Ÿ‰๊ณผ ๊ทธ ์•ˆ์— ๋“ค์–ด๊ฐ€์•ผํ•  ์ธํ„ฐ๋ ‰์…˜์˜ ์ข…๋ฅ˜๊ฐ€ ๋ฌด๊ถ๋ฌด์ง„ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ธฐ์— ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ์„œ๋Š” ๋„์ „ํ•ด์•ผ ํ•  ๊ณผ์ œ์˜ ๋‚œ์ด๋„๊ฐ€ ๋†’๊ณ , ํ•˜๋“œํŠธ๋ ˆ์ด๋‹์„ ํ†ตํ•ด์„œ ๊ฐœ์ธ์˜ ์„ฑ์žฅ ๋˜ํ•œ ๊ฐ€์ ธ๊ฐˆ ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์ด์ฃ .
๋ณธ ๊ธ€์—์„œ๋Š” ์—์–ด๋ธŒ๋ฆฟ์ง€์˜ ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์ด ์–ด๋–ป๊ฒŒ ์ผํ•˜๊ณ  ์žˆ๋Š”์ง€ ๊ธฐ์ˆ ์Šคํƒ, ํ…Œ์ŠคํŒ…, ๋กœ๊ทธ ์ˆ˜์ง‘ ๋ฐ ๋ชจ๋‹ˆํ„ฐ๋ง, CI/CD, ํ˜‘์—…, ์ฝ”๋“œ๋ฆฌ๋ทฐ ๋ฐ ํšŒ๊ณ , B2B ๋Œ€์‹œ๋ณด๋“œ ๊ฐœ๋ฐœ ํŠน์ด์„ฑ โ€“ 7๊ฐ€์ง€ ๋ถ„์•ผ๋กœ ๋‚˜๋ˆ„์–ด ์•„์ฃผ ์ƒ์„ธํžˆ ์†Œ๊ฐœํ•ด๋“œ๋ฆด ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. ๋“ค๋ ค๋“œ๋ฆฌ๊ณ  ์‹ถ์€ ์ด์•ผ๊ธฐ๊ฐ€ ์•„~~์ฃผ ๋งŽ์œผ๋‹ˆ, ํ˜„์žฌ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์ด์‹œ๊ฑฐ๋‚˜ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์— ๊ด€์‹ฌ์ด ์žˆ์œผ์‹œ๋‹ค๋ฉด ์•„์ฃผ ํฅ๋ฏธ๋กญ๊ฒŒ ์‚ดํŽด๋ณผ ์ˆ˜ ์žˆ์œผ์‹ค๊ฑฐ์—์š”
ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์€ ํ•จ๊ป˜ ์ผํ•  ๋™๋ฃŒ๋ฅผ ๊ณต๊ฐœ์ ์œผ๋กœ ์ฐพ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœํŒ€ ์ง€์›ํ•˜๋Ÿฌ ๊ฐ€๊ธฐ โ–ธ

1. ๊ธฐ์ˆ ์Šคํƒ

์—์–ด๋ธŒ๋ฆฟ์ง€๋Š” ๋งŽ์€ ๋ชจ๋˜ Web Application๋“ค๊ณผ ๊ฐ™์ด JavaScript(ESNext)๋ฅผ ์–ธ์–ด๋กœ ์‚ฌ์šฉํ•˜๋ฉฐ, UI ๊ตฌ์„ฑ์„ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ React๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
Vue.js ๋“ฑ ๋งŽ์€ ์ตœ์‹  ๊ธฐ์ˆ ๋“ค์ด ์žˆ์Œ์—๋„ React๋ฅผ ์„ ํƒํ•œ ์ด์œ ๋Š”, ํฌ๊ฒŒ ์ƒํƒœ๊ณ„์ ์ธ ์ธก๋ฉด๊ณผ ์—์–ด๋ธŒ๋ฆฟ์ง€์˜ ๊ธฐ์ˆ ์  ์š”๊ตฌ์‚ฌํ•ญ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.
๊ฐœ๋ฐœ ์ƒํƒœ๊ณ„์˜ ๊ฒฝ์šฐ, ๊ธฐ์ˆ ์„ ํ™œ์šฉํ•˜๋Š” ๊ฒƒ์— ์žˆ์–ด์„œ (1) ์–ผ๋งˆ๋‚˜ ๋งŽ์€ ๊ฐœ๋ฐœ์ž๋“ค์ด Activeํ•˜๊ฒŒ ๋…ผ์˜ํ•˜๋Š”์ง€, (2) ์–ผ๋งˆ๋‚˜ ๋งŽ์€ ์˜คํ”ˆ์†Œ์Šค ํ”„๋กœ์ ํŠธ ๋“ค์ด๋‚˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์ด ์ œ๊ณต๋˜๊ณ  ์žˆ๋Š”์ง€์˜ 2๊ฐ€์ง€ ์š”์†Œ๋กœ ์ด๋ค„์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ทน๋Œ€ํ™”ํ•˜๊ธฐ ์œ„ํ•ด React ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ์ƒˆ๋กœ์šด ๋ฐฉ๋ฒ•๋ก ๋“ค์„ ์ œ์‹œํ•˜๋Š” ๊ฒƒ์ด ์ข‹์•˜์Šต๋‹ˆ๋‹ค.
๊ธฐ์ˆ ์  ์š”๊ตฌ์‚ฌํ•ญ์˜ ๊ฒฝ์šฐ, ์—์–ด๋ธŒ๋ฆฟ์ง€๋Š” ์• ๋„๋ฆฌํ‹ฑ์Šค ๋Œ€์‹œ๋ณด๋“œ์˜ ํŠน์„ฑ์ƒ ๋ฐ์ดํ„ฐ์˜ ์–‘์ด ๋งŽ๊ณ , ํ™”๋ฉด์ด ๋งŽ์ด ๋ณ€ํ™”ํ•ฉ๋‹ˆ๋‹ค. ์•ฝ 3๋…„ ์ „ Meteor๋ฅผ ํ†ตํ•ด MVP๋ฅผ ๊ฐœ๋ฐœํ•œ ํ›„, AngularJS ๋“ฑ์„ ๋Œ€์•ˆ์œผ๋กœ ๊ฒ€ํ† ํ•œ ๋ฐ”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ AngularJS์˜ 2-way binding์˜ ๊ฒฝ์šฐ (๊ทธ๋ฆฌ๊ณ  Meteor์˜ ๊ฒฝ์šฐ ์‹ฌ์ง€์–ด DB๊นŒ์ง€ ํด๋ผ์ด์–ธํŠธ์™€ ๋™๊ธฐํ™”) ๋น ๋ฅด๊ฒŒ Web App์„ ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒƒ์—๋Š” ์ ๋‹นํ•˜์ง€๋งŒ, ๋งŽ์€ ๋ฐ์ดํ„ฐ๊ฐ€ ๋“ค์–ด์˜ฌ ๊ฒฝ์šฐ ์„ฑ๋Šฅ์˜ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ๊ฒƒ์„ ์—ฌ๋Ÿฌ ์ฐจ๋ก€ ๊ฒฝํ—˜ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.๋‹จ๋ฐฉํ–ฅ ํ๋ฆ„์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ œ์–ดํ•˜๊ณ , ๋งŽ์€ ๋ฐ์ดํ„ฐ๋ฅผ ๋น ๋ฅด๊ฒŒ DOM์— ๋งคํ•‘, ์—…๋ฐ์ดํŠธํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ธก๋ฉด์—์„œ React๋ฅผ ์„ ํƒํ•˜์˜€์Šต๋‹ˆ๋‹ค.
Stackoverflow์˜ 2019๋…„ Survey์— ๋”ฐ๋ฅด๋ฉด React๋Š” Professional Developers ์‚ฌ์ด์—์„œ AngularJS์— ์ด์–ด์„œ ๊ทผ์†Œํ•œ 3์œ„๋ฅผ ์ฐจ์ง€ํ•˜๊ณ  ์žˆ๊ธฐ์— ๋ฏฟ์„ ๋งŒํ•œ ์ƒํƒœ๊ณ„๋ฅผ ๊ตฌ์ถ•ํ•ด๋‚˜๊ฐ€๊ณ  ์žˆ๋‹ค๊ณ  ๋ด์•ผ๊ฒ ์ง€์š”.
๋˜ํ•œ ์—์–ด๋ธŒ๋ฆฟ์ง€์—์„œ๋Š” React ์ƒํƒœ๊ณ„์™€ ์—ฐ๊ฒฐ๋œ ์—ฌ๋Ÿฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‚˜ ๊ธฐ์ˆ ๋“ค์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. Redux๊ฐ€ ์ „์—ญ ์ƒํƒœ ๊ด€๋ฆฌ ์ €์žฅ์†Œ๋กœ ๊ธฐ๋Šฅํ•˜๊ณ , ์ค‘๊ฐ„์—์„œ ๋ฏธ๋“ค์›จ์–ด๋กœ Redux-Saga๋ฅผ ์จ์„œ API ํ†ต์‹  ๋“ฑ ๋ฐ์ดํ„ฐ ํ๋ฆ„์„ ์ œ์–ดํ•˜๋Š” ์—ญํ• ์„ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๋˜ํ•œ ํ˜‘์—…๊ณผ ์•ˆ์ •์„ฑ ํ–ฅ์ƒ ๊ด€์ ์—์„œ Immer์™€ TypeScript๋ฅผ ๋„์ž…ํ•˜๊ธฐ ์œ„ํ•œ ์ค€๋น„๋ฅผ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

2. ํ…Œ์ŠคํŒ…

๋ณดํ†ต ํ…Œ์ŠคํŒ…๊ณผ ๊ด€๋ จ๋œ ๋‚ด์šฉ์ด ๋‚˜์˜ค๋ฉด, TDD๋‚˜ BDD ๋“ฑ ์—ฌ๋Ÿฌ ๋ฐฉ๋ฒ•๋ก ์ด ๋‚˜์˜ต๋‹ˆ๋‹ค. ์—์–ด๋ธŒ๋ฆฟ์ง€์˜ ๊ธฐ๋Šฅ์ด ๋งŽ์•„์งˆ ์ˆ˜๋ก, ์—์–ด๋ธŒ๋ฆฟ์ง€์—์„œ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐ์ดํ„ฐ์˜ ์–‘์ด ๋งŽ์•„์งˆ ์ˆ˜๋ก ํ…Œ์ŠคํŠธ์˜ ์ค‘์š”๋„ ์—ญ์‹œ ๋†’์•„์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
๋‹ค๋งŒ, ํ˜„์žฌ๋Š” ๋น ๋ฅธ ์ œํ’ˆ ๊ฐœ๋ฐœ์„ ํ†ตํ•ด PMF(Product-Market Fit)๋ฅผ ๋งž์ถ”๋Š” ๊ฒƒ์ด ๋”์šฑ ์ค‘์š”ํ•˜๋‹ค๊ณ  ํŒ๋‹จํ•˜์—ฌ, ์ผ๋ถ€ Test-drivenํ•œ ๊ฐœ๋ฐœ์„ ํฌ์ƒํ•˜๊ณ  ๊ฐœ๋ฐœ ์†๋„์— ๋ฌด๊ฒŒ๋ฅผ ์‹ฃ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
์—์–ด๋ธŒ๋ฆฟ์ง€๋Š” Cypress๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ, ์‚ฌ์šฉ์ž๊ฐ€ ์‹ค์ œ๋กœ ํด๋ฆญํ•˜๊ณ  ํ–‰๋™ํ•˜๋Š” ๊ฒƒ์„ mockingํ•˜๋Š” Smoke test๋ฅผ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค. Cypress๋Š” ํŠน์ • branch์—์„œ master๋ฅผ ํ–ฅํ•œ ํ’€๋ฆฌํ€˜์ŠคํŠธ(PR)๊ฐ€ ์—ด๋ฆฌ๊ณ , ๋‚ด๊ฐ€ ํ•ด๋‹น branch๊ฐ€ ์žˆ๋Š” Remote Repository๋ฅผ ํ–ฅํ•˜์—ฌ ์ƒˆ๋กœ์šด commit์„ pushํ•  ๋•Œ๋งˆ๋‹ค ์ž๋™์œผ๋กœ CI workflow ๋‚ด์—์„œ ๋Œ์•„๊ฐ€๊ฒŒ ์„ค๊ณ„๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋Š” ์ƒˆ๋กœ ๊ฐœ๋ฐœํ•˜๊ฑฐ๋‚˜ ์ˆ˜์ •ํ•˜๋Š” ๊ธฐ๋Šฅ์—์„œ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š” ๊ฒƒ์ด Happy path์ธ์ง€๋ฅผ ์ž‘์—… ์‹œ์ž‘ ์ „์— ๋ฏธ๋ฆฌ ์ •์˜ํ•˜๋ฉฐ, ๊ธฐ๋Šฅ์  ์žฅ์• ๊ฐ€ ๋ฐœ์ƒํ•œ ์‚ฌํ•ญ์— ๋Œ€ํ•ด์„œ๋„ ๊ด€๋ จ ๋™์ž‘์„ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์Œ“์ธ ์‹œ๋‚˜๋ฆฌ์˜ค๋“ค์€ ํŠน์ • ๊ธฐ๋Šฅ์˜ ์ฆ๊ฐ€๋ถ„์ด ๋ถ™๋Š” ๊ฒƒ๊ณผ ์ƒ๊ด€์—†์ด ์‚ฌ์šฉ์ž์˜ ์‚ฌ์šฉ ์‹œ๋‚˜๋ฆฌ์˜ค๋ฅผ ๋ณด์žฅํ•˜๊ณ , ๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ๋‹ค์‹œ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋„๋ก ๋ง‰๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.
๋˜ํ•œ ์ปดํฌ๋„ŒํŠธ ๋ณ„๋กœ ๊ธฐ์ดˆ์ ์ธ Unit Test๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Unit Test๋ฅผ ์ž‘์„ฑํ•˜๋Š” ์ด์œ ๋Š” ์„œ๋น„์Šค์˜ ์•ˆ์ •์„ฑ ํ–ฅ์ƒ ์ธก๋ฉด๋„ ์žˆ์ง€๋งŒ, ์˜์™ธ๋กœ ๊ฐœ๋ฐœ์ž๊ฐ„์˜ ์ƒํ˜ธ ํ˜‘๋ ฅ์„ ์œ„ํ•ด์„œ๋„ ํ•„์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. A๊ฐ€ ๋งŒ๋“  ์ปดํฌ๋„ŒํŠธ๋ฅผ B๊ฐ€ ์‚ฌ์šฉํ•  ๋•Œ, ์ด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฌด์—‡์ด๋ฉฐ, ์–ด๋–ค ๊ฐ’์„ ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ๋„ฃ์–ด์•ผ ์˜๋„ํ•œ๋Œ€๋กœ ๋‚˜์˜ค๋Š”์ง€ ์•„๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

3. ๋กœ๊ทธ ์ˆ˜์ง‘ ๋ฐ ๋ชจ๋‹ˆํ„ฐ๋ง

์—์–ด๋ธŒ๋ฆฟ์ง€๋Š” ์žฅ์•  ๋ฐœ์ƒ์‹œ ์ •ํ™•ํ•˜๊ณ  ๋น ๋ฅด๊ฒŒ ์—๋Ÿฌ๋ฅผ ํ™•์ธํ•ด ๋Œ€์‘ํ•˜๊ณ , UI / UX ๋””์ž์ด๋„ˆ๋ถ„๋“ค๊ณผ ์ œํ’ˆ์„ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์–‘ํ•œ ๋กœ๊ทธ๋ฅผ ์ˆ˜์ง‘ํ•ฉ๋‹ˆ๋‹ค.
์—๋Ÿฌ ์ˆ˜์ง‘์˜ ๊ฒฝ์šฐ logger ํˆด๋กœ Sentry๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ์‚ฌ์šฉ์ž ํ–‰๋™ ์ˆ˜์ง‘์šฉ์œผ๋กœ๋Š” LogRocket์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์—์„œ ๋กœ๊ทธ๋ฅผ ์ˆ˜์ง‘ํ•  ๋•Œ, ์ค‘์š”ํ•˜๊ฒŒ ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ์€ ๊ฐœ์ธ์ •๋ณด๋ณดํ˜ธ์™€ ๋กœ๊ทธ ์ฒด๊ณ„ํ™”๋ฅผ ํ†ตํ•œ ์•ก์…˜์•„์ดํ…œ ์ˆ˜๋ฆฝ์ž…๋‹ˆ๋‹ค. ์šฐ์„ , ๊ฐœ์ธ ๋ฐ ๊ธฐ์—…์˜ ์ค‘์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๋Š” ์• ๋„๋ฆฌํ‹ฑ์Šค ๋Œ€์‹œ๋ณด๋“œ์—์„œ GDPR ๋“ฑ์˜ ๊ทœ์ œ๋ฅผ ์–ด๊ธฐ์ง€ ์•Š๋„๋ก, ๊ฐœ์ธ์ •๋ณด๋ฅผ ๋ฐฐ์ œํ•˜๊ณ  ์ˆœ์ˆ˜ํ•˜๊ฒŒ ์‚ฌ์šฉ์ž ํ–‰๋™๋งŒ์„ ๋ถ„์„ํ•  ์ˆ˜ ์žˆ๋„๋ก ์–ด๋–ค ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์ง‘ํ•  ๊ฒƒ์ธ์ง€ ํ•ญ์ƒ ๊ณ ๋ คํ•ฉ๋‹ˆ๋‹ค.
๋˜ํ•œ, ์ˆ˜์ง‘๋œ ๋กœ๊ทธ๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ์‚ฌ์šฉ์„ฑ์ด ๋–จ์–ด์ง€๊ฑฐ๋‚˜ ์žฅ์• ๋กœ ์ธํ•ด ๋ถˆํŽธํ•จ์„ ๊ฒช๋Š” ์‚ฌํ•ญ์„ ์ ๊ฒ€ํ•˜๊ณ , ์ด๋ฅผ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•œ ๋‹จ๊ธฐ / ์žฅ๊ธฐ์  ์•ก์…˜์•„์ดํ…œ์„ ๊ฐœ๋ฐœ ํŒ€๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ œํ’ˆ ๊ฐœ๋ฐœ ์ž์ฒด์— ๋…น์—ฌ๋‚ผ ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š”๋ฐ ๋งŽ์€ ๊ณ ๋ฏผ์„ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

4. CI/CD

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

5. ๊ธฐํš ๋ฐ ๋””์ž์ธ๊ณผ์˜ ํ˜‘์—…

๊ธฐ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์˜ ์ž‘์—… ๊ณต์ˆ˜ ํšจ์œจํ™”๋ฅผ ์œ„ํ•ด ๋ณด๋‹ค ํšจ๊ณผ์ ์ธ ๊ฐœ๋ฐœ ์›Œํฌํ”Œ๋กœ์šฐ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์—์ด๋น„์ผํŒ”๊ณต ํ”„๋ก ํŠธ์—”๋“œ ํŒ€ ๋˜ํ•œ ๊ฐœ๋ฐœ ์ •ํ™•๋„์™€ ํšจ์œจํ™”๋ฅผ ์œ„ํ•ด ๋งŽ์€ ๋ฌธ์ œ๋“ค์„ ๋งˆ์ฃผํ•ด์™”์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ˆ˜ ์ฐจ๋ก€ ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ๊ฒช์œผ๋ฉฐ ์•„๋ž˜์™€ ๊ฐ™์ด ํ•ด๊ฒฐํ•ด์™”์ง€์š”!
<๊ฐœ๋ฐœ ์ •ํ™•๋„์™€ ํšจ์œจํ™”๋ฅผ ์œ„ํ•ด ๋‹น๋ฉดํ–ˆ๋˜ ๋Œ€ํ‘œ์ ์ธ ๋ฌธ์ œ๋“ค๊ณผ ํ•ด๊ฒฐ์•ˆ>
1.
๊ณตํ†ต๋œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฐ˜๋ณต๋˜์–ด ๋ฐœ์ƒํ•˜๋Š” ์ž‘์—… ๋น„ํšจ์œจ โ‡’ ๊ธฐํš, ๋””์ž์ธ, ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์ด ์ž‘์—…์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ„๋ฅ˜, ์žฌ ๋ผ๋ฒจ๋งํ•˜์—ฌ ๊ฐœ๋ฐœ ์‹œ ๋‹ค์‹œ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ ๋ฆฌ์ŠคํŠธ๋ฅผ ์ •๋ฆฌํ•˜๊ณ  ๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ๋ช…์œผ๋กœ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ํ•  ์ˆ˜ ์žˆ๋Š” ํ˜‘์—… ํ™˜๊ฒฝ ๊ตฌ์ถ•
2.
์ƒˆ๋กœ์šด ์Šคํƒ€์ผ์˜ ๋ฌด๋ถ„๋ณ„ํ•œ ๋ฐœ์ƒ์œผ๋กœ ์ธํ•œ ์˜ˆ์™ธ ์ฒ˜๋ฆฌ โ‡’ ์•ž์„œ ์ •๋ฆฌ๋œ ์ปดํฌ๋„ŒํŠธ ๋ฆฌ์ŠคํŠธ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ธฐํš ํ”„๋กœ์„ธ์Šค ์ง„ํ–‰, ์˜ˆ์™ธ ๊ฑด ๋ฐœ์ƒ ์‹œ ๋ชจ๋“  ํ˜‘์—…์ž ๊ฐ„ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์œผ๋กœ ์ปดํฌ๋„ŒํŠธ ๋ฆฌ์ŠคํŠธ ์žฌ์ •๋ฆฌ
3.
๊ฐœ๋ฐœ ์ •ํ™•๋„๋ฅผ ์œ„ํ•œ ํ˜‘์—…์ž์™€์˜ ๋Œ€ํ™” ์‹œ๊ฐ„ ์†Œ์š” ๋‹ค๋Œ€ โ‡’ ๊ฐ ํŒ€์˜ ์ž‘์—… ๊ณผ์ •๊ณผ ํˆด ์‚ฌ์šฉ ์‹œ๋‚˜๋ฆฌ์˜ค ๋“ฑ์„ ๊ณต์œ ํ•˜์—ฌ, ํ˜‘์—… ๋‹จ๊ณ„์—์„œ ์ด์ „ ํŒ€์˜ ์ž‘์—…์ด ์œ ์—ฐํ•˜๊ฒŒ ์—ฐ๊ณ„๋  ์ˆ˜ ์žˆ๋„๋ก ํ•จ (๋””์ž์ด๋„ˆ ํŒ€์€ Git์„ ๋ฐฐ์šฐ๊ณ , ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์€ ๋””์ž์ธ ์Šคํƒ€์ผ ์š”์†Œ์— ๋Œ€ํ•ด ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ์‹œ๊ฐ„์„ ๋งˆ๋ จํ•ด์™”์Šต๋‹ˆ๋‹ค)
๊ฐœ๋ฐœ ์ •ํ™•๋„์™€ ํšจ์œจํ™”๋ฅผ ์œ„ํ•ด ๋‘ ํŒ” ๊ฑท์–ด ๋ถ™์ด๊ณ  ํ˜‘๋ ฅํ•˜๋Š” ๊ธฐํš ๋ฐ ๋””์ž์ธ ํŒ€์ด ์—์ด๋น„์ผํŒ”๊ณต์— ์žˆ์Šต๋‹ˆ๋‹ค. ๋•๋ถ„์— ๋ถˆํ•„์š”ํ•œ ๋ฆฌ์†Œ์Šค๋ฅผ ์ค„์ด๊ณ , ์™„์„ฑ๋„ ์žˆ๋Š” ๊ฒฐ๊ณผ๋ฌผ์„ ์œ„ํ•ด ์ง€์†์ ์œผ๋กœ ๋…ธ๋ ฅํ•ด์˜ฌ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

5. 1. Pre-Sketch & ํ‚ฅ์˜คํ”„ ๋ฏธํŒ…

์šฐ์„  ๊ธฐํš๊ณผ ๋””์ž์ธ ํŒ€์€ ํŠน์ • ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ๊ธฐํš์„œ๊ฐ€ ๋‚˜์˜ค๋ฉด, ์ฒ˜์Œ๋ถ€ํ„ฐ Pre-sketchํšŒ์˜๋ฅผ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค. Pre-Sketch ํšŒ์˜์—์„œ๋Š” ์ดˆ๊ธฐ ์ œํ’ˆ์— ๋Œ€ํ•œ Mock-up์„ ๊ฐ„๋‹จํžˆ ๊ทธ๋ฆฌ๊ณ , ๊ทธ Mock-up์— ๋Œ€ํ•ด์„œ ๋…ผ์˜ํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ง€๋Š”๋ฐ์š”. ์ด๋ฅผ ํ†ตํ•ด์„œ ๊ธฐํš ์˜๋„๋ฅผ UX/UI๊ฐ€ ์‹ฑํฌํ•˜๋Š” ๊ณผ์ •์„ ๊ฑฐ์น˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
ํ”„๋ก ํŠธ์—”๋“œํŒ€์€ ์ด ํšŒ์˜์— ์ฐธ์„ํ•ด์„œ ๊ธฐํš์ž์˜ ๊ธฐํš ์˜๋„์™€ GUI ๋””์ž์ด๋„ˆ์˜ Mock-up ๋ฐœ์ „ ๋ฐฉํ–ฅ์„ ํ•จ๊ป˜ ๋“ฃ๊ณ  ๋…ผ์˜์— ์ฐธ์„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ ์ด ๊ณผ์ •์—์„œ GUI ๋””์ž์ด๋„ˆ์˜ ์˜๋„ ์ž์ฒด๊ฐ€ ๋งŽ์€ ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์˜ ๋ฆฌ์†Œ์Šค๋ฅผ ์š”๊ตฌํ•˜๋Š” ์ผ์ด๋ผ๋ฉด, ๋ฏธ๋ฆฌ ๋‹ค๋ฅธ ๋Œ€์•ˆ์ด ์—†๋Š”์ง€ ํ•จ๊ป˜ ์ฒดํฌํ•ด๋ณด๋Š” ๊ฒƒ๋„ ๋ฆฌ์†Œ์Šค ์ ˆ๊ฐ์— ์žˆ์–ด ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.
๋˜ํ•œ Pre-Sketch ๋ฏธํŒ…์„ ํ†ตํ•ด์„œ ์–ด๋Š ์ •๋„ ๊ฒฐ๊ณผ๋ฌผ์ด ์ •ํ•ด์ง€๋ฉด, ์ด์— ๋Œ€ํ•œ ์ƒ์„ธ์„ค๊ณ„์„œ๊ฐ€ UX ๋””์ž์ด๋„ˆ์— ์˜ํ•˜์—ฌ ์ž‘์„ฑ๋ฉ๋‹ˆ๋‹ค. ํ‚ฅ์˜คํ”„ ๋ฏธํŒ…์— ์ƒ์„ธ์„ค๊ณ„์„œ๋ฅผ ๋ณด๋ฉด์„œ ์–ด๋–ค ํ™”๋ฉด์ด ์–ด๋–ป๊ฒŒ ๊ตฌ์„ฑ๋ ์ง€๋ฅผ ๊ฐ™์ด ๋…ผ์˜ํ•˜๋Š”๋ฐ, ๊ณ ๋ฏผ์˜ ๋‚ด์šฉ๊ณผ ๊ฒฐ๊ณผ๋ฌผ์— ๋Œ€ํ•ด์„œ ๋“ฃ๊ณ  ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒƒ์€ ํ–ฅํ›„์— QA ๋ฆฌ์†Œ์Šค๋ฅผ ์ ˆ๊ฐํ•ด์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๊ฐœ๋ฐœ์ž์—๊ฒŒ ์ค‘์š”ํ•œ ๊ฒƒ์€ ์‹ค๋ ฅ๋„ ์‹ค๋ ฅ์ธ๋ฐ, ๋„๋ฉ”์ธ ์ง€์‹์ด ๊ทธ๋งŒํผ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๋งˆ์ผ€ํŒ… ๊ด€๋ จ๋˜์–ด์„œ ์–ด๋–ค ์ดํ•ด๊ด€๊ณ„์ž๊ฐ€ ์–ด๋–ค ์ˆ˜์š”๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๊ณ , ๊ทธ๊ฒƒ์„ ์–ด๋–ป๊ฒŒ ํ‘œํ˜„ํ•˜๊ณ  ์žˆ๋Š”์ง€๋ฅผ ์•„๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•œ๋ฐ, Pre-sketch์™€ ํ‚ฅ์˜คํ”„ ๋ฏธํŒ…์„ ํ†ตํ•˜์—ฌ ์ž‘๊ฒŒ๋‚˜๋งˆ ์ด๋Ÿฌํ•œ ๋น„์ฆˆ๋‹ˆ์Šค ๋„๋ฉ”์ธ์— ๋Œ€ํ•œ ์ดํ•ด๋„๋ฅผ ๋†’์ด๋Š” ๊ฒƒ์ด ๊ฐ€๋Šฅํ•ด์ง‘๋‹ˆ๋‹ค. ์ด๋Š”ย ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์˜ ์žฅ๊ธฐ์ ์ธ ๋™๊ธฐ๋ถ€์—ฌ์— ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

5. 2. ์ปดํฌ๋„ŒํŠธ ์‹œ์Šคํ…œ

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

5. 3. QA ๋ฐ ๋ฐฐํฌ ์ค€๋น„

๋ณดํ†ต QA๋Š” 3๋ช…์˜ ๋‹ด๋‹น์ž๋“ค์„ ์ •ํ•˜์—ฌ ์ˆ˜ํ–‰ํ•˜๊ฒŒ ๋˜๋Š”๋ฐ, ์—ฌ๊ธฐ์„œ๋Š” ๊ธฐํš์ž์ธ CPO(PM)๊ณผ UI/UX ๋””์ž์ด๋„ˆ๋“ค, ๊ทธ๋ฆฌ๊ณ  CTO(ํ˜น์€ ํŒ€์žฅ)์ด ์ฐธ์—ฌํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ์—์–ด๋ธŒ๋ฆฟ์ง€ ์ž์ฒด QA ์—”์ง€๋‹ˆ์–ด์™€ ํ•จ๊ป˜ ์ผํ•˜๊ณ  ์žˆ๊ธฐ์— QA ์—”์ง€๋‹ˆ์–ด๋„ ์ด ํ”„๋กœ์„ธ์Šค์— ํ•ญ์‹œ์ ์œผ๋กœ ์ฐธ์—ฌํ•ฉ๋‹ˆ๋‹ค.
ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์—์„œ๋Š” Black box QA๋ฅผ ๊ธฐ๋ณธ ์›์น™์œผ๋กœ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Black box QA ํ™˜๊ฒฝ์„ ํ˜•์„ฑํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” QA๋ฅผ ์ง„ํ–‰ํ•˜์‹œ๋Š” ๋‹ด๋‹น์ž๋“ค์ด ์‹ค์ œ๋กœ ์ธํ„ฐ๋ž™์…˜์„ ํ•ด๋ณผ ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์„ ๊ตฌ์ถ•ํ•ด์ฃผ๋Š”๊ฒŒ ์ค‘์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์—์–ด๋ธŒ๋ฆฟ์ง€๋Š” Sur.ge๋‚˜ Netlify์™€ ๊ฐ™์€ ๋ผ์ด๋ธŒ ๋ฐฐํฌ ํˆด์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋ž˜์„œ ๋ผ์ด๋ธŒ๋กœ master์— ๋ฐฐํฌํ•˜๊ธฐ ์ „์— ์–ด๋–ป๊ฒŒ ์‹ค์ œ๋กœ ๋™์ž‘ํ• ์ง€๋ฅผ ๊ธฐํš, ๋””์ž์ธ, QA์ชฝ์—์„œ ์–ธ์ œ๋“ ์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค.
๊ธฐ๋Šฅ์€ ๋‹จ ํ•œ ๋ฒˆ์— ์™„์„ฑ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ช‡ ๋ฒˆ์˜ iteration์„ ๋Œ๋ฉด์„œ ์‹ค์ œ๋กœ ์‚ฌ์šฉ์ž๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ QA๋ฅผ ๋Œ๋ฆฌ๊ณ , ๊ทธ ๊ณผ์ •์—์„œ ๋‚˜์˜จ ์ด์Šˆ์™€ ๊ฐœ์„  ์‚ฌํ•ญ๋“ค์„ ์ฒ˜๋ฆฌํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ชจ๋“  QA ์‚ฌํ•ญ๋“ค์ด ๋ฐ˜์˜๋˜์—ˆ์„ ๋•Œ ์ตœ์ข… PR์„ ๋‚ ๋ฆฌ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

6. ์ฝ”๋“œ ๋ฆฌ๋ทฐ ๋ฐ ํšŒ๊ณ  ๋ฌธํ™”

๊ธฐ๋ณธ์ ์œผ๋กœ ์ตœ์ข…์ ์ธ ์ฝ”๋“œ ๋ฆฌ๋ทฐ ์ด์ „์— ์ด๋ฏธ Black box์˜ QA๊ฐ€ ์ง„ํ–‰๋œ ์ƒํƒœ๊ณ , ํ†ต์ƒ์ ์œผ๋กœ 10๊ฐœ ์ด์ƒ์˜ ๊ฐœ์„  ๋ฐ ๋ณด์™„ ์š”์ฒญ์ด ๋“ค์–ด์˜ฌ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ๋˜ํ•œ ๋‹น์—ฐํžˆ Cypress์˜ Smoke test ์‹œ๋‚˜๋ฆฌ์˜ค๋“ค์„ ๋ชจ๋‘ ํ†ต๊ณผํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ธฐ์— PR์ด ๋‚ ๋ ค์ง„ ์ˆœ๊ฐ„์— ์ฝ”๋“œ ํ€„๋ฆฌํ‹ฐ๋Š” ์ตœ์†Œํ•œ์ด ๋ณด์žฅ๋œ ์ƒํƒœ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.
์ด๋ ‡๊ฒŒ ์ตœ์ข… PR์ด ๋‚ ๋ ค์กŒ๋‹ค๊ณ  ๊ฐ€์ •ํ•  ๋•Œ ํ•ด๋‹น PR์€ ์ด 3๋ช… ์ด์ƒ์˜ Approve๋ฅผ ๋ฐ›์•„์•ผ์ง€๋งŒ Merge ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ณผ์ •์—์„œ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์ €ํฌ๋Š” ์„œ๋กœ์˜ ์ฝ”๋“œ๋ฅผ ๋ฆฌ๋ทฐํ•ด์ฃผ๊ณ  ์ฝ”๋ฉ˜ํŠธ๋ฅผ ๋‹ฌ์•„์ฃผ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๋•Œ๋กœ๋Š” ์น˜๋ช…์ ์ธ ์ฝ”๋“œ๊ฐ€ ๋ฐœ๊ฒฌ๋  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿด ๋•Œ๋Š” ์ฝ”๋ฉ˜ํŠธ๋ฅผ ๋‹จ์ˆœํžˆ ์ฃผ๋Š” ๊ฒƒ์œผ๋กœ ๋ฉˆ์ถ”์ง€ ์•Š๊ณ  Blocking์„ ๊ฑธ์–ด์„œ ์•„์˜ˆ ๊ทธ ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์ง€ ์•Š๊ณ ์„œ๋Š” Merge ์ž์ฒด๊ฐ€ ์•ˆ๋˜๋„๋ก ๊ฐ•์ œํ•  ๋•Œ๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
ํ•œํŽธ, ์ €ํฌ ํŒ€์€ ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์„ ๋งค์šฐ ์ค‘์š”ํ•˜๊ฒŒ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ธฐ์— Airbnb์˜ lint ๊ทœ์น™์„ ๊ฐ€์ ธ์™€์„œ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Airbnb์˜ lint ๊ทœ์น™์€ ๋งค์šฐ strictํ•˜๊ฒŒ ๋œ ํŽธ์ธ๋ฐ, ์„ฑ๋Šฅ ํ–ฅ์ƒ๋ณด๋‹ค๋Š” ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์„ ๋†’์ด๋Š” ๋ฐฉํ–ฅ์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์–ด ์ข‹๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ๋„ค์ด๋ฐ ์ปจ๋ฒค์…˜์˜ ๊ฒฝ์šฐ์—๋„ ์ด๋Ÿฌํ•œ ์›์น™ ์œ„์—์„œ ์ง€์ผœ๋‚˜๊ฐ€๋„๋ก ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
ํ˜„์žฌ ํšŒ๊ณ ๋Š” ์ผ์ฃผ์ผ์— 1ํšŒ ํŒ€ ํšŒ๊ณ ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉฐ, ๊ฐ์ž ํ•œ ์ฃผ ๋™์•ˆ ์ผ์„ ํ•˜๋ฉฐ ํž˜๋“ค์—ˆ๋˜ ์ ์ด๋‚˜ ๊ฐœ์„ ํ•ด์•ผ ํ•  ์ ์„ ์ด์•ผ๊ธฐํ•˜๋ฉฐ, ์„œ๋กœ์˜ ์–ด๋ ค์›€์— ๊ณต๊ฐํ•˜๊ณ  ์•ก์…˜์•„์ดํ…œ๋“ค์„ ์ˆ˜๋ฆฝํ•˜๋Š” ๊ฒƒ์„ ๋ชฉ์ ์œผ๋กœ ํ•ฉ๋‹ˆ๋‹ค. ๋‹ค๋งŒ, ํ˜„์žฌ ํšŒ๊ณ ์˜ ๋ฌธ์ œ๋Š” ๊ฐ๊ฐ์˜ ํƒœ์Šคํฌ๋“ค์ด ๋‹ค์†Œ ์ถ”์ƒ์ ์œผ๋กœ ๋‹ค๋ค„์ง„๋‹ค๋Š” ๊ฒƒ์— ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์žฅ๊ธฐ์ ์œผ๋กœ๋Š” ํƒœ์Šคํฌ ๋‹จ์œ„์˜ ๋งˆ์ดํฌ๋กœ ํšŒ๊ณ  ๋˜ํ•œ ์‹ค์‹œํ•˜๊ณ ์ž ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

7. B2B ๋Œ€์‹œ๋ณด๋“œ ๊ฐœ๋ฐœ์˜ ํŠน์ด์„ฑ : ๋น…๋ฐ์ดํ„ฐ์˜ ์‹œ๊ฐํ™”

B2B ๋Œ€์‹œ๋ณด๋“œ์˜ ํ”„๋ก ํŠธ์—”๋“œ์—์„œ ๊ฐ€์žฅ ํ’€๊ธฐ ์–ด๋ ค์šด ๊ฒƒ์€ ๋งŽ์€ ์ •๋ณด๋Ÿ‰์„ ์–ด๋–ป๊ฒŒ ๋Œ€์‹œ๋ณด๋“œ์˜ ์„ฑ๋Šฅ ์ €ํ•˜ ์—†์ด ํšจ์œจ์ ์œผ๋กœ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ์„์ง€์˜ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.
๋งŽ์€ ์ •๋ณด๋Ÿ‰์€ ๋Œ€์‹œ๋ณด๋“œ์˜ ์„ฑ๋Šฅ๊ณผ ์ง๊ฒฐ๋˜๊ณ , ๊ทธ ๋Œ€์‹œ๋ณด๋“œ์˜ ์„ฑ๋Šฅ์„ ์ตœ์ ํ™” ํ•˜๋Š” ๊ฒƒ์€ ๊ธฐ์ˆ ์ ์œผ๋ก  ๋‚œ์ด๋„๊ฐ€ ๋†’์€ ์ผ์ž…๋‹ˆ๋‹ค. ์•„๋ฌด๋ฆฌ ๋ฐฑ์—”๋“œ์—์„œ ๊ฐ€๊ณตํ•ด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ค€๋‹ค๊ณ  ํ•ด๋„, ๊ทธ ์–‘์ด ์ ์ง€ ์•Š๊ณ , ๋˜ํ•œ ๊ฐ€๊ณต๋˜์ง€ ์•Š์€ raw data๋„ ๋‚ด๋ ค์˜ฌ ๋•Œ์—๋„ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.
์ด๋ ‡๊ฒŒ ๋งŽ์€ ๋ฐ์ดํ„ฐ๋ฅผ HTML์— ๊ทธ๋ƒฅ DOM์œผ๋กœ ๊ทธ๋ ค๋„ฃ๋Š” ์ˆœ๊ฐ„ ๋ฐ”๋กœ ๋Œ€์‹œ๋ณด๋“œ๊ฐ€ ๋ฒ„๋ฒ…์ด๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ด๊ฑธ ์–ด๋–ป๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ๋‚˜๋ˆ ์„œ ํ”„๋ก ํŠธ์—”๋“œ์—์„œ ๋ณด์—ฌ์ฃผ๊ฑฐ๋‚˜ ๊ฐ€์ƒํ™”ํ•  ๊ฒƒ์ธ์ง€, ์–ด๋–ค ๋„๊ตฌ๋ฅผ ์จ์„œ ์ตœ์ ํ™”๋ฅผ ํ•  ๊ฒƒ์ธ์ง€์— ๋Œ€ํ•œ ๋ฌธ์ œ๊ฐ€ ํ•ญ์ƒ ๋ฐœ์ƒํ•˜๋ฉฐ, ์ €ํฌ๋Š” ์ด๋ฅผ ์ตœ์ ํ™”ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๋‘ ๋ฒˆ์งธ๋กœ๋Š” ๋งŽ์€ ์–‘์˜ ๋ฐ์ดํ„ฐ๋ฅผ โ€˜์–ด๋–ป๊ฒŒโ€™ ํ‘œํ˜„ํ•ด์ค„์ง€๋ฅผ ํ•ด๊ฒฐํ•  ๋•Œ ์ƒ๊ธฐ๋Š” ๊ธฐ์ˆ ์ , ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ์š”๊ตฌ์‚ฌํ•ญ์ด ๋งŽ์Šต๋‹ˆ๋‹ค.
์• ๋„๋ฆฌํ‹ฑ์Šค ์ž์ฒด๋Š” ์„ค์ • ์ž์ฒด๋„ ์ปค์Šคํ„ฐ๋งˆ์ด์ฆˆํ•  ๊ฒƒ์ด ๋งŽ๊ณ , ๋ฐ์ดํ„ฐ์™€์˜ ์ธํ„ฐ๋ ‰์…˜์ด ๋งŽ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์ด๋ฅผ ํ‘œํ˜„ํ•  ๋•Œ ์ฐจํŠธ๋‚˜ ํ‘œ๊ฐ€ ๋งŽ์ด ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค. ์ฐจํŠธ๋ฅผ ๊ตฌ์„ฑํ•  ๋•Œ bar, sankey, line ๋“ฑ ๋‹ค์–‘ํ•œ ์ฐจํŠธ ์ค‘์—์„œ ๋ฌด์—‡์„ ๊ณ ๋ฅผ์ง€๋„ ํ•จ๊ป˜ ๊ณ ๋ฏผํ•ด์•ผ ํ•˜๋ฉฐ, ํ‘œ๋ฅผ ๊ตฌ์„ฑํ•  ๋•Œ์—๋„ fixed column์ด๋‚˜ fixed row์˜ ๋ฌธ์ œ๊ฐ€ ์žˆ์œผ๋ฉฐ, ์Šคํฌ๋กค์„ ๋‚ด๋ฆด ๋•Œ ์ด๋ฅผ stickyํ•˜๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ์„ธ๋ถ€ ์‚ฌํ•ญ์˜ ๊ตฌํ˜„์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
ํ•œํŽธ, ์ธํ„ฐ๋ ‰์…˜์„ ๊ตฌ์„ฑํ•  ๋•Œ์—๋„ ์–ด๋Š ์ •๋„๊นŒ์ง€ ์ธํ„ฐ๋ ‰์…˜์ด ๋ฒ„๋ฒ…์ด์ง€ ์•Š๊ณ  ๊ตฌํ˜„๋  ์ˆ˜ ์žˆ๋Š”์ง€๋ฅผ ์ƒ๊ฐํ•ด๋ณด๊ณ  UX์™€ ํ˜‘์˜ํ•˜๋Š” ๊ณผ์ •๋„ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
์ฆ‰, ์ˆ˜์ •ํ•ด์•ผํ•  ๊ฒƒ๋„ ๋งŽ๊ณ , ๊ณ ๋ คํ•ด์•ผ ํ•  ๋‚ด์šฉ๋„ ๋งŽ์Šต๋‹ˆ๋‹ค. ์—์–ด๋ธŒ๋ฆฟ์ง€ ํ”„๋ก ํŠธ์—”๋“œํŒ€์€ ์ด๋Ÿฐ ๋‹น๋ฉดํ•œ ๋ฌธ์ œ๋“ค์„ ํ•ด๊ฒฐํ•˜๋ฉด์„œ ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

Fun Fact : ์‚ฌ๋‚ด React To-do-list ๊ฐ•์˜

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

Fun Question : ์–ด๋–ค ์‚ฌ๋žŒ๊ณผ ์ผํ•˜๊ณ  ์‹ถ์€์ง€?

์—์–ด๋ธŒ๋ฆฟ์ง€ ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์—์„œ ๊ฐ€์žฅ ์ค‘์š”ํ•˜๊ฒŒ ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ์€ โ€˜์†Œํ†ตโ€™์ž…๋‹ˆ๋‹ค.
์—ฌ๊ธฐ์„œ ๋งํ•˜๋Š” ์†Œํ†ต์€ ์ธ๊ฐ„์œผ๋กœ์„œ ์ƒํ˜ธ๊ฐ„์— ์กด์ค‘์„ ๋ฐ”ํƒ•์œผ๋กœ ์‹œํ–‰ํ•˜๋Š” ์–ธ์–ด์  ์†Œํ†ต, ์—…๋ฌด๋ฅผ ํ•  ๋•Œ ์ถฉ๋ถ„ํžˆ ์ž์‹ ์ด ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์ปจํ…์ŠคํŠธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์†Œํ†ต, ๊ทธ๋ฆฌ๊ณ  ๊ฐœ๋ฐœ์ž๋กœ์„œ ์–ผ๋งˆ๋‚˜ ๊ฐ€๋…์„ฑ์ด ์ข‹์€ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋Š”์ง€์ž…๋‹ˆ๋‹ค.
์•„๋ฌด๋ฆฌ ์ผ์„ ์ž˜ํ•˜๋Š” ๊ฐœ๋ฐœ์ž๋ผ๋„, ๊ทธ ๋ถ„์ด ์†Œํ†ต์„ ์ค‘์š”์‹œํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ๊ทธ ๋ถ„์ด ์ง  ์ฝ”๋“œ๋Š” ์„œ๋กœ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›๊ธฐ๊ฐ€ ์–ด๋ ต๊ณ , ๋˜ํ•œ ํ–ฅํ›„์— ๊ทธ ๋ถ„์ด ๋– ๋‚˜๊ณ  ๋‚œ ๋’ค์— ์•„๋ฌด๋Ÿฐ ์†Œ์šฉ์ด ์—†์ด legacy๋กœ ์ „๋ฝํ•˜๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.
ํ•œํŽธ, ์†Œํ†ต์„ ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด B2B ์ œํ’ˆ์„ ๋งŒ๋“œ๋Š”๋ฐ ํ•„์ˆ˜์ ์ธ ๋„๋ฉ”์ธ ์ง€์‹์„ ์–ป์„ ์ˆ˜ ์—†์œผ๋ฉฐ, ๊ธฐํš์ž์™€ UX/UI ๋””์ž์ด๋„ˆ์˜ ์ปจํ…์ŠคํŠธ์™€ ์˜๋„๋ฅผ ์ดํ•ดํ•˜์ง€ ๋ชปํ•˜์—ฌ ํ–ฅํ›„์— ๊ฐœ๋ฐœ๋œ ๊ธฐ๋Šฅ ์ž์ฒด๊ฐ€ ์—‰๋šฑํ•œ QA ์š”์ฒญ๋“ค์„ ๋ฐ›๊ฑฐ๋‚˜, ํƒ€ ์ง๊ตฐ์— ๊ณ„์‹  ๋ถ„๋“ค๊ณผ ์žฆ์€ ๋งˆ์ฐฐ์„ ์ผ์œผํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์—์–ด๋ธŒ๋ฆฟ์ง€ ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์€ ์ž‘๋”๋ผ๋„ ์ ์ง„์ ์ด๊ณ , ๊พธ์ค€ํ•œ ๊ฐœ์„ ์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค. ํ•จ๊ป˜ ์†Œํ†ต์„ ํ†ตํ•˜์—ฌ ๋ถ€์กฑํ•œ ๋ถ€๋ถ„์„ ๋ฉ”๊ฟ”๋‚˜๊ฐ€๊ณ , ์„œ๋กœ ๋”์šฑ ๋ฐœ์ „์„ ๋„๋ชจํ•  ์ˆ˜ ์žˆ๋Š” ์ข‹์€ ๋™๋ฃŒ๋ฅผ ๊ธฐ๋‹ค๋ฆฝ๋‹ˆ๋‹ค.

์—์ด๋น„์ผํŒ”๊ณต ํ”„๋ก ํŠธ์—”๋“œ... ์–ด์ฉ์ง€ ๋‚˜์™€ ํ•์ด ๋งž๋Š” ๊ฒƒ ๊ฐ™๋‹ค๋ฉด...?