사이드 프로젝트를 하게 되었습니다!
내 명함을 만들고, 등록하고, 꾸밀 수 있는 사이드 프로젝트를 기획 중에 있는데
native 언어를 새로 배우거나하면 시간도 오래걸리고, 앱을 등록하는데에 있어서 시간도 오래 걸리기 때문에 웹앱이나 PWA를 사용해서 만들어야겠다고 생각했습니다!
근데 웹앱과 PWA 어떤 차이가 있고, 어떤 것을 사용해서 만들어야할지 알아보기 위해서 이 글을 작성하게 되었습니다~
PWA
- 오프라인 동작
- 서비스 워커를 통해 오프라인에서도 작동 가능
- 캐시된 콘텐츠 접근 가능
- 네트워크 상태와 무관하게 기본 기능 사용 가능
- 설치 가능성
- 홈 화면에 아이콘으로 추가 가능
- 브라우저 UI 없이 독립적으로 실행
- 앱과 유사한 실행 경험 제공
- 푸시 알림
- 브라우저가 닫혀있어도 알림 수신 가능
- 사용자 재참여 유도 가능
- 하드웨어 접근
- 카메라, GPS 등 네이티브 기능 접근
- 디바이스 API 활용 가능
웹앱
- 브라우저 의존성
- 항상 브라우저를 통해 접근
- 브라우저 UI가 항상 표시됨
- 오프라인 동작 불가
- 제한된 기능
- 푸시 알림 불가
- 제한된 하드웨어 접근
- 설치 불가
- 네트워크 의존성
- 항상 인터넷 연결 필요
- 오프라인 상태에서 작동 불가
사실 이렇게 특징들만 나열하고 보면 웹앱은 조금 안좋은건가? 싶을 수 있습니다. 브라우저 의존성도 강하고,
안되는 것도 많기 때문이죠. 그러면 언제 사용해야 하는지 간단하게 알아볼까요?
PWA가 적합한 경우
- 자주 사용되는 서비스
- 뉴스 앱
- SNS 서비스
- 메일 서비스
- 생산성 도구
이유: 설치 후 빠른 접근과 오프라인 기능이 유용함
- 모바일 사용이 많은 서비스
- 쇼핑몰
- 음식 배달 서비스
- 여행 예약 서비스
이유: 모바일에서 네이티브 앱과 유사한 경험 제공 가능
- 푸시 알림이 중요한 서비스
- 메시징 앱
- 알림 기반 서비스
- 실시간 업데이트가 필요한 서비스
이유: 사용자 재참여 유도 가능
일반 웹앱이 적합한 경우
- 단순한 정보 제공 목적
- 회사 소개 웹사이트
- 블로그
- 포트폴리오 사이트
이유: 복잡한 기능이 필요없고 항상 최신 내용 유지 필요
- 일회성/단기 사용 서비스
- 이벤트 페이지
- 프로모션 페이지
- 설문조사
이유: 설치나 오프라인 기능의 필요성이 낮음
- 개발 리소스가 제한적인 경우
- 스타트업 초기 서비스
- MVP (최소 기능 제품)
- 프로토타입
이유: 빠른 개발과 배포가 가능하고 유지보수가 간단함
그렇다면 제 결론은 프로젝트에서는 PWA를 사용하는게 좋겠군요!
- 푸시 서비스에 최적화 되어있고
- 홈에 아이콘을 통해서 설치하는 것처럼 사용할 수 있으며
- 사진을 찍거나 갤러리에 접근해야하고
- 명함에 대한 실시간 업데이트가 필요하기 때문입니다!
굳이 FCM 같은 것을 사용하지 않고 좀 더 편하게 서비스를 만들 수 있겠군요
그렇다면 PWA라는 것은 무엇일까요?
PWA란
프로그레시브 웹 앱(PWA)은 프로그레시브 개선을 사용하여 사용자에게 더 안정적인 환경을 제공하고, 새로운 기능을 사용하여 더 통합된 환경을 제공하며, 설치할 수 있는 웹 앱입니다. 또한 웹 앱이므로 단일 코드베이스로 어디서나 어떤 기기에서든 누구에게나 도달할 수 있습니다.
PWA는 IOS나 Android 언어에 국한되지 않고, 운영체제 전반적으로 범용성이 있습니다. 그리고 사용자는 오프라인 상태에서도 상호작용하거나, 컨텐츠를 볼 수 있고 앱을 방문할 때 마다 항상 최신 버전을 받습니다.
PWA는 네트워크 연결과 관계없이 작동하며 로컬 파일 시스템에서 파일을 읽고, 쓰고, 하드웨어에 엑세스 할 수 있습니다.
PWA는 위의 장점을 모두 포함해 사용할 수 있습니다.
- 참고
PWA는 사용자가 앱스토어 대신 브라우저에서 설치할 수 있는 앱으로 생각하는데, PWA는 Google Play 스토어, 앱스토어 등에서 선택적 배포 채널로 등록 될 수 있습니다 물론 스토어의 규칙과 요구사항은 준수해야겠죠?
PWA의 기본 원칙!
- 모바일을 포커싱 제약 조건으로 사용합니다. 디자인의 각 뷰가 필수 콘텐츠와 상호작용에만 초점을 맞추도록 합니다.
- 디자인 프로세스에서 콘텐츠와 핵심 기능을 강조합니다.
- 필요한 경우 점진적으로 개선합니다. 가장 간단하고 가장 널리 사용되는 도구로 구성요소의 핵심 콘텐츠와 기능을 빌드하는 것으로 시작합니다. 제한 없는 액세스. 그런 다음 사용하려는 고급 기능을 테스트하고 이를 사용하여 구성요소를 개선합니다.
- 사용자 중심의 웹 성능 측정항목에 중점을 둔 빠르고 우수한 사용자 환경을 제공하고, 실제 사용자 측정항목을 가져오며, 네트워크 연결, 입력 유형, CPU, GPU 성능과 관계없이 모든 사용자를 위해 성능을 푸시합니다.
=> 오잉 뭔뜻이지? 모바일을 포커싱 제약 조건이 잘 이해가 안돼서 클로디 센세에게 물어봤습니다.
Q. 모바일을 포커싱 제약조건으로 사용하라는게 웹 사용자에 대한 레이아웃 디자인은 살짝 우선순위를 내려두고 필요한 경우에 개선하라는 이야기일까?
A. 여기서 "모바일을 포커싱 제약조건으로 사용"한다는 것은 "모바일 퍼스트(Mobile First)" 접근 방식을 의미합니다. 하지만 이는 웹 사용자를 무시하라는 의미가 아닙니다.
이 접근 방식의 핵심 개념은: 제약조건을 기회로 활용하여 모바일의 작은 화면은 제약이지만, 이를 통해 정말 중요한 콘텐츠와 기능에 집중하게 됨
불필요한 요소들을 제거하고 핵심적인 것만 남기는 과정을 통해 더 나은 UX 구현하고
모든 디바이스에서 동작하는 기본 경험을 보장하는 것입니다.
즉 웹 레이아웃을 무시하라는 것이 아니라, 모바일 환경에서의 제약사항을 기반으로 설계하고, 이를 더 큰 화면으로 확장해 나가는 전략을 사용하라는 의미입니다!
아하! 우수한 PWA를 만들기 위해서는 모바일을 포커싱하면서 레이아웃을 넓히면서 설계하라는 거구나~
그리고 사용자 중심의 웹 성능 측정항목 (lighthouse를 통해서 측정가능)에 중점을 두고, 웹 접근성을 높일 수 있게 하면 되겠다! 라고 이해했습니다.
PWA는 모든 사용자에게 우수한 환경을 제공하기 위해서 반응형 디자인, 내재적 디자인, 웹성능을 견고하게 갖추는 것이 중요합니다!
이외에도 더 좋고 많은 내용들은 아래 출처에 있는 사이트에 들어가서 읽어보시고
다음 포스팅은 next.js 에서 어떻게 PWA 만드는지 알아봅시다!
[출처] : https://web.dev/learn/pwa
