웹과 모바일을 함께 다뤄온 프론트엔드 개발자
Next.js 기반의 사용자·관리자 웹과 Flutter 모바일 앱을 개발했습니다. WebView와 네이티브 기능을 연결하며 브라우저 안에서 끝나지 않는 프론트엔드를 경험했습니다.
보이는 화면 아래의 문제까지 바라보는 프론트엔드 개발자 김예지입니다.
Frontend Developer
Next.js 기반의 사용자·관리자 웹과 Flutter 모바일 앱을 개발했습니다. WebView와 네이티브 기능을 연결하며 브라우저 안에서 끝나지 않는 프론트엔드를 경험했습니다.
사용자 서비스뿐 아니라 관리자 페이지, 좌석 모니터링, 업로드 복구 기능을 개발했습니다. 서비스를 사용하는 사람과 운영하는 사람 양쪽의 흐름을 경험했습니다.
녹화·업로드처럼 기기 성능과 네트워크, 파일 형식에 영향을 받는 기능을 다뤘습니다. 프론트엔드 코드뿐 아니라 API 요청과 로그, 실제 사용 환경을 함께 확인하며 문제의 조건을 좁혀왔습니다.
Frontend Developer
소규모 개발팀에서 Web / Mobile 서비스의 프론트엔드 개발 및 운영을 담당했습니다.
React · Next.js · TypeScript · Flutter · WebView · Zustand · React Query · AWS · Vercel
보이는 현상에서 시작해 더 아래의 원인과 구조를 확인하고 바꾼 과정을 정리했습니다.
온라인·오프라인 게임 테스트 데이터 수집 및 운영 시스템
데이터 수집부터 안정적인 녹화와 업로드, 글로벌 UX, 오프라인 환경과 현장 운영까지 확장된 FGT 시스템을 개발했습니다.
기능 성공보다 다시 얻기 어려운 플레이 데이터의 보존을 우선했습니다.Flutter · Android Native · ADB · scrcpy · FFmpeg · S3 · Multipart Upload · Next.js
Case study
ONLINE FGT — Android → Mobile Launcher → Recording / Upload → Analysis & Report
OFFLINE FGT — Android → PC Launcher → ADB / scrcpy → Recording / Touch Data → Analysis & Report
Screen, Camera, Game Audio, Mic, Device Stats, Touch를 분석 목적에 따라 독립적으로 수집하고 동일한 플레이 세션 시간축으로 동기화했습니다.
하나의 파일보다 관리 복잡도는 증가하지만 후처리와 분석, 리포트 조합의 자유도를 위해 분리 수집을 선택했습니다.
사용자가 이미 플레이한 데이터는 다시 얻기 어렵기 때문에 기능 성공 자체보다 원본 데이터 보존을 우선했습니다.
기존 서비스의 5분 grace period를 실제 사용자 피드백에 따라 1분으로 조정했고, 이 운영 경험을 이후 런처 설계에도 재사용했습니다.
Multipart Upload의 part retry, 네트워크 중단 대기·재개, 실패 파일 보존과 재전송 흐름을 구성했습니다.
일부 기기의 TS → MP4 변환 정지에는 timeout 후 Original TS를 업로드하고 로그를 남겨 데이터를 복구했습니다.
반복되는 수동 복구 작업은 Admin → Local Backend → FFmpeg → Re-upload 도구로 전환했습니다. 서버 리소스 제약 속에서 직접 통제 가능한 로컬 도구로 운영 문제를 먼저 제거한 선택입니다.
제조사와 OS에 따라 다른 권한 상태를 고려해 부족한 권한과 ‘다시 묻지 않음’을 구분하고 필요한 경우 시스템 설정으로 연결했습니다.
터치 수집은 제조사마다 설정 위치가 다른 개발자 옵션 방식에서 투명 Overlay 방식으로 변경해 글로벌 사용자의 준비 과정을 줄였습니다.
정확한 터치 좌표와 외부 카메라 등 더 풍부한 데이터가 필요한 오프라인 환경을 위해 기존 PC Launcher에 Mobile FGT Process를 추가했습니다.
운영자가 좌석을 직접 돌며 확인하던 방식을 개선하기 위해 상태 데이터를 정의하고 백엔드와 협의해 Seat Monitoring Frontend를 구현했습니다.
온라인은 참여 시간과 네트워크가 제각각이므로 불필요한 상태 전송을 끄고, 여러 좌석을 동시에 운영하는 오프라인에서만 실시간 상태 전송을 사용했습니다.
실제 운영 중인 게임 테스트 플랫폼
게임 테스트, 설문, 프로필, 리워드, 관리자와 글로벌 운영 기능을 개발하고 Web과 Native의 책임 경계를 설계했습니다.
변경이 잦은 서비스 로직은 Web에, 기기 의존 기능은 Native에 두었습니다.Next.js · TypeScript · React Query · Zustand · Flutter · WebView
Case study
실제 운영 중인 제품의 규모와 Frontend 개발·운영 경험을 보여주는 프로젝트입니다.
Flutter Only 구조에서는 서비스 수정마다 앱 빌드와 Store 배포가 필요했습니다. 변경이 잦은 UI와 서비스 로직은 Next.js WebView로, 기기 기능은 Native Shell로 분리했습니다.
고해상도 이미지와 HEIC 문제에서는 사진 획득·기기 처리는 Native가 담당하고 공통 업로드·서비스 로직은 Web에 유지했습니다. 업로드 전체를 Native로 옮길 경우 수정마다 앱 업데이트가 필요하기 때문입니다.
기존 영상 업로드의 Presigned URL 구조를 게임 빌드에도 적용해 사업팀이 관리자 페이지에서 직접 업로드하도록 제안하고 구현했습니다. 그 결과 주 1~2회 발생하던 개발팀 업로드 요청이 없어졌습니다.
수집한 데이터를 분석과 리포트로 연결
게임 테스트에서 독립적으로 수집한 데이터를 사용자가 이해할 수 있는 리포트와 공통 Timeline으로 연결했습니다.
AI 결과를 그대로 적용하지 않고 사람이 검토하고 수정할 수 있는 인터페이스를 설계했습니다.Next.js · FastAPI · OpenCV · MediaPipe · FFmpeg · pandas
Case study
FGT Launcher의 데이터 수집 → 동일 시간축 분석 → 사용자가 이해할 수 있는 리포트로 이어지는 흐름입니다.
Screen, Camera, Audio, Device Stats와 Survey를 플레이 데이터, 사용자 반응, Headline Score와 First Impression 등 이해 가능한 형태로 시각화했습니다.
Screen, Camera, Audio, Stats CSV와 AI Result를 하나의 Shared Timeline에 결합했습니다.
AI가 삭제 후보 구간을 제안하면 사용자가 직접 검토하고 수정한 뒤 일괄 Export할 수 있도록 했습니다.
[한 줄 설명 및 수상 내용 확인 필요]
SSAFY 프로젝트 / 수상React · Redux · PWA · FCM · BLE
3D Web Optimization 프로젝트
[이미지 및 한 줄 설명 보완 필요]React Three Fiber · Blender
[한 줄 설명 보완 필요]
Git 동작 원리 구현JavaScript
[한 줄 설명 보완 필요]
[이미지 보완 필요]TypeScript · Phaser