웹사이트 개선안 추천 제안 비교 - chatGPT vs claude

클로드 코드로 웹사이트를 개발하고 있습니다.

한국 웹 사이트의 홈페이지

웹사이트를 수정하는데, 코드를 바로 수정하기 전에 먼저 개선안을 받아보고자 했습니다.

클로드 코드로 개발, 수정하는 과정에서 수정 결과가 산으로 가는 것을 여러 번 경험했거든요.

그래서 chatGPT 와 claude 개선안을 받아보고 뭐가 더 나을지 비교해보고자 했습니다.

진행 방법

  1. 어떤 도구를 사용했고, 어떻게 활용하셨나요?

claude code, visual studio code

chatGPT, claude - 개발 코드를 수정하기 전에 어떻게 수정할지 미리 물어보기

Appsscript - 웹사이트에서 제공할 정보 크롤링하기

2. 수정하고자 했던 것

고령자의 취미 프로그램 정보를 appsscript로 수집하고자 하였는데, 너무 많은 정보를 수집하려다 보니, 정보들이 표준화 되지 않아서 여러 날 실패했습니다. 욕심이 과했죠 ㅜㅜ

한국어 웹 사이트의 스크린 샷

클로드의 우수성을 많이 들었지만, 요즘 답변이 느려지거나 끊기는 경우가 종종 있었고, 빠르게 의견을 듣기는 챗gpt가 익숙해서요.

  1. 결과

<chatGPT>

  1. 프롬프트

프로그램 정보는 카테고리, 프로그램명칭, 수강료, 수강정보, 장소 등으로 정하고자 하였는데, 테스트해보니 각 제공처 별로 프로그램 정보를 제공하는 방식이 다릅니다. 다음에서 수집처와 프로그램 정보를 제공하는 방식을 고려하여, 프로그램 정보 수집하는 방법과 웹사이트에 정보를 제공하는 방식을 개선하고자 합니다.
  1. 몇 차례 의견을 주고 받고 나서 다시 정리된 계획입니다.

한국어 앱의 스크린 샷

2) 결과

한국어 페이지의 스크린 샷
한국어 페이지의 스크린 샷
한국어 페이지의 스크린 샷

다이어그램

네트워크의 구조를 보여주는 다이어그램

와이어프레임

네트워크의 구조를 보여주는 다이어그램

< Claude >

chatgpt에서 정한 수정계획을 정하고 개선안을 받았습니다.

한국어 응용 프로그램의 스크린 샷
한국 단어 목록의 스크린 샷
한국 문자 메시지의 스크린 샷
한국어 앱의 스크린 샷
한국 이모티콘 앱의 스크린 샷

예시 시안도 chatGPT와 Claude로 받아봤습니다.

  • 기존 시안과 chatGPT 개선 시안

    chatgpt는 시안 이미지를 보여줍니다.

한국어가있는 모바일 앱

  • claude 개선 시안

    claude는 아예 예시 시안을 코드로 작성해서 직접 작동해볼 수 있도록 해줍니다.

화면에 한국어가있는 모바일 앱

결과와 배운 점

  • 한 가지 도구에만 의존하면, 제안해주는 방식에서 다른 방법을 생각하기 어려운 때가 있는데, 두 가지 도구를 비교해 볼 수 있어서 참고가 되었음.

  • 두 가지 제안과 시안을 비교해서 취사선택 할 수 있음.

  • 구조화하거나 이미지를 보여주는 기능은 클로드가 훨씬 더 잘함.

  • claude code로 바이브코딩하고 수정할 때 수정이 잘못되어 어느 단계에서 되돌이킬지 애매한 때가 종종 있는데, 어떻게 수정할지 claude에서 직접 물어봤습니다. 아직 해보진 않았지만, 이렇게 시도해보겠습니다.

    현재 클로드 코드로 개발되어 있는 웹사이트에서 추천해주신 개선안을 수정하려면, 기존 작업 삭제, 현재에서 변경 등 어떤 방식이 좋을까요?

    한국어 텍스트가있는 페이지의 스크린 샷
    한국어 앱의 스크린 샷
    한국어 앱의 스크린 샷
    한국어 웹 사이트의 스크린 샷

2

👉 이 게시글도 읽어보세요