소개
시도하고자 했던 것과 그 이유를 알려주세요.
지난주에는 AI를 활용해 CS 관리화면을 웹사이트 형태로 제작해보았으며,
단순히 아이디어를 정리하는 것에서 끝내지 않고, 실제로 접속 가능한 웹페이지를 만들고 배포하는 것까지 시도했습니다.
처음에는 문의를 확인하고 관리하는 화면에 가까웠지만,
실제로 화면을 만들고 사용 흐름을 보니 상담, 고객 정보, 영업 관련 메뉴가 더 명확하게 구분되어야 한다는 생각이 들었습니다.
그래서 이번 주에는 기존에 제작한 웹사이트를 바탕으로 메뉴 구조와 화면 구성을 내부 CRM에 가까운 형태로 다듬어보았습니다.
초기 배포는 진행했고, 이후 세부 화면과 메뉴 구성은 로컬 환경에서 계속 수정하고 있습니다.
---
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
AI에게 원하는 화면 구조와 수정 방향을 자연어로 설명하고, 로컬 개발환경에서 웹사이트를 수정하는 방식으로 진행했습니다.
작업한 코드는 GitHub에 연결하고, 배포 서비스와 연동해 실제 웹사이트로 확인할 수 있도록 했습니다.
처음에는 CS 관리화면을 제작하고 배포하는 데 집중했고, 이후에는 화면 캡처를 보면서 메뉴 구조와 문구를 계속 다듬었습니다.
사용한 프롬프트 예시는 아래와 같습니다.
text
왼쪽 메뉴 구조를 크게 다시 나눠줘.
대시보드
CS
- 상담화면
- 고객관리
- 문의관리
- 고객정보 관리
영업
- 견적서
- 세금계산서
추가로 화면을 보면서 아래처럼 세부 수정도 요청했습니다.
text
1. 서비스명을 CRM에 맞게 변경
2. 페이지 제목 아래 불필요한 설명 문구 삭제
3. 메뉴명을 더 간결하게 정리
4. CS / 영업 구분이 더 잘 보이도록 글씨 크기와 굵기 조정
5. 로고 글자 위치가 어색해 보이는 부분 정렬작업 결과, 실제 웹사이트 형태의 관리화면을 제작했고 GitHub와 배포 환경을 연결해 배포까지 진행했습니다.
현재는 배포된 화면을 기준으로 개선점을 확인하고, 추가 수정은 로컬 환경에서 먼저 진행하고 있습니다.
---
결과와 배운 점
이번 작업을 통해 AI와 함께 단순 기획뿐 아니라 실제 웹사이트 제작, GitHub 연동, 배포, 이후 수정까지 이어서 진행할 수 있다는 점을 경험했습니다.
처음에는 “CS 관리화면을 만들 수 있을까?” 정도의 시도였는데, 실제로 웹사이트가 만들어지고 배포까지 되고 나니 더 구체적인 개선점과 함께 필요한 내용들이 어떤 것인지 더욱 구체적으로 생각하고 가지처럼 뻗어나가게 되었습니다.
그 과정에서 시행착오도 겪었는데,
처음에는 페이지마다 설명 문구가 있으면 친절해 보일 것이라 생각했지만 실제 관리자 화면에서는 오히려 복잡하게 느껴졌습니다. 그래서 지금은 필요한 메뉴명과 핵심 정보만 남기는 방향으로 수정하고 불필요한 내용은 덜어내고, 신입 기준으로 이 화면을 보았을 때 어려움 없이 사용할 수 있는 방향으로 개선 중에 있습니다.
앞으로는 로컬 환경에서 화면을 더 다듬고, 실제 업무 데이터가 들어왔을 때도 사용하기 편한 구조인지 확인하며, 제가 원하는 내용들을 함께 연동해서 사용할 수 있는 방향으로 구성해볼 예정입니다.
이후에는 로컬에서 수정한 내용을 다시 GitHub와 배포 환경에 반영하는 흐름까지 정리해보고 싶습니다.
