STEP 06. AX 퍼블리싱 & 협업 — Claude Code와 Claude.ai, 언제 뭘 쓸 것인가

 

이전 글에서 Artifacts의 역할은 최종 산출물이 아니라 검증 도구라고 했다.

검증이 끝나면 실제 서비스로 옮기는 단계가 온다. 퍼블리싱이다.

 

AI와 퍼블리싱을 협업하는 방법은 크게 두 가지다.

Claude.ai 대화창에서 코드를 주고받는 방식과,

Claude Code처럼 터미널에서 에이전트가 직접 코드를 쓰고 파일을 수정하는 방식.

찐망고 사주는 전자로 만들었다. 코드를 받아서, 직접 확인하고, 수정하고, 붙여넣는 방식으로 작업했다.

한달이 채 안걸리고 런칭한 서비스가 이 방식으로 나왔다.

 

퍼블리싱과 JavaScript 수준에서는 대화로 충분했다.

코드를 받으면 읽을 수 있고, 어디가 틀렸는지 판단할 수 있고, CSS 한 줄 바꿔야 할 때 직접 바꿀 수 있다.

AI가 준 코드를 통째로 쓰는 게 아니라, 필요한 부분만 뽑아서 붙이는 방식이다.

이게 가능한 건 퍼블리싱 경력이 있기 때문이다.

Claude Code는 다르다. 터미널에서 에이전트가 파일을 직접 만들고, 수정하고, 실행까지 한다.

프로젝트 전체 구조를 읽고, 여러 파일을 동시에 건드리고, 빌드하고 배포까지 이어갈 수 있다.

대규모 프로젝트나 백엔드 로직이 복잡한 경우에는 이 방식이 훨씬 빠르다.

직접 써봤는데 확실히 강력하다. 대화창에서 코드를 복사 붙여넣기 하는 것과,

에이전트가 프로젝트 폴더를 직접 건드리는 건 작업 속도가 완전히 다르다.

하지만 이건 코드를 읽고 판단할 수 있는 사람한테 해당하는 이야기다.

 

수업에서 학생들한테 Claude Code를 쓰게 하지 않았다.

이유는 단순하다. 에이전트가 파일을 직접 수정하는데, 뭘 바꿨는지 학생이 판단할 수 없다.

코드를 읽을 수 없는 사람이 에이전트한테 프로젝트를 맡기면, 잘 되면 마법이고 안 되면 원인을 모른다.

대화 방식은 다르다. AI가 코드를 주면 학생이 직접 읽어보고, 이해한 만큼 가져다 쓴다.

복사 붙여넣기를 하더라도 "이 코드가 뭘 하는 건지"를 한 번은 보게 된다.

학습이 끊기지 않는다.

그리고 대화 방식만으로 부족한 것도 아니다.

물론 큰차이는 속도일뿐 ㅎㅎ

 

Claude Code는 코드를 읽을 수 있는 사람한테는 생산성이 압도적으로 올라가는 도구다.

하지만 코드를 읽을 수 없는 단계에서 쓰면 학습이 아니라 의존이 된다.

도구를 쓸 줄 아는 것과 언제 쓸지 판단하는 것은 다른 능력이다.

그래서 이건 금지가 아니라 순서다.

Claude Code를 쓰게 되는 시점은 정해져 있다.

자기 손으로 HTML 구조를 잡고 CSS를 쌓을 수 있고,
에이전트가 바꾼 파일에서 뭐가 달라졌는지 스스로 읽어낼 수 있는 단계.
거기까지 가면 에이전트는 의존이 아니라 생산성이 된다.

 

수업에서는 이런 흐름으로 진행했다.

Step 05에서 Artifacts로 실동작 프로토타입을 만들고, 이걸 최종 산출물이 아니라 설계 재료로 쓴다.
프로토타입에서 검증된 구조와 흐름을 피그마로 옮겨서 디자인을 다시 잡는다.
돌아가는 걸 눈으로 본 다음에 설계하는 거라, 백지에서 그리는 것보다 판단이 빨라진다.
그리고 퍼블리싱은 그 디자인을 보고 직접 하드코딩한다.
AI가 만든 코드를 가져다 쓰는 게 아니라, 자기 손으로 HTML 구조를 잡고 CSS를 쌓는다.
구조를 왜 이렇게 나누는지, CSS가 왜 외부 파일이어야 하는지,

JavaScript가 어디에 위치해야 하는지를
직접 짜면서 몸으로 익힌다.
막히는 지점에서 AI  도움을 받는다. "이 레이아웃이 왜 깨지는지 모르겠다",
"모바일에서 이 부분이 밀린다" 같은 걸 물어보고, 돌아온 코드를 직접 확인한 뒤에 필요한 부분만 가져온다.
AI가 코드를 짜주는 게 아니라, 학생이 짜다가 막힌 자리를 AI가 뚫어주는 구조다.

 

찐망고 사주는 Next.js + Vercel로 배포했다.

Vercel은 GitHub 레포지토리에 push하면 자동으로 배포되는 구조라서, 코드가 완성되면 배포까지는 금방이다.

도메인 연결, 환경변수 설정, Supabase 연동까지 전부 대화로 작업했다.

수업에서는 GitHub Pages로 정적 사이트를 배포한다

배포를 해봐야 내가 만든 게 인터넷에 올라간다는 경험이 생기고, 그 경험이 포트폴리오가 된다.

기획서를 쓸 때 정책서가 빠졌던 것처럼, 배포 단계에서도 빠지기 쉬운 게 있다.

개인정보처리방침, 이용약관, 카카오 개발자 콘솔 설정 같은 것들이다.

찐망고 사주에서는 개인정보처리방침을 DB에 만세력 데이터가 저장되는 시점에서 미리 만들었다.

코드만 올리는 게 퍼블리싱이 아니라, 서비스로 나가기 위한 조건을 갖추는 것까지가 퍼블리싱이다.

 

Claude.ai 대화는 코드를 보고 판단할 수 있는 사람한테 충분하고, 학습 과정에서도 이해를 끊지 않는 방식이다.

Claude Code는 코드를 읽을 수 있는 사람한테 생산성을 올려주는 도구다.

어떤 도구를 쓰느냐보다 내가 지금 어떤 단계에 있느냐가 먼저다.

Step 01에서부터 반복하는 이야기지만, AI한테 뭘 맡기고 뭘 맡기지 않을 것인가.

이 판단은 퍼블리싱 단계에서도 똑같이 적용된다.

 

 

찐망고 사주풀이 | 달콤한 운명 리포트

 

배포가 끝나면 서비스가 시작이다.

다음 글에서는 런칭 후 1주 단위로 스프린트를 돌리며 서비스를 개선하는 과정을 다룰 예정

 

이 시리즈는 실제 운영 중인 서비스 찐망고 사주를 사례로 AI 서비스 기획부터 배포까지를 다루는 강의 노트입니다.

📌출강 및 커리큘럼 문의: spacejh72@gmail.com