Earnest

Going Merry에서 일하다 2025년부터 모회사 Earnest의 Growth 팀으로 옮겼습니다. 성장 팀의 일은 "작은 변경이 숫자로 돌아오는 일"이었어요. 레이아웃이 조금 덜 흔들리는 것, URL 끝의 슬래시 하나, 온보딩 화면 문구 한 줄이 검색 순위와 대출 체결 수로 이어졌습니다.

WordPress → Next.js + Storyblok 마이그레이션

earnest.com을 WordPress에서 Next.js + Storyblok(헤드리스 CMS) 구조로 옮기는 프로젝트

• 기존 WordPress 기반 회사 웹사이트를 Next.js + Storyblok 아키텍처로 옮기는 작업에 참여해, 랜딩 페이지 10개 이상을 새 구조로 옮기고 핵심 페이지를 구현했습니다.
• Nginx 404 재라우팅 문제 해결: 팀이 오래 풀지 못하던 문제였습니다. 새 프론트엔드와 기존 모놀리스 사이의 프로덕션 트래픽 라우팅을 분석해, 모놀리스에 없는 경로를 새 프론트엔드로 넘기도록 Nginx 설정을 고쳤습니다. 마이그레이션을 끝내는 데 남아 있던 마지막 걸림돌이었어요. 이전이 끝난 모놀리스 쪽 정적 페이지 템플릿도 정리했습니다.
• 새 사이트의 블록과 페이지: Storyblok에서 마케팅 팀이 조합해 쓰는 블록을 만들었습니다. Press 페이지, 기업·제휴사 가입 폼 블록, 리더십 소개 블록, 이미지·단계 카드 블록(정렬·크기 옵션)이 여기에 들어가고, 기존 폼은 react-hook-form으로 옮겼습니다.
• 학교 담당자 연결 지도: 학교 관계자용 페이지(for schools)에 미국을 West·Southwest·Midwest·East 4개 권역으로 나눈 지도를 만들었습니다. 권역에 마우스를 올리거나 누르면 그 지역 담당자 연락처 카드가 뜨고, 모바일에서는 전화·이메일 버튼이 있는 다이얼로그로 열립니다.
  • 영업팀이 "어느 담당자가 어느 지역을 맡는지" 학교 측에 바로 보여 주고 싶다는 요청에서 시작했습니다. 카드는 바깥을 누르거나 지도가 화면 밖으로 나가면 닫힙니다.
  • 디자이너가 넘겨 준 SVG를 직접 분석해 50개 주(state)의 path 구조를 다시 정리했습니다.
  • 권역(region) 레이어 구조를 제안해 hover와 클릭 처리 로직을 단순하게 만들었고, 성능과 유지보수성도 함께 좋아졌습니다.
  • SVG 구조와 컴포넌트 구조까지 함께 설계하는 협업 방식을 이때 익혔습니다.
• CMS 운영: Next.js + Storyblok 구조 덕분에 마케팅·콘텐츠 팀이 개발자 없이 캠페인과 콘텐츠 실험을 운영할 수 있게 됐습니다.

SEO 개선과 검색 트래픽 최적화

마이그레이션하면서 SEO 친화적인 구조로 전환

• 실험이 만든 CLS 해결: Optimizely 실험으로 히어로 블록을 바꿔 끼우는 순간 레이아웃이 밀려 Lighthouse CLS 점수가 크게 떨어졌습니다. 실험 영역의 자리를 스켈레톤으로 미리 잡아 두는 실험 래퍼를 만들어 CLS를 0.06까지 낮췄고, 실험은 계속 돌리면서 검색 순위도 지킬 수 있게 됐습니다.
• 검색 엔진 신호 정리: SEO 팀의 진단을 받아 블로그 작성자 페이지에 canonical 태그를 달고, robots.txt에 남아 있던 옛 블로그 사이트맵을 정리했습니다.
• URL 정규화를 적용했습니다. 사이트 전체에 trailing slash 리다이렉트를 걸면서 쿼리스트링을 보존하고 블로그 경로는 예외로 처리했으며, 페이지 URL 끝에 붙던 빈 ?도 없앴습니다.
  • 프로덕션 라우팅 변경은 되돌린 적이 몇 번 있었습니다. 그래서 staging에 먼저 적용하고 엣지 케이스(쿼리스트링, 블로그 경로)를 점검한 뒤 프로덕션에 반영하는 절차로 진행했습니다.

Storyblok 전환, 동적 사이트맵, 콘텐츠 작업과 함께 팀 전체가 만든 결과로 6월 평균 검색 순위가 7.5위에서 4.3위로 올랐고, 구글 오가닉 검색 클릭 수는 220% 넘게 늘었습니다. 그중 제 몫은 CLS 해결과 URL 정규화였어요. 프론트엔드 기술의 정밀도가 회사 수익에 직접 영향을 줄 수 있다는 걸 배운 프로젝트입니다.

학자금 재융자 온보딩 퍼널

재융자 신청 퍼널의 이벤트, 본인 인증 흐름, 실험을 코드로 받쳐 주는 일

• 이벤트 표준화: 재융자 온보딩 퍼널의 Segment 이벤트를 구현하고 스키마를 표준화해, 전환·이탈 분석과 A/B 테스트를 할 수 있는 기반을 만들었습니다. 금리 확인에서 막다른 화면에 도달한 사용자, 자격 요건에 걸린 사용자처럼 놓치기 쉬운 경로의 이벤트까지 챙겼어요.
• Verified 본인 인증: 여러 칸에 개인정보를 직접 입력하던 폼을 전화번호 1회 입력 + Verified 본인 인증으로 바꾸는 프로젝트에 출시 직전 합류해, 출시 기한 안에 필요한 Segment 이벤트를 모두 구현했습니다.
  • 출시 후에는 인증된 사용자의 식별(identify) 이벤트가 엉뚱한 시점에 발생하던 버그와 생년월일 검증 버그를 고쳤습니다. 플로우를 불러온 뒤 세션을 확인하고, 실패하면 바로 다시 시도하도록 순서를 바꿨어요.
• 금리 확인 결과 화면: 실험에서 이긴 "금리 티커(Rate Ticker)" 헤더를 정식 기능으로 옮기며 컴포넌트와 테스트를 새로 작성했습니다. 단일 금리 표시 변경과 소득·주소 화면 검증도 맡았습니다.
• 실험 정리: 할인 중첩 표시, 앱 푸터 메시지 등 끝난 실험을 기본 동작으로 통합하면서 실험 플래그와 트래킹 코드까지 걷어내고 테스트를 추가했습니다. 할인 배너를 본 사용자의 분석 속성이 빠지는 문제도 복구했습니다.
• 재방문 사용자 라우팅 오류와 결과 화면 UI 버그 등 퍼널 곳곳의 문제를 고쳤습니다.

A/B 테스트

Optimizely + Segment 실험 기반 위에서 핵심 화면의 실험을 설계하고 구현

• PM·마케팅·데이터 팀과 함께 가설 → 실험 설계 → 런칭 → 결과 분석 → 승자 발표 사이클을 반복하며 재융자 퍼널과 마케팅 성과를 개선했습니다.
• 실험 두 개를 신청 플로우 서버, 신청 UI, Optimizely 웹 세 곳에 걸쳐 혼자 설정하고 구현했고, 이 기반 위에서 승리한 실험이 네 개 넘게 나왔습니다.
• 시차가 있는 미국 팀과 일하다 보니, 모든 티켓에 검증 방법까지 적은 테스트 플랜을 붙여 리뷰와 QA가 제 근무 시간을 기다리지 않게 했습니다.
• 한 실험에서는 한 달 만에 대출 체결이 16% 늘었고, 대출 서명 정도도 함께 증가했습니다.

돌아보며

미국 회사에서 원격으로 일하며 가장 크게 바뀐 건 코드 리뷰를 대하는 태도였습니다. 디자인, 코드, 자동 리뷰 지적을 하나씩 반영하고, 실험을 끝낼 때는 플래그와 트래킹 코드까지 깨끗이 지우는 습관이 생겼어요. 이 습관은 지금 사내 시스템을 만들 때도 그대로 이어지고 있습니다.