클로드 코드로 내 서비스 흐름을 깔끔한 도표로 뽑는 법

2단계: 첫 도표 부탁하기

그래서 이제 도표를 부탁할 차례예요. 아래 문장을 통째로 복사해 클로드 코드에 붙여 넣으세요. 바꿀 곳은 없어요.

diagram-design 스킬로 내 서비스 흐름을 깔끔한 도표 한 장으로 그려 줘. 먼저 나에게 서비스 흐름을 물어봐 줘. 손님이 처음 나를 알게 되는 순간부터 돈을 내는 순간까지, 단계를 하나씩 짧게 답할게. 내 답을 받으면 단계마다 칸 하나로 그려 줘. 도표 안 글자는 전부 한국어로 써 줘. 결과는 HTML과 SVG로 줘. 다 만들면 파일 이름과 저장된 위치를 알려 줘.

클로드가 물으면 단계마다 한 줄씩 답하세요. 예를 들면 “릴스를 본다”, “댓글을 남긴다”, “상담을 신청한다”, “결제한다” 같은 식이에요.

답을 보내고 1분쯤 기다리면 파일 두 개가 생겨요. 이름이 .html로 끝나는 파일과 .svg로 끝나는 파일이에요. HTML 파일을 두 번 누르면 인터넷 창에서 도표가 열려요.

3단계: 쓸 곳에 맞게 받기

도표 형식은 쓸 곳에 따라 골라요.

HTML과 SVG는 2단계에서 이미 받았어요. 발표 자료에 넣을 PNG 그림이 필요하면 준비가 한 번 더 필요해요. 터미널에 아래 줄을 붙여 넣고 엔터를 누르세요. 터미널은 글자로 컴퓨터에 일을 시키는 창이에요. 이 설치는 처음 한 번만 하면 돼요.

pip install playwright && playwright install chromium

설치가 끝나면 클로드 코드에 아래 문장을 붙여 넣으세요.

방금 만든 도표를 PNG로도 저장해 줘.

이 설치를 건너뛰면 PNG만 안 나와요. HTML과 SVG는 그대로 받을 수 있어요.

알아 둘 점이 하나 있어요. 도표의 한글 글꼴은 인터넷에서 불러와요. 인터넷이 끊긴 곳에서 열면 글꼴이 다르게 보일 수 있어요.

4단계: 자동 업데이트 켜기

이 도구는 처음엔 자동 업데이트가 꺼져 있어요. 클로드 코드는 다른 사람이 만든 가게의 도구를 기본으로 꺼 두거든요. 한 번만 켜 두면 새 기능이 알아서 들어와요.

1. 클로드 코드에 아래 한 줄을 붙여 넣고 엔터를 누르세요.

/plugin

2. 화면 위 탭 줄에서 Tab 키를 두 번 눌러 Marketplaces 로 가요.
3. diagram-design 을 고르고 엔터를 누르세요.
4. Enable auto-update 를 고르세요.

업데이트가 들어온 뒤 클로드 코드가 /reload-plugins를 치라고 하면 그대로 치세요. 다음에 클로드 코드를 새로 열어도 돼요.

다음 한 걸음: 내 브랜드 색 입히기

기본 도표는 밝은 회색 바탕에 짙은 남색 글자, 주황 강조색이에요. 내 사이트 색과 글꼴로 바꾸고 싶다면 도구를 만든 사람의 브랜드 맞추기 안내를 보세요. 클로드 코드에 내 사이트 주소를 주면 거기서 색과 글꼴을 뽑아 다음 도표부터 입혀 줘요.