이상아

스크린골프 매장에서 실시간 스윙을 분석·코칭하는 Electron 데스크톱 앱. 프론트엔드 전담(1인)으로 초기 설계부터 운영까지 담당.

• “무인 매장 사업인데, 정작 배포는 전혀 무인화가 안 됐다”는 문제를 직접 발견하고 단계적으로 자동화를 확장: 빌드 스크립트 분리 → --publish always로 S3 자동 업로드 → electron-updater Silent 설치로 매장 방문 제거 → MAC Address 기반 서버 API 조회로 매장·룸·영상 경로 설정까지 자동화. 새 매장 추가 95% 단축(1시간 → 3분)
• STOMP 장시간 연결 에러 원인을 “클라이언트가 오래된 세션을 재사용”으로 진단하고 서버 세션을 source of truth로 재설계. 나노초 단위 타임스탬프 커스텀 파서로 비동기 메시지 정렬 문제까지 해결 — 장시간 사용 에러 0건 달성
• 스윙 영상 3개 업로드 중 AI 피드백이 비동기로 도착해 순서가 꼬이는 문제를 메시지 버퍼링 큐 아키텍처로 해결. 새로고침 시 기존 메시지가 재수신되며 순서가 뒤섞이는 문제도 pageLoadTime 기반 초기 로드 감지 + sessionStorage 재생 이력 추적으로 동시 해결
• 무인 매장 특성상 터미널 접근이 불가능한 환경에서 원격 디버깅 수단이 없다는 문제를 인식, electron-log 기반 프로덕션 로깅 인프라를 구축. 실행 파일 옆 로그 파일 자동 생성으로 현장 방문 없이 문제 재현·원인 파악 가능한 구조 확립
• 619줄짜리 모놀리식 electron.js를 ipc/·utils/·constants.js로 분리하고 Facade 패턴으로 IPC 핸들러를 일괄 등록. 윈도우 크기·URL·패딩 등 매직 넘버를 constants.js로 중앙화하여 변경 포인트를 단일화

김캐디의 해외 골프장 예약 웹. 초기 아키텍처 설계부터 전 기능 개발·런칭까지 전담 (187 commits, 전체의 47.5%). 회사 최초 해외 매출 달성.

• 매장마다 다른 요일별 운영시간·게임 소요시간·룸 구성을 모두 프론트엔드에서 검증해야 하는 부킹 시스템을 설계. 자정 넘김 보정, 플레이타임 역산 마감 차단, 분 슬롯→정각 상향 전파 등 복합 조건의 예약 충돌 검증 로직을 구현하여 잘못된 예약 생성을 시스템 레벨에서 원천 차단
• Stripe Webhook 비동기 처리 + 자체 DB 반영 지연으로 결제 직후 상세 내역을 즉시 표시할 수 없는 문제를 인식. 결제 완료 화면에서 서버 상태를 폴링(5초 → 1초 최적화)하며 Stripe↔서버 간 eventual consistency를 UX로 자연스럽게 흡수하고, debounce로 결제 버튼 중복 클릭에 의한 이중 과금을 원천 차단
• Google Sheets 기반 번역 자동 빌드 파이프라인 + AWS Secrets Manager 기반 시크릿 관리 도입으로 다국어·환경 설정 자동화

앱에서 AI 코칭 결과를 확인하고 참여할 수 있는 Next.js 기반 모바일 웹뷰. AI 코칭 도메인 프론트엔드 전담.

• 키오스크(하드웨어)와 모바일 웹을 실시간 동기화하는 양방향 통신 설계. 스윙 영상 업로드 중 AI 응답이 동시 도착해 UI가 불안정해지는 문제를 메시지 버퍼링 큐 아키텍처로 해결
• 외부 STT 라이브러리의 Web Worker 호환성 문제를 진단하고 네이티브 MediaRecorder API로 전환 — 269줄의 불필요한 의존성 제거, 상태머신 패턴의 useSTT로 중복 호출 버그 근본 해결
• Android/iOS 네이티브 브릿지 인터페이스(AiBridge) 설계, 백엔드·네이티브·키오스크 팀과 WebSocket 프로토콜 및 API 스펙 협의·통합

골프 매장 사장님을 위한 B2B SaaS. PC + 모바일 프론트엔드 개발 담당. 국내 890개 매장 운영 지원.

• 모바일 화면 전체를 새로운 디자인 시스템 10종(Badge, BottomSheet, Button, Card 등)으로 주도적 구축·적용하여 UI 전면 개편

반복되는 비효율을 발견하면 자동화로 해결. AI 기반 워크플로우를 팀 전체에 전파.

• 주간 배포 요약 슬랙 자동화 — GitHub 각 레포 PR을 자동 수집·요약해 전사 슬랙 채널에 발행, 비개발자도 배포 내역 즉시 파악 가능
• SVG 도면 변환 자동화 — 골프장 매장 도면 room_id 매핑 수동 작업(1시간+)을 수 분으로 단축, 디자이너 단독 실행 가능한 구조로 전환
• 영업 지원용 Google Sheets 자동 적재 (Apps Script)

스마트스코어 국내 및 해외 공식 웹사이트 구축. 6개국 다국어 지원.

• 이미지 WebP 전환 + preload·fetchpriority 적용 — LCP 6.6s → 0.9s (86%↓), CLS 0.737 → 0 (100%↓)
• Zod 스키마 기반 유효성 검증 재설계, SEO 최적화(사이트맵·robots.txt·Schema.org) — Lighthouse SEO 83 → 92점
• 기기별 맞춤 번역 플러그인 자체 개발 — 윈도우 리사이즈 이벤트로 디바이스 타입 감지, 반응형 레이아웃 깨짐 문제 해결

골프장 운영자를 위한 내장객 분석 및 매장 운영 지표 시각화 대시보드.

• Highcharts 기반 유저 통계 시각화 차트 및 사용자별 맞춤형 필터 개발
• Intersection Observer API — Viewport 진입 차트만 호출하도록 최적화, TBT 약 90% 단축

사내 최초 모바일 네트워크 광고 시스템 기획부터 도입. 여러 프로젝트에 재사용 가능한 공통 모듈로 설계.

• Preload 기법으로 load·open 함수 호출 분리 — 광고 로딩 시간 60% 단축, 연속 재생 UX 구현
• 공통 Mixin 모듈 설계 — OS·Placement ID 상수화, 프로젝트 간 일관된 광고 호출 구조화

KB카드 전용 결제 기능 추가 및 기존 Vue2 결제 페이지 React 마이그레이션.

• 사내 스터디에서 학습한 React를 실무 최초 적용 — Vue2 기반 결제 페이지를 React + TypeScript로 마이그레이션, API 응답 타입 안정성 확보로 런타임 에러 사전 예방

앱 내 사용자 참여 활성화를 위한 게시글·댓글 시스템 최초 구현.

• Optimistic Update 적용 — 서버 응답 전 UI 즉시 반영으로 네트워크 지연 UX 개선
• Webpack 동적 import + webpackChunkName 코드 스플리팅 — 초기 번들 크기 절감
• Android 웹뷰 키패드 하단 공백 이슈 해결 — User-Agent 감지로 Android 환경에서만 bottom 영역 0 처리