Skip to main content
⏰ 예상 시간: 10분 시작하고 싶은 디자인이 이미 웹에 공개되어 있는 경우도 있습니다. 현재 사이트이거나, 룩을 다시 만들고 싶은 페이지일 수 있습니다. Import from URL은 웹사이트를 탐색하고 다듬고 대화형 앱으로 빌드할 수 있는 디자인 프레임으로 재현합니다. 예제로 Replit이 만든 크리에이티브 스튜디오 랜딩 페이지인 creative-studio-landing.replit.app을 사용합니다.

​
시작하기 전에

다음이 필요합니다:

​
웹사이트 가져오기

1

사이트 URL 복사하기

직접 만든 사이트를 사용하거나 예제 URL을 복사하세요: https://creative-studio-landing.replit.app.
'We craft bold ideas and visuals that truly work'라는 헤드라인과 그 아래 부채꼴로 펼쳐진 아트워크 카드들이 있는 Kosmo Studio 랜딩 페이지

예제 사이트: 크리에이티브 스튜디오 랜딩 페이지인 Kosmo Studio.

2

Replit Design 열기

replit.com/design로 이동해 프롬프트 박스 아래에서 Import URL을 선택하세요. Agent가 사이트의 룩앤필을 시작점으로 재현합니다.
Import URL 옵션이 선택된 Replit Design 홈 화면과 'Paste a link to any website and Agent will recreate its look and feel as a starting point'라는 툴팁

Replit Design 홈의 Import URL: 어떤 웹사이트든 링크를 붙여넣으세요.

3

URL 붙여넣고 빌드 시작하기

Import URL을 선택하면 프롬프트에 *“Recreate the look and feel of this website:“*가 미리 입력됩니다. 그 뒤에 URL을 붙여넣고 Start를 선택하세요.
'Recreate the look and feel of this website'라는 문구 뒤에 예제 URL이 이어지는 Replit Design 프롬프트 박스와 Start 버튼

예제 URL이 포함된 채로 미리 채워진 재현 프롬프트, 시작할 준비가 된 상태.

Agent가 사이트를 프로젝트의 디자인 프레임으로 재현합니다.
Replit Design의 디자인 프레임으로 재현된 Kosmo Studio 랜딩 페이지, 채팅 패널에 실행 완료로 표시됨

Replit Design의 디자인 프레임으로 재현된 Kosmo Studio 랜딩 페이지.

​
내 것으로 만들기

가져온 프레임을 선택하고 형태를 바꿔보세요:
  • 제안을 따라가기: 가져오기 결과에는 다크 에디토리얼 변형, 모바일 뷰포트, 문의 페이지 같은 제안된 다음 단계가 함께 제공됩니다. 각각 새로운 프레임으로 생성되므로 원본은 비교를 위해 그대로 남습니다.
  • 채팅으로 이야기하기: 프레임 아래 입력창을 사용해 원하는 내용을 직접 말로 전달하세요. “포트폴리오 사진을 바꿔줘”, “히어로 텍스트를 더 두껍게 해줘” 같은 식으로요.
Replit Design에서 선택된 재현된 Creative Studio 프레임과 그 옆에 다크 에디토리얼 변형, 모바일 뷰포트, 문의 페이지, 다양한 접근 방식을 제안하는 Suggested next steps 패널

가져온 프레임이 선택된 상태이며, 다크 에디토리얼 변형, 모바일 뷰포트, 문의 페이지를 제안하는 다음 단계가 표시됨.

​
다음 단계

제안 살펴보기

클릭 한 번으로 다음에 무엇을 디자인할지 살펴보세요.

Visual Editor

텍스트, 색상, 간격, 이미지를 직접 다듬으세요.

디자인 빌드하기

완성된 프레임을 동작하는 앱으로 만드세요.