브라우저의 저장 대상을 “PDF로 저장”으로 선택해주세요.

PORTFOLIO

Frontend Developer

김예지

보이는 화면 아래의 문제까지 바라보는 프론트엔드 개발자 김예지입니다.

EMAILmeme117.dev@gmail.comGITHUBhttps://github.com/gimezi
YeJi Kim Portfolio01 / 16
01

About Me

웹과 모바일을 함께 다뤄온 프론트엔드 개발자

Next.js 기반의 사용자·관리자 웹과 Flutter 모바일 앱을 개발했습니다. WebView와 네이티브 기능을 연결하며 브라우저 안에서 끝나지 않는 프론트엔드를 경험했습니다.

사용자 화면과 운영 도구를 함께 만들었습니다

사용자 서비스뿐 아니라 관리자 페이지, 좌석 모니터링, 업로드 복구 기능을 개발했습니다. 서비스를 사용하는 사람과 운영하는 사람 양쪽의 흐름을 경험했습니다.

실행 환경에 따라 달라지는 문제를 해결해왔습니다

녹화·업로드처럼 기기 성능과 네트워크, 파일 형식에 영향을 받는 기능을 다뤘습니다. 프론트엔드 코드뿐 아니라 API 요청과 로그, 실제 사용 환경을 함께 확인하며 문제의 조건을 좁혀왔습니다.

02

Experience

[현재 회사명]

Frontend Developer

소규모 개발팀에서 Web / Mobile 서비스의 프론트엔드 개발 및 운영을 담당했습니다.

  • React / Next.js 기반 웹 서비스 개발 및 운영
  • Flutter 기반 모바일 앱과 WebView / Native 연동 개발
  • 관리자 페이지, 리포트, 데이터 시각화 및 운영 도구 개발
  • 사용자 이슈와 서비스 장애의 원인 추적
  • Android / iOS 환경 차이 및 다국어 서비스 대응
  • 요구사항 구체화, API 인터페이스 협의 및 UI/UX 구현
YeJi Kim Portfolio02 / 16
03

KOCCA 글로벌 게임 FGT 시스템

온라인·오프라인 게임 테스트 데이터 수집 및 운영 시스템

기능 성공보다 다시 얻기 어려운 플레이 데이터의 보존을 우선했습니다.

[기간 확인 필요]Mobile Launcher 전체 개발 · PC Launcher Mobile FGT Process · Seat Monitoring Frontend · 관리자·복구 도구
[FGT system overview]

ONLINE FGT — Android → Mobile Launcher → Recording / Upload → Analysis & Report

OFFLINE FGT — Android → PC Launcher → ADB / scrcpy → Recording / Touch Data → Analysis & Report

Flutter · Android Native · ADB · scrcpy · FFmpeg · S3 · Multipart Upload · Next.js

YeJi Kim Portfolio03 / 16
03

Mobile Launcher — Multi-source Recording

KOCCA 글로벌 게임 FGT 시스템

Mobile Launcher — Multi-source Recording

Screen, Camera, Game Audio, Mic, Device Stats, Touch를 분석 목적에 따라 독립적으로 수집하고 동일한 플레이 세션 시간축으로 동기화했습니다.

하나의 파일보다 관리 복잡도는 증가하지만 후처리와 분석, 리포트 조합의 자유도를 위해 분리 수집을 선택했습니다.

  • Screen — 게임 행동 분석
  • Camera — 표정과 사용자 반응
  • Device Stats — 플레이 화면과 기기 상태
  • 공통 Session Timeline
[Multi-source recording diagram]
YeJi Kim Portfolio04 / 16
03

Reliable Recording — 데이터가 사라지지 않게

KOCCA 글로벌 게임 FGT 시스템

Reliable Recording — 데이터가 사라지지 않게

사용자가 이미 플레이한 데이터는 다시 얻기 어렵기 때문에 기능 성공 자체보다 원본 데이터 보존을 우선했습니다.

기존 서비스의 5분 grace period를 실제 사용자 피드백에 따라 1분으로 조정했고, 이 운영 경험을 이후 런처 설계에도 재사용했습니다.

  • TS 기반 임시 녹화
  • 비정상 종료 원본 보존
  • Orphan recording recovery
  • Foreground package 감지
  • 1분 grace period
  • Preview timeout
  • Original TS fallback
YeJi Kim Portfolio05 / 16
03

Reliable Upload & Recovery

KOCCA 글로벌 게임 FGT 시스템

Reliable Upload & Recovery

Multipart Upload의 part retry, 네트워크 중단 대기·재개, 실패 파일 보존과 재전송 흐름을 구성했습니다.

일부 기기의 TS → MP4 변환 정지에는 timeout 후 Original TS를 업로드하고 로그를 남겨 데이터를 복구했습니다.

반복되는 수동 복구 작업은 Admin → Local Backend → FFmpeg → Re-upload 도구로 전환했습니다. 서버 리소스 제약 속에서 직접 통제 가능한 로컬 도구로 운영 문제를 먼저 제거한 선택입니다.

  • S3 Multipart Upload
  • Part Retry
  • Unsent / Upload History
  • Device / Network / Session Log
[Upload and recovery flow]
YeJi Kim Portfolio06 / 16
03

Global Android UX

KOCCA 글로벌 게임 FGT 시스템

Global Android UX

제조사와 OS에 따라 다른 권한 상태를 고려해 부족한 권한과 ‘다시 묻지 않음’을 구분하고 필요한 경우 시스템 설정으로 연결했습니다.

터치 수집은 제조사마다 설정 위치가 다른 개발자 옵션 방식에서 투명 Overlay 방식으로 변경해 글로벌 사용자의 준비 과정을 줄였습니다.

  • Permission flow
  • System settings fallback
  • Transparent touch overlay
  • 다국어 UI
YeJi Kim Portfolio07 / 16
03

Offline Mobile FGT & Seat Monitoring

KOCCA 글로벌 게임 FGT 시스템

Offline Mobile FGT & Seat Monitoring

정확한 터치 좌표와 외부 카메라 등 더 풍부한 데이터가 필요한 오프라인 환경을 위해 기존 PC Launcher에 Mobile FGT Process를 추가했습니다.

운영자가 좌석을 직접 돌며 확인하던 방식을 개선하기 위해 상태 데이터를 정의하고 백엔드와 협의해 Seat Monitoring Frontend를 구현했습니다.

온라인은 참여 시간과 네트워크가 제각각이므로 불필요한 상태 전송을 끄고, 여러 좌석을 동시에 운영하는 오프라인에서만 실시간 상태 전송을 사용했습니다.

  • ADB getevent → X/Y → down/move/up → drag → touch_log.csv
  • 좌석별 상태 색상
  • 상세 정보
  • 5초 Polling
[Offline FGT / Seat Monitoring screenshot]
YeJi Kim Portfolio08 / 16
03

Plithus Web & Hybrid App

실제 운영 중인 게임 테스트 플랫폼

변경이 잦은 서비스 로직은 Web에, 기기 의존 기능은 Native에 두었습니다.

[기간 확인 필요]Web Frontend · Flutter / WebView · Service Operation
[Plithus web / app screens]

실제 운영 중인 제품의 규모와 Frontend 개발·운영 경험을 보여주는 프로젝트입니다.

Next.js · TypeScript · React Query · Zustand · Flutter · WebView

YeJi Kim Portfolio09 / 16
03

Flutter → Next.js WebView

Plithus Web & Hybrid App

Flutter → Next.js WebView

Flutter Only 구조에서는 서비스 수정마다 앱 빌드와 Store 배포가 필요했습니다. 변경이 잦은 UI와 서비스 로직은 Next.js WebView로, 기기 기능은 Native Shell로 분리했습니다.

고해상도 이미지와 HEIC 문제에서는 사진 획득·기기 처리는 Native가 담당하고 공통 업로드·서비스 로직은 Web에 유지했습니다. 업로드 전체를 Native로 옮길 경우 수정마다 앱 업데이트가 필요하기 때문입니다.

  • Flutter Native Shell
  • Next.js WebView
  • Web / Native 책임 분리
  • WebView 종료 후 진행 상태 복구
[Web / Native responsibility diagram]
YeJi Kim Portfolio10 / 16
03

Operation Improvements

Plithus Web & Hybrid App

Operation Improvements

기존 영상 업로드의 Presigned URL 구조를 게임 빌드에도 적용해 사업팀이 관리자 페이지에서 직접 업로드하도록 제안하고 구현했습니다. 그 결과 주 1~2회 발생하던 개발팀 업로드 요청이 없어졌습니다.

  • 중복 제출 / 멱등키 문제 해결
  • HEIC / WebView 대응
  • 운영 관리자 기능
  • 다국어
YeJi Kim Portfolio11 / 16
03

Game Data Report

Game Test Data & AI Report

게임 테스트에서 독립적으로 수집한 데이터를 사용자가 이해할 수 있는 리포트와 공통 Timeline으로 연결했습니다.

Game Data Report

Screen, Camera, Audio, Device Stats와 Survey를 플레이 데이터, 사용자 반응, Headline Score와 First Impression 등 이해 가능한 형태로 시각화했습니다.

[Report UI and data visualization]

Next.js · FastAPI · OpenCV · MediaPipe · FFmpeg · pandas

YeJi Kim Portfolio12 / 16
03

Shared Timeline & AI Analysis

Game Test Data & AI Report

Shared Timeline & AI Analysis

Screen, Camera, Audio, Stats CSV와 AI Result를 하나의 Shared Timeline에 결합했습니다.

AI가 삭제 후보 구간을 제안하면 사용자가 직접 검토하고 수정한 뒤 일괄 Export할 수 있도록 했습니다.

  • Raw data → Shared Timeline
  • AI suggestion → Human review
  • Review → Batch export
[Shared Timeline / AI analysis UI]
YeJi Kim Portfolio13 / 16
03

Other Projects

01

Be-Fresh!

[한 줄 설명 및 수상 내용 확인 필요]

SSAFY 프로젝트 / 수상

React · Redux · PWA · FCM · BLE

02

나여

3D Web Optimization 프로젝트

[이미지 및 한 줄 설명 보완 필요]

React Three Fiber · Blender

03

Git 구현

[한 줄 설명 보완 필요]

Git 동작 원리 구현

JavaScript

04

Personal Web Game

[한 줄 설명 보완 필요]

[이미지 보완 필요]

TypeScript · Phaser

YeJi Kim Portfolio14 / 16
04

Education

Education & Training

홍익대학교 · 기계시스템디자인공학과

삼성 청년 SW 아카데미 · SSAFY

네이버 부스트캠프 챌린지

Certifications

OPIc · IH

정보처리기사

SQL 개발자 · SQLD

YeJi Kim Portfolio15 / 16
05

Contact

Frontend Developer

김예지