이미지는 방문자가 브랜드, 제품, 작업 및 공간을 빠르게 이해하도록 돕습니다. Kanorio에서는 선명한 원본 사진을 제공하기만 하면 됩니다. 시스템은 파일을 그대로 보존하며 방문자의 기기에 따라 가장 적절한 크기와 형식으로 자동 변환하여 제공합니다.
웹사이트의 모든 이미지 필드(히어로 섹션, 이미지-텍스트 블록, 갤러리, 제품 전시, 로고 및 소셜 공유 이미지 등)는 네 가지 소스를 지원하는 통합 이미지 선택기를 갖추고 있습니다:
이미지 필드 옆의 "⋯ → 미디어 라이브러리에서 선택"을 클릭하여 이전에 사이트에 업로드한 이미지를 재사용할 수 있습니다. 이는 파일을 복제하거나 추가 저장 공간을 소비하지 않습니다. 선택, 대량 업로드 및 "새 버전 업로드" 기능에 대한 자세한 내용은 를 참조하세요.
직접 찍은 사진이 준비되지 않았다면 "라이브러리"를 클릭(이미지가 이미 설정된 경우 "⋯ → 라이브러리에서 선택")하여 Pexels와 Pixabay에서 상업용으로 무료 사용 가능한 사진을 검색할 수 있습니다. 선택하면 시스템이 자동으로 해당 사진을 사이트의 미디어 라이브러리에 저장합니다. 검색 팁과 라이선스에 대해서는 아래의 "무료 상업용 스톡 라이브러리"를 참조하세요.
"링크"를 클릭(이미지가 이미 설정된 경우 "⋯ → 이미지 링크 사용")하여 https://로 시작하는 공개 이미지 URL을 붙여넣습니다:
Kanorio는 "원본 파일 보존" 원칙을 따릅니다. 업로드한 파일을 그대로 저장하고, 방문자가 페이지를 볼 때 에지 노드에서 가장 빠르게 로드되는 형식(WebP 또는 AVIF 등)으로 즉시 변환합니다.
| 지원 형식 | 용도 및 시스템 처리 |
|---|---|
| JPG / JPEG | 사진, 장소 촬영 이미지, 인물 사진 및 풍부한 색상 그라데이션이 포함된 이미지. |
| PNG | 브랜드 로고, 아이콘 또는 투명한 배경이 필요한 UI 스크린샷. |
| WebP | 고품질과 작은 파일 크기의 균형을 맞춘 현대적인 웹 이미지 형식. |
| GIF (애니메이션 포함) | 동적 데모 또는 짧은 애니메이션. 업로드 시 자르기 도구가 나타나지 않으며, 게시된 사이트에서는 전체 재생 효과가 유지됩니다(미디어 라이브러리의 썸네일은 정적 미리보기를 표시합니다). |
| SVG (벡터) | 브랜드 로고, 라인 아이콘 및 일러스트레이션. 어떤 확대 수준에서도 선명하게 유지됩니다. 업로드 시 시스템이 자동으로 보안 검사(잠재적 스크립트 제거)를 수행하여 사이트 안전을 보장합니다. |
| HEIC / HEIF | iPhone 및 iPad의 기본 촬영 형식. 원본 파일을 직접 업로드하고 저장할 수 있습니다. 시스템이 방문자를 위해 호환 가능한 형식으로 자동 변환합니다. 일부 특정 형식(예: 10-bit HEIC)만 업로드 전 브라우저에서 고품질 JPG로 자동 변환됩니다. |
웹사이트 이미지에서 흔히 겪는 불만은 "한 번 잘랐는데, 게시하거나 모바일에서 보면 얼굴이나 제품이 잘려 나간다. 또는 데스크톱 버전은 와이드 배너인데 모바일에서는 너무 작게 보여서 수정하려면 다시 업로드해야 한다"는 것입니다.
Kanorio에서는 레이아웃 비율에 적응하는 이미지 필드(히어로 섹션, 이미지-텍스트 블록, 전체 너비 이미지, 갤러리 카드, 캐러셀 카드 및 멀티 링크 카드 포함)가 원본 이미지를 그대로 보존하므로 미리 자를 필요가 없습니다:
21:9, 모바일 4:5 또는 1:1)을 선택하거나, "사용자 지정"을 클릭하여 직접 입력합니다. 특정 설정이 없는 기기는 기본 비율을 자동으로 사용합니다.Shift + 화살표 키로 10% 이동).Shift + 화살표 키로 크기 조정). 프레임이 너무 작아 품질에 영향을 줄 수 있는 경우 창에 경고가 표시됩니다.공유 이미지, 제품 이미지 및 프로필 사진은 어떤가요?
- 모든 업로드 지점에서 원본 보존: 페이지 모듈, SEO 소셜 공유 이미지, 제품 이미지, 작성자 아바타 또는 파비콘 등 시스템은 사전 자르기를 요구하지 않으며 동일한 원본을 어디서나 재사용할 수 있습니다.
- 공유 이미지 및 제품 전시(자동 감지, "Contain/Cover" 수동 전환): 시스템이 자동으로 감지합니다. 흰색 배경, 단색 또는 투명한 제품 이미지는 기본적으로 "Contain"으로 설정되어 일치하는 배경색으로 채워지므로 잘리지 않습니다. 일반 사진은 기본적으로 "Cover"로 설정됩니다. 조정하려면 "⋯ → 표시 조정"을 클릭하여 "Contain"(배경색 사용자 지정 가능)과 "Cover"(드래그하여 프레임 맞춤) 사이를 전환하세요.
- 프로필 사진(원형 아바타): 원본 전체가 1:1 원형 마스크로 저장됩니다. "⋯ → 초점 조정"을 사용하여 원 안의 표시 영역을 재배치하세요.
- "Contain(자르기 없음)" 카드를 위한 스마트 배경: 블로그나 제품 목록에서 정사각형, 세로형 또는 가로형 이미지에 대해 "Contain(자르기 없음)"을 선택하면 시스템이 가장자리 색상을 지능적으로 감지합니다. 흰색 또는 단색 제품 이미지는 배경색을 확장하여 매끄럽게 혼합하고, 투명한 이미지는 카드 기본 색상을 표시하며, 다채로운 사진은 부드러운 흐림 효과의 글로우 배경이 적용됩니다.
ALT 텍스트(대체 텍스트)는 이미지에 대한 짧은 설명입니다. 이미지가 로드되지 않을 때 문맥을 제공하고, 시각 장애가 있는 방문자를 위해 스크린 리더로 읽어주며, Google과 같은 검색 엔진이 이미지 주제를 이해하도록 돕습니다.
"주요 시각적 요소"를 구체적으로 설명하세요. 파일명을 사용하거나 키워드를 무작위로 넣지 마세요:
| 권장하지 않는 예시 | 권장하는 예시 |
|---|---|
IMG_1234.jpg, product_image_01 | 카페 바 카운터에 놓인 핸드드립 커피와 약배전 원두 |
| coffee, specialty coffee, hand-drip coffee recommendation | 바리스타가 구스넥 주전자로 싱글 오리진 커피를 내리는 모습의 근접 촬영 |
| Our best services | 회의 테이블에서 컨설턴트가 두 창업자에게 브랜드 전략을 설명하는 모습 |
ALT 텍스트 입력을 잊은 경우, 사이트 게시, 게시물 작성 또는 제품 저장 후 시스템이 백그라운드에서 빈 이미지 필드에 대한 설명을 자동으로 채워줍니다(수동으로 입력한 텍스트는 덮어쓰지 않습니다). 사이트의 ALT 텍스트 품질을 확인하거나 AI로 일괄 처리하려면 을 참조하세요.
레이아웃을 구상 중이고 실제 사진이 아직 없다면 이미지 선택기에서 "라이브러리"를 클릭하여 무료 사진을 검색하고 적용하세요:
Pexels 라이선스 및 Pixabay 콘텐츠 라이선스에 따라 두 라이브러리의 사진은 개인 및 상업용 웹사이트에서 무료로 사용할 수 있습니다. 추가 비용은 필요 없으며 출처 표시는 필수가 아닙니다(단, Kanorio는 편의를 위해 선택기 내에 사진작가 정보와 소스 링크를 표시합니다).
세 가지 경계를 명심하세요:
누군가 LINE, Facebook, X(Twitter) 또는 LinkedIn에서 페이지 링크를 공유할 때 미리보기 썸네일을 "공유 이미지(OG 이미지)"라고 합니다. 이는 페이지 모듈 이미지와 별도로 설정됩니다. "SEO › 페이지" 또는 편집기의 페이지 설정에서 관리하세요. 자세한 내용은 를 참조하세요.
brand-logo-dark.svg, studio-front-door.jpg). 미디어 라이브러리에서 검색할 때 훨씬 빠릅니다.히어로 섹션, 이미지-텍스트 블록 및 카드와 같은 고정 비율 필드에서 Kanorio는 원본 이미지 전체를 저장하고 선택 후 "초점 조정" 창을 엽니다. 이를 통해 시각적 중심(얼굴이나 제품 등)을 선택할 수 있습니다. 이렇게 하면 방문자가 데스크톱을 사용하든 모바일을 사용하든 초점이 그대로 유지되며, 나중에 레이아웃을 변경해도 다시 업로드할 필요가 없습니다.
네. .heic 또는 .heif 사진을 직접 업로드할 수 있습니다. 시스템은 원본을 저장하고 방문자가 사이트를 탐색할 때 모든 휴대폰과 컴퓨터에서 볼 수 있는 형식으로 자동 변환합니다. 드물게 인식할 수 없는 인코딩을 발견하면 휴대폰이나 컴퓨터에서 JPG로 내보낸 후 시도하세요.
이는 일반적으로 원본 이미지의 해상도가 낮고(예: 메시징 앱으로 압축된 사진) 전체 너비 커버에 맞게 늘어나기 때문입니다. 시스템은 원본을 저하시키지 않으므로 더 높은 해상도의 사진을 사용하고 "초점 조정"에서 표시 영역을 확인하세요.