시공 기사용 현장 점검 앱
가구 · 인테리어 회사의 방문 기사가 고객 집에서 점검 항목과 고객 요청사항, 점검 결과를 기록하는 사내 앱을 혼자 개발했습니다. 이 회사는 주방 · 욕실 시공과 가구 설치를 소속 기사가 직접 맡고, 설치 뒤의 사후 서비스(AS) 방문도 소속 기사가 나갑니다. 점검 항목은 종류도 입력 방식도 제각각이고, 기사는 현장 상황에 따라 태블릿과 스마트폰을 모두 씁니다. 기록이 빠지거나 뒤섞이면 고객 요청이 제대로 처리되지 않아, 화면 전환과 입력 상태를 하나하나 점검했습니다.
종류가 다른 점검 항목을 한 화면 흐름에 담은 점검표
현장 점검 앱의 점검 항목은 종류와 입력 방식이 다양합니다. 유형마다 화면을 따로 만들지 않고, 여러 유형의 항목을 하나의 화면 흐름 안에서 일관된 모양으로 보여 줬습니다. 기사가 현장에서 빠르게 확인하고 입력할 수 있도록 항목의 정보 구조와 입력 순서를 정리했습니다.

고객 요청사항과 점검 결과를 빠짐없이 남기는 기록 화면
방문 기사는 설치 뒤 사후 서비스 방문에서 점검을 하면서 고객 요청사항과 점검 결과를 앱에 기록합니다. 현장 업무는 그 자리에서 여러 일이 겹치기 쉬워, 입력이 빠지거나 다른 내용과 섞이는 일이 생깁니다. 화면을 오가는 동안 입력한 내용이 사라지거나 어긋나지 않도록 화면 전환과 입력 상태를 점검했습니다.

태블릿과 스마트폰에서 같은 기능을 쓰는 반응형 배치
방문 기사는 현장 상황에 따라 태블릿과 스마트폰을 모두 씁니다. 기기마다 다른 해상도와 화면 방향, 입력 영역을 고려해, 같은 기능을 어느 기기에서든 무리 없이 쓸 수 있게 구성했습니다. 화면 하나의 설계가 두 기기 크기에 맞춰 늘고 줄도록 만들었습니다.

편의 기능 없이 배치 규칙만으로 맞춘 다항목 레이아웃
현장 점검 앱을 만들던 당시의 개발 환경에는 화면 요소를 자동으로 줄 세워 주는 편의 기능이 제한적이었습니다. 항목이 많은 점검 화면은 요소 사이의 간격과 정렬을 하나하나 규칙으로 정해 맞췄고, 그 규칙이 태블릿과 스마트폰 양쪽에서 안정적으로 맞는지 확인했습니다. 이 앱은 대표가 독립 개발자로서 처음 혼자 끝까지 완수한 프로젝트입니다.

이 작업의 포인트
종류와 입력 방식이 다른 점검 항목을 한 흐름에 담은 화면
점검 결과와 고객 요청사항을 빠짐없이 남기는 기록 흐름
태블릿과 스마트폰 어느 쪽에서도 같은 기능
인사이트
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



