2026.01 — 2026.09회사 프로젝트
VGOLF 스코어카드
라운드 결과 공유 웹 — 인앱브라우저 이미지 저장
- 맡은 일
- Frontend 단독 유지보수·고도화 (인수인계 후, 본업과 병행)
- 기간
- 2026.01 — 2026.09
- 소속
- 플럭시티클라우드팀
스크린골프 라운드 결과를 개인·팀·단체(시상 포함) 스코어카드로 보여주고, 카카오·네이버 같은 인앱브라우저에서 이미지로 저장·공유하는 모바일 웹입니다. 원 개발자에게서 인수인계받아 F&B·앱 개발과 병행하며 9개월간 맡았습니다(전체 103커밋 중 본인 46건).
새로 설계한 제품이 아니라 남이 짜 둔 코드를 이해하고 안전하게 바꿔 나가는 일이었고, 그중 웹뷰 파편화로 생기는 저장 문제는 원인을 끝까지 좁혀 해결하고, 다음 사람이 같은 데서 막히지 않도록 문서로 남겼습니다.
핵심
- 01
레거시 인수인계 후 9개월 유지보수·고도화
전체 103커밋 중 본인 46건, 본업과 병행
- 02
인앱브라우저 이미지 저장 문제 해결
카카오·네이버 웹뷰에서 저장이 동작하지 않던 것을 재현·분석·해결하고 360줄 트러블슈팅 문서로 남김
- 03
저장 이미지가 뿌옇게 나오던 문제
devicePixelRatio 기반 스케일 처리로 선명도 확보
- 04
캡처 로직을 util + 커스텀 훅(useSaveCardImage)으로 추출해 팀·단체 페이지가 공통으로 사용
나머지 3개 더 보기접기
- 05
i18n 리소스를 public HTTP 로드에서 번들 인라인으로 옮겨 네트워크·캐시·MIME·타이밍 이슈 제거
- 06
스코어카드 전면 리디자인 + 히어로 헤더 공통 컴포넌트화
팀 전용 스타일 122줄 제거
- 07
백업 페이지(/team_bu, /scores_bu)를 두고 무중단으로 전환해 리스크 최소화
화면
Pl. 2of2
실제 발송된 결과 페이지입니다. 참가자 이름과 골프장 상호·로고는 알아볼 수 없게 처리했습니다.
자세히
궁금한 항목을 펼치면 그때 무엇이 문제였고 어떻게 판단했는지 나옵니다.
증상은 두 가지였습니다. 카카오·네이버 인앱브라우저에서 스코어카드 저장 버튼이 아무 반응이 없었고, 저장이 되더라도 이미지가 뿌옇게 나왔습니다.
일반 브라우저에서는 재현되지 않아, 웹뷰가 다운로드를 어떻게 다루는지부터 파고들었습니다. 환경마다 동작이 갈리는 지점을 하나씩 좁혀 원인을 특정했습니다.
선명도는 devicePixelRatio를 캡처 스케일에 반영해 해결했습니다
기기 픽셀 밀도를 무시하고 CSS 픽셀 기준으로 그리던 것이 원인이었습니다.
저장 자체는 인앱브라우저 환경을 감지해 별도 저장 오버레이(SaveImageOverlay)를 띄우고 캡처 플로우를 다시 설계해 우회했습니다.
같은 로직을 팀·단체 페이지가 각자 갖고 있지 않도록 util/captureImage.ts와 useSaveCardImage 훅으로 추출했습니다.
원인·환경별 대응·재발 방지를 360줄짜리 트러블슈팅 문서(docs/image-save-troubleshooting.md)로 남겼고, 같은 내용을 블로그에도 정리했습니다.
개인·팀 상세와 단체 결과 페이지에 신규 디자인 적용
히어로 헤더, 순위 메달, 시상 카드
팀·단체 페이지가 각자 갖고 있던 히어로 헤더를 공통 컴포넌트(ScoreHero)로 추출해 팀 전용 스타일 122줄 제거
인라인 SVG 아이콘 모듈화, 반복되던 JSX를 배열 기반 렌더링으로, 포맷 로직은 util로 분리
인수인계받은 레거시라 한 번에 갈아엎지 않고, 백업 페이지(/team_bu, /scores_bu)를 띄워 둔 채 전환한 뒤 안정화되고 나서 정리
문제가 생기면 즉시 되돌릴 수 있는 상태를 유지
쓴 기술
이어서 볼 것
플럭시티에서 한 다른 프로젝트