Bubble.io에 커스텀 폰트 적용하기

이전 글에서 노코드(No-code) 솔루션 버블(bubble.io)에 대해 소개한 바 있다. 

버블은 비주얼 프로그래밍 솔루션으로 프론트 엔드(Front-end) 뿐만 아니라, 비개발자 출신에게 가장 난감한 백엔드(Back-end)까지 다룰 수 있는 솔루션이다.

 

2023.09.22 - [explore] - Solo SaaS를 위한 버블(Bubble.io) 탐색

 

Solo SaaS를 위한 버블(Bubble.io) 탐색

 

세밀한 workflow 설정이 여전히 까다로운 부분이지만, 프로그래밍을 배우고 있는 내 입장에서는 기존 프로젝트를 리빌드하는데 이만한 솔루션이 없는게 현실. 플러터플로우(FlutterFlow)나 웹플로우(Webflow) 등이 버블의 대체재로 자주 비교되고 있는데, 각각 장단점이 있고 특화된 부분이 있어 이 부분은 추후 별도로 정리를 해볼 예정이다. 

 

버블(bubble.io)에 커스텀 폰트 적용하기

1단계 무료 폰트를 찾고 다운로드하기

먼저, 커스텀으로 세팅하고 싶은 폰트를 찾아야한다. 나는 Pretendard 폰트를 다운로드했다. 프리텐다드는 애플 폰트와 가장 비슷하고(거의 똑같다) 스포카나 Inter가 채워주지 못하는 부분을 채워주는 무료 폰트로, 많은 스타트업의 홈페이지나 앱에서 많이 사용된다. 아래 링크에서 폰트를 만든 배경이나 자세한 스펙, 라이선스 등을 확인할 수 있다. 

 

https://cactus.tistory.com/306

Pretendard

프리텐다드(Pretendard) 폰트

 

다운로드 없이 웹폰트로 사용할 경우 아래 코드를 사용하면 된다.

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

 

 

2단계 데이터 메뉴에서 새로운 데이터 필드 만들기

1. 버블 어플리케이션에서 데이터 메뉴> New Type에 Font 만들기

 

2.  create a new field 버튼을 클릭하고, 아래 이미지와 같이 새로운 필드를 생성한다.

새로운 필드는 FontFile- file type, CSSFile-file type 총 2개를 만든다. (FontFile이나 CSSFile이라는 명칭은 원하는대로 설정 가능하다)

이렇게 Font에 2가지 필드가 만들어지면 성공

 

 

3단계 폰트 파일 업로드

데이터 메뉴> App data탭> All Fonts > New Entry를 선택해서

 

1단계에서 다운로드한 폰트 파일을 업로드한다.

 

폰트를 업로드하면, 아래와 같이 FontFile의 URL이 만들어진다. 만들어진 URL은 다음 단계에서 CSS File을 만들때 사용해야하므로, 복사해야한다. 셀을 선택하고 Ctrl+C하면 복사가 가능하다. 

 

 

4단계 CSS 파일 업로드

Visual Studio code와 같은 코드 작성 프로그램을 열고, 아래와 같이 CSS File을 만든다.

font-family에는 폰트 파일 이름을 같게 적어주고, url 부분을 위에서 복사한 폰트 파일의 링크로 교체하면 된다. 이때 https://가 반드시 포함되도록 한다.

@font-face {
  font-family: "Pretendard-SemiBold";
  src: url("https://62217288326a7191eb309681d719bb59.cdn.bubble.io/f1698850327069x541815062326970430/Pretendard-SemiBold.ttf");
}

 

폰트이름.css 파일을 버블 데이터 메뉴 > 앱데이터에 추가로 올려주면 된다. 

 

 

CSS 파일을 업로드한 후 SAVE를 눌러 저장한다. 이후, 3단계에서 폰트파일의 경로를 복사한 것처럼 CSS 파일의 경로를 복사한다.

 

5단계 버블 세팅에서 커스텀 폰트 설정하기

버블 세팅>General 탭> 하단의 Custom fonts에서 폰트 이름을 입력하고 복사한 CSS 파일 경로를 붙여넣는다. 이때 https://는 넣지 않아도 된다. Add font 버튼을 클릭한 후 윗부분에 폰트가 나타나면 설치 완료. 

이제 디자인에서 폰트 부분을 확인하면 설치한 폰트가 나타나고 디자인에 적용할 수 있게 된다. 

 

간단하게 폰트 파일을 업로드해서 설정하면 참 좋겠지만, 버블의 방식은 약간 복잡하다. 커스텀 폰트를 설정하는 방식은 이 방법 말고 두세가지가 더 있는데, 이 방법이 가장 간단하고, 관리하기도 편하다.