[유디트] 클로드 코드로 내 인스타툰 편집기 만들기

유디툰 이렇게 만들었어요

이 카드, GPT가 그리고 클로드 코드가 만들어줬어요.

제가 한 일은 말로 "그림 그려줘", "편집해줘" 시킨 것밖에 없어요.

프로크리에이트도, 클립스튜디오도 안 써요. 아이패드도 펜도 필요 없어요. 그림 못 그려도 괜찮아요.

나만의 툰 편집기를 하나 만들어서, 거기서 인스타툰을 만들어봐요.

편집기는 20분이면 만들어요. 코딩은 몰라도 돼요. (저도 몰라요) 프롬프트 하나 복사해서 붙여넣으면 끝이에요.

수많은 시행착오 끝에 완성된 유디툰 편집기의 기본 뼈대와 프롬프트를 그대로 공유드려요.

준비

1. 클로드 코드 가입

1. claude.ai 에 가입하고 유료 구독을 해요. (무료로는 못 써요)
2. 컴퓨터에 작업할 폴더를 하나 만들어요. (예: 내툰)
3. 클로드 데스크톱 앱에서 「Code」를 고르거나, 터미널 창에 claude 를 쳐요.
4. 모르겠으면 클로드 채팅창에 그대로 물어보세요 — "클로드 코드 사용법 알려줘"

2. 캐릭터 준비 — 이건 각자 알아서

3. 글씨체 다운받기

1. 원하는 글씨체를 미리 다운받아요. (눈누 noonnu.cc 에 무료 상업용 한글 폰트가 많아요)
2. 클로드가 어떤 글씨체를 쓸지 물어보면 그 이름을 대답하면 돼요.

편집기 만들기

아래 편집기 제작 프롬프트를 복사해서 클로드 코드에 붙여넣으세요.

편집기 프롬프트에는 편집기 제작 방법과 주의사항이 들어 있어요.

딱 20분만 기다리면 편집기가 완성돼요. (편집기.html — 더블클릭하면 열려요)

이런 기능이 들어 있어요

• 그림 넣기 — 불러와서 끌어다 놓고, 크기 조절하고, 좌우 뒤집기
• 말풍선 — 둥근 · 구름 · 뾰족 세 가지. 글자 길이에 맞춰 알아서 커져요
• 글자 — 제목과 대사. 크기 · 색 · 정렬을 고칠 수 있어요
• PNG 내보내기 — 인스타 규격(1080×1350)으로 바로 저장
• 저장 · 불러오기 — 작업하던 걸 저장했다가 나중에 이어서

더 필요한 기능은 쓰면서 키워나가요 (마지막 「키우기」 참고).

안 되는 게 있으면 클로드 코드한테 얘기하면 고쳐줘요.

말로 편집하기

편집기가 만들어지고, 폴더에 누끼 딴 그림까지 준비됐다면

1. 만들고 싶은 장면을 아래 프롬프트 맨 하단에 적어서, 한 번에 클로드 코드한테 붙여넣으세요
2. 클로드가 좌표를 짜서 내주면, 그걸 복사해서 편집기의 「배치 붙여넣기」 에 넣어요

맨 아래에 만들 장면을 이렇게 적으면 돼요.

장면 : 표지. 위에 제목 크게 「통장 합친 거 진짜 후회돼」.
아래 왼쪽에 강아지, 오른쪽에 고양이. 강아지 위에 말풍선 「하아…」

말로 시키면 이렇게 조합해줘요

자세히 적을수록 그대로 나와요

장면 예시가 자세할수록 더 예쁘게 나와요.

대충 적으면 — 나오긴 하는데 손볼 게 많아요.

장면 : 표지. 강아지 왼쪽 아래, 고양이 오른쪽. 제목은 위에.

이만큼 적으면

장면 : 표지, 배경은 아이보리(#f5f1e8)
위쪽 35%는 비우고, 제목은 왼쪽 위에 「통장 합친 거 / 진짜 후회돼」 두 줄, 크기 88, 검정, 왼쪽 정렬
강아지는 왼쪽 아래에 폭 480, 발끝이 화면 아래로 조금 잘리게
고양이는 오른쪽에 폭 400, 강아지를 보도록 좌우 뒤집기
강아지 머리 위에 둥근 말풍선 폭 380, 꼬리는 왼쪽아래, 「하아…」

어디에 · 얼마나 크게 · 어느 쪽을 보게 · 뭐라고 — 까지 적으면 거의 그대로 짜줘요.

처음에는 결과물이 마음에 안 들 수 있어요.

직접 배치를 고쳐서 학습시키거나, 장면을 더 자세하게 알려주면 점점 예쁘게 그려줄 거예요.

• 직접 배치한 장면을 「저장」한 다음 그 파일을 클로드한테 보여주세요. "앞으로 이런 느낌으로 짜줘"
• 고칠 때는 처음부터 다시 시키지 말고 바뀔 것만 말하세요. "제목을 60 더 위로, 고양이는 폭 440으로"

알아두면 좋아요

• 한 번에 한 장이에요. 열 장짜리면 장면 설명만 바꿔서 한 장씩 열 번 (여러 장은 ④ 키우기에서)
• 편집기에 없는 건 못 해요 — 그라데이션·꾸밈 글씨 같은 건 먼저 편집기에 그 기능을 붙이면 돼요
• 표지 한 장 정도는 손으로 끌어다 놓는 게 빠를 때도 있어요. 둘 다 되니까 그때그때 편한 쪽으로요

내 손에 맞게 키우기

편집기는 가장 기본 기능만 담았어요. 더 필요한 기능은 만들면서 붙여가세요.

써보고 → 불편한 데를 말하고 → 고치고. 이걸 반복하면 돼요.

• "말풍선 디자인을 더 다양하게 만들고 싶어"
• "자주 쓰는 그림을 목록에 저장해두고 싶어"
• "글자에 흰 테두리 넣어줘. 배경이 어두우면 안 보여"

여러 장을 한 번에 하고 싶으면

지금은 한 장씩이에요. 열 장짜리 회차면 한 장씩 열 번 붙여넣어야 해요.

익숙해지면 이렇게 시켜서 여러 장을 한 번에 다루게 키울 수 있어요.

카드를 여러 장 담는 형식으로 바꿔줘. {"카드": [ {…}, {…} ]} 처럼.
위에 1 · 2 · 3 탭을 만들어서 오갈 수 있게 하고, 「전부 PNG로 내보내기」 버튼도 만들어줘.

제가 쓰는 편집기도 이 뼈대에서 시작해 수십 번 고쳐서 지금이 됐어요.

고칠 때 딱 세 가지만 지키세요

1. 고치기 전에 파일을 복사해두세요 — 편집기.html → 편집기_되돌리기용.html
2. 한 번에 하나만 시키세요. 세 개를 한꺼번에 시키면 뭐가 깨졌는지 못 찾아요
3. "내가 말한 것만 고쳐" 를 붙이세요. 안 그러면 멀쩡하던 게 바뀌어요