개발 기술 · 더 알아보기 · 직접 체험형

인터넷이 끊긴 동안 작성한 내용은 서버에 어떻게 전달될까요?

기기에 적은 내용, 기기에 보관한 내용, 서버가 접수한 내용, 관리자가 확인한 업무는 각각 다른 상태입니다. 같은 점검 기록 한 건을 따라 어디까지 반영됐고 무엇이 남았는지 살펴봅니다.

내용·시연 함께 보기쉽게 보는 핵심 기준

먼저 이해할 내용

기기 저장·서버 접수·업무 확인을 나눠 봅니다

연결이 끊겨도 작성하도록 설계한 앱은 내용을 기기에 보관하고 보낼 기록으로 남길 수 있습니다. 연결이 돌아온 뒤 그 기록을 보내고, 해당 기록의 서버 저장 결과를 확인해야 다른 사람의 업무 화면으로 이어집니다. 서버에 도착한 뒤에도 사진 전송이나 관리자 확인이 남아 있을 수 있습니다.

  1. 01

    기기에 보관

  2. 02

    전송 대기

  3. 03

    재연결과 서버 확인

  4. 04

    반영 결과와 남은 일

실제 흐름으로 이해하기

작성한 점검이 어디까지 전달됐나요?

점검 내용과 예시 사진을 준비한 뒤, 안내되는 버튼을 눌러 보세요. 같은 기록이 작업자 앱에서 서버와 관리자 화면으로 이어지는 과정을 살펴봅니다.

가상 설계 예시 · 실제 기기 저장·서버 통신 없이 이 화면의 메모리에서만 작동합니다.

  1. 01연결 없이 작성
  2. 02기기에 보관
  3. 03전송 대기
  4. 04연결 후 전달
  5. 05반영 결과 확인
지금 할 일
내용을 직접 적거나 예시로 시작해 보세요.

작업자 앱

연결 끊김
INS-A-001

설비 A 점검 01

작성 중 · 아직 저장하지 않음

내용과 예시 사진을 준비한 뒤 저장하세요.

전송 대기기록 0건 · 사진 0개

등록된 전송 대상 없음

서버에 보관된 기록

INS-A-001

설비 A 점검 01

현재 보관된 점검 내용

점검 전

서버가 받은 사진

0/1개
아직 접수된 사진 없음

새 작성본은 아직 도착하지 않았습니다.

관리자 확인 화면

점검 기록 목록 · 가상 1건

새 작성본은 아직 보이지 않습니다.
버전·처리 근거 펼쳐보기
기기 작성 기준
v3 · 점검 전
기기에 보관한 작성본
아직 저장하지 않음
현재 서버 버전
v3
기기가 확인한 접수 결과
접수 확인 전
남은 전송
기록 0건 · 사진 0개
실패·응답 미확인 검수 조건

교육용 세 경로를 늘리지 않는 검수 조건입니다. 서버의 처리와 기기가 아는 결과를 나눠 확인할 수 있습니다.

저장·전달의 기본

저장과 접수는 따로 확인합니다

현장 담당자가 미리 내려받아 열어둔 ‘설비 A 점검 01’을 예로 들어보겠습니다. 기록 번호는 INS-A-001이고, 기존 내용은 ‘점검 전’입니다. 현장에서 인터넷이 끊긴 동안 담당자는 ‘필터 교체 필요’를 적고 예시 사진 한 개를 첨부합니다.

가상 점검의 전제 살펴보기

1. 이미 열어둔 점검 한 건에서 시작합니다

이 글의 화면과 기록은 이해를 돕기 위한 가상 설계 예시입니다. 사진 한 개가 있어야 전체 제출이 끝나는 업무로 정했습니다. 기본 흐름은 앱을 열어둔 상태에서 담당자가 다시 보내는 방식입니다. 오프라인에서 새 작업 목록을 서버에 조회하거나, 앱을 닫아도 자동으로 전송하는 기능까지 가정하지 않습니다.

먼저 화면에는 ‘작성 중 · 아직 저장하지 않음’이 보입니다. 글이 입력칸에 있다는 사실만으로 기기 저장이나 서버 접수가 끝난 것은 아닙니다. 서버와 관리자 화면에는 여전히 기존 내용인 ‘점검 전’이 남아 있습니다.

01

기기에 보관

담당자가 ‘기기에 저장’을 누릅니다. 앱이 내용과 예시 사진을 기기에 보관한 결과를 확인한 뒤에야 ‘이 기기에 저장됨’을 표시합니다. 바로 아래에는 ‘서버에는 아직 보내지 않았습니다’라고 적습니다.

저장 실패·보관 조건 읽기

2. ‘이 기기에 저장됨’은 다른 사람에게 전달됐다는 뜻일까요?

이제 담당자의 기기에는 ‘필터 교체 필요’가 있지만, 서버에는 아직 새 내용이 없습니다. 사무실 관리자도 바뀐 내용을 볼 수 없습니다. 같은 기록 번호를 두 화면에 표시하면 어디까지 전달됐는지 비교할 수 있습니다.

저장에 실패했다면 안내도 달라져야 합니다. ‘기기에 저장하지 못했습니다. 입력 화면을 유지하고 다시 저장해 주세요’처럼 남은 행동을 알려야 합니다. 이 상태에서 저장 완료 표시를 하거나 전송 대기로 넘기면 안 됩니다.

또한 기기 보관을 영구 보관으로 약속해서는 안 됩니다. 웹 앱의 브라우저 저장은 용량, 브라우저 설정과 사용자의 데이터 삭제 등의 영향을 받습니다. 이 설명은 웹 저장에 관한 것이며 모든 네이티브 앱의 보관 방식에 그대로 적용되는 것은 아닙니다. MDN 브라우저 저장 보존과 삭제 조건

02

전송 대기

기기 저장은 내용을 보관하는 일이고, 전송 대기는 그중 서버에 보낼 기록을 구분하는 일입니다. 두 행동을 버튼 하나로 묶는 앱도 있지만, 그 경우에도 저장과 대기 등록이 실제로 끝났는지 확인해야 합니다.

보낼 기록을 남기는 기준 읽기

3. 저장한 기록을 ‘전송 대기’로 남깁니다

담당자가 ‘전송 대기에 넣기’를 누릅니다. 이 예시에서는 저장된 점검 기록을 보낼 대상으로 등록한 뒤 ‘기록 전송 대기 1건’을 보여줍니다. 점검 상세에는 ‘연결 후 이 기록을 다시 보내 주세요’라는 안내가 붙습니다.

관리자 화면은 여전히 ‘점검 전’입니다. 서버에 없는 새 내용을 관리자가 이미 받은 것처럼 표시하지 않습니다. 담당자는 남은 한 건을 대기 목록에서 다시 찾을 수 있어야 합니다.

03

재연결과 서버 확인

연결 아이콘이 켜졌다는 이유만으로 ‘전송 완료’를 표시해서는 안 됩니다. 브라우저의 온라인 표시는 네트워크 연결의 단서이며 서비스 서버에 도달했다는 보장이 아닙니다. 기록 접수 여부는 그 기록의 저장 결과로 따로 확인해야 합니다. MDN 온라인 표시의 한계

전송 중·결과 미확인 읽기

4. 연결이 돌아와도 해당 기록의 접수를 확인해야 합니다

인터넷 연결이 돌아오면 담당자가 앱에서 ‘다시 보내기’를 누릅니다. 화면은 ‘전송 중 · 서버 접수 확인 전’으로 바뀝니다. 그동안 앱은 보관한 내용과 사진을 보내고, 서버는 같은 기록 번호의 현재 내용과 변경 여부를 확인합니다.

응답을 받지 못했을 때도 구분이 필요합니다. 서버에 저장됐을 수도 있으므로 ‘결과 확인 필요’라고 안내하고, 기존 처리 결과를 확인할 방법을 제공합니다. 곧바로 성공이라고 하거나 서버에 전혀 반영되지 않았다고 단정하지 않습니다. 재전송과 중복 방지의 자세한 과정은 요청이 실패하거나 두 번 전송되면 서버는 어떻게 처리할까요?에서 이어서 볼 수 있습니다.

실시간 통신을 사용하는 앱도 재연결과 기록 저장 확인을 구분해야 합니다. 통신 방식 자체가 궁금하다면 실시간 통신·WebSocket을 참고하세요.

04

반영 결과와 남은 일

관리자 목록에도 같은 번호의 ‘필터 교체 필요’가 보입니다. 업무 상태는 ‘확인 대기’입니다. 관리자가 기록을 열면 점검 내용과 사진을 확인할 수 있지만, 화면을 열었다는 사실만으로 점검이 승인되거나 필터 교체 업무가 끝나는 것은 아닙니다.

서버 접수·업무 확인 읽기

5. 서버 접수 뒤에는 관리자 확인이 남습니다

정상 흐름에서는 서버가 INS-A-001의 새 내용과 사진 한 개를 저장하고 그 결과를 돌려줍니다. 담당자 앱은 해당 기록과 첨부 상태를 확인한 뒤 ‘서버 접수 확인 · 사진 1/1개 접수’를 표시합니다.

이 예시에서 서버 접수는 점검 자료가 도착했다는 뜻입니다. 점검 결과를 받아들일지, 교체를 지시할지, 보완을 요청할지는 정한 업무 규칙과 담당자 판단에 따라 이어집니다. 필터 교체 필요라는 기록을 받았는데 ‘업무 완료’로 표시하면 실제 남은 일을 놓칠 수 있습니다.

예외마다 다른 다음 행동

사진이 남은 경우와 내용이 충돌한 경우는 다음 행동이 다릅니다

남은 사진만 재전송

내용은 받았지만 사진 한 개가 아직 도착하지 않았습니다

담당자 앱에는 ‘본문 접수 · 사진 전송 대기 1개’, 관리자에게는 ‘확인 대기 · 사진 0/1개’를 보여줍니다. 필요한 사진이 남았으므로 전체 제출 완료나 점검 승인으로 표시하지 않습니다.

남은 행동은 현장 담당자가 ‘사진 다시 보내기’를 누르는 것입니다. 이미 접수 확인된 본문을 새 기록으로 만들 필요는 없습니다. 사진까지 접수됐다는 결과를 받으면 ‘사진 1/1개 접수’로 바뀌고, 관리자 확인은 계속 남아 있습니다. 본문 선접수는 이 예시의 정책이며 모든 앱이 이렇게 나누어 처리하는 것은 아닙니다.

본문 선접수의 전제 읽기

사진 전송이 중간에 끊겼다고 가정해 보겠습니다. 이 예시는 본문을 먼저 접수할 수 있도록 정했으므로, 서버와 관리자에게 ‘필터 교체 필요’는 보이지만 사진은 아직 없습니다.

양쪽 내용 보존·확인 후 반영

다른 담당자도 같은 점검 내용을 바꿨습니다

기기에서 작성할 때 참고한 것은 3번 버전이고, 서버에는 이미 4번 버전이 있습니다. 이 예시는 변경이 겹친 사실을 확인하면 새 내용을 바로 덮어쓰지 않고 ‘내용 비교 필요’로 멈춥니다. 버전은 기록이 바뀐 순서를 구분하는 표시입니다.

비교할 내용값
작성할 때 참고한 내용 · 3번 버전점검 전
이 기기에서 작성한 내용필터 교체 필요
서버에 먼저 반영된 내용 · 4번 버전필터 교체 완료
내용 비교·반영 기준 읽기

이번에는 사진 문제가 아니라 내용 문제입니다. 현장 담당자가 ‘필터 교체 필요’를 적는 동안 다른 담당자가 같은 항목을 ‘필터 교체 완료’로 바꿨다고 가정해 보겠습니다.

현장 담당자의 작성본과 서버의 현재 값을 보존합니다. 이 예시에서는 관리자가 확인 담당을 맡아 두 담당자에게 사실을 확인하고 반영할 내용을 정합니다. 정해진 내용은 기기에 다시 저장한 뒤 현재 서버 내용을 기준으로 제출합니다. 그사이에 서버가 또 바뀌었는지도 다시 확인해야 합니다.

‘가장 늦게 적힌 내용을 무조건 채택한다’는 규칙만으로는 어떤 점검 내용이 맞는지 알 수 없습니다. 같은 내용을 다른 사람이 바꿨다면 단순히 다시 보내기보다 내용 확인이 먼저입니다. 변경 기준을 확인한 뒤에만 쓰기를 허용하는 기술적 방법도 있습니다. MDN 다른 변경을 덮어쓰지 않도록 확인하는 If-Match

발주 전에 정할 내용

발주 전에는 네 가지를 자기 업무에 대입해 보세요

오프라인 기능을 요청할 때 ‘인터넷 없이도 사용 가능’이라는 문장만 적으면 어디까지 가능한지 모호합니다. 다음 네 가지를 정하면 입력 화면과 관리자 업무를 함께 확인할 수 있습니다.

  1. 오프라인에서 할 일: 미리 받은 점검의 내용 작성과 사진 첨부까지 필요한가요? 새 작업 조회나 현장 업무 완료까지 필요한지 따로 정하세요.

  2. 저장 장소: 기기에 무엇을 보관하며, 저장에 실패하면 무엇을 안내하나요? 서버에 보내기 전 기기나 브라우저의 데이터를 지웠을 때도 확인해야 합니다.

  3. 전송 상태: 미전송, 전송 중, 결과 확인 필요, 본문 접수, 사진 접수를 각각 볼 수 있나요? 무엇을 확인해야 전체 제출과 업무 완료로 바뀌는지도 정하세요.

  4. 예외 담당: 사진은 누가 다시 보내고, 서로 다른 내용은 누가 확인하나요? 관리자에게 무엇이 남았는지 보여주고 후속 행동을 연결하세요.

개발 요청서 예시

예를 들어 개발 요청서에는 이렇게 적을 수 있습니다.

미리 받은 점검을 오프라인에서 작성하고 사진 한 개와 함께 기기에 저장합니다. 보낼 기록을 대기 목록에서 확인하며, 앱을 열어둔 상태에서 담당자가 다시 보냅니다. 서버의 본문·사진 접수 결과와 관리자 확인 대기를 나눠 표시합니다. 사진이 남으면 현장 담당자가 재전송하고, 내용이 겹치면 지정 담당자의 확인 전에는 덮어쓰지 않습니다.

현재 업무의 역할과 예외부터 정리해야 한다면 기존 업무를 앱으로 바꾸기 전 측정할 7가지를 함께 확인하세요.

기기에 보관한 내용이 서버와 관리자 화면으로 이어지려면 저장 장소, 전달 결과, 남은 행동이 같은 기록 안에서 연결돼야 합니다. ‘저장됐습니다’라는 한 문장 대신 무엇이 어디까지 반영됐는지 보여주는 것이 이 과정의 핵심입니다.

확인할 내용

이 내용을 보면 알 수 있습니다

  • 입력·기기 보관·서버 접수의 차이 이해하기
  • 기록과 사진의 전달 결과를 따로 확인하기
  • 내용 충돌과 관리자 확인의 다음 행동 구분하기

판단 기준

실제 구현에서는 이렇게 확인합니다

  1. 01기기 저장 실패와 결과 미확인을 성공으로 표시하지 않는가
  2. 02같은 기록의 내용·버전·사진 상태가 연결되는가
  3. 03사진 재전송·내용 비교·업무 확인의 담당이 정해졌는가

우리 현장 업무의 저장·전달·확인 기준을 함께 정리해보세요

연결이 약한 곳에서 작성하는 기록과 사진, 확인할 담당자를 알려주세요. 오프라인에서 할 일과 기기 보관, 전송 상태, 사진·내용 충돌의 처리 기준을 함께 정리합니다.

30분 무료 상담 신청
앱이 만들어지는 방식으로 돌아가기