리소스 섹션

리소스 섹션에서는 웹사이트의 모든 리소스를 업로드하고 구성할 수 있습니다. 이 섹션은 디자이너의 왼쪽 도구 모음에 있습니다. 이 영역 내에서 리소스를 업로드하고, 폴더로 분류하고, 유형(이미지, 문서 또는 Lottie)별로 필터링하고, Webflow 캔버스에 원활하게 끌어서 놓을 수 있습니다.

이 튜토리얼을 통해 다음 사항에 대한 통찰력을 얻을 수 있습니다.

1. 리소스 추가
2. 호환되는 파일 형식
3. 리소스 이름 지정
4. 자원 활용
5. 리소스 제거
6. 리소스 필터링 및 구성

리소스 추가

메모: 리소스 섹션에 업로드된 파일은 다음과 같습니다. 제한되지 않음 — 파일이 공개적으로 볼 수 있는 웹페이지에 링크되어 있지 않으면 검색 엔진에서 자동으로 색인화되지는 않지만 공개적으로 액세스하고 검색할 수 있음을 의미합니다. 리소스 개인정보 보호에 대한 자세한 내용은 Webflow에서 확인할 수 있습니다.

사이트에 이미지나 파일을 포함하는 방법에는 세 가지가 있습니다.

• 리소스 섹션에서 "클라우드" 업로드 아이콘 클릭
• 리소스를 리소스 섹션으로 직접 끌어서 놓기
• 리소스를 캔버스에 직접 드래그 앤 드롭

메모: 필요한 사용 및 배포 권한이 있는 파일만 업로드하세요.

리소스 섹션에 리소스 업로드

리소스 섹션에 리소스를 추가하려면:

1. '에 액세스하세요.자원왼쪽 도구 모음에 있는 ” 아이콘
2. “를 클릭하세요.구름” 업로드 아이콘
3. 장치에서 하나 이상의 이미지나 파일을 선택하세요.

알림: 리소스 섹션에 이미 다른 이름으로 존재하는 파일을 업로드하는 경우, 파일이 변경되지 않은 경우(예: 크기 또는 규격이 변경되지 않은 경우) 원래 이름이 유지됩니다. 다른 이름으로 동일한 리소스를 업로드하려면 파일을 수정해야 합니다. 

캔버스에 리소스를 직접 추가

리소스 섹션을 열지 않고도 하나 이상의 이미지 또는 파일을 장치에서 캔버스로 직접 끌어서 놓을 수도 있습니다. 이 작업을 수행하면 이미지 요소가 자동으로 생성되거나 파일에 대한 링크가 생성됩니다. 이미지나 파일은 나중에 사용할 수 있도록 리소스 섹션에도 추가됩니다.

메모: 브라우저 제약으로 인해 dotLottie 파일을 캔버스로 직접 드래그하는 것은 불가능합니다. 그럼에도 불구하고 dotLottie 파일은 리소스 섹션에 업로드할 수 있습니다.

호환되는 파일 형식

리소스 섹션은 다양한 이미지 파일 형식, 아래 나열된 document 카테고리, Lottie JSON 및 dotLottie 애니메이션 파일과 호환됩니다.

알림: 이미지 파일 크기는 4MB를 초과할 수 없으며 documents는 10MB를 초과할 수 없습니다.

지원되는 이미지 파일 확장자

• PNG
• JPEG 및 JPG
• GIF
• SVG
• 웹P

지원되는 document 파일 형식

• PDF
• DOC와 DOCX
• XLS 및 XLSX
• PPT 및 PPTX
• TXT
• CSV
• ODT
• ODS
• ODP

지원되는 Lottie 파일 형식

• JSON(Lottie만 해당)
• 도트로티

추가 팁: dotLottie 파일을 얻는 방법에는 세 가지가 있습니다. 당신은 할 수 있습니다 변환 다음을 사용하여 기존 Lottie JSON 파일을 dotLottie로 변환합니다. JSON을 dotLottie로 변환 도구, 생성하다 After Effects에서 직접 dotLottie 파일을 사용하여 LottieFiles 플러그인, 또는 다운로드 미리 디자인된 dotLottie 파일 LottieFiles.com.

리소스 이름 지정

리소스 섹션이나 캔버스에 리소스를 업로드하는 동안 문제를 방지하려면 리소스 이름을 지정할 때 다음을 고려하십시오.

1. 너 허용된다 문자, 숫자, 하이픈, 밑줄(리소스 링크를 위해 URL에 허용되는 문자) 활용
2. 피하다 파일 이름에 특수 문자(예: `#, (), ' ,`)
3. 파일 이름을 간결하게 유지하세요(100자 이하, 포함 파일 확장자)

알림: 로딩 속도를 높이려면 이미지가 4MB 미만인지 확인하세요. 대용량 파일의 크기를 조정하고, 최적화하고, 압축하세요. 다음과 같은 무료 타사 도구를 활용하세요. 압축JPEG 또는 압축PNG. Webflow 변환 도구를 사용하여 리소스를 WebP 형식으로 변환하여 압축할 수도 있습니다.

알림: 파일이 다른 이름으로 리소스 섹션에 업로드되었지만 변경되지 않은 채(예: 크기 또는 치수가 그대로 유지된 경우) 원래 이름이 유지됩니다. 동일한 리소스를 새로운 이름으로 업로드하려면 파일 수정이 필요합니다. 

자원 활용

리소스 섹션에서 리소스에 액세스할 수 있게 되면 해당 리소스를 사이트에 통합할 수 있습니다. 추가되면 이미지가 이미지 요소로 표시되고, 파일은 텍스트 링크로 표시됩니다.

링크 요소에 리소스 연결

링크 설정을 통해 리소스를 링크 요소에 연결할 수 있습니다. 리소스를 링크 요소에 연결하려면:

1. 선택 링크 요소 (링크 블록, 텍스트 링크 또는 버튼)을 캔버스에
2. 로 이동 설정 패널 > 링크 설정
3. “를 클릭하세요.클립” 파일 아이콘
4. 선택하다 첨부파일 선택

방문자가 링크를 클릭하면 이미지 또는 document 파일이 동일한 탭에서 열립니다. 다른 파일 형식은 방문자의 장치에 다운로드됩니다.

연결된 첨부 파일을 수정하려면 다음을 수행하세요. 대리자 링크 설정의 첨부 파일. 이미지 또는 document 파일을 갖도록 설정을 조정할 수도 있습니다. 새 탭에서 열기 클릭 시.

이미지 리소스를 배경 이미지로 활용

업로드된 이미지 리소스를 배경 이미지로 사용하려면:

1. 캔버스에서 배경 이미지용 요소를 선택합니다.
2. 입장 스타일 패널 > 배경
3. “를 클릭하세요....을 더한옆에 ” 아이콘 이미지 및 그라데이션
4. 선택하다 이미지 선택
5. 에서 이미지를 선택하세요. 리소스 섹션

배경 이미지 스타일 지정에 대한 자세한 내용을 보려면 추가 리소스를 살펴보세요.

알림: Webflow는 배경 이미지에 대한 반응형 변형을 생성하지 않으므로 올바른 해상도로 최적화된 배경 이미지를 업로드하세요. 배경 이미지 해상도에 대해 자세히 알아보세요.

리소스 검색

리소스 섹션 내의 검색 표시줄을 사용하거나 빠른 찾기를 활용하여 리소스를 찾을 수 있습니다. 바로가기를 통해 빠른 찾기에 액세스할 수 있습니다. 명령 + 이자형 (Mac의 경우) 또는 제어 + 이자형 (윈도우즈에서). 빠른 찾기를 사용할 때 다음을 확인하세요. ~할 수 있게 하다 feature.resource 발견.

빠른 찾기 기능에서 리소스 검색을 활성화하려면:

1. 입력하다 명령 + 이자형 (Mac의 경우) 또는 제어 + 이자형 (Windows의 경우) 빠른 찾기
2. 톱니바퀴 아이콘을 누르세요
3. 선택하다 리소스 포함

자원 근절을 위한 단계

캔버스에서 리소스 버전을 삭제하면 하지 않습니다 리소스 패널에서 리소스를 삭제하세요. 리소스 패널에서 리소스를 제거하려면:

1. 액세스 리소스 패널
2. 제거하려는 리소스 위로 마우스를 가져가세요.
3. 리소스 오른쪽 상단에 표시되는 톱니바퀴 아이콘을 클릭하세요.
4. 누르다 삭제

사이트 어딘가에서 아직 사용 중인 리소스를 리소스 패널에서 삭제하면 사이트를 게시하고 디자이너를 새로 고치면 리소스 패널에 리소스가 다시 나타납니다. 해당 리소스의 모든 항목은 사이트에서 삭제되어야 합니다. 그 다음에 리소스 패널에서 완전히 제거합니다.

주요 정보: 리소스의 기어 아이콘을 선택하여 리소스 세부정보 모달, 당신은 그것을 볼 수 있습니다 치수, 크기및/또는 프레임.

자원을 분류하고 정리하는 방법

특정 리소스를 더 편리하게 찾을 수 있도록 리소스 패널 내에서 다양한 필터링 및 정렬 옵션을 사용할 수 있습니다.

리소스를 필터링하는 프로세스

처음에는 모든 유형의 리소스가 리소스 패널에 표시됩니다. 파일 유형별로 리소스를 필터링하려면 다음 안내를 따르세요.

1. 실행 리소스 패널
2. 패널 왼쪽 상단에 있는 드롭다운을 누릅니다.
3. 전시할 자원의 category를 선택하세요(모든 리소스, 이미지, 서류, 또는 로티)

자원을 정렬하는 프로세스

처음에는 리소스 패널의 리소스가 최신 항목부터 오래된 항목 순으로 정렬됩니다. 다음을 기준으로 리소스를 정렬할 수 있습니다. 최신순, 오래된 것부터, 또는 알파벳순(AZ 또는 ZA). 리소스를 정렬하려면 다음을 수행합니다.

1. 액세스 리소스 패널
2. 패널 왼쪽 하단에 있는 드롭다운을 누릅니다.
3. 정렬 기본 설정을 선택합니다(예: 최신순, 오래된 것부터, 알파벳순(AZ), 또는 알파벳순(ZA))

리소스 패널 표시 옵션을 수정하는 프로세스

처음에는 자산 패널의 리소스가 그리드 보기를 사용하여 표시됩니다. 다음에서 리소스를 볼 수 있습니다. 그리드, 목록, 또는 목록 – 작음 옵션. 보기 옵션을 변경하려면:

1. 실행 리소스 패널
2. 누르세요 "그리드패널 왼쪽 하단에 있는 ' 아이콘
3. 보기 옵션을 선택하세요(예: 그리드, 목록, 또는 목록 – 작음)