김희준

소프트웨어 엔지니어

khj981116@gmail.com  ·  010-7273-2411  ·  github.com/heejunKIM01 ↗

경력

티피씨인터넷

Web Software Engineer 2023.07 – 현재

글로벌 크리에이터 멤버십 플랫폼 likey.me ↗를 개발하고 있습니다. 라이브 방송, DM, 유료 미디어, 커머스, 결제 등 기능을 개발 및 유지 보수하고 있고, 신규 기능 개발과 함께 운영 중인 서비스를 안정화하고 개선하는 일을 담당하고 있습니다.

LIKEY 웹 — 미디어 · 실시간 · SSR

숏폼 '스토리' 기능 개발

문제
처음 도입하는 영상 재생 기능이라, 슬라이드를 넘기면 재생이 멈추거나 iOS에서 자동재생 시 전체화면으로 강제 전환되는 등 실패 경로가 많았습니다.
설계
재생이 실패하면 HLS, 압축본, 원본 순으로 다른 소스로 다시 시도하도록 만들고, 플레이어 생성·해제를 슬라이드 전환과 동기화했습니다.
결과
소리 없는 영상에서는 음소거 버튼을 숨기는 등 오동작을 하나씩 제거했습니다. 출시 후에도 Sentry 데이터를 보며 성능 개선과 후속 기능 개발을 이어갔습니다.

Sentry 모니터링 기반 SSR 에러 개선

문제
서버 렌더링 중 발생하는 크래시가 오랫동안 반복되고 있었는데, 에러 메시지만으로는 원인 지점이 보이지 않았습니다.
원인
Sentry에 쌓인 에러 데이터를 분석해, 서버가 페이지 상태를 직렬화하는 과정에서 순환참조가 생기는 구조를 찾아냈습니다.
결과
문제가 된 데이터 요청을 클라이언트로 옮겨 크래시를 없애고, 같은 유형이 재발하지 않도록 기준을 정리했습니다. 외부 스크립트가 일으키던 라우터 에러도 같은 방식으로 해결했습니다.

실시간 채팅(라이브 · DM) 안정화

문제
라이브 방송이 끝날 때 실시간 연결을 정리하는 과정에서 에러가 새어 나와 650여 명이 겪고 있었고, DM방은 드나들 때마다 이벤트 리스너가 쌓였습니다.
원인
연결이 끝나기 전에 해제 요청이 겹치면 앞선 요청이 취소되며 에러가 나는 타이밍 문제, 그리고 해제되지 않고 남는 리스너였습니다.
결과
연결을 정리하는 순서를 바로잡고, 온라인 여부와 연결 상태를 조합한 3단계 연결 배너를 구축했습니다. 실측하여 리스너가 더는 늘지 않는 것을 확인해 검증하였습니다.

그 외

  • 수백 개 쌓여 있던 타입 에러를 단계적으로 전부 정리하고, 다시 쌓이지 않도록 CI에 타입 검증을 추가
  • Chrome에서만 .mov 썸네일이 안 보이던 버그를 웹 스펙을 확인해 해결 — iOS Safari에서 검게 나오던 썸네일도 수정
  • 대용량에서 자주 실패하던 업로드를 파일을 나눠 올리는 청크 방식으로 전환(재시도·진행률 포함), DM 메모리 누수 제거
  • 일본 진출 대응 — 백넘버 릴리즈, 6개 통화 가격 포맷 일원화 · 쿠폰함 개발
  • 간헐적으로 실패하던 e2e 테스트를 원인을 추적해 해결 · Sentry에 불필요한 에러가 쌓이지 않게 거르는 기준을 팀 표준으로 정착
  • 멤버십 프로모션, 실시간 승급 팬 티어, 룰렛·스크래치, AI Twin 채팅 등 수익화 기능 다수 출시
  • 디자인 시스템 Shared 컴포넌트 구축과 Histoire 문서화

LIKEY 웹 마이그레이션 — Nuxt 4 전환

Nuxt 2 운영과 병행하여 차세대 코드베이스의 웹 코어 인프라를 프로젝트 초기부터 기여했습니다.
두 프로젝트는 라우팅을 분리하여 공존하며 화면 단위로 점진 전환 중입니다.

PR별 백엔드 프리뷰 인프라

문제
백엔드 PR마다 생성되는 프리뷰 서버로 API를 라우팅하는 인프라를 초기 설계했는데, 응답하지 않는 프리뷰로 요청이 계속 전달돼 스튜디오가 동작하지 않는 문제가 드러났습니다.
해결
서버 미들웨어에서 짧은 타임아웃으로 헬스체크를 하고, 응답이 없으면 기본 백엔드 서버로 연결되도록 폴백 처리 했습니다. 라우팅 규칙은 클라이언트와 서버가 같은 코드를 쓰도록 분리했습니다.
결과
화이트리스트 검증과 리다이렉트 루프 방지 테스트까지 갖춰, 프리뷰 서버 상태와 무관하게 개발 흐름이 유지됩니다.

배포 직후 생기는 dynamic import 404 해결

문제
배포로 청크 해시가 바뀌면 열려 있던 탭이 옛 청크를 dynamic import 하다 404가 났고, 100명 넘는 사용자가 겪고 있었습니다.
원인
Nuxt에 내장된 복구 기능은 페이지 이동 중의 실패만 감지해서, 버튼 클릭으로 뜨는 모달처럼 이동과 무관한 실패는 못 잡는 것을 확인했습니다.
해결
불러오기에 실패하면 작업 상태를 보존한 채 새 버전으로 다시 불러오는 전역 플러그인을 구현하고, 이동 중이던 페이지는 원래 목적지로 복구했습니다.

SSR 크래시와 hydration mismatch 해결

문제
로그인 관련 페이지의 리다이렉트가 SSR에서 크래시했고, hydration mismatch를 피하려는 우회 코드가 여러 컴포넌트에 깔려 있었습니다.
원인
Nuxt 내부 코드까지 추적해 보니, 리다이렉트 함수를 정해진 위치(미들웨어) 밖에서 서버 렌더링 중에 호출하면 내부에서 에러가 나는 구조였습니다.
결과
리다이렉트를 미들웨어로 옮기고 모달 렌더링을 SSR이 지원하는 방식으로 바꿔 우회 코드를 제거했습니다.

그 외

  • 디자인 시스템 4종(Tab·Divider·ContextMenu·Checkbox)을 Vue 2에서 3으로 이식하는 패턴 정리, 호출부 일괄 전환
  • 신·구 웹 전환 라우팅 정비

VLUM 어드민 콘솔 — 신규 구축

  • 어드민 콘솔을 구축하고, Node.js/Express API도 테스트와 함께 직접 구현

사이드 프로젝트

포토로얄 — 실시간 오프라인 게임 운영 서비스

오프라인 서바이벌 게임 운영 서비스입니다. 참가자는 모바일 브라우저 카메라로 상대를 촬영해 '킬샷'을 제출하고, 진행자는 판정 큐와 라운드(타이머·올스탑·공지) 기능을 기반으로 실시간 운영합니다.

새로고침에도 유지되는 서버 기준 타이머

문제
호스트 기기에서 타이머를 실행하면 시계 오차가 참가자 전원에게 전파되고, 새로고침이나 기기 교체 순간 진행 중인 라운드가 사라집니다.
설계
남은 시간 자체가 아니라 시작 시각과 총 시간만 서버에 저장하고, 남은 시간은 항상 서버 시각 기준으로 계산합니다.
결과
새로고침·기기 교체에도 라운드가 유지됩니다. 단위 테스트와 실기기 QA 진행 후 결과를 문서로 남겼습니다.

브라우저 카메라 화질 개선

문제
브라우저 카메라 화면과 촬영 결과물이 iOS 실기기에서 심하게 저화질이었습니다.
원인
해상도 제약이 없으면 브라우저는 기기 최대가 아니라 기본 저해상도(보통 640×480)를 선택합니다.
해결
카메라에 1920×1080 해상도를 요청하고, 지원하지 않는 기기는 자동으로 낮춥니다. 4K는 메모리와 발열 부담 때문에 쓰지 않기로 판단했습니다.

Firestore 보안 규칙 설계

설계
보안 규칙을 데이터가 어긋나지 않게 막는 장치로 썼습니다. 닉네임 중복은 서버 규칙에서 막고, 문서마다 허용된 필드와 값 범위를 검증하며, 공지는 수정·삭제할 수 없게 제한했습니다.
결과
일시정지 중 촬영·제출은 UI와 서버 레벨에서 이중 차단했습니다.

그 외

  • 팀 배정 규칙 엔진(게임 모드 별 포지션 모듈화, 다시 짝꿍으로 매칭되는 상황 회피)
  • Reka UI 기반 디자인 시스템 컴포넌트 구축

일하는 방식

코드 리뷰

리뷰를 주고 받으면서 개인의 발전과 더불어 팀의 코드 품질도 함께 성장한다고 생각합니다.

기획 검토

기획서의 테스트케이스를 구현과 하나씩 대조하고, 문서에 없던 엣지케이스를 찾아 기획에 기여했습니다.

폭넓은 기여

어드민 콘솔, 백엔드, 기획 문서 작성까지 필요한 작업이면 직군을 가리지 않고 참여합니다. Nuxt가 사용하는 오픈소스 unjs/unstorage의 버그를 발견해 이슈와 수정 PR을 올렸고, 머지됐습니다(#751 ↗). 팀 컨벤션을 반영한 자동 코드리뷰, 실브라우저 QA flow, 번역키 자동 체크 등 여러 워크플로우를 통해 개발 프로세스 자동화에 기여했고, 개인적으로 사용하는 에이전트 워크플로우 25종을 만들어 반복 업무의 생산성을 높이고 있습니다.

기술 스택

언어 · 프레임워크 TypeScript, Vue 2/3, Nuxt 2·3·4, React
미디어 · 실시간 video.js, HLS, Agora(WebRTC), Ably, Firestore, getUserMedia/Canvas
상태 · 스타일 Pinia, Vuex, TanStack Query, SCSS, Tailwind, 디자인 토큰
테스트 · 품질 Playwright, Sentry(SSR 포함), Vitest, Jest, Histoire
인프라 · 결제 GCP(App Engine·Docker), Firebase, GitHub Actions(PR 프리뷰·e2e), Stripe·멀티 커런시