photo-1585060544812-6b45742d762f?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb
📱

내 노션 홈페이지를 모바일 앱처럼 꾸며보세요!

CreatedAt
5/12/2021, 9:45:00 AM
Tag
tip
1 more property
때는 바야흐로 대 모바일 시대
노션 웹사이트만으로는 부족한 2%의 모바일 경험을 채워줄 순 없을까요?
우피를 사용하면 여러분의 노션 웹사이트를 스마트폰 화면에 추가할 수 있게 해드려요!
KakaoTalk_Photo_2021-05-12-18-46-00.jpg
BROJUN_s_Space-3.png
BROJUN_s_Space-2.png
💡
웹사이트를 앱처럼 보여주는 PWA라는 기술을 사용하고 있습니다.

준비물은 뭘까요?

우피를 통해서 만든 나의 홈페이지가 필요해요!
없다면 아래 링크에서 홈페이지를 만들고 다시 돌아와 주세요 😉

나만의 하단 네비게이터를 생성해 보세요!

스마트폰이나 태블릿으로 홈페이지를 들어갔을 때 웹사이트가 아닌 모바일 앱처럼 보이게 할 수 있어요.
방문자가 꼭 봐야할 페이지가 있다면 탭으로 지름길을 만들어 보세요. 평소보다 훨씬 많은 사람들이 그 페이지를 방문하게 될거에요! 👍
Oopy_.png
개발자 포트폴리오 중 기술 및 작업물을 바로 확인할 수 있도록 탭을 추가했어요

(뭔진 모르겠지만) 이 코드를 넣어줘요!

내 홈페이지를 모바일 앱처럼 보이게 하려면 아래 코드를 추가해줘야 해요.
아래 링크로 들어가서 <head> 항목에 코드를 복사 붙여넣기를 해주세요!
<link rel="manifest" href="/manifest.webmanifest"> <meta name="apple-mobile-web-app-capable" content="yes"> <script> if ('serviceWorker' in navigator) { // Register a service worker hosted at the root of the // site using the default scope. navigator.serviceWorker.register('/sw.js').then(function(registration) { console.log('Service worker registration succeeded:', registration); }, /*catch*/ function(error) { console.log('Service worker registration failed:', error); }); } else { console.log('Service workers are not supported.'); } </script>
JavaScript
Oopy_.png

내 홈페이지가 코드를 소화할 때 까지 5분 정도 기다려 주세요

그리고 내 홈페이지에 들어가서 코드가 실행될 수 있도록 몇 번 새로고침을 해주세요!

내 소듕한 노션 홈페이지를 스마트폰에 저장!

모바일 앱이라면 무엇보다도 화면에 아이콘으로 저장이 되어야겠죠? 플랫폼 별로 아이콘 저장하는 방법을 따라해 보세요.

전 iOS 에요!

오른쪽 동영상 처럼 내 홈페이지를 스마트폰에 아이콘으로 저장해 주세요! 우측 상단의 공유 버튼 > 홈 화면에 추가 를 누르면 내 홈페이지 아이콘을 화면에 추가할 수 있습니다.

전 Android 에요!

Android는 페이지를 좀 이리저리 보다보면 아래쪽에 홈페이지를 홈 화면에 추가하라는 버튼이 뜰 거에요. 더 빨리 추가하고 싶으시면 우측 상단의 메뉴 버튼을 누르고 홈 화면에 추가하기를 눌러주시면 됩니다. 😉
(iOS랑 비슷해요!)

끝!

어때요, 성공적으로 내 홈페이지를 스마트폰에 저장하셨나요?
이렇게 추가된 홈페이지는 크롬 / 사파리의 주소바가 나타나지 않아서 훨씬 모바일 앱처럼 느껴질 거에요!
☎️
진행중에 어려움을 겪으셨다면 메신저로 알려주세요!
Made with 💕 and Oopy