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

이전 시도에서 배운점을 바탕으로 다시 화면을 만들어봅니다.

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

LLM으로 CRM 요구사항을 정리하며 겪은 시행착오를 바탕으로, 화면보다 업무 흐름과 데이터 모델을 먼저 정의해야 하는 이유를 살펴봅니다.

블로그 - 셀렉트 팀Hakbeom Kim

이전 시도의 결과물 화면을 더 살펴보니 미팅 노트를 꼭 여러개로 유지해야하는지, 미팅 노트에 할일이 있어야하는지, 기회와 미팅을 분리해야하는지도 고민이 되었습니다.

"미팅"이라는 메뉴를 왜 떠올렸을까요? 미팅시 내용을 작성하고 관리하고 싶었습니다. 왜 작성해야할까요? 나중에 영업시 참고하기 위해서입니다. (궁극적인 목표)

목표에 대해 먼저 더 생각해보겠습니다. 영업기회를 구매로 전환하는게 최종 목표입니다. 기회 전환을 잘하려면? 구매전 장애물 제거, 미팅을 통해 장애물을 알아내고 기록하고 해결, 미팅을 잘하려면? 미팅 노트를 잘 작성, 관리, 활용해야합니다.

다시 미팅 노트에 대해 생각해봅니다. 미팅 노트는 하나인게 좋은가 여러개인게 좋은가? 나중에 노트를 공유할때 과거 내용이나 히스토리가 불필요해지는 경우에는 분리시키는게 필요하지만 처음에는 하나가 편합니다.

미팅과 기회를 분리해야하나? 미팅하는것 자체가 기회 아닌가? 왜 나눠야하지? 영업 목적이 아닌 미팅이 있나? 시장 정보 조사. 잠재고객이 아닌 사람한테 얻은 정보를 기록하는게 중요한가? 덜 중요하다. 중요하다면 곧 잠재고객일 가능성이 높다.

미팅 내용이 너무 많아 다른 사람에게는 핵심만 공유하고 싶을때 미팅 노트를 분리해야할수 있습니다. 하지만 미팅 주요 당사자끼리는 모든 내용을 알아야합니다.

고객 공유용 노트와 내부용 노트가 달라야합니다. 하지만 작성은 하나로하는게 편합니다. 중간에 내부용 노트를 추가할 수 있다면 어떨까요?

작업 흐름부터 적어보기

머리속은 화면이 먼저 떠오릅니다. 각 아이디어들은 우선 기록해둡니다.

이제 작업 흐름(워크플로우)를 적어보겠습니다.

작업 흐름
- 연락드리기, 미팅 잡기(시제품 평가, 시장조사, 제안)
- 미팅 내용 기록하기, 필요시 다음 미팅 잡기
- 미팅 일정 보면서 찾아뵙거나 전화, 화상 연락하기
- 다음 미팅때 이전 미팅 내용에서 바뀐것 서로 업데이트하기
- 새로운 소식 전하기
- 도입 문의 받고 상담하고 내용 업데이트하기
- PoC, 시제품 사용 피드백 받고 내용 업데이트하기
- 도입 장애물 적어두기, 해결되면 연락드리고 상황 업데이트 받기
- 도입후 잘 사용하시는지 확인, 문제가 있으면 도움드리기
- 다음 문제는 무엇인지 정기적으로 검토 및 도움드릴 방법 찾기

이제 작업을 진행하면서 어떤 정보를 입력해야하는지, 어떤 정보가 보여야하는지 적어보겠습니다.

작업 흐름
- 연락드리기, 미팅 잡기(시제품 평가, 시장조사, 제안)
  - <입력> 고객정보(고객이름, 전화번호, 이메일), 미팅일정, 미팅목표
- 미팅 내용 기록하기, 필요시 다음 미팅 잡기, 다음할일 적기
  - <입력> 미팅내용, 할일, 다음 미팅일정
- 다음 미팅 일정 보면서 미팅 준비하고 찾아뵙거나 전화, 화상 연락하기
  - <조회> 다음 미팅일정, 고객정보
- 다음 미팅때 이전 미팅 내용에서 바뀐것 서로 업데이트하기
  - <조회> 이전 미팅내용, 할일, 고객정보
  - <입력> 미팅내용, 할일
- 새로운 소식 전하기
  - <조회> 고객정보(새 소식을 반가워할 분 선별)
- 도입 문의 받고 상담하고 내용 업데이트하기, 다음할일 적기
  - <조회> 도입문의
  - <입력> 미팅내용, 할일
- PoC, 시제품 사용 제안하기
  - <조회> 도입문의, 미팅내용, 할일
  - <입력> 도입상태
- PoC, 시제품 사용 피드백 받고 내용 업데이트하기
  - <조회> 도입상태
  - <입력> 미팅내용, 할일
- 도입 장애물 적어두기, 해결되면 연락드리고 상황 업데이트 받기
  - <조회> 도입상태, 미팅내용, 할일
  - <입력> 미팅내용, 할일
- 도입후 잘 사용하시는지 확인, 문제가 있으면 도움드리기
  - <조회> 도입상태, 미팅내용, 할일
  - <입력> 도입상태, 미팅내용, 할일
- 다음 문제는 무엇인지 정기적으로 검토 및 도움드릴 방법 찾기
  - <조회> 미팅내용, 할일
  - <입력> 미팅내용, 할일

각 작업을 어떤 화면을 보면서 진행할지 적어봅니다.

작업 흐름
- 연락전 기준설정, 연락드리기, 미팅 잡기(시제품 평가, 시장조사, 제안)
  - <입력> 고객정보(고객이름, 전화번호, 이메일), 미팅일정, 미팅목표
  - <화면> 고객상세
    - 왼쪽: 고객정보
    - 오른쪽: 미팅목록(미팅일정, 미팅목표)
- 미팅 내용 기록하기, 필요시 다음 미팅 잡기, 다음할일 적기
  - <입력> 미팅내용, 할일, 다음 미팅일정
  - <화면> 고객상세
    - 상단: 고객정보
    - 왼쪽: 프로파일 노트, 코멘트, 타임라인
    - 중앙: 미팅목록
      - 목록 내역 클릭시 미팅노트로 전환
    - 오른쪽: 할일, 피드백, 구매(도입)
- 다음 미팅 일정 보면서 미팅 준비하고 찾아뵙거나 전화, 화상 연락하기
  - <조회> 다음 미팅일정, 고객정보
  - <화면> 미팅목록
    - 내역 클릭시 고객 프로파일 화면으로 이동
- 다음 미팅때 이전 미팅 내용에서 바뀐것 서로 업데이트하기
  - <조회> 이전 미팅내용, 할일, 고객정보
  - <입력> 미팅내용, 할일
  - <화면> 고객상세
- 기대하는 업데이트 기록하기
  - <입력> 피드백
  - <화면> 고객상세
- 새로운 소식 전하기
  - <조회> 피드백, 고객정보(새 소식을 반가워할 분 선별)
  - <화면> 피드백 목록
  - <화면> 피드백 상세
    - 상단: 피드백 내용
    - 하단: 고객목록
- 도입 문의 받고 상담하고 내용 업데이트하기, 다음할일 적기
  - <조회> 도입문의
  - <입력> 미팅내용, 할일
  - <화면> 문의목록
  - <화면> 문의상세
    - 왼쪽: 문의내용
    - 오른쪽: 고객정보
- PoC, 시제품 사용 제안하기
  - <조회> 도입문의, 미팅내용, 할일
  - <입력> 도입상태
  - <화면> 고객상세
- PoC, 시제품 사용 피드백 받고 내용 업데이트하기
  - <조회> 도입상태
  - <입력> 미팅내용, 할일
  - <화면> 고객상세
- 도입 장애물 적어두기, 해결되면 연락드리고 상황 업데이트 받기
  - <조회> 도입상태, 미팅내용, 할일
  - <입력> 미팅내용, 할일
  - <화면> 고객상세
- 도입후 잘 사용하시는지 확인, 문제가 있으면 도움드리기
  - <조회> 도입상태, 미팅내용, 할일
  - <입력> 도입상태, 미팅내용, 할일
  - <화면> 고객상세
- 다음 문제는 무엇인지 정기적으로 검토 및 도움드릴 방법 찾기
  - <조회> 미팅내용, 할일
  - <입력> 미팅내용, 할일
  - <화면> 고객상세

화면 중심으로 바꾸기

겹치는 화면이 있고 전체 내용을 파악하기가 어려워졌습니다. 이제 화면 중심으로 다시 작성해보겠습니다.

화면
- 고객목록
  - 고객상세
    - 상단: 고객정보(고객이름, 전화번호, 이메일)
    - 왼쪽: 프로파일 노트, 코멘트, 히스토리(정보수정내역, 코멘트내역)
    - 중앙: 미팅목록
      - 목록 내역 클릭시 미팅노트(미팅일정, 미팅목표, 미팅내용)로 전환
    - 오른쪽: 할일, 피드백, 도입
      - 할일
      - 피드백: 카드목록, 클릭시 수정모드
      - 도입: 카드목록, 클릭시 수정모드
        - 도입상세
          - 상태(상담, 검토, 테스트, 도입)
          - 메모
- 미팅목록
  - 내역 클릭시 고객상세 화면으로 이동
- 피드백 목록
  - 피드백 상세
    - 상단: 피드백 내용
    - 하단: 고객목록
- 문의목록
  - 문의상세
    - 왼쪽: 문의내용
    - 오른쪽: 
      - 고객정보: 카드, 클릭시 고객상세 화면으로 이동
- 도입목록
  - 내역 클릭시 고객상세 화면으로 이동

데이터 모델 점검

ChatGPT를 통해 데이터 모델 점검을 요청했으나 현재 틀에서 세부사항에 대한 내용만 제안하고 근본적인 고민이나 변화, 질문은 주지 않았습니다.

GPT에 물어보기 전에 내용을 읽으면서 느꼈던것은 고객 중심으로 관리하는것보다 노트 1개로 관리하는게 더 제 스타일에 맞다는 생각이 들었습니다. 이부분은 개인의 경험, 느낌, 직관 등 많은 배경정보가 GPT에게 컨텍스트로 넘어갈 수 없기 때문에 머리속에 기대한 결과와 다르다고 느끼게 되었습니다.

메뉴, CRUD, UI 레이아웃, UI 디테일, 인터랙션 점검

결국 머리속에 어떤 기대가 있는지 더 생각해보고 세부적인 내용을 채워봤습니다.

• 처음에는 1명과 대화하지만 나중에 필요시 2-3명과 대화하다가 나중에는 또 다른 사람으로 교체되고 할 수 있다. 이때 맥락이 계속 유지되게 하고 싶었다.
• 노트를 여러개 만들어서 왔다갔다 하면서 헷갈리는 상황을 막고 싶다. 최대한 중요한 노트는 1개로 유지하고 싶었다.
• 고객과 긴 관계를 맺으면서 도입/구매가 여러번 일어나도 한곳에서 관리하고 싶다.
• 최대한 개념이 단순한 구조를 만들고 싶다.

화면
- 노트목록
  - 테이블 뷰, 내역 클릭시 노트상세로 이동
  - 노트추가
    - 우측 상단에 "새 노트" 버튼
  - 노트상세
    - 상단: 제목, 고객정보(고객이름, 전화번호, 이메일) 클릭해서 수정가능
    - 하단 3컬럼 2:2:1 비율
      - 왼쪽: 위아래 블록 나열
        - 프로파일 노트, 클릭시 inline 수정모드
        - 코멘트(추가, 수정, 삭제 가능)
        - 히스토리(노트상세 내부 항목들의 모든 변경내역 값, 코멘트내역), 타임라인 뷰
      - 중앙: 미팅목록
        - 목록 내역 클릭시 해당 영역에서 미팅노트(미팅일정, 미팅목표, 미팅내용)로 전환
        - 추가 버튼 클릭시 해당 영역에서 새 미팅노트로 전환, 작성 가능
      - 오른쪽: 위아래 블록 나열
        - 할일: 체크리스트(CRUD)
        - 도입: 카드목록, 클릭시 inline 수정모드, CRUD
          - 도입상세
            - 상태(상담, 검토, 테스트, 구매)
            - 메모
        - 피드백: 카드목록, 클릭시 inline 수정모드, CRUD
- 미팅목록
  - 내역 클릭시 노트상세 화면으로 이동
  - 날짜 오름차순으로 조회. 지난 날짜는 빨간색으로, 오늘기준 3일전까지만 표기
  - 우측 상단에 세그먼티드 탭: 예정, 지남, 전체
- 피드백 목록
  - 피드백 상세
    - 상단: 피드백 내용
    - 하단: 노트목록, 클릭시 노트상세 화면으로 이동
- 문의목록
  - 문의상세
    - 왼쪽: 문의내용
    - 오른쪽: 
      - 노트정보: 카드, 클릭시 노트상세 화면으로 이동
- 도입목록
  - 내역 클릭시 노트상세 화면으로 이동  
- 고객목록
  - 고객상세
    - 왼쪽: 고객정보
    - 오른쪽: 노트목록, 내역 클릭시 노트상세 화면으로 이동

상단 메뉴
- 노트: 노트목록
- 미팅: 미팅목록
- 피드백: 피드백 목록
- 문의: 문의목록
- 도입: 도입목록
- 고객: 고객목록

문제가 계속 생겨서 조금씩 수정하고 결과를 보았습니다. 5번 이상 수정하다보니 해당 방식에 대한 고민이 생겼습니다.

메뉴, 페이지 단위로 나눠서 실행해보기도 했으나 디테일이 안되는건 같았습니다.

내용을 더 구체적으로 개선하고 AGENTS.md가 없는 환경에서 시도해보았습니다.

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

내비게이션
- 상단 중앙

메뉴
- 미팅: 미팅목록
  - 내역 클릭시 노트상세로 이동
  - 기본값: 날짜 오름차순으로 조회, 지난 날짜는 빨간색으로 표시
  - 우측 상단에 세그먼티드 탭: 예정, 지남(날짜 내림차순), 전체(오름차순)
- 피드백: 피드백 목록
  - 내역 클릭시 피드백 상세로 이동
  - 피드백 상세
    - 왼쪽: 피드백 내용(클릭시 inline 입력모드, 텍스트 에디터)
    - 오른쪽: 노트목록, 클릭시 노트상세로 이동
- 문의: 문의목록
  - 내역 클릭시 문의상세로 이동
  - 문의상세
    - 왼쪽: 문의내용(클릭시 inline 입력모드, 텍스트 에디터)
    - 오른쪽: 노트 1개, 클릭시 노트상세로 이동. 노트없으면 "새 노트" 추가 가능, 추가시 노트상세로 이동(고유아이디 생성후 화면이동해서 상세에서 내용 입력)
- 도입: 도입목록
  - 내역 클릭시 노트상세로 이동  
- 고객: 고객목록
  - 내역 클릭시 고객상세로 이동  
  - 고객상세
    - 왼쪽: 고객정보(클릭시 inline 입력모드)
    - 오른쪽: 노트목록, 내역 클릭시 노트상세로 이동
- 노트: 노트목록
  - 내역 클릭시 노트상세로 이동
  - 우측 상단에 "새 노트" 버튼. 버튼 클릭시 노트상세로 이동(상세에서 내용 입력)
  - 노트상세
    - 상단:하단=1:4 비율
    - 상단: 제목, 고객정보(고객이름, 전화번호, 이메일) 클릭시 inline 입력모드
    - 하단 3컬럼 2:2:1 비율
      - 왼쪽: 위아래 블록 나열
        - 프로파일 노트. 클릭시 inline 입력모드
        - 히스토리(노트상세 내부 항목들의 모든 변경내역 값 before/after, 코멘트내역), 타임라인 뷰
        - 코멘트(추가, 클릭해서 inline 수정, 삭제 가능), 히스토리 타임라인 안에만 표기
      - 중앙: 
        - 미팅목록
          - 목록 내역 클릭시 해당 영역에서 미팅노트(미팅일정, 미팅내용)로 전환.
          - 추가 버튼 클릭시 해당 영역에서 새 미팅노트로 전환, 작성 가능
      - 오른쪽: 위아래 블록 나열
        - 할일: 체크리스트
        - 도입: 카드목록. 클릭시 inline 입력모드
          - 도입상세
            - 상태(상담, 검토, 테스트, 구매). 드롭다운
            - 메모
        - 피드백: 카드목록. 클릭시 inline 입력모드

잘되는것도 있지만 여전히 빠진 세부사항들이 보입니다. 그리고 계속해서 살펴볼수록 데이터 모델이나 레이아웃 등 근본적인 설계에 대한 고민도 깊어집니다.

이런식으로 만들어서 써야할까?

연락처(Contact), 계정(Account), 기회, 회사 등 이미 많은 CRM 서비스들이 고민끝에 만든 개념들이 많습니다. 본인에게 충분히 맞고, 가격 측면에서도 문제가 없다면 가져다 쓰는게 나을 수 있습니다.

복잡한 앱일수록, 제로베이스에서 자신만의 앱을 만들고싶을수록 고민하고 테스트하서 만족스러운 결과를 만들기까지 오랜 시간이 걸리기 때문입니다. 특히 LLM은 비어있는 요구사항에 대해 임의로 적당하게 채우는 경향이 있기 때문에 (운좋게 맘에들면 괜찮지만) 꼭 원하는 방향이 있다면 요구사항을 계속해서 잘 구체화하고 관리하는 노력이 필요합니다. 요구사항이 길어질수록 명시하지 않은 부분은 LLM이 임의로 해석하거나 구현에서 빠질 가능성이 커집니다.

이어서 보기

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

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

블로그 - 셀렉트 팀Hakbeom Kim