> ## Documentation Index > Fetch the complete documentation index at: https://docs.replit.com/llms.txt > Use this file to discover all available pages before exploring further. # Replit Design이란 > Replit Design은 프롬프트로 디자인 프레임을 생성하고, AI의 제안을 살펴보고, 디자인 시스템으로 모든 것을 온브랜드로 유지할 수 있는 디자인 스위트입니다. Replit Design은 소프트웨어가 어떻게 보이고 느껴지는지 만드는 곳입니다. 원하는 것을 설명하면 Replit Design이 살펴보고 다듬을 수 있는 인터랙티브한 목업을 생성합니다. 원하는 결과물이 나오면 같은 프로젝트 안에서 그대로 작동하는 앱이 됩니다. Start with a template, Start with a prompt, Sketch 카드와 미디어 생성, URL 가져오기, Figma에서 가져오기, 스크린샷 재현 옵션이 있는 Replit Design 홈 ## 새로 시작하거나 기존 디자인 가져오기 [Replit Design](https://replit.com/design)에서 시작하거나, 워크스페이스 홈의 생성 입력창 아래에서 **Design**을 선택하세요. 시작하는 네 가지 방법: * **[프롬프트](/ko/design/design-your-first-screen)**: 원하는 것을 설명하고 첫 프레임을 생성하세요. * **[템플릿](/ko/design/start-from-a-template)**: 미리 만들어진 랜딩 페이지, 포스터, 소셜 게시물, 모바일 화면, 프로토타입에서 시작한 다음 리믹스하세요. * **[가져오기](/ko/design/import-figma-designs-into-replit-design)**: Figma나 [Claude](/ko/design/import-claude-designs-into-replit-design)에서 디자인을 가져오거나, [URL](/ko/design/import-a-website-into-replit-design)이나 스크린샷으로 사이트를 재현하세요. * **[디자인 시스템](/ko/design/design-systems-explained)**: 저장된 시스템에서 시작하여 첫 프레임부터 온브랜드로 만드세요. 프롬프트 상자, Import URL, Import Figma, Recreate screenshot, Start with a design system 옵션과 아래에 템플릿 갤러리가 있는 replit.com/design 랜딩 페이지 ## 다양한 변형 살펴보기 결정하기 전에 폭넓게 살펴보세요. 모든 결과는 새 프레임으로 나타나므로 방향을 잃지 않습니다. * **[제안](/ko/design/explore-suggestions)**: 프레임을 선택하면 Replit Design이 다음에 시도할 것을 제안합니다. 클릭 한 번이면 됩니다. * **[다른 모델](/ko/design/explore-with-different-models)**: Design 뒤에서 작동하는 모델을 전환하고 같은 브리프를 보내 완전히 다른 방향을 얻으세요. APEX X1 슈퍼카 히어로를 보여주는 선택된 Website 프레임과 그 옆에 Explore different approaches, Try different layouts, Explore different vibes, Surprise me 같은 제안 칩을 제공하는 Suggested next steps 패널 ## 다듬기 자연스럽게 느껴지는 방식으로 결과물을 다듬으세요: * **[채팅](/ko/design/chat-about-your-design)**: 전체 보드나 한 번에 하나의 프레임에 대해 여러분만의 표현으로 Agent에게 브리핑하세요. * **[Visual Editor](/ko/design/visual-editor)**: 어떤 요소든 클릭해서 텍스트, 색상, 간격, 이미지를 직접 조정하세요. 간단한 편집은 크레딧을 소모하지 않고 즉시 소스 코드에 적용됩니다. * **[그리기](/ko/design/toolbar#draw)**: 문제가 되는 부분에 동그라미를 치고, 의미하는 요소에 화살표를 그리고, 스티키 노트를 남기세요. Agent가 마크업을 읽습니다. * **[에셋 생성](/ko/design/toolbar#generate)**: 프로젝트의 외관에 맞도록 참조 자료를 첨부하여 디자인에 필요한 이미지, 동영상 클립, 벡터 그래픽을 만드세요. div 요소가 선택된 슈퍼카 렌탈 웹사이트에서 활성화된 Edit 도구, Text, Layout, Color, Border 컨트롤과 Discard, Save edits 버튼이 있는 Visual Editor 패널 ## 빌드하기 프레임이 준비되면 Agent에게 넘기세요. 여기서 디자인은 단순한 그림이 아니라 실제 소프트웨어의 사양입니다. * **[디자인 빌드하기](/ko/design/build-your-design)**: 프레임을 새로운 작동하는 앱으로 전환하세요. * **[기존 앱 재스타일링](/ko/design/frames#build)**: 이미 가지고 있는 앱에 프레임의 외관을 적용하세요. Build와 Focus 액션이 있는 선택된 프레임의 액션 바 디자인 프레임에서 새 앱을 빌드하려면 Core 또는 Pro가 필요합니다. 그 외의 모든 Design 기능은 모든 플랜에서 사용할 수 있습니다. 플랜 세부 정보는 [Billing](/ko/billing/ai-billing)을 참조하세요. ## 확장하기 다음 디자인을 이전보다 더 빠르게 만드세요: * **[디자인 시스템 만들기](/ko/design/create-a-design-system)**: 마음에 드는 디자인에서 색상, 타이포그래피, 토큰, 컴포넌트를 추출하거나 처음부터 프롬프트로 만드세요. * **거기서부터 새 작업 시작**: 새 아티팩트가 첫 프레임부터 온브랜드로 생성됩니다. * **[기존 앱을 시스템에 편입](/ko/design/apply-design-system)**: 이미 가지고 있는 앱의 스타일을 다시 만들어 모든 것이 일치하도록 하세요. * **시스템 전환**: 프로젝트별로 시스템을 선택하거나 변경하세요. 여기서부터 여정은 다시 **시작**으로 돌아가고, 이제 모든 디자인은 온브랜드로 시작됩니다. 포커스 모드에서 살아있는 스타일 가이드로 렌더링된 APEX X1 Design System, 색상, 폰트, 레이아웃, 컴포넌트의 사이드바, 핵심 팔레트, 타입 스케일, 예시 컴포넌트 ## Design과 Build 중 언제 시작할지 Design과 Build는 같은 프로젝트로 들어가는 두 가지 진입점입니다. Build는 Agent가 소프트웨어를 작동시키는 곳이고, Design은 외관을 만드는 곳입니다. 디자인한 내용은 디자인 도구에 갇히지 않습니다. * 외관이 가장 어려운 부분일 때는 **Design**에서 시작하세요: 먼저 방향을 탐색하고 승자를 빌드하세요. * 동작이 가장 어려운 부분일 때는 **Build**에서 시작하세요: 먼저 작동하게 만들고 Replit Design에서 다시 스타일링하세요. ## 다음 단계 프롬프트로 첫 디자인 프레임을 생성하세요. 디자인 경험이 필요하지 않습니다.