오렌지박스
Replit 찍먹해보기
OrangeBox
Category
- AI
Replit
이 쉬운 이유 "자연어 프롬프트"만 입력 + "웹 브라우저"만으로 앱을 개발할 수 있기 때문
•
특징
◦
Full-Stack Development - 프론트/백/DB/API
◦
Context-Aware Coding - 좋은 모델 사용 → 더 많은 맥락 정보 파악
▪
현재 편집하는 파일 뿐만 아니라, 전체 프로젝트의 "맥락"을 이해하며 코딩(=현재, 파일의 변화가 다른 부분에는 어떤 영향을 미치는지)
◦
Design-to-Code - Figma Import 가능
◦
One-Click Deployment - No AWS, No Docker, No DevOps, .replit.app domain에서 쉽게 배포
▪
= 인프라 관리가 필요없다.
▪
모바일 앱에서도 빌드 가능
•
요금
◦
한번의 작업 수행(=checkpoint)마다 0.25$과금
▪
단순 수정 작업 - 0.25$이하
▪
디버깅, 다중 파일 작업 - 0.25$이상
▪
Extended thinking + High Power Mode 사용 시 더 많은 비용
◦
작성자는 Replit Core Credit(25$ Monthly)를 3~4일만에 사용했다고 함
▪
(작가추산) 단순 CRUD앱은 5$~10$, 인증이나 DB/third party등 복잡한 앱은 30$~50$
•
성장세 자체는 lovable이 더 가파른 느낌
https://www.saastr.com/the-vibe-coding-tam-how-big-can-this-market-really-get/
Replit 강의 요약
•
Agent Code 철학
◦
Agent Code 철학1. 프로젝트를 깔끔하게 유지해라!
▪
기능은 단계적으로 추가 → 추가 후 반드시 QA → 문제 시 checkpoint로 rollback
•
실제 강의에서 보여주는 내용도 이 흐름에서 크게 벗어나지 않음
◦
Planning and Building an SEO Analyzer
◦
Planning and Building a Voting App
◦
Agent Code 철학2. 인내심?
▪
Agent가 왜 그렇게 행동했는지 항상 근거를 설명하니 그거를 잘 지켜보기
▪
디버깅 시 인내심 가지기
•
바이브코딩의 핵심 개념 5가지
◦
Thinking - 코드 자체에 대한 고민보다는 > 무엇을, 왜, 어떤 체계로 만들것인가?
▪
Logical > Analytical > Computational > Procedural
•
주식?
◦
Logical - 무지성 풀매수
◦
Analytical - 차트 보니까 여기가 바닥이네
◦
Computational - 매수 조건 체크
◦
Procedural - 자산 리벨런싱 원칙
◦
Frameworks
▪
오히려 이 부분에서는 LLM한테 주저 말고 최적의 도구를 찾아달라고 문의 하는 걸 권유 하는 듯
◦
Checkpoints
▪
버전 관리 → 실수 시, 피해를 최소화하기 위해 최대한 짧게 짧게 스프린트
•
아직은 잘 모르겠지만, 하다 보면 이 스프린트의 범위가 얼마나 되는지(=Agent한테 한번에 얼마나 많은 작업을 시켜도 되는지) 알지 않을까 싶다. 우선은 한번에 다 빌드는 X 정도로 생각
◦
Debugging
▪
LLM에게 문제 상황과 해결 방안을 정확히 알아야 함 → 근데 이렇게 하기 위해서는 app이 어떻게 동작하는지 어디서 오류가 발생했는지 알고 있어야 함
•
Agent Code 철학 2와 관련 있는 내용인데, 여튼 강의를 보다보면 특별한 내용은 아니지만 강의자가 agent 메시지를 하나씩 뜯어보고 어떤 작업을 하는지 이해하려고 함.
•
디버깅을 잘하기 위해서는 Agent를 잘 관찰해야함.
◦
만약, 현재 상황에 대해서 잘 이해를 못했으면 무작정 에러를 고쳐달라고 하기 보다는
▪
어떤 상황인지? > 무엇이 문제인지? 명확히 상황을 파악할 수 있는 질문을 먼저 던지는 것도 방법일듯
◦
Context
▪
중의적 의미. LLM이 처리할 수 있는 토큰의 양 OR 말 그대로 추가 정보 (사진, 문서 등...)
•
Figma import도 하나의 추가 Context가 될 수 있음.
▪
training data가 예전 버전일 수 있으니 여튼 최신으로 줘라!
•
Planning and Building a Voting app에서 관련된 예시가 나옴 (위키피디아 + 원하는 UI구조)
•
New Feature 출시 가이던스
◦
Provide Context - 현재 상태 + 추가 기능을 통해 달성하고자 하는 목표
▪
(현재 상태) Replit에서 파이썬으로 주식 이상 탐지 앱을 만들고 있어. tickers.csv 파일에서 종목을 읽어오는 것까지는 완성했어.
▪
(목표) 이제 '가격이 5% 이상 하락하면 슬랙으로 알림 보내기' 기능을 추가할 거야
◦
Frameworks & Docs - 도구, 제약사항, 레퍼런스 등
▪
(도구) 주가 데이터는 yfinance 라이브러리를 쓰고, 슬랙 알림은 slack_sdk를 쓸 거야.
▪
(제약사항) 특히 슬랙은 Webhook 방식 말고 'Block Kit' 방식을 써서 예쁘게 보내고 싶어.
▪
(레퍼런스) 슬랙 API 문서의 JSON 구조를 참고해서 코드 짜줘.
◦
Incremental Changes - 작업 분할
▪
(STEP1) yfinance로 '오늘 시가 대비 하락률' 계산 로직만 먼저 검증해줘
▪
(STEP2) 슬랙에서 메시지 테스트 "Hello World"
▪
(STEP3) 계산 로직을 슬랙 메시지에 얹어서 전송
•
근데, 이런걸 한번에 하나씩 메시지를 줘야 하나..? 한번의 프롬프트에 얼마나 많은 컨텍스트를 줘야 하는지 고민됨
replit 실행
•
매우 간단
◦
가입하고 > App Box안에 명령어 입력하면 끝.
•
SEO 분석기 프롬프팅
help me create an interactive app that displays the SEO (meta) tags for any website in an interactive and visual way to check that they're properly implemented. The app should fetch the HTML for a site, then provide feedback on SEO tags in accordance with best practices for SEO optimization. The app should give google and Social media previews.
•
명령어 실행 후1
◦
기술적인 검토
I'm currently focused on the core functionality: fetching and parsing the HTML. The idea is to use a library like Beautiful Soup for tag extraction. Afterwards, I'll need to figure out how to structure the interactive display of meta tags. I'm exploring different UI frameworks for a clean, user-friendly experience.
I'm now zeroing in on the detailed requirements. I'll need to fetch HTML, parse meta tags, and present them in a user-friendly, interactive display, incorporating Google Search and social media previews. Feedback on best practices is crucial, too. I'm exploring the nuances of backend proxies to avoid CORS issues.
◦
프로젝트 설계
I've sketched out the project structure, including the shared/schema.ts for data types and the shared/routes.ts file that defines the API. The core API endpoint will be /api/analyze. I'm going to start by defining the SeoAnalysisResult interface. I'm thinking a basic structure including meta tags, Open Graph, Twitter cards, and any potential issues or recommendations.
◦
아키텍쳐
I've outlined the project's architecture, pinpointing key modules. The plan includes a proxy on the backend for fetching HTML (using axios and cheerio). Shared types and API routes are defined, and I've sketched the frontend with components for different previews and issues. I'm focusing on defining the SeoAnalysisResult schema, and have considered a drizzle-zod schema even for no-DB versions. I'm moving towards the frontend implementation now.
◦
데이터 모델링 및 실행
I've decided to create a very basic table schema with Drizzle for the analyses, just to store the URL and timestamp, even if data persistence isn't required. I've also sketched out the API routes, and defined the SeoAnalysisResult interface in shared/schema.ts. Now, I'm focusing on getting cheerio up and running to fetch and parse the HTML data.
◦
프롬프트를 입력하면 무엇을 왜, 어떻게 만들었는지에 대해 Agent가 상세한 계획을 세우고 접근
▪
이런 사고방식을 SDD(Spec Driven Development)라고 하는 듯.
▪
Agent가 수행하는 방식에 이런 개념이 녹아 있는 것 같다.
•
명령어 실행 후2
◦
Agent가 어떤 작업을 했는지, 어떤 파일을 만들었는지 상세 목록을 볼 수 있음
◦
조금 신기했던 포인트1
▪
작업 중간에 Agent가 어떤 생각을 했는지 흐름이 나와있음
◦
조금 신기했던 포인트2
▪
웹 브라우저 안에서 DB 테이블 내역을 손쉽게 조회할 수 있음 (= SEO 분석기에서 접근한 사이트 정보)
▪
만약에 필요한 컬럼들이 있다면 사전에 테이블 정의서를 미리 작성하는 것도 좋을듯
◦
조금 신기했던 포인트3
▪
결과물이 어떤 기기에서 어떻게 보이는지 살펴보고 그에 맞게 수정 가능한 부분
◦
조금 신기했던 포인트4
▪
Webview나 Server에서 어떤 로그를 쏴주는지도 볼 수 있음.
▪
사용자의 impression이나 click에 대한 로깅도 남겨보고 앱과 상호작용하며 작업하면 색다른 경험이 되겠다는 생각이 들었음.
•
이렇게 한 턴을 마무리 하고 나면, Checkpoint가 생성된다. (=과금 포인트)
◦
Rollback - 말 그대로 롤백지점, checkpoint가 작업의 분기점이 됨
◦
changes - 변경 사항
◦
Preview - 결과물
•
그리고, Agent Credit의 1/3이 증발.. 😭😭😭😭
•
그래도, 여기서 명령어 몇 번 치고 화면만 잘 쳐다봐도 얘네들(=agent)이 어떻게 작업하는지 충분히 많은 공부를 할 수 있을듯
To do list앱 만들어보기
다음주 스터디 숙제, 아무거나 막 넣었을 때 어디까지 해주는지 궁금해서 막 해봄
컨셉 정하기
•
오늘만 산다
PRD
•
제미나이가 생성해준 PRD
# 📅 [PRD] 프로젝트명: 오늘만 산다
## 1. 제품 개요 (Product Overview)
* **제품 컨셉:** "내일은 없다." 미루기 습관을 타파하기 위해 자정이 되면 모든 할 일이 초기화되거나 보관되는 단호한 To-Do 서비스.
* **핵심 가치:** 몰입(Focus), 단호함(Decisiveness), 성취(Achievement).
* **타겟 사용자:** 오늘 하루를 데이터로 증명하고 싶은 사람, 실행력을 극대화하고 싶은 사용자.
---
## 2. 필수 기능 요구사항 (Core Requirements)
### 🔐 1. 사용자 인증 및 관리 (User Authentication)
* **회원가입:** 이메일(아이디)과 비밀번호를 통한 계정 생성 (비밀번호 암호화 저장).
* **로그인/로그아웃:** JWT 기반 토큰 인증 및 세션 관리.
* **접근 제한:** 미로그인 사용자는 랜딩 페이지로 강제 리다이렉트.
* **데이터 격리:** 사용자별 독립된 데이터 공간 할당 (본인의 데이터만 조회/수정 가능).
### 📝 2. 할 일 관리 (Task Management)
* **항목 생성 (Create):** * 할 일 내용 (필수): 텍스트 입력.
* 마감 기간 (선택): Date Picker를 통한 날짜 입력.
* 중요도 (선택): ⭐ 1~3개 (기본값: 1개).
* **항목 조회 (Read):** 완료/미완료 상태 시각적 구분 (완료 시 취소선 및 투명도 조절).
* **항목 수정/삭제 (Update/Delete):** 내용 수정 기능 및 개별 삭제 기능 제공.
* **상태 토글:** 체크박스를 통한 실시간 완료 상태 변경.
### ⚡ 3. 정렬 및 필터링 (Sort & Filter)
* **실시간 정렬 기준:**
* 생성 날짜 순 (최신/과거)
* 이름 순 (가나다/ABC)
* 마감 기간 순 (임박 항목 우선 노출)
* 중요도 순 (별 개수가 많은 순서)
### 🔍 4. 검색 기능 (Search)
* **키워드 검색:** 제목/내용에 포함된 키워드 입력 시 실시간으로 해당 항목만 필터링하여 노출.
---
## 3. '오늘만 산다' 컨셉 특화 기능 (Concept Features)
### 💀 자정의 심판 (The Midnight Purge)
* **매일 자정(00:00:00) 초기화:** 메인 리스트의 모든 할 일이 삭제되거나 비활성화됨.
* **태스크 공동묘지 (Graveyard):** 미완료된 할 일은 '실패' 데이터로 분류되어 별도의 아카이브 섹션으로 강제 이동.
### 🔥 완료 시 '태워버리기' 효과 (Burning UX)
* 할 일 완료 체크 시 해당 리스트가 불타서 재가 되어 사라지는 애니메이션 효과 적용.
---
## 4. 기술 스택 (Technical Specs)
* **Frontend:** React.js, Tailwind CSS (반응형 디자인 적용).
* **Backend:** Node.js (Express), JWT.
* **Database:** PostgreSQL (사용자별 데이터 관리 및 일일 통계 저장).
* **Animation:** Framer Motion (불타는 효과 및 리스트 전환용).
---
## 5. 향후 로드맵 (Roadmap)
* **영어 회고 저널링:** 하루 업무 완료 후, 오늘을 마무리하는 짧은 한 줄을 영어로 기록하는 기능.
* **푸시 알림:** 자정 1시간 전, 미완료 항목에 대한 최종 생존 알람 발송.사용 Figma UI
•
최대한 심플한걸로
Agent실행(Replit)
•
배경 이미지 + PRD + 피그마UI 3개를 그대로 넣어서 실행
•
프롬프팅에 정교함도 없고 너무 많은 내용을 넣어서일까?
•
딱 피그마 UI 그대로만 생성해줌
•
원빈 사진이라도 넣어보자.. 2번째 프롬프트 진행
•
더 흉측한 괴물이 탄생
•
3번째 프롬프트 ui라도 챙겨보자..
•
그리고 사망해버린 나의 무료크레딧.. (하루에 3번 체크포인트 가능!)
•
그리고 약간은 더 나은 UI를 얻었지만 할일이 2번 입력되는 버그를 얻음!
•
회원 가입 등의 복잡한 시스템을 구현하기 위해서는 Core Upgrade(=과금)가 필요하다고 함
◦
그리고, 크레딧은 크레딧 대로 소모해버리고 개선도 못함 ㅜ
•
여기까지 소감
◦
애매한 지시사항이 오히려 독이 된 것 같다. → UI도 기능 구현도 어느 한쪽에도 제대로 집중하지 못한 느낌?
◦
우선은 기능 구현을 먼저 하고 UI를 후에 개편하는게 좋을 듯.
Agent실행(Lovable)
•
동일한 과정을 Lovable에서도 해봄
•
replit에서 놓친 것일 수도 있지만.. 중간 진행 과정이 확실히 다름
•
플랜이 맞는지도 한번 더 체크함
•
배경에 원빈 사진은 없지만 뭔가 더 그럴싸하게 만들어줌
•
로그인 시스템도 UI는 구현해줌
•
회원가입을 하면, 인증메일도 주고
•
로그인을 하고나면 아래와 같이 원했던 UI와 시스템도 확인할 수 있음. replit에 있었던 잔 버그들도 없음
마무리
•
그래서, Replit 구독할 것인가? No.
◦
ChatGPT 맥스 이용권이 29,000원이다보니 당장은 가격 경쟁력이 떨어져 보임.
•
VS lovable
◦
완성된 제품은 못만들어봤으나 동일한 프롬프트로 무료 버전 daliy limit까지 사용했을 때, lovable 최적화가 더 잘되어 있는 느낌
◦
다만, 완제품을 만들고 나면 생각이 바뀔 수 있음 (중간에 lovable이 더 많은 크레딧을 잡아먹을지도)
◦
+ 나는 영화 아저씨 이미지를 배경으로 쓰고 싶었는데, Lovable에서는 그 지점을 반영해주지 않았음.
▪
또한, 한 번에 credit을 다 사용해버려 추가 질문은 하지 못함
•
→ 프롬프트를 잘못 작성할 경우 예상치 못하게 많은 크레딧을 사용할 수도 있을 것 같음.
•
UI보다는 필수 기능 구현에 우선 크레딧을 투자해야 할 것 같음
Subscribe to 'OrangeBox'
Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to 'OrangeBox'!
Join Slashpage and subscribe to 'OrangeBox'!
