Cleaning
Co. UI

— Overview

입주청소 정보 플랫폼 '클린벨(Cleanbell)'의 사용자 화면 전체를 퍼블리싱한 작업물. 디자인 시안을 바탕으로 메인·랜딩·업체 탐색·신청·마이페이지까지 14개 페이지를 HTML/CSS로 구현했다.

PC·모바일 반응형(640px 기준)을 CSS 분리 방식으로 작성했으며, owl.carousel · slick · jQuery UI datepicker 등 외부 라이브러리를 레이아웃에 맞게 커스터마이징했다.

— Pages

1. Main — 플랫폼 진입점. 카운팅 애니메이션, owl.carousel 배너, 업체 탐색 CTA.
2. Landing — 파트너 업체 가입신청 랜딩. slick 슬라이더 사용 후기, 요금제 안내.
3. Company List A / B — 필터(지역·청소종류·날짜) + 업체 목록. A는 리스트형, B는 지도 병렬형.
4. Select Company — 업체 비교 선택 플로우.
5. Ranking — 신뢰 랭킹 배너 + 순위별 업체 카드.
6. Company Detail A / B / C — 업체 상세. 시공 갤러리, 리뷰, 서비스 탭을 버전별로 구현.
7. Apply Detail A / B / C — 신청 내역 확인. 진행 단계 UI, 견적 상세 구성.
8. Rate Calculate — 평형·옵션 입력 기반 청소 요금 계산기.
9. My Page — 신청 내역·리뷰·포인트 탭 마이페이지.

— Structure

CSS는 공통(default.css) · 컴포넌트(cleaner.css) · 반응형(cleaner-640.css) · 서브페이지(cleaner-sub.css)로 4파일 분리해 관리했다.

html/
├── cleaner/          ← HTML 14개
│   ├── cleaner_main.html
│   ├── cleaner_landing.html
│   ├── companyList_01~02.html
│   ├── companyDetail_01~03-1.html
│   ├── applyDetail_01~03.html
│   ├── selectCompany.html
│   ├── ranking.html
│   ├── ratecalculate.html
│   └── mypage.html
├── css-v4/           ← cleaner.css · cleaner-640.css (반응형)
│                        cleaner-sub.css · cleaner-sub-640.css
├── css-v2/           ← reset · default · 라이브러리 CSS
├── images-v4/        ← 335개 에셋
├── images-v2/        ← 148개 에셋
├── js/ js-v2/        ← jQuery · owl.carousel · slick · cleaner.js
└── fonts/            ← NotoSansKR · Lato · Roboto

디렉토리 구조 — 리소스 전체 로컬 내장