생성형 AI 도구를 활용하여 작성 및 편집된 노트입니다.
ChatGPT 인터랙티브 코드 블록 출시: 분할·전체화면 편집까지
OpenAI가 ChatGPT에 ‘인터랙티브 코드 블록’을 추가했습니다. 채팅에서 끝나던 코드가 이제는 화면 안에서 바로 미리보기하고, 분할 화면으로 리뷰하고, 전체 화면으로 편집까지 이어지니 “복붙-실행-수정” 루틴이 확 줄어듭니다1.
이번 글에서는 새 기능이 정확히 무엇을 바꾸는지, 개발자 워크플로에 어떤 영향을 주는지, 그리고 비슷한 흐름(캔버스형 작업공간, 모바일 코드 뷰어 등)과 연결해 실전 활용 팁까지 정리해볼게요.
ChatGPT 인터랙티브 코드 블록이 바꾸는 ‘코딩 동선’
예전 ChatGPT에서 코딩은 대체로 “코드 생성 → IDE로 이동 → 실행/수정 → 다시 질문”의 왕복이었습니다. 이번 업데이트의 핵심은 그 왕복을 ChatGPT 화면 안으로 끌어왔다는 점이에요.
코드 블록이 단순한 텍스트 덩어리가 아니라, 토글로 ‘미리보기’를 띄우고(다이어그램, 미니 앱 같은 결과물), 필요하면 분할 화면에서 코드와 결과를 동시에 보며 리뷰하고, 더 깊게 손대고 싶을 땐 전체 화면 에디터로 확장하는 흐름입니다2. 즉 “대화형 코딩 보드”에 가까워졌죠.
이 변화가 유용한 이유는 간단합니다. 코드는 길어질수록 맥락 전환 비용이 커지는데, 미리보기와 편집이 같은 공간에 붙으면 실험 속도가 빨라집니다. 작은 UI, 간단한 게임, 데이터 시각화 같은 프로토타이핑이 특히 편해질 가능성이 큽니다.
분할 화면·전체 화면 편집, 어디에 가장 쓸모 있나
분할 화면은 코드 리뷰에 강합니다. 오른쪽엔 실제 결과(혹은 렌더링된 화면)를 두고, 왼쪽 코드에서 “어느 줄이 이 동작을 만들지”를 바로 확인하는 식이죠2. 협업에서 흔한 ‘상태 설명 → 코드 위치 찾기 → 수정’의 소통 비용도 줄어듭니다.
전체 화면 편집은 “채팅창에 코드를 얹어두고 작업하기엔 좁다”는 근본 불만을 해결합니다. 짧은 스니펫이 아니라 파일 단위로 다듬는 감각이 생기고, 수정 사항이 즉시 반영되면 디버깅도 훨씬 리듬이 좋아져요2.
여기에 기존의 ChatGPT 코드 활용 방식(코드 설명, 리팩터링, 테스트 작성, 버그 추적 등)을 얹으면 생산성 상승폭이 커집니다. 예를 들어 “테스트 케이스를 짜줘”로 시작해, 생성된 테스트를 바로 손보고 결과를 확인하는 루프를 빠르게 돌릴 수 있죠3. 다만 생성 코드를 맹신하지 말고 사람이 감독해야 한다는 원칙은 그대로입니다3.
‘캔버스형 작업공간’ 경쟁의 신호: 오픈소스도 따라간다
흥미로운 건, 이런 캔버스/워크스페이스형 UI가 ChatGPT만의 실험이 아니라는 점입니다. 오픈소스 ChatGPT 대체 프로젝트인 LibreChat에서도 “ChatGPT 캔버스 같은 분할 편집 작업공간”을 넣어달라는 요청과 PR 논의가 계속되고 있어요4.
이 말은 곧 사용자들이 “채팅만으론 부족하다”는 단계로 넘어왔다는 뜻입니다. 이제 AI는 답변 생성기가 아니라, 문서/코드/산출물을 ‘같이 만지는’ 편집 파트너가 되어야 합니다. ChatGPT의 인터랙티브 코드 블록은 그 요구에 가장 직관적인 방식으로 응답한 기능이고요.
또 한 가지 흐름은 “작은 화면에서도 코드를 잘 보게 해달라”입니다. 마이크로소프트 Teams 모바일이 코드 블록을 별도 객체로 렌더링하고, 전체 화면 리더에서 하이라이팅과 줄 번호를 제공하는 방향으로 개선한 것도 같은 맥락이죠5. 코딩 협업은 결국 ‘보기 편한 코드’에서 시작하니까요.
시사점
이번 ChatGPT 인터랙티브 코드 블록은 단순 UI 업데이트가 아니라, AI 코딩 경험의 기본 단위를 “대화”에서 “대화+편집+미리보기”로 바꾼 사건에 가깝습니다. 짧은 팁만 챙기면 체감이 확 달라져요.
첫째, 프로토타입은 “작게 만들고 바로 띄워보기”로 접근하세요. 미리보기 토글이 있는 순간, 길게 설계하기보다 빠른 실험이 이득입니다.
둘째, 분할 화면은 리뷰 모드로 쓰세요. 결과를 보면서 ‘의도-동작-코드’를 한 화면에서 맞추면 리팩터링 품질이 올라갑니다.
셋째, 전체 화면 편집에서는 “테스트부터” 붙이세요. 생성 코드의 함정은 늘 있으니, 테스트를 먼저 만들어 안전망을 깔고 고치면 실전 투입이 쉬워집니다3.
AI 코딩 도구를 잘 쓰는 사람과 아닌 사람의 차이는 모델 성능보다 ‘동선’에서 벌어집니다. 이제 그 동선이 ChatGPT 안으로 더 깊게 들어왔습니다1.
참고
1OpenAI Adds Interactive Code Blocks in ChatGPT With Split-Screen and Full-Screen Editing