실전 AI: 구매 견적 화면 만들기

이번에는 가구 회사의 입장에서 고객과 구매 상담을 할때 함께 보면서 견적을 내보는 화면을 만들어보겠습니다.

환경은 "Codex로 검색 UI 만들기" 글에 있는 AGENTS.md를 추가한뒤 Codex 컴퓨터 앱에서 진행했습니다.

먼저 상담사가 고객과 견적을 내는 과정, 업무 흐름을 그려보겠습니다.

가구회사가 고객 상담시 구매 견적을 도와주는 프로그램 만들기

업무 흐름
- 견적 화면 열기
- 고객이 구매 원하는 상품 검색, 추가하기 (필요시 사은품 검색, 추가하기)
- 장바구니 리스트 보고 다음 단계로 넘어가기
- 상품 내역, 금액보고 주소지, 연락처, 이름 등 고객 정보 입력하기
- 배송일자 선택 버튼 누르면 해당 지역에서 배송 가능한 일자, 현재 일정들 표기된 달력 보여주기
- 달력에서 날짜에 있는 선택 버튼 클릭하면 배송일자 입력됨
- 확인 버튼 누르면 최종 견적서 자료가 나옴
- 견적서 결과 화면에서 우측에 문자, 이메일, 카톡 발송 버튼이 있고 전화번호나 이메일이 있을 때만 실행됨

Codex에게 해당 프롬프트를 전달하니 업무 흐름을 따라서 위에서 아래로 이동하는 화면이 생성되었습니다. 나쁘지 않지만 많이 사용하는 단계별 화면으로 변경해보겠습니다.

프롬프트 바꿔보기

"업무 흐름"을 "화면"으로 바꾸고 1단계, 2단계, 3단계로 나눴습니다. 추가로 세부 요구사항을 작성해보았습니다.

가구회사가 고객 상담시 구매 견적을 도와주는 프로그램 만들기

화면
- 1단계: 상품 검색
  - 고객이 구매 원하는 상품 검색, 추가하기 (필요시 사은품 검색, 추가하기)
  - 장바구니 리스트 보고 다음 단계로 넘어가기
- 2단계: 고객 정보
  - 상품 내역, 금액보고 주소지, 연락처, 이름 등 고객 정보 입력하기
  - 배송일자 선택 버튼 누르면 해당 지역에서 배송 가능한 일자, 현재 일정들 표기된 달력 보여주기
  - 달력에서 날짜에 있는 선택 버튼 클릭하면 배송일자 입력됨
  - 확인 버튼 누르면 최종 견적서 자료가 나옴
- 3단계: 견적 결과
  - 견적서 결과 화면에서 우측에 문자, 이메일, 카톡 발송 버튼이 있고 전화번호나 이메일이 있을 때만 실행됨

세부 요구사항
- 필수 입력값은 빨간색 * 표기
- 필수 입력이 안된곳 단계는 탭 테두리에 연한 빨간색 선 추가
- 아직 방문하지 않은 단계는 연한 회색 처리

단계는 3개로 만들어졌고, 탭은 왼쪽에 임의로 추가되었습니다. 상단을 기대했지만 따로 언급하지 않았기 때문에 다른 결과가 나왔습니다.

단계별 탭 표시나 필수값 입력 등은 잘 반영되었습니다.

주소 검색 기능 추가, 세부사항 개선하기

상담사 입장에서 도움이 되는 방향으로 개선해보겠습니다. 카카오맵 주소 검색 기능을 추가하고, 배송일자 입력 부분과 견적 결과 PDF, 프린트 기능을 추가했습니다.

가구회사가 고객 상담시 구매 견적을 도와주는 프로그램 만들기

화면
- 단계 탭을 상단에 추가
- 1단계: 상품 검색
  - 고객이 구매 원하는 상품 검색, 추가하기 (필요시 사은품 검색, 추가하기)
  - 장바구니 리스트 보고 다음 단계로 넘어가기
- 2단계: 고객 정보
  - 상품 내역, 금액보고 주소지, 연락처, 이름 등 고객 정보 입력하기
    - 주소 입력은 카카오맵 우편번호 서비스(https://postcode.map.kakao.com/guide)를 사용. 주소지 입력 옆 "검색" 버튼 클릭시 새 창이 뜨고 검색하고 나온 결과를 적용시 "주소지"에 입력.
  - 배송일자 선택 버튼 누르면 해당 지역에서 배송 가능한 일자, 현재 일정들 표기된 달력 보여주기
    - 일자별로 현재 적용된 일정을 여러개 쌓아서 표기 (최대 3개)
  - 달력에서 날짜에 있는 선택 버튼 클릭하면 배송일자 입력됨
  - 확인 버튼 누르면 최종 견적서 자료가 나옴
- 3단계: 견적 결과
  - 견적서 결과 화면에서 우측에 문자, 이메일, 카톡 발송 버튼이 있고 전화번호나 이메일이 있을 때만 실행됨
  - PDF 다운로드, 프린트 버튼 추가

세부 요구사항
- 필수 입력값은 빨간색 * 표기
- 필수 입력이 안된곳 단계는 탭 테두리에 연한 빨간색 선 추가
- 아직 방문하지 않은 단계는 연한 회색 처리

카카오맵은 테스트를 위해 VSCode(Visual Studio Code)에서 live server 를 돌려보았습니다.

전체적으로 요구사항대로 만들어졌으나 일부 개선이 필요해보입니다.

배송일자 선택시 모달을 띄우고, 일정은 지역별로 필터 가능하게 합니다. 프린트/PDF에는 견적서 내용만 보이게 합니다.

가구회사가 고객 상담시 구매 견적을 도와주는 프로그램 만들기

화면
- 단계 탭을 상단에 추가
- 1단계: 상품 검색
  - 고객이 구매 원하는 상품 검색, 추가하기 (필요시 사은품 검색, 추가하기)
  - 장바구니 리스트 보고 다음 단계로 넘어가기
- 2단계: 고객 정보
  - 상품 내역, 금액보고 주소지, 연락처, 이름 등 고객 정보 입력하기
    - 주소 입력은 카카오맵 우편번호 서비스(https://postcode.map.kakao.com/guide)를 사용. 주소지 입력 옆 "검색" 버튼 클릭시 새 창이 뜨고 검색하고 나온 결과를 적용시 "주소지"에 입력.
  - 배송일자 선택 버튼 누르면, 모달이 뜨고 해당 지역에서 배송 가능한 일자, 현재 일정들 표기된 달력 보여주기
    - 일자별로 현재 적용된 일정을 여러개 쌓아서 표기 (최대 3개). (홍*동, 1234)
    - 달력 상단에 지역별 체크박스(버튼 형태) 필터 추가. 필터에 맞는 일정만 표기
  - 달력에서 날짜에 있는 선택 버튼 클릭하면 배송일자 입력됨
  - 확인 버튼 누르면 최종 견적서 자료가 나옴
- 3단계: 견적 결과
  - 견적서 결과 화면에서 우측에 문자, 이메일, 카톡 발송 버튼이 있고 전화번호나 이메일이 있을 때만 실행됨
  - PDF 다운로드, 프린트 버튼 추가. 견적서 내용만 표기

세부 요구사항
- 필수 입력값은 빨간색 * 표기
- 필수 입력이 안된곳 단계는 탭 테두리에 연한 빨간색 선 추가
- 아직 방문하지 않은 단계는 연한 회색 처리

좀더 완성도가 높아졌지만 이전에 생성된 결과물과 UI 세부 요소가 조금씩 다릅니다. 이전 결과물을 유지하기 위해서는 세부사항에 대한 내용도 모두 작성해야할것으로 보입니다.

화면을 만들기 위해 AI와 대화를 이어가며 조금씩 개선하는것도 방법이지만, 위와 같이 프롬프트를 업데이트하는 방향으로 시도해볼 수 있습니다. 이는 직접 작성한 요구사항이 얼마나 명확한지, 빠진 내용이 무엇이 있는지 이해하기 좋고, 원하는 UI와 의도를 관리하기 좋습니다.

구매 견적 프로그램 화면을 고민중이시라면 위 프롬프트들을 참고해 수정하여 AI와 함께 원하시는 화면을 만들어보시기 바랍니다.