스마트스코어 · 2025.02 — 2025.06 · 단독 개발

국내 공식 웹사이트 개편

국내 1위 골프 O2O 플랫폼 국내 공식 웹사이트 전면 개편. 성능 최적화, 도메인 이전 SEO 전략, 폼 검증 구조 설계를 단독으로 담당.

Context

스마트스코어 (국내 골프장 70% 제휴 · 누적 회원 400만+)의 국내 공식 웹사이트 전면 개편
글로벌 홈페이지(2023.08)를 먼저 구축한 뒤, 국내 홈페이지 개편을 단독으로 담당
도메인 이전과 함께 성능·SEO·폼 검증 전 영역 재설계

Stack & Role

Vue3TypeScriptVitei18nZodUnhead

단독 개발. 신규 도메인 이전·다국어 구조·폼 검증·성능 최적화를 포함한 전 영역 담당.

Decisions

ADR 01

LCP 6.6s → 0.9s — 이미지 포맷 전환 + 로딩 우선순위 조정

초기 LCP 6.6s, CLS 0.737. 원인을 추적하니 히어로 이미지가 JPEG로 서빙되고 있었고, fetchpriority나 preload 없이 일반 이미지 로딩 순서를 따르고 있었음. 대안으로 WebP 전환 + preload + fetchpriority="high" 조합을 선택. 이미지 CDN 도입(비용·운영 부담)과 lazy loading만 적용(LCP 개선 효과 없음)도 검토했지만, 코드 변경만으로 가장 큰 임팩트를 낼 수 있는 방향으로 결정. CLS는 이미지에 명시적 width/height를 부여해 레이아웃 이동 차단.

히어로 이미지 로딩 최적화

Before: JPEG 히어로 이미지, 우선순위 없음

LCP 6.6s / CLS 0.737

↓

WebP 전환 — 파일 크기 감소

↓

<link rel='preload'> + fetchpriority="high"

브라우저가 히어로 이미지를 첫 번째 자원으로 처리

↓

After: LCP 0.9s / CLS 0

JPEG → WebP 전환 + preload + fetchpriority 조합으로 브라우저가 히어로 이미지를 첫 번째 우선순위로 처리하도록 유도.

Result

LCP 6.6s → 0.9s (86%↓), CLS 0.737 → 0
이미지 CDN 없이 코드 변경만으로 달성
블로그 글로 정리: Lighthouse 성능 최적화 (LCP·CLS)

Retrospective

알게 된 것 — LCP는 이미지 크기보다 로딩 순서가 먼저. fetchpriority 한 줄이 CDN 도입보다 더 큰 임팩트를 냈음. 초기에 원인 분석 없이 CDN을 먼저 검토했는데, 병목을 측정하고 나서 접근했다면 더 빨리 해결했을 것.

ADR 02

도메인 이전 — 검색 색인 리셋 위험을 인지하고 SEO 전략 선제 설계

도메인 이전 시 기존 색인이 리셋될 위험을 인지. 단순 301 리다이렉트만 하면 크롤러가 신규 도메인을 다시 처음부터 색인하는 기간 동안 검색 노출이 급감할 수 있음. 이전과 동시에 SEO 세팅을 완료하기로 결정 — 사이트맵·robots.txt 재구성 + Schema.org 구조화 데이터 + Unhead로 라우터 레벨 메타데이터 통합 관리 를 묶어서 처리. 크롤러가 새 도메인에서 필요한 신호를 모두 즉시 발견할 수 있도록 준비.

Result

Lighthouse SEO 83 → 92점
도메인 이전과 SEO 세팅을 동시 완료해 색인 공백 최소화
블로그 글로 정리: SPA SEO 최적화

Retrospective

아쉬운 점 — 이전 후 색인 변화를 Search Console로 추적하는 모니터링 주기를 명확히 잡지 않았음. 이전 직후 2주 동안 주 단위로 색인 상태를 확인하는 체크리스트를 만들었어야 했음.

ADR 03

폼 검증 — 풀 라이브러리 대신 Zod만 도입

글로벌 홈페이지를 처음 만들 때 폼 검증 로직이 필드별로 흩어져 있어 에러 관리가 어려웠던 경험이 있었음. 이번엔 처음부터 검증 로직을 한 곳으로 응집하는 구조를 잡기로 했고, vee-validate·vuelidate 같은 풀 폼 라이브러리를 검토했지만 폼 규모가 작고 상태 관리도 Vue 기본으로 충분해 검증 로직만 Zod로 분리하는 쪽을 선택 — 정규표현식을 단일 스키마로 응집하고, isSubmitted 상태로 첫 진입 에러 숨김 + 제출 후 실시간 검증 UX를 직접 구현. 트레이드오프는 UX 패턴을 직접 짜야 한다는 것 — 폼이 복잡해지면 풀 라이브러리 전환이 더 빠를 수 있음.

Result

필드별 정규표현식을 단일 Zod 스키마로 응집
첫 진입 에러 숨김 + 제출 후 실시간 검증 UX 직접 구현
블로그 글로 정리: Vue + Zod 폼 검증

Retrospective

다시 한다면 — 폼 복잡도가 올라갈 가능성이 있을 때는 처음 부터 react-hook-form / vee-validate 같은 라이브러리를 쓰는 게 나음. 단순 폼에서 Zod만 쓰는 건 좋은 선택이었지만, 멀티스텝이나 동적 필드가 추가됐다면 직접 짠 UX 패턴의 유지보수 비용이 라이브러리 학습 비용을 초과했을 것.

Result

LCP 6.6s → 0.9s (86%↓), CLS 0.737 → 0 — 코드 변경만으로 달성
Lighthouse SEO 83 → 92점 — 도메인 이전과 동시 설계로 색인 공백 최소화
6개국 다국어 구조 설계 + 폼 검증 Zod 단일 스키마 응집
단독 개발 — 신규 도메인 이전·다국어·성능·SEO 전 영역 전담