[#001] Claude Artifacts로 중고거래 사기 감별기 만들고 GPT Canvas로 마감하기

이번에 만들 것

오늘은 중고거래 채팅 로그를 붙여넣으면 사기 신호, 위험도, 바로 보낼 답장 초안까지 뽑아주는 작은 웹앱을 만듭니다. 첫 편이라 설치 없이 브라우저에서 끝내고, Claude Artifacts로 결과물을 먼저 만든 뒤 GPT Canvas로 마감을 다듬어보겠습니다. 이 시리즈는 코딩 문법보다 AI에게 일을 맡기는 순서를 몸에 익히는 수업으로 갈 거예요.

준비물

Claude와 ChatGPT만 열어두시면 됩니다. Claude는 2025년 6월 25일 업그레이드 이후 Artifacts 전용 공간과 AI-powered app 제작이 붙어서 이런 한 화면 도구를 바로 뽑기 좋고, ChatGPT Canvas는 최근 도움말 기준으로 Web, Windows, MacOS에서 코딩 캔버스를 열고 코드 파일 다운로드와 공유까지 됩니다.

Claude에서는 결과물을 빨리 띄우는 역할만 맡기고, ChatGPT에서는 코드 손질과 내보내기를 맡기면 흐름이 깔끔합니다. 여기서 다른 서비스 로그인이나 배포까지 한 번에 넣지 마세요. 첫 수업은 5분 안에 돌아가는 결과물이 먼저여야 합니다.

따라하기

Step 1: Claude에서 앱을 한 번에 띄우세요

중고거래 채팅 로그를 붙여넣으면 사기 위험도를 0부터 100까지 보여주고, red flag 5개, 왜 위험한지 설명, 안전한 답장 초안 2개를 출력하는 한국어 single-page 웹앱을 Claude Artifact로 만들어줘. 모바일 우선 UI로 만들고, 처음 열자마자 바로 테스트할 수 있게 샘플 대화 3개도 넣어줘. 사용자가 분석하기를 누르면 Claude의 AI를 써서 분석하도록 구성해줘.

오른쪽에 Artifact가 뜨고, 입력창과 분석 버튼, 결과 카드가 한 화면에 보이면 정상입니다. 여기서 디자인까지 완벽하게 하려고 문장을 길게 늘리지 마세요. 로그인, DB, 결제, 관리자 화면을 같이 넣으면 첫 결과물이 늦어집니다.

Step 2: 결과가 밋밋하면 판단 기준만 다시 주입하세요

방금 만든 앱에서 아래 표현은 더 강한 사기 신호로 잡아줘: 오늘만 선입금, 안전결제 말고 계좌이체, 카톡으로 이동, 군인이라 사진 못 보냄, 택배거래만 가능. 결과에는 각 신호마다 왜 위험한지 한 줄씩 붙이고, 맨 위에는 거래 중단, 주의, 진행 가능 중 하나의 배지도 보여줘.

이 수정 뒤에는 위험 배지가 먼저 보이고, 사기 신호 설명이 훨씬 구체적으로 나와야 합니다. 여기에 더 똑똑하게 해달라고 추상적으로 쓰면 바뀌는 게 적어요. 바꾸고 싶은 판단 문구를 직접 넣어야 Claude가 정확히 손봅니다.

Step 3: 이제 GPT Canvas로 옮겨서 코드만 다듬으세요

use canvas. 아래 코드를 유지하면서 모바일 한 손 사용 기준으로 UI만 다듬어줘. 상단에는 위험 배지, 하단에는 결과 복사 버튼, 각 카드 간격은 넉넉하게, 색상은 밝은 화면 기준으로 정리해줘. 새 기능을 많이 넣지 말고 지금 동작은 그대로 유지해줘.

Claude Artifact에서 코드 보기를 열어 전체 코드를 복사한 뒤 이 프롬프트 아래에 붙여 넣으세요. Canvas가 열리면 오른쪽에서 코드가 직접 편집되는 방식으로 바뀌는데, 이런 순간엔 Chat보다 Canvas가 훨씬 편합니다. 최근 Canvas는 코드 파일로 바로 다운로드할 수 있어서 마무리 단계에서 더 쓰기 좋거든요.

Step 4: 내보내기 전에 마지막 한 번만 손보세요

이 코드를 유지하면서 샘플 대화 버튼을 3개로 정리하고, 분석 결과를 Markdown으로 복사하는 버튼을 추가해줘. 버튼 문구는 짧게 줄이고, 초보자가 봐도 어디를 눌러야 할지 바로 보이게 해줘.

여기까지 끝나면 Canvas에서 바로 실행 결과를 보고, 괜찮으면 코드 파일로 다운로드하세요. 결과가 깨지면 새로 만들라고 하지 말고 유지하면서 수정해달라고 적어야 합니다. 처음부터 다시 생성하게 두면 잘 되던 로직까지 같이 흔들릴 때가 많아요.

직접 해보기

같은 흐름으로 부동산 전세계약 문자 위험 감별기를 만들어보세요. 프롬프트에서 중고거래만 전세계약으로 바꾸고, red flag를 가계약금 선입금 요구, 등기부등본 미제공, 집주인 대리인 주장 같은 표현으로 바꾸면 됩니다. 결과물 주제가 바뀌어도 Artifacts에서 초안 생성, Canvas에서 마감하는 순서는 그대로 가져가면 돼요.

결과물 체크

• 채팅 로그를 붙여넣고 분석하기를 누르면 위험도와 red flag가 바로 나와야 합니다.
• 같은 입력으로 다시 돌렸을 때 결과 형식이 크게 흔들리지 않아야 합니다.
• 모바일 폭에서도 입력창, 분석 버튼, 복사 버튼이 한 화면에서 눌려야 성공입니다.

다음 편 예고

다음 편에서는 Claude Code와 Cursor를 켜고, 오늘 만든 도구를 로컬에서 실행하면서 프로젝트 규칙 파일까지 붙여보겠습니다.