HTML5, 웹페이지를 '슈퍼맨'으로! 백그라운드 & 오프라인 작업의 비밀

반갑습니다. 전국의 컴맹 여러분!

오늘도 어김없이 HTML5 책과 씨름하고 있는 50대 컴맹 부산아재, 'it&tech 정보창고' 인사드립니다! 

지난번에는 웹 브라우저에 값을 저장하는 다양한 방법들에 대해 알아보았는데요, 

오늘은 책을 넘기다 보니 '시간이 걸리는 처리를 실행하기'라는,

제목부터가 뭔가 심상치 않은 셔터를 딱! 마주쳤습니다.

 

아니나 다를까, '백그라운드 처리', '오프라인 동작' 같은

생소한 단어들이 튀어나오고,

여지없이 '자바스크립트'와 함께 '비동기 API', 'Web Worker' 같은

한글로 표현되어 있고 읽히긴 하지만 외계어 같은 용어들이 저를 어지럽게 하더군요. 

"와, 이 또 뭐꼬!" 소리가 절로 나왔지만, 여기서 포기할 우리 부산아재가 아니지 않습니까!

"그래, 이것도 웹 애플리케이션을 만들 때 중요하다는 건갑다." 하면서 마음을 다잡았습니다.

책을 더 넘겨보니 '모바일에서의 편리성'이라는 장에서는

또 '멀티스레드', '멀티프로세스' 그리고 'Application Cache' 같은 용어들이 등장하며

"본격적인 웹 애플리케이션을 만들 때 필요하다"고 강조하고 있었습니다.

그래서 오늘은 이 두 챕터에 걸쳐 나온, 머리 아프지만 

웹을 더욱 강력하게 만들어준다는 이 기술 용어들을 나름대로 정리해보는 시간을 가지려고 합니다.

저처럼 "이게 다 뭔 소리래?" 하시는 분들께 조금이나마 도움이 되길 바라며,

전문가님들께는 너그러운 가르침을 부탁드립니다!

HTML5, 웹페이지를 '슈퍼맨'으로! 백그라운드 & 오프라인 작업의 비밀.

우리가 요즘 사용하는 웹사이트나 웹앱들을 보면,

예전과는 비교도 안 되게 빠릿빠릿하고 똑똑해졌다는 걸 느낍니다.

인터넷이 잠시 끊겨도 어떤 내용은 보이기도 하고,

복잡한 작업을 시켜도 화면이 멈추지 않고 다른 일을 할 수 있기도 하죠.

이런 마법 같은 일들이 바로 HTML5의 발전된 기술들 덕분이라고 하는데요,

그 비밀을 한번 파헤쳐 보겠습니다! 

1. "시간이 걸리는 작업? 뒷방에서 처리하고 알려줄게!" - 백그라운드 처리와 친구들 🧑‍🍳

혹시 웹서핑하다가 버튼 하나 잘못 눌렀는데 화면이 하얗게 변하면서 한참 동안 아무것도 못 했던 경험, 있으신가요?

그게 바로 웹 브라우저가 무거운 작업 하나에 매달려 다른 일을 못 하기 때문인데요,

HTML5는 이런 답답함을 해결할 방법들을 가지고 있습니다.

자바스크립트와 싱글 스레드의 한계

: 원래 자바스크립트(웹페이지를 움직이게 하는 친구)는 한번에 한 가지 일밖에 못 하는 '싱글 스레드(Single Thread)' 방식이 기본입니다. 마치 주방에 요리사가 딱 한 명 있어서, 주문 하나 받고 요리 다 끝내고 다음 주문받는 것과 비슷하죠. 이러니 오래 걸리는 요리(작업)가 들어오면 다른 손님들은 하염없이 기다려야 합니다. (화면 멈춤 현상!)

비동기 API (Asynchronous API) - "주문은 일단 받고, 다 되면 벨 눌러드릴게요!" 🔔

'비동기'라는 말은 "동시에 일어나지 않는다",

즉 "순서대로 기다리지 않아도 된다"는 뜻으로 이해하면 쉽습니다.
비동기 API는 오래 걸리는 작업(예: 서버에서 큰 파일 받아오기)을 시켜놓고, 

그 작업이 끝날 때까지 마냥 기다리는 게 아니라 다른 일을 먼저 처리하다가, 

시켜놓은 작업이 완료되면 그때 "다 됐습니다!" 하고 알림을 받아 처리하는 방식입니다.

마치 식당에서 요리사에게 "스테이크 하나요!" 주문하고, 요리사는 "네, 15분 걸립니다!" 하면, 

손님은 그동안 물도 마시고 샐러드도 먹다가 스테이크가 나오면 먹는 것과 같아요. 훨씬 효율적이죠?

 

Web Worker (웹 워커) - "나만의 비밀 조수(일꾼)를 고용하다!" 
이건 정말 획기적인데요! Web Worker는 자바스크립트가 오래 걸리는 복잡한 계산이나 작업을 현재 웹페이지 화면과는 별개의 '뒷방(백그라운드 스레드)'에서 조용히 처리하도록 시킬 수 있는 기술입니다.

 

마치 메인 주방 요리사(메인 스레드)가 손님 응대와 간단한 요리를 하면서, 

시간이 오래 걸리는 육수 끓이기 같은 작업은 뒷방의 보조 요리사(웹 워커)에게 맡기는 것과 같아요. 

보조 요리사가 육수를 다 끓이면 메인 요리사에게 알려주죠. 그동안 메인 주방은 멈추지 않고 계속 돌아갑니다!
결과: 웹페이지 화면은 멈추거나 버벅대지 않고 부드럽게 유지되면서, 뒤에서는 열심히 복잡한 작업이 이루어지는 거죠!

2. "인터넷 연결이 끊겨도 괜찮아!" - 똑똑한 오프라인 동작의 세계 Offline Capabilities 

스마트폰으로 웹툰을 보다가 지하철에서 갑자기 인터넷이 안 터져도,

이미 불러온 부분까지는 계속 볼 수 있었던 경험 있으시죠? 이것도 HTML5의 오프라인 기술 덕분입니다.

애플리케이션 캐시 (Application Cache) - "옛날 방식의 비상식량 창고" (지금은 잘 안 써요!)
예전에는 웹사이트의 파일(HTML, CSS, 이미지 등)들을

미리 브라우저에 저장해뒀다가 인터넷이 안 될 때도

이 저장된 파일들을 보여주는 방식으로 오프라인 기능을 구현했습니다.
하지만 이 친구는 좀 까다롭고 문제도 많아서, 

지금은 거의 사용되지 않고 더 발전된 기술로 대체되었습니다. 

서비스 워커 (Service Workers) - "만능 오프라인 집사 겸 똑똑한 우편배달부" (요즘 대세!)
위에서 말한 웹 워커와는 또 다른 친구인데요,

이 서비스 워커는 웹페이지와 별개로 백그라운드에서 돌아가는 스크립트로,

오프라인 경험을 만드는 데 핵심적인 역할을 합니다.

- 주요 기능:
오프라인 지원: 웹사이트의 중요한 파일들을 미리 똑똑하게 저장(캐싱)해뒀다가, 

인터넷이 끊겨도 마치 앱처럼 작동하게 만들 수 있습니다.

- 백그라운드 동기화

: 인터넷이 잠시 끊겼다가 다시 연결되면, 그동안 못 보냈던 데이터를 서버로 자동으로 보내줍니다.

 

- 푸시 알림

: 웹사이트를 닫았더라도 사용자에게 새로운 소식(알림)을 보내줄 수 있습니다. (예: 새 이메일 도착 알림)
서비스 워커 덕분에 웹사이트가 마치 설치된 앱처럼 강력하고 편리한 기능을 제공할 수 있게 된 거죠!

3. "모바일에서도 쌩쌩! 더 편리한 웹 앱을 위한 고급 기술 살짝 맛보기" 

앞서 말한 백그라운드 처리나 오프라인 기능은

특히 스마트폰 같은 모바일 환경에서 웹 애플리케이션(웹앱)을 더 앱처럼 편리하게 만들어주는 데 아주 중요합니다.

이런 기능들을 가능하게 하는 좀 더 근본적인 컴퓨터 처리 방식에 대한 용어도 있더라고요.

멀티스레드 (Multithread) & 멀티프로세스 (Multiprocess) - "컴퓨터 뇌(CPU)를 여러 개 쓰는 것처럼!"
프로세스(Process): 컴퓨터에서 현재 실행 중인 하나의 프로그램 단위를 말합니다. (예: 크롬 브라우저 프로그램, 카카오톡 프로그램)
스레드(Thread): 그 프로그램(프로세스) 안에서 실제로 작업을 처리하는 가장 작은 단위, 즉 '일꾼'이라고 생각하시면 됩니다.
싱글 스레드: 한 명의 일꾼이 모든 일을 순서대로 처리합니다. (자바스크립트 기본 동작 방식)
멀티스레드: 한 프로그램 안에서 여러 명의 일꾼(스레드)이 동시에 여러 작업을 나눠서 처리하는 것처럼 보이게 합니다. 마치 한 명의 요리사가 손이 여러 개인 것처럼 동시에 여러 가지 요리 과정을 진행하는 것과 비슷해요. (Web Worker가 자바스크립트에 이런 멀티스레딩 효과를 줍니다.)
멀티프로세스: 여러 개의 프로그램(프로세스)이 각자 독립적으로 동시에 실행되는 것입니다. 마치 여러 개의 주방에서 각자 다른 요리사들이 요리하는 것과 같죠.

핵심: 이런 기술들 덕분에 우리 컴퓨터나 스마트폰이 버벅대지 않고 여러 작업을 동시에 부드럽게 처리할 수 있는 것입니다. 웹앱이 더 빠릿빠릿하게 느껴지는 이유도 여기에 있죠!

 

용어는 산 넘어 산! 그래도 웹과 나는 점점 똑똑해진다!

오늘도 정말 많은 IT 용어들과 한바탕 씨름을 벌였네요!

백그라운드 처리, 웹 워커, 비동기 API, 오프라인 동작, 서비스 워커, 멀티스레드, 멀티프로세스까지...

솔직히 컴맹 아재인 저에게는 여전히 어렵고 낯선 외계어 수준의 단어들입니다. 

하지만 이런 복잡한 기술들이 있기에 우리가 오늘날 이렇게 편리하고 강력한 웹 애플리케이션들을 아무렇지 않게 사용할 수 있다는 것을 어렴풋이나마 알게 되었습니다. 화면이 멈추지 않고, 인터넷이 잠시 끊겨도 당황하지 않게 해주는 고마운 기술들이죠!

이 모든 것을 당장 다 이해하고 활용할 수는 없겠지만, 

"아, 이런 원리로 웹이 더 똑똑해지는 거구나!" 하고 

고개 한번 끄덕일 수 있다면 그걸로도 큰 발전이라고 생각합니다.

다음번에는 또 어떤 신기한 IT 용어들이 저를 기다리고 있을지, 

두렵기도 하지만 한편으로는 기대도 됩니다! 

컴맹 아재의 IT 탐험은 계속됩니다! 감사합니다!