이 섹션에서는 Bubble의 중앙 스타일시트를 관리하는 도구인 스타일에 대해 다룹니다.
• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
Bubble은 텍스트 유형에 Google Web Fonts를 사용합니다. 이는 자유롭게 사용할 수 있는 대규모 오픈 소스 글꼴 라이브러리이며 글꼴 파일은 Google 서버에 저장됩니다. Bubble에서 디자인할 때 가장 쉬운 옵션은 이 라이브러리에서 사용할 수 있는 글꼴 중 하나를 사용하는 것입니다.
Google 웹 글꼴 라이브러리는 매우 널리 사용되므로 사용하는 글꼴이 이미 많은 사용자의 브라우저에 캐시되어 있을 가능성이 높습니다. 본질적으로 이는 다른 웹사이트에서 이미 해당 글꼴을 로드했으며 사용자가 해당 글꼴을 다시 다운로드할 필요가 없음을 의미합니다.
이로 인해 페이지 로드 속도가 빨라지고 전체 페이지 크기가 작아집니다.
때로는 자신만의 글꼴을 설치하고 싶을 수도 있습니다. 예를 들어, 특정 브랜드의 스타일 가이드를 준수하고 해당 브랜드에서 라이센스를 받은 상업용 글꼴을 사용하려면 디자인이 필요할 수 있습니다.
이 가이드에서는 앱에 맞춤 글꼴을 설치하는 방법을 보여줍니다. 앱에 글꼴이 설치되면 글꼴 드롭다운 목록 상단에 해당 글꼴이 표시됩니다.
비디오 레슨
사용자 정의 글꼴 설치
앱의 사용자 정의 글꼴 섹션은 설정 탭, 일반 및 디자인 섹션에 있습니다. 여기에서 새 글꼴을 추가하고 더 이상 필요하지 않은 경우 기존 글꼴을 제거할 수 있습니다. 일반적으로 앱에서 사용되지 않는 글꼴이 있으면 페이지 로드 속도가 느려지므로 페이지에서 실제로 사용되는 글꼴만 유지하는 것이 좋습니다.
글꼴을 나타내는 CSS 파일의 경로를 입력하여 사용자 정의 글꼴을 추가합니다. 이는 웹 서버에서 글꼴 파일에 액세스할 수 있다고 가정합니다. 리소스가 HTTPS를 통해 제공되지 않는 경우 해당 파일 자체가 HTTPS에 있으면 애플리케이션이 파일을 로드하지 못할 수도 있습니다. 일반적으로 원시 글꼴 파일을 사용하여 Bubble의 저장소에 업로드하는 것이 올바른 로딩을 보장하는 가장 안전한 방법입니다.
원시 글꼴 파일에서 사용자 정의 글꼴을 추가하는 것은 약간 기술적일 수 있습니다. 다양한 파일을 업로드하고 일부 CSS 파일을 생성한 후 업로드해야 하기 때문입니다. 이를 수행하는 방법은 다음과 같습니다.
먼저 글꼴 파일을 가져옵니다(예를 들어 http://www.fontsaddict.com/fontface/free-sans.ttf4 를 다운로드하여 Bubble에 업로드하세요. 그렇게 하려면 Bubble의 파일 업로더를 사용하여 그림을 그리세요. 페이지에서 파일을 초기 콘텐츠로 업로드합니다. 이 작업이 완료되면 아래 링크가 표시되며 이 링크를 복사하면 됩니다. 다음과 같아야 합니다.//s3.amazonaws.com/appforest_uf/f1482852801693x129632627358660100/FreeSans.ttf
그런 다음 텍스트 편집기에서 .css 파일을 만들고 글꼴을 제공하는 사이트에서 얻은 코드를 복사합니다.
@font-face {
font-family: 'Free Sans';
src: url('http://www.fontsaddict.com/fontface/free-sans.ttf');
}
HTML
복사
1에서 얻은 URL로 URL을 바꾸세요.
@font-face {
font-family: 'Free Sans';
src: url('https://s3.amazonaws.com/appforest_uf/f1482852801693x129632627358660100/FreeSans.ttf');
}
HTML
복사
URL 앞에 추가했습니다 .https:
이 파일을 Font.css(예를 들어 이름은 중요하지 않음)로 저장하고 첫 번째 단계에서 했던 것과 동일한 작업을 수행하여 Bubble에도 업로드합니다. 다음과 같은 링크가 반환됩니다.
//s3.amazonaws.com/appforest_uf/f1482852801693x129632627328660100/font.css
이는 설정 탭에 입력하는 내용입니다. 이름은 글꼴 이름이고, 경로는 3의 결과입니다.
참고: 글꼴의 특수 문자는 자동으로 추가되지 않으며 기본적으로 Times로 설정됩니다. 그러나 사용자 정의 글꼴을 <link>로 추가할 때 수동으로 추가할 수 있습니다. 예를 들어, Bubble 앱에 다음 Google Webfont를 추가한다고 가정해 보겠습니다.
<link href="link href=" https://fonts.googleapis.com/css2?family=Inter:wght@400;700 " rel="stylesheet">
'&text=' 매개변수를 사용하여 포함하려는 특수 문자가 포함된 두 번째 링크를 추가하는 것이 좋습니다.
