맡았던 일 중 직접 판단하고 결정한 비중이 큰 프로젝트를 골라, 무엇이 문제였고 왜 그 방법을 택했는지 중심으로 적었습니다. 전체 경력 요약은 이력서에 있습니다.
신규 구축 프로젝트라 프론트엔드 구조에 대한 합의된 기준이 없는 상태에서 시작했습니다.
Layered Architecture를 기반으로 계층을 나누고 계층 간 의존 방향을 규칙으로 정의했습니다.
설계가 문서에만 남으면 지켜지지 않는다고 보고, 아키텍처 준수 여부를 검사하는 AI PR 봇을 만들어 리뷰 단계에서 자동으로 걸러지게 했습니다. 사람이 매번 같은 구조 지적을 반복하지 않아도 되는 상태를 목표로 했습니다.
디자인 시스템 쪽은 Figma 토큰을 코드로 변환하는 플러그인을 만들어, 디자인 변경이 수작업 없이 코드에 반영되도록 했습니다.
상품 상세는 29CM에서 트래픽이 가장 많이 몰리는 화면 중 하나입니다. 성능과 유지보수 양쪽에서 기존 구조가 한계에 닿아 전환이 필요한 상황이었습니다.
새로운 아키텍처를 기준으로 상품 상세 페이지를 전환했습니다.
AppleCare+ 같은 무형상품은 기존 상품 모델로 표현되지 않았고, 아이폰처럼 속성이 많은 상품은 선택지가 늘어날수록 사용자가 조합을 파악하기 어려웠습니다. 사전판매는 예고된 시점에 트래픽이 한꺼번에 몰리는 특성이 있었습니다.
무형상품의 등록과 판매 흐름을 별도로 다룰 수 있게 만들고, 여러 속성을 한눈에 비교할 수 있는 속성 피커 UI를 설계했습니다. 사전판매를 위해서는 대기열 기능을 별도로 개발했습니다.
차량 정보 콘텐츠가 계속 쌓이는 서비스인데도 검색 색인 생성량이 6천 건 수준에 머물러, 만들어 둔 콘텐츠 대부분이 검색에서 발견되지 않고 있었습니다.
콘텐츠가 늘어날 때마다 사람이 대응하는 방식으로는 따라갈 수 없다고 보고, 사이트맵 업데이트를 자동화하고 캐노니컬 태그를 적용해 색인 대상 자체를 넓혔습니다.
색인이 된 뒤에는 검색 결과에서 눈에 띄어야 클릭으로 이어지므로, 콘텐츠별 다이나믹 메타태그를 적용하고 리치 텍스트 스키마를 붙였습니다.
색인 생성량이 6천 건에서 7~8만 건으로 10배 이상 늘었고, 검색 노출수와 클릭수가 2~3배 증가했습니다. 스키마가 적용된 문서는 3만 건 이상 발생했습니다.
타입 정보를 JSDoc으로 관리하고 서버 상태를 Redux로 다루고 있어, 타입 안정성과 서버 상태 관리 양쪽에서 비용이 커지고 있었습니다.
혼자 바꾸고 끝나는 전환은 되돌아간다고 보고, 기술 조사 → Best Practice 문서 작성 → 보일러플레이트 스니펫화 순으로 진행해 팀 전체가 같은 방식으로 쓸 수 있는 상태를 만들었습니다.