소개
시도하고자 했던 것과 그 이유를 알려주세요.
제가 만들고 싶은 서비스의 일부에 들어갈 타로리딩 서비스 부분을 만들어보고 싶었습니다.
처음엔 지피티가 제안해준 카톡 봇을 만들어보고 싶었으나,,, 난이도가 있어서 스터디에서 추천해준 웹앱 형식으로 만들어 보기로 했습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
클로드 3.5 Sonnet, 지피티 4o, codesandbox
우선, 웹앱을 만들어본 적이 없기에 클로드에게 만들어보라고 해봤습니다.
클로드가 react 코드로 만들어 주는 걸 클로드에서 바로 테스트가 가능하지만, 다른 툴을 사용해보고 싶어서 지피티에게 추천을 부탁했습니다.
여러 툴을 소개해줬는데 그 중 codesandbox를 선택해서 react코드를 넣어봤습니다.
코드샌드박스에서 코드를 테스트하면서 클로드와 함께 코드를 발전해 갔습니다.
그 중 AI 연동을 하고 싶어, open ai api를 넣어 구현하는 것을 시도해봤는데 오류가 났습니다.
클로드와 지피티 모두에게 물어보고 시도해봤으나, 되지를 않고, 무엇을 빼먹은건지 원래 안되는건지 모르겠습니다 ^^;;
--
클로드에게
지피티에게 물었습니다.
코드샌드박스 사용법 몰라서 캡쳐해서 지피티에게 물어봅니다.
그리고 클로드에게 다시 만들어달라고 하면, 두 개의 파일을 만들어줍니다.
처음에, 랜덤 1장으로 보는 오늘의 운세만 넣었다가,
직접 질문을 받고 카드 3장을 뽑아서 봐주는 것도 추가해달라고 했습니다.
디자인도 신비롭고 아름답게 업그레이드 시켜달라고 했습니다.
카드 이미지도 넣어달라고 하구요.
가끔 부분 부분 수정 코드만 줄땐, 어디다 넣으라는건지 모르니 다시 전 체를 짜달라고 했습니다.
그렇게 탄생한게 아래 버전1입니다.
여기에 AI 연동 부분이 가능한지 궁금하여 지피티에게 타로점을 봐보라고 하고, 그걸 만들 수 있느냐 물었습니다. 가능하다고 하여, 클로드에게 그 부분을 부탁했습니다.
API 도 넣고, 코드도 넣고 다 했는데 오류가 뜹니다.
이 부분 잡으려고 한참 씨름하다가, 아직 해결 못했습니다. 스터디 전까지 해결하기 목표!!
해당 결과는 아래 버전 2 입니다.
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
실패담도 괜찮아요. 시행착오나 도움이 필요한 부분이 있나요?
앞으로의 계획이 있다면 들려주세요.
타로 운세 버전 1 (AI 리딩 없는 버전)
클로드가 짜준 코드를 보니, 카드 3개에 대한 정보만 넣어줬네요.
어쩐지 계속 같은 얘기만 나오더라니.. 78장 모두 넣고 싶어서 시도 중입니다.
타로 운세 버전 2 (AI 오류)
AI 해석 부분 오류.
여전히 제한된 카드 내에서 해석하고 있어서 추가 작업이 필요합니다.
중간에 지피티에게 AI해석이 들어가게 코드 수정을 부탁했더니, 더 이상하게 바꿔놔서 클로드에서 이어서 작업했습니다.
클로드에게 카드 이미지를 넣을 수 있냐 했더니 본인이 기호로 심플하게 만들어 보여주는것이 인상적이었습니다. 나중엔 이미지 직접 만들어서 추가 하는 걸로 바꿔야겠지요.
코드샌드박스가 많이 쓰는 툴인지...궁금하네요. 정보는 별로 없는거 같은데.. 안쓰던 툴을 써본 것에 의의를 두려고 합니다.
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
(내용 입력)