한 브랜드, 한 셸
경매·회원·상담·회사 화면이 같은 헤더, 폭, 색상과 타이포 체계를 사용합니다.
JAUCTION TOTAL RENEWAL · 2026.07.26
제이옥션 전체 개편
계획서 + 화면별 전체 시안
홈 한 장이나 상세 한 장이 아니라, 고객이 검색하고 판단하고 가입하고 상담받는 전체 흐름과 운영 화면까지 하나의 디자인 체계로 통일합니다.고객 판단 순서 우선
데이터 건수보다 가격·기일·물건·권리·점유 순서가 먼저 보이게 합니다.
공개 경계 명확화
내부 연동상태와 개인정보는 숨기고 승인된 고객 정보만 단계별로 노출합니다.
실제 구현 가능한 시안
현재 연결된 필드와 사진을 사용한 HTML 화면으로 검수합니다.
01 · DESIGN SYSTEM
모든 화면을 묶는 디자인 체계
색과 크기를 화면마다 새로 정하지 않고 아래 토큰과 컴포넌트를 기준으로 구현합니다.Brand & color tokens
Brand navy
#0B2C3D헤더·핵심 제목·신뢰Action teal
#087C78주요 버튼·선택·진행Signal orange
#D96532최저가·입찰 임박만Canvas
#F4F7F8화면 배경·구획Line
#D7E2E6표·카드·입력 구분Ink
#17313F본문·수치Typography & spacing
H1 · 36/44경매물건 핵심 정보H2 · 28/36입찰 전에 먼저 확인하세요BODY · 16/26
고객이 한 번에 읽을 수 있는 문장 길이와 행간을 유지합니다.
TABLE · 13/20 · CAPTION 1248121624324864
Core components
- SiteHeader · MobileHeader · Footer
- SearchBar · FilterSidebar · FilterDrawer
- AuctionCard · AuctionTableRow · Photo
- DetailHero · PriceBlock · StickyAnchor
- History · Rights · Tenant · Document
- MemberGate · StickyAction · BottomAction
- AuthPanel · MyPageShell · EmptyState
- ConsultingStepper · FeeTable · Form
본문 최소 14px · 캡션만 12px터치 영역 최소 44px일반 폭 1200px · 검색 폭 1360px카드 12px · 큰 패널 16px주 CTA는 화면당 1개없는 값은 임의로 “-” 처리하지 않음
02 · FULL SCREEN MOCKUPS
화면별 전체 시안
각 카드를 누르면 공통 디자인 체계가 적용된 실제 전체 페이지가 열립니다.jauc.co.kr
01전체보기 →
DISCOVERY HOME
홈
전체 공개검색·추천·마감임박·초보가이드를 한 화면에서 시작하는 서비스 관문
//demojauc.co.kr
02전체보기 →
SEARCH & RESULTS
검색·결과
전체 공개조건 입력과 결과 비교가 끊기지 않는 데스크톱·모바일 통합 검색
/search/search/resultsjauc.co.kr
03전체보기 →
SALE CALENDAR
매각기일
전체 공개법원·날짜·지역을 함께 좁히는 달력과 기일 목록 결합 화면
/calendarjauc.co.kr
04전체보기 →
MAP DISCOVERY
지도검색
회원지도 이동과 목록 탐색을 한 화면에서 수행하는 탐색형 검색
/demo/map-search/demo/map-search/lots/[publicId]jauc.co.kr
05전체보기 →
PUBLIC LOT DETAIL
공개 상세
전체 공개입찰 판단에 필요한 사건·가격·기일·사진만 우선 제공하는 공개 상세
/auctions/[id] · 비회원jauc.co.kr
06전체보기 →
MEMBER LOT DETAIL
회원 상세
회원권리·점유·사건자료·목록·단지·통계를 법원 기록과 함께 검토하는 전체 상세
/auctions/[id] · 로그인 회원jauc.co.kr
07전체보기 →
ACCOUNT ACCESS
로그인·회원가입
전체 공개서비스 혜택과 가입 절차를 한 흐름으로 연결한 계정 진입 화면
/login/joinjauc.co.kr
08전체보기 →
MEMBER WORKBENCH
마이페이지
회원관심물건·최근본물건·검색알림·계산·프로필을 묶은 회원 작업대
/mypage/favorites/mypage/recent/mypage/bid-analysis+2jauc.co.kr
09전체보기 →
CONSULTING
경매컨설팅
전체 공개업무범위·절차·수수료·신청을 투명하게 연결한 상담 전환 화면
/consulting/consulting/process/consulting/fees+2jauc.co.kr
10전체보기 →
TRUST & POLICY
회사·정책
전체 공개운영주체·위치·정책을 읽기 쉬운 신뢰 정보로 정리하는 기업 화면
/company/company/location/legal/privacy+1jauc.co.kr
11전체보기 →
REFERENCE HUB
법원·공매·공식링크
전체 공개법원과 온비드, 공식 확인 경로를 목적별로 정돈한 참고정보 허브
/courts/onbid/resources/linksjauc.co.kr
12전체보기 →
OPERATIONS
운영 대시보드
운영자상담·고객·일정·분석·데이터 상태를 운영 우선순위로 정리한 내부 화면
/admin/admin/consultations/admin/customers+203 · ROUTE COVERAGE
운영 라우트 적용표
대표 시안 12개를 23개 사용자 화면과 내부 운영 화면에 확장합니다.| 화면 체계 | 적용 경로 | 대상 | 핵심 목적 | 시안 |
|---|---|---|---|---|
| 01 · 홈 | //demo | 전체 공개 | 검색·추천·마감임박·초보가이드를 한 화면에서 시작하는 서비스 관문 | 열기 → |
| 02 · 검색·결과 | /search/search/results | 전체 공개 | 조건 입력과 결과 비교가 끊기지 않는 데스크톱·모바일 통합 검색 | 열기 → |
| 03 · 매각기일 | /calendar | 전체 공개 | 법원·날짜·지역을 함께 좁히는 달력과 기일 목록 결합 화면 | 열기 → |
| 04 · 지도검색 | /demo/map-search/demo/map-search/lots/[publicId] | 회원 | 지도 이동과 목록 탐색을 한 화면에서 수행하는 탐색형 검색 | 열기 → |
| 05 · 공개 상세 | /auctions/[id] · 비회원 | 전체 공개 | 입찰 판단에 필요한 사건·가격·기일·사진만 우선 제공하는 공개 상세 | 열기 → |
| 06 · 회원 상세 | /auctions/[id] · 로그인 회원 | 회원 | 권리·점유·사건자료·목록·단지·통계를 법원 기록과 함께 검토하는 전체 상세 | 열기 → |
| 07 · 로그인·회원가입 | /login/join | 전체 공개 | 서비스 혜택과 가입 절차를 한 흐름으로 연결한 계정 진입 화면 | 열기 → |
| 08 · 마이페이지 | /mypage/favorites/mypage/recent/mypage/bid-analysis/mypage/calculator/mypage/profile | 회원 | 관심물건·최근본물건·검색알림·계산·프로필을 묶은 회원 작업대 | 열기 → |
| 09 · 경매컨설팅 | /consulting/consulting/process/consulting/fees/consulting/apply/consulting/apply/complete | 전체 공개 | 업무범위·절차·수수료·신청을 투명하게 연결한 상담 전환 화면 | 열기 → |
| 10 · 회사·정책 | /company/company/location/legal/privacy/legal/terms | 전체 공개 | 운영주체·위치·정책을 읽기 쉬운 신뢰 정보로 정리하는 기업 화면 | 열기 → |
| 11 · 법원·공매·공식링크 | /courts/onbid/resources/links | 전체 공개 | 법원과 온비드, 공식 확인 경로를 목적별로 정돈한 참고정보 허브 | 열기 → |
| 12 · 운영 대시보드 | /admin/admin/consultations/admin/customers/admin/schedule/admin/analytics | 운영자 | 상담·고객·일정·분석·데이터 상태를 운영 우선순위로 정리한 내부 화면 | 열기 → |
04 · DATA VISIBILITY
공개·회원·내부 정보 구분
오픈소스 발행을 전제로 코드와 화면에 내부 저장정보가 새어 나오지 않도록 허용표를 먼저 적용합니다.| 정보 | 공개 | 로그인 회원 | 내부 전용 |
|---|---|---|---|
| 사건·법원·물건번호·용도·소재지 | 표시 | 표시 | 수집값·정제값 |
| 감정가·최저가·다음 기일·상태 | 표시 | 표시 | 수집값·대조기록 |
| 승인된 대표사진 | 1장 | 전체 승인사진 | 승인파일·검수상태 |
| 기일 이력 | 핵심 회차 | 전체 이력 | 수집·정제기록 |
| 매각목록·감정 요약 | 짧은 개요 | 승인된 전체 항목 | 법원 기록·정제메모 |
| 임차·점유·권리 | 존재 여부 | 마스킹된 승인정보 | 접근제한 개인정보 |
| 문건 | 종류 안내 | 승인 문건 열람 | 저장파일·검수기록 |
| 갱신 로그·DB·SHA·연동 상태 | 제외 | 제외 | 운영자만 |
| 건물등기·세대열람 관련 자료 | 제외 | 제외 | 별도 승인 전 보관 |
| 이름·전화·식별정보 | 제외 | 본인정보 외 마스킹 | 권한 담당자만 |
05 · IMPLEMENTATION ROADMAP
실제 적용 순서와 완료 기준
디자인만 덮지 않고 데이터 계약·URL·반응형·오류 상태까지 단계별로 검수합니다.- 01P0 · 기반
공개/회원/내부 필드 허용표, 전역 토큰, 공통 셸과 접근성 규칙
- 02P0 · 핵심 전환
홈, 검색결과, 공개 상세, 회원 전체상세, 로그인·가입
- 03P1 · 회원 작업
마이페이지 허브, 관심·최근, 저장검색·알림, 계산 도구
- 04P1 · 상담·신뢰
컨설팅 허브·절차·수수료·신청, 회사·정책 공통 셸
- 05P2 · 탐색 확장
달력·법원·지역·유형 색인 정규화, 공매·공식 확인처
- 06P3 · 운영 전환
구 URL 매핑, SEO, 오류·빈 상태, 성능·모바일·키보드 QA
가로 넘침 없이 표는 카드 또는 안전한 스크롤로 전환
본문 바로가기, 44px 조작 영역, 명확한 상태 문구
내부 자료와 개인정보의 API·HTML·로그 노출 0건
운영 flat 상세 URL을 canonical 또는 301로 안전하게 전환
READY FOR IMPLEMENTATION