웹 앱 vs 데스크톱 앱. 우리 앱은 뭘로 만들어야하죠?

웹 앱 vs 데스크톱 앱

우선 웹 앱과 데스크톱 앱의 정의에 대해 살펴보기 전에 우리의 경험을 떠올려봅시다. 우리는 데스크톱, 랩톱을 통해서 매일 같이 앱을 사용하는데요. 이때의 차이점을 떠올려 보면 우리가 ‘다운로드’ 버튼을 눌러 직접 설치하고 사용하는 앱이 있을 것이고, 다운로드 없이 ‘브라우저’를 통해 사용하는 앱이 있을 것입니다. 앱을 직접 다운로드하고 사용하고 있다면 ‘데스크톱 앱’이고, 다운로드 없이 브라우저를 통해 사용하고 있다면 ‘웹 앱’입니다.

웹 앱과 데스크톱 앱의 주요 차이점

웹 앱과 데스크톱 앱의 주요 차이점은 무엇일까요?

웹앱과 데스크톱앱 비교

1. 설치 및 업데이트

웹 앱은 설치 또는 수동 업데이트가 필요하지 않습니다. 모든 업데이트가 서버에서 이뤄지며 사용자에게 즉시 전달됩니다. 페이지를 다시 로드하거나 다시 로그인하면 즉시 업데이트된 버전을 사용할 수 있습니다. 반면 데스크톱 앱은 설치된 장치에만 존재하고, 주요 버전이 출시되면 사용자가 직접 소프트웨어를 컴퓨터에 설치하고 업데이트를 적용해야 합니다. 또한 각 OS 버전 추적을 필요로 합니다.

2. 유효성

웹 앱은 언제 어디서든 어떤 장치에서든 액세스가 가능합니다. 하지만 특별히 오프라인 작업 기능이 구현되지 않았다면 인터넷 연결이 있는 경우에만 사용 가능합니다. 데스크톱 앱은 온라인, 오프라인에 관계없이 언제나 사용할 수 있지만 프로그램이 설치된 장치에서만 사용 가능하며, 다른 장치에서 작업을 하기 위해서는 각각에 설치해야만 합니다.

3. 크로스 플랫폼 및 기능

웹 앱은 데스크톱, 랩톱, 태블릿, 스마트폰 등 어떤 장치에서건 잘 작동하기 때문에 하드웨어나 운영 체제에 의존하진 않지만 실행되는 웹 클라이언트 (브라우저) 기능에 의해 제한됩니다. 구글 크롬, 모질라 파이어폭스, 애플 사파리, 윈도우 브라우저 등 각 브라우저에서 허용하는 범위에서만 작동 가능합니다.

→ 웹 앱의 장점과 데스크톱 앱의 장점

정리하자면, 웹 앱은 크로스 플랫폼이기 때문에 여러 운영 체제에서 거의 동일한 기능을 수행할 수 있고, 어디서나 액세스가 가능하고, 설치 또는 수동 업데이트가 필요 없습니다.

최신 기술 솔루션

웹 앱과 데스크톱 앱 모두 각각의 장점이 있습니다. 하지만 기술이 발전함에 따라 웹 앱과 데스크톱 앱의 간극을 잇는 기술이 생겨나고 있습니다. 대표적으로 프로그레시브 웹 앱과 데스크톱 컨테이너가 있습니다.

웹앱과 데스크톱앱 최신 기술 솔루션

PWA: Progressive Web Apps (프로그레시브 웹 앱)

프로그레시브 웹 앱(PWA)은 기본적으로 모바일 또는 데스크톱 앱처럼 보이고 작동할 수 있도록 몇 줄의 코드가 추가된 웹 앱입니다. PWA의 장점은 데스크톱과 모바일 기기 모두에 설치할 수 있다는 것입니다.

Desktop Containers (데스크톱 컨테이너)

데스크톱 컨테이너는 자바스크립트, HTML, CSS와 같은 웹 기술을 사용하여 데스크톱 앱을 작성할 수 있는 프레임워크입니다. 가장 많이 사용된 데스크톱 컨테이너는 ‘Electron(일렉트론)’입니다. 마이크로소프트, 슬랙, 스포티파이, 피그마, 스카이프 등 많은 앱에서 일렉트론을 사용하고 있습니다.

우리는 어떤 방식을 선택해야 할까?

웹 앱과 데스크톱 앱의 차이, 이를 위한 최신 기술 솔루션까지 알아봤습니다. 그렇다면 이제 우리 회사는, 우리 프로덕트는 어떤 방식을 선택해야 할까요?

사용자 맥락 (Context)

  • 사용자는 어떤 환경에 있나요?: 사무실에서 사용하는지 집에서 사용하는지, 업무용 컴퓨터인지, 개인용 랩톱인지, 인터넷을 사용할 수 있는 환경인지
  • 어떤 운영 체제나 브라우저를 사용하나요?: 사용자가 새로운 소프트웨어를 설치하거나 브라우저를 사용하는 것에 제한이 있는지

작업 (Tasks)

  • 유저가 얼마나 오랫동안, 얼마나 자주 그 앱을 사용하나요?
  • 운영 체제 기능이 필요한가요?
  • 다른 소프트웨어와 통합해야 하나요?

웹 앱과 데스크톱 앱을 만들 때 고려해야 할 것

사용자는 웹 앱과 데스크톱 앱 모두에서 ‘동일한 UX’를 기대합니다. 사용자가 어떤 기기, 브라우저에서든 효과적으로 작업할 수 있도록 앱 경험을 설계해야 합니다. 여기에는 단순히 UI 요소 조정뿐만 아니라 앱이 실행되는 플랫폼 / OS의 특성까지 포함됩니다. 플랫폼 전반에 걸쳐 일관된 사용자 경험을 제공하기 위해서는 무엇을 고려해야할까요?

1. 플랫폼 / OS 가이드라인

대부분의 웹 앱은 맥 및 윈도우에서 동일한 방식으로 작동합니다. 그러나 데스크톱 앱은 특정 요소를 설계할 때, UI 가이드라인을 따릅니다.

2. 플랫폼 / OS / 브라우저 별 상호작용

단축키, 터치 바와 같은 플랫폼이나 브라우저만의 특별한 상호작용을 고려해야 합니다.

3. 다중 작업 (멀티 태스킹)

웹 앱에서 사용자는 브라우저에서 여러 탭을 나란히 열어서 원하는 수만큼의 작업을 수행할 수 있습니다.

+ 웹 앱 설계 시 유의사항

또한 웹 앱을 설계할 때 아래 세 가지를 고려하세요. 다음은 Chloe Sanderson의 “Design with the web in mind”를 재구성했습니다.

  • 뒤로 가기 버튼을 눌렀을 때 로그인을 다시 해야 하는 상황을 만들지 말자
    브라우저에는 기본적으로 ‘뒤로 가기’, ‘앞으로 가기’ 버튼이 존재합니다. 여기서 문제는 사용자가 입력하거나 선택하면서 진행했던 컨텍스트가 뒤로 가기 버튼을 눌렀을 때 모두 손실될 수 있다는 것입니다. 심지어 다시 로그인해야 하는 번거로운 상황이 생길 수 있으므로, 뒤로 가기 버튼을 눌러도 컨텍스트가 손실되지 않도록 주의해야 합니다.
  • 사람이 읽을 수 있는 URL을 만들자
    사용자는 URL을 북마크 하거나 공유하곤 합니다. 그렇기에 사람이 읽을 수 있고 하나밖에 없는 URL을 만들어야합니다. ~1282146 이렇게 단순히 숫자로만 나열된 URL이 아니라 제목이나 목차 등을 포함하여 사람이 읽을 수 있는 URL로 만들면 사용자가 인식하는 데 도움이 됩니다.

마치며

지금까지 웹 앱 과 데스크톱 앱의 정의와 장단점, 최신 기술 솔루션, 선택할 때 와 만들 때는 무엇을 고려해야 하는지에 대해 알아봤습니다. 우리는 사용자의 맥락과 수행 작업, 개발 소요 시간 등을 고려하여 우리에게 가장 적합한 솔루션을 선택할 수 있고, 선택을 했다면 플랫폼 전반에 걸쳐 일관된 사용자 경험을 제공하기 위해서 노력해야 할 것입니다. 데스크톱 앱 제작을 고민하고 계셨다면 이 글을 통해 더 나은 결정과 제작을 하실 수 있다면 좋겠습니다.

참고문헌

  1. AppMaster. 2021. Desktop App or Web App: pros and cons. 2021.09.24. https://appmaster.io/blog/desktop-app-or-web-app-pros-and-cons
  2. Chloe Sanderson. 2020. The best of both worlds: Progressive web apps and desktop containers. Jul 23, 2020. https://uxdesign.cc/the-best-of-both-worlds-progressive-web-apps-and-desktop-containers-45157e8ee7f0
  3. Chloe Sanderson. 2020. Design with the web in mind. Oct 19, 2020 https://uxdesign.cc/design-with-the-web-in-mind-d9f9df2e8812
  4. GoProtoz. Desktop Vs Web Applications: How do they compare from a design standpoint?. 2022.04.26 접속. https://www.goprotoz.com/insights/desktop-applications-vs-web-apps-design.html
  5. mdn. Progressive web apps (PWAs) 2022.04.26 접속. https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

--

--

B2B SaaS Product Designer @hyperquery | We’re building a product for data analytics team to innovate data collaboration workflow. (Email: jiyu0719@gmail.com)

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jiyu Han

Jiyu Han

B2B SaaS Product Designer @hyperquery | We’re building a product for data analytics team to innovate data collaboration workflow. (Email: jiyu0719@gmail.com)