AI로 CRM 만드는 방법

단순한 CRM은 모든 영업 프로세스를 한 번에 모델링하려고 하지 않을수록 더 잘 만들어집니다. 팀이 관계와 다음 단계를 추적할 수 있게 해주는 최소한의 기능부터 시작하세요.

첫 버전에서는 다음을 정의하세요.

• 사용자: 본인만, 또는 작은 내부 팀
• 핵심 기록: 연락처, 회사, 거래
• 동작: 생성, 편집, 검색, 필터, 메모 추가
• 화면: 대시보드, 연락처, 회사, 거래, 연락처 상세

각 화면이 무엇을 해야 하는지 적어두세요.

실용적인 첫 화면 구성은 다음과 같습니다.

• 대시보드: 연락처 수, 진행 중인 거래 수, 이번 달 마감 거래 수
• 연락처: 이름, 회사, 이메일, 전화번호, 상태, 다음 후속 조치 날짜가 있는 표
• 회사: 업종과 담당자가 있는 회사 목록
• 거래: 단계와 금액이 있는 파이프라인형 목록 또는 단순 표
• 기록 상세: 메모, 최근 활동, 관련 회사 또는 거래

또한 버전 1에 꼭 필요하지 않은 것도 정하세요. 흔한 예로는 이메일 동기화, 캘린더 동기화, 역할 권한, 가져오기 도구, 몇 개 요약 카드 이상의 리포팅이 있습니다.

AI는 인터페이스의 첫 초안을 꽤 잘 작성할 수 있지만, 데이터 구조가 처음부터 명확하면 앱을 개선하기가 훨씬 쉬워집니다.

가벼운 CRM이라면 스키마를 단순하게 유지하세요.

• contacts: id, first_name, last_name, email, phone, company_id, status, next_follow_up, notes
• companies: id, name, industry, website, owner, notes
• deals: id, name, company_id, contact_id, stage, value, expected_close_date, notes

CRM을 여러 사람이 사용할 경우 로그인 기능을 추가하고 created_by나 assigned_to 같은 소유권 필드를 고려하세요.

CRM이 내부용이고 고객에게 과금을 하지 않는다면, 아마도 결제 기능은 필요하지 않습니다. Stripe는 CRM 자체에 유료 접근, 인보이스, 체크아웃 흐름이 필요할 때만 중요합니다.

이 시점은 웹 우선 또는 모바일 우선도 정하기 좋은 때입니다. 대부분의 CRM 작업은 데스크톱에서 검토하기가 더 쉬우므로, 웹사이트부터 시작하는 것이 합리적입니다. Moremade에서는 웹사이트가 실제 React + Tailwind 코드로 생성됩니다.

첫 프롬프트에는 제품, 주요 화면, 스타일, 동작을 설명해야 합니다. 생성된 앱에 구조가 생기도록 충분히 구체적으로 쓰되, 프롬프트 작성에 테스트보다 더 오래 걸릴 정도로 과하게 상세할 필요는 없습니다.

좋은 첫 프롬프트에는 다음이 포함됩니다.

• 앱 유형
• 사용 대상
• 핵심 엔터티
• 화면
• 표시할 필드
• 시각 스타일
• 먼저 모의 데이터를 사용할지, 지금 바로 실제 데이터를 연결할지

예시 첫 프롬프트:

작은 영업팀을 위한 단순한 내부 CRM 웹 앱을 만들어 주세요. 왼쪽 사이드바와 상단 검색창이 있는 깔끔하고 전문적인 레이아웃을 사용하세요. Dashboard, Contacts, Companies, Deals, Contact Detail 화면을 만들어 주세요. 먼저 모의 데이터를 사용하세요. Contacts에는 이름, 회사, 이메일, 전화번호, 상태, 다음 후속 조치 날짜가 포함되어야 합니다. Companies에는 이름, 업종, 웹사이트, 담당자가 포함되어야 합니다. Deals에는 이름, 회사, 연락처, 단계, 금액, 예상 마감일이 포함되어야 합니다. 기록 생성 및 편집 폼과 검색/필터 컨트롤을 추가하세요. 실용적인 비즈니스 UI에 맞게 React와 Tailwind를 사용하세요.

Moremade에서는 앱을 평이한 언어로 설명하면 AI 에이전트가 소스 코드를 작성하고, 곧바로 라이브 미리보기를 확인할 수 있습니다.

첫 버전은 보통 최종 형태가 아니라 초안입니다. 유용한 습관은 레이아웃, 표 열, 폼, 내비게이션, 기록 상세 등 한 번에 한 영역씩 바꾸는 것입니다.

Moremade는 라이브 미리보기, 요소를 가리켜 바꾸는 시각적 인스펙터, 코드 뷰를 제공합니다. 덕분에 전체 기획서를 다시 쓰지 않고도 UI를 더 정교하게 만들기 쉽습니다.

짧고 구체적인 후속 프롬프트를 사용하세요. 예를 들면:

• "Contacts 화면을 이름, 회사, 상태, 다음 후속 조치 날짜에 대한 정렬 가능한 열이 있는 더 촘촘한 표 레이아웃으로 바꿔 주세요. 행 동작은 편집과 보기로 유지해 주세요."
• "연락처 행을 클릭하면 상세 드로어가 열리게 해 주세요. 메모, 관련 회사, 관련 거래, 모의 항목을 사용한 최근 활동 타임라인을 보여 주세요."
• "Deals 페이지를 Lead, Qualified, Proposal, Negotiation, Won 열이 있는 칸반 보드로 만들어 주세요. 목록 보기를 선호하는 사용자를 위해 표 토글도 유지해 주세요."

이 단계에서 실용적으로 확인할 점은 다음과 같습니다.

• 화면마다 레이블이 일관적인가요?
• 생성 및 편집 폼이 같은 필드명을 사용하나요?
• 사람 이름과 회사명으로 검색할 수 있나요?
• 모든 기록을 열지 않아도 중요한 정보가 보이나요?
• 앱이 마케팅 사이트가 아니라 내부 도구처럼 보이나요?

한 컴포넌트에 문제가 있다면 전체 재구축을 요청하지 말고 그 특정 부분만 수정해 달라고 하세요.

모의 데이터 버전이 괜찮아지면 실제 데이터를 연결하세요. Moremade에는 Supabase용 내장 커넥터가 있어 데이터베이스, 로그인, 파일 저장을 처리할 수 있습니다.

대부분의 CRM에서는 지속적인 기록 저장과 보통 어떤 형태의 인증이 필요하므로, Supabase는 다음 단계로 가장 자연스럽습니다.

이 단계에서 요청할 내용은 다음과 같습니다.

• contacts, companies, deals용 Supabase 테이블
• 레코드 생성 및 업데이트에 연결된 폼
• 데이터를 가져오는 목록 페이지
• 두 명 이상이 사용할 경우 기본 로그인
• 연락처가 회사에 속하는 것 같은 기록 관계

첫 인증 설정은 단순하게 유지하세요. 내부 CRM이라면 이메일/비밀번호만으로 충분한 경우가 많습니다.

앱에 실제 결제가 필요할 때만 Stripe를 추가하세요. 내부 CRM에는 보통 필요하지 않습니다. 고객용 CRM이나 유료 포털을 만든다면 Moremade에서 설정한 가격으로 Stripe 체크아웃을 연결할 수 있지만, 명확한 요구사항이 없다면 기본 빌드에 포함하지 않는 것이 좋습니다.

주요 사용 경험이 데스크톱이라 해도, 사람들은 숫자를 확인하거나, 거래를 업데이트하거나, 회의 후 메모를 남기기 위해 휴대폰에서 CRM을 열게 됩니다.

미리보기에서 현실적인 작업 몇 가지를 실행해 보세요.

• 새 연락처 추가
• 회사 검색
• 거래 단계 업데이트
• 다음 후속 조치 날짜 수정
• 기록 상세 페이지를 열고 메모 추가

모바일에서는 기본에 집중하세요.

• 내비게이션에 쉽게 접근할 수 있는가
• 표가 읽을 수 없을 정도로 깨지지 않는가
• 가로 스크롤 없이도 주요 동작이 보이는가
• 터치 입력으로 폼을 사용할 수 있는가
• 날짜 필드와 드롭다운을 쉽게 탭할 수 있는가

모바일이 매우 중요하다면, AI에게 작은 화면에 맞게 레이아웃을 조정해 달라고 요청하세요. 나중에 전용 모바일 앱이 필요하면 Moremade가 React Native (Expo) 앱도 생성할 수 있지만, 많은 팀은 먼저 웹 앱으로 CRM을 검증하는 편이 좋습니다.

앱을 사용할 수 있게 되면 배포하세요. Moremade는 무료 yourname.moremade.ai 서브도메인에 원클릭 배포를 지원합니다. 유료 플랜에서는 커스텀 도메인을 연결할 수 있으며, 도메인을 Moremade 안에서 구매하는 것도 가능합니다.

배포 전에 다음을 확인하세요.

• 페이지 제목과 내비게이션 레이블
• 연락처나 거래가 없을 때의 빈 상태
• 폼의 오류 상태
• 테스트 데이터가 아직 보이는지 여부
• 비공개 데이터에 로그인 요구가 적용되는지 여부

피해야 할 흔한 실수는 다음과 같습니다.

• 처음부터 너무 크게 시작하기: 팀은 첫 시도에 파이프라인, 리포트, 권한, 가져오기, 자동화를 모두 요청하는 경우가 많습니다. 먼저 깔끔한 핵심부터 만드세요.
• 데이터 모델을 건너뛰기: 연락처와 회사가 명확하게 정의되지 않으면 UI가 빠르게 일관성을 잃습니다.
• 모호한 프롬프트 사용하기: "더 좋게 만들어 주세요" 같은 표현보다 정확한 화면과 변경 사항을 지정하는 편이 결과가 훨씬 좋습니다.
• 이유 없이 결제 추가하기: Stripe는 필요할 때 유용하지만, 많은 CRM은 필요하지 않습니다.
• 모의 데이터를 실수로 배포하기: 내부에 공유하기 전에 실제 Supabase 데이터로 전환하세요.

언제든지 전체 소스 코드를 ZIP으로 내보내거나 GitHub에 푸시할 수 있으므로, 앱을 Moremade 안에만 두어야 하는 것은 아닙니다.