도메인 등록·거래·관리 플랫폼 프론트엔드 재구축 (SaaS·솔루션, 도메인 관리, 결제, 관리자 시스템, 다국어, FSD 아키텍처) | Cluvit

1. 1정리되지 않은 코드 구조로 인해 유지보수와 기능 확장에 어려움이 있었습니다.
2. 2요구사항, 화면 정의와 API 활용 기준을 재정비할 필요가 있었습니다.
3. 3사용자 서비스·대시보드·관리자 기능이 분리되어 있어 운영 흐름을 통합할 필요가 있었습니다.
4. 4초기 로딩·렌더링 속도와 저속 네트워크 대응 등 사용자 체감 성능 개선이 필요했습니다.

1. 1도메인 검색·등록·거래·관리 서비스의 사용자 웹과 운영자 백오피스를 제로베이스로 재구축
2. 2재사용 가능한 디자인 시스템과 공통 컴포넌트 기반 UI 구축
3. 3기능 단위로 분리된 아키텍처와 엄격한 타입 정책 적용
4. 4한국어·영어를 지원하는 다국어 서비스 구조 구현
5. 5Lighthouse 성능 Green 등급을 목표로 한 고성능 서비스 제공
6. 6보안·성능·접근성을 고려한 유지보수 가능한 프론트엔드 기반 마련

1. 1흩어져 있던 사용자 서비스·대시보드를 하나의 앱으로 통합하되, 성격이 다른 영역은 라우트 단위로 명확히 구분
2. 2디자인 토큰과 공통 컴포넌트를 기준으로 화면 품질을 고르게 유지
3. 3초기 로딩과 렌더링 성능을 코드 레벨에서 최적화
4. 4도메인 변경처럼 민감한 작업에는 보안 PIN 확인을 적용해 자산 보호

Next.js·TypeScript 기반으로 인증, 도메인 검색·거래, 대시보드 흐름을 새 구조로 구현해 서비스 확장 기반을 마련했습니다.

도메인·옥션·주문·정산·프로모션·고객지원·통계를 관리하는 운영자용 백오피스 화면 구조를 구축했습니다.

공통 컴포넌트, 디자인 토큰, Storybook 기반 검증 환경과 FSD 아키텍처를 적용해 일관된 개발 기준을 마련했습니다.

• 로그인·회원가입·MFA 인증
• 도메인 검색·등록·거래·결제
• 도메인·옥션·결제·내 정보 대시보드

• 도메인·옥션·중개·상표·차단 관리
• 주문·정산·프로모션·고객지원 관리
• 사용자·파트너·관리자 계정과 통계 관리

• 한국어·영어 다국어 지원
• 공통 디자인 시스템과 반응형 UI
• 검색·필터·페이지 상태의 URL 연동

Cluvit는 도메인을 검색·등록하고, 구매나 옥션으로 거래하며, 보유한 도메인을 관리하는 서비스입니다. Next.js 기반으로 먼저 개발된 결과물이 있었지만, 유지보수성과 최신 웹 표준을 고려해 기존 코드를 그대로 이어받지 않고 처음부터 다시 만드는 제로베이스(Zero-Base) 방식으로 프론트엔드를 재구축했습니다.

기존 소스는 API 명세나 예외 처리 같은 비즈니스 로직을 파악하기 위한 참고용으로만 활용했고, 아키텍처와 UI/UX, 코드베이스 전체를 최신 웹 표준과 모범 사례에 맞춰 새로 설계했습니다. 사용자 웹과 대시보드, 운영자 백오피스를 담당했으며, 화면 구현뿐 아니라 프로젝트 전반의 구조와 디자인 시스템, 상태 관리 방식까지 새로 구성했습니다.

• 사용자 웹, 대시보드 디자인 및 프론트엔드 개발 (PC·모바일 반응형)
• 운영자 백오피스 관리 화면 개발 (도메인·옥션·주문·정산·프로모션·고객지원 등)
• FSD(Feature-Sliced Design) 기반 프로젝트 구조 설계
• 디자인 토큰과 공통 UI 컴포넌트 기반 디자인 시스템 구축
• 도메인 검색·등록, 장바구니·결제, DNS 설정 등 핵심 기능 구현
• 회원 관리 및 인증·보안 흐름 구현
• 렌더링·번들 최적화를 통한 성능 개선

회원 가입, 로그인, 아이디·비밀번호 찾기, 회원 정보 수정·탈퇴까지 회원 생애주기 전반을 구현했습니다. 도메인은 사용자의 자산인 만큼 인증에 특히 신경을 써, 로그인·회원가입에 더해 다중 인증(MFA)과 Security PIN 흐름을 적용했습니다.

인증 토큰은 브라우저 저장소에 남기지 않고 메모리에서 관리해 노출 가능성을 줄였고, 새로고침 시 발생하는 인증 상태 전환은 세션 캐시를 활용해 자연스럽게 처리했습니다.

사용자가 원하는 도메인을 검색하고 등록 가능 여부를 확인하는 핵심 흐름을 구현했습니다. .com, .net 등 복수 TLD를 한 번에 검색하고 대체 도메인을 추천하며, 검색 결과를 장바구니로 바로 연결할 수 있도록 구성했습니다.

여러 도메인을 장바구니에 담아 등록 기간을 설정하고, 외부 결제 게이트웨이(PG) 연동을 통해 최종 구매까지 이어지는 결제 프로세스를 구현했습니다. 잔액·바우처 등을 함께 사용하는 혼합 결제와 결제 완료 이후 화면 처리까지 실제 결제 흐름에 맞춰 구성했습니다.

구매한 도메인의 네임서버와 A·CNAME·MX 등 레코드를 관리하고 설정하는 UI와 로직을 구현했습니다. 도메인을 일괄 변경하는 작업은 실행 직전에 보안 PIN을 한 번 더 확인하도록 해 실수나 비인가 변경 가능성을 줄였습니다.

로그인 사용자가 보유 도메인 목록과 만료일, 옥션 참여 현황, 결제·정산 정보를 한곳에서 확인하고 관리할 수 있도록 구성했습니다. 목록마다 필터·검색·페이지네이션을 제공해 많은 데이터 속에서도 원하는 항목을 빠르게 찾을 수 있도록 했습니다.

도메인·옥션·주문·정산·프로모션·고객지원·통계 등 여러 운영 업무를 한곳에서 관리할 수 있는 백오피스 화면을 구현했습니다. 업무 영역마다 목록·필터·상세·모달의 조작 방식을 공통 패턴으로 통일해 운영자가 화면을 이동해도 일관된 방식으로 사용할 수 있도록 했습니다.

Figma 디자인을 기준으로 데스크톱과 모바일 화면을 구현했습니다. 화면 폭에 따라 레이아웃이 달라지는 영역이 많아 프로젝트에 맞는 반응형 기준을 정의했으며, 목록형 화면은 데스크톱에서는 테이블, 모바일에서는 카드 형태로 전환해 좁은 화면에서도 정보를 쉽게 확인할 수 있도록 했습니다.

데이터를 불러오는 화면에는 로딩·빈 상태·에러 상태를 각각 구성해 사용자가 현재 상태를 명확하게 이해할 수 있도록 했습니다. 로딩 중에는 실제 콘텐츠 구조와 유사한 스켈레톤을 제공해 레이아웃 이동을 줄였으며, 랜딩 페이지에서는 섹션 단위 스크롤과 화면 폭에 따른 비례 조정 등 사용자 체감에 영향을 주는 요소를 세밀하게 조정했습니다.

필터·검색 등 반복적으로 사용하는 기능은 조작 흐름을 일관되게 구성했고, 색상 대비와 호버·포커스·비활성 상태 등 접근성 요소도 공통 컴포넌트 단계에서 반영했습니다.

기능별로 의존성을 나누는 FSD(Feature-Sliced Design) 아키텍처를 적용해 기능이 확장되더라도 변경 영향 범위를 쉽게 파악할 수 있도록 구조를 설계했습니다. 타입 정책도 엄격하게 적용해 any 사용을 제한하고, 데이터 모델별 타입을 정의하여 화면과 API 연동의 안정성을 높였습니다.

색상·타이포그래피·간격 등의 값은 디자인 토큰으로 정의하고, 화면에서는 토큰을 기준으로 사용하도록 구성했습니다. 이를 통해 화면 간 스타일 편차를 줄이고 브랜드나 테마 변경에도 일관되게 대응할 수 있도록 했습니다.

버튼·인풋·모달 등 공통 UI는 재사용 가능한 컴포넌트로 분리하고, Storybook을 통해 상태별 검증과 문서화를 진행했습니다.

Lighthouse 성능 Green 등급을 목표로 코드 레벨의 최적화를 진행했습니다. 서버 컴포넌트와 스트리밍을 활용해 초기 로딩 부담을 줄이고, 초기 번들에 불필요하게 포함되는 코드를 제거해 첫 화면 렌더링 속도를 개선했습니다.

화면이 갑자기 밀리는 레이아웃 이동(CLS)을 줄이고 불필요한 리렌더링을 방지하는 등 사용자 체감 속도와 성능 지표를 함께 개선했습니다.