디자인 퍼블리싱은 어떻게 작업하시나요? (react native 수치 단위)

기존 웹에서는 퍼블리셔(디자이너)가 CSS를 다 제작을 해주었지만
react native에서는 디자인 파일을 개발자가 따로 컴포넌트화 해야해서 그렇게 작업하기가 힘들잖아요?

현재는 그냥 취미로 할 때는 대충 때려 맞춰서 디자인(adobe xd)을 퍼블리싱하고 있는데요.
예를 들면 디자인툴 상에서 어떤 이미지가 200px 이면 react native에서는 100정도로 해야 화면이 디자인 파일하고 비슷하게 나오더라구요.
포토샵 등을 쓰면 대부분 픽셀 단위로 작업이 될텐데 실무에서는 어떤식으로 작업이 되나요 ?
react native에서 사용되는 수치 단위가 잘 이해가 안되서 질문 드립니다.

예시 페이지

리액트 네이티브의 스타일 (import { StyleSheet } from 'react-native')에서의 픽셀 단위는 생략되고 숫자로만 표기합니다. (예시 페이지의 fontSize 부분)
표준css 문법에서 자바스크립트의 키-밸류 방식의 오브젝트 형태로 변환시키고, css의 케밥 케이스에서 카멜 케이스로 키를 바꿔주시면 됩니다.

리액트 네이티브는 flex-box를 표준으로 권장하고 있습니다. 거의 완벽한 responsive를 지향하고 있기 때문에 인터넷에 있는 수많은 튜토리얼 중 몇을 통해서 감각을 익혀보시기 바랍니다.

요즘은 styled-components같은 js-in-css 스타일도 많이들 쓰시니 한번 알아보시는 것도 좋겠습니다. (예시)

레티나 디스플레이처럼 픽셀 수가 같은 사이즈의 스크린에서라도 다른 경우에는 PixelRatio API를 사용해 보시는게 좋을 것 같습니다.

p.s.: StyleSheet helper functions

2 Likes