📸 중요한 개발 스택
next.js로 앱을 개발할 때, 무엇보다도 자연스럽고 스무스한 애니메이션을 중요하게 여겼다.
웹은 딱딱해도 되지만 앱은 부드러워야한다는 관념이었는데 이에 있어서 라이브러리 선택도 중요하게 여겼다.
framer-motion: 화면 전환에 있어서 매우 중요한 틀을 만들어주었던 라이브러리
tailwindcss: 보기엔 복잡해보이지만 배우면 쉬운 스타일 라이브러리
근데 고작 이 두개밖에 사용하지 않았다!
이 라이브러리를 활용해 어떤 방식으로 개발할 수 있었을까?
🔥 개쩌는 화면전환
페이지 전환 애니메이션을 만드려고 provider를 만들었다.
framer-motion의 AnimatePresence와 motion.div의 variants프로퍼티를 잘 설정해주고 나니까 페이지 전환 시 깔끔하고 센스있는 불투명도를 이용한 화면전환을 만들 수 있었다.
🎬 레이아웃 만들기
먼저 가장 기본적인 레이아웃을 구현해보려고 했다.
헤더와 콘텐트 영역, 푸터가 존재하는데, 만들기 꽤 까다로웠다.
헤더와 푸터가 고정되면서, 아래로 당겨서 새로고침하는 Pull To Refresh 기능까지 구현해보고 싶었다.
근데 헤더와 푸터의 position을 fixed로 하기엔 뭔~~가 이상했다.
.h-[<헤더 크기>] 해서 공간을 채우기엔 너무 비효율적인 것 같았다.
그래서 그냥 100vh에 헤더와 푸터의 크기를 빼서 콘텐츠 영역에 적용하고, overflow-y를 scroll로 주었더니 fixed 효과가 나왔다.
그렇게 하고나니 Pull To Refresh 기능은 생각보다 구현하기 쉬웠다.
근데 플러터의 웹뷰로 감싸고 나니 뭔가 2% 아쉬웠다.
🤔 노치, 플러터와의 연동
허허허... 아이폰에서 노치부분이 굉~장히 신경쓰였다.
(노치가 표시되고 있던 영역도 웹뷰로 다 채워버리고 싶었음)
그래서 GPT한테 물어보니까, 플러터에서 바디영역 padding을 0으로 설정하면 노치 영역이 사라진다고 해서 빼봤다.
어라? 아니 잠깐만
노치 영역이 없어지긴 했지만, 엄.... 콘텐츠 영역이 이상하게 자리잡았다.
GPT한테 한번 더 물어보니까 노치 영역과 하단 바? 영역의 높이를 구할 수 있다고 했다.
그래서 플러터 웹뷰의 runJavascript 기능으로, localStoarge에 top과 bottom 값을 저장하도록 했다.
근데 저장이 안되고있었다. (보안 이슈로 localStoarge에 접근하지 못하도록 해둔 것 같았다)
그래서 어쩔수 없이 window.runBarHeight 같은 메서드를 만들고 top과 bottom값을 받아서 해당 메서드가 localStorage를 대신 설정해주는 방법으로 갔다.
그리고 콘텐츠 영역에서 간단하게 top, bottom을 패딩 값으로 줘서 알잘딱 해주니까 이런 느낌의 화면이 나왔다.
겁나 있어보였다! 와우 정말 매우 신났다. 덕분에 공중제비 10바퀴를 돌았다.
님들도 해보세요 재밌습니다.
