Canvas로 디자인하기

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.

​

시작하기 전에

• 첫 번째 앱 빌드하고 게시하기를 완료하여 Runwell을 열어두거나,
• 다른 프로젝트를 사용하세요 — 아래 단계는 동일하게 작동합니다.

​

디자인 변형 탐색하기

1

Canvas 열기 및 프레임 선택하기

Project Editor에서 Canvas 탭을 여세요. 앱이 Canvas에 프레임으로 표시됩니다. 프레임을 선택하면 Reimagine… 및 Preview 컨트롤이 나타납니다.

2

디자인 다시 상상하기

**Reimagine…**을 클릭하여 Agent가 탐색할 수 있는 방향 메뉴를 여세요. 하나를 선택하세요 — Runwell의 경우 Explore different vibes를 시도해 보세요. Agent는 레이아웃을 유지하면서 시각적 느낌을 바꾸는 세 가지 미적 변형을 생성합니다.

전체 방향 목록:

• Explore different approaches(다양한 접근 방식 탐색)
• Try different layouts(다양한 레이아웃 시도)
• Explore different vibes(다양한 분위기 탐색)
• More like this, but better(이것과 비슷하게, 더 좋게)
• Optimize for usability(사용성 최적화)
• Show me the opposite of this(이것의 반대 보여주기)
• Surprise me(놀라게 해줘)

메뉴에서 선택하는 대신 직접 방향을 설명할 수도 있습니다 — 예: “어두운 테마, 미니멀 테마, 화려한 테마를 보여줘”.

3

변형 비교하기

Canvas에서 패닝하거나 축소하여 원본과 함께 변형을 확인하세요. 비교해보고 적용하고 싶은 방향을 결정하세요.

전념하기 전에 하나를 더 다듬고 싶다면 Agent에게 요청하세요 — 예: “두 번째가 마음에 드는데, 헤더를 더 크게 만들어줘.”

4

앱에 디자인 적용하기

원하는 변형을 선택하고, 프레임 상단의 **Build…**를 클릭하세요. 대화 상자에서 기존 앱(예: Runwell)을 선택하여 별도의 복사본을 만들지 않고 기존 앱에 새 디자인을 적용하세요.

Agent가 변경 사항을 적용하는 동안 기다리세요. 완료되면 Canvas에서 업데이트된 프레임을 선택하고 Preview를 클릭하여 결과를 확인하세요. 처음에 했던 것과 동일한 확인을 실행하세요 — Runwell의 경우: 달리기를 저장하고, 합계가 업데이트되는지 확인하고, Preview를 폰 크기 너비로 조정하세요.

5

업데이트된 디자인 게시하기 (선택 사항)

새로운 디자인이 마음에 드시나요? Agent 채팅 또는 Tools & files 패널의 Publishing 타일에서 게시하세요. 공개 URL은 동일하게 유지됩니다 — 방문자는 업데이트된 버전을 즉시 볼 수 있습니다.게시 플로우를 다시 확인하고 싶다면 첫 번째 앱 빌드하고 게시하기의 앱 게시하기 단계를 참조하세요.

​

다음에 시도해볼 것들