버블 리스폰시브 엔진 간단 정리!

버블의 새로운 리스폰시브 엔진!
좋은 점도 많지만, 이전처럼 내가 배치하고싶은곳에 드래그 해서 만들어 넣던 그 편리함은 없어져서 너무 답답한 이것!

리스폰시브엔진을 처음 이해하는데에 필요한 핵심만 골라서 이해하기 쉽게 정리했어요.
아래 내용만 이해하고 들어가도 배움의 첫걸음이 수월해 질거에요.

Step#1. 아이들을 세로로 쌓느냐, 가로로 쌓느냐 정해줘요.

  • 컨테이너 엘레먼트 (Group, Repeating Group, Popup, Floating Group, Group Focus)의 Layout 탭에는 이런 설정이 있어요.

  • 대부분의 경우에서 Container layout은 Row(가로쌓기)와 Column(세로쌓기)입니다.

  • Align to parent는 child 요소를 겹쳐야 하는 상황 등 특수한 UI 구성시 사용됩니다.

  • Fixed는 거의 안쓴다고 해도 무방합니다.

  • Column은 그 컨테이너의 바로 아래 아이들이(손자들 아님 주의!) 세로로 차곡차곡 쌓입니다.
    (여기서 "아이들"은 엘레먼트 트리에서 봤을 때 해당 그룹의 바로 하위에 있는 엘레먼트들입니다!)

  • Row는 그 컨테이너의 바로 아래 아이들이(손자들 아님 주의!) 가로로 차곡차곡 쌓입니다.

  • Row특: 오른쪽에 더 쌓을 수 없으면 다음줄로 자동으로 넘어감

Step#2. 아이들의 배치 모양을 정해줘요.

  • 세로쌓기일 경우 Container alignment 설정에서 아이들이 세로로 위쪽으로 붙을지, 가운데 정렬할지, 아래로 붙을지, 적절하게 찢을지, 위아래로 쭉 찢을지 정해줄 수 있어요
    image
  • 가로쌓기일 경우 Container alignment 설정에서 아이들이 왼쪽으로 붙을지, 가운데 정렬할지, 오른쪽으로 붙을지, 적절하게 찢을지, 양옆으로 쭉 찢을지 정해줄 수 있어요
    image

Step#3. 아이들 본인의 배치 모양을 정해줘요.

  • 이제는 그룹의 설정이 아니라 그룹안에 들어있는 각각의 아이들의 정렬 또한 설정해 줘야 합니다!
  • Parent가 세로쌓기(Column)일 경우, Horizontal alignment(가로정렬) 옵션이 있어요.
    세로로 어떻게 정렬되어야 할지는 Step#2를 이용하면 되겠죠?
    image
  • Parent가 가로쌓기(Row)일 경우, Vertical alignment(세로정렬) 옵션이 있어요.
    가로로 어떻게 정렬되어야 할지는 Step#2를 이용하면 되겠죠?
    image

Step#4. Margin, Padding을 이용해서 자리를 잡아줘요.

  • Padding은 안쪽으로 여백을, Margin은 바깥쪽으로 여백을 줄 수 있어요.
    image

TIP#1. Row그룹 안에 Column그룹을 넣는 등 그룹 안에 다른 정렬타입의 그룹 넣는 것에 익숙해지세요! 예전 방식보다 "그룹 안에 그룹"을 정렬의 이유만으로 많이 쓰게 될거에요!

TIP#2. 마진, 패딩으로 모든걸 해결하려고 하지 마세요! 최대한 정렬 기능으로 원하는 위치에 갓다 놓고, 마지막 터치만 마진으로 해결하세요.

TIP#3. 마이너스 마진도 가능하답니다.

TIP#4. 엘레먼트 생성시 제일 먼저 Width, Height 설정을 해주면 편해요

3개의 좋아요

헷갈렸는데, 정리해 주셔서 감사해요^^