--fs-display
데스크톱 36px / 모바일 28px (볼드 800) · 줄간격 --lh-tight (1.3)
출발부터 정리까지 한 치의 불안 없는 온전한 이사
용도: 첫 화면 메인 표제어 및 핵심 캐치프레이즈. 방문자에게 가장 강렬하고 명확한 첫인상을 전달합니다.
온길이사 UI/UX 디자인 시스템 가이드
위시켓 158308 공고 「이사 서비스 웹사이트 UI/UX 전면 리뉴얼」에서 요구한 결과물 기준에 맞춰, 실제 사이트 전면에 적용된 디자인 토큰(컬러·글자·간격·모서리)과 인터랙티브 공통 부품 규격을 눈으로 직접 확인하실 수 있는 시스템 명세 화면입니다. 색상 스위치를 누르면 본 문서 안의 컬러 스와치와 모든 부품이 즉시 동기화되어 전환됩니다.
1. 컬러 시스템 (Color Tokens)
화면의 모든 색상은 tokens.css 에 선언된 변수로만 구동됩니다. 임의의 색상값을 개별 태그에 직접 지정하지 않고 목적에 따른 시맨틱 토큰을 부여하여, 테마 스위치를 누르면 페이지 전체가 한꺼번에 전환됩니다.
실시간 테마 색상 연동 체험
버튼을 클릭하면 아래의 색상 네모들이 즉각 새로운 테마 값으로 전환되는 모습을 확인하실 수 있습니다.
1.1 브랜드 주색상 (Brand & Primary)
서비스 전반의 안정감과 신뢰도를 좌우하는 대표 색상군입니다.
주색
--c-primary
브랜드 대표 주색상
상단 헤더 텍스트, 주요 활성 탭, 서비스 핵심 표제에 기본 적용
현재 적용 상태
연동 중
짙은 주색
--c-primary-dark
고대비 짙은 주색
상단 공지 알림 띠, 조작 패널 머리띠, 시각적 대비가 필요한 바탕에 적용
현재 적용 상태
연동 중
연한 주색
--c-primary-soft
은은한 파스텔 배경
신뢰 뱃지 바탕, 활성 버튼 배경, 온화한 하이라이트 박스에 적용
현재 적용 상태
연동 중
1.2 행동 유도 및 전환 강조색 (Accent & Action)
고객의 시선을 끌고 견적 신청 등 결정적 행동을 이끄는 전용 색상군입니다.
전환 강조
--c-accent
행동 유도 핵심색
간편 견적 신청 버튼, 주요 확인 버튼, 키보드 초점 테두리에 적용
현재 적용 상태
연동 중
누름 반응
--c-accent-dark
버튼 호버 및 클릭
마우스 커서를 올리거나 손끝으로 누를 때 즉각적인 반응감을 제공
현재 적용 상태
연동 중
1.3 안심 보증 및 상태 표식 (Verification & Status)
허가 등록증, 적재물 배상책임보험 등 공인된 신뢰성을 증명하는 색상군입니다.
안심 인증
--c-verify
공인 허가 및 보험 보증
화물운송주선 정식 등록, 파손 보상 안심 마크, 필수 인증 표시에 적용
현재 적용 상태
연동 중
안내 정보
--c-info
법적 기준 및 규정 안내
약관 세부 조항, 계약 주의 문구, 규정 안내 박스에 적용
현재 적용 상태
연동 중
1.4 배경, 표면 및 구분선 (Surface & Line)
정보의 계층을 편안하게 구분 짓고 눈의 피로를 덜어주는 밑바탕 색상군입니다.
기본 바탕
--c-bg
전체 화면 배경
순백의 눈부심을 덜고 장시간 견적 확인 시 눈의 피로를 줄여주는 밑바탕
현재 적용 상태
연동 중
카드 표면
--c-surface
콘텐츠 컨테이너 표면
안내 카드, 폼 입력창, 겹쳐 뜨는 창 등 정보가 얹히는 깨끗한 표면
현재 적용 상태
연동 중
경계선
--c-line
구분선 및 외곽선
카드 테두리, 입력 상자 외곽선, 대단락 구분선에 부드럽게 적용
현재 적용 상태
연동 중
1.5 본문 및 텍스트 명도 (Typography Contrast)
정보의 중요도에 맞춰 시각적 위계를 자연스럽게 나누는 글자 색상군입니다.
주 본문
--c-text
핵심 표제 및 기본 본문
가장 높은 명도 대비를 제공하여 글자가 또렷하게 읽히는 기준 텍스트
현재 적용 상태
연동 중
보조 설명
--c-text-sub
설명 문단 및 부가 정보
카드 부가 설명글, 입력창 라벨 문구, 단락 해설에 편안하게 적용
현재 적용 상태
연동 중
흐린 글자
--c-text-mute
비활성 및 힌트 문구
입력 예시 자리표시자, 하단 카피라이트 표기, 비활성 텍스트에 적용
현재 적용 상태
연동 중
2. 타이포그래피 (Typography)
모든 환경에서 일관된 가독성을 선사하는 Pretendard 서체를 적용하고, 6단계 크기와 2단계 줄간격으로 체계화했습니다. 특히 모바일 기기에서 16px 미만 입력창 클릭 시 화면이 강제로 확대되어 레이아웃이 어긋나는 문제를 방지하고자 본문 기본 크기를 16px로 엄격히 고정했습니다.
--fs-title
데스크톱 24px / 모바일 20px (볼드 700) · 줄간격 --lh-tight (1.3)
믿을 수 있는 온길이사 핵심 안심 보증 체계
용도: 주요 서비스 단락 및 핵심 섹션 대제목 (h2). 검색 최적화(SEO) 위계 구조의 기둥 역할을 담당합니다.
--fs-sub
데스크톱 20px / 모바일 18px (세미볼드 600) · 줄간격 --lh-tight (1.3)
가정 포장 이사 · 전문 패커 맞춤 전담팀 배차
용도: 세부 안내 카드 소제목 (h3), 팝업 레이어 헤더, 옵션 그룹 제목에 사용됩니다.
--fs-btn
데스크톱 17px / 모바일 16px (세미볼드 600) · 줄간격 1.0
내 이사 예상 견적 알아보기
용도: 전환 단추 전용 글자 크기. 손가락 터치 시 가장 균형감 있게 눈에 들어오도록 독립 설정되었습니다.
--fs-body
16px 고정 (레귤러 400 ~ 미디엄 500) · 줄간격 --lh-body (1.6)
현장 추가금 걱정 없는 사전 확정 견적과 100% 적재물 배상책임보험 가입으로 운송 중 만에 하나의 파손도 완벽히 대비합니다.
이사 당일 전문 팀장이 현장 동선을 먼저 점검하고 보강재를 빈틈없이 설치한 뒤 안전하게 작업을 시작합니다.
용도: 서비스 설명문, 안내 카드 본문, 일반 읽기 텍스트. 모바일 브라우저의 폼 입력 시 자동 화면 확대 버그를 예방합니다.
--fs-caption
14px (미디엄 500) · 줄간격 --lh-tight (1.3)
※ 손없는날 및 월말 이사 일정은 조기 마감될 수 있으니 최소 2주 전 사전 예약을 권장합니다.
용도: 상태 뱃지 라벨, 입력 도움말, 유의사항 및 하단 법적 필수 고지 표기에 적용됩니다.
3. 간격 및 모서리 규격 (Spacing & Radius)
8px 배수 체계를 엄격히 준수하여 화면 전체의 여백에 질서와 리듬감을 부여했습니다. 모서리 곡률 또한 부품의 크기에 맞게 4단계로 규격화하여 통일된 안정감을 전달합니다.
3.1 8px 배수 여백 체계 (Spacing Scale)
화면의 틈과 안쪽 여백을 결정하는 7가지 기본 단위입니다.
아이콘과 글자 간격, 뱃지 안쪽 여백, 버튼 사이 최소 틈
기본 입력칸 좌우 여백, 모바일 화면 좌우 기본 패딩
카드 내부 패딩, 작은 기능 그룹 사이의 간격
카드 간 간격, 태블릿 이상 컨테이너 좌우 여백
섹션 대제목과 콘텐츠 블록 간의 상하 간격
모바일/태블릿 주요 섹션 간의 기본 상하 분리 여백
데스크톱 환경의 시각적 호흡을 위한 대단락 분리 여백
3.2 모서리 곡률 체계 (Border Radius)
요소의 계층과 성격에 따라 4단계로 규격화된 모서리 형태입니다.
8px
--r-input
버튼, 텍스트 입력창, 선택 드롭다운 등에 적용되는 단정하고 절제된 곡률
12px
--r-card
서비스 안내 카드, 견적 옵션 블록, 상태 박스에 적용되는 부드러운 곡률
16px
--r-modal
화면 중앙에 겹쳐 뜨는 팝업 창, 상세 레이어에 적용되는 넉넉한 곡률
999px
--r-chip
상태 안내 뱃지, 태그 칩, 토글 캡슐에 적용되는 완전한 원형 곡률
4. 아이콘 시스템 (Iconography)
외부 이미지 파일을 일절 쓰지 않고 화면 안에 직접 그린 순수 인라인 SVG 방식을 채택했습니다. 네트워크 장애로 인한 이미지 깨짐이 발생하지 않으며, 현재 설정된 테마 색상과 선 굵기를 정밀하게 상속받습니다.
5. 공통 부품 라이브러리 (Components)
온길이사 전 페이지에 적용되는 공통 UI 부품군입니다. 터치 타깃 최소 높이 44px을 만족하며, 오류 상태와 활성화 상태를 실제로 클릭하여 체험할 수 있습니다.
5.1 단추 규격 (Buttons)
모바일 손가락 터치 기준(최소 44px 이상)을 충족하며 상태별로 명확한 시각 피드백을 제공합니다.
모든 버튼은 최소 44px 높이와 명확한 키보드 초점 테두리(2px Accent Ring)를 갖추고 있습니다.
5.2 입력 서식 (Inputs & Forms)
기본 상태와 잘못된 입력 시의 검증 반응을 실제로 시연해볼 수 있습니다.
실명 확인 및 견적서 발송 시 표기됩니다.
휴대폰 번호 형식이 올바르지 않습니다. (10~11자리 숫자)
선택 항목에 따라 최적화된 차량 규격이 자동 매칭됩니다.
필수 안심 옵션 선택 (체크 및 라디오)
5.3 안내 및 선택 카드 (Interactive Cards)
마우스를 올리면 입체적인 깊이(--shadow-2)가 생기며, 클릭 시 활성화 상태로 전환됩니다.
프리미엄 가정 포장 이사
추천 선택
포장부터 도착지 가구 배치, 주방 정리, 스팀 바닥 청소까지 전문 패커 팀이 원스톱으로 책임집니다.
전용 포장재 100% 무상 제공
클릭하여 선택 해제/재선택
알뜰 소형 주거 이사
원룸·소형 주택
짐의 양에 맞춘 맞춤 톤수 배차로 불필요한 운임 거품을 걷어내고 실속 있는 이사를 제공합니다.
전담 드라이버 안심 운송
클릭하여 선택 토글
5.4 전환 탭 (Tabs Navigation)
탭을 클릭하면 내용이 부드럽게 전환되는 동작을 확인하실 수 있습니다.
가정 포장 이사 품질 보증 원칙
사전 방문 견적 또는 비대면 사진 견적을 통해 확정된 금액 외에 당일 현장에서 추가금을 요구하지 않습니다. 모든 침구류와 의류는 전용 위생 비닐로 1차 밀봉한 후 전용 박스에 2차 포장하여 오염을 원천 차단합니다.
소형 주거 이사 맞춤 절차
소형 원룸 및 다세대 주택의 거주 환경에 맞추어 일반 이사, 반포장 이사, 포장 이사 중 원하는 형태를 자유롭게 선택할 수 있습니다. 원룸 특성에 맞춘 효율적인 동선 관리로 운송 시간을 절약합니다.
사무 공간 기업 이전 규격
PC, 서버, 중요 서류함 등 중요 전산 자재에 대한 사전 라벨링 체계를 가동하여 이전 후 업무 공백을 최소화합니다. 주말 및 야간 시간대를 활용한 맞춤 스케줄링을 지원합니다.
5.5 안내 알림 배너 및 겹쳐 뜨는 창 (Alerts & Modal)
고객 공지 배너와 실제 화면 중앙에 열리는 팝업 대화상자를 동작시켜 봅니다.
6. 반응형 화면 분기점 (Breakpoints)
온길이사 웹사이트는 작은 스마트폰 화면을 먼저 고려한 뒤 데스크톱으로 넓혀가는 모바일 우선(Mobile-First) 원칙으로 구성되었습니다. 분기점은 768px 과 1024px 두 곳에서 체계적으로 갈립니다.
- 1열 수직 카드 레이아웃으로 한 손 조작성 극대화
- 화면 하단 고정형 '간편 견적' CTA 단추 항시 노출
- 시안 검토 도구 패널이 본문을 가리지 않도록 작은 단추로 기본 축소
- 글자 크기 자동 조정 (--fs-display 28px, --fs-title 20px)
- 화면 좌우 기본 여백을 16px (--s2) 로 최적화
- 주요 서비스 안내 카드 2열 그리드 전개
- 상단 네비게이션 가로형 메뉴 전체 노출
- 시안 검토 도구 패널이 우측 상단에 기본 확장 형태로 안착
- 입력 폼 영역이 좌우 2단 분할되어 입력 효율 증대
- 화면 좌우 여백을 32px (--s4) 로 넉넉하게 확장
- 최대 너비 1200px (--maxw) 제한으로 시선 분산 방지
- 3열 이상의 다채로운 서비스 그리드 및 상세 정보 배치
- 글자 크기 원본 규격 적용 (--fs-display 36px, --fs-title 24px)
- 마우스 호버 시 자연스러운 그림자 부유 효과 (--shadow-2, lift) 활성화
- 대단락 분리 상하 여백 80px (--s7) 로 여유로운 시각적 호흡
7. 발주 담당자를 위한 디자인 시스템 관리 안내
디자인 시스템은 복잡한 프로그램 코드가 아니라, 회사의 브랜드 기준표를 한곳에 모아둔 중앙 관리실입니다. 전문 기술을 모르셔도 아래 원칙만 이해하시면 손쉽게 사이트 전체를 통제하실 수 있습니다.
"기준표의 숫자 하나만 바꾸면, 수백 개의 웹페이지가 그 자리에서 일제히 옷을 갈아입습니다."
블록 장난감처럼 규격화된 부품
기존의 일반 웹사이트는 버튼 색상이나 글자 크기를 바꾸려면 수십 개의 화면을 일일이 찾아다니며 수정해야 했습니다. 온길이사의 모든 요소는 규격 블록처럼 제작되어 있어, 중앙 관리실의 색상 이름 딱 한 줄만 교체하면 홈페이지 안의 모든 버튼, 링크, 뱃지가 오차 없이 일제히 변경됩니다.
브랜드 개편과 이벤트의 즉시 반영
향후 회사의 대표 색상이 변경되거나 계절별 프로모션을 위해 사이트 전체를 따뜻한 분위기로 전환하고 싶을 때도 며칠씩 디자인 작업을 새로 할 필요가 없습니다. 상단 검토 도구에서 확인하셨듯, 버튼 클릭 한 번으로 신뢰형 분위기에서 설렘형 분위기로 완벽히 변신합니다.
새로운 페이지를 만들 때의 비용 절감
추후 청소 서비스나 가전 렌탈과 같은 신규 안내 화면을 추가할 때도 매번 새로 디자인을 발주할 필요가 없습니다. 이미 규격화되어 준비된 '온길 부품함'에서 단추, 입력칸, 카드를 골라 조립하면 되므로, 제작 기간이 획기적으로 단축되고 어떤 화면에서도 브랜드 고유의 단정한 품질이 일관되게 지켜집니다.