클로드 아티팩트(Claude Artifacts) 사용법과 활용 방법

1. 클로드 아티팩트: 실시간 생성 결과를 확인할 수 있는 강력한 기능

클로드 아티팩트는 클로드 소네트(claude 3.5)에서 코딩된 결과물을 실시간으로 확인할 수 있는 기능입니다. 이번 글에서는 클로드 아티팩트 사용법과 활용 예시를 적어보았습니다.

최근 ChatGPT-4o의 출시로 많은 이슈가 발생했는데요, 빠른 응답과 시각 정보를 이해하는 기능이 크게 향상되어 화제가 되었습니다. 하지만, ChatGPT-4o에 이어 새롭게 등장한 클로드 3.5 소네트(Claude 3.5 Sonnet)가 주목받고 있습니다. 이번에는 클로드 3.5 소네트는 이전 모델 오퍼스(opus)보다 향상되었는데요, 실시간으로 결과물을 보여주는 한 기능인 ‘클로드 아티팩트’는 특히나 유용합니다.

클로드 소넷 3.5 비교화면 (출처: 엔트로픽)
클로드 소넷 3.5 비교화면 (출처: 엔트로픽)

 

2. 클로드 아티팩트: 실시간 생성 결과 확인

클로드 3.5 소네트는 기존 버전보다 대화의 맥락을 더 정확하게 이해하고, 응답 속도도 개선되었습니다. 하지만 이번 버전의 가장 큰 강점 중 하나는 바로 클로드 아티팩트(Claude Artifacts) 기능입니다. 이 기능을 통해 사용자는 클로드가 생성한 결과물을 실시간으로 확인할 수 있습니다. 이는 텍스트 기반의 생성형 AI에서 매우 중요한 발전입니다.

클로드 아티팩트 설정 화면
클로드 아티팩트 설정 화면

 

3. 클로드 아티팩트 활성화 방법

클로드 아티팩트를 사용하는 방법은 간단합니다. 클로드 대화창 아래에 있는 실험 도구 아이콘을 클릭하여 아티팩트 기능을 활성화할 수 있습니다. 이 기능을 통해 텍스트 생성뿐만 아니라 코딩 결과물도 실시간으로 확인할 수 있어, 사용자의 편의성을 크게 높였습니다.

 

4. 클로드에서 그림 코딩하기

예를 들어, 클로드에게 “8비트 그림으로 고양이를 그려줘”라고 입력하면, 클로드는 SVG(Scalable Vector Graphics) 파일로 고양이 그림을 생성해줍니다. 사용자는 이를 화면에서 바로 확인할 수 있으며, 미리보기 기능(Preview)을 통해 코드의 실행 결과를 시각적으로 확인할 수 있습니다. 코드(Code) 탭에서는 클로드가 생성한 코드를 직접 볼 수 있어, 필요에 따라 수정할 수도 있습니다.

클로드 아티팩트에서 그림 그리기
클로드 아티팩트에서 그림 그리기

 

클로드가 만든 고양이 그림 코드
클로드가 만든 고양이 그림 코드

 

클로드 아티팩트에서 그린 고양이
클로드 아티팩트에서 그린 고양이

5. 움직이는 이미지 코딩하기

또한, 클로드를 이용해 움직이는 이미지를 코딩할 수도 있습니다. 예를 들어, 8비트 그림으로 고양이가 걷는 모습을 구현할 수 있습니다. 이는 텍스트 기반의 AI가 코드로 생성한 이미지를 움직이도록 하는 기능으로, 코드베이스의 이미지를 쉽게 제어할 수 있도록 도와줍니다.

‘고양이가 가로로 걸어가는 모습을 그려줘’라고 다시 입력하면 클로드는 다시 코딩을 하고 아티팩트로 움직이는 고양이 그림을 실행 결과물로 보여줍니다.

클로드 아티팩트에서 그린 고양이
클로드 아티팩트에서 그린 고양이

 

클로드 아티팩트에서 그린 고양이
클로드 아티팩트에서 그린 고양이

 

텍스트 기반의 생성형 AI 는 달이(DALL-E)와 같이 그림파일로 그리는 경우 이를 움직이도록 하는 것은 어려운 일입니다. 그러나 8비트 그림 (SVG)와 같은 그림은 코드 베이스의 이미지로 이를 움직이는 것은 보다 쉬운 일입니다.

코드베이스의 이미지란, 하이텔, 천리안 시대의 파란 화면에 이모티콘을 여러개 표기하는 것과 비슷하다고 보시면 될거에요. 이들은 컴퓨터 화면에 화가처럼 그림을 그리지는 못하지만 심플한 코드 베이스의 그림을 그리고, 색칠하고 이들의 위치를 이동시켜 움직이는 그림을 만들 수 있습니다.

이는 아래처럼 클로드가 보여주는 코드를 잠깐만 살펴보시면 이해할 수 있습니다. 친절하게 주석으로 설명도 해주었습니다.

클로드가 만든 고양이 그림 코드
클로드가 만든 고양이 그림 코드

 

6. 클로드 3.5 소네트로 더 복잡한 코딩 시도하기

클로드는 단순한 이미지 생성뿐만 아니라, 더 복잡한 코딩도 가능합니다. 예를 들어, 스마트폰 앱의 뽀모도로 타이머를 클로드로 코딩하여 만들어볼 수 있습니다.

클로드로 뽀모도로 타이머 만들기
클로드로 뽀모도로 타이머 만들기

 

클로드로 뽀모도로 타이머 만들기
클로드로 뽀모도로 타이머 만들기

 

코드를 수정하여 흑백 타이머를 컬러로 변경하거나, 다양한 기능을 추가할 수도 있습니다.

클로드로 만든 뽀모도로 타이머
클로드로 만든 뽀모도로 타이머

 

 

7. 클로드 아티팩트의 활용 가능성

클로드 아티팩트 기능을 통해 생성형 AI의 가능성은 더욱 확장되었습니다. 클로드는 AI 코딩을 누구나 쉽게 시도할 수 있도록 도와줍니다. 클로드 아티팩트를 활용하여 여러분도 생성형 AI의 세계를 탐험해보세요. 클로드 AI는 무료로 사용할 수 있으며, claude.ai에서 회원가입 후 바로 사용해보실 수 있습니다.

8. 미래의 인공지능과 함께할 준비

디지털 시대에 인공지능 AI를 단순히 수동적으로 사용하는 것에서 벗어나, 주도적으로 활용하는 것이 중요합니다. 클로드 아티팩트를 통해 AI와의 상호작용을 경험하고, 새로운 아이디어를 떠올려 보세요. 인공지능과 함께하는 미래를 준비하는 데 큰 도움이 될 것입니다.

 

참고할 만한 글

1 thought on “클로드 아티팩트(Claude Artifacts) 사용법과 활용 방법”

Comments are closed.