아티팩트 활용

아티팩트란?

아티팩트(Artifacts)는 AI가 생성한 코드, 문서, HTML 등의 결과물을 채팅 영역과 분리하여 별도의 패널에서 보여주는 기능이에요. 일반 채팅 메시지와 달리 아티팩트는 편집, 복사, 다운로드가 가능하며 실시간 미리보기를 제공해요.

AI가 코드나 문서를 생성하면 자동으로 아티팩트 패널이 열리며, 채팅 화면 우측에 나란히 표시돼요. 대화 내용을 확인하면서 동시에 생성된 결과물을 검토하고 활용할 수 있어요.

아티팩트가 생성되는 경우:

• 💻 AI에게 코드 작성을 요청했을 때
• 📄 문서, 보고서 등 긴 형식의 텍스트를 요청했을 때
• 🌐 HTML, CSS, JavaScript로 구성된 웹 페이지를 요청했을 때
• 📋 표, 목록 등 구조화된 데이터를 요청했을 때

코드 아티팩트

AI에게 코드 작성을 요청하면 생성된 코드가 아티팩트 패널에 표시돼요. 코드를 읽기 쉽게 보여주는 다양한 편의 기능을 제공해요.

코드 아티팩트 기능:

• 🎨 구문 강조(Syntax Highlighting) — Python, JavaScript, TypeScript, Java, C++ 등 주요 프로그래밍 언어의 구문이 색상으로 구분되어 가독성이 높아요.
• 📋 원클릭 복사 — 복사 버튼을 클릭하면 전체 코드가 클립보드에 복사돼요. IDE나 텍스트 에디터에 바로 붙여넣기할 수 있어요.
• 🔢 줄 번호 표시 — 코드의 줄 번호가 표시되어 특정 라인을 참조하기 쉬워요.
• 🏷️ 언어 감지 — 코드의 프로그래밍 언어가 자동으로 감지되어 표시돼요.

코드 수정이 필요하면 대화에서 "위 코드에서 X 부분을 Y로 수정해줘"와 같이 요청하면 AI가 수정된 코드를 새로운 아티팩트로 생성해요.

문서 아티팩트

보고서, 에세이, 이메일 초안 등 긴 형식의 텍스트를 요청하면 문서 아티팩트로 생성돼요. 채팅 메시지 안에 긴 글이 포함되면 읽기 어렵지만, 아티팩트로 분리되면 깔끔한 레이아웃으로 확인할 수 있어요.

문서 아티팩트 특징:

• 📝 마크다운 렌더링 — 제목, 목록, 표, 강조 등 마크다운 문법이 보기 좋게 렌더링되어 표시돼요.
• 📋 전체 복사 — 렌더링된 문서를 원본 마크다운 형식으로 복사할 수 있어요. 노션, 구글 문서 등에 붙여넣기하면 서식이 유지돼요.
• ✏️ 편집 요청 — "두 번째 단락을 더 간결하게", "결론 부분을 추가해줘" 등 수정 요청을 하면 AI가 문서를 업데이트해요.

HTML 아티팩트

HTML, CSS, JavaScript를 포함한 웹 페이지를 요청하면HTML 아티팩트로 생성되며, 실시간 미리보기가 제공돼요. 생성된 웹 페이지가 실제로 동작하는 모습을 바로 확인할 수 있어요.

HTML 아티팩트 기능:

• 🖥️ 실시간 렌더링 — 생성된 HTML이 브라우저에서 바로 렌더링되어 실제 웹 페이지처럼 미리볼 수 있어요.
• 🖱️ 인터랙티브 실행 — JavaScript가 포함된 경우 버튼 클릭, 애니메이션 등 인터랙티브 기능이 실제로 동작해요.
• 🔄 코드/미리보기 전환 — 탭을 전환하여 소스 코드와 렌더링된 결과를 번갈아 확인할 수 있어요.
• 🔲 전체 화면 — 전체 화면 버튼을 클릭하면 아티팩트를 더 넓은 화면에서 확인할 수 있어요.

HTML 아티팩트 활용 예시:

• 간단한 랜딩 페이지 프로토타입 생성
• 데이터 시각화 차트 (Chart.js, D3.js 활용)
• 인터랙티브 계산기, 변환기 등 미니 도구
• CSS 애니메이션이나 레이아웃 실험
• 게임이나 퀴즈 등 인터랙티브 콘텐츠

"할 일 목록 앱을 만들어줘", "원형 차트를 그려줘" 등의 요청으로 즉시 동작하는 웹 콘텐츠를 생성할 수 있어요. 웹 개발 학습이나 빠른 프로토타이핑에 매우 유용해요.