작업자 앱
연결 끊김설비 A 점검 01
내용과 예시 사진을 준비한 뒤 저장하세요.
등록된 전송 대상 없음
개발 기술 · 더 알아보기 · 직접 체험형
기기에 적은 내용, 기기에 보관한 내용, 서버가 접수한 내용, 관리자가 확인한 업무는 각각 다른 상태입니다. 같은 점검 기록 한 건을 따라 어디까지 반영됐고 무엇이 남았는지 살펴봅니다.
기기 저장
필터 교체 필요
전송 대기
보낼 기록 1건
서버 접수
내용·사진 수신
연결 복구 → 직접 보내기 → 접수 결과 확인
관리자에게 같은 기록 반영
자료가 도착해도 업무 확인은 남습니다.
먼저 이해할 내용
연결이 끊겨도 작성하도록 설계한 앱은 내용을 기기에 보관하고 보낼 기록으로 남길 수 있습니다. 연결이 돌아온 뒤 그 기록을 보내고, 해당 기록의 서버 저장 결과를 확인해야 다른 사람의 업무 화면으로 이어집니다. 서버에 도착한 뒤에도 사진 전송이나 관리자 확인이 남아 있을 수 있습니다.
기기에 보관
전송 대기
재연결과 서버 확인
반영 결과와 남은 일
실제 흐름으로 이해하기
점검 내용과 예시 사진을 준비한 뒤, 안내되는 버튼을 눌러 보세요. 같은 기록이 작업자 앱에서 서버와 관리자 화면으로 이어지는 과정을 살펴봅니다.
가상 설계 예시 · 실제 기기 저장·서버 통신 없이 이 화면의 메모리에서만 작동합니다.
작업자 앱
연결 끊김내용과 예시 사진을 준비한 뒤 저장하세요.
등록된 전송 대상 없음
서버에 보관된 기록
현재 보관된 점검 내용
서버가 받은 사진
0/1개관리자 확인 화면
점검 기록 목록 · 가상 1건
교육용 세 경로를 늘리지 않는 검수 조건입니다. 서버의 처리와 기기가 아는 결과를 나눠 확인할 수 있습니다.
저장·전달의 기본
현장 담당자가 미리 내려받아 열어둔 ‘설비 A 점검 01’을 예로 들어보겠습니다. 기록 번호는 INS-A-001이고, 기존 내용은 ‘점검 전’입니다. 현장에서 인터넷이 끊긴 동안 담당자는 ‘필터 교체 필요’를 적고 예시 사진 한 개를 첨부합니다.
이 글의 화면과 기록은 이해를 돕기 위한 가상 설계 예시입니다. 사진 한 개가 있어야 전체 제출이 끝나는 업무로 정했습니다. 기본 흐름은 앱을 열어둔 상태에서 담당자가 다시 보내는 방식입니다. 오프라인에서 새 작업 목록을 서버에 조회하거나, 앱을 닫아도 자동으로 전송하는 기능까지 가정하지 않습니다.
먼저 화면에는 ‘작성 중 · 아직 저장하지 않음’이 보입니다. 글이 입력칸에 있다는 사실만으로 기기 저장이나 서버 접수가 끝난 것은 아닙니다. 서버와 관리자 화면에는 여전히 기존 내용인 ‘점검 전’이 남아 있습니다.
담당자가 ‘기기에 저장’을 누릅니다. 앱이 내용과 예시 사진을 기기에 보관한 결과를 확인한 뒤에야 ‘이 기기에 저장됨’을 표시합니다. 바로 아래에는 ‘서버에는 아직 보내지 않았습니다’라고 적습니다.
이제 담당자의 기기에는 ‘필터 교체 필요’가 있지만, 서버에는 아직 새 내용이 없습니다. 사무실 관리자도 바뀐 내용을 볼 수 없습니다. 같은 기록 번호를 두 화면에 표시하면 어디까지 전달됐는지 비교할 수 있습니다.
저장에 실패했다면 안내도 달라져야 합니다. ‘기기에 저장하지 못했습니다. 입력 화면을 유지하고 다시 저장해 주세요’처럼 남은 행동을 알려야 합니다. 이 상태에서 저장 완료 표시를 하거나 전송 대기로 넘기면 안 됩니다.
또한 기기 보관을 영구 보관으로 약속해서는 안 됩니다. 웹 앱의 브라우저 저장은 용량, 브라우저 설정과 사용자의 데이터 삭제 등의 영향을 받습니다. 이 설명은 웹 저장에 관한 것이며 모든 네이티브 앱의 보관 방식에 그대로 적용되는 것은 아닙니다. MDN 브라우저 저장 보존과 삭제 조건
기기 저장은 내용을 보관하는 일이고, 전송 대기는 그중 서버에 보낼 기록을 구분하는 일입니다. 두 행동을 버튼 하나로 묶는 앱도 있지만, 그 경우에도 저장과 대기 등록이 실제로 끝났는지 확인해야 합니다.
담당자가 ‘전송 대기에 넣기’를 누릅니다. 이 예시에서는 저장된 점검 기록을 보낼 대상으로 등록한 뒤 ‘기록 전송 대기 1건’을 보여줍니다. 점검 상세에는 ‘연결 후 이 기록을 다시 보내 주세요’라는 안내가 붙습니다.
관리자 화면은 여전히 ‘점검 전’입니다. 서버에 없는 새 내용을 관리자가 이미 받은 것처럼 표시하지 않습니다. 담당자는 남은 한 건을 대기 목록에서 다시 찾을 수 있어야 합니다.
연결 아이콘이 켜졌다는 이유만으로 ‘전송 완료’를 표시해서는 안 됩니다. 브라우저의 온라인 표시는 네트워크 연결의 단서이며 서비스 서버에 도달했다는 보장이 아닙니다. 기록 접수 여부는 그 기록의 저장 결과로 따로 확인해야 합니다. MDN 온라인 표시의 한계
인터넷 연결이 돌아오면 담당자가 앱에서 ‘다시 보내기’를 누릅니다. 화면은 ‘전송 중 · 서버 접수 확인 전’으로 바뀝니다. 그동안 앱은 보관한 내용과 사진을 보내고, 서버는 같은 기록 번호의 현재 내용과 변경 여부를 확인합니다.
응답을 받지 못했을 때도 구분이 필요합니다. 서버에 저장됐을 수도 있으므로 ‘결과 확인 필요’라고 안내하고, 기존 처리 결과를 확인할 방법을 제공합니다. 곧바로 성공이라고 하거나 서버에 전혀 반영되지 않았다고 단정하지 않습니다. 재전송과 중복 방지의 자세한 과정은 요청이 실패하거나 두 번 전송되면 서버는 어떻게 처리할까요?에서 이어서 볼 수 있습니다.
실시간 통신을 사용하는 앱도 재연결과 기록 저장 확인을 구분해야 합니다. 통신 방식 자체가 궁금하다면 실시간 통신·WebSocket을 참고하세요.
관리자 목록에도 같은 번호의 ‘필터 교체 필요’가 보입니다. 업무 상태는 ‘확인 대기’입니다. 관리자가 기록을 열면 점검 내용과 사진을 확인할 수 있지만, 화면을 열었다는 사실만으로 점검이 승인되거나 필터 교체 업무가 끝나는 것은 아닙니다.
정상 흐름에서는 서버가 INS-A-001의 새 내용과 사진 한 개를 저장하고 그 결과를 돌려줍니다. 담당자 앱은 해당 기록과 첨부 상태를 확인한 뒤 ‘서버 접수 확인 · 사진 1/1개 접수’를 표시합니다.
이 예시에서 서버 접수는 점검 자료가 도착했다는 뜻입니다. 점검 결과를 받아들일지, 교체를 지시할지, 보완을 요청할지는 정한 업무 규칙과 담당자 판단에 따라 이어집니다. 필터 교체 필요라는 기록을 받았는데 ‘업무 완료’로 표시하면 실제 남은 일을 놓칠 수 있습니다.
예외마다 다른 다음 행동
담당자 앱에는 ‘본문 접수 · 사진 전송 대기 1개’, 관리자에게는 ‘확인 대기 · 사진 0/1개’를 보여줍니다. 필요한 사진이 남았으므로 전체 제출 완료나 점검 승인으로 표시하지 않습니다.
남은 행동은 현장 담당자가 ‘사진 다시 보내기’를 누르는 것입니다. 이미 접수 확인된 본문을 새 기록으로 만들 필요는 없습니다. 사진까지 접수됐다는 결과를 받으면 ‘사진 1/1개 접수’로 바뀌고, 관리자 확인은 계속 남아 있습니다. 본문 선접수는 이 예시의 정책이며 모든 앱이 이렇게 나누어 처리하는 것은 아닙니다.
사진 전송이 중간에 끊겼다고 가정해 보겠습니다. 이 예시는 본문을 먼저 접수할 수 있도록 정했으므로, 서버와 관리자에게 ‘필터 교체 필요’는 보이지만 사진은 아직 없습니다.
기기에서 작성할 때 참고한 것은 3번 버전이고, 서버에는 이미 4번 버전이 있습니다. 이 예시는 변경이 겹친 사실을 확인하면 새 내용을 바로 덮어쓰지 않고 ‘내용 비교 필요’로 멈춥니다. 버전은 기록이 바뀐 순서를 구분하는 표시입니다.
| 비교할 내용 | 값 |
|---|---|
| 작성할 때 참고한 내용 · 3번 버전 | 점검 전 |
| 이 기기에서 작성한 내용 | 필터 교체 필요 |
| 서버에 먼저 반영된 내용 · 4번 버전 | 필터 교체 완료 |
이번에는 사진 문제가 아니라 내용 문제입니다. 현장 담당자가 ‘필터 교체 필요’를 적는 동안 다른 담당자가 같은 항목을 ‘필터 교체 완료’로 바꿨다고 가정해 보겠습니다.
현장 담당자의 작성본과 서버의 현재 값을 보존합니다. 이 예시에서는 관리자가 확인 담당을 맡아 두 담당자에게 사실을 확인하고 반영할 내용을 정합니다. 정해진 내용은 기기에 다시 저장한 뒤 현재 서버 내용을 기준으로 제출합니다. 그사이에 서버가 또 바뀌었는지도 다시 확인해야 합니다.
‘가장 늦게 적힌 내용을 무조건 채택한다’는 규칙만으로는 어떤 점검 내용이 맞는지 알 수 없습니다. 같은 내용을 다른 사람이 바꿨다면 단순히 다시 보내기보다 내용 확인이 먼저입니다. 변경 기준을 확인한 뒤에만 쓰기를 허용하는 기술적 방법도 있습니다. MDN 다른 변경을 덮어쓰지 않도록 확인하는 If-Match
발주 전에 정할 내용
오프라인 기능을 요청할 때 ‘인터넷 없이도 사용 가능’이라는 문장만 적으면 어디까지 가능한지 모호합니다. 다음 네 가지를 정하면 입력 화면과 관리자 업무를 함께 확인할 수 있습니다.
오프라인에서 할 일: 미리 받은 점검의 내용 작성과 사진 첨부까지 필요한가요? 새 작업 조회나 현장 업무 완료까지 필요한지 따로 정하세요.
저장 장소: 기기에 무엇을 보관하며, 저장에 실패하면 무엇을 안내하나요? 서버에 보내기 전 기기나 브라우저의 데이터를 지웠을 때도 확인해야 합니다.
전송 상태: 미전송, 전송 중, 결과 확인 필요, 본문 접수, 사진 접수를 각각 볼 수 있나요? 무엇을 확인해야 전체 제출과 업무 완료로 바뀌는지도 정하세요.
예외 담당: 사진은 누가 다시 보내고, 서로 다른 내용은 누가 확인하나요? 관리자에게 무엇이 남았는지 보여주고 후속 행동을 연결하세요.
예를 들어 개발 요청서에는 이렇게 적을 수 있습니다.
미리 받은 점검을 오프라인에서 작성하고 사진 한 개와 함께 기기에 저장합니다. 보낼 기록을 대기 목록에서 확인하며, 앱을 열어둔 상태에서 담당자가 다시 보냅니다. 서버의 본문·사진 접수 결과와 관리자 확인 대기를 나눠 표시합니다. 사진이 남으면 현장 담당자가 재전송하고, 내용이 겹치면 지정 담당자의 확인 전에는 덮어쓰지 않습니다.
현재 업무의 역할과 예외부터 정리해야 한다면 기존 업무를 앱으로 바꾸기 전 측정할 7가지를 함께 확인하세요.
기기에 보관한 내용이 서버와 관리자 화면으로 이어지려면 저장 장소, 전달 결과, 남은 행동이 같은 기록 안에서 연결돼야 합니다. ‘저장됐습니다’라는 한 문장 대신 무엇이 어디까지 반영됐는지 보여주는 것이 이 과정의 핵심입니다.
확인할 내용
판단 기준
연결이 약한 곳에서 작성하는 기록과 사진, 확인할 담당자를 알려주세요. 오프라인에서 할 일과 기기 보관, 전송 상태, 사진·내용 충돌의 처리 기준을 함께 정리합니다.