챗GPT 앱 두 번째 도전! Claude와 함께 만든 나만의 프롬프트 저장소

소개

지난 주 토요일 모각스터디에서 스터디장님이 VS Code에서 샘플 예제 소스를 정리하고, 브라우저에서 로컬호스트로 실행하는 방법을 알려주셨어요.

Pizza앱 샘플을 기반으로 저만의 GPT 프롬프트 저장소 앱을 만들기 시작했답니다 😊

진행 방법

• 샘플 코드 수정: Pizza앱 예제 소스코드를 다운로드 받아서 VS Code에서 수정해 시작

ALT

Adobe Adobe Adobe Adobe Adobe의 코드 편집기 스크린샷

• 로컬 실행 학습: VS Code에서 로컬 서버로 앱 실행하는 방법을 스터디장님께 배움

• Claude Code for VS Code 활용:

  • 주요 기능에 대한 요구사항을 Claude에게 정리하게 하고

  • 그에 맞춰 코드를 수정해 나감

• 테스트 반복:

  • 수정한 코드를 브라우저에서 직접 실행하며 동작 확인

ALT

한국어 텍스트가 있는 검은 화면

ALT

한국어 텍스트가 있는 검은 화면

ALT

한국어 텍스트가 있는 검은 화면

// 예시: 프롬프트 추가 기능 구현 시 사용한 부분
const handleAddPrompt = () => {
  if (!newPrompt.trim()) return;
  setPrompts([...prompts, newPrompt]);
  setNewPrompt("");
};

실행 화면

결과와 배운 점

• Claude와 함께 요구사항 정리를 하며 기능 구현이 더 명확하게 진행됨

• 코드를 수정하고 바로 브라우저에서 확인할 수 있어 피드백 루프가 짧아짐

• 무엇보다 “바이브 코딩”이 처음엔 어렵게 느껴졌지만, 겁먹지 말고 차근차근 하면 결국 앱을 완성할 수 있다는 자신감을 얻었어요 💪

🙂 작은 시도들이 쌓여 하나의 앱이 되어가는 과정이 참 뿌듯했습니다!

다음엔 ChatGPT 개발모드에서 실제로 더 완성된 프롬프트 저장소 앱을 실행까지 도전해볼게요!