이상아

무인 스크린골프 매장에서 고객이 직접 실시간 스윙을 분석·코칭받는 Electron 데스크톱 앱. 입사 직후 프로토타입을 이어받아 프론트엔드 1인으로 핵심 기능부터 운영까지 책임.

• 매장 추가마다 JSON 수정·재빌드·현장 방문이 반복되던 구조를 인식 — 매장 시공 시 이미 등록된 MAC Address로 환경설정을 서버에서 자동 수신하는 구조로 전환하고, S3 자동 업로드 + Silent 설치 파이프라인 구축 — 업데이트 시 매장 방문 완전 제거
• 차트 도입 시 ECharts import를 한 파일로 통일하고 사용 모듈만 명시 등록 — 사용하지 않는 차트 모듈이 main bundle에 묶이지 않도록 번들 구조를 정리해 main bundle 압축 사이즈 760 KB → 592 KB (22%↓)
• 무인 매장 PC에서 스크린골프 시뮬레이터 주변기기와 IPC로 통신하는 구조에서 contextIsolation: false로 인한 XSS 위험 발견 — contextBridge 기반 최소 권한 API로 전환 + IPC 핸들러를 도메인별 Facade 모듈로 분리해 신규 채널 추가 위치 6곳→1곳으로 단일화, 렌더러 6개에 흩어진 ipcRenderer 호출 23곳 일괄 전환 — 원격 임의 제어 가능했던 보안 위험 제거
• STOMP 재연결은 성공하지만 메시지 응답이 끊기는 무응답 장애를 진단. 클라이언트가 sessionStorage에 캐싱한 최초 세션 ID로 구독 경로를 구성했으나, 서버는 매 연결마다 user-name 헤더로 새 세션 ID를 발급하고 이전 ID를 폐기하는 구조임을 식별 — 클라이언트 캐싱 분기를 제거하고 서버 발급 ID만 사용하도록 변경해 재발 차단

골프 매장 사장님을 위한 B2B SaaS. PC + 모바일 프론트엔드 개발 담당. 국내 900개+ 매장이 구독 중.

• weekday 필드 하나에 의미 없는 숫자 코드(“1”·“2”·“4”)가 뒤섞인 레거시 — 백엔드에 제안해 price_category_cd 배열 필드를 신설하고 WEEKDAY·HOLIDAY·FOURSOME 상수로 분리. 새 필드 있으면 그대로, 없으면 기존 숫자를 상수로 매핑하는 폴백으로 전체 데이터를 한 번에 갈아엎지 않고 점진적 전환, 상수·그룹핑·라벨·폴백을 단일 파일에 응집
• 검증이 최종 제출에 몰려 있던 구조를 “가장 먼저 알 수 있는 시점에서 차단” 원칙으로 전환 — 검수 중 진입 즉시 차단, 변경 없는 제출은 ref 스냅샷 비교로 불필요한 서버 호출 제거
• 외부 폼(JotForm)으로는 UI·검증을 원하는 대로 바꿀 수 없어, 매장 양도양수 신청을 사장님 솔루션 안 자체 페이지로 옮겨 react-hook-form + zod로 구현. 양도인/양수인 필드 차이를 역할별 스키마 분리 대신 zod superRefine 한 벌로 분기해 타입을 단일 출처로 유지. 여러 단계로 나눈 신청 폼에서 역할·옵션에 따라 검증 항목을 달리하고, 다음 단계로 넘어갈 때 잘못된 입력을 바로 막고 최종 제출 때 zod로 한 번 더 거르는 이중 검증으로 설계

현장에서 마주친 반복 작업을 자동화로 옮기고, 동료가 그대로 가져다 쓸 수 있게 사내 가이드·블로그로 공유.

• 주간 배포 요약 슬랙 자동화 — GitHub 각 레포 PR을 자동 수집·요약해 전사 슬랙 채널에 발행, 비개발자도 배포 내역 즉시 파악 가능주간 배포 요약 슬랙 자동화
• SVG 도면 변환 자동화 — 골프장 매장 도면 room_id 매핑 수동 작업(1시간+)을 수 분으로 단축, 디자이너 단독 실행 가능한 구조로 전환SVG 도면 변환 자동화
• 영업팀이 사이트 배너·입력폼 접수 알림을 슬랙에서만 받아 검색·관리가 어렵던 구조를, Apps Script로 Google Sheets에 자동 적재 — 리드를 날짜별 분류·필터링·담당자 지정으로 관리

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

• 8개 차트 동시 호출로 초기 로드 30초까지 걸리던 문제를 진단 — 백엔드와 병목 API를 분리하고 캐싱 전략을 협의해 API 응답 지연 원인 제거
• API 최적화 후에도 8개 차트를 동시에 그리는 구조 자체가 메인 스레드 병목임을 진단 — Intersection Observer로 화면에 보이는 차트만 호출하도록 렌더링 전략 전환해 TBT 3,180ms → 320ms (90%↓)

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

• 글로벌 공식 웹사이트(6개국 다국어) 단독 구축 후 국내 전면 개편까지 전담 — 도메인 이전·성능·SEO·폼 검증 전 영역 재설계
• 이미지 WebP 전환 + preload·fetchpriority 적용 — LCP 6.6s → 0.9s (86%↓), CLS 0.737 → 0
• 도메인 이전 시 검색 색인 리셋 위험을 인지하고, 사이트맵·robots.txt·Schema.org + Unhead 기반 라우터 통합 메타데이터 관리로 SEO 세팅 — Lighthouse SEO 83 → 92점
• 폼 검증을 위해 vee-validate·vuelidate 같은 풀 폼 라이브러리 도입 대신, 검증 로직만 Zod로 분리하는 선택. 필드별로 흩어져 있던 정규표현식을 단일 스키마로 응집하고, isSubmitted 상태로 첫 진입 에러 숨김 + 제출 후 실시간 검증 UX 적용