광卫 ㅇr님! 누구㈏★ ㉠ㅏ능 Next.js 프로젝트를 5분만에 앱으로

y·2024년 5월 22일

💬 TIL

목록 보기

8/10

Next.js로 만든 웹만 있다면? 나도 웹 앱 만들기 5분만에 가능!

Next.js로 프로젝트를 진행했는데, 데스크탑이 아닌 모바일 버전으로 사용할 것을 고려해 모바일 디자인으로만 했었다. 그런데 웹보다는 앱이 더 편할거 같아 앱으로 제작해야할까 고민하던 중 웹 앱으로 쉽게 발행할 수 있다고 해서 next-pwa를 이용해 웹 앱으로 만들어보았다.

PWA가 뭣인데요..?

PWA(Progressive Web Apps)는 HTML/CSS/javascript와 같은 웹 기술로 만드는 앱이다. 우리가 온라인에서 볼 수 있는 사이트 중 트위터나 스타벅스, 핀터레스트 등은 PWA 웹앱으로 이용이 가능하며, 네이티브 앱과 비슷한 사용자 경험을 제공한다.

네이티브 앱과 PWA 차이는 무엇일까?
우리가 앱스토어나 플레이스토어에서 다운로드하는 네이티브 앱은 일반적으로 해당 플랫폼에 특화된 언어를 이용해 만드는 경우가 많다. 이때 해당하는 언어는 스위프트, 코틀린, 플러터 등이 있다. 반면 PWA는 홈 화면에 저장되면 브라우저에서 실행되고 네이티브 앱처럼 동작한다.

PWA 장점! 이래도 안 해?

기존에 존재하는 웹 사이트를 다른 언어 사용없이 코드를 조금만 추가해 간단하게 앱으로 만들 수 있다.
웹으로 발행했을 때 알림과 같은 기능을 제공하지 못했다면, PWA는 푸시 알림을 통해 사용자들과 소통할 수 있다.
모바일에서 웹 사이트를 보는 것보다 PWA를 보는 것이 더 빠르고 가벼우며, 화면이 보기 좋다.
IOS, 안드로이드 개발을 따로 할 필요가 없이 웹 기술만으로 발행이 가능하다.

이 외에도 다양한 장점이 있겠지만, PWA의 큰 장점은 다른 기술이 필요없이 간단하고 부드러우며 알림이 가능하다는 것이다.

Next.js 14 프로젝트로 웹 앱 만들기

1. next-pwa 설치하기

npm i @ducanh2912/next-pwa && npm i -D webpack

2. next.config.mjs 파일 수정하기

/** @type {import('next').NextConfig} */
import withPWAInit from "@ducanh2912/next-pwa";

const withPWA = withPWAInit({
  dest: 'public',
  register: true,
  skipWaiting: true,
  extendDefaultRuntimeCaching: true,
});

const nextConfig = {
  ...
};

export default withPWA(nextConfig);

3. public 폴더에 manifest.json 파일 생성해주기

{
  "name": "앱 이름",
  "short_name": "앱 이름",
  "icons": [
    {
      "src": "/아이콘-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/아이콘-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/아이콘-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#FFFFFF",
  "background_color": "#FFFFFF",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait"
}

위와 같이 적으면 되는데, 이때 내가 발행할 웹 앱의 아이콘을 사이즈별로 넣어주면 된다. 예시는 3가지인데 더 다양하게 넣어도 된다.

4. layout.js 파일 수정해주기

export const metadata = {
  ...
  manifest: "/manifest.json",
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: "앱 이름",
  },
}
export const viewport = {
  ...
  themeColor: "#FFFFFF",
}