AI로 영업 CRM 화면 만들기 (3)

복잡한 CRM을 한 번에 만들기보다, 작업 흐름과 데이터 모델을 단순화하며 필요한 기능만 남기는 과정을 살펴봅니다. LLM과 요구사항을 반복 개선해 실제 사용할 수 있는 화면에 가까워지는 방법과 프롬프트 작성 원칙을 정리했습니다.

지난 시도를 통해 앱이 복잡해지면서 실제 사용할 수 있는 수준까지 가기위해서는 많은 시간이 필요하다는걸 알 수 있었습니다.

AI로 영업 CRM 화면 만들기 (2)

LLM으로 CRM 화면을 다시 만들며, 화면보다 작업 흐름·데이터 모델·개념 단순화가 먼저 필요한 이유와 요구사항을 구체화하는 과정을 살펴봅니다.

블로그 - 셀렉트 팀Hakbeom Kim

이 과정을 통해 복잡한 앱이 정말 필요한지, 내게 필요했던 것이나 기존 CRM 경험으로 왜 충분하지 않았는지를 다시 생각해볼 필요를 느꼈습니다.

내 필요 다시 점검하기

요구사항
- 고객/고객사의 노트를 최대한 1개로 관리하고 싶다.
  - 왜? 노트가 많아지면 내용을 찾기가 어려워진다.
    - 왜 내용을 찾아야하지?
      - 고객이 어떤 고민/문제가 있으신지 기록하고 최대한 빨리 도움드릴 방법을 찾고 업데이트 드리기 위함. 당장 도움드릴 수 없다면 나중에 가능할때 연락드릴 수 있어야함.
- 단순 메모와 결정적인 노트(1개)를 따로 관리해서 영업기회를 잘 관리하고 싶다.
- 다시 연락해야할 시점, 오랜만에 연락드릴 시점을 놓치지 않고 싶다. 그냥 연락? 의미있는 연락이 되어야함.
  - 연락드려야할 내역들을 잘 만들어두어야함
- 연락드릴분들을 빠르게 리스트업해두고 싶다.
  - 언제 연락드리지?
    - 피드백이 반영되어 새 기능이 출시되었을때
    - 시장 상황을 파악하고 싶을때
    - 다음 해결해야할 문제를 듣고자 할때
- 한 회사/팀/그룹의 여러 고객들과 미팅을 해도 한곳에서 잘 관리하고 싶다.

화면 내용을 작성할때 쉬운것부터 작성하고, 너무 많은 개념이나 연동 등 복잡한 개념은 우선 제외하였습니다.

현재 날짜, 시각으로 안에  폴더 추가하고 그 안에서 html, css, plain js 사용, window 객체에 모든 데이터 보관해서 요구사항에 맞는 화면 만들어줘. 빌드, 로컬호스트 없이 브라우저에서 바로 실행되게 구현. 다른 파일 내용 참고 금지

```
화면
- 연락처 목록
  - 이름, 이메일, 전화번호, 회사명, 최근 연락노트 생성시점
  - row 클릭시 상세로 이동
- 연락처 상세
  - 연락처 정보 조회 및 수정
    - 이름, 이메일, 전화번호, 회사명, 회사도메인, 메모
  - 연락 노트 입력
    - 새노트 추가시 바로 생성됨. 입력하면 자동 저장.
- 영업기회 목록
  - "새 기회" 추가시 연락처 선택(검색해서 여러건 선택 가능)
- 노트 목록
  - "새 노트" 추가시 노트만 작성 가능. 나중에 연락처 선택 입력 가능
- 영업기회 상세
  - 연결된 연락처, 연결된 연락 노트, 영업기회 노트(1개), 영업기회 상태
```

프롬프트 개선

2-3번의 프롬프트 추가 실행을 통해 화면에 대한 설명을 더 구체화했습니다.

현재 날짜와 시각을 이름으로 한 폴더를 만들고, 그 안에 html, css, plain js만 사용해 요구사항에 맞는 화면을 구현해줘. 빌드 없이 실행. 브라우저에서 HTML 파일 열어서 실행 가능하게. 필요시 화면별 HTML 파일 구성. 공통 데이터는 window 객체에 보관. 다른 파일 내용 참고 금지.

```
화면
- 연락처 목록
  - 항목: 이름, 이메일, 전화번호, 회사명, 최근 연락노트 생성시점
  - row 클릭시 상세로 이동
  - 우측 상단에 "새 연락처" 추가 버튼. 클릭시 모달 오픈. 이름(필수), 이메일, 전화번호 입력후 저장시 연락처 상세로 이동
- 연락처 상세
  - 왼쪽 컬럼:
    - 연락처 정보 조회 및 수정. 1컬럼 form, 라벨은 위에, 각 항목 클릭해서 inline 수정 가능.
      - 이름, 이메일, 전화번호, 회사명, 회사도메인, 메모
  - 오른쪽 컬럼:
    - 연락 노트 목록. 최신 노트부터 보이는 피드 뷰, 각 항목 클릭 inline 수정 가능
    - 목록 우측 상단에 "새 노트" 추가시 바로 생성되고 inline 편집모드가 됨. 자동 저장.
- 노트 목록
  - 우측 상단에 "새 노트" 버튼. 추가시 노트 상세로 이동.
  - 노트 내용이 길어도 가로 너비 막아두고 줄내림으로 표시. 너무 길면 자르기(...으로 표기)
- 노트 상세
  - 노트만 작성 가능. 나중에 연락처 선택 입력 가능. 태그 입력 가능(기존 저장된 태그 선택 가능). 연락일 입력 가능(표기는 "날짜, 7일전, 어제, 오늘, 내일, 2일후, 7일후, 날짜" 방식으로)
- 영업기회 목록
  - 우측 상단에 "새 기회" 버튼. 추가시 모달 오픈, 연락처 선택(검색해서 여러건 선택 가능)
- 영업기회 상세
  - 상단에 영업기회 상태 Arrow Stepper
  - 왼쪽 컬럼: 연결된 연락처. + 버튼 눌러서 연결 가능
  - 중간 컬럼: 연결된 연락 노트. 연결된 연락처의 연락 노트들이 나열됨, 각 항목 클릭 inline 수정 가능. 피드 뷰. + 버튼 눌러서 연락 노트 추가 가능(연락처 선택 필요)
  - 우측 컬럼: 영업기회 노트(1개). 클릭하면 inline 편집모드가 되고 입력. 자동 저장.
- 태그 목록
  - 등록된 태그 조회. 클릭해서 태그정보 수정 가능
- 변경내역
  - ...
```

변경내역은 고려할 부분이 많아 GPT의 도움을 받고 나중에 추가하였습니다.

아래 요구사항에 부합하는 수준에 맞는 변경내역 불렛포인트 내용 작성해줘. 노트의 경우 변경점 실시간 저장은 과하다고 생각함.

```
화면
- 연락처 목록
  - 항목: 이름, 이메일, 전화번호, 회사명, 최근 연락노트 생성시점
...
```

아래는 GPT에서 제안해준 내용입니다.

- 변경내역
  - 연락처, 연락 노트, 영업기회, 태그에서 발생한 주요 변경사항을 최신순으로 조회
  - 변경 항목:
    - 연락처 생성/수정
    - 연락 노트 생성/수정
    - 영업기회 생성/상태 변경/연락처 연결 변경
    - 영업기회 노트 수정
    - 태그 생성/수정
  - 각 내역에 표시할 정보:
    - 변경 대상 종류
    - 변경 대상 이름 또는 요약
    - 변경한 사람
    - 변경 시각
    - 변경 내용 요약
  - row 클릭시 연결된 상세 화면으로 이동
  - 노트 본문 수정은 모든 입력 과정을 실시간으로 기록하지 않고, 저장 완료 기준으로 변경내역 1건만 남김
  - 긴 노트 내용은 변경내역에서 일부만 미리보기로 표시하고, 전체 내용은 상세 화면에서 확인
  - 기본 정렬은 최근 변경일 내림차순