분류 전체보기135 61. Responsive Pages 3 (중급) : 버블의 반응형 디자인 만들기, 디자인 팁, element Inspector, Align, Arrange 이 페이지는 Bubble의 반응형 디자인 방법에 관련된 자료를 다룹니다. 또한 앱을 디자인할 때 사용하거나 수행하는 데 익숙해져야 하는 몇 가지 Tip에 대해 살표 봅니다. (1) 반응 알고리즘 이해 페이지 렌더링 방법을 제어하는 알고리즘은 몇 가지 핵심 원칙을 따릅니다. 완벽한 사용자 겸험이 만족을 위해서 렌더링 엔진의 작동 방식을 전반적으로 이해하는 것이 좋습니다. 1. 일반적으로 페이지 크기가 조정되면 여백보다 먼저 요소가 축소 및 확장됩니다. Bubble은 한 줄의 모든 요소가 최대 너비인 경우에만 여백을 확장하고 모든 요소가 최소 너비이고 다음 줄로 중단될 수 있는 모든 항목이 이미 다음 줄에 있는 경우에만 여백을 축소합니다. 2. 기본적으로 대부분의 요소는 수축 및 확장이 가능합니다. Prop.. 2023. 7. 31. 60. Custom Fonts (중급) : 버블에서 사용자 글꼴 사용하기, 안전한 글꼴 사용법, custom font 설정 Bubble은 텍스트 유형에 Google Web font을 사용합니다. 자유롭게 사용할 수 있는 오픈 소스 라이브러리 글꼴이며, 글꼴 파일은 Google 서버에 저장됩니다. Bubble에서 디자인할 때 가장 쉬운 옵션은 이 라이브러리에서 사용할 수 있는 글꼴 중 하나를 사용하는 것입니다. Google Web font 라이브러리는 널리 사용되므로 사용하는 글꼴이 많은 사용자의 브라우저에 이미 캐시 되어 있을 가능성이 높습니다. 본질적으로 이는 다른 웹사이트에서 이미 글꼴을 로드했으며 사용자가 다시 다운로드할 필요가 없음을 의미합니다. 이로 인해 페이지 로드가 빨라지고 총 페이지 크기가 작아집니다. 그러나 때때로 자신의 글꼴을 설치하고 싶을 때가 있슨니다. 예를 들어 특정 브랜드의 스타일 가이드를 준수하고 .. 2023. 7. 28. 59. Styles (초급) : 버블의 스타일 설정하기, 중앙에서 통합 관리, 스타일 적용, 테마 설정하기 이 섹션에서는 앱 전체의 요소에 적용할 수 있는 중앙 집중식 스타일시트인 Style(스타일)에 대해 설명합니다.Style을 사용하면 앱 내의 요소에 대해 중요한 스타일을 설정하여 디자인 프로세스를 간소화하고 일관성을 높일 수 있습니다. (1) Style의 특징 및 장점한 곳에서 단일 스타일을 설정하면 관련된 모든 요소의 스타일을 쉽게 다시 지정할 수 있으므로 앱에서 일관된 모양과 느낌을 쉽게 설정하고 관리할 수 있습니다. 각 스타일은 특정 요소 유형에 연결되며 다음 정보를 포함합니다. (요소 유형에 따라 다를 수 있음)Background Color or image (배경색 또는 배경 이미지)Border(경계선)Shadow(그림자)Font(폰트)Transitions(전환)Styles는 디자인 프로세스를 보.. 2023. 7. 28. 58. Font Variables (초급) : 버블의 폰트 변수 설정, 앱 전체의 글꼴을 중앙에서 관리 이 섹션에서는 앱 전체의 요소 및 스타일에 적용할 수 있는 글꼴 모음을 관리하는 데 사용되는 Font Variables(글꼴 변수)를 다룹니다. Font Variables(글꼴 변수)를 사용하면 글꼴 설정을 중앙 집중화하고 여러 요소 및 스타일에서 글꼴을 변경할 수 있습니다. 사용되는 각 인스턴스에서 Font Family(글꼴 패밀리)를 수동으로 조정하는 대신 한 곳에서 Font Variables(글꼴 변수)를 수정하고 변경 사항이 앱 전체에 전파되는 것을 볼 수 있습니다. Font Variables(글꼴 변수)는 스타일과 연결할 수 있습니다. 위의 이미지에서 글꼴 목록의 상단에 있는 두 옵션은 글꼴 변수입니다. 변수가 변경될 때마다 해당 변경 사항이 모든 스타일 및 요소에 전파됩니다. 새로 만든 앱의 .. 2023. 7. 28. 57. Color Variables (초급) : 버블의 색상변수 사용하기, 변수 설정으로 전체 색상을 쉽게 변경, Hex코드 정의 이 섹션에서는 앱 전체에 공통으로 적용할 수 있는 색상 팔레트를 설정하는 데 사용되는 색상 변수(Color Variable)에 대해 설명합니다. Style(스타일) 탭의 색상 변수(Color Variable) 기능을 사용하면 Bubble 앱 전체에 적용할 수 있는 색상 팔레트를 설정할 수 있습니다. 각 색상 변수(Color Variable)에는 다음이 포함됩니다. 색상 값을 결정하는 *Hex Code 투명도를 제어하는 알파 값 색상 및 글꼴 변수를 모두 통합하여 앱에 일관된 디자인 시스템을 구축할 수 있습니다. 요소 스타일에 색상 변수를 사용하면 스타일 탭에 지정된 색상 값에 대한 연결이 생성됩니다. *참고: Hex Code Hex Code는 특정 색상을 나타내는 데 사용되는 6자리 숫자입니다. RGB .. 2023. 7. 28. 이전 1 ··· 12 13 14 15 16 17 18 ··· 27 다음
