야야, 현장 식구들아. 오늘은 오래 망설이다가 꺼내는 얘기입니다. 부끄럽기도 하고, 뿌듯하기도 한 그런 이야기입니다.
현장에 들어온 지 1년 됐는데, 그동안 계속 불만이 하나 있었습니다. 사진 찍을 때마다 장갑 벗고, 폰 꺼내고, 코딱지만 한 버튼 눌러서 찍고, 메모장 열어서 날짜 적고, 카톡으로 보내고… 이 다섯 단계를 매일 수십 번씩 반복하는 겁니다. “왜 현장 사람 입장에서 만든 앱은 단 하나도 없는 거고?” 이 고민이 쌓이고 쌓여서 결국 지난 주말, 직접 만들어버렸습니다.
코딩? 한 줄도 못 씁니다. 그래도 만들었습니다. 어떻게? 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자동화 #공구리닷컴
💬 등록된 댓글 목록 (0개)
등록된 댓글이 없거나 관리자 승인 대기 중입니다.
댓글 달기