Home
home
버블박스
home

Responsive Design

ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.

반응형 디자인이란 무엇입니까?

반응형 디자인은 사용자가 앱에 액세스하는 데 사용하는 장치의 종류에 관계없이 뛰어난 경험을 제공하는 방법입니다.
반응형 디자인은 레이아웃과 콘텐츠를 적절하게 조정하여 모든 해상도와 화면 크기에서 앱이 의도한 대로 보이도록 보장합니다.
다양한 장치에 대해 별도의 페이지를 설정하는 대신 반응형 디자인의 목표는 액세스하는 데 사용되는 장치의 화면 크기와 해상도에 맞게 레이아웃과 콘텐츠를 자동으로 조정하는 단일 페이지를 만드는 것입니다.
반응형 디자인은 다음과 같은 여러 가지 이유로 중요합니다.
모든 유형의 장치에서 액세스할 수 있으므로 가장 많은 수의 사용자가 앱에 액세스할 수 있습니다.
별도의 페이지를 디자인하고 유지 관리할 필요가 없으므로 개발 시간이 단축됩니다.
검색 엔진은 모든 기기에서 액세스할 수 있는 페이지를 선호하는 경향이 있으며, 이는 이러한 페이지의 순위를

Bubble의 반응형 엔진

Bubble은 페이지를 구축하는 데 사용하는 것과 동일한 시각적 편집기에서 앱 반응성의 모든 측면을 제어할 수 있는 디자인 환경을 제공합니다. 그리드 기반 레이아웃을 사용하여 장치의 화면 크기와 방향에 따라 페이지 모양을 변경합니다.
예를 들어 데스크톱 컴퓨터와 같은 큰 화면에서는 페이지에 탐색 메뉴, 기본 콘텐츠 영역 및 사이드바가 포함된 3열 레이아웃이 있을 수 있습니다. 그러나 스마트폰과 같은 작은 화면에서는 동일한 페이지가 탐색에 액세스하기 위해 "햄버거" 메뉴 아이콘이 있는 단일 열 레이아웃으로 콘텐츠를 재정렬할 수 있습니다.
다음 기사에서는 이 설계 방법이 어떻게 작동하는지에 대한 기본 사항을 살펴보겠습니다.

다른 학습 방법

비디오 레슨
Bubble의 반응형 엔진은 2022년에 도입된 기능입니다. 이전 애플리케이션에서는 페이지별로 기능을 활성화하고 해당 페이지를 새 엔진으로 변환해야 할 수도 있습니다.