2시간 만에 끝! 카드뉴스 웹앱, 환경설정부터 배포까지 완벽 가이드

카드뉴스 웹 앱 만들기 준비물 체크 & 환경 설정

오늘 새벽 4시 라이브 코딩 함께 해줘서 고마워! 오늘은 카드뉴스 웹 앱을 만들 건데, 시작하기 전에 준비물이 잘 갖춰졌는지 한번 확인해 보자.

1. 데스크탑 앱 다운로드 및 실행

먼저, 카드뉴스 웹 앱을 만들기 위해 필요한 데스크탑 앱을 다운로드 받고 실행해야 해.

• ChatGPT (채치PT) 앱:
  • 크롬 브라우저를 열고 "채치PT 다운로드"라고 검색해.
  • 첫 번째 나오는 링크를 클릭해서 "채치PT 데스크톱 다운로드"를 받아.
  • 맞는 버전을 다운로드해서 실행해 줘. 다운로드나 실행에 시간이 좀 걸릴 수 있으니 미리 해두면 좋아.
• Claude (클로드) 앱:
  • 크롬 브라우저를 열고 "클로드"라고 검색해.
  • 첫 번째 나오는 클로드 링크를 클릭해서 다운로드 받아. (맥 사용자는 맥용으로 다운로드)

2. 크롬 브라우저 기본 설정

오늘 강의에서는 크롬 브라우저를 주로 사용할 거야.

• 크롬 브라우저를 실행하고 오른쪽 위에 있는 세로 점 세 개를 눌러.
• '설정'으로 들어가서 왼쪽 메뉴에서 '기본 브라우저'를 클릭해.
• '기본 브라우저 설정'을 눌러서 크롬을 기본 브라우저로 선택해 줘. (엣지나 사파리 등을 사용하던 친구들도 오늘만큼은 크롬으로 설정해 주자!)

3. 필수 확장 프로그램 설치

이제 우리를 도와줄 필수 확장 프로그램을 설치할 거야.

• 크롬 브라우저 오른쪽 위에 있는 세로 점 세 개를 다시 눌러.
• '확장 프로그램' 메뉴에서 'Chrome 웹 스토어 방문하기'를 클릭해.
• ChatGPT 사용자: 검색창에 "ChatGPT"라고 영어로 입력하고 엔터를 쳐. 제일 위에 나오는 ChatGPT 확장 프로그램을 선택해서 'Chrome에 추가'를 눌러 설치해 줘.
• Claude 사용자: 검색창에 "Claude"라고 영어로 입력하고 엔터를 쳐. 제일 위에 나오는 Claude 확장 프로그램을 선택해서 'Chrome에 추가'를 눌러 설치해 줘.

설치 후 확인:

• 설치 후 설정 화면이 뜨면 그대로 진행하고, 앱을 다운로드 받았다면 앱을 열어서 로그인까지 완료해 줘.
• ChatGPT의 경우, 확장 프로그램 아이콘을 눌렀을 때 핀 고정을 해주면 화면에 보이게 돼.
• Claude도 마찬가지로 확장 프로그램 아이콘을 눌러서 채팅창이 뜨는지 확인해 봐.

중요: ChatGPT와 Claude 둘 다 설치할 필요는 없어. 자신이 사용할 것 하나만 설치하면 돼.

4. 데스크탑 앱 실행 및 프로젝트 설정

이제 다운로드 받은 데스크탑 앱을 실행하고 프로젝트를 설정할 거야.

• ChatGPT (채치PT) 앱 실행:
  • 다운로드 받은 ChatGPT 데스크탑 앱을 실행해.
  • 왼쪽 위에 있는 'Codex'를 선택하면 바이브 코딩 도구인 Codex가 활성화돼.
• Claude 앱 실행:
  • 다운로드 받은 Claude 데스크탑 앱을 실행해.
  • 'Claude Code'를 선택하면 돼.

프로젝트 설정:

• ChatGPT (Codex):
  • 왼쪽 위에 '프로젝트 선택'을 누르고 '새 프로젝트'를 선택해.
  • '폴더 추가'를 눌러서 오늘 만들 카드뉴스 웹 앱을 위한 새 폴더를 만들어줘. (예: "카드뉴스 웹 만들기")
  • 폴더를 선택하고 '열기'를 누른 후 '프로젝트 만들기'를 클릭하면 프로젝트 이름이 설정돼.
• Claude (Claude Code):
  • 'Claude Code'를 실행하고, '로컬' 말고 두 번째 옵션을 선택해.
  • '폴더 열기'를 눌러서 오늘 만들 카드뉴스 웹 앱을 위한 새 폴더를 만들어줘. (예: "카드뉴스 웹 만들기")
  • '열기'를 누르고 '워크스페이스 신뢰'를 클릭해.
  • 주의: 만약 'Git 다운로드'하라는 메시지가 뜬다면 Git을 다운로드하고 실행해야 해. (윈도우는 64비트 버전, 맥은 별도 안내 참고)

5. 바이브 코딩 도구 설정 (AI에게 명령 내리기 준비)

이제 AI 직원에게 명령을 내릴 준비를 하자!

• ChatGPT (Codex):
  • 왼쪽 아래 '승인 요청'이라고 되어 있다면 '나 대신 승인'으로 바꿔줘. (이렇게 해야 AI가 물어보지 않고 알아서 작업해.)
  • 오른쪽 위에 '모델 선택'에서 사용할 모델을 선택해. (무료 버전은 5.6 테라, 유료 버전은 더 좋은 모델 사용 가능)
• Claude (Claude Code):
  • '편집 자동 수정'이 켜져 있는지 확인하고, 꺼져 있다면 켜줘.
  • 오른쪽 위에 '모델 선택'에서 'Opus 5'를 선택하는 게 좋아. (무료 버전은 Opus 5, 유료 버전은 더 좋은 모델 사용 가능)

6. 온라인 저장소 및 배포 도구 회원 가입

이제 우리가 만든 결과물을 온라인에 저장하고 웹 주소를 만들 도구들에 가입할 거야.

• GitHub (기터브):
  • 크롬 브라우저에서 "GitHub"를 검색하고 고양이 손 모양 아이콘이 있는 첫 번째 링크로 들어가.
  • 'Sign up'을 눌러 회원 가입을 해. (구글이나 애플 계정으로도 가능)
• Vercel (버셀):
  • 크롬 브라우저에서 "Vercel"을 검색하고 들어가.
  • 'Sign up'을 누르고 GitHub 계정으로 회원 가입하는 것을 추천해. (구글 계정으로도 가능)
  • '합' (Hobby) 플랜을 선택하고 진행하면 돼.
• Superbase (슈퍼베이스):
  • 크롬 브라우저에서 "Superbase"를 검색하고 초록색 번개 모양 아이콘이 있는 링크로 들어가.
  • 'Start your project'를 누르고 GitHub 계정으로 회원 가입하는 것을 추천해. (구글 계정으로도 가능)
  • 회원 가입만 완료하고, 프로젝트 설정은 나중에 해도 괜찮아.

주의: Superbase 회원 가입 시, 프로젝트 설정 화면이 뜨면 일단 건너뛰고 회원 가입까지만 완료해 줘.

7. AI에게 카드뉴스 웹 앱 만들기 명령 내리기

이제 AI 직원에게 우리가 만들고 싶은 카드뉴스 웹 앱에 대해 명령을 내릴 시간이야!

• ChatGPT (Codex) 또는 Claude (Claude Code) 앱으로 이동.
• 아래 명령어를 복사해서 붙여넣고 실행해 줘.

나만의 카드뉴스를 만드는 웹을 만들어 줘. 사용자가 우리 브랜드 페르소나와 주제를 입력하면, 주제에 맞는 글과 이미지를 생성해 줘야 해. 이미지는 반드시 OpenAI의 GPT-4 이미지 2 API를 사용해 줘. 사용자는 자신의 사진이나 캐릭터를 업로드하고 카드뉴스에 사용할지 선택할 수 있어야 하고, 사용한다면 캐릭터 시트도 만들 수 있어야 해. 카드 개수, 이미지 선택, 카드별 제목, 본문, 이미지 순서, 디자인 수정도 가능해야 해. 이미지는 한글이 깨질 수 있으니, 글자 없는 이미지 생성 후 웹에서 정확한 한글을 합성해 줘. 완성된 카드는 PNG로 내려받을 수 있게 하고, 나중에 인스타그램에 자동으로 업데이트할 수 있는 버튼도 만들어 줘. MVP 데모 앱이 아니라 실제로 동작하는 앱으로 만들어 줘.

완성된 결과물은 GitHub에 올리고, Vercel로 웹 주소를 만들고, Superbase를 이용해서 로그인 기능과 카드뉴스 생성 기록을 저장해 줘.

AI가 작업하는 동안:

• API 키 설정: AI가 API 키를 요구할 수 있어. 이 API 키는 신용카드와 같아서 유출되면 안 되니, 안전하게 관리해야 해. 카드 등록 후 충전해서 사용하는 방식이야. (카드뉴스 하나 만들 때마다 몇백 원 수준으로 비용이 발생할 수 있어.)
• 확장 프로그램 활용: AI가 작업할 때 크롬 브라우저 확장 프로그램을 활용할 수 있도록 설정해 줘. (크롬 브라우저 설정 > 확장 프로그램 관리 > 파일 URL 액세스 허용 켜기)
• "네가 좀 알아서 해" 활용: AI가 계속 질문하거나 요청할 때, "네가 좀 알아서 해"라고 명령해서 스스로 해결하게 만들어 봐.

8. 결과 확인 및 수정

AI가 작업을 완료하면, Vercel에서 생성된 웹 주소로 접속해서 카드뉴스 웹 앱을 확인해 볼 수 있어.

• 결과 확인: Vercel에서 생성된 주소로 접속해서 카드뉴스 앱이 잘 작동하는지 확인해 봐.
• 수정: 마음에 들지 않는 부분이 있다면 AI와 대화해서 수정해 나가면 돼. (예: "이 부분 디자인을 이렇게 바꿔줘", "인스타그램 자동 업로드 버튼을 추가해 줘")
• 꿀팁:
  • 파비콘 설정: 웹사이트 아이콘을 변경하고 싶다면 AI에게 "내 카드뉴스 웹에 어울리는 파비콘 설정해 줘"라고 명령해 봐.
  • 마우스 효과: 마우스 모양이나 클릭 효과를 추가하고 싶다면 AI에게 "마우스 모양, 따라다니는 파티클, 클릭 효과를 내 카드뉴스 웹에 적용해 줘"라고 명령해 봐.
  • 원소스 멀티유즈: 카드뉴스뿐만 아니라 블로그 글, 쓰레드 글 등 다양한 콘텐츠를 한 번에 만들 수 있도록 AI에게 명령해 봐.

오늘 강의는 여기까지야! 설정하는 과정이 조금 복잡했을 수 있지만, 이 과정을 통해 앞으로 AI와 함께 다양한 웹 앱을 만들 수 있는 발판을 마련한 거야. 궁금한 점은 언제든지 다시 물어보고, 앞으로도 꾸준히 시도해 보길 바라!