App 04냉난방 · 설비 A/S 현장 앱 (B2B)

다녀감
Danyeogam

다녀감

다녀간 곳이 단골이 됩니다

1~5인 냉난방·설비 A/S 사업자(사장님 = 기사)를 위한 현장 앱. 하루 동선 → 현장 7단계(장비 QR · 사진 · 체크 · 금액 동의 · 서명 · 결제) → 작업확인서·보증서, 그리고 장비에 붙인 QR 스티커와 다시 부를 고객 레이더로 다음 매출까지 잇습니다.

현장 7단계QR 장비 스티커수요 레이더라이트 · 다크 · 햇빛

분야: B2B · 현장 서비스
대상: 1~5인 냉난방·설비 A/S 사업자(사장님이 곧 기사)
작업 범위: 서비스 기획 · 리서치, UX/UI 디자인, 인터랙티브 HTML 프로토타입, 디자인 시스템(토큰 · 아이콘 · 서체), 자동 QA, Flutter 이전 가이드
구분: 자체 기획 컨셉 프로젝트 · 모바일 앱(iOS · Android)

Overview

무엇을 풀었나

대상 — 1~5인 냉난방·설비 A/S 사업자(사장님이 곧 기사)

01문제

작은 A/S 사업자는 엑셀·카톡 단톡방·종이 확인서로 일합니다. 리드 플랫폼은 첫 고객만 데려오고, 다음 점검 시기는 아무도 챙기지 않습니다. 수요는 계절에 몰립니다(에어컨 6~8월, 보일러 가을).

02해결

현장 한 건을 7단계로 끝내고, 장비에 붙인 QR 스티커가 다음 A/S 요청을 받아 오며, 12개월 수요 레이더가 성수기 전에 미리 부를 고객을 알려 줍니다.

03디자인 언어

Hi-Vis Tag. 안전조끼의 형광 연두, 구멍 뚫린 점검 태그와 절취선, 펀치 구멍. 끝난 일은 뚫립니다. 장갑 낀 손과 한낮의 현장을 기준으로 크기와 대비를 정했습니다.

Key features

핵심 기능

다녀감을(를) 다르게 만드는 4가지

01

장비가 영업한다 — QR 스티커

40×60mm 스티커를 장비에 붙입니다. 기사가 찍으면 그 장비의 이력이 열리고, 고객이 찍으면 앱 설치 없이 웹 보증서와 ‘A/S 요청하기’가 열립니다.

인쇄용 스티커 SVG · A4 시트 제공
고객용 웹 보증서 · A/S 요청 → 접수함

02

다시 부를 고객 레이더

냉방·난방 12개월 수요 막대 위에 한 달 처리 한도선을 겹칩니다. 예시 데이터에서 6·7월이 한도를 51건 넘으면, 4~5월 조기 점검 안내를 먼저 제안합니다.

계절 수요 vs 처리 한도 시각화
대상 고객 묶음 → 안내 메시지 캠페인

03

장갑 낀 손을 위한 현장 모드

7단계 펀치 카드로 지금 어디까지 했는지 한눈에 보입니다. 64pt 버튼, 밀어서 확인, 한낮용 햇빛 모드까지 현장 조건을 기준으로 설계했습니다.

전후 사진 비교 · 음성 메모
금액 동의 → 서명 → 결제 → 작업확인서

04

붙여넣기 접수

고객이 보낸 메시지를 붙여넣으면 이름·전화·주소·희망 시간을 읽어 접수 카드로 만들고, 비어 있는 시간을 바로 제안합니다.

메시지 파싱 → 빈 시간 슬롯 제안
접수 QR로 고객이 직접 입력

All screens

전체 화면 110장

모든 화면은 실제로 동작하는 HTML 프로토타입에서 자동 촬영했습니다. 화면을 누르면 크게 볼 수 있어요.

크게 보기에서 ← → 키 또는 좌우로 밀어 넘기기

오늘

4

01오늘
02오늘 · 다시 부를 고객
03오늘 · 이동 중
53오늘 · 예약 없음

작업 · 이동

4

04작업 상세
05작업 상세 · 장비·메모·금액
06출발 알림 보냄
07길찾기 앱 고르기

현장 7단계

17

08현장 1 · 장비 확인
09현장 · 새 스티커 붙이기
10QR 스캔 · 찾는 중
11QR 스캔 · 확인
12QR 스캔 · 새 스티커 연결
13현장 2 · 작업 전 사진
14사진 촬영
15현장 3 · 체크리스트
16음성 메모
17현장 4 · 작업 후 사진
18전후 비교
19현장 5 · 금액
20추가 작업 동의(고객 화면)
21현장 6 · 서명
22현장 6 · 수신 동의
23현장 7 · 결제
24작업 완료

고객 웹 보증서

4

25고객 화면(웹) · 보증서
26고객 화면 · 관리 기록
27고객 화면 · A/S 요청
28고객 화면 · 요청 보냄

접수

5

29접수함
30새 접수 · 붙여넣기 전
31새 접수 · 붙여넣기 해석
32새 접수 · 빈 시간 제안
33A/S 요청 일정 잡기

일정

2

34일정 · 주
35일정 · 월

고객 · 장비

5

36고객
37고객 상세
38고객 상세 · 기록·수신 동의
39장비 상세
40스티커 다시 인쇄

레이더 · 캠페인

4

41다시 부를 고객
42다시 부를 고객 · 할 일
43점검 시기 안내(정보성)
44미리 예약 안내(광고성)

장부 · 재고

3

45장부
46장부 · 받을 돈
47트럭 재고

설정

2

48설정
49알림톡 템플릿

온보딩

3

50온보딩 1 · 약속
51온보딩 2 · 업종
52온보딩 3 · 스티커

Design system

디자인 시스템

색 · 서체 · 아이콘을 DTCG 토큰 JSON과 SVG 에셋으로 정리해 그대로 개발에 넘깁니다.

색 라이트 · 다크 토큰

라이트

콘크리트 bg#ECEEE8

surface#FFFFFF

네이비#0E1A2B

textMuted#465163

하이비즈#D6F21B

반사띠#C3CAD3

상태

blue#1C57D8

green#0D7240

red#C8242B

amber#9A5A00

냉방#2B79C2

난방#C27C0E

다크

bg#0A111B

surface#131C29

text#EEF1EC

belt#03070D

하이비즈#D6F21B

band#5B6676

서체 OFL 라이선스

오늘 현장 4건

SUIT한글 제목 · 본문 · UI (가변 100–900)

14:07 · AC-0142 · ₩180,000

Barlow Condensed시간 · 금액 · 장비 코드

브랜드 · 에셋

앱 아이콘하이비즈 태그와 펀치 구멍

장비 QR 스티커 — 장비 QR 스티커40×60mm 인쇄용 · A4 시트 SVG 포함

워드마크윤곽선 SVG · 어두운 배경용 별도

아이콘 77종현장 도구 · 장비 · 상태 아이콘

Deliverables & QA

산출물과 품질 검수

보기 좋은 시안에서 멈추지 않고, 개발자가 바로 옮길 수 있는 기준본을 만듭니다.

53화면 상태
(탭 4)

110스크린샷
라이트 53 · 다크 53 · 햇빛 4

77SVG 아이콘

25화면별 명세 문서

7 / 34흐름 7개 · 34단계
자동 검증 통과

63WCAG 대비 쌍(3 스킴)
실패 0

600터치 영역(48 이상) 검사
미달 0

19시각 검수에서
찾아 고친 문제

동작하는 HTML 프로토타입

폰으로 열면 실제 터치로 밀어서 확인 · 서명 · 사진 비교 스크럽을 해볼 수 있습니다. 데스크톱에서는 검수 패널로 모든 화면 · 상태 · 테마(밝게 · 어둡게 · 햇빛)에 바로 갑니다.

Flutter 이전 가이드

토큰 → ThemeExtension 대응, 화면 명세 25편, 인쇄용 스티커 · 앱 아이콘 · 워드마크 윤곽선까지 개발에 바로 넘길 수 있게 정리했습니다.

기술 스택

프로토타입 · 자동 검수

React 19TypeScriptViteTailwind CSS v4MotionZustandPlaywright