최근 LLM을 이용한 데이터 시각화가 급 부상하는 것 같다. 나도 여러가지 LLM을 사용했을 때, 클로드 3.7에서의 데이터 시각화 결과가 매우 괜찮다고 느껴졌다. LLM을 사용해서 데이터 시각화하기 라는 주제로 많은 유튜브 영상들이 노출되었고 영상을 보다보니 몇몇 댓글에서 데이터 시각화 결과를 어떻게 사용해야 하는지 물어보는 것을 보았다. 아무래도 이제는 개발자나 IT 전문가들이 아니라도 LLM을 사용하는 사람들이 다양해지고 있기 때문에 비전문가들도 이러한 트렌드에 빠르게 다가가고 있다는 것이 느껴진다.

이 포스트에서는 LLM이 만들어낸 데이터 시각화 자료를 어떻게 배포하고 공유해야 하는지에 대해서 정리하였다. 개발자나 전문가가 아니더라도 LLM이 만들어낸 데이터 시각화 결과로 출력되는 HTML을 다양한 방법을 통해서 렌더링(서빙) 해보고 이를 활용하는 방법을 배울 수 있다.

이 포스트에서 제공하는 방법은 모두 6가지로 모두 무료로 사용이 가능하며 공유를 지속하는데 비용이 발생하지 않는다. 이 외에도 다양한 방법이 있으나 대표적으로 시도해 볼 수 있는 간단한 방법으로 정리하였다.

데이터 시각화는 클로드 3.7 뿐만 아니라, ChatGPT, 제미나이 Canvas 기능 등 여러 LLM 챗봇 서비스에서 제공하기 때문에 자신이 사용하는 서비스에서 자료를 생성하도록 한다.

Gemini Canvas

Claude 3.7 Sonnet(React)

위와 같이 React를 사용하는 js 소스로 만들어 주는 경우가 있는데 이 것도 개발자들은 서빙하는데 어려움은 없지만, 비 개발자가 시각화 자료를 배포하거나 공유해서 보기에는 어려울 수 있다. 따라서 html로 만들어 달라고 요청하면 비 개발자 입장에서는 좀 더 다루기가 쉽다. 이 포스트에서도 html로 출력한 데이터 시각화 자료를 기준으로 한다.

Claude 3.7 Sonnet(HTML)

클로드에서는 입력한 데이터에 대해서 시각화를 요청하면 코드와 함께 렌더링 결과를 미리보기로 제공한다. 아래와 같이 데이터 시각화 결과를 먼저 확인한다.

일반적으로 클로드 뿐만 아니라 데이터 시각화에 대한 미리보기 기능은 Gemini도 가능하다. 클로드에서는 미리보기 뿐만 아니라 게시 라는 기능도 제공하여 바로 웹에 데이터 시각화 결과를 공유할 수 있는 기능을 제공한다.

우측 상단의 게시 버튼을 클릭한다.

게시 및 링크 복사 버튼을 클릭하면 데이터 시각화 결과를 모든 사람이 볼 수 있도록 공개한다.

아티팩트 게시됨 메시지를 확인 후 출력된 링크를 복사하여 바로 공유를 할 수 있다.

브라우저에 복사한 링크를 입력하고 접속하면 생성한 데이터 시각화 자료를 즉시 확인할 수 있다.

yourware.so는 클릭 한번으로 AI가 만들어낸 HTML 코드를 웹으로 배포할 수 있도록 도와주는 도구이다. 이 사이트에서 언급하는 [Don't Keep Your Code to Yourself - Share It With the World] 라는 말처럼, AI와 함께 만든 코드를 세상에 공유하자라는 모토로 이 사이트에서는 내가 만들어낸 데이터 시각화 자료를 간단한 URL 주소로 쉽게 공유할 수 있도록 만들어준다.

클로드는 자체 게시 기능을 제공하지만 다른 LLM 서비스를 사용하고 있고 데이터 시각화 결과를 html코드로 출력했지만 게시 기능을 제공하지 않을 경우 yourware.so 를 통해 쉽게 배포가 가능하다.

데이터 시각화 결과로 출력된 HTML 코드를 확인한다.

코드 내용을 스크롤 해서 복하거나, 복사하기 버튼을 클릭하여 전체 코드를 클립보드에 복사한다.

https://yourware.so 에 접속한다.

Paste Code 탭을 클릭한다.

클립보드에 복사한 전체 HTML 코드를 붙여넣는다.

Deploy Code 버튼을 클릭하여 코드를 업로드 한다.

Deployment Successful 메시지를 확인했다면 HTML 코드가 렌더링된 결과를 확인할 수 있다. Share 버튼을 클릭하여 페이지를 공유하거나 Visit Site 버튼을 클릭하여 페이지에 접속한다.

페이지 링크를 통해 업로드한 데이터 시각화 자료를 즉시 확인할 수 있다.

위에서 소개한 두 방법은 모두 웹에 데이터 시각화 결과를 게시하여 링크를 통해 쉽게 공유하기 위해서 사용하는 방법이다. 두 방법 모두 링크를 공유하여 브라우저 통해 확인해야 하기 때문에 아래는 간단하게 HTML 렌더링 결과를 이미지화 하여 활용할 수 있는 방법을 소개한다.

텍스트 파일을 생성한다. 이름은 반드시 index.txt 일 필요는 없다.

텍스트 파일을 메모장 등으로 열어 복사한 HTML 코드를 붙여 넣고 저장한다.

저장한 파일의 확장자를 txt 에서 html로 변경한다. 변경 시 경고 팝업이 뜨면 예를 클릭하여 그대로 진행한다.

기본적으로 Windows 에서 html 파일은 설정된 기본 브라우저를 통해 열리도록 되어있다. 나는 기본 브라우저로 Edge를 사용하기 때문에 아이콘이 Edge 브라우저 아이콘 모양으로 표시된다.

html 파일을 더블클릭하면 바로 기본 브라우저를 통해 렌더링된 데이터 시각화 결과를 확인할 수 있다.

Edge 브라우저를 사용한다면 페이지 화면에서 마우스 우클릭을 하면 나오는 컨텍스트 메뉴에서 스크린샷 메뉴를 확인할 수 있다.

스크린샷 메뉴를 선택하거나, Ctrl + Shift + S 단축키를 눌러 캡쳐 메뉴가 나오면 전체 페이지 캡쳐를 선택한다.

캡쳐된 화면을 확인하고 저장 버튼을 클릭하면 즉시 이미지 파일로 캡쳐 결과를 다운로드 할 수 있다.

이미지 파일 결로를 지정하고 저장한 후 이미지 파일을 열면 데이터 시각화 결과를 이미지로 확인할 수 있다.

이미지는 원하는 사용처에 따라서 다양하게 활용할 수 있다. 예) PPT 자료로 활용

브라우저의 확장기능이나 스크린샷 기능을 사용하지 않아도 개발자 도구를 사용하면 원하는 영역만 저장할 수도 있다.

페이지 화면에서 마우스 우클릭을 하면 나오는 컨텍스트 메뉴에서 검사를 클릭한다.

별도로 개발자 도구라는 창이 한쪽에 보이는데 이 때 어려워 할 것 없이, 코드 영역에 마우스를 가져다 데면 해당 코드가 화면에 어떤 영역인지 페이지에서 쉽게 확인할 수 있다.

페이지에서 보이는 영역을 이미지로 바꾸려면 코드에서 우클릭을 하여 노드 스크린샷 캡쳐 를 선택한다. 선택한 영역에 대한 캡쳐 이미지 파일을 즉시 다운로드 받을 수 있다.

생성된 이미지 파일은 원하는 곳에 활용할 수 있다.

사실 여기부터는 개발자들에게 좀 더 친숙한 느낌의 HTML 서빙 방법이지만 비 개발자도 충분히 따라하여 데이터 시각화 결과를 배포하고 공유할 수 있다.

github는 소스 코드 버전 관리를 위한 깃 저장소 호스팅 서비스로 개발자들이 소스코드를 관리하고 배포하기 위해 사용하는 서비스이기도 하지만 html과 같은 정적 파일을 웹으로 공유하는데도 사용할 수 있다. 이 기능을 쉽게 도와주는 것이 github page이다.

https://github.com 에 접속하고 우측 상단의 + 버튼을 선택하고 New repository 를 클릭한다. 계정이 없다면 무료로 회원가입이 가능하다.

Repository name을 좌측에 보이는 Owner에 해당하는 값과 github.io 를 조합하여 설정한다. 예를 들어 나의 Owner 값은 hunydev 이므로 Repository name은 hunydev.github.io 로 설정한다.

나머지 값은 그대로 두고 Create Repository 버튼을 클릭한다.

Repository 생성이 완료되면 위와 같은 화면이 나온다. creating a new file 이라는 링크를 선택한다.

위와 같이 화면이 나오면 파일명은 index.html 이라고 작성하고 복사한 데이터 시각화 HTML 코드를 붙여넣는다.

Commit changes 버튼을 클릭하고 팝업에서 변경 없이 Commit changes를 클릭한다.

붙여넣은 HTML 코드로 만든 index.html 파일을 확인할 수 있다.

상단에 보이는 Settings 탭(메뉴)을 선택한다.

좌측 메뉴에서 Pages를 선택한다. 위와 같이 보이면 된다.

Repository name으로 입력했던 값: hunydev.github.io 주소를 브라우저 주소창에 입력한 후 접속하면 데이터 시각화 화면을 확인할 수 있다.

github page를 사용하면 HTML 코드 하나가 아니라 여러 HTML 파일을 배포하고 공유할 수 있다. vercel, netlify 등 서비스를 이용하면 github를 연동하여 간단한 백엔드 로직도 구현할 수 있다.

github page는 공유된 저장소를 사용하기 때문에 정적 파일들을 배포하고 공유하는데 적합하지만 vercel, netlify를 사용하지 않으면 백엔드를 직접 구현하는 기능은 지원하지 않는다. 이는 공개된 페이지를 공유할 때는 전혀 문제가 없으나 보안적으로 인가된 사용자에게만 페이지를 공유하고 싶을 때는 cloudflare worker를 사용하여 Basic auth 기능으로 간단하게 로그인 기능을 연동할 수 있다.

참고: cloudflare worker page를 쓰면 github page 처럼 쉽게 정적 파일을 배포하고 공유할 수 있다.

cloudflare worker는 회원가입 즉시 사용이 가능하며 일정 사용량 만큼은 무료이므로 규모가 작거나 개발/시험 용도로 페이지를 구성하기에 적합하다.

https://www.cloudflare.com 에 접속한다.

로그인 또는 회원가입을 한다. Google 계정이 있다면 쉽게 회원가입하고 로그인할 수 있다.

로그인이 완료되면 계정 홈을 확인한다.

좌측 메뉴에서 Worker & Pages 하위의 Worker & Pages 메뉴를 클릭한다.

Worker & Pages 화면에서 Workers 탭을 선택한다.

Hello world 버튼을 선택하면 위와 같이 기본 worker.js 구성을 확인할 수 있다. Worker 이름을 설정한다. 나는 hunydev라고 설정하였고 이 값은 workers.dev 도메인의 subdomain 값이 된다.

Deploy버튼을 클릭한다.

Worker가 생성되었다면 Edit code버튼을 클릭한다.

코드 편집 화면으로 이동한 것을 확인한다. 좌측에 Explorer 를 클릭하면 파일 목록을 확인할 수 있다.

파일 목록에서 새 파일(New File) 버튼을 클릭하여 index.html 파일을 만든다.

복사했던 데이터 시각화 HTML 코드를 그대로 붙여넣기 하고 저장한다.

다시 worker.js 파일로 이동한 후 아래의 코드를 복사하여 붙여넣는다. 아래 코드를 그대로 사용하면 되고 USERNAME, PASSWORD 의 값을 로그인 아이디/비밀번호라고 생각하고 myUser/myPass 값을 원하는 값으로 변경하고 저장한다.

// index.html을 import (Modules 방식 시 Bundler가 *.html 파일을 처리해야 함)
import indexHTML from './index.html';

// Basic Auth용 사용자명/비밀번호
const USERNAME = "myUser";
const PASSWORD = "myPass";

export default {
  async fetch(request, env, ctx) {
    // Basic Auth 검사
    const authHeader = request.headers.get("Authorization");
    if (!authHeader || !verifyBasicAuth(authHeader)) {
      return new Response("Unauthorized", {
        status: 401,
        headers: {
          "WWW-Authenticate": 'Basic realm="Restricted Area"',
        },
      });
    }

    // 인증 성공 시 index.html 반환
    return new Response(indexHTML, {
      headers: {
        "Content-Type": "text/html; charset=utf-8",
      },
    });
  },
};

/**
 * Basic Auth 검증 함수
 */
function verifyBasicAuth(authHeader) {
  // Authorization: Basic base64String 형태
  const [type, encoded] = authHeader.split(" ");
  if (type !== "Basic" || !encoded) return false;

  const decoded = atob(encoded); // base64 디코딩 -> "username:password"
  const [user, pass] = decoded.split(":");
  return user === USERNAME && pass === PASSWORD;
}

Deploy 버튼을 클릭하면 배포가 완료된다.

worker 접근 주소를 복사하여 브라우저 주소창에 입력 후 접속한다. https 주소 요청 시 SSL 인증서 에러가 발생한다면 아직 인증서가 적용된 사이트 배포가 준비 중 이므로 주소를 https → http 로 변경한 후 접속한다. 접속하면 화면과 같이 사용자 이름 , 암호 입력 창이 나오고 설정한 USERNAME/PASSWORD 값을 입력하고 로그인 한다.

데이터 시각화 결과 페이지를 확인할 수 있다. http(좌), https(우) 모두 가능하다. SSL 인증서 적용이 정상적으로 완료되었다면 http 주소로 요청해도 자동으로 https로 리다이렉트 한다.

web server로 데이터 시각화 결과를 공유한다는 것은 이미 개발자일 것이다. web server를 쓰면 직접 내 컴퓨터를 서버로 만들어 내 컴퓨터 IP로 들어오는 요청에 HTML 파일을 응답으로 제공해줄 수 있다. 개발자가 아닌 사람이 web server가 필요한 상황이라면 외부로 HTML 파일을 공유하지 않으면서 내부망에서 접근이 가능하도록 공유해주는 상황 정도로 보면 될 것 같다.

여기서는 아주 간단하게 Windows PC에서 web server를 설치하고 html 파일을 공유 하는 방법을 소개한다. web server는 매우 다양하고 이를 다루는 것 만으로 이미 개발자 또는 서버 엔지니어라고 생각하면 된다.

html 파일에서 이미지 추출 를 참고하여 html 을 만들고, Windows explorer 주소창에 cmd를 입력하고 엔터를 누른다.

터미널이 실행되었다면 winget install caddy 라고 입력한 후 엔터 누른다.

caddy라는 web server 프로그램이 설치된다.

설치가 완료되었다.

caddy file-server --root . --listen :80 이라고 입력하고 엔터를 누른다. caddy web server가 시작된다.

브라우저를 실행하고 localhost 라고 입력하고 엔터를 누르면 데이터 시각화 페이지를 확인할 수 있다.

⚠️¹⁾ github 단독으로 불가, Vercel, Netlify 등과 같은 Jamstack Platform(Serverless PaaS) 서비스를 사용하면 간단한 백엔드 로직 구현 가능

⚠️²⁾ 관련 지식이 필요한 영역으로 설정하기에 따라 공개가 될 수도 있고 비공개가 될 수 있음