Webflow Guide

Webflow는 고급 디자인 기능과 자유로운 코드 편집 기능을 제공하여, Tailwind CSS와 같은 외부 CSS 프레임워크를 사용할 수 있는 웹사이트 빌더입니다. 이 가이드는 Webflow에 Tailwind CSS를 통합하고 Startupful에서 제공된 리소스를 적용하는 방법을 설명합니다.

Step 1: Tailwind CSS 통합

Webflow는 페이지별로 사용자 정의 코드를 추가할 수 있는 기능을 제공하므로, Tailwind CSS 스크립트를 추가하는 것이 가능합니다.

1. 프로젝트 설정에서 Tailwind CSS 추가

1. Webflow 프로젝트 대시보드에서 Project Settings로 이동합니다.

2. 상단 메뉴에서 Custom Code 탭을 선택합니다.

3. Inside Head Tag 섹션에 아래 코드를 붙여넣습니다.

   <script src="https://cdn.tailwindcss.com"></script>
   

4. Save Changes를 클릭하여 변경 사항을 저장합니다.

5. Publish 버튼을 눌러 사이트에 Tailwind CSS를 적용합니다.

이제 Tailwind CSS를 사용하여 Webflow 프로젝트 내의 모든 페이지에서 Tailwind 클래스들을 사용할 수 있습니다.

2. 페이지별 Tailwind CSS 추가 (선택 사항)

특정 페이지에만 Tailwind CSS를 추가하고 싶은 경우, 페이지 설정에서도 사용자 정의 코드를 추가할 수 있습니다.

1. Webflow 편집기에서 해당 페이지를 선택하고 페이지 설정을 엽니다.

2. Custom Code 섹션에서 Inside Head Tag에 아래 코드를 추가합니다.

   <script src="https://cdn.tailwindcss.com"></script>
   

3. 설정을 저장하고, 페이지를 업데이트하여 Tailwind CSS가 적용되었는지 확인합니다.

Step 2: Startupful 리소스 적용

Tailwind CSS 스크립트를 추가한 후, Startupful에서 제공된 HTML 리소스를 Webflow 페이지에 붙여넣어 디자인을 적용할 수 있습니다.

1. HTML Embed 요소를 통한 리소스 추가

Webflow에서는 Embed 요소를 사용하여 HTML, CSS, JavaScript 코드를 직접 삽입할 수 있습니다.

1. Webflow 편집기에서 디자인을 적용할 섹션으로 이동합니다.
2. + (Add Elements) 버튼을 클릭하여 Embed 요소를 페이지에 추가합니다.
3. Embed Code 창이 열리면, Startupful에서 제공된 HTML 코드를 붙여넣습니다.
4. Save & Close 버튼을 클릭하여 코드 삽입을 완료합니다.

2. 코드 미리보기와 레이아웃 조정

• 미리보기 모드로 전환하여 디자인이 예상한 대로 표시되는지 확인합니다.
• Embed 요소의 크기를 조정하여 페이지 레이아웃에 맞도록 최적화합니다.

Step 3: 전체 넓이 적용 문제 해결

Startupful 리소스를 적용할 때, Webflow의 컨테이너 설정에 따라 전체 넓이가 제대로 적용되지 않을 수 있습니다. 이 경우, 섹션이나 컨테이너의 설정을 조정하여 넓이를 최대로 설정할 수 있습니다.

1. Embed 요소가 포함된 Section 또는 Div Block을 선택합니다.
2. 스타일 설정에서 Width를 **100%**로 설정하여 전체 넓이로 확장합니다.
3. 필요에 따라 Max Width를 조정하여 화면 전체에 걸쳐 디자인이 표시되도록 합니다.

또한, Webflow에서 Tailwind 클래스 중 w-full이나 max-w-full을 사용하여 넓이를 제어할 수 있습니다.

Step 4: 코드 편집 및 실시간 프리뷰

Webflow의 실시간 프리뷰 기능을 통해, Startupful 리소스가 페이지에 제대로 적용되었는지 확인하고 수정할 수 있습니다.

1. Webflow 편집기에서 Preview 모드를 활성화합니다.
2. 필요한 경우 Embed 요소에서 코드를 수정하여 실시간으로 반영된 결과를 확인합니다.

기타 참고 사항

• Tailwind CSS 설정: Tailwind CSS의 기본 설정을 커스터마이즈하려면 <script> 태그 내에서 tailwind.config를 사용하여 맞춤 설정을 추가할 수 있습니다. 예를 들어, 사용자 정의 색상 팔레트를 설정할 수 있습니다.

  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#1a202c',
          }
        }
      }
    }
  </script>
  <script src="https://cdn.tailwindcss.com"></script>
  

• 애니메이션과 인터랙션: Webflow에서 제공하는 기본 애니메이션 및 인터랙션 기능을 활용하여 Tailwind CSS의 애니메이션을 추가로 보완할 수 있습니다.

이 가이드를 따라 Tailwind CSS와 Startupful 리소스를 Webflow에 효과적으로 통합하여, 웹사이트 디자인을 강화할 수 있습니다. Webflow의 자유로운 코드 편집 기능을 활용하여 다양한 커스터마이징 옵션을 실험해 보세요.