소개
이 사례글의 시작은 저의 작은 고민에서 시작됩니다. 고객 또는 잠재 고객과의 관계를 지속적으로 이어 나가려면 자주 연락을 드려야 한다는 사실을 알고 있지만 자꾸 까먹게 되고 다른 더 중요하다고 생각되는 일정에 의해서 미뤄지거나 그게 미뤄지게 되면 어떤 이야기를 이어나가야 하는지도 잊어버리게 됩니다. 이러한 일련의 일들을 방지하기 위해서 다음과 같은 나만의 CRM 앱을 기획하게 됩니다.
진행 방법
저희 회사는 사내 모든 관리 시스템을 노션 기반으로 하고 있습니다. 따라서 CRM 도 노션에 데이터베이스를 만드는 것 부터 시작합니다.
1. 고객정보를 저장하는 테이블을 만듭니다.
2. 미팅관리 테이블을 만듭니다.
대충 아래와 같은 모습이 됩니다.
3. AI 에게 아래 프롬프트로 질의 합니다.
3.1. 첫번쨰 질의
notion 에서 고객관리 database 를 읽어와서 알림을 주는 앱을 만들려고 해. 고객관리 database 의 구성은
'''
이름, 회사명, 전화번호, 주소, 이메일, 관심사, 마지막 접촉일, 마지막 접촉 수단, 마지막 회의록
'''
으로 셋팅하고 마지막 접촉일은 datatime 으로 셋팅하여 계산이 가능하도록 해줘.
알림은 마지막 접촉일로부터 1주일 이후 부터 1주일, 한달 간격으로 알림이 오도록 하고 마지막 접촉일이 갱신될때 마다 알림 날짜가 그에 따라 변경되어야 해.
알림을 클릭하면 노션의 해당 db 가 있는 페이지로 이동해야 해.
이 알림앱은 ios 로 만들어주고 이 모든 과정과 코드를 작성해줘.3.2. 두번째 질의
위 ios 앱의 전체 프로젝트 구조를 표로 그려줘3.3. 세번째 질의
위 ios 앱의 이름을 TonyCRM 이라고 정했어. 해당 이름과 첨부한 앱 아이콘 이미지, #7de0fb 색상코드의 색상으로 앱 UI/UX 를 상상해서 그려줘.3.4. 네번째 질의
앱의 이름과 위 상상도를 적용해서 다시 전체 코드를 수정하고 구조도도 함께 정리해서 출력해줘. 가능하면 상상도를 그림으로 표현해 주었으면 좋겠어.결과
아래와 같이 구조도와, 다수의 클래스별 대량의 코드들, UI/UX 디자인 설명을 얻었습니다.
UI/UX 상상도 (그림 설명)
스플래시 화면:
밝은 #7de0fb 파란색 배경 전체를 채웁니다.
화면 중앙에 TonyCRM 앱 아이콘 (제공된 이미지)이 흰색 또는 옅은 회색으로 선명하게 표시됩니다.
화면 하단 중앙에는 얇은 밝은 회색 가로선 위에 깔끔한 San-Serif 폰트로 "TonyCRM" 텍스트가 표시됩니다.
고객 목록 화면:
상단 네비게이션 바: 배경은 밝은 회색 또는 흰색, 중앙에 "#7de0fb" 색상의 "고객" 텍스트가 강조됩니다. 좌측에는 편집 버튼 (선택 사항), 우측에는 흰색 "+" 아이콘이 #7de0fb 원형 배경에 배치된 "새 고객 추가" 버튼이 있습니다.
검색 바: 네비게이션 바 바로 아래에 위치하며, 흰색 배경에 둥근 모서리, 옅은 회색 "고객 이름, 회사 검색" placeholder 텍스트가 있습니다.
고객 목록: 흰색 배경의 각 셀에는 왼쪽 정렬로 고객 이름 (굵게), 그 아래 회사명 (일반, 회색), 그리고 마지막 접촉일 (작게, 회색)이 표시됩니다. 각 셀의 오른쪽 끝에는 상세 정보 이동을 위한 작고 옅은 회색 ">" 아이콘이 있습니다.
새 고객 추가 FAB: 화면 오른쪽 하단에 #7de0fb 색상의 원형 버튼이 떠 있고, 중앙에 흰색 "+" 아이콘이 배치되어 사용자가 쉽게 새 고객을 추가할 수 있도록 합니다.
고객 상세 정보 화면:
상단 네비게이션 바: 왼쪽에는 "< 고객 목록" 텍스트 버튼, 중앙에는 흰색 고객 이름, 오른쪽에는 #7de0fb 색상의 연필 모양 편집 아이콘이 있습니다. 배경은 밝은 회색 또는 흰색입니다.
헤더: 화면 상단에 고객 이름이 매우 큰 굵은 글씨로 표시되고, 그 아래 회사명이 약간 작은 회색 글씨로 표시됩니다.
정보 섹션: "연락처 정보", "관심사", "최근 접촉", "알림 설정" 등의 제목은 #7de0fb 색상으로 강조됩니다. 각 섹션 내의 정보는 깔끔하게 레이아웃되어 있으며, 전화번호나 주소 등은 탭하여 액션을 취할 수 있음을 시사하는 스타일 (예: 파란색 텍스트)로 표시될 수 있습니다.
알림 설정 섹션: "알림 활성화" 버튼은 #7de0fb 배경에 흰색 텍스트로, "알림 취소" 버튼은 회색 배경에 흰색 텍스트로 표시되어 시각적으로 구분됩니다. 다음 알림 예정일이 설정된 경우, 해당 날짜가 명확하게 표시됩니다.
위의 UI/UX 설명을 Gemini 에게 몇번 그려달라고 했지만 직접 UI/UX 는 그리질 못하는 것 같아. 웹 애플리케이션 코드로 생성해서 직접 앱 프론트를 구현한 다음 스크린샷을 찍어야 겠다는 생각이 들었습니다. Gemini 도 물론 react 로 다시 UI/UX 코드를 생성할 수 있겠지만 이를 바로 웹 페이지에 deploy 하는 기능이 없으므로 이것이 가능한 https://lovable.dev/ 로 이동하여 뒤 UI/UX 상상도를 입력하고 실행하였습니다.
그렇게 얻어진 UI/UX 결과는 아래와 같습니다.
이제 Swift 로 구현하는 것만 남았군요. 아마도 다음 일정은 위 UI/UX 를 다시 Gemini 에게 스트림 리얼타임으로 보여주면서 XCode 를 연동하여 구현하게 될 것 같습니다.