최종은

Skills

기술 스택

Demos

인터랙티브 데모

직접 설계하고 구현한 코드 데모입니다. 아홉 개 모두 라이브로 열려 있고, 화면만이 아니라 API, 저장, 정책까지 직접 만든 것이 일곱 개입니다.

1. 01

   Frontend

   거래소 목업

   실무에서 호가창을 10단->20단으로 늘리고 차트를 옮겼던 작업을 공개 가능한 형태로 다시 만들었습니다. Mock 스트림이 시세/분봉/호가를 함께 갱신하고, 스탑 주문은 새 엔진이 아니라 체결 상태기계의 트리거 상태로 넣었습니다. 거래 화면과 입출금/보유자산까지 세 화면입니다.

   Next.js 16React 19TypeScriptlightweight-chartszustand실시간 Mock

   

   로컬
2. 02

   Full-stack · AI

   AI 챗봇

   실시간 UI 는 데모에서만 잘 돌고 실제 네트워크에서 깨집니다. 전송 계층만 바꿔 Mock / 실제 SSE / 실제 LLM(서버에 키가 있을 때만) 을 오가도록 경계를 그었고, 마크다운은 걸러내는 대신 파싱하지 않아 안전 경계를 좁혔습니다. 연속 요청은 토큰 버킷으로 막고 남은 시간을 화면에 돌려줍니다.

   Next.js 16React 19TypeScriptSSEClaude API 키 게이트대화 검색접근성

   

   로컬
3. 03

   Backend / AI

   대출 서류 분류 파이프라인

   수십 장짜리 대출 서류 뭉치는 순서 없이 스캔되어 들어옵니다. 페이지마다 유형을 판별하고 흩어진 문서를 다시 묶는 파이프라인입니다. 표준 양식의 고정 문구를 룰로 먼저 확정하고 룰이 못 정한 페이지만 AI 에 맡겨, 모든 판정에 페이지 단위 근거가 남습니다. 동봉된 합성 샘플로 한 클릭이면 결과가 보입니다.

   Python 3FastAPIpypdf룰 + LLM 폴백 하이브리드속성 기반 테스트결정적 산출물

   

   로컬
4. 04

   Frontend / App

   실시간 관심종목 (Flutter)

   2,000종목이 초당 최대 15,000건씩 갱신되는 관심종목 목록입니다. tick 은 도착 즉시 상태에 반영해 정합성을 지키고, 화면 통지만 종목 단위로 격리해 rebuild 는 보이는 행의 몫만 일어납니다. 상단 계측이 유입 대비 rebuild 의 격차를 실시간으로 보여주고, 순진 구현(baseline)과의 프레임 실측 비교를 문서로 공개합니다.

   Flutter 3.44Dart런타임 패키지 0개종목별 ValueListenable결정론 벤치마크CustomPainter

   

   로컬
5. 05

   Full-stack

   문서 근거 QA (검색 + 추출형 MRC)

   업무에 쓸 답변이라면 지어냈는지를 판별할 수 있어야 합니다. 그래서 생성이 아니라 근거 문장을 그대로 인용하는 추출로 만들고, 근거가 약하면 답하지 않게 했습니다. 골드셋 33문항에서 불응답 정확도 100%, 품질 지표 화면에서 임계값을 밀면 정확도와 응답률이 어떻게 갈리는지 직접 볼 수 있습니다.

   Next.js 16React 19TypeScriptTF-IDF 검색MRC 추출SSE 스트리밍

   

   로컬
6. 06

   Full-stack

   시맨틱 검색

   검색이 좋아졌다는 말은 체감으로 우기기 쉽습니다. 동의어 확장이 정확도를 올린다는 주장을 키워드 모드와 같은 골드셋으로 나란히 재서 숫자로 답합니다. 임베딩 없이 결정적으로 도는 대신, 값을 하는지는 측정이 판정합니다.

   Next.js 16React 19TypeScript동의어 확장결정적 랭킹

   

   로컬
7. 07

   Backend

   파일 확장자 차단

   파일 업로드는 흔한 침입 경로인데 확장자 검사는 이름만 바꾸면 뚫립니다. 그래서 내용으로 막습니다. Tika 판별과 컨테이너 탐지로 위장 파일을 잡고, 파싱은 동시 상한을 둔 벌크헤드 안에서만 돌려 한 요청이 전체를 굶기지 못하게 했습니다.

   Spring Boot 4Java 21MySQLjQuery 4Apache Tika분산 락

   

   로컬
8. 08

   Backend

   IP 차단

   차단 규칙에는 늘 예외가 붙고, 예외가 붙는 순간 왜 막혔는지 아무도 모릅니다. 허용 목록이 아니라 정책 엔진으로 만든 이유입니다. 시뮬레이터에 IP 를 넣으면 어떤 규칙이 왜 이겼고 나머지는 왜 건너뛰었는지 평가 순서대로 보이고, 시점을 옮기면 판정이 달라집니다.

   Spring Boot 4Java 21MySQLjQuery 4키셋 페이지네이션정책 평가UTC 저장/기기 TZ 표기

   

   로컬
9. 09

   Backend

   작업 릴레이

   재시도는 붙이기 쉽지만, 같은 작업이 두 번 실행되는 순간 장애가 됩니다. 중복 예약은 멱등키로 막고, 워커 경쟁은 SKIP LOCKED 리스로 가르고, 저장은 롤백됐는데 완료 이벤트만 나가는 유령은 아웃박스 발행으로 없앴습니다. 실패가 시드 기반이라 같은 실패 타임라인을 몇 번이고 재현할 수 있습니다.

   Spring Boot 4Java 21MySQLjQuery 4SKIP LOCKED 리스아웃박스 패턴결정적 재생

   

   로컬

그 위에 도구를 쓰는 에이전트가 위 데모들(문서 검색, 근거 QA, IP 접근 제어)을 도구로 불러 다단계 과제를 풉니다. 실행 전체가 span 트리로 남고, 도구가 실패한 실행과 예산에 걸려 멈춘 실행도 같은 방식으로 되짚습니다. 그 위에 같은 과제를 지시 두 종으로 세 번씩 돌려, 통과율 차이가 잡음과 구분되는지 판정하는 화면을 두었습니다. 사용자가 쓴 문서에 심긴 지시가 부작용 도구를 부르려 할 때 무엇이 막는지도, 방어를 끄고 켠 같은 실행을 나란히 놓고 보여 줍니다.

덧붙여 문서QA 는 골드셋 33문항으로 잰 정확도와 스스로 틀린 건수까지 공개하는 품질 지표 화면을 따로 두고 있습니다.

실행 영상 배포에는 API 키를 두지 않아 실시간 호출은 로컬에서만 돕니다. 키를 넣고 돌린 장면을 짧게 남겼습니다.

Experience

경력 & 대표 프로젝트

프라뱅 2025.10 - 2026.08 (11개월)

IT개발부 과장/Front-end 파트장/Full-stack

블록체인 가상자산거래소. 15명 규모 개발 조직에서 프론트엔드 파트 5명을 리딩하며 백엔드 8명과 협업했습니다. 웹, 백오피스, 모바일 앱, 백엔드 API 네 시스템을 관통해 개발했고, 중단됐던 서비스를 USDT 마켓 등 신규 기능과 함께 재설계해 2026.02 재런칭했습니다.

개인 커밋 1,700+ (약 36%) jQuery 2 -> jQuery 4 + TS 전면 전환 2026.02 재런칭

대표 프로젝트

거래소 프론트엔드 현대화Frontend / 성능

문제

10년 된 jQuery 2 레거시로 로딩이 느리고 성능 점수가 60점대에 머물렀습니다.

해결

jQuery 4 + TypeScript로 전면 전환하고, Webpack 번들 통합(layout 4->1, exchange 6->1), Brotli 사전압축, 이미지 최적화(SVG->WebP, 3.9MB->278KB)를 함께 적용했습니다.

결과

전송량 최대 86% 절감, Lighthouse 성능 60->99, SEO 80->100을 달성했고, 개인 커밋 1,700+로 2026.02 재런칭했습니다.

-86% 전송량60->99SEO 80->100

금융앱 보안 & 하이브리드 아키텍처Mobile / 보안

문제

앱 탭 전환이 3~5초 지연되고, 금융 보안 위협(MITM, 생체인증 레이스)과 콜드스타트 무한대기 장애가 있었습니다.

해결

Flutter 멀티웹뷰 아키텍처와 JS-Native 브릿지를 설계하고, SSL 검증 강제(MITM 방어), 생체인증 TOCTOU 뮤텍스 해소, freeRASP 디바이스 무결성을 적용했습니다.

결과

탭 전환을 3~5초 -> 즉시로 줄이고 콜드스타트 장애를 해소했으며, 2026.06 ISMS 갱신 심사에 대응했습니다.

3~5s -> 0sMITM 방어ISMS 대응

실시간 거래 인프라 & 차트Realtime / 인프라

문제

실시간 시세와 호가 갱신이 지연되고 차트가 구버전이며 호가창 깊이가 얕았습니다.

해결

WebSocket(STOMP) 델타 렌더링, TradingView 차트 v26->v31 마이그레이션, 호가창 10단->20단을 프론트부터 백엔드 Controller/Repository까지 관통해 구현했습니다.

결과

지연 없는 실시간 시세 UI와 20단 호가를 제공하고, 백오피스 보안 인프라(서블릿 필터 + Spring Session, jsoup XSS Sanitizer)까지 직접 설계했습니다.

10->20단 호가STOMP 델타v26->v31

pravang.com 바로가기 ↗

트윙플 (달라라네트워크) 2021.04 - 2024.11, 3년 8개월

Front-end 전담/QA, PM 겸임

K-pop 비대면 오디션 앱. 해외 유저가 75% 이상인 서비스에서 프론트엔드를 전담하며 QA/PM 을 겸임했습니다. 상세는 아래 대표 프로젝트에 적었습니다.

글로벌 다운로드 50만+ 해외 유저 75%+ 다국어 i18n 초기 설계 Flutter 포팅 / Vertex AI

대표 프로젝트

글로벌 K-pop 오디션 플랫폼Frontend / Global

문제

해외 유저 75% 이상인 K-pop 비대면 오디션 앱을 프론트엔드 전반에서 구현하고, 오디션 평가 등 운영을 자동화해야 했습니다.

해결

Angular, TypeScript, SCSS 로 오디션 접수, 영상 챌린지, 커뮤니티, 실시간 방송 투표, 해외 결제까지 프론트엔드 전체를 구현하고, 다국어(i18n)를 초기 설계에 반영했습니다. 마지막 6개월은 Flutter 포팅과 오디션 평가 Vertex AI 자동화를 이끌었습니다.

결과

글로벌 다운로드 50만+, 해외 유저 75%+ 환경을 안정적으로 지원했습니다.

50만+ 다운로드해외 75%+i18n / Vertex AI

twinkple.com 바로가기 ↗

소행성 (드림스푼스튜디오) 2018.04 - 2021.04, 3년 1개월

Front-end 전담/기획, QA, PM 겸임

GPS 기반 취미모임 앱. 기획자와 디자이너 없이 콘셉트 기획부터 UI/UX, 프론트엔드까지 혼자 맡았습니다.

다운로드 10만+ 1인 기획 + FE 전담 위치 기반 / 실시간 채팅

대표 프로젝트

1인 기획 / FE GPS 취미모임 앱Product / Frontend

문제

기획자/디자이너 없이 GPS 기반 취미모임 앱을 서비스 콘셉트부터 UI/UX, 프론트엔드까지 혼자 완성해야 했습니다.

해결

서비스 콘셉트 기획과 UI/UX 설계를 직접 수행하고, Angular, TypeScript 로 위치 기반 모임 탐색, 채팅 커뮤니티, 구독 기능을 구현했으며, GPS 네이티브는 Cordova로 연동했습니다.

결과

다운로드 10만+, 1인 기획 겸 프론트엔드 전담으로 서비스를 완주했습니다.

10만+ 다운로드1인 기획 + FE위치 기반 / 실시간 채팅

dreamspoon.net 바로가기 ↗

아키에이지 (엑스엘게임즈 - 카카오게임즈) 2012.11 - 2017.11, 5년 1개월

System QA (3년)->Tech PM (2년 1개월)

최고 동시접속 20만, 글로벌 누적 2,000만 가입 규모의 PC MMORPG 라이브 서비스. DB Log 인증 서버 등 인프라를 테스트하고 각 팀 산출물을 검수한 뒤 직접 빌드 배포했습니다. Tech PM 전향 후에는 일본 대만 미국 러시아 고객사를 대응하며 현지화 개발 일정을 조율했습니다.

최고 동시접속 20만 누적 가입 2,000만 글로벌 4개국 고객사 대응

대표 프로젝트

글로벌 라이브 서비스 품질 & 조율Global / QA to PM

문제

동시접속 20만 규모 MMORPG의 품질 검증과 다국가 현지화 일정 조율이 필요했습니다.

해결

DB Log 인증 서버 인프라 QA와 산출물 검수 후 직접 빌드 배포했고, Tech PM 전향 후 일본 대만 미국 러시아 4개국 고객사의 현지화 개발 일정을 조율했습니다.

결과

동시접속 20만, 누적 가입 2,000만 규모의 라이브 서비스를 안정적으로 운영 지원했습니다.

20만 동시접속2,000만 누적가입4개국 고객사

archeage.com 바로가기 ↗

Contact

연락처

프론트엔드와 서버를 함께 볼 사람이 필요한 자리라면 언제든 연락 주세요. 이 페이지와 데모 아홉 개의 코드가 GitHub 에 열려 있고, 설계 판단과 하지 않은 선택의 이유는 각 README 에 있습니다.