김희창 경력기술서

• Why를 탐구하는 엔지니어: 단순히 기능을 구현하는 것을 넘어, 기술의 근본적인 원리와 선택의 이유를 집요하게 파고듭니다. 최근에는 Python으로 브라우저 렌더링 엔진을 직접 구현하며 DOM 구조의 본질과 파싱 비용에 대해 학습하고 있습니다.
• Product-Minded Engineer: 기술이 만들어내는 사용자 가치와 비즈니스 임팩트에 집중합니다. A/B 테스트 설계부터 운영 효율화를 위한 자동화 파이프라인 구축까지, 프로덕트의 성장을 위한 전 과정을 주도합니다.
• Full-Stack Engineer: 프론트엔드, 모바일, 백엔드까지, 서비스 전 계층의 기술 스택을 활용하여 비즈니스 병목을 해결합니다.
• Global Communication: 해외 근무 경험을 바탕으로 영어권 팀원들과의 기술적/비즈니스적 협업이 원활합니다.

Tech Stack

• Core: JavaScript (ES6+), TypeScript, Python
• Frontend: React.js, Next.js, React Native, Redux/Redux-Saga, RTK Query
• Backend: Ruby on Rails, Sidekiq (Queue), Redis, AWS Lambda, PHP, Laravel, Eloquent ORM
• DevOps: GitLab CI/CD, Docker, AWS

Links

• LinkedIn / GitHub / Portfolio

Work Experience

플랭 (Plang)

Software Engineer

Feb 2025 ~ Dec 2025 / 플랭 / 플랭스쿨

기술 스택: React, React Native, Next.js, TypeScript, RTK Query, MUI, Redux, Redux-Saga, Ruby, Ruby on Rails, AWS Lambda, WebSocket

• i18n 파이프라인 최적화 및 DX 개선:
  • 문제 정의: 플랭은 한국어, 영어, 일본어 3개 언어를 지원하는데, 번역 배포 프로세스에서 매번 개발자가 Google Sheets에서 추출한 JSON 파일을 수동으로 Prettier 포맷팅해야 했습니다. 번역 업데이트가 주 2-3회 발생하면서 개발자 1명이 개발할 때 마다 최소 1분씩 소요되었고, 포맷팅을 빠트려 PR에서 200줄 이상의 diff가 발생하는 일이 반복됐습니다.
  • 개선 목표: 번역 데이터 추출부터 포맷팅 적용까지의 과정을 완전히 자동화하는 배포 환경을 구축하고자 했습니다.
  • 구현: Google Sheets API 스크립트에 Prettier를 통합하여 JSON 생성 시점에 자동으로 포맷팅되도록 파이프라인을 개선했습니다.
  • 검증 및 결과: 이를 통해 번역 배포에 소요되는 개발자 작업 시간을 회당 1분에서 5초 이내로 단축했고, 불필요한 Git diff로 인한 코드 리뷰 노이즈를 완전히 제거했습니다. 팀 내에서 '번역 배포가 이제 버튼 하나로 끝난다'는 피드백을 받았습니다.
• Event-Driven 아키텍처 기반 PDF 비동기 생성 시스템 구축:
  • 문제 정의: 플랭스쿨에서 학습 리포트를 PDF으로 제공될 수 있도록 하는 기능이 필요했습니다.
  • 개발 목표: Sidekiq, Lambda 기반 PDF 생성 파이프라인 구축을 통해 메인 서버 부하를 분산하면서 PDF를 사용자에게 제공하고 실시간 진행률 피드백을 통해 진행 상황을 명확히 인지할 수 있는 사용자 경험을 제공하고자 하였습니다.
  • 구현: 학습 리포트 PDF 생성 요청이 집중되는 피크 시간대(10~16시)의 메인 서버 타임아웃 및 서비스 응답 지연을 고려하여, 단순 서버 증설 대신 비용 효율과 확장성을 모두 고려한 Event-Driven 아키텍처를 설계하여 도입했습니다. 동기 처리 방식 대신 Sidekiq로 작업 대기열을 관리하고 AWS Lambda를 통해 PDF 변환 작업을 외부에서 분산 처리하는 비동기 구조를 구축함으로써 메인 서버의 부하를 낮췄습니다. Rails 서버가 요청을 수신하는 즉시 응답을 반환하고 Lambda가 생성된 파일을 S3에 업로드하는 흐름을 구성했으며, 특히 **WebSocket(Action Cable)**을 통해 실시간 작업 진행률을 프론트엔드에 동기화함으로써 사용자가 대기 시간을 직관적으로 인지할 수 있도록 사용자 경험을 제공하였습니다.
  • 검증 및 결과: 그 결과 서버 타임아웃이 0건으로 병목없이 안정적인 서비스가 가능했고, 피크 시간대에도 메인 서버 CPU 사용률을 안정적인 수치로 유지할 수 있게 되었습니다.
• 실시간 오디오/네트워크 환경 진단 및 장애 대응 로직 고도화:
  • 문제 정의: 플랭스쿨의 말하기 학습은 모바일 환경에서 Azure STT로 음성 인식을 하는데, 사용자가 조용한 곳에서 말하지 않거나 네트워크가 끊겨도 앱이 이를 감지하지 못해 '학습이 진행되지 않아요'라는 CS가 월 평균 5~10건 발생했습니다. 특히 학교나 교실의 환경에 변수가 많아 소음이 있는 환경에서 마이크가 제대로 작동하는지 사용자가 확인할 방법이 없었습니다.
  • 개발 목표: 사용자의 환경적 요인(마이크 비활성)과 기술적 요인(네트워크 단절)을 실시간으로 감지하는 자가 진단 체계를 구축하여, 장애 발생 시 즉각적인 원인 안내 및 재연결 UI를 제공함으로써 사용자의 막연한 대기 시간을 줄이고 학습 이탈을 방지하고자 했습니다.
  • 구현: 두 가지 문제를 해결해야 했습니다.
    • 첫째, 음성 입력이 유효한지 실시간 검증이 필요했습니다. Web Audio API로 마이크 입력 스트림의 데시벨을 실시간 측정하여, -50dB 이하면 '주변이 너무 조용하거나 마이크가 꺼져있음'으로 판단하고 사용자에게 즉시 알림을 표시했습니다.
    • 둘째, 브라우저의 navigator.onLine과 offline 이벤트는 Wi-Fi 연결 상태만 체크하고 인터넷 연결은 서버에 5초마다 Ping을 보내고, 3회 연속 실패하면 네트워크 끊김으로 판단하여 학습을 일시정지하고 재연결 UI를 표시하도록 구현했습니다.
  • 검증 및 결과: 그 결과 '학습이 안 돼요' 관련 CS가 월 1건 이하로 감소하였습니다.
• A/B 테스트 및 구독 전환율 최적화:
  • 문제 정의: 플랭의 유료 구독 수익을 증대하기 위해 PM, 디자이너와 함께 프리미엄 플랜 선택률을 높이는 A/B 테스트를 설계하고 실행했습니다.
  • 개선 목표: 플랭은 무료 체험 종료 후 일반 플랜(Basic)과 부스트 플랜(Premium)을 제공하는데, 대부분의 사용자가 일반 플랜을 선택하고 있었습니다. 사용자 행동 데이터를 분석한 결과, 플랜 비교 화면에서 두 플랜의 차이를 명확히 인지하지 못하고 '일단 저렴한 걸로'라는 심리로 일반 플랜을 선택하는 경향이 강했습니다. 사용자 피드백을 수집한 결과 '부스트 플랜이 나한테 왜 필요한지 모르겠다', '두 플랜의 차이가 잘 안 보인다'는 의견이 많았습니다. 비즈니스 관점에서 프리미엄 플랜 선택률을 높이는 것이 ARPU(Average Revenue Per User) 증대의 핵심 과제였습니다. 그래서 PM, 디자이너와 함께 '부스트 플랜의 핵심 가치를 더 명확하게 전달하고, 시각적으로 강조하면 프리미엄 플랜 선택률이 증가할 것이다.'라는 가설을 수립했습니다.
  • 구현: 디자이너와 협업하여 Variant 화면을 개선했습니다.
    • 첫째, 부스트 플랜의 시각적 위계를 강화했습니다. 카드 크기를 더 크게 하고, '프리미엄' 뱃지를 추가하고, 색상 대비를 높여 시선이 자연스럽게 부스트 플랜으로 가도록 디자인했습니다.
    • 둘째, 사용자 피드백을 기반으로 부스트 플랜의 핵심 가치를 재구성했습니다. 기존에는 'AI 피드백', '다양한 학습 모드' 같은 기능만 나열했는데, '고성능 AI 모델', 'AI 레벨 테스트'처럼 사용자가 얻을 수 있는 구체적인 결과로 표현을 바꿨습니다.
  • 검증 및 결과: Mixpanel로 각 플랜별 클릭 이벤트, 화면 체류 시간, 최종 선택을 추적했고 충분한 표본 크기를 확보한 후 통계적 유의성(p<0.05)을 확인했습니다. Variant 그룹에서 부스트 플랜 선택률이 Control 대비 명확히 증가했고, 특히 부스트 플랜 카드의 클릭률과 체류 시간이 모두 증가한 것으로 보아 시각적 개선이 효과적이었음을 확인했습니다.팀 전체가 효과를 인정하고 전사 배포를 결정했고, 배포 후에도 프리미엄 플랜 선택률이 지속적으로 높게 유지되었습니다. PM과 함께 분석한 결과, 사용자들이 부스트 플랜의 가치를 더 명확히 이해하면서 '나에게 필요한 플랜'이라는 확신을 가지고 선택하게 된 것으로 판단했습니다.

Legion Collective

Senior Developer

Aug 2022 ~ Jul 2024

기술 스택: Next.js, GraphQL, Headless CMS, Vanilla JS, Optimization

• Monolith to Headless Migration & Performance Tuning:
  • 문제 정의: 기존 PHP 모놀리식 구조에서 매 요청마다 발생하는 DB 조회 및 HTML 생성으로 인해 LCP가 평균 4초에 달하는 것을 확인했습니다. 또한, REST API의 데이터 오버페칭으로 인해 과도한 데이터가 전송되었으며, 사이트의 Lighthouse 점수는 88점으로 측정되는 문제를 지표로 확인했습니다.
  • 개선 목표: 서버의 실시간 연산을 제거하는 정적 페이지 생성(SSG) 방식과 필요한 데이터만 선택적으로 호출하는 GraphQL을 도입하면, LCP를 1초대로 단축하고 페이로드를 절감하여 사용자 경험을 획기적으로 개선할 수 있을 것이라 가설을 세웠습니다.
  • 구현: PHP 최적화나 SEO 및 초기 로딩에 취약한 CSR 방식 대신, Next.js와 Craft CMS(Headless) 조합의 아키텍처를 설계했습니다. 빌드 시점에 GraphQL로 데이터를 최적화하여 정적 페이지를 생성하고, 에셋같은 부분은 webp 포멧을 사용하는 등 최적화를 진행했습니다.
  • 검증 및 결과: 실험 결과 LCP 1.84초로 약 54% 단축되었고, 전체적인 사이트의 로딩속도가 2초 감소하였습니다. 최종적으로 Lighthouse 성능 점수는 92점으로 상승했으며, 목표했던 성능 지표를 모두 달성했음을 검증했습니다. 아키텍처 전환 후 전면 배포를 진행했으며, "사이트가 완전히 다른 서비스처럼 빨라졌다"는 클라이언트의 긍정적인 피드백과 함께 서비스 체감 속도 향상이라는 성과를 거두었습니다.

Junior Developer

July 2019 ~ Aug 2022

기술 스택: Angular, Laravel

• 설문조사 데이터 시각화 플랫폼 개발:
  • 설문 응답 데이터를 직관적인 차트로 시각화하는 프론트엔드 로직을 구현하고, Page Transition을 적용하여 페이지 전환 시 끊김 없는 사용자 경험(SPA)을 제공했습니다.
• E-Commerce 결제 모듈 확장:
  • 기존 레거시 시스템에 PG사 연동 및 결제 프로세스를 확장 개발하며, 결제 완료까지의 전체 UI/UX 흐름을 개선했습니다.

Awards

Facebook Developer Community Hackathon - Winner

Nov 2019

• 페이스북 주최 해커톤 생산성/유틸리티 부문 우승
• React.js 기반의 위치 기반 음식점 추천 챗봇 개발

Education

School of the Art Institute of Chicago

2012 ~ 2019 / BFA (Bachelor of Fine Arts)