PoC 성공 후 정식 서비스로 재구축. Turborepo 기반 모노레포 환경에서 키오스크 웹(React) 프론트엔드 개발 담당

동적 테마 시스템 구현으로 서버 colorCustomization API 연동, 행사별 브랜드 색상 실시간 반영

PRD 작성부터 참여해 PoC 운영 경험 기반 pain point 공유 및 요구사항 정의

영상 콘텐츠에 타임스탬프 기반 피드백(댓글, 드로잉)을 남길 수 있는 협업 플랫폼

서비스 확장성을 고려해 Vue에서 React로 전면 마이그레이션 주도. Fabric.js는 명령형 API라 React와 맞지 않아 react-konva로 전환하여 드로잉 요소를 선언적으로 관리

Undo/Redo 히스토리 관리, 반응형 좌표 정규화(originalWidth/Height 저장) 등 드로잉 시스템 구축

YouTube IFrame API의 CUED 상태 pause 제약 우회, 60fps 영상 프레임 정밀도 개선(±30 → ±6프레임) 등 영상 플레이어 최적화

iOS Safari 키보드 레이아웃(Visual Viewport API), IME 한글 입력 이중 발생(isComposing) 등 모바일 이슈 해결

Socket.io 이벤트 수신 시 React Query 캐시 무효화로 댓글/드로잉 실시간 반영

Feature → Domain 폴더 구조 전환, 모드 상태 enum 통합 등 아키텍처 개선

LCP 이미지 priority 적용으로 Lighthouse Performance 93 → 98, LCP 1.7s → 1.2s (29% 개선)

오프라인 포토부스 키오스크 서비스. PoC로 시작해 15개+ B2B 행사(Frieze Seoul, 스마일게이트, 경북대 대동제 등)를 성공적으로 운영하며 서비스 검증

AWS CloudWatch 로그 분석으로 MySQL 커넥션 풀 고갈 원인 파악, AI 서버 응답 지연 시 DB 커넥션 미반환 문제를 Spring Boot 코드 수정 및 EC2 재배포로 해결

Canvas API + WebP 압축으로 이미지 용량 70% 감소, Promise.all 병렬 업로드로 대기 시간 단축

AI 응답 최대 10분 소요 중 새 세션 시작 시 이전 결과가 덮어씌우는 Stale Response 버그를 sessionId 기반 요청 검증으로 해결

KIS VAN사 결제 단말기 WebSocket 연동으로 실시간 결제 승인 처리, 연결 끊김 재시도/타임아웃 등 엣지 케이스 대응

block-theme-frame 계층 구조로 58개 프레임/38개 테마 운영, 새 행사 추가 시 DB INSERT만으로 대응 가능한 확장성 확보

RSS 기반 기술 블로그 큐레이션 플랫폼. 부스트캠프 이후에도 지속 기여 가능한 서비스를 만들고자 큐레이션 플랫폼 제안

Scroll Event 메인 스레드 블로킹 문제를 Intersection Observer API로 해결, useInfiniteQuery와 조합해 무한 스크롤 구현

LazyImage 컴포넌트: Intersection Observer + rootMargin으로 뷰포트 진입 전 이미지 선로딩

RSS 등록 시 블로그 URL만 입력하면 정규표현식으로 플랫폼 자동 감지 후 RSS URL 변환

OAuth(Google, GitHub) 로그인, JWT 토큰 기반 인증 상태 관리, 메일 인증 플로우 구현

Pn룰 코드리뷰 도입으로 리뷰어 의도 명확히 전달, 데일리 스크럼/주간 기술 세미나로 협업 문화 정착

React 동작 원리 이해를 위해 TypeScript로 Virtual DOM 직접 구현

createElement(JSX→ReactElement), diff(key 기반 Reconciliation), createDomNode(VNode→DOM) 구현

WeakMap 기반 useState로 컴포넌트별 상태 격리 구현

Trello 스타일 칸반 보드. 프레임워크 없이 Vanilla JS로 상태 관리와 아키텍처 설계 경험

옵저버 패턴 상태 관리: CardStore에 subscribe/notify 구현, 상태 변경 시 자동 UI 업데이트

Express.js + MySQL로 Controller-Service-Repository 3계층 아키텍처 설계, Card CRUD API 구현

19일간 매일 다른 CS 주제(이벤트 루프, Git 내부 동작, 소켓 프로그래밍 등)를 직접 구현하며 학습

Git add/commit 동작을 fileRead/fileWrite로 구현하며 저수준 파일 시스템 이해

EventEmitter 기반 pub/sub 패턴 구현으로 Node.js 비동기 처리 메커니즘 학습

매일 학습 내용을 나만의 언어로 문서화, 피어세션에서 동료 학습에 기여

2년 연속 학교 축제 안내 웹 서비스 기획부터 개발, 운영까지 담당. React + TypeScript + Vite 기반

2024년: 부스 정보, 공연 일정, 타임테이블 등 핵심 기능 개발 (1.1만 명 이용, 23만 이벤트)

2025년: 전화번호 기반 대기 순서 조회로 수기 관리 대체 (7.2천 명 이용, 27만 이벤트)

부스 운영자 전용 관리자 페이지 구축, 웨이팅 등록/대기/완료 목록 탭으로 운영 효율화

네이버 지도에 Zone polygon 렌더링, 부스 검색 시 자동 줌 및 해당 Zone 하이라이트

proj4로 네이버 지도 좌표계(EPSG:3857) → WGS84 변환, 비스듬한 축제 구역은 회전 행렬로 보정

Figma SVG 내 래스터 이미지(JPEG base64) → WebP 교체로 파일 크기 77% 감소 및 모바일 품질 개선

컴퓨터학부 서버 지원으로 학교 서브도메인 배포, 축제 현장에서 부스 운영자들을 직접 찾아가 서비스 도입 독려 및 온보딩 지원

Google Developer Group on Campus 코어 멤버로서 부원 대상 단기 스프린트 프로젝트 기획 및 운영

4주간 커머스 서비스 구축 스프린트 설계: 팀 빌딩 → MVP 구현 → 고도화 → 배포 단계별 커리큘럼 구성

FE/BE 주차별 요구사항 명세 작성, 온보딩 가이드 및 Wiki 템플릿 제공

"왜?"에 답하는 기술적 의사결정(ADR) 문서화를 평가 기준에 포함해 단순 구현을 넘어 트레이드오프 경험 유도

ES6 모듈부터 React Hooks, FSD 아키텍처까지 단계별 커리큘럼 설계, 주 2회(2시간) 실습 중심 강의로 30명 부원 교육

부진 부원 3-4명 실시간 1:1 서포트, 다른 운영진 세션에서도 뒤처지는 부원 개별 케어

GLOW 해커톤(경북대 6개 동아리 연합, 139명) 주관, 경북대 멋사 4인 팀 대상 수상

대경권 아이디어톤 운영, 경북대 멋사 6팀(DOTOX) 우승 → 전국 아이디어톤 진출

실제 프로젝트 적용 경험 기반 프론트엔드 기술 세미나 2회 진행 (10-20명 대상)

React 프로젝트마다 폴더 구조가 달라 협업에 어려움을 겪는 문제 해결을 위해 FSD 아키텍처 세미나 기획, Layers-Slices-Segments 구조와 단방향 의존성 규칙을 실제 코드와 함께 설명

해커톤에서 웹 개발자가 빠르게 앱을 만들어야 할 때를 위한 React Native 웹뷰 세미나, Expo 환경 구축부터 배포까지 실습 중심 진행

React 기초부터 컴포넌트 설계, 라우팅까지 체계적으로 학습

대경권 해커톤(2023.09) 최우수상, 만다라트 목표 설정 서비스 아이디어 제안 및 프론트엔드 개발

만다라트 9칸 그리드 UI 구현, 우클릭 완료 토글과 진행률 실시간 연동 기능 개발

프론트엔드 4명 팀에서 작업 분배 및 Netlify 배포 환경 구축 담당

수기 면회신청을 전산화한 웹 서비스, 공군 → 계룡대 3군 → 20비행단으로 확대 시행

면회 신청 폼/Validation, 병사/간부용 로그인, 게시판 CRUD/페이징, 권한별 접근 제한 UI 구현

JSP 서버 사이드 렌더링으로 Spring MVC View 담당, jQuery AJAX로 비동기 통신