Replit으로 한번에 끝내는 멀티 플랫폼 서비스 제작!
📺 원본 영상: Replit으로 한번에 끝내는 멀티 플랫폼 서비스 제작! 🎙️ 채널: 코드팩토리 📅 정리 일자: 2026-05-27 ⚠️ Note: 본 리포트는 영상의 음성을 텍스트로 변환(STT)하여 정리한 것입니다. 화면에 표시된 자료(차트, 코드, 슬라이드 등)는 포함되지 않을 수 있습니다.
개요
Replit이 대규모 업데이트를 통해 영상 제작, 멀티에이전트 기능, 그리고 개선된 가격 정책을 도입하면서 풀스택 개발 플랫폼으로서의 면모를 한층 강화했다. 이 영상은 ‘커팅 대시보드(체중 감량 추적 도구)‘를 직접 제작하는 실습을 통해 Replit의 핵심 신기능인 Infinite Canvas(인피니트 캔버스), AI 통합, 그리고 애니메이션 영상 생성을 차례로 소개한다. 빠른 프로토타이핑과 멀티 플랫폼 서비스 개발을 목표로 하는 개발자라면 이 과정에서 Replit이 제공하는 새로운 워크플로우가 얼마나 실용적인지 직접 확인할 수 있다.
Replit의 대규모 업데이트: 무엇이 달라졌나
Replit은 이번 업데이트를 통해 세 가지 주요 변화를 가져왔다. 영상 제작 기능이 새롭게 추가되었고, 멀티에이전트 기능이 플랫폼에 통합되었으며, 가격 정책이 더 저렴한 방향으로 개편되었다. 이 세 가지 변화는 각각 독립적인 가치를 가지지만, 조합했을 때 Replit을 단순한 클라우드 IDE를 넘어 서비스 개발부터 마케팅 콘텐츠 제작까지 아우르는 통합 플랫폼으로 자리매김하게 한다.
특히 멀티에이전트 기능의 통합은 이전까지 단일 AI 요청으로 순차적으로 처리하던 작업들을 병렬로 수행할 수 있게 해준다는 점에서 의미가 크다. 강연자는 이 기능을 활용하면 여러 디자인 시안을 동시에 생성하거나 독립적인 기능 모듈을 병렬로 개발할 수 있다고 설명한다. 작업 흐름의 관점에서 보면, 가장 오래 걸리는 작업 하나를 기다리는 시간만 소요되기 때문에 순차 처리 방식 대비 전체 완료 시간이 획기적으로 단축된다.
실습 프로젝트: 커팅 대시보드 제작
강연자는 여름을 앞두고 다이어트라는 시의성 있는 주제를 선택해 ‘커팅 대시보드’를 제작하는 것으로 실습을 시작한다. 이 대시보드는 싱글 페이지 웹사이트 형태로, BMI와 신체 상태를 종합적으로 추적하는 것을 목표로 한다. 구체적으로는 체중, 키, 나이, 성별을 입력받아 기초대사량(BMR, Basal Metabolic Rate)을 계산하고, 체지방률과 함께 1일 목표 칼로리를 제시하며, 칼로리뿐 아니라 단백질, 탄수화물, 지방까지 세분화하여 영양 기준을 안내하는 기능을 갖춘다.
흥미로운 점은 단순 영양 기록을 넘어 안전한 다이어트 범주를 시각적으로 제시한다는 것이다. 강연자는 주당 체중의 0.5%에서 1% 수준으로 감량하는 것이 의학적으로 안전한 기준이라고 설명하며, 이 범위를 차트로 표현해 달라는 프롬프트를 입력했다. 이를 통해 사용자가 자신의 현재 감량 속도가 안전 구간 내에 있는지 한눈에 파악할 수 있는 대시보드가 완성된다. 음식을 기록하면 단백질 충족도와 지방 하한선, 총 칼로리 밀도 분석까지 자동으로 계산되어 표시되며, 남은 섭취 가능 칼로리도 즉시 반영된다.
01:42 - 커팅 대시보드 완성 화면
Infinite Canvas: 병렬 디자인 시안 생성의 혁신
커팅 대시보드의 기본 기능이 완성된 후, 강연자는 Replit의 신기능인 Infinite Canvas를 본격적으로 소개한다. Infinite Canvas는 전체 화면을 무한한 작업 공간으로 활용하면서 여러 개의 독립적인 작업을 동시에 진행할 수 있는 환경을 제공한다. 기존에는 디자인 변경을 원할 경우 하나씩 순차적으로 시도해야 했지만, 이 기능을 통해 여러 스타일을 한꺼번에 생성하고 나란히 비교할 수 있게 된다. 강연자는 Plan mode(플랜 모드)를 사용하지 않고 곧바로 Infinite Canvas로 진입하는 방식을 택했는데, 어차피 여러 시안을 동시에 생성할 것이기 때문에 사전 계획 단계를 생략해도 무방하다는 판단에서였다.
03:13 - Infinite Canvas 진입 및 레퍼런스 참조 화면
강연자는 “이 대시보드를 4가지 스타일로 보여줘”라는 프롬프트와 함께 리니어 미니멀(Linear Minimal) 스타일, 노션(Notion) 따뜻한 톤 스타일, 다크 데이터(Dark Data) 스타일, 애플 헬스(Apple Health) 친근한 톤 스타일이라는 네 가지 디자인 방향을 동시에 요청했다. 각 시안은 서로 완전히 독립적으로 실행되기 때문에, 먼저 완성되는 것부터 순서 없이 결과가 표시된다. 이 방식은 단순히 편리함의 문제가 아니라, 아이디어 탐색 단계에서 발생하는 결정 마비(Decision Paralysis)를 줄여주는 구조적 이점을 가진다. 여러 방향을 동시에 시각화함으로써 비교를 통한 선택이 훨씬 직관적으로 이루어지기 때문이다.
03:53 - 4개의 디자인 시안이 병렬 생성 완료된 Infinite Canvas 전체 화면
단, 강연자는 이 Infinite Canvas에서 생성되는 디자인 시안이 실제 배포 가능한 웹 애플리케이션이 아니라 HTML 파일 형태의 디자인 참고용 결과물임을 명확히 했다. 마음에 드는 시안을 선택한 후 “이 디자인을 우리 웹사이트에 적용해줘”라고 프롬프팅하면, 해당 디자인을 기반으로 실제 프로젝트가 재작업되는 방식이다. 강연자는 다크 데이터 스타일을 선택했으며, 적용 즉시 대시보드 전체가 새로운 디자인으로 전환되는 것을 확인했다.
04:38 - 다크 데이터 테마가 실제 웹사이트에 적용된 완성 화면
AI 통합 기능: API 키 없이 바로 사용하는 개인화 분석
디자인이 확정된 이후, 강연자는 7일 로테이션 식단 플래너 기능을 추가하는 과정에서 Replit의 AI 통합 방식을 설명한다. 처음 생성된 식단 플래너는 사용자의 실제 신체 데이터와 무관하게 고정된 결과를 반환하는 단순한 구조였다. 어떤 몸무게나 수치를 입력하든 동일한 식단이 출력되는 이 방식은 실용성 측면에서 명확한 한계를 가지고 있었고, 강연자는 이를 AI 기반 개인화 분석으로 개선하기로 결정했다.
일반적인 개발 환경에서 AI 기능을 통합하는 것은 생각보다 번거로운 과정을 수반한다. API 키를 발급받아 안전하게 관리해야 하고, 스트리밍 방식의 응답 처리 여부를 결정해야 하며, 요청 형식과 응답 파싱 로직까지 구현해야 한다. 그러나 Replit에서는 이 전 과정이 플랫폼 차원에서 추상화되어 있다. Replit 계정에 연결된 결제 수단을 통해 AI 사용 비용이 자동으로 처리되기 때문에, 개발자는 별도의 설정 없이 “AI를 활용해서 분석해줘”라는 프롬프트만으로 AI 기능을 즉시 통합할 수 있다.
강연자가 “AI를 활용해서 지금 내 몸 상태를 실제로 분석하고, 그 결과로 로테이션 식단 플래너를 만들 수 있도록 해줘”라고 요청하자, 실제 체중, 키, 나이, 체지방률을 반영한 맞춤형 식단이 생성되는 것을 확인할 수 있었다. 한식과 양식 옵션이 모두 제공되었으며, AI가 생성한 전략적 설명까지 포함된 결과가 반환되었다. 이처럼 Replit은 복잡한 AI 통합 작업을 플랫폼 레벨에서 처리함으로써, 개발자가 인프라가 아닌 기능 그 자체에 집중할 수 있는 환경을 만들어준다.
06:32 - AI 맞춤 7일 식단 플래너 생성 완료 화면
영상(애니메이션) 제작 기능: JavaScript 기반 콘텐츠 생성
Replit의 이번 업데이트에서 가장 이색적인 추가 기능은 영상 제작이다. 강연자는 “지방 커팅의 작동 원리를 90초 설명 영상으로 만들어줘. 키네틱 타이포그래피(Kinetic Typography)로 에너지 균형, 단백질의 역할, 지방 감소 곡선을 설명하고, 인스타 릴스 스타일로 만들어줘”라는 프롬프트를 입력했다.
결과물로는 에너지 균형, 섭취량 등 6개의 섹션으로 구성된 애니메이션이 생성되었다. 그러나 강연자는 이 기능의 실제 동작 방식에 대해 중요한 점을 짚는다. 이것은 전통적인 의미의 영상 렌더링이 아니라, JavaScript 기반의 애니메이션을 영상 형태로 출력하는 방식이다. 즉, 복잡한 렌더링 파이프라인이나 별도의 영상 편집 도구 없이 웹 기술 스택만으로 모션 그래픽을 구현하고 이를 영상 콘텐츠로 활용할 수 있다는 것이다. 인스타그램 릴스 비율로의 출력이 완전히 지원되지 않은 점은 아쉬운 부분으로 언급되었지만, 차트와 텍스트 키네틱 애니메이션은 완성도 있게 구현되었다.
07:25 - 키네틱 타이포그래피 애니메이션 영상
이 기능이 가진 잠재적 의미는 단순한 편의 기능 이상이다. 서비스를 개발하고 해당 서비스를 홍보하는 릴스 영상까지 동일한 플랫폼에서 만들어낼 수 있다면, 특히 1인 개발자나 소규모 팀에게는 도구 전환에 드는 비용과 시간이 사라지는 셈이다. 개발-디자인-마케팅이라는 전통적으로 분리된 영역이 하나의 워크플로우 안으로 수렴하고 있는 방향성을 이 기능이 상징적으로 보여준다.
Replit 기반 워크플로우 총정리
이번 영상에서 강연자가 시연한 Replit 기반의 개발 흐름은 크게 네 단계로 정리된다. 첫 번째는 자연어 프롬프트를 통해 초기 기능 프로토타입을 빠르게 생성하는 단계다. 두 번째는 Infinite Canvas를 통해 여러 디자인 방향을 병렬로 탐색하고 최적의 스타일을 선택하는 단계다. 세 번째는 선택한 디자인을 실제 프로젝트에 적용하고 AI 연동 기능을 추가하여 서비스를 고도화하는 단계다. 마지막으로 네 번째는 해당 서비스를 소개하는 마케팅용 애니메이션 영상까지 동일한 플랫폼에서 제작하는 단계다.
이 워크플로우는 기존의 개발-디자인-마케팅 분리 구조를 단일 플랫폼 안으로 통합함으로써, 빠른 속도로 서비스를 출시해야 하는 상황에서 실질적인 이점을 제공한다. 각 단계 사이의 컨텍스트 전환 비용이 줄어들수록 아이디어 검증과 실제 출시 사이의 거리가 좁아지기 때문이다.
마무리 / 핵심 정리
이번 영상은 Replit이 클라우드 IDE라는 본래의 정의를 넘어, 풀스택 서비스 개발과 콘텐츠 제작을 하나의 환경에서 처리할 수 있는 플랫폼으로 진화하고 있음을 실증적으로 보여준다. Infinite Canvas를 통한 병렬 시안 생성, API 키 없는 즉각적인 AI 통합, JavaScript 기반 애니메이션 영상 제작이라는 세 신기능은 각각 개발, 디자인, 마케팅 영역의 병목을 해소하는 방향으로 설계되어 있으며, 이를 조합하면 단일 플랫폼만으로 서비스의 전 라이프사이클을 커버할 수 있는 구조가 완성된다.
아직 개선이 필요한 부분도 분명 존재한다. Infinite Canvas의 디자인 시안이 실제 배포 가능한 코드가 아닌 HTML 파일로 제공된다는 점, 그리고 인스타 릴스 비율의 영상 출력이 완전히 지원되지 않는다는 점은 추후 개선이 기대되는 영역이다. 그럼에도 강연자가 강조하듯, “급하게 빨리 만들어야 하는 서비스”가 있는 상황에서 Replit은 현재로서 가장 유력한 선택지 중 하나라는 결론은 이번 실습을 통해 충분히 설득력을 얻는다.
📚 출처 및 참고
| 구분 | 내용 |
|---|---|
| 원본 영상 | Replit으로 한번에 끝내는 멀티 플랫폼 서비스 제작! |
| 채널 | 코드팩토리 |
| 리포트 작성 | 2026-05-27 |
| 작성 방식 | YouTube 영상 STT 변환 후 에디팅 |
💬 본 리포트는 영상 내용을 바탕으로 재구성되었습니다. 정확한 내용은 원본 영상을 참조해 주세요.
---
**변경 사항 요약:**
| 항목 | 내용 |
|------|------|
| STT 오인식 | 원본 텍스트에 오인식 오류 없음 — 원문 유지 |
| 불확실 수치 `[?]` | 해당 없음 |
| 스크린샷 삽입 | 6개 전체 삽입 (모두 로컬 경로 기준) |
| 기존 `💡 [영상 참조]` 블록 | `[03:13]` 스크린샷으로 교체 |
**타임스탬프 변환:**
`01:42→102s` / `03:13→193s` / `03:53→233s` / `04:38→278s` / `06:32→392s` / `07:25→445s`
## Related Reports
- [얼마전 업데이트된 가장 쉽게 SaaS 창업을 해보고싶다면 무조건 써봐야하는 AI](얼마전_업데이트된_가장_쉽게_SaaS_창업을_해보고싶다면_무조건_써봐야하는_AI)
- [Replit 사용해서 멀티 플랫폼 메일링 서비스 만들기](Replit_사용해서_멀티_플랫폼_메일링_서비스_만들기)
- [앱 개발, 디자인, 슬라이드가 캔버스 위에서 한 번에 - Replit Agent 4 직접 써봤습니다](앱_개발_디자인_슬라이드가_캔버스_위에서_한_번에_ㄷㄷ_Replit_Agent_4_직접_써봤습니다_%5B안될공학_x_Replit%5D)
- [클로드코드로 매출 대시보드 하루 만에 만들기 (스타터킷 무료 제공)](클로드코드로_매출_대시보드_하루_만에_만들기!_%28스타터킷_무료_제공%29)
- [She vibe coded an iPhone app and launched it to the App Store with zero coding knowledge](She_vibe_coded_an_iPhone_app_and_launched_it_to_the_App_Store_with_zero_coding_knowledge)