소개
배경은 지난 게시물 참고해주세요: https://www.gpters.org/dev/post/want-quickly-create-prototype-OGrxjmxHtkS16J2
진행 방법
Chat GPT를 사용해 PRD만듭니다.
질문1) 아래의 정보를 잘 기억한 뒤, 이어지는 질문에 대한 답을 해주면 돼. 우선 내가 만들고 싶은 서비스의 배경에 대해 설명해줄게: ~~~~~~배경
질문2) 일단 상단 overview기능을 통해, 전체 모델의 현황을 알려주고 싶어.
챗지피티 답변 중 일부)
주요 요구사항:
상단 주요 요약 정보
전체 모델 수 (예: 300개)
에러 상태인 모델 수
위 정보를 한눈에 볼 수 있는 대시보드 형태로 제공
모델 리스트
필터 기능
문제 있는 모델만 유형별로 필터링
모델 검색 기능
모델명, 생성자 등으로 검색 가능
리스트 정렬 기능
최신 수정일, 에러 여부 등으로 정렬 가능
모델 상태 시각화
에러 발생 시 빨간색 하이라이트 등으로 문제 모델을 즉시 파악
모델 상세 기능
클릭 시 모델의 코드 확인, 수정, 재서브밋 가능
에러 원인 및 모델 설명 요약
GPT를 활용하여 에러 원인과 모델 설명을 한 줄로 요약하여 표시
이런식으로 질문을 주고 받으며, 상세 기능정의서를 만들어냅니다.
해당 기능정의서를 Claude에 입력하여 다양한 화면에 대한 아이디어를 만들어냅니다.
Tip1. 챗지피티에게 이걸 클로드에게 물어보려고 하니, 프롬프트를 만들어달라고 하면 최적화 된 프롬프트를 제작해줍니다.
Tip2. 클로드는 React를 기반으로 만들어주는데요. HTMl로 만들어달라고 하시는게 추후 수정할 때 편합니다. (저는 어차피 화면만 만들거기 때문)
클로드로는 화면을 합치거나 자유자재로 편집하기 어려워 Windsurf를 사용했습니다.
클로드가 만들어준 HTML 코드를 입력한 뒤, 윈드서프에게 이 코드에 대해 학습하라고 이야기합니다.
그 이후에 제가 원하는 방향대로 수정해달라고 요청합니다. 그러면 Windsurf가 알아서 짠! 하고 만들어줍니다.
한번 다들 시도해보세요. Windsurf 에 '음식 추천 웹서비스 만들어줘 html로' 이렇게 하면 1분이면 음식추천 웹사이트가 뚝딱! 하고 나옵니다. 직접 해보시라고 제가 사진은 안올리겠습니다.
결과와 배운 점
솔직히 개발지식이 좀 있어야, 이런 AI개발도구들을 원활히 활용할 수 있습니다. Claude나 Windsurf가 내가 원하는대로 만들어주지 않는 경우가 많습니다. 제가 개발지식이 좀 있었으면 명령을 좀 더 잘할 수 있지 않았을까? 이런생각이 듭니다.
아기 다루듯이 하나씩 요소 하나 하나 알려줘야 합니다. 이럴 시간에 그냥 내가 하겠다! 이런 개발자분들도 있을 것 같습니다. 하지만 저는 개발을 못하기 때문에... 많은 시간을 들여서라도 이렇게 해야 합니다.