Design이란?
Design은 캔버스를 보여주는 곳으로, 프롬프트로 디자인 프레임을 생성하고, 여러 변형을 살펴보고, 코드를 작성하기 전에 가장 마음에 드는 것을 다듬을 수 있습니다. Design은 다음에 완벽합니다:- 아이디어를 빠르게 테스트하기: 기능을 빌드하기 전에 앱의 디자인을 시각화
- 세련된 웹사이트 만들기: 랜딩 페이지, 포트폴리오, 레스토랑 메뉴, 이벤트 페이지
- 디자인 세밀하게 조정하기: 색상, 레이아웃, 콘텐츠를 즉시 조정
Design 목업은 실제 페이지처럼 보이고 느껴지지만, 아직 데이터를 저장하거나 외부 서비스에 연결하지 않습니다. 모든 것이 어떻게 보이는지 만족스러우면, 한 번의 클릭으로 디자인을 완전한 앱으로 빌드할 수 있습니다. 아래 단계에서 방법을 보여줍니다.
Build란?
Build는 여러분의 창작물이 데이터를 저장하고, 사람들이 로그인하고, 다른 서비스에 연결할 수 있는 실제 작동하는 애플리케이션으로 실행되는 곳입니다. 앱에 다음이 필요할 때 Build를 사용하세요:- 사용자 계정: 사람들이 계정을 만들고 로그인할 수 있음
- 저장된 정보: 주문, 메시지, 사용자 환경 설정 같은 데이터 저장
- 다른 서비스 연결: 결제 처리, 이메일 전송, 다른 앱의 데이터 가져오기
- 복잡한 작업: 온라인 스토어 운영, 예약 관리, 대시보드 지원
두 가지 함께 사용하기
Design과 Build는 같은 프로젝트에서 작동하므로 둘 중 하나를 선택할 필요가 없습니다. 외관부터 시작해서 완전한 앱으로 발전시켜 보세요.1
먼저 Design하기
Design에서 시작하여 아이디어를 빠르게 시각화합니다. 앱이 어떻게 보이고 느껴지는지, 즉 레이아웃, 색상, 버튼, 사용자 경험에 집중하세요.
2
다듬고 반복하기
제안을 따라 선택한 프레임의 새로운 방향을 탐색하거나, Edit 도구를 선택하고 요소를 클릭하여 Visual Editor에서 조정하세요. 원하는 변경 사항을 설명하기 위해 Agent와 채팅할 수도 있습니다.
3
디자인 빌드하기
디자인에 만족하고 실제 기능을 추가할 준비가 되면 프레임에서 **Build…**를 선택하세요. 새 아티팩트를 만들거나 기존 아티팩트에 디자인을 적용할 수 있습니다. Agent가 데이터 저장, 사용자 계정 처리, 서비스 연결 기능을 추가하는 동안 디자인은 그대로 유지됩니다.
목업에 데이터베이스나 고급 기능을 추가하려고 하면 Agent가 변환을 제안합니다.
4
게시하고 공유하기
앱이 빌드되면 누구나 온라인에서 접근할 수 있도록 게시하세요. Replit이 모든 기술 인프라를 처리하므로 여러분의 앱은 사용자에게 안정적으로 작동합니다.
각각을 언제 시작해야 할까요
Design에서 시작하기
- 외관이 가장 어려운 부분일 때
- 아이디어를 빠르게 확인하고 싶을 때
- 여러 방향을 탐색하고 비교하고 싶을 때
- 속도가 우선일 때
Build에서 시작하기
- 동작이 가장 어려운 부분일 때
- 앱이 처음부터 데이터를 저장해야 할 때
- 사람들이 로그인해야 할 때
- 다른 서비스에 연결할 때
주요 차이점
다음 단계
What is Replit Design
프롬프트에서 온브랜드 앱까지의 전체 여정
Canvas
프레임이 존재하는 보드
Build your design
프레임에서 작동하는 앱까지 안내되는 흐름
Agent
Agent가 여러분을 위해 무엇을 빌드할 수 있는지 살펴보기