Bubble.io와 Tailwind 통합: 단계별 가이드 2024

1단계: Tailwind CSS 설치
Bubble.io와 통합하기 전에 우리는 먼저 Tailwind CSS를 설치해야 합니다. 이를 위해 우리의 시스템에 Node.js와 npm이 설치되어 있어야 합니다. 아래는 필요한 설치 단계입니다.

• 터미널을 엽니다.
• node -v를 입력하여 Node.js가 설치되어 있는지 확인합니다. 버전 번호가 표시되면 Node.js가 있습니다. 설치되어 있지 않다면 https://nodejs.org/ 어서 다운로드하고 설치합니다.
• npm -v를 입력하여 npm이 설치되어 있는지 확인합니다. 버전 번호가 표시되면 npm이 있습니다. 없다면 Node.js에 번들로 제공되는 npm이므로 Node.js를 설치할 때 함께 설치됩니다.
• Node.js와 npm이 있는 것을 확인하면 cd your-project-folder 명령어를 사용하여 프로젝트 폴더로 이동합니다.
• 프로젝트 폴더에서 npm install tailwindcss를 실행하여 npm을 통해 Tailwind를 설치합니다.
• Tailwind CSS를 설치한 후 npx tailwindcss init를 실행하여 구성 파일을 생성합니다. 이렇게 하면 프로젝트의 루트에 디자인 시스템을 사용자 지정할 수 있는 tailwind.config.js 파일이 생성됩니다.

주의: 다른 설치 기법(예: cdn, 포스트스크립트)을 사용하는 경우, 후속 단계는 여전히 적용되지만 파일 이름/경로는 달라질 수 있습니다.

2단계: CSS 빌드

• Tailwind를 설치하고 구성 파일을 생성한 후에는 CSS를 빌드해야 합니다. 이를 위해 이전 단계에서 만든 tailwind.config.js 파일을 엽니다.
• 이 구성 파일에서는 모든 CSS 파일의 경로를 지정해야 합니다. 구성은 대략 이렇게 생겼습니다:

module.exports = {
  purge: ['./src/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

• 이 파일을 저장하고 닫습니다.
• 이제 터미널 또는 명령 프롬프트에서 프로젝트의 루트 디렉터리로 이동하고 다음 명령어를 입력한 후 Enter를 누릅니다 : npx tailwindcss build -o tailwind.css. 이렇게 하면 프로젝트의 루트에 tailwind.css 파일이 생성됩니다.

3단계: Bubble.io 애플리케이션 설정

• 웹 브라우저를 열고 Bubble.io로 이동합니다.
• 아직 계정이 없다면 회원 가입을 하고 로그인합니다.
• 로그인하면 대시보드에서 "New App" 버튼을 클릭합니다.
• 애플리케이션에 이름을 지정하고 플랜을 선택(처음에는 무료로 선택)하고 "Create a new app" 버튼을 누릅니다.

4단계: CSS 업로드

• 이제 우리는 tailwind.css 파일을 Bubble에 업로드해야 합니다.
• 애플리케이션에서 설정(기어 아이콘)으로 가고 왼쪽 내비게이션 바를 통해 "SEO & metatags" 탭을 선택합니다.
• "Script/meta tags in header" 섹션으로 스크롤하고 "Add a new script/meta tag" 버튼을 클릭합니다.
• 에디터가 나타납니다. Type 드롭다운 메뉴에서 목록에서 Style (CSS)를 선택합니다.
• 텍스트 에디터(Notepad 또는 macOS의 TextEdit와 같은)로 생성된 tailwind.css 파일을 열고 모든 내용을 복사합니다.
• 이 CSS를 Bubble.io의 Add a new script/meta tag 텍스트 영역에 붙여 넣습니다.
• 완료했으면 Save 버튼을 클릭합니다.

5단계: Tailwind CSS 활용

• 이제 Bubble.io 애플리케이션 전체에서 Tailwind CSS 클래스를 사용할 수 있습니다. 이를 위해 Bubble 캔버스에 요소를 선택하고 왼쪽의 Element Inspector로 이동하여 ID attribute로 스크롤하고 ID를 부여합니다.
• 오른쪽으로 이동하고 Type 드롭다운에서 Style (CSS)를 선택합니다. 여기에 Tailwind CSS 유틸리티 클래스를 추가합니다.

축하합니다! 이제 Bubble.io 앱과 Tailwind CSS가 통합되었습니다. Bubble.io의 웹 개발 도구 키트에 강력한 도구를 성공적으로 통합하여 애플리케이션을 더 상호 작용적이고 시각적으로 매력적으로 만들었습니다.