Canva Code 2.0 사용법, 워드프레스 대신 홈페이지를 만들 수 있을까?

Canva Code 2.0을 사용하면 코드를 직접 작성하지 않고도 랜딩페이지, 퀴즈, 계산기, 미니 앱 같은 인터랙티브 콘텐츠를 만들 수 있습니다.

하지만 Canva Code가 워드프레스를 완전히 대체하는 것은 아닙니다.

한두 장짜리 랜딩페이지를 빠르게 만들려면 Canva Code가 편합니다. 반면 검색 유입을 위한 블로그나 장기간 운영할 사업용 홈페이지라면 워드프레스가 더 적합합니다.

두 도구는 홈페이지를 만든다는 점은 같지만 목적과 운영 방식이 다릅니다.

---

Canva Code 2.0이란?

Canva Code는 원하는 웹페이지나 앱을 문장으로 설명하면 AI가 화면과 기능을 만들어주는 바이브 코딩 도구입니다.

Canva는 2026년 7월 14일 Canva Code 2.0을 Free, Pro, Business, Enterprise, Education 사용자에게 전면 공개했습니다.

Canva Code 2.0으로 만들 수 있는 결과물은 다음과 같습니다.

• 제품이나 서비스를 소개하는 랜딩페이지
• 교육용 퀴즈와 게임
• 설문조사와 신청 양식
• 가격 또는 점수를 계산하는 계산기
• 부동산 매물이나 포트폴리오 소개 페이지
• 발표 자료 안에서 작동하는 인터랙티브 콘텐츠
• 간단한 업무용 미니 앱

일반적인 Canva 디자인과 다른 점은 버튼을 누르거나 내용을 입력했을 때 실제로 반응한다는 것입니다.

단순히 홈페이지 모양을 그려주는 것이 아니라 사용자가 조작할 수 있는 웹페이지를 만들어줍니다.

---

Canva Code 2.0에서 달라진 점

1. 결과물을 직접 클릭해 수정할 수 있습니다

기존 AI 코딩 도구는 원하는 결과가 나오지 않으면 프롬프트를 다시 입력하거나 코드를 직접 수정해야 했습니다.

Canva Code 2.0에서는 생성된 페이지의 글자, 이미지, 색상, 글꼴을 일반 Canva 디자인처럼 직접 선택해 수정할 수 있습니다.

특정 요소를 선택한 뒤 Canva AI에 수정 사항을 요청하는 것도 가능합니다.

예를 들어 버튼 색상이 마음에 들지 않는다면 전체 페이지를 다시 생성할 필요가 없습니다.

버튼을 선택하고 색상만 바꾸면 됩니다.

2. HTML 파일을 Canva로 가져올 수 있습니다

ChatGPT, Claude 또는 다른 바이브 코딩 도구에서 만든 HTML 결과물을 Canva로 가져올 수 있습니다.

가져온 HTML은 Canva 안에서 편집 가능한 디자인으로 변환됩니다.

처음부터 다시 만들지 않고 기존 결과물의 디자인만 Canva에서 다듬을 때 유용합니다.

다만 HTML을 Canva로 가져오는 기능과 Canva에서 만든 코드를 HTML로 내보내는 기능은 서로 다른 기능입니다.

Canva의 공식 발표는 HTML 가져오기와 Canva 내부 배포를 설명하지만, 생성된 전체 소스코드를 내려받아 다른 서버에 자유롭게 설치하는 기능은 명확하게 안내하지 않습니다. 소스코드 이전이 중요한 프로젝트라면 실제 계정에서 별도로 확인해야 합니다.

3. 템플릿과 디자인 자료를 함께 사용할 수 있습니다

Canva Code 2.0에는 50개 이상의 인터랙티브 템플릿이 제공됩니다.

Canva가 보유한 1억 2천만 개 이상의 이미지와 그래픽 자료도 결과물에 바로 넣을 수 있습니다.

AI가 기본 구조를 만들고 사용자가 Canva 자료를 이용해 디자인을 다듬는 방식입니다.

4. 모바일 화면에 자동으로 맞춰집니다

Canva Code로 만든 결과물은 화면 크기에 맞게 자동으로 조정됩니다.

PC 화면과 모바일 화면을 미리 확인한 뒤 무료 Canva 도메인이나 사용자 도메인으로 발행할 수 있습니다. 조직 내부에서는 SSO 방식으로 공유하는 기능도 제공합니다.

---

Canva Code 2.0 사용법

1단계. Canva AI에서 Code를 선택합니다

Canva 홈페이지에 로그인한 뒤 Canva AI를 엽니다.

프롬프트 입력창 아래에서 </> Code를 선택하면 Canva Code 작업을 시작할 수 있습니다. 이전에 만든 Canva Code 작업은 최근 채팅 목록에서 다시 열 수 있습니다.

계정에 따라 메뉴 이름과 위치가 조금 다르게 보일 수 있습니다.

2단계. 시작 방법을 선택합니다

Canva Code 2.0은 세 가지 방식으로 시작할 수 있습니다.

프롬프트로 만들기

만들고 싶은 페이지를 문장으로 설명합니다.

가장 자유도가 높은 방법입니다.

템플릿으로 만들기

50개 이상의 Canva Code 템플릿 중 목적에 맞는 디자인을 선택합니다.

처음 사용하는 사람이라면 템플릿에서 시작하는 편이 쉽습니다.

HTML 가져오기

다른 AI 도구나 개발자가 만든 HTML 파일을 Canva로 가져옵니다.

기능은 그대로 두고 디자인을 쉽게 수정하고 싶을 때 적합합니다.

---

Canva Code 프롬프트 작성 방법

“예쁜 홈페이지를 만들어줘”처럼 짧게 입력하면 일반적인 디자인이 나올 가능성이 높습니다.

다음 여섯 가지 내용을 함께 입력하는 편이 좋습니다.

1. 홈페이지의 목적
2. 주요 방문자
3. 필요한 화면 구성
4. 원하는 디자인
5. 필요한 동작
6. 모바일 화면 조건

다음은 온라인 강의 신청용 랜딩페이지를 만드는 예시입니다.

직장인을 위한 시간 관리 온라인 강의 랜딩페이지를 만들어줘.

첫 화면에는 강의 제목, 한 줄 설명, 신청 버튼을 배치해줘.
그 아래에는 수강 대상, 배울 수 있는 내용 4가지, 강사 소개, 수강 후기 3개, 가격, 자주 묻는 질문을 넣어줘.

디자인은 흰색 배경에 짙은 남색과 연한 파란색을 사용해줘. 과도한 애니메이션은 사용하지 말아줘.

상단 메뉴에서 각 영역으로 이동할 수 있게 하고, 자주 묻는 질문은 클릭하면 답변이 열리는 방식으로 만들어줘.

모바일에서는 글자가 너무 작아지지 않도록 하고 신청 버튼을 쉽게 누를 수 있게 해줘.

페이지를 한 번에 완성하려고 하기보다 먼저 구조를 만든 뒤 디자인과 기능을 나누어 수정하는 편이 효율적입니다.

---

생성된 페이지 수정하기

Canva Code 2.0에서는 두 가지 방법으로 결과물을 수정할 수 있습니다.

Canva 편집기로 직접 수정

글자나 이미지를 선택해 내용을 바꿉니다.

Canva를 사용해본 사람이라면 별도의 학습 없이 수정할 수 있습니다.

다음과 같은 항목을 직접 변경할 수 있습니다.

• 제목과 설명
• 버튼 문구
• 이미지와 아이콘
• 배경색
• 글꼴과 글자 크기
• 화면 배치
• 섹션별 디자인

프롬프트로 수정

직접 수정하기 어려운 기능은 Canva AI에 요청합니다.

예를 들면 다음과 같습니다.

신청 버튼을 누르면 페이지 아래의 신청 양식으로 이동하게 해줘.

가격표를 월간 결제와 연간 결제로 전환할 수 있게 만들어줘.

모바일에서는 후기 영역을 한 장씩 넘겨볼 수 있게 수정해줘.

수정 범위를 구체적으로 지정해야 다른 영역이 함께 바뀌는 문제를 줄일 수 있습니다.

---

모바일 화면과 기능을 확인합니다

AI가 페이지를 만들었다고 해서 바로 발행해서는 안 됩니다.

최소한 다음 항목을 직접 확인해야 합니다.

• 메뉴가 정상적으로 이동하는지
• 버튼과 링크가 작동하는지
• 입력 양식이 실제로 저장되는지
• PC와 모바일에서 글자가 잘리는지
• 이미지가 지나치게 느리게 열리지 않는지
• 전화번호와 이메일 주소가 정확한지
• 가격과 날짜가 정확한지

Canva Code는 코딩 시간을 줄여주지만 최종 검수까지 대신해주지는 않습니다.

특히 결제, 개인정보 수집, 회원가입이 들어가는 페이지는 기능뿐 아니라 개인정보 처리방침과 보안 설정도 함께 확인해야 합니다.

---

Canva Code로 만든 페이지 발행하기

작업이 끝나면 Canva에서 웹사이트로 발행할 수 있습니다.

Canva는 다음과 같은 발행 방식을 지원합니다.

• Canva 무료 도메인
• Canva에서 구매한 도메인
• 사용자가 보유한 도메인
• 조직 내부 보안 공유

사용자 도메인을 연결할 때는 도메인의 DNS 설정을 변경해야 할 수 있습니다. Canva는 기존에 보유한 도메인으로 웹사이트를 발행하는 기능을 공식적으로 지원합니다.

무료 플랜에서도 Canva Code를 시작할 수 있습니다.

다만 유료 플랜은 AI 사용량과 고급 기능이 더 많이 제공됩니다. 계정별 생성 횟수와 사용량 제한은 Canva 화면에서 확인하는 것이 정확합니다.

---

Canva Code 2.0과 워드프레스 비교

비교 항목	Canva Code 2.0	워드프레스
주요 목적	랜딩페이지, 미니 앱, 인터랙티브 콘텐츠 제작	블로그, 기업 홈페이지, 쇼핑몰, 커뮤니티 운영
제작 방식	프롬프트, 템플릿, HTML 가져오기	테마, 블록 편집기, 페이지 빌더
제작 난이도	초보자에게 쉬움	초기 설치와 설정 필요
제작 속도	단일 페이지를 빠르게 제작	초기 구성은 느리지만 반복 제작에 유리
디자인 수정	Canva처럼 직접 선택해 수정	테마와 블록 설정으로 수정
글 관리	장기간 쌓이는 콘텐츠 관리에는 제한적	글, 페이지, 카테고리, 태그 관리 가능
예약 발행·수정 기록	일반적인 CMS 기능과는 차이가 있음	예약 발행, 초안, 수정 이력 지원
SEO 설정	기본 검색 노출과 사이트맵 지원	SEO 플러그인으로 세부 설정 가능
기능 확장	Canva가 제공하는 범위 안에서 확장	플러그인과 사용자 코드로 확장
데이터 수집	Canva Form과 Canva Sheets 활용 가능	폼 플러그인, CRM, 이메일 도구 연결 가능
쇼핑몰·회원제	복잡한 운영 사이트에는 제한적	WooCommerce와 회원 플러그인 사용 가능
서버 관리	Canva가 호스팅 관리	직접 호스팅하거나 관리형 서비스 사용
백업과 이전	플랫폼 내 운영 중심	파일과 데이터베이스 단위 백업·이전 가능
적합한 사용자	빠르게 시각적 결과물을 만들 사람	검색 유입과 장기 운영이 필요한 사람

워드프레스는 글과 페이지를 관리하고 예약 발행, 수정 이력, 사용자 권한을 설정할 수 있는 CMS입니다.

테마로 디자인을 변경하고 플러그인으로 쇼핑몰, 게시판, 회원제, 온라인 강의, SEO 기능을 추가할 수 있습니다. 워드프레스는 사이트의 파일과 데이터를 사용자가 직접 통제할 수 있다는 점도 강조합니다.

반면 Canva Code는 디자인 제작과 빠른 배포에 더 가깝습니다.

같은 홈페이지 제작 도구처럼 보이지만 Canva Code는 빠르게 결과물을 만드는 도구, 워드프레스는 콘텐츠와 사업 기능을 지속해서 운영하는 도구라고 보는 편이 정확합니다.

---

SEO에는 어떤 도구가 더 유리할까?

Canva로 만든 웹사이트도 검색엔진에 노출될 수 있습니다.

Canva Websites는 검색엔진이 하위 페이지를 찾을 수 있도록 사이트맵을 자동 생성합니다. 사용자 도메인을 연결하고 검색 노출에 필요한 기본 설정도 적용할 수 있습니다.

따라서 Canva로 만들었다는 이유만으로 구글 검색 노출이 불가능한 것은 아닙니다.

다만 SEO 콘텐츠를 계속 발행하려면 다음 기능이 필요합니다.

• 글과 카테고리 관리
• 제목과 메타 설명 설정
• 내부 링크 관리
• URL 구조 설정
• 리디렉션 관리
• 구조화된 데이터 적용
• 검색엔진 색인 제어
• 작성자와 발행일 관리
• 오래된 콘텐츠 업데이트
• 다수의 글을 연결하는 메뉴와 분류 체계

워드프레스는 기본적인 검색엔진 최적화 구조를 제공하며, SEO 플러그인을 설치하면 세부 설정을 추가할 수 있습니다.

단일 이벤트 페이지나 짧은 캠페인 페이지라면 Canva Code로도 충분합니다.

하지만 수십 개에서 수백 개의 글을 발행해 검색 유입을 만들 계획이라면 워드프레스가 더 적합합니다.

---

Canva Code가 적합한 경우

다음과 같은 작업에는 Canva Code가 편합니다.

광고용 랜딩페이지

광고에서 유입된 방문자에게 하나의 상품이나 서비스를 설명하는 페이지입니다.

페이지 수가 적고 디자인과 신청 버튼이 중요하기 때문에 Canva Code의 장점이 잘 드러납니다.

단기간 운영하는 이벤트 페이지

세미나, 전시회, 공모전, 회사 행사처럼 운영 기간이 정해진 페이지에 적합합니다.

퀴즈와 계산기

간단한 성향 테스트, 예상 비용 계산기, 점수 계산기처럼 방문자가 직접 조작하는 콘텐츠를 빠르게 만들 수 있습니다.

시제품과 아이디어 검증

개발자를 고용하기 전에 화면과 기능을 먼저 만들어 반응을 확인할 수 있습니다.

---

워드프레스가 적합한 경우

다음과 같은 사이트는 워드프레스로 만드는 편이 안전합니다.

검색 유입을 위한 블로그

콘텐츠를 계속 발행하고 카테고리와 내부 링크를 관리해야 한다면 CMS가 필요합니다.

기업 홈페이지

회사 소개뿐 아니라 공지사항, 문의 관리, 채용, 다국어 페이지를 지속해서 관리해야 합니다.

온라인 강의와 회원제 사이트

로그인, 회원 권한, 결제, 수강 기록처럼 데이터베이스가 필요한 기능은 워드프레스 플러그인이나 별도의 웹 애플리케이션이 적합합니다.

쇼핑몰

상품, 주문, 재고, 결제, 환불을 관리해야 하는 쇼핑몰은 단순한 인터랙티브 페이지와 다릅니다.

워드프레스에서는 WooCommerce 같은 플러그인을 이용해 전자상거래 기능을 추가할 수 있습니다.

---

Canva Code와 워드프레스를 함께 사용하는 방법

두 도구 중 하나만 선택할 필요는 없습니다.

워드프레스를 메인 홈페이지로 운영하면서 Canva Code로 만든 콘텐츠를 별도로 활용할 수 있습니다.

예를 들면 다음과 같습니다.

• 워드프레스에 SEO 정보 글을 작성합니다.
• 글 안의 버튼을 누르면 Canva Code로 만든 계산기로 이동합니다.
• Canva Code 페이지에서 결과를 확인한 방문자를 워드프레스의 신청 페이지로 연결합니다.

Canva Code 페이지를 별도 도메인이나 서브도메인으로 발행하고 워드프레스에서 연결하는 방식입니다.

다만 워드프레스 안에 직접 삽입할 계획이라면 Canva Code 결과물의 임베드 지원 여부, 화면 높이, 쿠키, 개인정보 수집 방식을 먼저 확인해야 합니다.

---

사용 전에 확인할 제한 사항

생성 횟수 제한

Canva Code는 무료 플랜에서도 제공되지만 AI 사용량은 플랜에 따라 달라질 수 있습니다.

정확한 생성 횟수는 계정 화면에서 확인해야 합니다.

소스코드 이전

HTML을 Canva로 가져오는 것은 가능하지만 Canva Code에서 만든 결과물을 독립된 소스코드로 내려받아 다른 호스팅에 설치할 수 있는지는 별도 확인이 필요합니다.

사이트 이전 가능성이 중요한 프로젝트라면 처음부터 워드프레스나 코드 기반 개발 방식을 선택하는 편이 안전합니다.

복잡한 백엔드 기능

Canva Code는 웹사이트와 미니 앱을 만들 수 있지만 복잡한 회원 인증, 결제, 재고 관리, 권한 관리가 필요한 서비스와는 구분해야 합니다.

Canva Form의 응답을 Canva Sheets에 저장하는 기능은 제공되지만, 이것이 범용 데이터베이스와 서버 기능을 모두 대신하는 것은 아닙니다.

AI 결과 검수

Canva도 AI 결과가 항상 정확하지 않을 수 있으므로 중요한 정보는 사용자가 확인해야 한다고 안내합니다. AI가 생성한 디자인을 상업적으로 사용할 때는 이미지, 상표, 로고의 권리도 직접 점검해야 합니다.

---

결론

Canva Code 2.0은 홈페이지 제작의 진입 장벽을 크게 낮췄습니다.

프롬프트만으로 반응형 랜딩페이지와 인터랙티브 콘텐츠를 만들고, Canva 편집기에서 글자와 디자인을 직접 수정할 수 있습니다.

하지만 워드프레스와 역할은 다릅니다.

빠르게 한 장짜리 홈페이지나 미니 앱을 만들고 싶다면 Canva Code 2.0이 편합니다. 검색 콘텐츠를 쌓고 회원, 결제, 쇼핑몰 기능까지 장기간 운영하려면 워드프레스가 더 적합합니다.

처음부터 도구를 선택하기보다 운영 기간과 필요한 기능을 먼저 정해야 합니다.

단기간 사용할 페이지는 Canva Code로 만들고, 검색 유입과 고객 데이터를 축적할 메인 사이트는 워드프레스로 운영하는 조합도 현실적인 방법입니다.

---

자주 묻는 질문

Canva Code 2.0은 무료인가요?

Canva Free 사용자를 포함한 전체 Canva 사용자에게 제공됩니다. 다만 무료 플랜과 유료 플랜은 AI 사용량과 이용 가능한 고급 기능에서 차이가 날 수 있습니다.

Canva Code로 만든 사이트에 개인 도메인을 연결할 수 있나요?

가능합니다. Canva 무료 도메인뿐 아니라 Canva에서 구매한 도메인이나 기존에 보유한 도메인으로 발행할 수 있습니다.

Canva Code로 만든 사이트를 워드프레스로 옮길 수 있나요?

HTML 파일을 Canva로 가져오는 기능은 확인됐지만 Canva Code에서 생성한 전체 코드를 내려받아 워드프레스로 자동 이전하는 기능은 공식 발표에서 명확하게 확인되지 않습니다. 중요한 페이지라면 워드프레스에서 다시 제작하거나 별도 페이지로 연결하는 방법이 안전합니다.

Canva Code로 만든 사이트도 검색 노출이 되나요?

검색 노출은 가능합니다. Canva Websites는 사이트맵 생성과 기본적인 검색 노출 설정을 지원합니다. 다만 다수의 SEO 콘텐츠를 계속 발행하고 세부 설정을 관리하려면 워드프레스가 유리합니다.

Canva Code로 쇼핑몰을 만들 수 있나요?

상품을 보여주는 시제품이나 간단한 판매 페이지는 만들 수 있습니다. 주문, 결제, 재고, 환불을 실제로 운영하는 쇼핑몰이라면 WooCommerce 같은 전자상거래 기능을 사용하는 편이 적합합니다.

코딩을 전혀 몰라도 사용할 수 있나요?

기본적인 제작과 수정은 코딩 지식 없이 가능합니다. 다만 버튼, 입력 양식, 모바일 화면이 정상적으로 작동하는지는 사용자가 직접 테스트해야 합니다.