티스토리스킨으로 모바일웹앱 으로 사용 가능한가.. ?
음 일단 PWA웹앱으로 가능 합니다.
기존 모바일앱에서만 사용 할 수 있었던 화면전환시 애니메이션을 html, css, js 으로만 구현 가능 하다면?
일단 이 생각으로 프론트를 열심히 만들어 봤습니다.
위 영상은 아이폰에 맞는 화면전환 애니메이션을 구현 해 봤습니다. 리스트에서 아이템을 선택시 화면전환이 자연스러운 애니메이션을 통해 "내가 이 앱을 사용하여 페이지를 이곳으로 이동 했구나 ~" 를 직관적으로 사용자경험을 할 수 있습니다.
안드로이드 시뮬레이터에서도 테스트 진행 해 봤습니다. 웹앱으로 하여 홈화면으로 추가 하여 모바일웹앱으로 사용 할 수 있도록 만들어 봤습니다. 역시 안드로이드에 존재 하던 화면전환 애니메이션을 적용 하였습니다.
(안드로이드 시뮬레이터가 느립니다..)
화면전환 애니메이션과 하단의 네비게이션바를 통해 모바일에 더욱 사용하기 좋은 상태가 되었습니다.
모바일웹앱 아이콘까지 만들어서 적용하면, 내가 사용하던 티스토리 블로그로 브랜딩 하기에도 좋습니다.
이 화면을 구현 하기 위해 js 라이브러리를 사용 하여, 직접 애니메이션을 구현 했습니다.
PWA으로 하여 웹매니페스트를 적용 하고, 웹앱으로 사용 할 수있도록 세팅 하여, 자연스러운 화면전환 애니메이션 까지 동작 하여
사용자는 기존 모바일웹을 사용하는것이 아닌 모바일앱을 사용하는것과 같은 사용자 경험을 줄 수 있습니다.
테스트용 블로그 (https://wnskin-work.tistory.com)
(모바일웹브라우저로 접속후 홈화면으로 추가하기)
구매 원하세요?
(https://ctee.kr/item/store/27332)
에서 구매하여 스킨적용후 사용해 볼 수 있어요
'웹관련 IT > 웹제작' 카테고리의 다른 글
리액트 네이티브: 모바일 앱 개발의 미래 (0) | 2023.10.17 |
---|---|
티스토리블로그에서 웹푸시 사용방법! (4) | 2018.04.10 |
코드이그나이터에서 index.php 죽이기 (0) | 2017.01.18 |
웹제작에 필요한 것들 (0) | 2016.12.06 |
홈페이지형 블로그에 대해서 네이버, 티스토리 ? (0) | 2016.11.23 |