[Web App] Frontend Developer로 Web App 개발하기

Frontend 개발자의 길을 걷고있다면, Web App 이라는 단어를 흔히 들어본 경험이 있을 것 이다.

Web App은 무엇이고, 그 배경은 무엇일까?

---

Web App 이란?

웹 브라우저를 통해 접근할 수 있는 어플리케이션의 일종이다. 모바일에서 접근하였을 때 모바일 어플리케이션과 유사한 동작을 구현 할 수 있다.

Web App 와 비교할만한 배경들은?

- Mobile Web: 모바일에 알맞게 만들어진 web, 흔히 반응형 웹을 구성해 모바일웹 환경을 구축한다.

- Native App: 모바일 OS에 맞게 만들어진 어플리케이션. 각각의 언어를 통해 OS에 최적화 된 서비스를 제공 할 수 있다.

- Hybrid App: 모바일 웹과 네이티브 앱의 장점을 섞어 만들고자 한 어플리케이션. 상위 두개의 반반치킨 정도...

---

현 회사에서 Web, Chrome-Extension, Electron의 개발을 담당하고 있는 입장으로서, 사실 Web App의 개념은 매우 혼동스러웠다. Iframe을 이용한 아키텍처를 갖고 있는 일부 플랫폼들이 웹앱으로 칭할 수 있을까? 라는 의문이 강하게 들었다.

이러한 의문점의 배경에 있어 특정한 기술 (ex. 네이티브는 각 OS에 맞는 언어 Swift, Object C, Kotlin 등...) 혹은 아키텍처에 관련한 정확한 정의가 없었다. Mobile Web과 Web App의 명확한 차이점에 대해서도 구분을 하지 않고 설명하는 글들도 많았고, Hybrid App에서 나오는 장점들을 혼동해서 적어놓은 곳도 있었다.

개발자들의 성지인 mdn 에서 조금 더 명확한 의미를 구분 지을 수 있었다. 정확하게는 Progressive Web App에 대한 아티클이지만, 확인해보면 다음과 같았다.

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Introduction#advantages_of_web_applications

Introduction to progressive web apps - Progressive web apps (PWAs) | MDN

 

---

PWA의 개념을 명확하게 설명할 수 있는 곳이 없었던 것은 당연했다

즉 PWA란 web 기술만을 사용하여 더욱 유연하고, 적응성이 좋은 앱을 만드는 것에 대한 구글의 줄임말 이다. 따라서, 우리가 명확하게 정의할 수 있는 Web App의 기준은 없지만, Web App이 지녀야 할 일종의 가이드라인은 존재한다.

1. SEO이 가능하다. Search Engine에 의한 노출이 되므로, 사용자의 접근성이 높다.

2. 디바이스에 설치 혹은 앱에 의해 launch가 가능해야 한다.

3. URL을 통한 접근이 가능하다.

4. 네트워크로 부터 자유롭다.

5. 브라우저 버전을 타지 않는다.

6. 네이티브 앱처럼, 사용자가 해당 페이지에 접근해있지 않아도 언제든 새로운 컨텐츠를 확인 할 수 있다.

7. 스크린과 브라우저가 있는 곳에는 어디든 사용될 수 있다.

8. 보안적으로 써드파티로 부터의 민감한 공격을 방어 할 수 있다.

---

설치 가능한 앱?

위의 설명대로라면, 해당 웹앱은 설치가 가능해야한다. 설치가 가능하단 것은 간단하게, 사용자의 화면에 애플리케이션의 아이콘이 등장하여 한번의 클릭으로 접근이 가능하고 또한 네이티브의 기능들을 가져갈 수 있어야한다는 것이다.

사파리를 통해 추가한 메일 Naver Web App

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installing

Installing and uninstalling web apps - Progressive web apps (PWAs) | MDN

위의 사이트를 통해 각 OS들이 어떻게 Web App에 대해 대응하고 있는지 볼 수 있다.

하지만 사실 이러한 설치법은 기술에 민감한 사람들이 애용할 수 있는 방법이기는하다.

---

마치 Hybrid App 스러운 Web App

모바일을 제외한 다양한 디바이스에서의 Web Browser를 통한 접근을 항상 바랄 수는 없다고 생각한다. 기존 유저에게는 간단한 App Store로의 리다이렉션과 설치를 통해 추가되는 화면의 아이콘이 더욱 친숙하게 느껴질 수도 있다.

 

이러한 느낌을 강력하게 줄 수 있는 것이 Desktop일 경우 크게 작용하기도 하는데, 웹 기술들을 활용할 수 있는 일종의 컨테이너로 앱을 만들어주는 Electron을 활용하여 해결 할 수 있다.

 

Electron을 이용하면 HTML, CSS, Javascript 기술을 이용하여 Desktop Application을 개발 할 수 있는데, 이때 Electron의 BrowserWindow에 <iframe>이나 <webview> 같은 태그를 활용하여 web embed를 진행 할 수 있다.

 

이러한 web embed에서 Javascript의 이벤트 핸들러 혹은 <iframe>의 postmessage 를 통해 Electron과 embedded web의 통신을 조작할 수 도 있다. 

https://www.electronjs.org/docs/latest/tutorial/web-embeds

Web Embeds | Electron

 

---

클라이언트 외부에서의 작용을 위한 Notification과 Push

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push

How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs) | MDN

앱 내부에서의 service worker를 통해 작용하는 기술로, Notification과 Push를 통해 클라이언트의 간섭으로부터 자유로워질 수 있다. 위의 사이트에서 자세한 예시와 간단한 코드들을 통해 어떤 방식으로 통신하는지 확인할 수 있다.

const button = document.getElementById('notifications');
button.addEventListener('click', () => {
  Notification.requestPermission().then((result) => {
    if (result === 'granted') {
      randomNotification();
    }
  });
})

개발자 입장에서는 이 과정이 어렵고, 귀찮게 느껴질 수도 있다.

 

실질적으로 개발을 하게 되면 이벤트 리스너와 같은 메세지 방식의 통신은 비동기성을 지닌 프로그래밍에서 상당한 사이드 이팩트를 야기시키기도 한다.

 

하지만, 그러한 점들을 고려해도 기업의 입장에선 인력을 줄일 수 있고, 개발자의 입장에선 즉각적인 업데이트와 푸쉬, 올바른 아키텍처와 디자인 패턴을 고려하여 개발 이후의 유지보수 cost를 상당히 줄일 수 있다.