Claude Code Artifacts 공식 발표 이미지
이미지: claude.com/blog

라이브러리 메이저 버전 업그레이드를 모듈 단위로 쪼개서 팀원 세 명이 나눠 맡은 적이 있습니다. 누가 어느 모듈을 끝냈는지 매번 슬랙으로 물어보기도 귀찮고, 마크다운 체크리스트를 공유 문서에 적어두면 서로 체크 표시를 지웠다 다시 켰다 하면서 충돌이 났습니다. Claude Code 세션에 작업 현황을 정리해달라고 하다가, 그냥 그 세션한테 공유 가능한 체크리스트 페이지 자체를 만들어달라고 시켜봤습니다.

어떤 작업이었나

모듈별로 "작업 전/진행 중/완료" 상태와 담당자를 표시하는 체크리스트가 필요했습니다. 조건은 두 가지였습니다. 링크 하나만 돌리면 팀원 전부가 열어볼 수 있어야 하고, 누가 체크박스를 누르면 그 변화가 나한테도, 다른 팀원한테도 바로 보여야 한다는 것이었습니다. 로그인이나 별도 배포 없이 되는 방법을 찾고 있었습니다.

AI를 어떻게 활용했나

세션한테 이렇게 요청했습니다.

모듈 업그레이드 체크리스트 페이지를 하나 만들어줘. 모듈명, 담당자, 상태(전/진행중/완료)를 표로 보여주고
상태는 체크박스나 드롭다운으로 누구나 바꿀 수 있게 해줘. 링크로 공유할 거야.

Claude Code는 이 요청을 받고 체크리스트 표 형태의 HTML 페이지를 작성해서 바로 퍼블리시했습니다. 결과로 받은 건 claude.ai/artifact/... 형태의 링크 하나였고, 그걸 그대로 팀 슬랙방에 올렸습니다.

처음에 헷갈렸던 부분

처음 받은 페이지는 체크박스 상태를 브라우저 localStorage에 저장하는 방식이었습니다. 제가 열어서 몇 개를 체크했는데, 다른 팀원이 같은 링크를 열어보니 전부 체크 안 된 상태로 보였습니다. localStorage는 각자의 브라우저에만 남는 값이라 같은 페이지를 봐도 사람마다 따로 저장된다는 걸 그제야 깨달았습니다.

세션한테 "체크 상태가 나한테만 보이고 다른 사람한테는 안 보여"라고 다시 말했더니, 페이지를 고쳐서 체크 상태를 Artifact 자체에 내장된 공유 데이터 저장소에 쓰도록 바꿨습니다. 이후로는 누가 체크박스를 누르든 그 값이 같은 곳에 저장되고, 페이지를 새로고침하면 팀원 전부가 같은 상태를 봅니다. 저도 세션 쪽에서 ArtifactData 도구로 그 안에 쌓인 행(모듈별 상태 row)을 직접 조회하거나 고칠 수 있었는데, 페이지를 다시 퍼블리시하지 않고도 특정 모듈 상태만 고치는 게 가능했습니다.

결과와 얻은 팁

  • 체크리스트나 사인업 시트처럼 "여러 사람이 같은 상태를 보고 바꿔야 하는" 페이지에는 localStorage를 쓰면 안 됩니다. 보는 사람마다 분리된 저장소라 공유가 전혀 안 됩니다. 이런 공유 상태는 Artifact가 지원하는 공유 데이터 저장소 쪽으로 넘겨야 합니다.
  • 링크를 다시 보낼 필요가 없다는 점이 생각보다 편했습니다. 같은 URL에 다시 퍼블리시하면 갱신된 페이지가 그 자리에 그대로 올라가서, 슬랙에 올린 링크를 수정할 필요가 없었습니다.
  • 페이지에 기록된 데이터를 세션이 직접 조회·수정할 수 있다는 점도 유용했습니다. "3번 모듈 담당자를 바꿔줘"처럼 사람 말로 요청하면, 페이지를 통째로 다시 만들지 않고 그 안의 데이터만 고쳐서 반영했습니다.
  • 다만 이 페이지는 기본적으로 저만 볼 수 있는 비공개 상태로 만들어지고, 팀원이 보려면 공유 권한을 따로 열어줘야 했습니다. 링크를 보내기 전에 권한 범위를 한 번 확인하는 습관이 필요합니다.