웹뷰에 대한 현직자의 인사이트

1. 웹뷰-앱에서 url scheme 의 구체적인 사용 방법이 궁금합니다

지금 처음 웹뷰를 개발해보고 있는데 앱 내 웹뷰에서 앱으로 개발 된 다른 페이지로 이동을 할 때 url scheme 을 사용하는 걸로 알고 있습니다 '<scheme>://<domain>/...' 이런 형태의 주소를 a 태그에 걸고 클릭 하면 앱의 네비게이션을 통해 페이지 이동을 한다 라는 것 까지만 알고 있는데 실제로 여기까지 해서 클릭 해보니 별다른 동작이 없었습니다 웹뷰에서는 약속된 주소를 a 태그에 거는 것 까지 하는게 다 인 것 같은데 앱에서는 스킴을 등록한 후 어떤 처리가 더 필요한지, 웹뷰에서 링크를 클릭 했을 때 앱에서는 구체적으로 어떤 과정을 더 거쳐 최종적으로 페이지가 이동하는 건지 궁금합니다 아무리 찾아봐도 관련 글이 나오지 않아 질문 남깁니다..! 기술 스택은 웹뷰는 nextjs, 앱은 flutter 입니다 + 그리고 ios 환경에서 웹뷰 텍스트 인풋 클릭했을 때 키보드는 올라오는데 인풋에 커서가 안생기고 입력해도 값의 변화가 없는 에러를 경험해 보신 분 있으실까요..?

답변

안녕하세요! 웹뷰 네비게이션 관련은 url scheme을 등록하더라도 해당 로직을 처리해주는 코드가 필요한 것으로 알고 있습니다. 웹뷰에서 발생하는 이벤트를 잡아서 코드 로직으로 수행한다 - 라고 알고 있어요. 플러터는 아니지만 이 링크를 참고해보시면 어느정도 이해하실 수 있을것 같습니다. https://developer.android.com/develop/ui/views/layout/webapps/webview#custom-urls

2. 웹뷰에서 앱 버전에 따라 처리하는 방법

최근 앱 내 웹뷰가 자주 쓰이고 그 장점이 항상 최신 버전을 유지 할 수 있다는 것으로 알고 있습니다. 그런데 아무리 웹뷰 자체는 최신이더라도 앱의 버전에 따라 분기 처리가 되어야 하는 부분이 없진 않을 것 같습니다 예를 들어 새로운 페이지를 웹뷰로 개발하게 되면 앱에서 딥링크로 접근이 가능하게 연결해주는 로직이 필요하고 이것은 앱을 업데이트 해야 적용될테니 이미 만들어진 웹뷰에서 새로 만들어진 웹뷰로 가는 링크 버튼은 있는데 앱을 업데이트 안해서 접근은 불가능한 경우가 있을 것 같습니다 이렇게 앱 내 웹뷰에서 앱 버전에 따른 처리를 어떻게 하시는지 궁금합니다

답변

해당 로직 처리같은 경우는 앱마다 조금씩 다를텐데요. 아예 대응하지 않은 앱도 사용경험상 있었던 것 같습니다. 저희앱과 저희팀같은 경우는 앱에서 받는 여러 가지 정보 중 앱버전에 관한 정보가 있는 필드가 있습니다. (앱에서 웹뷰로 정보를 전달받는 방법은 좀 다양할 것 같은데 보안상 외부로 사실 따로 공개하진 않습니다.) 해당 정보를 받아 client 내부에서 전역 상태로 관리합니다. 그리고 특정 딥링크가 지원하는 버전이 앱 최소지원버전보다 높다면 지원하는 버전을 상수로 관리합니다. 그리고 사용하는 쪽에서 compare-versions와 같은 라이브러리를 사용한 함수를 이용해 앱버전 비교를 한 후 이후 진행되는 비즈니스 로직을 분기합니다. 딥링크 뿐만 아니라 UI/UX 차이가 있을 때도 해당 분기를 사용하고 있습니다.

3. 앱에서 해당 뷰가 웹뷰인지 알 수 있는 방법이 있을까요?

네이트브 앱과 웹뷰로 만든 앱 구분 방법이 궁금합니다. 웹뷰로 만든 앱들을 더 참고해보려고 하는데 이 앱이 웹뷰를 사용했는지 판단할 수 있는 방법을 알려주실 수 있나요? 미리 감사합니다.

답변

(안드로이드 한정이긴 하나) 폰에서 개발자 설정 활성화하시고, 레이아웃 범위 표시를 활성화해서 보면 네이티브는 레이아웃들이 나눠져서 보이고요, 통으로 보이는 것은 웹뷰라고 생각하시면 됩니다. 근데 플러터로 만든 앱은 또 웹뷰처럼 통으로 보인다네요 ㅎㅎ

4. 웹뷰만 있는 어플 괜찮을까요?

안녕하세요! 창업 준비중인 대학생 프론트 개발자입니다 팀에 클라이언트 개발자가 웹 프론트만 존재하는 상황입니다 또, 잦은 업데이트나 생산성 등을 고려했을 때 초기에는 웹뷰로 개발을 하는게 나을 것 같다고 생각하고 있는데요 RN을 컨테이너로 사용하고 웹뷰로 이루어진 어플을 생각하고 있어요 런칭 과정에서 문제가 발생하는 사태가 일어날까 걱정이 되네요... 1. 웹뷰로만 이루어진 어플이 AOS, IOS 모두 출시가 가능할까요? 2. 웹뷰 개발은 처음인데, 웹을 어플이다 생각하고 개발하면 되는건가요? 3. 충고, 조언 부탁드립니다 긴글 읽어주셔서 감사합니다!

답변

비추천 합니다. - 온라인에서만 사용 가능 - 성능이 떨어짐 - 네이티브 ux부재 등등.. RN으로 개발하고 code push로 지속적으로 업데이트 하는 방식은 어떨까요? 토스 프론트팀이 RN으로 생산성을 높인 영상하나 추천드려요! 프로젝트에 참고되셨으면!🙏 https://m.youtube.com/watch?v=b_6CjuvVg8o

5. react-native에서 html을 렌더링 하는 방법이 있을까요?

안녕하세요, react를 사용하다가 이번에 앱을 개발하기 위해 react-native 튜토리얼을 공부하고 있습니다. react-native는 View, Text 같은 jsx엘리먼트를 사용하는 것으로 알고 있는데요, 서버에서 string에 html형식으로 담긴 데이터를 그릴 수 있는 방법이 있을까요? 이미 구현된 react 웹사이트에서 글 작성시에 html로 DB에 저장하고 보여주고 있습니다. 이 데이터를 그대로 사용하고 싶은데 react-native는 태그형식이 다른 것 같아서 어떻게 해야하는지 궁금합니다.

답변

이미 React로 해당 기능을 구현한 페이지가 있다면 그 페이지를 react-native-webview로 띄우시는 건 어떨까요? https://github.com/react-native-webview/react-native-webview

6. React-native에서 webview로 cookie 넘겨줄 때, Ios cookie 에러

안드로이드에서는 cookie를 webview로 잘 받아서 넣어주는데 Ios에서는 cookie 전달이 잘 안 되는 문제가 발생합니다. Link앞에 .를 붙였더니 됐다 안 됐다 하긴 하는데 명확한 해결책이 궁금합니다! 도움이 절실합니다..🥹

답변

안녕하세요! 코드가 없어서 정확한 원인을 파악하기는 어려울 것 같지만, 구글링을 좀 해보니 이런 글들이 있네요! iOS 쪽 관련 글들만 모아봤습니다 :) - https://github.com/react-native-webview/react-native-webview/issues/2067 - https://stackoverflow.com/questions/49038243/react-native-webview-missing-session-cookies-on-ios - https://stackoverflow.com/questions/36785545/how-to-set-a-custom-header-for-webview-requests-in-react-native/37917932#37917932 - https://stackoverflow.com/questions/45920472/react-native-webview-cookies-issue - https://velog.io/@ricale/React-Native-WebView-%EC%97%90%EC%84%9C-%EC%BF%A0%ED%82%A4%EA%B0%80-%EC%9C%A0%EC%A7%80%EB%90%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EB%AC%B8%EC%A0%9C - https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#working-with-custom-headers-sessions-and-cookies

7. 리액트나 뷰로 모바일 앱을 만든다는게

프로젝트들 구경하다가 든 질문인데 모바일 앱인데 프론트 기술 스택으로는 리액트를 썼다고 합니다. 이런 거는 네이티브 테두리 안에 웹뷰로 썼다는 건가요? 아니면 그냥 모바일 페이지를 만들고 브라우저로 사용가능하다는 건가요?? 리액트나 next js 같은 프레임워크를 사용해서 모바일 앱을 만든다는 얘기도 많이 들었고 채용공고에서도 많이 봤었습니다. 리액트 네이티브가 아니라 그냥 리액트로 앱을 만드는데 프론트엔드가 정확히 어떤걸 어떻게 만드는지 궁금해서 질문 남겨봅니다!

답변

안녕하세요! | 이런 거는 네이티브 테두리 안에 웹뷰로 썼다는 건가요? 아니면 그냥 모바일 페이지를 만들고 브라우저로 사용가능하다는 건가요?? 앱에서 next.js 썼다, react-native 말고 react 썼다라고 한다면 보통 전자를 뜻하는것 같긴합니다. 후자는 모바일 웹이라고 명칭하는듯 해요. 두 방식 다 프론트엔드 개발을 해서 서버를 띄우는건 동일합니다.