문제 발견부터 수익화까지 
TTM 빌더 팀 합류하기

⚡ 주인장 자료

1인 개발자들을 위한 디자인 사이트 모음 | 웹사이트 디자인 레퍼런스, 바이브 디자인
레플릿 + 깃허브 연동하고, 공짜로 서비스 배포하기, 레플릿 꿀팁 2탄 | Replit, Github, CloudFlare
시간, 비용 절약하는 선 디자인 후 바이브 코딩, 레플릿 꿀팁 1탄 | Replit, Figma, Stitch AI, Chatgpt
바이브 코딩을 잘하기 위한 5가지 필수 원칙 | Replit, Chatgpt, 바이브코딩
돈이 될 수 있을까? 코딩 없이 서비스 만들고 검색 엔진 등록까지 | Replit, ChatGPT, 바이브코딩
바이브 코딩 뭐가 좋아? 요즘 대세 툴 4가지 맛보기 | Cursor, Replit, Lovable, V0, ChatGPT
단 30분, 3단계로 월 매출 14억 어플 따라 만들기 | 바이브 코딩, Replit, ChatGPT

시간, 비용 절약하는 선 디자인 후 바이브 코딩, 레플릿 꿀팁 1탄 | Replit, Figma, Stitch AI, Chatgpt

Created by
  • T
    TTM
Created at
이 영상은 replit 프로젝트 시작 시 stitch ai와 figma를 활용하여 원하는 디자인으로 빠르게
시작함으로써 시간과 비용을 절약하는 방법을 소개합니다.
chatgpt로 프롬프트를 생성하고, stitch ai로 디자인을 만든 후 figma로 옮겨 replit으로 가져오는 과정을 보여주며,
이를 통해 제작 초반 디자인에 소요되는 시간과 비용을 대폭 줄일 수 있음을 강조합니다.

1. 문제 인식 및 필요성

•
레플릿(Replit)에서 프로젝트를 시작할 때, 머릿속에 있는 디자인을 말로 설명하면 원하는 느낌이 잘 안 나오는 경우가 많음
•
버튼을 바꾸거나 레이아웃을 다시 짜는 데 시간이 오래 걸리고, 이 과정에서 추가 비용도 발생함

2. 전체 프로세스 개요

•
원하는 디자인으로 레플릿 프로젝트를 시작하는 방법을 소개함
•
구글이 인수한 스티치 AI(Stitch AI)를 활용해 AI로 디자인을 생성하고, 피그마(Figma)로 붙여넣은 뒤 레플릿으로 가져오는 3단계 방법을 사용함 이 방법으로 제작 초반 디자인에 드는 시간과 비용을 크게 줄일 수 있음
•
영상에서 실제 과정을 시연함
•
원하는 디자인을 바로 만들 수 있는 방법을 안내함

3. 스티치 AI로 디자인 생성하기

•
Stitch AI에 넣을 프롬프트를 만들기 위해 Chatgpt에 서비스 설명을 입력하고, 프롬프트를 작성해 달라고 요청함 실제로는 개발 기획 문서(PRD)를 상세히 작성하면 더 좋지만, 이번에는 디자인에만 집중함
•
Chatgpt가 작성한 프롬프트를 복사해 Stitch AI에 붙여넣음
•
프롬프트를 입력하고 모바일 디자인을 요청함
•
몇 분 기다리면 AI가 디자인을 생성함 예시: 깔끔한 디자인이 생성되어 만족함
•
Stitch AI의 추가 기능을 사용해 원하는 디자인으로 수정함 예시: 오른쪽 상단 버튼을 눌러 메인 컬러를 바꾸고, 다크 모드로 변경함 다크 모드가 더 마음에 들어 그대로 둠

4. 디자인 세부 수정 및 반복

•
메인 홈페이지를 조금 더 변경하고 싶을 때, 화면 위의 버튼을 눌러 프롬프트 입력창을 엶 첫 번째 페이지 이미지를 생성하고, 프롬프트로 상단 이미지를 다양한 지역 이벤트를 소개하는 캐러셀 배너로 바꿔달라고 요청함 색상이 다르면 이전처럼 색상만 적용해 수정 요청함
•
이렇게 디자인을 완성하고, 복사해서 피그마로 옮김

5. 피그마로 디자인 옮기기

•
피그마에 접속해 로그인 후, 디자인 프로젝트를 시작함
•
Stitch AI에서 각 페이지 상단의 피그마 버튼을 눌러 디자인을 복사함
•
피그마 프로젝트에 붙여넣기를 여러 번 반복함(예: 다섯 번)
•
피그마에서 첫 번째 프레임을 선택하고, 오른쪽 마우스 클릭으로 '선택 항목 링크 복사'를 함

6. 레플릿으로 디자인 가져오기

•
레플릿에서 '임포트 코드 디자인' → '피그마 디자인'을 클릭함
•
처음 사용하는 경우 피그마 로그인 연동이 필요함
•
복사한 피그마 링크를 붙여넣고 '임포트 프롬 피그마' 버튼을 누름
•
피그마에서 가져온 디자인이 그대로 생성됨 일부 디자인이 다를 수 있으나, 어시스턴트 기능으로 쉽게 수정 가능함

7. 여러 페이지 적용의 한계와 아쉬움

•
두 번째 페이지도 같은 방식으로 적용 시도함 예시: 여행 정보 상세 페이지 프레임 링크를 복사해 프롬프트와 함께 요청함 결과물이 피그마 디자인과 다르게 생성됨
•
어시스턴트에게 피그마 링크로 임포트하는 기능이 가능한지 물어봤으나, 지원하지 않음
•
현재 레플릿은 첫 페이지만 피그마 디자인을 가져올 수 있음
•
여러 페이지를 한 번에 가져오는 방법을 아는 사람이 있다면 댓글로 공유 요청

8. 시간·비용 절감 효과 및 마무리

•
피그마 디자인을 통해 초반에 원하는 디자인으로 시작할 수 있어 시간과 비용을 크게 절감함
•
여러 페이지를 한 번에 가져오는 기능이 추가되길 바람
•
Stitch AI와 피그마를 활용해 빠르게 원하는 디자인으로 시작해볼 것을 권장함
•
어려움이 있으면 운영 중인 오픈 카톡방에서 질문 가능
Made with Slashpage