야야, 현장 식구들아. 오늘은 내가 참말로 오래 망설이다가 꺼내는 얘기다카이. 부끄럽기도 하고, 뿌듯하기도 한 그런 이야기라예.
현장에서 30년 넘게 삽질하면서 늘 불만이 하나 있었심더. 사진 찍을 때마다 장갑 벗고, 폰 꺼내고, 코딱지만 한 버튼 눌러서 찍고, 메모장 열어서 날짜 적고, 카톡으로 보내고… 이 다섯 단계를 매일 수십 번씩 반복하는 기라카이. “왜 현장 사람 입장에서 만든 앱은 단 하나도 없는 기고?” 이 고민이 쌓이고 쌓여서 결국 지난 주말, 제가 직접 만들어버렸심더.
코딩? 한 줄도 못 씁니더. 그래도 만들었심더. 어떻게? AI 인부 셋 데리고 팀워크로요.
AI 3각 편대 시공법 — 나는 지시만 했심더
이번 프로젝트 구조를 현장 용어로 딱 설명하면 이렇습니더. 설계사 따로, 현장 반장 따로, 감리단 따로 — 이렇게 삼각편대로 굴린 깁니더.
설계사는 Claude(클로드)가 맡았심더. 전체 앱의 뼈대, 즉 React + Tailwind 기반 아키텍처 도면을 처음부터 끝까지 설계해줬지예. 내가 “현장에서 사진 찍고, 그 위에 줄 긋고, 말로 메모 남기는 앱 만들어라”고 지시하면, 클로드가 전체 설계도를 쭉 뽑아내는 기라카이.
현장 반장은 Cursor(커서)가 했심더. 클로드가 그린 도면을 받아서 실제로 코드를 타설하고, 오류 나면 즉각 용접(리팩토링)하는 역할입니더. IDE 안에서 “이 부분 고쳐라” 하면 바로 수정해주는 진짜 삽질꾼이라카이.
감리단은 김반장 챗봇, 즉 제가 만들어놓은 커스텀 AI가 맡았심더. 구조적으로 문제 있는 부분 짚어주고, 방향 잃을 때마다 “이리 가라카이” 하고 나침반 역할을 해줬지예.
이 셋이 돌아가니까 코딩 한 줄 못 하는 소장이 주말 하루 만에 작동하는 앱을 뽑아냈심더. 현장으로 치면 인력 3명이 동시에 투입된 기라카이.
책상머리 UX는 공사판에서 작동 안 한다 — 현장 맞춤 설계 3원칙
내가 현장에서 직접 봤는데, 시중에 나와 있는 카메라 앱들이 전부 사무실 에어컨 아래서 마우스 쥐고 만든 티가 팍팍 납니더. 장갑 낀 손, 직사광선, 바쁜 작업 — 이 세 가지를 1도 고려 안 한 기라카이. 그래서 이번 앱은 딱 세 가지 원칙으로 설계했심더.
첫째, 왕버튼(80px 이상). 장갑 낀 손가락으로 눌러도 삑사리 안 나게 셔터 버튼을 화면의 1/5 크기로 박아넣었심더. 일반 앱 버튼이 44px인 거랑 비교하면 — 현장으로 치면 볼트 구멍이 두 배 커진 기라카이. 오작동이 반 이상 줄어들었심더.
둘째, OLED 검정 바탕에 노란색 대비. 뙤약볕 아래서 화면이 하얗게 날아가는 거 경험해보신 식구들 많을 깁니더. 배경을 완전 블랙으로 깔면 직사광선에서도 시인성이 확 살아나고, OLED 특성상 배터리도 최대 30% 절약됩니더. 현장으로 치면 형광 조끼랑 안전 헬멧 노란색이 어두운 현장에서도 눈에 잘 띄는 거랑 똑같은 원리라카이.
셋째, Wakelock API로 화면 꺼짐 방지. 작업 중에 폰 화면이 꺼져서 다시 켜고 장갑 벗고 잠금 해제하는 그 수고를 싹 없앴심더. 앱 켜놓으면 화면이 절대 안 꺼지는 기라카이.
찍고, 긋고, 말하기 — 3단 타설 공법의 완성
앱 사용 흐름은 현장 작업 순서 그대로입니더. 복잡한 거 없심더.
1단계 찍기(Capture). 거대한 셔터 버튼 한 방이면 끝. 볼륨 버튼 연동까지 해서 폰을 가로로 쥐고 찍어도 됩니더.
2단계 긋기(Draw). 찍은 사진 화면 위에 HTML5 Canvas로 빨간 선을 쓱쓱 그을 수 있심더. “이 파이프 결합 부위가 문제다” 싶으면 원 그리고 화살표 그어서 딱 짚어주는 기라카이. Undo 버튼도 달려있어서 잘못 그으면 바로 지울 수 있심더.
3단계 말하기(Speak). 키보드 안 쳐도 됩니더. 마이크 버튼 누르고 “파이프 결함 확인, 수리 요청”이라고 말하면 ko-KR 음성 인식으로 텍스트가 자동 입력됩니더. 장갑 낀 채로, 폰 화면 안 봐도 됩니더.
저장하면 날짜·시간 워터마크가 사진에 자동으로 박히고, 카카오톡 공유 버튼 한 번이면 현장 단톡방에 바로 올라갑니더. 현장으로 치면 보고서 작성부터 송부까지 기존 5단계가 1단계로 줄어든 기라카이.
배포도 1분이면 끝 — 앱스토어? 그딴 거 없어도 됩니더
만들고 나서 배포가 또 걱정이었심더. 앱스토어 심사 몇 주씩 기다리고, 개발자 계정 비용 내고… 그런 거 다 필요 없었심더.
GitHub에 코드 올리면 Vercel이 자동으로 감지해서 1분 안에 배포 완료됩니더. 그 주소를 폰 홈 화면에 추가하면 — 네이티브 앱처럼 아이콘도 생기고, 전체 화면으로 실행됩니더. 이게 바로 PWA(Progressive Web App)의 핵심이라카이. 현장으로 치면 가설 건물인데 본 건물처럼 쓸 수 있는 기라카이. 심사 없이 즉시 배포, 업데이트도 그냥 코드 올리면 끝입니더.
김반장의 현장 한마디
내가 현장에서 직접 봤는데, 소장님들 중에 “나는 IT 몰라서…” 하고 손 놓고 계신 분들이 억수로 많습니더. 근데 이번에 확실히 알았심더. 코딩을 아는 게 중요한 게 아니라, 현장 문제를 정확하게 짚는 능력이 핵심이라카이.
클로드한테 “현장 반장이 장갑 끼고 써야 하는 앱”이라고 한 줄 던진 순간부터, AI가 알아서 현장 친화적인 설계를 뽑아냈심더. 기술이 아무리 좋아도 문제를 정확히 아는 사람이 지휘해야 돌아가는 기라카이.
완벽한 앱을 만들려다 1년 걸리는 것보다, 내일 당장 현장에서 쓸 수 있는 함바집(MVP)이 먼저라카이. 우리 소장님들도 이제 AI라는 오함마 들고 자기만의 연장 직접 깎아낼 시대가 왔심더. 공구리닷컴이 그 앞길 단디 닦아드리겠심더.
더 많은 현장 장비 정보는 공구리닷컴에서 확인하이소!
삽질은 이제 그만! 장비빨로 사옥 공기 단축 하입시더!
#PWA앱개발 #Cursor코딩 #현장앱 #AI자동화 #공구리닷컴
