ChatGPT Canvas(챗GPT 캔버스)로 글쓰기·코딩 정복하기
글쓰기·코딩 작업 생산성을 높여주는 챗GPT 캔버스 기능의 사용 방법, 활용 사례를 살펴봅니다.
챗GPT를 글쓰기나 코딩에 활용하고 계시나요?
글쓰기 용도로는 챗GPT보다 클로드(Claude)가 더 낫다는 말도 들리는데요. 이에 오픈AI는 지난해 10월 클로드의 '아티팩트' 기능과 유사하게 글쓰기, 코딩 작업을 편집하며 협업할 수 있는 새로운 인터페이스, Canvas(캔버스)를 출시했습니다.
혹시 아직도 챗GPT 일반 대화창에서 요청하고, 혼자 편집한 내용을 다시 붙여넣기해 재요청하는 방식으로 글쓰기, 코딩 작업을 하고 있다면 주목하세요👀
챗GPT 글쓰기, 코딩 생산성을 혁신적으로 높여줄 ChatGPT Canvas 기능과 사용 방법을 실제 글쓰기, 코딩 활용 사례를 통해 정리해보겠습니다.
✔ 챗GPT Canvas(캔버스)가 뭔지 알 수 있어요.
✔ 캔버스 기능 사용 방법을 배워요.
✔ 캔버스를 활용해 글쓰기, 코딩을 할 수 있어요.
📚 목차
1. ChatGPT Canvas(챗GPT 캔버스)란?
2. ChatGPT Canvas 시작하기
3. ChatGPT Canvas 사용 방법
4. 챗GPT 캔버스 튜토리얼 (실습)
1.ChatGPT Canvas(챗GPT 캔버스)란?
ChatGPT Canvas(챗GPT 캔버스)는 긴 글쓰기, 코딩 작업을 효율적으로 진행하기 위한 챗GPT 내 별도의 문서 편집 공간이에요. 챗GPT에게 글, 코드 작성을 요청하거나 직접 작성한 작업물의 수정을 요청할 수 있어요. 편집 작업도 바로 캔버스 화면에서 실시간으로 진행할 수 있어서 맥락이 더 잘 공유되고, 연속적인 작업이 가능해요. 마치 캔버스에 그림을 그리듯 챗GPT와 함께 초안을 작성하고, 이를 수정하면서 계속해서 완성도를 높여갈 수 있는 협업 공간이죠.
지금까지 챗GPT에 작업을 요청하는 방식은 대화형 인터페이스에서 채팅으로 요청 → 출력, 재요청 → 출력의 턴을 반복하면서 단발적인 작업을 계속 주고 받는 형태였는데요. 글쓰기와 같이 내용을 계속 수정하면서 발전시켜나가야 하는 작업에는 불편한 면이 있었어요.
Canvas는 이런 글쓰기, 코딩 작업에서 겪게 되는 채팅 인터페이스의 한계를 개선하기 위해 개발된 새로운 방식의 작업 도구예요.
캔버스를 실행하면 기존 대화창은 왼쪽에 생기고 별도로 문서를 편집할 수 있는 공간이 오른쪽에 생성돼요. 왼쪽의 대화창을 통해 수정 사항을 챗GPT에게 명령하면 자동으로 오른쪽 문서 편집 공간에 반영되고, Canvas 단축키 클릭으로 독해 수준, 길이 등의 글 전체 형태를 한 번에 수정할 수도 있어요.
현재 챗GPT 캔버스는 베타 버전을 거쳐 챗GPT 무료 플랜을 비롯한 모든 요금제에서 제한 없이 이용 가능해요.
2.ChatGPT Canvas 시작하기
텍스트 편집기와 대화형 AI가 결합한 캔버스는 특히 평소 문서를 많이 다루는 콘텐츠 기획자나 마케터, 간단한 코드 작성 및 리뷰가 필요한 개발자에게 유용한 기능이에요.
의외로 사용 방법을 모르는 분들이 많은 캔버스! 챗GPT에서 캔버스를 실행하는 방법부터 알아보겠습니다😄
(1) 긴 글, 코드 작업에서 자동 실행
OpenAI에 따르면 챗GPT가 도움이 될 만한 상황임을 감지하면 대화창에서 캔버스가 자동으로 실행돼요. 모든 종류의 글에서 다 작동하는 건 아니고, 블로그와 같이 10줄 이상 분량의 긴 글을 작성하거나 기획안/보고서/논문 작성 등 구조화된 문서 작업이 필요한 경우, 코드 작업을 요청하는 경우에 자동으로 캔버스가 열려요.
(2) 대화창 > 도구 보기 > '캔버스' 선택
프롬프트 입력 단계에서부터 캔버스 도구를 선택해 작업을 시작할 수도 있어요. 챗GPT 대화창의 '도구 보기'를 누르고 '캔버스', 혹은 'Write or code'를 클릭하면 대화창에 파란색 글씨로 '캔버스' 도구가 적용된 것을 확인할 수 있어요.
(3) '캔버스 열어줘' 프롬프트 입력
마지막으로, 대화 중에 '캔버스 열어줘'라고 요청하면 바로 캔버스가 실행돼요. 긴 글이나 코드 작업을 요청했는데도 자동으로 캔버스가 열리지 않는다면 챗GPT에게 캔버스를 열어달라고 명령해 보세요.
또 기존에 작성한 문서를 캔버스에서 편집하고 싶다면, 문서 파일을 업로드하고 '이걸 캔버스에서 열어 줘'라고 요청하면 돼요. 문서의 내용을 챗GPT와 함께 보면서 문장별로 수정을 요청하거나, 전체 내용 검토, 필요하다면 재작성까지 진행할 수 있어요.
3.ChatGPT Canvas 사용 방법
이제 캔버스로 할 수 있는 여러 기능을 상세하게 소개해볼게요. 일반적인 문서 작업을 할 때와 코드 작성을 할 때 다른 편집 도구(단축키)가 제공되기 때문에 글쓰기와 코딩의 케이스로 나누어 살펴보겠습니다.
(1) 문서 작업(글쓰기)
캔버스를 열면 기존의 대화는 좌측의 대화창에서 이어서 진행할 수 있고, 캔버스가 확대되면서 우측에 문서를 직접 작성할 수 있는 편집기가 나타나요. 이 편집 공간에서 직접 글을 작성할 수도 있고, 좌측 대화창에서 수정 내용을 명령하면 챗GPT가 실시간으로 편집한 내용이 편집 공간에 반영돼요. 물론, 챗GPT에게 특정 주제를 던지고 직접 써달라고 요청하는 것도 가능합니다.
- 문서 서식(스타일) 변경
캔버스는 기존의 다른 문서 편집기와 유사하게 글을 구조화할 수 있는 문서 서식이 적용되는 점이 챗GPT 일반 대화와 다른 점이에요.
수정하고 싶은 부분을 드래그해서 선택하면 특정 문구의 수정 여부를 챗GPT에게 물어보거나, 굵게/기울임꼴/헤딩 태그를 변경할 수 있는 서식 도구가 뜹니다.
✅ [AI 시스템을 학습시키고] 더 쉬운 표현은 없을까? ChatGPT에게 묻기
👉 "AI 시스템을 학습시키고"를 더 쉬운 표현인 "AI 시스템을 훈련시키고 작동시키는 데 필요한"으로 바꾸었습니다. 다른 부분도 쉽게 풀어쓰고 싶으시면 말씀해 주세요!
② B : 굵게 변경
③ I : 기울임꼴로 변경
④ Aa : 표제 강조 (헤딩1, 헤딩2, 헤딩3, 본문)
✅ 구조화된 글쓰기를 위해 제목, 소제목, 본문을 시각적으로 구분하는 서식으로, 헤딩1 → 본문 순으로 중요도에 따라 폰트 크기가 작아져요.
SEO(검색엔진최적화)를 위해서는 구조화된 글쓰기가 중요한데요. 구조화된 글쓰기란 굵게, 기울임 등으로 강조를 표시하고 제목과 소제목, 본문을 구분해 가독성 좋은 형태로 글을 구조화해 정리하는 것을 말해요.
ChatGPT Canvas는 툴 자체에서 SEO를 고려한 기능을 제공해 글쓰기에 도움이 되는 도구로 활용이 가능해졌어요. 기존 채팅 인터페이스로는 문서 서식 지정이나 특정 문장을 선택해 수정을 요청하는 등 맥락 공유가 중요한 작업을 진행하기 어려웠던 한계가 개선되었죠!
- 버전 복원 / 변경 사항 표시
자유롭게 문서를 편집하다 이전 버전으로 되돌리고 싶다면 상단의 화살표를 눌러 이전 버전으로 복원할 수 있고, 다시 다음 버전으로 돌아갈 수도 있어요. 또, 어떤 내용이 수정되었는지 확인하고 싶다면 '변경 사항 표시' 기능을 통해 글 수정 히스토리를 한눈에 파악할 수 있답니다.
- 문서 편집 단축키
문서 편집 시 자주 요청하는 작업은 클릭 한 번으로 전체 본문에 적용할 수 있는 단축키 기능을 제공해요. 단축키로 제공하는 작업들은 챗GPT에게 일일이 채팅으로 요청하지 않고 더 빠르게 편집할 수 있어요👍
② 마지막으로 다듬기 : 전체적인 문법과 구조를 점검해 일관성과 가독성을 개선해요.
③ 독해 수준 : 유치원생-중학생-고등학생-대학생-대학원생 독해 수준에 맞춰 글을 전체적으로 재작성해요.
④ 길이 조절 : '가장 짧게'부터 '가장 길게'까지 글을 축약하거나 확장해요.
⑤ 편집 제안 : 글의 완성도를 높이기 위한 편집 사항을 제안해요.
(2) 코딩 협업
글쓰기뿐 아니라 코딩에도 캔버스를 활용할 수 있어요. 캔버스를 열고 원하는 작업을 요청하면 챗GPT가 알아서 코드를 짜주고, 기존에 작성한 코드를 붙여 넣어 검토를 요청해 완성도를 높여갈 수도 있답니다!
- 코드 편집 및 미리보기
글쓰기와 동일하게 코딩 작업에서도 수정하고 싶은 부분만 선택해 'ChatGPT에게 묻기'를 클릭하고 질문을 하거나, 편집 제안을 받을 수 있어요. 전반적인 코드 수정을 원한다면 좌측 대화창에서 '타이머 기능을 추가해서 코드를 다시 짜 줘', '남은 지뢰 수 표시 기능을 추가해 줘'와 같이 채팅으로 요청할 수도 있어요.
또, 캔버스에도 클로드의 '아티팩트'와 유사한 미리보기 기능이 있어서 작성한 코드를 캔버스 화면에서 바로 출력해 잘 실행되는지 확인할 수 있어요. 무척 유용한 기능이죠?
다음은 챗GPT 캔버스를 열고 아래 프롬프트를 입력해 만든 코드를 '미리보기'한 화면입니다.
- 정사각형 형태의 8x8 보드에 지뢰 10개가 무작위로 있고, 클릭하면 숫자나 지뢰가 보이도록 해 줘.
- 우클릭으로 깃발을 표시하고, 게임 오버와 승리 메시지도 나오게 해 줘.
- 게임 오버 시 게임을 다시 시작할 수 있는 '다시 시작' 기능을 넣어 줘.
- 코드 편집 단축키
캔버스 문서 편집 공간 우측 하단에 있는 단축키는 작성된 문서가 코드일 경우 글쓰기 작업과는 다른 기능의 단축키로 자동 변환돼요. 예시 화면과 함께 하나씩 살펴볼게요!
① 댓글 추가
'댓글 추가' 단축키는 주요 로직과 복잡한 처리 부분을 중심으로 코드에 주석(설명)을 추가하는 기능이에요. 다른 사람이 작성한 코드를 가져와 코드에 대한 설명이 필요하거나, 코딩 초보자라 코드 해석이 어려운 경우 댓글을 추가하면 어떤 로직에 대한 코드인지 챗GPT가 친절하게 설명을 달아 줘요.
// 뒤에 초록색으로 쓰인 부분이 '댓글 추가' 단축키 클릭 후 추가된 인라인 주석이에요.
② 로그 추가
디버깅(오류 추적)을 하고 싶다면, '로그 추가' 버튼을 눌러 주요 동작에 console.log문을 추가해 브라우저 콘솔에서 코드 흐름을 실시간으로 추적할 수 있어요. 주요 로직에 심어진 로그들은 브라우저 개발자 도구(F12)를 통해 콘솔에서 확인 가능해요.
③ 버그 수정
'버그 수정'을 누르면 챗GPT가 전체 코드를 검토하면서 버그는 없는지, 모든 기능이 정상적으로 작동하는지 확인해 줘요. 버그가 발견되는 경우 자동으로 버그를 수정해주기 때문에 코드 작성 후 꼭 '버그 수정' 버튼을 눌러 최종 검토하는 게 좋아요.
④ 특정 언어로 포트
'특정 언어로 포트'는 작성된 코드를 다른 언어로 포팅(porting 이식)하는 단축키예요. 예를 들면, 자바스트립트 언어로 작성된 코드를 파이썬이나 C++ 언어로 변환하고자 할 때 해당 단축키로 빠르게 실행할 수 있어요.
⑤ 코드 검토
'코드 검토'는 챗GPT가 코드를 전반적으로 검토해 코딩 품질 향상을 위한 코멘트를 남겨주는 기능이에요. 코드 검토 버튼을 누르면 특정 로직에 개선 제안 코멘트가 달리고, 코멘트의 '적용' 버튼을 누르면 챗GPT가 제안한 내용대로 코드가 수정돼요.
4.챗GPT 캔버스 튜토리얼 (실습)
아티클 읽기만 하고 끝내면 오늘 배운 지식은 내 것이 될 수 없어요🙅♀️
5분이면 따라하는 간단한 튜토리얼 실습하고 업무, 일상에서 바로 활용하세요😉
챗GPT 캔버스(Canvas) 기능을 활용해서 간단한 웹 기반 미니 게임을 만들어 보세요.
👉 캔버스 여는 방법
(1) 긴 글, 코딩 작업 요청 시 자동 실행
(2) 대화창 > 도구 보기 > '캔버스' 선택
(3) '캔버스 열어줘' 프롬프트 입력
👉 바로 따라하는 실전 예시
[오목 게임 제작 프롬프트]
React와 Tailwind CSS를 사용하여 오목 게임을 만들어줘.
- 15x15 또는 19x19 크기의 바둑판 위에서 두 명의 플레이어가 번갈아 가며 돌을 놓을 수 있어야 해.
- 흑돌(●)과 백돌(○)을 번갈아 두며, 오목(가로, 세로, 대각선으로 5개 연속)을 먼저 만든 사람이 승리해.
- 승부가 나면 화면 상단에 '○○ 승!'이라는 메시지를 표시하고, 다시 시작 버튼도 있어야 해.
- 마우스 클릭으로 돌을 두고, 이미 돌이 놓인 곳엔 둘 수 없도록 막아줘.
- 간단한 게임 로그(몇 수째인지, 누가 어디에 뒀는지)도 오른쪽에 표시해줘.
[챗GPT 입문 가이드]
- 1. 챗GPT란? 가입 방법부터 모델, 가격, 기능, ChatGPT 활용법 톺아보기(2025 최신ver.)
- 2. 챗GPT 프롬프트 잘 쓰는 법 : 챗GPT 프롬프트 템플릿 100개 모음.zip
- 3. ChatGPT Canvas(챗GPT 캔버스)로 글쓰기·코딩 정복하기 (현재)
- 해당 콘텐츠는 사전 동의 없이 2차 가공 및 영리적인 이용을 금하고 있습니다.