[bubble] 반응형 엔진을 사용한 모바일용 구축 (responsive engine)

 

Bubble 반응형 엔진이란

 

2022년에 도입된 기능으로 기종의 화면의 크기와 해상도에 맞게 레이아웃과 콘텐츠를 자동으로 조정해주는 기능이다. 

 

반응형 디자인의 중요성 (The Importance of Responsive Design)

 

1. 광범위한 사용자 수용

모든 장치에서 엑세스가 가능하여 앱의 사용성을 높일 수 있다. 

 

2. 개발 시간 단축 

해상도에 맞게 개발할 필요가 없으므로 개발 시간이 단축된다. 

 

3. 검색 상위노출

검색 엔진은 모든 장치에서 액세스할 수 있는 페이지를 선호하므로 페이지 순위를 높일 수 있다. 

 

 

IOS 기종별 화면 사이즈 ( Display properties of every iPhone )

 

 

https://www.ios-resolution.com/

iOS Resolution // Display properties of every iPhone, iPad, iPod touch and Apple Watch Apple ever made

 

 

Bubble 로 모바일 앱 최적 해상도 세팅하기

 

1. 가장 작은 화면을 기준으로 해상도를 맞춘다. 

가장 작은 사이즈 : 320X568px

 

 

 

 

페이지 Layout 설정

- Container layout : Align to parent 

- Default builder width : 320px

- Min heigh : 568px

 

 

 

 

 

 

 

 

 

첫번째 Group (BackGround 지정용)

- Container layout : Align to parent 

- Make this element fixed-width : Checked

- Width : 100%

- Make this element fixed-height : Unchecked

- Min height : 100%

 

 

 

 

 

두번째 Group (content 용)

- Container layout : Column

- Make this element fixed-width : Checked

- Width : 100%

- Make this element fixed-height : Unchecked

- Min height : 0px

- Fit height to content : Checked

- Bacnground style : None

 

 

이렇게 완성한 반응형 모바일 페이지 !!!!! 

사이즈를 바꿔도 깨지지 않는걸 볼 수 있다.

 

 

chrome 확장프로그램으로 반응형 뷰 확인

 

[ 추천하는 확장프로그램]

https://chromewebstore.google.com/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=ko&utm_source=ext_sidebar

 

 

확인 방법 

bubble > preview > 확장프로그램 ON 

 

 

 

 

CSS Tool Plug in 이용하기

 

1. 위의 CSS Tools 의 플러그인을 다운 받고 

2. Layer에 CSSTools를 추가

3. 원하는 Layer에 조건을 넣는다.

ex. CSSTools A's Current Page Height > 800 이면 margin값을 준다. 이런식으로 css를 추가할 수도 있다. 

 

 

느낀점

 

노코드가 코딩하는 것 보다 어렵다.. 후.. 그래도 끝까지 해보자 !!

특히, 버블을 이용해서 노코드를 만드는 영상 대부분이 영어다 ㅠㅠ 

영어를 해석하면서 공부하려니 더 어렵다..

개발공부하기전에 영어공부를 해야할 판..

 

 

 

참고한 유튜브 

https://www.youtube.com/watch?v=CfpryewPoW4