Berriz

BerrizยทKakao Entertainment ยท Frontend Engineer

๊ธ€๋กœ๋ฒŒ ํŒฌ ํ”Œ๋žซํผ Berriz์˜ ํ”„๋ก ํŠธ์—”๋“œ ์ตœ๋‹ค ๊ธฐ์—ฌ์ž๋กœ, ๊ณ„์ •ยท์ธ์ฆ, ๋”ฅ๋งํฌ, ๋ผ์ด๋ธŒ ์ŠคํŠธ๋ฆฌ๋ฐ, ์ปค๋จธ์Šค, ์˜ค๋””์…˜ ์‹ค์‹œ๊ฐ„ ํˆฌํ‘œ๊นŒ์ง€ ์ œํ’ˆ ์ „๋ฐ˜์„ ์ฃผ๋„ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฉ”์ธ ํ”Œ๋žซํผ์„ ์ถ•์œผ๋กœ ํŒŒํŠธ๋„ˆ์„ผํ„ฐ ์˜ˆ์•ฝยทTVOD ๋„๋ฉ”์ธ์„ 0๋ถ€ํ„ฐ ๊ตฌ์ถ•ํ•˜๊ณ , ๋ผ์ด๋ธŒ ํ”Œ๋ ˆ์ด์–ด SDK ์ฝ”์–ด๋ฅผ ์„ค๊ณ„ํ–ˆ์œผ๋ฉฐ, AI ์ฝ”๋”ฉ ์—์ด์ „ํŠธ ์˜ค์ผ€์ŠคํŠธ๋ ˆ์ดํ„ฐ์™€ ํ‰๊ฐ€ ํ•˜๋„ค์Šค๋กœ ํŒ€์˜ ๊ฐœ๋ฐœ ์ƒ์‚ฐ์„ฑ๊นŒ์ง€ ๋Œ์–ด์˜ฌ๋ ธ์Šต๋‹ˆ๋‹ค.

berriz.in โ†—ยท์ด๋ ฅ ์š”์•ฝยท๋”ฅ๋งํฌ ๊ธฐ์ˆ  ๊ธ€
3,566+
์ปค๋ฐ‹ ยท 680 PR
์ตœ๋‹ค ๊ธฐ์—ฌ์ž
~22๊ฐœ์›”
2024.08 ~ ํ˜„์žฌ
์ง„ํ–‰ ์ค‘
7+
์„œ๋น„์Šค / ๋ ˆํฌ
ํ”Œ๋žซํผ ยท ํŒŒํŠธ๋„ˆ์„ผํ„ฐ ยท ์˜ค๋””์…˜ ยท ๋ผ์ด๋ธŒ
100๋งŒ+
์œ ์ €
์ œ๋กœ ๋ฒ ์ด์Šค โ†’ ๊ธ€๋กœ๋ฒŒ ์ถœ์‹œ

๊ธฐ์—ฌ ์˜์—ญ

01

๊ณ„์ • ยท ์ธ์ฆ

  • ๋ฉœ๋ก (Melon) ๊ณ„์ • ์–‘๋ฐฉํ–ฅ ์—ฐ๋™๊ณผ ๋ณธ์ธ์ธ์ฆ ์‹œ์Šคํ…œ์„ ์„ค๊ณ„ยท๊ตฌํ˜„ โ€” ์ธ๋ฐ”์šด๋“œ/์•„์›ƒ๋ฐ”์šด๋“œ ๋™์˜ ํ”Œ๋กœ์šฐ, ์—ฐ๋™ ์‚ฌ์ „ ์ฒดํฌ๋กœ ์ค‘๋ณต ์—ฐ๋™ ์ฐจ๋‹จ
  • ์„ธ์…˜ ๋งŒ๋ฃŒ ์‹œ ์žฌ๋กœ๊ทธ์ธ ์œ ๋„, ์บ์‹œ ๋ฌดํšจํ™” ๋“ฑ ์‹๋ณ„ ๋„๋ฉ”์ธ์˜ ์„ธ์…˜ ์ •ํ•ฉ์„ฑ์„ ์ผ๊ด€๋˜๊ฒŒ ์ฒ˜๋ฆฌ
  • ์—ฐ๋™ ์ •๋ณด ํ™”๋ฉด์˜ ํƒ€์ž„์กด(KST โ†’ ๊ธฐ๊ธฐ TZ) ์ •์ •์œผ๋กœ ๊ธ€๋กœ๋ฒŒ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ •ํ™•ํ•œ ์—ฐ๋™ ์‹œ๊ฐ์„ ๋…ธ์ถœ
02

ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ์•ฑ ยท ์›น๋ทฐ ๋ธŒ๋ฆฟ์ง€

  • ํ†ตํ™”/๊ตญ๊ฐ€ ๋“ฑ ์‚ฌ์šฉ์ž ์ปจํ…์ŠคํŠธ๋ฅผ ๋™๊ธฐํ™”ํ•˜๋Š” setAppValues ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์„ค๊ณ„ํ•ด ์•ฑ-์›น ํ™”๋ฉด ์ผ๊ด€์„ฑ์„ ํ™•๋ณด
  • openScheme ๊ธฐ๋ฐ˜ ์•ฑ ๋‚ด ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ถ„๊ธฐ์™€ Pull-to-Refresh ์ œ์–ด๋ฅผ ํ‘œ์ค€ ๋ธŒ๋ฆฟ์ง€ ๊ทœ์•ฝ์œผ๋กœ ์ถ”์ƒํ™”
  • ๋””๋ฒ„๊ทธ ํŒจ๋„ ๊ตฌ์ถ•, ์•ˆ๋“œ๋กœ์ด๋“œ ์›น๋ทฐ ๋‹ซํž˜ ์‹œ ๋ชจ๋‹ฌ ์ƒํƒœ ๋ณด์กด ๋“ฑ ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ํŠน์œ ์˜ ์ƒํƒœ ์†์‹ค ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐ
03

๋ผ์ด๋ธŒ ์ŠคํŠธ๋ฆฌ๋ฐ ํ”Œ๋ ˆ์ด์–ด (AWS IVS)

  • PlayerBase ์ถ”์ƒ ํด๋ž˜์Šค ์œ„์— IVS ์žฌ์ƒ ์—”์ง„์„ ๊ตฌํ˜„ โ€” IVS/DRM ๋ฐฑ์—”๋“œ๋ฅผ ๊ต์ฒด ๊ฐ€๋Šฅํ•œ ๋‹คํ˜•์  SDK ์•„ํ‚คํ…์ฒ˜ ํ™•๋ฆฝ
  • EventEmitter โ†’ zustand โ†’ React ๊ตฌ๋…์˜ ๋‹จ๋ฐฉํ–ฅ ์ƒํƒœ ๋™๊ธฐํ™”๋กœ UI๊ฐ€ ์žฌ์ƒ ์ƒํƒœ์— ๋ฐ˜์‘ํ˜• ์—ฐ๋™
  • ๋ฒ„ํผ๋งยท์†ก์ถœ ์ข…๋ฃŒยท๋ฏธ์ง€์› ๋ธŒ๋ผ์šฐ์ € ๋“ฑ error taxonomy๋ฅผ ์ •์˜ํ•˜๊ณ , player-sdk / player-ui 2ํŒจํ‚ค์ง€ ๋ชจ๋…ธ๋ ˆํฌ๋กœ ๋ถ„๋ฆฌ
  • Chromecast(CAF)ยทAirPlay ๋“ฑ ์™ธ๋ถ€ ์บ์ŠคํŒ… ๋””๋ฐ”์ด์Šค ์—ฐ๋™
04

๋”ฅ๋งํฌ (link.berriz.in)

  • Universal Links / App Links / Custom Scheme ๊ธฐ๋ฐ˜ ๋”ฅ๋งํฌ์™€ OG ํƒœ๊ทธ ๋‹ค๊ตญ์–ด ์ง€์›์œผ๋กœ ๊ธ€๋กœ๋ฒŒ ๊ณต์œ  ๊ฒฝํ—˜ ๊ตฌ์„ฑ
  • AWS Lambda ๊ธฐ๋ฐ˜ OG fetch + ์‹คํŒจ ์‹œ ๊ธฐ๋ณธ ํƒœ๊ทธ๋กœ ํด๋ฐฑํ•˜๋Š” ๊ฒฌ๊ณ ํ•œ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ํŒŒ์ดํ”„๋ผ์ธ ๊ตฌ์ถ•
  • CloudFront Functionsยทํ˜ธ์ŠคํŠธ/path ๋ผ์šฐํŒ… ์—ฐ๊ณ„, qa/cbt/sandbox ๋‹ค์ค‘ ํ™˜๊ฒฝ์œผ๋กœ ์šด์˜ ์•ˆ์ •์„ฑ ํ™•๋ณด
05

์˜ค๋””์…˜ ยท ์‹ค์‹œ๊ฐ„ ํˆฌํ‘œ (Debutโ€™s Plan)

  • ํ•ด์™ธ ๋กœ์ปฌ ํƒ€์ž„์กด ๋•Œ๋ฌธ์— ๋งˆ๊ฐ ์‹œ๊ฐ์ด '๋‹ค์Œ๋‚  00:00'๋กœ ์ž˜๋ชป ๊ณ„์‚ฐ๋˜๋˜ ๊ธ€๋กœ๋ฒŒ ํฌ๋ฆฌํ‹ฐ์ปฌ ๋ฒ„๊ทธ๋ฅผ dayjs timezone ๊ธฐ๋ฐ˜ KST ๊ณ ์ • ๋กœ์ง์œผ๋กœ ์žฌ์„ค๊ณ„
  • ๋‰ด์š•ยท๋Ÿฐ๋˜ยท์‹œ๋“œ๋‹ˆ ๋“ฑ 18๊ฐœ ๊ธ€๋กœ๋ฒŒ ํƒ€์ž„์กด์„ ์ปค๋ฒ„ํ•˜๋Š” Vitest ๋‹จ์œ„ ํ…Œ์ŠคํŠธ๋กœ ์‹œ๊ฐ„ ๊ฒฝ๊ณ„ ํšŒ๊ท€๋ฅผ ๊ตฌ์กฐ์ ์œผ๋กœ ๋ด‰์ธ
  • SSR/๋ฏธ๋“ค์›จ์–ด ์ธ์ฆ ํ๋ฆ„์„ ์ •์  ์ต์ŠคํฌํŠธ + ํด๋ผ์ด์–ธํŠธ ๋ฆฌ๋‹ค์ด๋ ‰ํŠธ + 404 ํด๋ฐฑ ๊ตฌ์กฐ๋กœ ์žฌ๊ตฌ์„ฑ
  • ํˆฌํ‘œ ๊ฒฐ๊ณผ ์ฒ˜๋ฆฌยทCountdown ํƒ€์ด๋จธยทSVG ๋ Œ๋”๋ง ์ตœ์ ํ™”๋กœ ์ฒ˜๋ฆฌ๋Ÿ‰(TPS) ๊ฐœ์„ 
06

์ปค๋จธ์Šค ยท ํŒŒํŠธ๋„ˆ์„ผํ„ฐ

  • ์ปค๋จธ์Šค(์ƒต) ์ƒํ’ˆ ์ƒ์„ธยท์ฃผ๋ฌธยท์žฅ๋ฐ”๊ตฌ๋‹ˆ, VOD ์—ฐ๊ด€ ์ƒํ’ˆ์˜ ๋ธŒ๋ผ์šฐ์ € ์›น๋ทฐ ๊ฒฐ์ œ ํ”Œ๋กœ์šฐ ๊ตฌํ˜„
  • ํŒŒํŠธ๋„ˆ์„ผํ„ฐ ์˜ˆ์•ฝ(๋ถ€ํ‚น)ยทTVOD ๊ตฌ๋งคํ˜œํƒยทํ–‰์‚ฌ ๋„๋ฉ”์ธ์„ 0๋ถ€ํ„ฐ ๊ตฌ์ถ• โ€” 4๋‹จ๊ณ„ ๋ฉ€ํ‹ฐ์Šคํ… ๋“ฑ๋ก ํผ๋„ + ์ „์šฉ CRUD API ๋ ˆ์ด์–ด ์„ค๊ณ„
  • container/presentational ๋ถ„๋ฆฌ ํŒจํ„ด๊ณผ TanStack Form + Zod ๊ฒ€์ฆ ์ผ์›ํ™”, ํผ โ†” API ์–‘๋ฐฉํ–ฅ ๋ณ€ํ™˜ ์œ ํ‹ธ ๋„์ž…
  • zero-prop bypass render props๋ฅผ 26๊ฐœ+ ์ปจํ…Œ์ด๋„ˆ์—์„œ ์ œ๊ฑฐํ•˜๋Š” ๋Œ€๊ทœ๋ชจ ๋ฆฌํŒฉํ† ๋ง์œผ๋กœ prop drilling ํ•ด์†Œ
07

๋‹ค๊ตญ์–ด ยท SSR ์•ˆ์ •์„ฑ

  • next-intl ๊ธฐ๋ฐ˜ ๋‹ค๊ตญ์–ด ์ฒด๊ณ„ + Google Sheet ์—ฐ๋™ ๋ฒˆ์—ญ ๋™๊ธฐํ™” ํŒŒ์ดํ”„๋ผ์ธ์„ ํ”Œ๋žซํผ ์ „๋ฐ˜์— ์šด์˜
  • ํ—ค๋” useId ๊ณ ์ •์œผ๋กœ SSR ํ•˜์ด๋“œ๋ ˆ์ด์…˜ ๋ถˆ์ผ์น˜๋ฅผ ํ•ด์†Œํ•˜๊ณ , MD/SM ๋ฐ˜์‘ํ˜• ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์œผ๋กœ ๋ ˆ์ด์•„์›ƒ ์ผ๊ด€์„ฑ ํ™•๋ณด
  • ์ƒํƒœ๋ฐ”ยท๋ฐ”ํ…€ ๋„ค๋น„ ๋†’์ด๋ฅผ CSS ๋ณ€์ˆ˜ํ™”ํ•ด ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ํ™”๋ฉด์˜ safe-area ์ฒ˜๋ฆฌ๋ฅผ ํ‘œ์ค€ํ™”
08

AI ๊ฐœ๋ฐœ ์ž๋™ํ™”

  • Jira ํด๋ง ๊ธฐ๋ฐ˜์œผ๋กœ AI ์ฝ”๋”ฉ ์—์ด์ „ํŠธ ์ž‘์—…์„ ์ž๋™ spawnํ•˜๋Š” ์˜ค์ผ€์ŠคํŠธ๋ ˆ์ดํ„ฐ ๋ฐ๋ชฌ์„ GitHub Actions ์œ„์— statelessํ•˜๊ฒŒ ์„ค๊ณ„
  • ์ž‘์—… ๊ฒฐ๊ณผ๋ฅผ ์ •๋Ÿ‰ ์ถ”์ ํ•˜๋Š” ํ‰๊ฐ€/๋ฒค์น˜๋งˆํฌ ํ•˜๋„ค์Šค๋ฅผ ๊ตฌ์ถ•ํ•ด AI ํ™œ์šฉ ๊ฐœ๋ฐœ ์ƒ์‚ฐ์„ฑ์„ ๋ฐ์ดํ„ฐ๋กœ ๊ด€๋ฆฌ
  • ๊ธฐํšยท์ •์ฑ…ยท์˜์‚ฌ๊ฒฐ์ • ์ž๋ฃŒ๋ฅผ AI ์—์ด์ „ํŠธ๊ฐ€ ๋ฐ”๋กœ ์ฐธ์กฐํ•˜๋Š” LLM ์ง€์‹๋ฒ ์ด์Šค(raw / pages / views 3๊ณ„์ธต)๋ฅผ ๋‹จ๋… ์„ค๊ณ„ยท๊ตฌ์ถ•
  • Confluence ์ฒจ๋ถ€ ์ด๋ฏธ์ง€ ์ž๋™ ์ธ์ž… ํŒŒ์ดํ”„๋ผ์ธ(Python)์œผ๋กœ ์ž๋ฃŒ ์ •๋ฆฌ ๋น„์šฉ์„ ์ œ๊ฑฐ
09

์ธํ”„๋ผ ยท DevOps / DX

  • Terraform ๋„์ž…์˜ ํ•„์š”์„ฑ์„ ์ง์ ‘ ์ œ์•ˆํ•˜๊ณ  ์ฃผ๋„ โ€” CloudFront ยท Lambda ยท S3 ๊ธฐ๋ฐ˜ AWS ์ธํ”„๋ผ๋ฅผ IaC๋กœ ์ „ํ™˜ํ•ด ์ˆ˜์ž‘์—… ์ฝ˜์†” ์„ค์ •์„ ์ฝ”๋“œํ™”ํ•˜๊ณ  ์žฌํ˜„ ๊ฐ€๋Šฅํ•œ ํ”„๋กœ๋น„์ €๋‹ยท๊ด€๋ฆฌ ์ฒด๊ณ„๋ฅผ ํ™•๋ฆฝ
  • FE์˜ develop ํ™˜๊ฒฝ Helm ๋ฐฐํฌ ๊ตฌ์„ฑ(Deployment/Service/Ingress)๊ณผ ๋ฉ€ํ‹ฐํ™˜๊ฒฝ values ์ž‘์„ฑ
  • ๋‹จ์ผ GCE Ingress์—์„œ host + path ์ •๊ทœ์‹ ๋ผ์šฐํŒ…์„ ๊ตฌ์„ฑํ•˜๊ณ , Express ์„œ๋น„์Šค๋ฅผ Cloud Armor WAFยทํ—ฌ์Šค์ฒดํฌ์™€ ํ•จ๊ป˜ ์‹ ๊ทœ ๋ฐฐํฌ
  • agent-browser + Vitest ๊ธฐ๋ฐ˜ E2E ์ธํ”„๋ผ์™€ CI ์›Œํฌํ”Œ๋กœ์šฐ(๋ณ‘๋ ฌ ์‹คํ–‰, env ์ฃผ์ž…, graceful skip)๋ฅผ ๊ตฌ์ถ•

๊ธฐ์ˆ  ์Šคํƒ

TypeScriptReactNext.js (App Router)TanStack Query / Formnext-intlZodTailwindCSS ยท EmotionTurborepo (pnpm)zustandAWS IVS PlayerAWS Lambda ยท CloudFrontTerraformGKE ยท Helm ยท ArgoCDCloud Armor (WAF)GitHub ActionsSentryStorybookVitest ยท Cypress ยท agent-browserLangChainPython