Kanorio는 현재 에디터의 "모듈" 패널에서 40개의 모듈을 제공하며, 콘텐츠 표시, 온라인 스토어 및 17개의 주요 타사 플랫폼 임베드를 지원합니다.
| 모듈 이름 | 목적 | 레이아웃 및 기능 설정 |
|---|---|---|
| 히어로 | 페이지 최상단에서 핵심 메시지와 주요 행동 유도 버튼을 전달합니다. | 3가지 레이아웃(배너+카드, 분할, 전체 너비), 배너 높이 조절(콤팩트/표준/높게), 로고 크기, 브랜드 URL 표시 여부, 주요 하이라이트, 작은 데이터 포인트 설정이 가능합니다. |
| 전체 너비 이미지 | 고화질 사진을 화면 전체에 배치하고 텍스트와 버튼을 위에 올립니다. | 9그리드 텍스트 위치 설정 및 텍스트 배경 표시 여부를 선택할 수 있습니다. 데이터 손실 없이 히어로 또는 분할 레이아웃 모듈로 전환할 수 있습니다. |
| 이미지 갤러리 | 그리드나 메이슨리 레이아웃으로 여러 작업물, 사진, 이벤트 하이라이트를 보여줍니다. | 메이슨리 레이아웃은 '원본'을 선택하거나, 균일한 그리드를 위해 1:1 / 4:3 / 3:4 / 16:9 비율을 선택할 수 있습니다. 라이트박스 및 개별 이미지 너비 조절을 지원합니다. |
| 이미지 캐러셀 | 여러 사진을 가로 슬라이더로 표시하여 수직 공간을 절약합니다. | 자동 재생, 이미지 크기 조절, 높이 모드 전환을 지원합니다. |
| 모듈 이름 | 목적 | 레이아웃 및 기능 설정 |
|---|---|---|
| 분할 레이아웃 | 이미지와 상세 설명을 나란히 배치하여 브랜드 스토리, 서비스, 창업자 소개에 적합합니다. | 좌우 정렬 변경, 이미지 크기 및 5가지 가로세로 비율 조절이 가능합니다. '+ 주요 하이라이트' 및 '+ 작은 데이터' 추가를 지원합니다. |
| 카드 갤러리 | 서비스, 사례 연구, 기능 하이라이트를 위한 가장 범용적인 그리드입니다. | 3가지 그리드(균일, 벤토, 리스트) × 4가지 카드 스타일(그림자, 테두리, 은은한 배경, 미니멀). 각 카드는 사진/아이콘, 배지, 주요 하이라이트, 개별 버튼, 3/5줄 텍스트 생략을 지원합니다. |
| 카드 캐러셀 | 여러 카드를 가로 슬라이더로 표시합니다. | 4가지 카드 스타일, 배지, 주요 하이라이트, 버튼을 지원하며 카드 갤러리 모듈과 상호 전환이 가능합니다. |
| 행동 유도(CTA) | 강렬한 문구와 버튼을 사용하여 섹션 사이나 푸터에서 전환을 유도합니다. | 중앙 또는 왼쪽 정렬, 서브 헤드라인, 주요 하이라이트, 작은 데이터 포인트 표시를 지원합니다. |
| 멀티미디어 | 동영상, 오디오, 온라인 PDF를 업로드 및 재생하거나 파일 다운로드 카드(Word/Excel/PPT/EPUB/ZIP)를 제공합니다. | 재생 속도 조절, 화면 속 화면(PIP) 플레이어, PDF 리더가 내장되어 있습니다(동영상, 오디오, PDF 및 파일 참조). 단일 항목에 대해 표시 너비(콤팩트/표준/와이드)를 조절할 수 있습니다. |
| 모듈 이름 | 목적 | 레이아웃 및 기능 설정 |
|---|---|---|
| 텍스트 카드 갤러리 | 사진 없이 서비스 기능, 장점, 가격, 단계 등을 명확하게 나열합니다. | 카드 갤러리와 동일한 3가지 그리드 및 4가지 카드 스타일을 공유합니다. 각 카드는 아이콘, 배지, 주요 하이라이트, 개별 버튼을 지원합니다. |
| 긴 텍스트 | 구조화된 서식이 필요한 긴 설명, 약관, 튜토리얼에 적합합니다. | 2단계 제목 구조와 자동으로 생성되는 사이드/상단 목차(TOC)를 지원합니다. |
| 블로그 게시물 | 게시된 블로그 게시물을 자동으로 가져와 표시합니다. | 4가지 레이아웃(균일 그리드, 추천 게시물, 가로 리스트, 텍스트 전용 공지). 카테고리/태그별 필터링 및 하단에 '모두 보기' 버튼 추가가 가능합니다. |
| 모듈 이름 | 목적 | 레이아웃 및 기능 설정 |
|---|---|---|
| FAQ | 자주 묻는 질문을 정리하여 반복적인 지원 문의를 줄입니다. | • 3가지 레이아웃: 단일 열 아코디언(기본값), 2열 아코디언(데스크톱), 전체 확장 그리드 |
| 가격표 | 서비스 플랜, 가격, 포함 사항을 나란히 비교합니다(정보 제공용, 결제 기능 없음). | • 추천 플랜 배지, 체크 표시 리스트, 개별 플랜 버튼, 모듈 수준의 버튼을 지원합니다. |
| 주요 지표 | 큰 숫자를 사용하여 성과를 강조합니다(예: '500개 이상의 브랜드 서비스', '99.8% 평점'). | • 2가지 스타일: 개별 카드 그리드(기본값), 수직 구분선이 있는 미니멀 데이터 스트립 |
| 마일스톤 | 브랜드 역사, 이벤트 타임라인 또는 4단계 서비스 과정을 제시합니다. | • 3가지 레이아웃: 수직 타임라인(기본값), 가로 단계(데스크톱, 1 → 2 → 3), 교차 배치 중앙 축 |
| 카운트다운 | 이벤트 출시, 얼리버드 혜택, 등록 마감 등을 위한 실시간 카운트다운을 표시합니다. | • 사용자 지정 종료 시간 및 만료 후 텍스트 표시를 지원합니다. |
| 배송 정보 | 배송 거리 구간, 배송비, 무료 배송 기준을 표시합니다. | • 2가지 레이아웃: 거리 레이더 + 리스트(기본값), 레이더 없는 나란히 배치된 구간 카드 |
| 미디어 링크 | 외부 미디어 보도, 파트너 또는 추천 기사 리스트를 정리합니다. | • 큰 이미지 또는 썸네일 리스트 보기를 지원합니다. |
이 4개의 모듈은 백엔드의 "스토어 › 상품" 또는 "마케팅 › 온라인 폼"에서 생성한 데이터를 불러옵니다:
| 모듈 이름 | 목적 | 레이아웃 및 기능 설정 |
|---|---|---|
| 상품 카탈로그 | 여러 상품을 나열하여 탐색, 필터링, 장바구니 담기 또는 빠른 결제를 지원합니다. | 이미지 가로세로 비율은 1:1(정사각형), 3:4(세로형), 4:3, 16:9를 지원합니다. '미니멀' 카드 스타일과 모듈 수준의 버튼을 지원합니다. |
| 상품 표시 | 여러 이미지, 옵션 선택기, 전체 설명을 사용하여 단일 상품을 강조합니다. | • 이미지 왼쪽/구매 오른쪽 또는 구매 왼쪽/이미지 오른쪽 교체 및 가로세로 비율 전환을 지원합니다. |
| 플랜 선택 | 단일 상품의 여러 변형/플랜을 선택할 수 있는 영역을 만들어 직접 결제를 유도합니다. | • 온라인 강의, 컨설팅 패키지 또는 번들 프로모션에 적합합니다. |
| 온라인 폼 | 문의 양식, 이벤트 등록 또는 설문조사를 삽입합니다. | • 1열 또는 2열 레이아웃을 지원하며, 응답은 대시보드에 자동으로 동기화됩니다(온라인 폼 참조). |
통합 모듈을 사용하면 다른 플랫폼의 공개 게시물, 동영상, 음악, 설문조사, 예약 캘린더, 디자인 초안 또는 Google 지도 위치를 웹사이트에 직접 임베드할 수 있습니다. 방문자는 사이트를 떠나지 않고도 이를 보거나 상호작용할 수 있습니다.
통합 모듈 vs 타사 추적 코드: 통합 모듈은 방문자가 페이지에서 보고 클릭할 수 있는 프론트엔드 콘텐츠입니다. 백그라운드에서 광고 트래픽을 추적하기 위해 Google 태그 관리자(GTM), GA4 또는 Meta 픽셀을 설치해야 하는 경우, "사이트 설정 › 추적 코드"로 이동하십시오(타사 추적 도구 참조).
게시물, 릴, 짧은 동영상 또는 동영상이 원래 플랫폼에서 "공개"로 설정되어 있는지 확인한 다음, "공유" 버튼을 사용하여 공개 링크를 복사하고 모듈에 붙여넣으십시오(브라우저의 백엔드 관리 URL이나 비공개 게시물 링크는 붙여넣지 마십시오):
| 연동 | 용도 | 설정 팁 |
|---|---|---|
| YouTube | 브랜드 영상, 튜토리얼, 인터뷰 또는 공개 재생 목록. | 나란히 배치되는 동영상 그리드(기기별 열 조절 가능)와 단일 동영상 너비 조절을 지원합니다. |
| 공개된 IG 게시물 또는 릴스. | 게시물 또는 릴스의 공개 URL을 붙여넣으세요. 다중 게시물 그리드를 지원합니다. | |
| 공개 페이지 게시물, 이벤트 게시물, 동영상 또는 릴스. | 게시물은 '전체 공개'로 설정되어 있어야 합니다(나중에 비공개로 변경하면 사이트에서 표시되지 않습니다). | |
| Threads | 공개된 Threads 게시물 및 토론 스레드. | 스레드의 공개 URL을 붙여넣으세요. |
| TikTok | 공개된 TikTok 동영상 및 비하인드 콘텐츠. | 공개 동영상 링크를 붙여넣으세요. |
| 브랜드 영감 보드 또는 프로필 소개. | 먼저 모듈 설정에서 Pinterest 계정을 연동하세요. 프로필을 표시할지 특정 보드를 표시할지 선택하세요(새 보드 추가 후 '동기화' 클릭). | |
| Behance | 디자이너, 사진가, 크리에이터를 위한 공개 프로젝트 포트폴리오. | 공개된 Behance 프로젝트 URL을 붙여넣으세요. |
| Discord | 서버 정보 표시 및 '참가' 버튼. | 서버의 공개 초대 링크 또는 서버 ID를 붙여넣으세요. |
| 연동 | 용도 | 설정 팁 |
|---|---|---|
| Spotify | 노래, 앨범, 공개 재생 목록 또는 팟캐스트 에피소드. | 공개 공유 링크를 붙여넣으세요. 데스크톱/태블릿용 열 조절(1~3열) 및 플레이어 너비 조절을 지원합니다. |
| Apple Podcast | 공개된 쇼 또는 에피소드 플레이어. | 공개 공유 링크를 붙여넣으세요. 다중 열 그리드 및 너비 전환을 지원합니다. |
| Apple Music | 공개된 노래, 앨범 또는 재생 목록 미리보기. | 공개 링크를 붙여넣으세요. 다중 열 그리드 및 너비 전환을 지원합니다. |
이미 외부 설문조사나 예약 시스템을 사용하는 데 익숙하다면 웹사이트에 직접 임베드할 수 있습니다. (제출물을 받고, 고객 목록을 정리하고, 확인 이메일을 Kanorio 백엔드 내에서 직접 보내려면 내장된 온라인 폼을 먼저 사용하는 것을 권장합니다):
| 연동 | 용도 | 게시 전 체크리스트 |
|---|---|---|
| Calendly | 고객이 사이트에서 직접 상담, 방문 또는 서비스를 예약할 수 있도록 합니다. | 공개 예약 페이지 URL을 붙여넣기 전에 Calendly에서 예약 가능 시간, 시간대, 알림 설정을 확인하세요. |
| Google 폼 | 등록 양식 또는 간단한 설문조사를 표시합니다. | '응답 허용'이 활성화되어 있는지, 그리고 '조직 내 사용자만 액세스 가능' 로그인 요구 사항이 설정되어 있지 않은지 확인하세요. |
| SurveyCake | SurveyCake 설문지를 삽입합니다. | 설문이 게시되었는지 확인하고 공개 설문 URL을 붙여넣으세요. |
| Typeform | 대화형 Typeform 양식을 삽입합니다. | 양식이 게시되었는지 확인하고 공개 공유 링크를 붙여넣으세요. |
| 연동 | 용도 | 설정 팁 |
|---|---|---|
| Figma | 공개된 Figma 디자인, 프로토타입, FigJam 보드 또는 프레젠테이션을 직접 조작하고 미리 봅니다. | Figma에서 '공유'를 클릭하고 액세스 권한을 링크가 있는 모든 사용자가 볼 수 있음으로 설정한 후 링크를 붙여넣으세요. |
| Google 비즈니스 프로필 | 매장/스튜디오 이름, 주소, 전화번호, 영업시간, 평점 및 길 찾기 버튼을 표시합니다. | 공개된 Google 비즈니스 위치를 검색하여 연동하세요. 여러 위치를 나란히 표시하는 것을 지원합니다. |
모든 방문자와 웹사이트의 보안을 보호하고, 빠른 로딩 속도를 유지하며, 안정적인 모바일 레이아웃을 보장하기 위해 Kanorio는 임의의 HTML, JavaScript 또는 타사 <iframe> 임베드 코드 붙여넣기를 허용하지 않습니다(텍스트 상자나 URL 필드에 코드를 붙여넣지 마십시오. 시스템이 자동으로 필터링합니다).
아니요! "통합 모듈"은 페이지 중간에 IG 게시물이나 동영상 전체를 임베드하기 위한 것입니다. 헤더, 푸터, 히어로 섹션 또는 Link-in-bio 페이지에 브랜드 소셜 아이콘을 나열하여 방문자가 클릭하게 하려면 "사이트 편집 › 브랜드"로 이동하여 "브랜드 소셜 링크"를 입력하십시오.
"정보" 탭 아래의 "플랜 표시" 모듈을 선택하십시오. 스토어에서 상품을 먼저 만들 필요 없이 플랜 이름, 가격, 기능 목록, 예약/문의 버튼을 자유롭게 입력할 수 있습니다.