소개
인스타 캐러셀 AI 엔진을 Develop 해보기로 결정했다.
진행 방법
기존에 만들던 것을 다시 들여다보니 완전 자동화를 꿈꾸면서 욕심을 많이 부렸던 것 같다.
그래서 과감히 필요없는 기능은 삭제하고 심플하게 수정 보완하기로 했다.
1. 단순화 작업 - 불필요한 기능 삭제
2. 기능 보정 및 추가 - Google AI studio 상에서 ChatGPT한테 물어가면서
1차 수정 : 주간 영어표현 추천 기능 삭제하고 Daily Expression 3가지만 추천, Step 3. TTS 포함 기능 삭제, G-version 삭제
수정 요청
1. "Recommend" Text Plan 실행 시 weekly plan 제외, Daily candidates 3가지 각각 영어와 한국어 분리해서 표시
2. "Audio" step 제거 (2개의 execution steps로 유지)
3. "G-version" 제거2차 수정 : 로딩 표시 요청, 게시글 반응에 따라 추천에 영향을 끼치는 기능 삭제
1. Text Plan과 Vusuals 실행시 실행되고 있다는 것을 표현(무언가 돌아가는 표시)을 해줘
2. Growth Targets 제거해주세요3차 수정 : 슬라이드 수정, 워터마크 수정, 결과물(이미지) 다운로드 기능 추가
1.slide preview에서 slide 1에서는 한국어로만 표현해주세요. (ex. "완전 쩔어" 영어로 어떻게 표현할까요?)
2. slide의 Today's Expression, Meaning, Example, Summary 글자는 조그맣게 해주고, 내용에 해당하는 텍스트들의 폰트를 크게 해주고, 각 텍스트가 이미지 위에 겹쳐지게 해주세요2. 모든 slide에 워터마크 @samcho0127로 변경해주세요.
3. 생성된 slide들은 다운받을 수 있게 해주세요.4차 수정 : 폰트 수정, 슬라이드 조정
Text Plan & Visuals 실행 후 결과물에 대한 수정 요청(나머지 로직은 그대로 유지)
1. slide 2(today's expression)와 3(Meaning)을 합쳐서 오늘의 표현 설명을 해주고 글자 폰트를 70%로 조금 줄여서 화면에 잘 맞게 해주세요.
2. slide 4(example 01)에 slide 5(example 02)를 추가해주고 글자 폰트를 70%로 조금 중여서 화면에 잘 맞게 해주세요.
3. 이미지와 텍스트를 합쳐서 이미지를 다운로드 받으면 텍스트도 그대로 포함되게 해주세요.5차 수정 : 수정하지 않았던 다른 기능이 먹통이 되어 되살리라고 요청
recommend 실행했는데 Daily Candidates 결과물이 나오지 않습니다. 수정해주세요6차 수정 : 예시문 슬라이드를 의도와 다르게 수정하여 재수정 요청, 폰트 수정 다시
마지막 수정 요청 : text plan & visuals 실행 후 slide에서
1. slide 3(real-life examples) 내의 예시문을 2개의 slide로 나눠줘.
---
ex.
slide 3) Example 01
You really need to read the room before you speak.
(말하기 전에 분위기 파악 좀 해야겠어.)
slide 4) Example 02
It's important to read the room in a meeting.
(회의에서는 분위기를 읽는 게 중요해.)
slide 5) Summary
---
2. slide 2 영어표현(Read the room)의 폰트를 150%로 확대해줘
3. slide 4에서 "Summary:" 삭제. 나머지 텍스트 폰트 80%로 축소7차 수정 : 폰트 조정
수정 요청 : text plan & visuals 실행 후 slide에서slide 2
- 영어표현(Let's play it by ear)은 폰트는 그대로 유지
- 한글 설명만 폰트를 50% 축소API 호출 실패 메시지 --> Google Project API 연결해서 테스트를 더 많이 할 수 있게 함. 얼마나 과금될지는 모르겠음. 테스트 엄청 많이 했는데...
그래서 아래와 같은 결과물 -- 사실 디자인에는 신경 못 썼음.ㅎㅎ
버튼이 있는 웹페이지의 스크린샷
이제는 Github로 가자
1) New Repository 생성
2) 코드 구성
/src
├─ main.tsx
├─ App.tsx
└─ services/
└─ geminiService.ts
index.html
package.json
tsconfig.json
vite.config.ts
Vercel로 가자
1) 로그인할 때 Github와 연결되게 하기
2) Vercel Dashboard → Project Settings → Environment Variables(API Key 연결되는 곳)
3) Deploy(배포)
배포가 계속 안된다. → 캡쳐해서 ChatGPT에게 물어본다 → Github 커밋 수정 → Vercel 자동 빌드/배포/URL 갱신
이 짓을 수차례.....
드디어 배포 URL에서 최종 확인
http://insta......app
UI 정상 로딩
API 호출 시 에러 없음 → 성공 🎉
결과물에 대해 다운로드하여 인스타그램 업로드까지 완료!!
한국어 텍스트와 이미지가 포함된 웹사이트의 스크린샷
결과와 배운 점
중간에 포기하고 싶었지만 목표가 있었기에 끝까지 하게 되었다.
배포된 결과물을 보니 수정하고 싶은 부분이 또 생긴다. (이 부분 더 손 볼걸..) 다음주에 수정하자
앱빌드 과정을 처음부터 끝까지 수행해보았으니 다른 아이디어가 생기면 또다른 앱을 만들어보련다. 더 빠르게
도움 받은 글 (옵션)
"똘똘한 앱 하나"를 위한 두 번째 여정 - 인스타 캐러셀 엔진 : ChatGPT, Google AI Studio, Apps Script, Sheet
