개발자

React Native에서 웹뷰 사용 시, 웹 개발 진행 방식

2023년 04월 02일조회 478

안녕하세요, 이번에 React Native로 처음 앱을 띄워보려고 하는데요, 아마도 React나 Next.js로 만든 웹을 가지고 웹뷰 형태로 모바일 서비스를 할 것 같습니다. 앱을 타겟으로는 처음 개발하는 거라, 개발 전에 궁금한 점들이 좀 생겼는데요, 총 2가지이고 아래와 같습니다. 첫번째는 웹뷰를 사용한다고 가정할 때, 어쨌든 웹 코드를 짜게 될텐데, 보통 개발 단계에서 시뮬레이터를 보면서 개발을 진행하나요? 아니면 브라우저 디바이스 모드를 보면서 개발을 진행하나요? 두번째는 웹뷰를 사용해서 앱으로만 사용할거라고 하면, 웹 개발 시 예컨대 미디어 쿼리를 사용했을 때 일반적으로 딱 모바일용 스타일만 고려해서 코드를 짜나요? 아니면 나중에 어찌될 지 모르니(?) 데스크톱용 스타일과 모바일용 스타일 2가지 정도만이라도 분기해서 코드를 짜나요? 소중한 답변 미리 감사드립니다☺️

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

답변 3

프레드윰님의 프로필 사진

1. 둘다 봐야되요. 피씨 시뮬 환경에서만 보는게 아니라 폰을 안드나 사과폰 둘다 가져있어야되요. 어쩔수없이 개발하는 입장에선 서브폰 가져있으면 좋구요 회사에서 지원된다면 더더욱좋구요 2. 요즘엔 좋은 라이브러리도 많아서 그걸로 쓰면 될것 같아요. 근데 회사에선 데탑 일렉트론 앱 쓴다고 하셨나요? 그거 아니면 모바일이나 테블릿 위주만 하면 될것 같아요

profile picture

익명

작성자

2023년 04월 04일

감사합니다😊

이근환님의 프로필 사진

1. 개발단계에서는 시뮬레이터 및 브라우저에서 제공하는 모바일 환경에서 개발을 진행하였습니다. 2. 보통은 레이아웃을 모바일일 때 기준으로 작성하고, 데스크톱일 때는 모바일인 화면을 가운데로 위치시키고 나머지 여백 영역에 #cacaca와 같은 그레이한 색상으로 배경처리를 하곤했었습니다. 데스크톱일때 모바일 크기와 동일하면 다소 어글리해보일수 있으니 max-width: 600px정도로 잡아서 조금 키워주는게 좋을 것 같네요 ㅎㅎ

profile picture

익명

작성자

2023년 04월 04일

경험 공유 감사드립니다😆

윤영훈님의 프로필 사진

윤영훈

개발2023년 11월 07일

안녕하세요! 서칭중에 궁금한점이 있어서 글 남깁니다. 개발단계에서 시뮬레이터를 안드로이드 스튜디오와 Xcode 둘다 켜놓고 보셨나요?

이근환님의 프로필 사진

이근환

NAVER Z 프론트엔드 개발자2023년 11월 07일

둘다 켜놓게될경우 메모리가 많이 점유되다보니 느려져서 개인적으로는 iOS(Xcode)로 앱을 기동하여 개발을 하였고 안드로이드는 나중에 켜서 확인하는 용도로 썼습니다 크로스 플랫폼 앱의 특성상 OS에 따라 결과물이 달라질수 있다보니 그렇게 썼던 것 같아요! 그때가 2017~2020이었으니 지금은 기기성능이 좋아져서 둘다 켜놓고 봐도 괜찮은지는 모르지만 제 경험은 요렇습니다!

커리어리 AI 봇님의 프로필 사진

안녕하세요! React Native와 웹뷰를 이용한 앱 개발에 대해 궁금하신 점에 대해서 답변 드리겠습니다. 웹뷰를 사용할 때 개발 단계에서 시뮬레이터를 보면서 개발을 진행할 수도 있고, 브라우저의 디바이스 모드를 보면서 개발을 진행할 수도 있습니다. 웹뷰의 경우, 실제 모바일 기기의 환경과 가장 비슷한 상태를 보여주기 때문에 시뮬레이터를 이용하는 것이 더 정확한 결과를 얻을 수 있습니다. 그러나 브라우저의 디바이스 모드도 충분히 개발 과정에서 참고할만한 도구입니다. 둘 중 어느 것을 사용하더라도, 개발자의 편의에 따라 선택하시면 됩니다. 웹뷰를 사용해서 앱으로만 사용한다고 가정하면, 일반적으로 모바일용 스타일만 고려해서 코드를 작성하게 됩니다. 물론, 나중에 웹 버전을 추가할 가능성이 있다면, 미디어 쿼리를 사용하여 데스크톱용 스타일과 모바일용 스타일을 분기해서 작성하는 것이 좋습니다. 이렇게 하면 웹 버전을 추가할 때 스타일 변경이 최소화되고, 코드 유지 관리가 더 용이해집니다. 질문에 도움이 되었길 바라며, 앱 개발에 성공적인 결과를 얻으시길 기원합니다! 😊 ----- ✅ Chat GPT의 답변을 평가해 주세요! - 답변 내용이 올바른지, 틀린 내용은 없는지 댓글로 작성해 주세요.

커리어리 AI 봇의 답변을 평가해 주세요!

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

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

또는

이미 회원이신가요?

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

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

새로운 질문 올리기

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