이 섹션에서는 Bubble 앱의 일반 비주얼 설정을 다룹니다.
• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
리소스 문제로 현재 번역은 중단한 상태입니다. 저를 대신해 번역을 리드하고 싶은 분이 있다면 연락 주세요!
Bubble에서 하는 대부분의 디자인 선택은 페이지를 디자인하고 스타일을 조작하는 과정에서 이루어집니다. 이 섹션에서는 앱의 일반 비주얼 설정에 대해 알아보겠습니다.
Setting a favicon
파비콘이란 무엇인가요?
앱에 파비콘을 할당하려면 먼저 설정 - 일반으로 이동한 다음 일반 모양 헤더로 스크롤하세요.
그 바로 아래에서 파비콘 설정을 찾을 수 있으며, 여기에서 파비콘으로 사용할 이미지를 업로드할 수 있습니다. 파비콘은 정사각형 이미지여야 하며 다음 사항을 고려해야 합니다.
•
파비콘은 PNG 또는 JPG 형식이어야 합니다. SVG는 모든 브라우저에서 지원되지 않습니다.
•
16x16 픽셀로 작게 볼 수 있습니다. 텍스트와 같은 작은 세부 사항이 손실될 수 있습니다.
•
일부 브라우저는 다크 모드를 지원합니다. 어두운 파비콘이 어두운 배경에 대조적으로 어려울 수 있습니다.
Changing the color of the progress bar and spinner
진행 표시 줄은 Bubble이 데이터베이스에 쓰기와 같은 특정 작업을 수행할 때 페이지 상단에 나타나는 로딩 표시줄입니다. 스피너는 반복 그룹에 대한 데이터를 가져올 때와 같이 데이터를로드할 때 보이는 회전 아이콘입니다.
이 둘의 색상은 설정 - 일반으로 이동한 다음 일반 모양 헤더로 스크롤하여 변경할 수 있습니다. 거기에서 다음 두 가지 설정을 찾을 수 있습니다.
•
진행 표시 줄 색상
•
반복 그룹 스피너
Hiding mention of Bubble in the Developer Tools console
콘솔이 무엇인가요?
기본적으로 Bubble은 콘솔에 다음과 같이 보이는 작은 텍스트 섹션을 포함합니다.
이 텍스트를 콘솔에서 숨기려면 콘솔에서 Bubble 언급 제거 확인란을 선택할 수 있습니다. 이 정보는 대부분의 사용자에게는 보이지 않습니다. 브라우저의 개발 도구에서 콘솔을 명시적으로 로드하는 사용자만 볼 수 있습니다.
Exposing an ID Attribute to elements
ID 속성이란 무엇인가요?
Bubble의 요소에 ID 속성을 노출하는 것은 여러 가지 이유로 유용합니다. 예를 들어 특정 요소에 사용자 지정 스타일을 적용하거나 Javascript 코드를 바인딩하는 데 사용할 수 있습니다. 일부 플러그인은 ID 속성을 사용하여 특정 요소를 식별하도록 요구할 수도 있습니다.
Enalbing and setting the ID attribute
Bubble의 요소에서 ID 속성을 노출하는 것은 기본적으로 비활성화되어 있지만 다음과 같이 활성화할 수 있습니다.
1.
설정 - 일반으로 이동하여 일반 모양 헤더로 스크롤하고 HTML 요소에 ID 속성 추가 옵션 확인란을 선택합니다.
2.
그런 다음 ID를 적용하려는 요소로 이동하여 해당 속성 편집기를 열고 모양 탭 하단으로 스크롤합니다. 아래의 설명서를 참조하세요.
Formatting an ID
ID를 형식 지정할 때 여러 가지 규칙을 준수하는 것이 유용합니다.
1.
고유성: ID는 페이지 내에서 고유해야 합니다. 반복 그룹의 셀의 인덱스를 포함한 동적 콘텐츠를 ID 속성에 포함할 수 있습니다.
2.
글자로 시작: 글자(대문자 또는 소문자)로 시작해야 하며 문자, 숫자, 하이픈, 밑줄, 콜론 및 마침표의 조합이 가능합니다.
3.
공백 없음: 어떤 공백도 포함해서는 안 됩니다.
4.
대소문자 구분: ID는 대소문자를 구분합니다. 예를 들어 elementID와 elementid는 다른 ID로 간주됩니다.
5.
특수 문자 피하기: 하이픈 및 밑줄과 같은 일부 특수 문자는 허용되지만, 브라우저 또는 기술에 대한 예기치 않은 동작을 피하려면 일반적으로 ID를 알파벳과 숫자로 유지하는 것이 좋습니다.
마지막으로 ID를 참조할 때는 ID 문자열이 정확하게 해당 요소에 할당된 것과 일치함을 기억하세요. ID는 대소문자를 구분하므로 케이스의 약간한 변형이나 추가 공백도 참조 실패의 원인이 될 수 있습니다. ID를 복사하여 붙여넣기를 권장합니다.
Related Topics
Page and element styling
Styles
Font and color variables
