인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

nu님의 프로필 이미지
nu

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

앱에서 까지 이용하고 싶은데 궁금한 부분이 있습니다

작성

·

134

0

더 공부하기 위해 강좌를 통해 만든 서비스를 이용하여 아주 간단하게 앱까지 제작해보려 하고 있습니다.

리액트 네이티브에서 웹뷰 형태로 웹을 불러오려 하는데 반응형 퍼블리싱을 어떻게 해야할지 궁금해졌습니다.

 

웹은 일반적으로 미디어 쿼리를 통해 임의의 분기점 마다 스타일 값을 바꿔서 자연스럽게 보이게 합니다.

패딩을 예로 들면, 분기점이 320, 760, 1080 일 경우 350px과 400px 에서는 같은 패딩 값을 갖게 됩니다.

이때 같은 8px 이라 가정한다면, 두 경우에 패딩이 화면을 차지하는 비율이 다르게 됩니다.

따라서 이렇게 px로 값을 준 요소들은 디바이스 마다 차지하는 비율이 조금씩 다르게 되고, 화면이 전체적으로 다르게 느껴질겁니다.

 

웹에서도 상대 값인 % 단위로 값을 주는 부분도 있지만, 대부분 분기점에서 어떻게 바뀌어야 하는지를 더 신경쓰고 그 사이에서는 같은 px 로 주는 경우도 많다고 느꼈습니다.

그런데 앱에서 쓰일 웹뷰의 경우도 디자인과 크게 다르지 않다면 분기점 사이의 차이는 넘어가고
디바이스 별로 화면이, 요소의 비율이 조금씩 다른건 신경쓰지 않아도 되는지 궁금합니다.

 

그래서 다른 예시를 찾아보니 어떤 앱 프로젝트에서는 마진, 패딩, 심지어 폰트 사이즈까지 상대 값인 %로 계산하여 값을 정한 코드도 보았습니다.

보통 앱에서/웹뷰에서 반응형 퍼블리싱을 어떻게 하는지, 앱개발을 해보신 제로초님께서는 어떻게 하시는지 궁금합니다.

답변 1

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

디자인 철학이 있어야 하는 부분 같은데요. 저는 오히려 % 방식이 더 이상하다고 느껴지더라고요. 저는 항상 고정된 px을 폰트, 마진, 패딩 크기로 사용했습니다. 저는 큰 기기에서는 내용물이 더 많이 보이고, 작은 기기에서는 조금만 보이는 게 당연하다고 생각하는지라 당연히 기기 크기별로 화면이 달라야한다고 생각합니다. 거기다가 폰트 사이즈는 보통 고정되어서 제공되기 때문에 화면이 큰 기기는 텍스트도 더 많아지겠죠.

nu님의 프로필 이미지
nu
질문자

말씀 감사합니다!

저도 비슷한 생각인데, 웹뷰는 성능, 디자인 등 모든 측면에서 최대한 앱과 같은 사용성을 보여야 한다는 말을 많이 들어서

혹시 그냥 웹에서 하듯 개발했다가, 봤을때 웹뷰인게 너무 티가 날까 하는 막연한 걱정이 있었습니다

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

모바일 웹 보시면 웹이랑 앱이랑 티가 별로 안 납니다. 마찬가지로 웹뷰도 앱처럼 똑같이 만들 수 있습니다. 그 차이를 느끼게 하는건 %냐 px이냐는 아닌 것 같습니다.

nu님의 프로필 이미지
nu
질문자

그렇군요! 감사합니다

한가지만 더 궁금한게 있는데 px, %의 단위가 차이를 만들진 않지만,

사용자가 앱-웹뷰 페이지를 넘나들면서 같은 경험을 하려면 기본적인 레이아웃이나 간격 등은 차이가 없어야 할 것 같은데

그러려면 앱개발자와 웹개발자가 화면 분기점을 같이 정한다거나, 특정 요소는 양쪽 모두 % 상대 값을 쓴다는 합의가 사전에 이루어져야 할까요?

앱개발도 미디워 쿼리 같은 것으로 스타일링을 하는지 궁금한데 검색해도 잘 나오지 않아서요

기초적인 질문이라 죄송합니다

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

디자이너가 통일되게 보이게끔 디자인 가이드를 줍니다. 앱에서는 제가 미디어쿼리같은 효과를 본 기억이 없네요. 가로모드냐 세로모드냐 정도는 본 것 같습니다.

nu님의 프로필 이미지
nu

작성한 질문수

질문하기