모바일 앱을 개발할 때 UI(사용자 인터페이스)를 어떻게 디자인하느냐가 매우 중요합니다. 사용자에게 편리하고 보기좋은 경험을 제공하기 위해 다양한 방법으로 UI요소의 크기와 배치를 조정할 수 있습니다.

비율늘리기

UI 요소의 크기를 상대적으로 조정하는 방법입니다. 주로 웹페이지의 반응형 화면 적용을 위해 사용됩니다.

예를들어 화면의 크기에 따라 버튼이나 이미지의 크기를 비율로 조정하여 다양한 화면 크기에서 일관된 디자인을 유지할 수 있습니다.

예시) 화면의 너비가 1000픽셀 이라면, 버튼의 너비를 50% 로 설정하면 버튼의 너비는 500 픽셀이 됩니다. 화면의 크기가 변경되면 버튼의 크기도 비율로 조정됩니다.

❕가로세로를 동시에 늘리는거에요! (하지만 기준은 가로!)

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  font-size: calc((40 / 9) * 1vw); /* Section02/02-01-ratio-scaling: 화면비율 */
}

  //    => rem 적용을 위해 global.css의 html 폰트사이즈를 가로 360 비례식을 적용한 (40/9)vw로 변경
  //    => 피그마기본가로(360) : HTML기본폰트(16) = 실제핸드폰가로(100)vw = HTML조정폰트(x)
  //    => 360 : 16 = 100vw : x
  //    => x = (40/9)vw

가로늘리기

UI 요소의 너비를 고정된 값으로 늘리거나 조정하는 방법입니다. 특정 요소가 화면의 너비를 가득 채우거나 원하는 만큼 늘어나도록 설정할 수 있습니다.

❕주로 태블릿 화면에서 반응형 화면을 구현하기 위해 사용됩니다. 왜 태블릿 화면에서 가로 늘리기로 반응형 화면을 주로 구현할까요? 그 이유는, 태블릿 화면에서 비율늘리기로 반응형을 하게 되면, %로 구성된 컴포넌트들(text, button 등) 이 필요 이상으로 커지기 때문이에요! 화면이 커졌다고 해서, 컴포넌트들도 가로세로로 필요 이상으로 커지게 되면 오히려 사용하기가 불편하겠죠?