Canva 코드로 대화형 디자인 만들기
Canva 코드를 사용하면 전문적인 코드 작성 없이도 반응형의 인터랙티브 디자인을 만들 수 있어요. 다음 두 가지 방법으로 Canva 코드를 사용할 수 있습니다.
- 대화형 코드 디자인 만들기
- 랜딩 페이지, 대시보드 또는 포트폴리오와 같은 완전한 상호작용형 디자인을 만들고 Canva 편집기에서 편집하고 웹사이트로 게시할 수 있습니다
- 디자인에 상호작용형 코드 요소 추가
- 다른 디자인에 대해 퀴즈, 계산기, 차트와 같은 상호작용형 요소를 만들고 여러 디자인에 재사용
팁:
- 이 기능이 AI 사용에 미치는 영향에 대해 자세히 알아보세요.
- AI 허용량을 극대화하기 위해 더 나은 프롬프트를 작성하는 방법을 알아보세요.
대화형 코드 디자인 만들기
완전한 상호작용형 경험을 구축하고 싶다면 코드 디자인 유형을 사용하세요.
- 랜딩 페이지, 대시보드, 포트폴리오 등을 만들어 보세요
- Canva 편집기에서 편집 및 다듬기
- 반응형 웹사이트로 게시
- Canva 홈페이지에서 코드 를 선택합니다. Canva 편집기가 열립니다.
- Canva 편집기의 Canva AI 탭에서 먼저 디자인을 설명하세요. "사용자 친화적인 대화형 운동 트래커 디자인"과 같은 프롬프트를 입력해 보세요.
- 또는 템플릿 탭에서 템플릿을 찾거나 검색할 수도 있습니다.
- Canva AI를 사용하여 다듬거나 직접 편집할 수 있습니다. 자세한 방법은 인터랙티브 Canva 코드 디자인 및 요소 편집을 참고하세요.
디자인에 상호작용형 코드 요소 추가
하나의 인터랙티브 컴포넌트를 생성하려면 Canva AI 로 이동한 다음 코드를 선택하세요.
- 퀴즈, 계산기, 차트 등을 요소로 만듭니다.
- 프레젠테이션, 화이트보드 또는 기타 디자인 유형에 추가하세요. 웹사이트로 게시하거나 여러 디자인에 요소를 재사용할 수 있습니다.
- Canva 홈페이지에서 Canva AI를 선택합니다.
- 프롬프트 상자에 만들려는 인터랙티브 코드 요소에 대해 설명합니다. 여기에서 AI 프롬프트에 대해 자세히 알아보세요.
- </> 코드를 선택하십시오.
- 키보드에서 Enter 키를 누르거나 제출 버튼을 클릭하세요. Canva AI가 프롬프트에 따라 디자인을 준비합니다.
- 코드 디자인을 생성한 후 디자인에 사용하기를 선택합니다.
- 요소로 추가에서 대화형 코드 요소로 추가할 문서 유형을 선택하세요.
- Canva 코드로 생성된 디자인을 개선하려면 사이드 패널의 대화 상자에서 개선 사항을 프롬프트하세요.
참고: Canva AI의 대화 스레드를 통해 디자인 버전에 액세스할 수 있습니다.
Canva 코드로 생성한 상호작용형 디자인과 요소 편집
편집기에 있는 도구를 사용하여 Canva 코드로 생성한 디자인을 다듬으세요. '코드로 생성한 인터랙티브 디자인 및 요소 편집' 에서 자세히 알아보세요.
디자인 미리 보기 및 게시
미리 보기를 선택하여 디자인과 상호 작용합니다. 문제가 해결되면 웹사이트로 게시할 수 있습니다. Canva 코드 웹사이트를 게시하고 관리하는 방법을 알아보세요.
참고: 상호작용형 기능은 디자인을 Canva에서 보거나 웹사이트로 게시할 때 작동합니다.
Canva 코드 버전에 액세스하고, 복사하고, 관리하세요
프롬프트를 통해 Canva 코드 디자인을 업데이트할 때마다 Canva는 동일한 대화 스레드 내에 새 버전을 자동으로 저장합니다. 이를 통해 이전 버전으로 돌아가거나, 이전 버전에서 계속 편집하거나, 생성된 코드를 복사하여 외부에서 사용할 수 있습니다.
버전 기록 보기
- Canva 홈페이지에서 Canva AI 를 엽니다. 프롬프트
- 표시줄에서 </> 코드를 선택하여 사이드바에서 Canva 코드 채팅을 확인하십시오.
- 참고: Canva 코드 채팅 옆에 있는 </> 아이콘 으로 구분할 수 있습니다.
- Canva 코드 채팅 스레드를 엽니다.
- 사이드바에서 사용 가능한 버전을 찾아보세요(예: 버전 1, 버전 2 등).
참고: 동일한 대화 내에서 계속해서 프롬프트를 입력하면 자동으로 새 버전이 생성됩니다.
이전 버전 사용
- Canva 코드 대화 스레드를 엽니다.
- 사용하려는 버전을 선택합니다.
- 디자인에 사용하기 를 선택하여 Canva에서 해당 버전을 계속 편집하세요.
코드 확인 및 복사
Canva 코드로 생성된 기본 코드를 확인하고 복사하여 Canva 외부에서 재사용할 수 있습니다.
- Canva 코드 스레드에서 Show code t oggle 을 켭니다.
- 코드 복사 를 선택하여 클립보드에 저장합니다.
Canva 코드 제한
- Canva 코드는 canva.cn 의 사용자를 제외하고 Canva에서 사용 가능한 모든 언어를 지원합니다.
- Canva 코드는 사용자가 입력하거나 사용한 설명을 통해서만 지침을 받아들입니다. 더 많은 맥락과 지침을 제공할수록 결과물이 더 좋아집니다.
- 코드를 복사하여 외부에서 재사용할 수 있지만, 파일로 내보내거나 Canva 내에서 직접 편집할 수 없어요.
Canva 코드 웹사이트가 게시되지 않으면 어떻게 해야 하나요?
Canva 코드 웹사이트가 크거나 복잡한 경우 너무 큰 위젯으로 인해 게시되지 않을 수 있습니다. 웹사이트를 간소화하거나 콘텐츠를 더 작은 웹사이트 또는 페이지로 분할해 볼 수 있습니다.동일한 Canva 코드 대화에서 Canva AI에게 다음을 요청해 보세요.
- "Canva에 게시할 수 있도록 웹사이트를 간소화하고 너무 큰 위젯/구성 요소를 줄여 주세요."
- "2개의 더 작은 게시 가능한 웹사이트/페이지로 분할하세요."
Canva 코드가 업데이트된 버전을 생성한 후 다시 게시해 보세요.
팁: 콘텐츠를 더 작은 웹사이트 또는 페이지로 분할하면 게시된 각 사이트에 포함된 콘텐츠의 수가 줄어들기 때문에 도움이 될 수 있습니다. 웹사이트를 게시하는 별도의 웹사이트로 분할하는 경우 해당 웹사이트의 URL을 별도로 관리하고 공유해야 합니다.
Canva 외부에서 코드를 재사용할 수 있나요?
예. 코드를 복사하면 회원님의 프로젝트에서 사용할 수 있습니다. Canva용으로 제작되었지만 외부 도구나 워크플로에 맞게 조정할 수도 있습니다.
Canva 코드로 만든 디자인을 상업적 용도로 사용할 수 있나요?
귀하와 Canva 사이에서 그리고 법률이 허용하는 한에서 Canva의 AI 기능(Canva 코드 및 제작된 Canva 코드 포함)에 대한 입력 및 결과물은 사용자가 소유하며, Canva는 귀하의 입력 또는 결과물에 대한 어떤 소유권의 주장도 하지 않습니다. (생성된 Canva 코드 포함). 자세한 내용과 전체 약관은 AI 기능 약관 을 참조하세요.
내가 Canva 코드로 만든 디자인을 누가 볼 수 있나요?
본인만 Canva 코드를 통해 대화한 내용을 볼 수 있습니다. 디자인에 사용하기 를 클릭하면 해당 버전의 새 디자인이 생성되며, 공유 버튼을 사용하여 디자인(Canva 코드 포함)을 공유할 수 있습니다.
디자인을 웹사이트에 게시하는 경우 액세스 제어는 웹사이트 게시 플로우 에서 구성한 설정에 따라 관리됩니다.
팀의 Canva 코드 액세스 권한을 관리할 수 있나요?
관리자, 교사 또는 브랜드 디자이너는 팀 또는 수업에서 Canva 코드에 액세스할 수 있는 사용자를 선택할 수 있습니다.
홈페이지에서 Canva 코드를 찾을 수 없나요? Canva 코드 액세스 제한에 대해 자세히 알아보세요.
코드 줄 변경 사항이 보이지 않는 이유는 무엇인가요?
Canva 코드는 이제 비교식 기반 편집을 사용합니다. 즉, 전체 블록을 다시 생성하는 대신 필요한 코드 줄만 업데이트됩니다. 따라서 디자인 논리를 조금만 변경하면 피드백을 더 빠르게 받을 수 있습니다.
프롬프트를 전송한 후에도 코드 줄이 보이지 않는다면 Canva가 백그라운드에서 필요한 변경 사항만 적용하기 위해 작업 중임을 의미합니다. Canva 코드가 다른 버전 생성을 완료할 때까지 기다려 주세요.
도움이 되셨나요?
도움이 되었어요
도움이 되지 않았어요