이원영 기자
챗 AI인 클로드(Claude)를 개발한 앤트로픽(Anthropic)은 지난 6월 AI 모델인 클로드 3.5 소넷을 발표했다. 이 모델에는 아티팩트(Artifacts)라는 기능이 포함되어 있으며 이는 코드, 텍스트 문서, 웹사이트 디자인 등과 같은 콘텐츠를 생성할 때 답변 내에서가 아니라 별도 전용 창에 콘텐츠를 표시하는 기능이다. 이 아티팩트 기능을 사용해 만든 애플리케이션 예시가 눈길을 끈다.
클로드가 생성한 코드, 문서, 이미지를 프롬프트와는 별도 전용 영역에서 조작할 수 있는 기능이 바로 아티팩트다. 이런 아티팩트를 사용해 시스템 엔지니어인 사이먼 윌리슨(Simon Willison)은 단 1주일 만에 다양한 애플리케이션을 만들었다.
첫 번째는 지나 리더(Jina Reader) API를 이용한 웹페이지 텍스트 복사 기능. 일반 브라우저에서는 웹페이지 전체 텍스트를 복사하거나 붙여넣는 작업이 복잡할 수 있다. 이를 해결하기 위해 윌리슨은 URL이나 웹 검색에서 대규모 언어 모델에 적합한 입력을 얻을 수 있는 지나 리더 API를 호출해 간단하게 클립보드에 복사 버튼만 누르면 마크다운(Markdown)을 생성하고 이를 대규모 언어 모델에 붙여넣을 수 있는 애플리케이션을 만들었다.
2번째는 웹어셈블리(WebAssembly)를 이용한 SQLite 데모. 공개 도메인 관계형 데이터베이스 관리 시스템인 SQLite의 웹어셈블리 빌드를 사용해 대화형 데모에 등장하는 용어를 요약하는 애플리케이션을 만들었다.
3번째는 URL 추출기. URL을 입력하면 해당 웹페이지 리치 텍스트 전체를 복사하고 HTML 파서를 이용해 해당 페이지에 포함된 모든 링크를 추출할 수 있는 애플리케이션이다.
4번째는 클립보드 뷰어. 브라우저 클립보드 API를 이용해 HTML 태그가 포함된 텍스트나 일반 텍스트를 보여주는 애플리케이션이다. 윌리슨은 이를 브라우저에서 간단하게 정보를 확인할 수 있는 빠른 디버깅 도구라고 설명했다.
5번째는 Pyodide로 REPL 환경 실행. 아티팩트를 사용해 웹어셈블리로 컴파일된 파이썬인 Pyodide에서 사용자와 인터프리터가 대화형으로 코드 조각을 실행할 수 있는 REPL을 구현한 데모를 만들었다.
6번째는 이미지 편집 시뮬레이터. 이 애플리케이션은 자바스크립트를 이용해 촬영한 이미지 노출, 대비, 채도를 조정할 수 있는 기능을 제공한다. 윌리슨은 이 데모에 대해 버그가 많아 그다지 인상적이지 않았다고 말했다.
7번째는 대규모 언어 모델 사용 요금 시뮬레이터. 대규모 언어 모델은 모델마다 1토큰당 사용료가 다르다. 이 애플리케이션은 사용자가 사용할 토큰 수와 GPT-4o와 같은 모델을 선택하면 입력과 출력에 필요한 요금을 계산해 보여준다.
8번째는 YAML을 JSON으로 변환하는 컨버터. YAML 형식 코드를 JSON 형식으로 변환하는 애플리케이션이다. 윌리슨은 YAML 구문 특정 부분이 어떻게 작동하는지 다시 확인하고 싶었다고 말했다.
9번째는 오디오를 녹음하고 AI 입력용 프롬프트로 변환. 오픈AI가 지난 10월 1일 출시한 리얼타임(Realtime) API는 오디오 입출력을 실시간 스트리밍할 수 있어 애플리케이션 내에서 저지연 멀티모달 경험을 구축할 수 있다. 하지만 웹소켓(WebSocket) 기반이라 코드가 복잡하다. 윌리슨은 이에 반해 클로드 3.5 소넷을 사용해 녹음한 오디오를 챗 컴플렉션(Chat Completion) API에 입력할 수 있는 프롬프트로 변환하는 애플리케이션을 만들었다.
10번째는 QR 코드 디코더. 저장된 QR 코드를 드래그 앤 드롭하면 URL로 변환해 주는 애플리케이션이다. 윌리슨은 회의에서 QR 코드가 포함된 슬라이드가 공유됐을 때 스마트폰이 없어 URL로 변환할 방법이 필요해 이 애플리케이션을 개발했다고 한다.
11번째는 이미지 변환기 및 페이지 다운로더. 사진을 페이지에 로드해 base64 URL 형식으로 삽입하고 HTML로 저장해 갤러리 형태 페이지로 만드는 아이디어를 참고해 이를 스마트폰에서도 사용할 수 있도록 HTML 다운로드 버튼을 추가한 애플리케이션이다.
12번째는 텍스트 특수 문자를 HTML 엔티티로 변환하는 애플리케이션. 입력한 텍스트에 포함된 특수 문자를 HTML 엔티티로 변환해주는 애플리케이션이다. 예를 들어 “hello there” and suchlike라는 문장을 `"hello there" and suchlike`와 같은 형식으로 변환해 클립보드에 복사할 수 있다.
13번째는 아이콘 정렬을 최적화하는 애플리케이션. 버튼 여러 개가 배치된 상황에서 1단, 2단, 3단에는 버튼이 4개씩 있지만 4단에는 1개밖에 없는 경우가 있다. 이 애플리케이션은 “Enable text-wrap: balance”를 클릭하면 복잡하게 배치된 버튼을 깔끔하게 정렬해준다.
14번째는 ARES 음성 알파벳 변환기. 무선 통신에서는 자신의 발언을 정확하게 전달하기 위해 A=Alpha, B=Bravo와 같은 음성 코드로 변환하는 게 필요하다. 이 애플리케이션은 단어를 입력하고 Convert 버튼을 클릭하면 음성 코드로 변환된 결과를 제공한다.
윌리슨은 이런 애플리케이션에 대해 이들 도구 대부분은 제작하는 데 5분도 걸리지 않았다면서 가장 시간이 많이 걸린 오디오 녹음 및 프롬프트 변환 도구도 21분 정도 걸렸다면서 이런 간편함 덕분에 아티팩트를 사용하지 않는 사람도 이 기능이 제 마음에 드는 이유를 이해할 수 있을 것이라고 말했다. 관련 내용은 이곳에서 확인할 수 있다.
이석원 기자
정용환 기자
