Claude Code 활용 Redbubble 굿즈 디자인 에이전트 만들기

마켓플레이스 등록 정보를 자동으로 정리하는 디자인 에이전트

준비물은 터미널 AI 도구 하나면 충분합니다

이번에는 Claude Code를 활용해 단일 파일 형태의 웹앱을 빌드하는 과정을 거칩니다. 복잡한 서버 인프라나 별도 데이터베이스를 연결하지 않으므로 전체 구조를 간결하게 유지할 수 있죠.

로컬 환경의 파일들을 편집하고 터미널 명령어를 다루는 데 유용한 인터페이스를 제공하는 도구라고 볼 수 있습니다. 필요한 요소를 명확히 요청하면 빠르게 코드를 생성하고 빌드 단계를 지원하므로 작업 흐름을 끊김 없이 이어가게 돕는 것이죠.

예상치 못한 현상 대처법

CORS 문제로 인한 통신 제한

브라우저 화면에서 결과가 나타나지 않고 멈춰 있다면 개발자 도구의 콘솔 창을 통해 원인을 찾아야 합니다. Access-Control-Allow-Origin 관련 메시지가 보인다면 통신 제한에 걸렸음을 뜻하죠.

이는 API 제공 서버 측에서 브라우저의 직접 호출을 거부하기에 나타나는 형태입니다. 해결을 위해서는 테스트 용도의 크롬 확장 기능을 활성화하거나 로컬 통신을 돕는 중계 서버를 간단히 활용하는 방안이 유용하죠.

지정하지 않은 언어로 태그가 출력되는 현상

출력된 태그 영역에 영어 대신 한글이 섞여 나오거나 어울리지 않는 수식어가 많이 포함되는 경우가 생기기도 하는 현상입니다. 이러한 문제는 프롬프트 내에 상세한 제약 조건이 누락되었을 때 자주 일어나곤 하죠.

이럴 때는 API 호출 코드의 시스템 메시지 설정에 영어 소문자 중심의 단어 15개를 작성하라는 세부 요청을 다시 명확히 기록해 주는 것이 중요합니다. 기준을 세세하게 정할수록 한결 일관성 있는 상품 정보를 얻게 됩니다.

화면 크기 변화에 따른 레이아웃 뒤틀림

창 크기를 조절할 때 버튼이나 텍스트 박스가 겹쳐서 가려지는 등 시각적인 문제가 관찰되곤 합니다. 이는 대개 CSS 스타일 속성에서 영역 가로폭을 고정 수치로 지정했을 때 발생하죠.

CSS 코드에서 결과 표현 클래스의 가로 폭을 반응형으로 설정하고 여백 값을 유연하게 조율할 필요가 있습니다. 이렇게 스타일을 보완하면 디바이스 크기가 달라져도 화면 요소들이 적절히 배치되는 장점이 있죠.

워크플로우 자동화의 의의

지금까지 정리한 단계를 거쳐 굿즈 아이디어 구상부터 최종 정보 추출까지 필요한 일련의 흐름을 단시간에 조율해 보았습니다. 이 흐름을 사용하면 단순한 텍스트 작업 단계를 획기적으로 줄여 불필요한 공수를 방지할 수 있죠.

이러한 에이전트 구조는 필요한 기능들을 지속적으로 덧붙여 발전시키기에 무척 용이한 구조입니다. 단순한 텍스트 분석에 머무르지 않고 향후 다른 생성 인공지능과도 결합하여 작업을 한 단계 더 자동화하는 훌륭한 초석이 됩니다.