왜 오프라인을 생각해야 할까
모바일 사용자는 지하철, 엘리베이터, 비행기에서 자주 연결이 끊겨요. 이때 흰 화면이나 끝없는 로딩만 보이면 앱이 고장 났다고 느껴요. 안드로이드의 오프라인 우선 구조(Android Developers, n.d.)는 기기의 로컬 데이터로 먼저 화면을 그리고 서버와는 나중에 맞춰요. 클레프만과 동료들(2019)의 로컬 우선 소프트웨어도 같은 생각이에요. 웹에서는 서비스 워커(MDN, n.d.-a)와 캐시 전략(web.dev, n.d.)으로 이미 본 화면을 다시 열 수 있어요.
연결 상태 알리기
연결이 끊기면 화면 위나 아래에 '오프라인 상태예요. 저장한 내용은 연결되면 보낼게요' 같은 배너를 조용히 띄워요. navigator.onLine(MDN, n.d.-b)은 신호가 약한 상태를 다 잡지 못하니 실제 요청 실패도 함께 봐요. 밀러(1968)의 기준처럼 오래 기다리게 하지 말고, 느리면 진행 표시기와 함께 '다시 시도' 버튼을 줘요. 불러올 데이터가 없으면 오류 대신 오프라인용 빈 상태 화면을 보여줘요. WCAG 2.2(W3C, 2023)의 4.1.3처럼 이 상태 변화를 화면 읽기 프로그램에도 알려요.
보내지 못한 작업과 동기화
오프라인에서 쓴 댓글이나 장바구니 변경은 대기열에 두고 연결되면 자동으로 보내요. 각 항목에 '보내는 중', '대기 중' 표시를 달아 사라지지 않았음을 알려요. 같은 내용을 두 기기에서 고쳐 충돌하면, 클레프만과 동료들(2019)의 논의처럼 자동 병합하거나 사용자에게 고르게 해요. 실수로 보낸 변경은 실행 취소로 되돌릴 수 있게 해요. 결제처럼 중복되면 안 되는 작업은 오프라인에서 막고 이유를 설명해요.
자주 묻는 질문
- 모든 기능을 오프라인으로 만들어야 하나요?
- 아니요. 보기와 작성처럼 자주 쓰는 기능부터 지원하고, 결제처럼 위험한 작업은 연결이 필요하다고 알려요.
- 오프라인인지 어떻게 정확히 알 수 있나요?
- 브라우저 상태 값만 믿지 말고 실제 요청 실패와 시간 초과도 함께 판단해요.
출처 검토일: 2026-10-27
참고문헌
- MDN Web Docs. (n.d.-a). Service Worker API. 네트워크 요청을 가로채 캐시로 응답하는 방법이라, 웹 앱이 오프라인에서도 열리게 할 때 참고하면 도움이 돼요.
- MDN Web Docs. (n.d.-b). Navigator: onLine property. 온라인·오프라인 이벤트와 그 한계를 설명해, 연결 상태 배너를 띄울 때 참고하면 도움이 돼요.
- web.dev. (n.d.). The offline cookbook. 캐시 우선, 네트워크 우선 같은 전략을 비교해, 화면별 오프라인 전략을 고를 때 참고하면 도움이 돼요.
- Android Developers. (n.d.). Build an offline-first app. 로컬 데이터를 기준으로 화면을 그리고 나중에 동기화하는 구조라, 앱의 오프라인 우선 설계에 참고하면 도움이 돼요.
- Kleppmann, M., Wiggins, A., van Hardenberg, P., & McGranaghan, M. (2019). Local-first software: You own your data, in spite of the cloud. In Proceedings of the 2019 ACM SIGPLAN International Symposium on New Ideas, New Paradigms, and Reflections on Programming and Software (pp. 154–178). ACM. 기기에 데이터를 먼저 두고 동기화하는 로컬 우선 철학이라, 오프라인 편집과 충돌 처리를 설명할 때 참고하면 도움이 돼요.
- Miller, R. B. (1968). Response time in man-computer conversational transactions. In Proceedings of the December 9–11, 1968, Fall Joint Computer Conference, Part I (pp. 267–277). ACM. 응답 시간 기준을 다룬 고전이라, 연결이 느릴 때 기다림을 어떻게 알릴지 정할 때 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 상태 메시지를 보조 기술에 알리라는 4.1.3 기준이 있어, '오프라인 상태예요' 배너를 화면 읽기 프로그램에도 전할 때 참고하면 도움이 돼요.