Cluvit | 글로벌 도메인 커머스

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

담당 역할

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

주요 구현 내용

UI/UX

Figma 디자인을 기준으로 데스크톱과 모바일 화면을 최대한 그대로 옮겼습니다. 화면 폭에 따라 레이아웃이 달라지는 곳이 많아 프로젝트에 맞는 반응형 기준을 정해 맞췄고, 목록형 화면은 데스크톱에서는 테이블로, 모바일에서는 카드로 바뀌도록 해 좁은 화면에서도 정보가 잘 읽히게 했습니다.

데이터를 불러오는 화면에는 로딩·빈 상태·에러 상태를 각각 준비해 사용자가 지금 어떤 상황인지 알 수 있게 했고, 로딩 중에는 실제 내용과 비슷한 스켈레톤을 먼저 보여 줘 화면이 갑자기 밀리지 않도록 했습니다. 랜딩 페이지에서는 섹션 단위 스크롤이나 화면 폭에 따른 비례 조정처럼 체감에 영향을 주는 부분을 세밀하게 손봤고, 필터·검색처럼 자주 쓰는 요소는 조작 흐름을 일관되게 정리했습니다. 색상 대비나 호버·포커스·비활성 같은 상호작용 상태 등 접근성 요소도 공통 컴포넌트 단계에서 함께 챙겼습니다.

프론트엔드 구조와 디자인 시스템

기능별로 의존성을 나누는 FSD 아키텍처를 적용해, 기능이 늘어나도 어디를 고치면 어디까지 영향을 주는지 파악하기 쉽게 구조를 잡았습니다. 타입 정책도 엄격하게 가져가 any 사용을 제한하고 데이터 모델에 대한 타입을 갖춰, 화면과 API 연동의 안정성을 높였습니다.

색상·타이포·간격 같은 값은 디자인 토큰으로 정해 두고 화면에서는 토큰만 쓰도록 해, 화면 간 편차를 줄이고 테마가 바뀌어도 한 번에 대응할 수 있게 했습니다. 버튼·인풋·모달 같은 공통 UI는 재사용 가능한 컴포넌트로 분리하고, Storybook으로 상태별로 확인하고 문서화하는 환경도 함께 운영했습니다.

성능 최적화

Lighthouse 성능 'Green' 등급을 목표로 코드 레벨의 최적화를 진행했습니다. 서버 컴포넌트와 스트리밍을 활용해 초기 로딩 부담을 줄였고, 초기 번들에 불필요하게 끼어드는 코드를 걷어내 첫 화면이 빨리 그려지도록 했습니다. 화면이 갑자기 밀리는 레이아웃 이동(CLS)을 줄이고 불필요한 리렌더링을 막는 등, 사용자 체감 속도와 성능 지표를 함께 끌어올렸습니다.