캔버스에서 직접 편집하기
생성된 HTML 디자인을 다듬으세요. 텍스트를 편집하고, 선택한 요소를 조정하고, 변경 사항을 저장한 후 공유하기 전에 결과를 확인할 수 있습니다.
변경 방법 선택하기
| 하려는 작업 | 사용할 기능 | 변경되는 내용 |
|---|---|---|
| 정확한 텍스트, 색상 또는 간격을 알고 있는 경우 | Edit | 편집 내용을 확정하거나 저장한 후 선택한 HTML 파일 |
| 에이전트가 요소를 다시 작업하도록 요청하려는 경우 | Comment → Send to chat | 에이전트가 해당 요소에 관한 구체적인 지시를 받음 |
| 시각적 영역에 관해 설명하려는 경우 | Mark | 스크린샷과 메모가 대화에 추가됨 |
새 섹션, 반응형 동작 또는 여러 화면에 걸친 변경의 경우 에이전트에게 명확한 작업 지침을 제공하세요. 작은 시각적 조정에는 직접 편집을 사용하세요. 다른 두 가지 방법은 댓글 및 표시된 피드백을 참조하세요.
편집 가능한 미리보기 열기
- Design Files에서 HTML 아티팩트를 열고 Preview를 선택합니다. HTML 슬라이드 아티팩트도 미리보기 편집기를 사용하며, 사용 가능한 컨트롤은 파일에 따라 다릅니다.
- 미리보기 도구 모음에서 Edit를 선택한 다음 캔버스에서 요소를 선택합니다. 선택 윤곽선과 매개변수 패널이 나타날 때까지 기다립니다.
- 일반 사용자처럼 링크, 양식 또는 버튼을 테스트하기 전에 Edit를 종료하세요. 편집 모드에서 요소를 선택하는 것과 프로토타입을 사용하는 것은 목적이 다릅니다.
텍스트 한 줄 변경하기
- Edit에서 변경하려는 텍스트를 클릭합니다. 텍스트와 링크 레이블은 캔버스에서 편집할 수 있습니다.
- 대체할 내용을 입력합니다. Enter를 누르면 이 텍스트가 확정되고, Shift+Enter를 누르면 줄 바꿈이 삽입됩니다. 현재 텍스트 입력을 취소하려면 Escape를 누릅니다.
- 일반 Preview에서 문구를 확인합니다. 페이지가 JavaScript로 해당 텍스트를 생성한다면 텍스트를 다시 렌더링하는 동작도 테스트하세요.
요소 또는 레이아웃 조정하기
요소를 선택하면 해당 요소가 지원하는 속성을 확인할 수 있습니다. 인스펙터에는 타이포그래피, 색상, 크기, 간격, 테두리 및 모서리 반경이 포함됩니다. Flex 및 Grid 컨테이너에는 방향, 정렬, Gap 같은 레이아웃 컨트롤이 표시됩니다. 링크에서는 Href를 확인할 수 있으며, 이미지는 Upload image로 교체할 수 있습니다. 이러한 컨트롤은 상황에 따라 달라지므로 모든 요소에 모든 필드가 표시되는 것은 아닙니다.
선택한 요소를 드래그하여 위치를 조정할 수 있습니다. 변경 범위는 작게 유지하고 주변 요소와 모바일 레이아웃을 확인하세요. 한 가지 데스크톱 화면에 맞을 때까지 요소를 이동하는 것만으로는 반응형 레이아웃이 구성되지 않습니다.
| 필드 | 입력하거나 확인할 내용 |
|---|---|
| Text / Href / Image URL / Alt text | 텍스트 요소에는 문구가 표시되고, 링크에는 연결 대상도 표시됩니다. 이미지에는 소스와 대체 텍스트가 표시됩니다. 필드는 선택한 요소에 따라 달라집니다. |
| Text / Background / Border color | #262626 같은 16진수 색상을 사용하세요. 저장한 후 대비와 호버 상태를 확인하세요. |
| Opacity | 0에서 1 사이의 숫자를 입력합니다. 0은 투명하고 1은 불투명합니다. 배경뿐 아니라 선택한 요소 전체에 적용됩니다. |
| Font / Size / Weight / Line height / Letter spacing | 글꼴과 굵기를 선택한 다음 크기와 자간을 조정합니다. Line height에는 양수 또는 px 값을 사용할 수 있습니다. 1.5는 배율이고 24px은 고정 높이입니다. |
| Width / Height | 단위가 없는 숫자는 px로 적용됩니다. 이러한 치수에는 백분율 값도 사용할 수 있습니다. 고정 너비를 선택하기 전에 좁은 레이아웃을 확인하세요. |
| Padding / Margin | 위쪽, 오른쪽, 아래쪽, 왼쪽을 각각 조정합니다. Padding은 요소 내부의 간격이고, Margin은 요소와 주변 요소 사이의 간격입니다. Margin에는 auto를 사용할 수 있습니다. |
| Border width / Style / Radius | 테두리의 두께, 스타일 및 색상을 함께 설정합니다. 표시되는 스타일 없이 너비만 지정하면 아무 변화가 없는 것처럼 보일 수 있습니다. Radius는 모서리를 둥글게 만듭니다. |
| Direction / Distribution / Gap / Align | 레이아웃 컨트롤은 레이아웃 컨테이너를 선택해야 사용할 수 있습니다. 일반 요소에서 Align은 텍스트 정렬을 변경하며, 상위 요소를 재배치하는 명령이 아닙니다. |
대부분의 간격 필드에는 임의의 CSS 표현식이 아니라 숫자 또는 px를 사용할 수 있습니다. 값이 거부되면 저장을 반복하지 말고 단위와 선택한 요소를 확인하세요. 빈 필드는 값이 0이라는 의미가 아니라 상속되거나 계산된 스타일을 반영할 수 있습니다.
저장, 취소 또는 실행 취소하기
| 작업 | 의미 |
|---|---|
| 텍스트 편집 중 Enter 누르기 | 현재 텍스트 편집 내용을 확정합니다. |
| 매개변수 패널의 Save | 현재 콘텐츠 및 스타일 변경 사항을 파일에 기록합니다. |
| Cancel / Reset | 현재 초안을 버리거나 재설정합니다. 이전에 확정된 변경 사항이 모두 삭제되지는 않습니다. |
| 편집기의 Undo / Redo | 확정된 수동 편집을 되돌리거나 다시 적용합니다. |
| Delete element | 선택한 요소를 제거합니다. 종속성을 확인하고 필요한 경우 Undo를 사용하세요. |
저장된 결과 확인하기
- Edit를 종료하고 미리보기를 다시 로드합니다. 변경 사항이 유지되는지 확인하세요.
- 뷰포트 메뉴를 모바일 크기로 전환하고 실제 컨트롤을 테스트합니다.
- 이전 HTML 버전이 필요하면 버전 기록을 사용하세요. 공유된 파일의 경우 새 버전을 확인한 후 링크를 업데이트하세요.
HTML 애니메이션을 편집해도 이미 렌더링된 MP4는 변경되지 않습니다. 새로 렌더링하도록 요청한 다음 새 동영상을 확인하세요.
선택하거나 저장할 수 없는 경우
Preview에서 지원되는 HTML 파일을 열었고 프로젝트를 편집할 수 있는 상태인지 확인하세요. 읽기 전용 공유 프로젝트에서는 댓글은 허용되지만 편집은 비활성화될 수 있습니다. Edit를 종료했다가 다시 연 다음 필요한 경우 파일을 다시 로드하세요. 여전히 선택 윤곽선이나 인스펙터가 표시되지 않으면 Comment 또는 Mark를 사용해 에이전트에게 변경 사항을 설명하고, 문제를 보고할 때 앱 버전을 포함하세요. 요소를 선택하지 않았거나 결과를 확인하지 않은 상태에서 Save를 계속 클릭하지 마세요.