개발자

하이브리드앱 화면 전환 애니메이션 도움 부탁드립니다

3월 12일조회 116

nextjs 로 하이브리드앱을 개발하고 있습니다. 네이티브 쪽은 AOS - kotlin, IOS - swift 입니다. 제가 궁금한 부분은 보통 앱들을 보시면 페이지 이동시, 새로운 페이지가 기존페이지를 덮으면서 슬라이딩 되어 나타나고, 뒤로가기를 하면 다시 현재페이지가 슬라이딩 되어 사라지면서 밑에 있던 이전 페이지가 보이는 형태입니다. 요즘은 하이브리드앱으로 많이 개발하는것으로 알고 있는데, 하이브리드앱인데 위의 페이지 전환 효과가 있는 앱들은 보통 어떻게 구현하는지 너무 궁금합니다! 애니메이션을 구현하려면 네이티브 기능을 꼭 써야 하는걸까요? 써야 한다면 하이브리드앱에서도 가능한 걸까요? 구글과 유튜브 상의 페이지 전환 애니메이션을 적용해봐도 제가 사용하는 앱들만큼의 자연스러움이 없네요. 선배님들의 도움 부탁드립니다!

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

포크코딩님의 프로필 사진

네이티브쪽에서 Stack이라고 부르는 페이지 네비게이션 방식을 구현하길 원하는 것 같습니다. 방법은 두 가지 정도 있습니다. # 무식한 방법 nextjs에서 페이지를 따로 page.tsx로 구분하는 것이 아니라 별도 컴포넌트로만 구현합니다. (네비게이션은 별도 상태관리 store나 context로 관리합니다) 컴포넌트에 mount, unmount 애니메이션을 적용합니다. 애니메이션은 css를 직접 쓰던 framer-motion 같은걸 적용하던 자유입니다. 무식한 방법이라고해서 멍청한 방법은 아닙니다. 앱 규모가 작으면 괜히 이것저것 붙여 넣는게 더 손해이기 때문에 소개해 드립니다. # template.tsx 사용하기 layout을 통해 애니메이션을 적용하면 앱이 로드될때 한번만 적용됩니다. 페이지 전환 애니메이션을 적용하기엔 어렵죠. 그래서 사용하는 것이 template.tsx입니다. 사용방법은 직관적이니 공식문서만 참고하셔도 금방 이해하실겁니다. 단, 네이티브 앱과 같은 네비게이션을 위해선 페이지 이동에 대한 state를 별도로 관리하셔야 합니다. 뒤로 가기, 앞으로 가기가 구현되어야 하기 때문입니다.

profile picture

익명

작성자

3월 13일

감사합니다. 추천해주신 두 번째 방법은 적용을 해보았는데 부자연스러워 첫 번째 방법을 시도하거나 연구를 좀 더 해봐야할 거 같네요! 한 가지 더 여쭤보고싶은게 있습니다. 제가 하이브리드앱으로 알고 있는 앱들이 페이지 이동시 stack navigation을 사용하는데, 그럼 페이지 이동하는 부분은 웹에서 네이티브의 기능을 호출하여 구현한걸까요? 해당 기능을 구현한 분이 주변에 없어서 어떻게 동작을 하는지 궁금합니다. 답변 해주시면 정말 감사드리겠습니다

포크코딩님의 프로필 사진

포크코딩

별빛상단 단주3월 13일

사람들 하는 것을 살펴보면 세 가지 방향인거 같습니다. 1) 네이티브 앱에 중간중간 요소만 웹뷰 요소를 담는 방식 - 네비게이션이 네이티브이기 때문에 별도로 신경쓸 필요가 없습니다. 2) 네이티브 애니메이션을 모사하는 라이브러리 별도 제작 (라이브러리는 네이티브와 연결할 수 있는 중간 다리가 필요) 3) 내 웹 코드를 네이티브 코드 방식으로 컴파일 하는 방식

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!