퍼시스 닷컴과 운영 어드민
퍼시스 공식 홈페이지와 운영 관리 도구(어드민)를 2개월 안에 혼자 새로 만들어, 운영팀이 콘텐츠를 직접 관리하게 했습니다.
2개월홈페이지와 운영 관리 도구를 혼자 동시에 출시하기까지 걸린 기간
- 2026.04 ~ 2026.06
- 퍼시스
- 닷컴과 어드민 설계, 구현 (1인)
핵심 가치
운영팀이 상품 등록부터 문서, 약관, 뉴스까지 개발자에게 부탁하지 않고 직접 관리하게 됐습니다.
성과
- 홈페이지와 관리 도구를 2개월 안에 혼자 동시에 출시
- 아직 준비되지 않은 서버 기능 24개를 임시 응답으로 먼저 만들어 두고 화면을 개발해 일정을 지킴
기술 스택
배경
퍼시스의 공식 홈페이지와 운영 어드민을 한 모노레포에서 동시에 다시 설계했습니다. 홈페이지는 인터랙션이 많아도 스크롤 성능을 지켜야 했고, 어드민은 상품 등록부터 문서와 약관 관리까지 운영팀이 모든 영역을 스스로 편집할 수 있어야 했습니다. 백엔드 API 24개가 아직 구현되지 않아서, 이 API들이 홈페이지 일정을 막지 않도록 먼저 구현해 두고 바로 전환하는 구조도 함께 설계했습니다. 이 범위 전체를 2개월 안에 혼자 진행했습니다.
결정과 구현
- 홈페이지의 Parallax 인터랙션은 화면에 들어온 섹션에서만 애니메이션이 켜지고 GPU 가속 변환 위주로 움직이게 해 스크롤 부하를 분산했습니다. 매장 찾기는 사용자가 버튼을 눌렀을 때만 위치 권한을 요청하도록 설계했고, 가상 스크롤과 카카오맵 클러스터, URL로 필터를 공유하는 기능을 구현했습니다.
- 어드민에는 운영팀이 제품 카탈로그와 사내 문서를 직접 등록하고 관리하는 흐름을 만들었습니다. 제품 상세 빌더는 자유 조립 대신 T1부터 T5까지 5종 템플릿을 고르고 재배치하는 것만 허용해 카탈로그 디자인의 일관성을 지켰고, 편집 화면 옆에 미리보기와 실행 취소, 다시 실행을 두었습니다.
- 약관 에디터는 Plate로 만들어 버전 스냅샷과 롤백을 지원하고, 뉴스 에디터에는 URL 미리보기(unfurl)와 og:image S3 프록시를 넣어 운영팀이 스스로 편집할 수 있게 했습니다. 모노레포에는 공용 디자인 시스템을 만들어, 홈페이지와 어드민이 같은 토큰과 컴포넌트를 쓰면서 UI 일관성을 유지하게 했습니다.
- 미구현 API 24개는 MSW로 먼저 구현해 환경 변수 한 줄로 mock과 실서버를 바로 바꿀 수 있게 했고, 필요한 API 일부는 Java 백엔드에 직접 구현했습니다. 반복 구현은 AI 에이전트가 초안을 잡고 설계와 계약, 검수는 제가 직접 맡는 방식으로 일정을 지켰습니다.
