HtmlDrag 사용 방법: HTML 가져오기, 편집, 구체화 및 내보내기
이 가이드는 자료 시작부터 완성된 HTML 결과까지 실제 작업 흐름을 따릅니다. 기존 페이지 가져오기, 공개 URL 캡처, AI 정밀 다듬기 사용, 지원되는 파일을 편집 가능한 HTML로 변환, 시각적 편집, 작업 저장, 공유 또는 내보내기 방법을 알아보세요.
⚡ 주요 사실 요약 및 4단계 빠른 시작(HtmlDrag 워크플로)
- 핵심 목적: 기존 HTML, AI 생성 코드 및 라이브 웹 페이지를 위한 시각적 "라스트 마일" 편집기입니다. 코드를 다시 작성할 필요가 없습니다. 간단히 끌어서 놓기, 복사 편집, 레이아웃 조정, 시각적으로 이미지 교체만 하면 됩니다.
- 4단계 빠른 시작 워크플로: 1단계 가져오기 (HTML 업로드 / 코드 붙여넣기 / 웹페이지 복제 / AI 생성) → 2단계 시각적 개선 (오른쪽 패널에서 복사를 두 번 클릭하고 요소를 드래그하고 테이블과 스타일을 사용자 정의) → 3단계 타겟 AI 정교화 (특정 요소를 선택하고 전체 페이지를 재생성하지 않고 현지화된 편집을 위해 AI를 프롬프트) → 4단계 플랫폼 독립적 내보내기 (공급업체 종속이 전혀 없는 순수하고 생산 가능한 HTML 코드를 다운로드하세요.)
- 다섯 가지 핵심 가져오기 방법: • 웹페이지 복제 (공개 웹페이지를 편집 가능한 프로젝트로 캡처) • HTML 업로드 (로컬 .html 파일을 캔버스에 놓습니다.) • 코드 붙여넣기 (ChatGPT/Claude/v0의 AI 코드에 대한 즉각적인 시각적 렌더링) • AI 정밀 다듬기 (기존 페이지의 프롬프트 기반 현지화 편집) • 파일을 HTML로 변환 (문서와 이미지를 편집 가능한 레이아웃으로 변환)
- 제로 벤더 종속: 내보낸 프로젝트는 100% 표준 HTML/CSS로 유지됩니다. 언제든지 자체 서버, Vercel, Netlify에 배포하거나 코드베이스에 직접 통합할 수 있습니다.
1. 콘텐츠를 HtmlDrag로 가져오기
이미 가지고 있는 자료와 일치하는 시작 경로를 선택하세요. HTML을 업로드하고 코드를 붙여넣으면 시각적 편집을 위해 기존 페이지가 열립니다. 웹페이지 복제는 공개 웹페이지를 캡처합니다. AI 정밀 다듬기는 가져온 페이지에서 대상 편집을 수행합니다. 파일을 HTML로 변환은 지원되는 문서와 이미지를 편집 가능한 HTML 초안으로 변환합니다.
1.1 홈 작업 공간
홈 작업 공간은 기존 HTML을 위한 HTML 편집기, 가져온 페이지의 대상 변경을 위한 AI 정밀 다듬기, 소스 자료에서 편집 가능한 페이지를 생성하기 위한 파일을 HTML로 변환 등 기본 시작 크레딧을 함께 유지합니다. 시작 지점과 일치하는 항목을 선택한 다음 편집기 또는 미리 보기 작업 공간에서 계속하세요.
1.2 웹페이지 복제
웹페이지 복제는 공개 웹페이지를 캡처하고 그 결과를 편집 가능한 프로젝트로 변환합니다. 실시간 참조 페이지가 있지만 원본 HTML 파일이 없는 경우 유용합니다.
공개 URL을 입력하세요.
열려 있는 웹페이지 복제, 공개 붙여넣기 http:// 또는 https:// 주소를 클릭하고 복제. 개인 네트워크 주소, 로컬 파일 경로, 개인 로그인이 필요한 페이지는 지원되지 않습니다.
웹페이지 복제: 공개 웹페이지 주소를 붙여넣고 복제를 시작합니다.
캡처된 페이지 검토
캡처가 완료되면 미리보기 또는 편집기 작업 공간에서 페이지를 검토하세요. 외부 자산, 보호된 이미지 또는 JavaScript 전용 콘텐츠는 정확하게 재현되지 않을 수 있습니다. 결과가 불완전한 경우 렌더링된 HTML을 붙여넣거나 대신 원본 HTML을 업로드하세요.
1.3 HTML 업로드
사용 HTML 업로드 이미 가지고 있을 때 .html 또는 .htm 파일을 저장하고 페이지를 처음부터 다시 작성하지 않고 시각적인 변경을 원합니다.
기존 HTML 파일 선택
선택하다 HTML 업로드을 클릭한 다음 HTML 파일을 클릭하거나 업로드 영역으로 드래그합니다. 소스 페이지는 편집기의 시작점으로 남아 있습니다. HtmlDrag는 페이지를 정적 스크린샷으로 바꾸지 않습니다.
HTML 업로드: 기존 .html 또는 .htm 파일을 선택하거나 드래그합니다.
가져온 결과 확인
보안 점검 및 파싱 단계를 거친 후 미리보기나 편집기를 열어 레이아웃, 텍스트, 이미지, 링크, 외부 리소스 등을 확인한 후 편집하세요.
1.4 코드 붙여넣기
사용 코드 붙여넣기 HTML이 코드 도우미, 로컬 편집기, 이메일 또는 다른 브라우저 탭에 있는 경우.
렌더링된 HTML 붙여넣기
페이지에 필요한 구조와 스타일을 포함하여 전체 HTML을 코드 영역에 붙여넣은 다음 편집기 열기. 페이지가 AI 도구로 생성된 경우 페이지에 대한 설명보다는 시각적으로 구체화하려는 버전을 붙여넣습니다.
코드 붙여넣기: HTML 소스 코드를 삽입하고 편집기에서 엽니다.
리소스 및 안전 고지 검토
HtmlDrag는 가져온 콘텐츠를 열기 전에 확인합니다. 스크립트, 로컬 리소스, 외부 글꼴 또는 차단된 삽입에 대한 경고를 검토하고 페이지가 편집기에서 여전히 올바르게 보이는지 확인하세요.
1.5 표적 AI 정밀 다듬기
AI 정밀 다듬기 집중된 지시로 기존 페이지를 변경하는 것입니다. 업로드된 HTML 페이지, 붙여넣은 코드 또는 캡처된 URL에서 시작한 다음, 페이지의 관련 없는 부분을 다시 빌드하도록 요청하지 않고 AI에게 무엇을 변경할지 알려줍니다.
AI 정밀 다듬기: 기존 페이지를 대상 편집의 소스로 선택
구체화 작업공간 열기
AI 정밀 다듬기 항목을 선택하고 페이지 미리보기가 로드될 때까지 기다립니다. 작업 공간은 주의가 필요한 정확한 콘텐츠를 선택할 수 있도록 페이지 옆에 지침 영역을 유지합니다.
AI 정밀 다듬기: 선택한 페이지를 처리 중입니다.
변경 범위 선택
사용 선택하려면 클릭하세요. 개별 요소에 대해 또는 영역 선택 지역에 대해. 페이지에 선택 공간이 더 필요할 경우 전체 화면 모드로 전환할 수도 있습니다. 그런 다음 선택한 사본 수정, 이미지 교체, 초점이 맞춰진 시각적 영역 조정 등 요청된 변경 사항을 프롬프트 상자에 설명합니다.
AI 정밀 다듬기: 지침이 영향을 미치는 요소를 표시합니다.
검토 및 계속 편집
결과가 준비되면 업데이트된 미리보기를 원본 페이지와 비교하세요. 변경 사항이 올바른 경우 추가 시각적 편집을 위해 편집기에서 엽니다. 충분히 정확하지 않은 경우 선택 범위를 좁히거나 관련 없는 요소를 변경하는 대신 명령을 다시 작성하십시오.
AI 정밀 다듬기: 결과를 검토한 후 편집기에서 열거나 미리 봅니다.
1.6 AI로 파일을 편집 가능한 HTML로 변환
파일을 HTML로 변환 소스 자료에서 편집 가능한 HTML 페이지를 만듭니다. 시작점이 PDF, Word 문서, PPT/PPTX 프리젠테이션, Excel/XLSX 스프레드시트, CSV, Markdown 또는 텍스트 파일이거나 기존 HTML이 아닌 이미지일 때 유용합니다.
파일을 HTML로: 문서, 스프레드시트, 프리젠테이션 또는 이미지에서 시작
소스 파일 업로드
열려 있는 파일을 HTML로 변환, 소스 파일을 첨부하고 빌드하려는 항목을 설명하는 간단한 지침을 추가합니다. 프롬프트는 페이지 목적, 대상, 톤, 구조 또는 시각적 방향을 지정할 수 있습니다.
파일을 HTML로: 소스 파일을 첨부하고 원하는 페이지를 설명하세요.
콘텐츠가 정리되는 동안 기다리세요
HtmlDrag는 먼저 소스 자료를 읽고 콘텐츠 계층 구조를 식별하고 페이지 레이아웃을 계획합니다. 긴 문서, 표, 슬라이드 및 이미지는 처리하는 데 서로 다른 시간이 걸릴 수 있습니다.
파일을 HTML로: 소스가 HTML 페이지로 결합됩니다.
파일을 HTML로: 시스템이 계층 구조, 레이아웃 및 구성 요소를 구성합니다.
편집 가능한 결과 검토
페이지가 준비되면 미리보기를 검토하고 선택하세요. AI 정밀 다듬기, 편집기에서 열기, 공유, 또는 HTML 다운로드 필요에 따라. 출력은 동일한 시각적 편집 작업 흐름을 통해 계속할 수 있는 편집 가능한 HTML 페이지입니다.
파일을 HTML로: 생성된 HTML 페이지를 검토하고 편집할 준비가 되었습니다.
2. 비주얼 에디터 핵심 기능
HtmlDrag의 핵심은 코드 편집이 필요 없이 실제 HTML 환경에서 직접 작업할 수 있게 해주는 강력한 WYSIWYG 편집기입니다.
2.1 에디터 인터페이스 개요
시각적 편집기는 캔버스, 탐색, 오른쪽 제어판, 저장 또는 내보내기 작업을 결합합니다. 선택한 요소는 캔버스에 윤곽선으로 표시되고 오른쪽 패널에는 현재 선택 항목에 적용되는 컨트롤이 표시됩니다.
시각적 편집기 작업 공간: 요소를 선택하고 조정하고 프로젝트를 저장하거나 내보냅니다.
왼쪽 탐색 및 기록
왼쪽 탐색은 기본 작업 공간과 저장된 작업 영역 사이를 전환합니다. 이를 사용하여 홈 항목 크레딧으로 돌아가거나 기존 프로젝트를 엽니다.
중앙 캔버스 영역
캔버스에는 가져오거나 생성된 HTML 페이지가 표시됩니다. 요소를 직접 선택하고, 페이지가 복잡할 때는 선택 도구를 사용하고, 더 많은 공간이 필요할 때는 확대/축소 또는 전체 화면 컨트롤을 사용하세요.
오른쪽 패널(편집/구성요소/레이어/라이브러리)
오른쪽 패널에는 선택한 요소 편집, 구성요소 삽입, 레이어 목록에서 요소 찾기, 라이브러리에 저장된 구성요소 재사용을 위한 컨트롤이 포함되어 있습니다.
상단 및 하단 작업
상단 영역에는 프로젝트 제목, 공유, 이미지 및 HTML 내보내기 작업이 제공됩니다. 하단 컨트롤은 미리보기, 복원, 새로 고침 및 버전 저장 작업을 제공합니다.
2.2 기본 조작 및 선택
편집기는 직접 선택, 영역 선택, 전체 화면 검토 및 집중 편집을 지원합니다. 원하는 변경 내용을 포함하는 가장 작은 선택부터 시작하세요.
선택 보기: 집중된 변경 사항을 적용하기 전에 선택한 요소를 검토합니다.
요소 인식
사용 선택하려면 클릭하세요. 페이지에서 하나의 요소를 선택합니다. 편집기는 요소의 윤곽을 잡고 해당 태그나 콘텐츠를 선택 상태로 표시합니다.
영역 선택 및 전체 화면
사용 영역 선택 근처의 여러 요소가 동일한 시각적 영역에 속하는 경우. 사용 전체 화면 복잡한 레이아웃을 선택, 검토 또는 개선하기 위해 페이지에 더 많은 공간이 필요한 경우.
전체 화면 선택: 복잡한 페이지에서 더 많은 공간을 활용하여 작업
드래그 모드 및 편집 모드
드래그 모드를 사용하여 선택한 요소의 위치를 변경하고 편집 모드를 사용하여 텍스트나 지원되는 요소 콘텐츠를 변경하세요. 오른쪽 컨트롤은 현재 선택 사항에 따라 업데이트됩니다.
요소 잠금, 숨기기 및 삭제
요소 컨트롤 또는 상황에 맞는 메뉴를 사용하여 실수로 편집되지 않도록 요소를 잠그고, 레이아웃을 검토하는 동안 요소를 숨기거나, 현재 HTML에서 삭제하세요. 삭제하기 전에 선택 사항을 확인하세요. 이전 상태로 돌아가야 할 경우 실행 취소 또는 복원을 사용하세요.
상황에 맞는 메뉴
선택한 요소를 마우스 오른쪽 버튼으로 클릭하면 복사, 붙여넣기, 라이브러리에 요소 추가, 링크 편집, 레이어 작업, 잠금, 숨기기, 삭제 등의 빠른 작업에 액세스할 수 있습니다.
다중 선택
여러 요소를 함께 검토하거나 조정해야 하는 경우 다중 선택을 사용하세요. 변경 사항을 적용하기 전에 선택한 요소 목록을 확인하고, 영향을 받지 않아야 하는 경우 선택 항목에서 항목을 제거하십시오.
2.3 캔버스 단축키
키보드 단축키를 익히면 편집 효율성을 크게 높일 수 있습니다. 캔버스 영역에서 지원되는 주요 단축키는 다음과 같습니다.
| 작업바로가기 | |
| 줌 | Ctrl / Cmd + 마우스 휠 |
| 팬 | 스페이스바 + 마우스 끌기 |
| 다중 선택 | 쉬프트 + 클릭 |
| 복사 | Ctrl / Cmd + C |
| 붙여넣기 | Ctrl / Cmd + V |
| 실행 취소 | Ctrl / Cmd + Z |
| 삭제 | 삭제/백스페이스 |
2.4 오른쪽 패널 - 편집 탭
"편집" 탭은 가장 자주 사용되는 영역으로, 모드 토글과 풍부한 스타일 조정 도구를 제공합니다. 요소를 선택한 후 패널은 요소 유형에 따라 편집 옵션을 지능적으로 표시합니다.
편집 탭: 모드 토글 및 스타일 도구
모드 토글
패널 상단에는 편집기 상호 작용 동작을 제어하는 4개의 모드 스위치가 있습니다. 각 토글은 현재 상태를 나타내는 메시지 알림과 함께 독립적으로 켜거나 끌 수 있습니다.
| 모드설명 | |
| 구성 요소 편집 | 활성화되면 대화형 기능 구성 요소(예: 버튼, 양식 입력 등)를 선택하고 조정할 수 있습니다. 비활성화되면 텍스트 내용만 편집할 수 있습니다. 정확한 양식 요소 조작이 필요한 시나리오에 이상적입니다. |
| 링크 탐색 | 활성화되면 편집 모드에서 연결된 요소를 클릭하면 대상 URL로 직접 이동됩니다. 비활성화되면 탐색이 차단되므로 링크 요소 자체를 편집할 수 있습니다. 참고: 이 설정은 미리보기 또는 다운로드한 링크 기능에 영향을 주지 않습니다. |
| 삭제 모드 | 활성화되면 상황에 맞는 메뉴를 사용하지 않고 요소를 클릭하기만 하면 삭제할 수 있습니다. 비활성화되면 일반 편집 모드가 다시 시작됩니다. 여러 요소를 빠르게 지우는 데 이상적입니다. |
| 장식 레이어 | 활성화하면 빈 컨테이너와 장식 요소(예: 테두리 컨테이너, 배경 레이어 등)를 식별하고 편집할 수 있습니다. 비활성화되면 실제 콘텐츠가 있는 요소만 인식됩니다. 복잡한 페이지 레이아웃의 경우 이 기능을 활성화하면 장식 요소를 더 세밀하게 제어할 수 있습니다. |
팁: 편집 중에는 구성 요소를 편집할 수 있도록 링크 탐색이 기본적으로 비활성화되어 있습니다. 링크를 따라가려면 편집 패널에서 "링크 탐색" 스위치를 켜세요. 편집 모드에서는 콘텐츠를 보호하기 위해 양식 제출도 차단됩니다.
텍스트 스타일
텍스트 요소를 선택하거나 편집 모드로 들어가면 패널에 다음 서식 옵션이 포함된 포괄적인 텍스트 스타일 도구가 표시됩니다.
텍스트 스타일: 글꼴, 크기, 색상 설정
| 기능설명 | |
| 글꼴 | 시스템 글꼴, 영어 글꼴(Inter, Roboto, Open Sans 등) 및 중국어 글꼴(SimSun, SimHei, Microsoft YaHei, Source Han Sans 등) 중에서 선택하세요. |
| 글꼴 크기 | 12px에서 72px까지 다양한 사전 설정 크기를 사용하거나 사용자 정의 크기를 수동으로 입력하세요. |
| 글꼴 색상 / 배경 색상 | 캔버스 색상 선택기 지원을 통해 색상 선택기를 통해 텍스트 색상과 배경 강조 표시를 설정합니다. |
| 굵게, 기울임꼴, 밑줄, 취소선 | 굵게, 기울임꼴, 밑줄 및 취소선 효과를 원클릭으로 전환할 수 있습니다. |
| 정렬 | 네 가지 텍스트 정렬 옵션(왼쪽, 가운데, 오른쪽, 양쪽 맞춤) |
| 줄 높이, 문자 간격, 단락 간격 | 최적화된 타이포그래피를 위해 줄 높이(1x ~ 3x), 문자 간격 및 단락 간격을 미세 조정합니다. |
| 위 첨자, 아래 첨자 | 선택한 텍스트의 서식을 수학 공식, 화학 표기법 등의 위 첨자 또는 아래 첨자로 지정합니다. |
| 글머리 기호 목록, 번호 매기기 목록 | 텍스트를 순서가 없는(글머리 기호) 또는 순서가 있는(번호가 매겨진) 목록으로 빠르게 변환합니다. |
| 들여쓰기 제어 | 단락 계층 구조를 조정하려면 들여쓰기를 늘리거나 줄입니다. |
요소 스타일
요소를 선택한 후 요소 스타일 도구를 사용하여 모양을 조정합니다.
| 기능설명 | |
| 테두리 스타일 | 테두리 유형(없음, 실선, 점선, 점선), 너비(1px-10px) 및 색상을 설정합니다. 모든 테두리를 빠르게 제거하려면 "테두리 지우기"를 클릭하세요. |
| 코너 반경 | 네 모서리 모두의 모서리 반경을 조정하여 둥근 직사각형이나 원형 효과를 만듭니다. |
| 불투명 | 슬라이더를 사용하여 투명도 효과에 대한 요소 불투명도(0%-100%)를 조정합니다. |
| 그림자 | 4가지 그림자 사전 설정(없음, 밝은 그림자, 중간 그림자, 깊은 그림자)으로 빠른 깊이 효과를 얻을 수 있습니다. |
| 위치 및 크기 | 요소 X/Y 좌표와 너비/높이 값을 정확하게 설정합니다. |
| 종횡비 잠금 | 활성화되면 너비를 조정하면 높이가 비례하여 자동으로 조정됩니다. |
이미지 스타일
이미지 요소를 선택한 후 표시 옵션을 조정하고 이미지를 바꿉니다.
| 기능설명 | |
| 이미지 맞춤 | 네 가지 맞춤 모드 - 포함(비례적으로 비율 조정), 덮개(채우기), 채우기(늘이기), 없음(원본 크기). |
| 위치 | 9그리드 포지셔너를 사용하여 컨테이너 내에서 이미지 정렬을 설정합니다(왼쪽 상단, 중앙 상단, 오른쪽 상단, 왼쪽 중앙, 중앙, 오른쪽 중앙, 왼쪽 하단, 중앙 하단, 오른쪽 하단). |
| 이미지 교체 | 새 로컬 이미지를 업로드하거나 대체할 URL을 입력하세요. 로컬 업로드는 JPG, PNG, GIF, WebP 및 기타 일반적인 형식을 지원합니다. |
테이블 스타일
테이블이나 테이블 셀을 선택하면 전용 테이블 편집 도구를 사용할 수 있습니다. 자세한 지침은 다음을 참조하세요. 4.10 테이블 편집.
표 스타일: 행/열 작업, 테두리 및 셀 설정
| 기능설명 | |
| 행/열 작업 | 위/아래에 행을 삽입하고, 왼쪽/오른쪽 열을 삽입하거나 행/열을 삭제합니다. |
| 셀 정렬 | 셀 내용의 가로 정렬(왼쪽, 가운데, 오른쪽)과 세로 정렬(위, 가운데, 아래)을 설정합니다. |
| 테두리 스타일 | 표 테두리 너비, 스타일(실선, 점선 등) 및 색상을 조정합니다. |
| 셀 배경 | 셀 배경색 설정 - 머리글이나 중요한 데이터를 강조하는 데 적합합니다. |
| 병합/분할 | 하나로 병합하려면 인접한 셀을 선택하세요. 병합된 셀은 원본으로 다시 분할될 수 있습니다. |
링크 편집
요소에 클릭하여 탐색 링크를 추가하거나 기존 링크를 편집합니다.
| 기능설명 | |
| 링크 삽입/수정 | 선택한 요소에 클릭 탐색을 추가하려면 타겟 URL을 입력하세요. http/https 링크를 지원합니다. |
| 링크 제거 | 요소에서 링크를 제거하여 일반 요소로 복원합니다. 시스템은 실행하기 전에 제거할 링크 수를 확인합니다. |
정렬 도구(다중 선택)
여러 요소를 선택하면 패널에 요소 레이아웃을 빠르게 구성하는 데 도움이 되는 정렬 및 배포 도구가 표시됩니다.
| 기능설명 | |
| 왼쪽 / 오른쪽 / 위쪽 / 아래쪽 가장자리 정렬 | 선택한 모든 요소를 가장 왼쪽/오른쪽/맨 위/맨 아래 요소의 가장자리에 정렬합니다. |
| 가로/세로 중심 | 선택한 모든 요소의 중앙 크레딧을 수평 또는 수직으로 정렬합니다. |
| 가로/세로 배포 | 선택한 여러 요소를 수평 또는 수직으로 동일한 간격으로 배포합니다. |
2.5 오른쪽 패널 - 구성 요소 탭
"구성 요소" 탭은 다양한 요소 유형에 대한 빠른 삽입 옵션을 제공하여 캔버스에 새 콘텐츠를 빠르게 추가하는 데 도움이 됩니다. 버튼을 클릭하면 해당 구성요소가 삽입됩니다.
구성요소 탭: 한 번의 클릭으로 다양한 요소 삽입
| 구성 요소 설명 | |
| 텍스트 삽입 | 편집 가능한 텍스트 블록을 캔버스에 삽입합니다. 삽입 후 더블클릭하면 편집 모드로 진입하여 내용을 수정할 수 있습니다. |
| 삽입 버튼 | 미리 스타일이 지정된 버튼 요소를 삽입합니다. 버튼 텍스트를 편집하고 클릭 링크를 추가할 수 있습니다. |
| 이미지 삽입 | 로컬 업로드 또는 URL 입력을 지원하는 이미지 업로드 대화 상자를 엽니다. 단일 파일 크기 및 일괄 업로드 제한이 적용됩니다. 자세한 내용은 업로드 인터페이스를 참조하세요. |
| 아이콘 삽입 | 화살표, 모양, 기호, 사회, 장식 및 일반 등 6가지 범주가 있는 아이콘 선택기를 엽니다. 삽입하기 전에 아이콘 색상과 크기를 설정하세요. |
| 표 삽입 | 테이블 크기 선택기를 엽니다. 마우스를 올려 행과 열(예: 3×4 표)을 선택한 다음 클릭하여 삽입하세요. |
| 링크 삽입 | 연결된 텍스트 요소를 캔버스에 삽입합니다. 링크 URL과 표시 텍스트를 입력하세요. |
| 직사각형/원 삽입 | 기본 모양 요소를 삽입합니다. 요소 스타일 도구를 사용하여 장식이나 레이아웃에 대한 테두리, 배경색, 반경 및 기타 속성을 조정합니다. |
2.6 오른쪽 패널 - 레이어 탭(DOM 트리)
"레이어" 탭은 캔버스에서 편집 가능한 모든 요소의 목록 보기를 제공하여 필터링, 일괄 작업 및 정확한 위치 지정을 지원합니다. 이는 복잡한 페이지 요소를 관리하기 위한 강력한 도구입니다.
레이어 탭: 레이어 관리 및 일괄 작업
요소 카드 목록
패널에는 관리 가능한 모든 요소가 카드로 표시됩니다. 각 카드에는 요소의 태그 유형(예: DIV, IMG, SPAN)과 레이어 수준이 표시되며, 텍스트 요소에는 콘텐츠 미리보기가 표시됩니다. 장식 레이어 요소에는 "장식" 배지가 표시됩니다. 빠른 잠금/잠금 해제 및 숨기기/표시 아이콘이 각 카드의 오른쪽에 나타납니다.
필터 옵션
다음 옵션을 사용하여 요소 상태별로 목록을 필터링하려면 필터 버튼을 클릭하세요.
| 필터설명 | |
| 모두 | 관리 가능한 요소 모두 표시 |
| 잠김 | 잠긴 요소만 표시 |
| 잠금 해제됨 | 잠금 해제된 요소만 표시 |
| 숨겨진 | 숨겨진 요소만 표시 |
| 보이는 | 보이는 요소만 표시 |
일괄 작업
카드 목록에서 여러 요소를 선택한 후 일괄 처리를 위해 일괄 작업 버튼을 사용하십시오.
| 작업설명 | |
| 모두 선택 / 선택 반전 | 모든 요소를 빠르게 선택하거나 현재 선택을 반전 |
| 선택 항목 잠금/선택 항목 잠금 해제 | 선택한 요소를 일괄 잠금 또는 잠금 해제합니다. 잠긴 요소는 편집하거나 이동할 수 없습니다. |
| 선택 항목 숨기기/선택 항목 표시 | 선택한 요소를 일괄 숨기거나 표시합니다. 숨겨진 요소는 캔버스에서는 보이지 않지만 HTML에는 남아 있습니다. |
| 선택 항목 삭제 | 확인 메시지와 함께 선택한 요소를 일괄 삭제합니다. |
정밀 토글
레이어 탭은 요소 인식 정확도를 제어하기 위한 정밀 토글을 제공합니다.
| 상태 설명 | |
| 정밀 켜짐 | 중복 카드를 줄이기 위해 호스트 요소만 표시하는 자동 중복 제거 |
| 정밀도 끄기 | 정확한 인라인 요소 작업에 이상적인 모든 후보 요소(인라인 조각 포함) 표시 |
카드를 클릭하여 찾으세요.
요소 카드를 클릭하면 캔버스가 자동으로 스크롤되고 해당 요소가 강조 표시되므로 페이지에서 특정 구성 요소를 빠르게 찾을 수 있습니다. 이는 복잡하거나 계층화된 페이지 레이아웃으로 작업할 때 특히 유용합니다.
2.7 오른쪽 패널 - 라이브러리 탭(즐겨찾기)
"라이브러리" 탭은 자주 사용하는 요소나 구성 요소를 여러 프로젝트에서 재사용할 수 있도록 저장하여 창의적 효율성을 높일 수 있는 개인 구성 요소 라이브러리입니다.
라이브러리 탭: 개인 구성 요소 라이브러리
즐겨찾는 구성 요소 목록
패널에는 저장된 모든 구성 요소가 카드로 표시되며 각 구성 요소에는 썸네일과 이름이 표시됩니다. 저장 시 썸네일이 자동 생성됩니다. 이름이 지정되지 않은 구성 요소는 "제목 없음"으로 표시됩니다.
즐겨찾기 검색
검색 상자를 사용하면 저장된 구성 요소를 이름으로 빠르게 찾을 수 있습니다. 입력하는 동안 목록이 실시간으로 필터링됩니다.
즐겨찾는 구성요소 삽입
해당 구성 요소를 현재 캔버스에 추가하려면 라이브러리 카드의 "삽입" 버튼을 클릭하세요. 삽입된 구성 요소는 정상적으로 편집 및 조정할 수 있습니다.
즐겨찾기 이름 바꾸기/삭제
각 도서관 카드는 "이름 바꾸기" 및 "삭제" 옵션을 제공합니다. 이름을 바꾸면 나중에 구성요소를 더 쉽게 찾을 수 있습니다. 삭제하면 저장된 구성요소가 영구적으로 제거됩니다. 주의해서 사용하세요.
라이브러리에 추가하는 방법
캔버스에서 요소를 선택한 다음 컨텍스트 메뉴에서 "라이브러리에 추가"를 선택하여 해당 요소와 해당 하위 요소를 구성 요소로 저장합니다. 성공하면 "라이브러리에 추가됨" 확인 메시지가 나타납니다.
2.8 상황에 맞는 메뉴
선택한 요소를 마우스 오른쪽 버튼으로 클릭하면 상황에 맞는 메뉴가 열리고 일반적인 작업에 빠르게 액세스할 수 있습니다. 메뉴 콘텐츠는 선택한 요소 유형에 따라 동적으로 조정됩니다.
상황에 맞는 메뉴: 일반적인 작업에 대한 빠른 액세스
| 메뉴 항목 설명 | |
| 복사/붙여넣기 | 선택한 요소를 클립보드에 복사하거나 클립보드 내용을 캔버스에 붙여넣습니다. 교차 작업 복사 및 붙여넣기를 지원합니다. |
| 라이브러리에 추가 | 다른 프로젝트에서 재사용할 수 있도록 선택한 요소를 개인 라이브러리에 저장하세요. |
| 링크 추가/수정/제거 | 요소에 클릭하여 탐색 링크를 추가하거나 기존 링크를 편집/제거합니다. 제거 확인 메시지가 표시됩니다. |
| 이미지 교체 | 이미지 요소에 대해서만 표시됩니다. 로컬 업로드 또는 URL 이미지로 빠르게 교체하세요. |
| 위로 이동/아래로 이동 | 스택 순서에서 요소의 위치를 조정합니다. 위로 이동하면 앞으로 가져옵니다. |
| 맨 앞으로 가져오기/맨 뒤로 보내기 | 요소를 모든 요소의 앞이나 뒤로 직접 이동합니다. |
| 잠금/잠금 해제 | 잠긴 요소는 편집하거나 이동할 수 없으므로 실수로 변경되는 것을 방지할 수 있습니다. 편집 가능성을 복원하려면 잠금을 해제하세요. |
| 숨기기 / 표시 | HTML에 유지하면서 캔버스에서 요소를 일시적으로 숨깁니다. 표시가 가시성을 복원합니다. |
| 삭제 | 선택한 요소를 영구적으로 삭제합니다. 여러 요소를 선택하면 개수가 표시됩니다. |
테이블별 메뉴
테이블 셀을 마우스 오른쪽 버튼으로 클릭하면 메뉴에 테이블별 추가 작업이 표시됩니다.
| 메뉴 항목 설명 | |
| 행 삭제 | 현재 셀을 포함하는 전체 행 삭제(마지막 행은 삭제할 수 없음) |
| 열 삭제 | 현재 셀이 포함된 전체 열 삭제(마지막 열은 삭제할 수 없음) |
2.9 테이블 편집
테이블이나 테이블 셀을 선택하면 오른쪽 패널에 포괄적인 테이블 스타일 지정 및 구조 조정 기능을 갖춘 전용 테이블 편집 도구가 표시됩니다.
표 편집: 행/열 작업 및 스타일 설정
행 및 열 작업
테이블 편집기 패널의 "행 및 열" 섹션은 다음을 제공합니다.
| 작업설명 | |
| 위/아래에 행 삽입 | 현재 행 위 또는 아래에 새 행 삽입 |
| 행 삭제 | 현재 선택된 행 삭제(마지막 행은 삭제할 수 없음) |
| 열 왼쪽/오른쪽 삽입 | 현재 열의 왼쪽이나 오른쪽에 새 열을 삽입합니다. |
| 열 삭제 | 현재 선택된 열 삭제(마지막 열은 삭제할 수 없음) |
셀 병합/분할
인접한 여러 셀을 선택한 후 "셀 병합"을 사용하여 하나로 결합하세요. 병합된 셀의 경우 "셀 분할"을 사용하여 원래의 여러 셀로 복원할 수 있습니다.
셀 정렬
두 가지 차원으로 셀 내용 정렬을 설정합니다.
| 차원 옵션 | |
| 수평의 | 왼쪽, 중앙, 오른쪽 |
| 수직의 | 상단, 중간, 하단 |
테두리 스타일
다음을 포함하여 테이블 테두리 모양을 사용자 정의합니다.
| 속성 설명 | |
| 테두리 너비 | 테두리 두께 설정 |
| 테두리 스타일 | 실선, 점선, 점선, 이중, 없음 |
| 테두리 색상 | 색상 선택기를 통해 테두리 색상을 선택하세요. |
변경 사항을 저장하려면 "적용"을 클릭하세요.
셀 배경
색상 선택기를 사용하여 셀 배경색을 설정하세요. 머리글이나 중요한 데이터 행을 강조 표시하는 데 적합합니다.
2.10 줌 제어 및 뷰포트 사전 설정
캔버스 하단에 있는 확대/축소 컨트롤러는 확대/축소 및 뷰포트 크기 조정을 제공하므로 다양한 장치 크기에서 작업을 미리 볼 수 있습니다.
확대/축소 제어: 캔버스 확대/축소 및 뷰포트 크기 조정
확대 / 축소 / 재설정
캔버스 보기를 확대 또는 축소하려면 "+" 및 "-" 버튼을 사용하고 빠르게 확대/축소하려면 Ctrl/Cmd + 마우스 휠을 누르세요. 기본 확대/축소로 재설정하려면 백분율 숫자를 클릭하세요. Space를 누른 상태에서 드래그하여 캔버스를 이동합니다.
뷰포트 크기 사전 설정
뷰포트 선택기를 클릭하여 미리보기 크기를 전환하고 다양한 장치에서의 디스플레이를 시뮬레이션합니다.
| 뷰포트 크기설명 | |
| 자동 | 대부분의 시나리오에 적합한 콘텐츠 크기 일치 |
| 데스크톱 1920×1080(기본값) | 풀 HD 데스크탑 모니터 |
| 데스크탑 1440×900 | 일반적인 노트북 화면 |
| 데스크탑 1366×768 | 인기 있는 노트북 해상도 |
| 데스크탑 1280×720 | HD 해상도 |
| 태블릿 1024×768 | 표준 태블릿 장치 |
| 모바일 375×812 | iPhone 및 유사한 모바일 장치 |
미리보기 패치
특별한 구조를 가진 HTML 페이지의 경우 디스플레이 최적화를 위해 세 가지 미리보기 패치를 사용할 수 있습니다. 패치를 활성화하거나 비활성화하면 미리보기가 자동으로 저장되고 새로 고쳐집니다.
| 패치 설명 | |
| USP — 매우 긴 페이지 안정화 | 매우 높거나 경계가 없는 캔버스를 최적화하여 지터를 줄입니다. 복잡하고 경계가 없는 정적 파일에 적합 |
| UFP — 뷰포트 너비 수정 | 뷰포트 너비를 제한하여 적절하고 복잡한 레이아웃 표시를 복원합니다. |
| SHP — 비정상적인 크기 최적화 | 향상된 호환성을 위해 비정상적으로 구조화된 HTML을 최적화합니다. |
팁: 패치가 눈에 띄는 효과를 내지 않으면 먼저 "초기 HTML 복원"을 시도한 다음 패치를 다시 활성화하세요.
2.11 HTML 소스 편집기
HTML 편집기를 사용하면 작업의 전체 HTML 소스 코드를 직접 보고 편집할 수 있습니다. 이는 미세 조정이나 사용자 정의 코드 추가가 필요한 고급 사용자에게 이상적입니다. 이 기능은 Pro에만 해당됩니다.
HTML 편집기: 소스 코드 직접 편집(Pro)
전체 HTML 보기/편집
HTML 편집기를 열면 전체 HTML 소스 코드(<!DOCTYPE html> 포함)가 표시됩니다. 코드를 직접 편집할 수 있습니다. 저장하면 변경 사항이 적용됩니다.
검색 및 바꾸기
Ctrl+F를 사용하여 찾기를 열고 키워드를 입력하면 코드를 빠르게 찾을 수 있습니다. 일괄 텍스트 교체를 위해 Ctrl+H를 사용하여 교체를 엽니다. 도구 모음에는 개별 또는 전체 교체 옵션과 함께 일치 항목 수(예: "3/15")가 표시됩니다.
라인으로 이동
Ctrl+G 또는 도구 모음 점프 기능을 사용하면 줄 번호를 입력하고 해당 줄로 빠르게 이동할 수 있습니다. 이는 대용량 HTML 파일에 유용합니다.
대소문자 일치
대소문자를 구분하는 콘텐츠를 정확하게 일치시키려면 검색 중에 "대소문자 일치" 옵션을 활성화하세요.
단어 줄 바꿈
단어 줄 바꿈이 활성화되면 가로 스크롤 없이 볼 수 있도록 긴 코드 줄이 자동으로 줄 바꿈됩니다.
복사/저장
전체 소스 코드를 클립보드에 복사하려면 "HTML 복사"를 클릭하세요. 편집 후 저장을 클릭하여 변경 사항을 적용합니다. 콘텐츠가 비어 있거나 구문 오류가 있는 경우 해당 메시지가 나타납니다.
참고: HTML 콘텐츠가 저장 공간 한도를 초과하면 저장할 때 "저장 공간이 부족하여 이 편집 내용을 저장할 수 없습니다."라는 메시지가 표시됩니다. 불필요한 콘텐츠를 삭제하거나 요금제를 업그레이드하여 용량을 늘리세요.
2.12 하단 도구 모음
하단 도구 모음에는 미리보기, 실행 취소/다시 실행, 복원 및 저장 기능을 포함한 편집기의 핵심 작업 버튼이 제공됩니다.
편집기 작업 영역: 버전 미리보기, 복원, 새로 고침 및 저장을 위한 하단 컨트롤
미리보기(새 창에서 열림)
미리보기 버튼을 클릭하면 새 창에서 작업 전체 미리보기가 열리고 실제 표시 결과가 표시됩니다. 미리보기 페이지에는 재사용할 수 없는 링크가 포함된 편집 단계 미리보기임을 사용자에게 알리는 임시 미리보기 알림이 표시됩니다.
실행 취소/다시 실행
실행 취소는 마지막 작업을 되돌립니다. Redo는 실행 취소된 작업을 복원합니다. 여러 실행 취소/다시 실행 단계를 지원합니다. Ctrl+Z(실행 취소) 및 Ctrl+Y(다시 실행)를 통해서도 사용할 수 있습니다.
미리보기 새로고침
새로 고침을 클릭하면 미리보기 영역이 다시 로드됩니다. 시스템은 먼저 현재 콘텐츠를 저장한 다음 캔버스를 새로 고쳐 최신 상태를 표시합니다. 광범위한 편집 후에 디스플레이를 동기화하는 데 유용합니다.
마지막으로 저장된 상태 복원
작업을 마지막으로 수동으로 저장한 상태로 복원합니다. 저장되지 않은 모든 편집 내용은 손실되므로 주의해서 사용하세요. 실행하기 전에 시스템에서 확인 메시지를 표시합니다.
초기 HTML 복원
저작물의 HTML을 처음 생성했을 때의 원래 상태로 복원합니다. 모든 편집 기록이 삭제됩니다. 이 작업은 되돌릴 수 없습니다. 중요한 콘텐츠를 백업했는지 확인하세요.
구하다
모든 현재 변경 사항을 수동으로 저장합니다. 시스템은 자동 저장도 지원하지만, 데이터 안전을 위해 중요한 편집 후에는 수동으로 저장하는 것이 좋습니다. 완료되면 "저장 성공"이 나타납니다.
2.13 상단 도구 모음
상단 도구 모음에는 작업 정보와 빠른 작업 버튼이 표시되어 공유 및 다운로드 기능에 빠르게 액세스할 수 있습니다.
편집기 작업 영역: HTML 다운로드, 이미지 내보내기 및 공유를 위한 상단 컨트롤
프로젝트 제목(수정하려면 두 번 클릭)
상단에는 현재 프로젝트 제목이 표시됩니다. 제목 영역을 두 번 클릭하면 편집 모드로 들어가 이름을 변경할 수 있습니다. 제목은 비워둘 수 없습니다. 성공하면 "제목이 업데이트되었습니다"라는 메시지가 나타납니다. 이름이 없는 프로젝트는 "제목 없는 작품"으로 표시됩니다.
공유 버튼
작업 공유를 활성화하고 액세스 가능한 링크를 생성하려면 공유 버튼을 클릭하세요. 보다 4.16 공유 기능 자세한 내용은. 이 기능은 Pro에만 해당됩니다.
다운로드 버튼
오른쪽에는 "이미지로 다운로드" 및 "HTML로 다운로드" 버튼이 제공됩니다. 보다 4.15 HTML 내보내기 및 다운로드 자세한 내용은.
3. 프로젝트 관리, 공유 및 내보내기
편집 후 깨끗한 HTML 파일을 내보내거나, 비밀번호로 보안 미리보기 링크를 생성하거나, 프로젝트 작업공간에서 프로젝트 버전을 관리하세요.
3.1 HTML 내보내기 및 다운로드
사용 HTML 다운로드 오른쪽 상단 도구 모음에서 편집기에서 검토한 버전을 내보낼 수 있습니다. 내보내기 대화 상자는 편집된 페이지를 원본 소스에서 분리하고 복사 및 AI 핸드오프 옵션도 제공합니다.
HTML 내보내기: 편집된 소스나 원본 소스를 선택하고 HTML을 복사하거나 AI로 보냅니다.
편집된 HTML
그만큼 편집된 HTML 탭은 캔버스에 적용된 변경 사항을 포함하여 현재 버전을 내보냅니다.
원본 HTML
그만큼 원본 HTML 탭은 시작 버전을 비교하거나 복구해야 할 때 처음 가져온 소스를 사용 가능한 상태로 유지합니다.
HTML 복사 및 AI로 내보내기
HTML 복사 현재 소스를 클립보드에 복사합니다. AI로 내보내기 다른 AI 워크플로우가 현재 HTML을 읽고 편집된 결과에서 계속할 수 있도록 핸드오프 링크를 생성합니다.
3.2 공유 기능 및 공개 미리보기
공유 기능은 현재 작업에 대한 공개 링크를 생성하므로 다른 사람들이 편집자에 들어가지 않고도 볼 수 있습니다. 아래 스크린샷은 링크를 게시하기 전에 사용할 수 있는 공유 설정을 보여줍니다. 이 기능은 Pro 사용자에게 제공됩니다.
프로젝트 공유: 링크 기간을 선택하고 표시할 공지 또는 사이드바 결정
공유 설정을 선택하세요
딸깍 하는 소리 공유 7일, 30일, 90일 또는 남은 계획 기간 등 사용 가능한 기간을 선택하세요. 공유 링크는 계획 만료 날짜보다 오래 지속될 수 없습니다.
표시 옵션
공유 페이지에서 안전 공지를 숨길지 여부와 오른쪽 사이드바를 숨길지 여부를 선택할 수 있습니다. 이러한 옵션은 프로젝트의 편집 가능한 소스가 아닌 방문자 보기에 영향을 미칩니다.
페이지 및 액세스 공유
공유 후 생성된 링크를 복사하여 리뷰어나 고객에게 보냅니다. 페이지가 더 이상 공개되지 않아야 할 경우 공유 제어로 돌아가서 링크를 업데이트하거나 공유를 중지할 수 있습니다.
3.3 내 프로젝트 바로가기 바
왼쪽에 있는 "내 프로젝트" 바로가기 모음을 사용하면 프로젝트 목록을 확장/축소하고 프로젝트 간을 빠르게 전환할 수 있어 여러 창작물 간의 원활한 전환이 가능해집니다.
확장 및 축소
사이드바 작업 목록을 확장하려면 왼쪽 상단의 "내 프로젝트" 버튼을 클릭하세요. 다시 클릭하거나 사이드바 외부를 클릭하여 접습니다. 확장하면 역사 프로젝트의 썸네일과 제목을 시각적으로 찾아볼 수 있습니다.
프로젝트 전환
목록에서 프로젝트 카드를 클릭하면 해당 콘텐츠가 편집기에 즉시 로드됩니다. 이를 통해 홈페이지나 프로필로 돌아가지 않고도 다양한 디자인 초안을 빠르게 비교하고 수정할 수 있습니다.
3.4 버전 기록 스냅샷
왼쪽 사이드바의 "내 프로젝트"(기록)를 통해 과거 창작물에 빠르게 액세스할 수 있습니다. 모든 편집 기록을 시간순으로 나열합니다.
빠른 선택 및 편집
목록에서 레코드를 클릭하면 편집기에 빠르게 로드되고 다시 가져오지 않고도 중단한 부분부터 계속할 수 있습니다.
미리보기 창 세부정보
미리보기 창을 보려면 기록 기록 위로 마우스를 가져가세요. 미리보기 창에서 다음을 수행할 수 있습니다.
- 제목 직접 편집: 제목 텍스트를 클릭하면 프로젝트 이름이 즉시 수정됩니다.
- 공유 상태 보기: 아이콘은 현재 작업이 공유되었는지 여부를 나타냅니다.
- 빠른 작업: 편집, 삭제 및 기타 바로가기에 액세스합니다.
이력: 과거 프로젝트의 빠른 미리보기 및 관리
3.5 프로젝트 관리 및 조직
프로젝트 관리 모듈에는 보기, 편집, 공유 및 삭제 작업을 지원하는 사용자가 생성한 모든 프로젝트가 표시됩니다.
작업 목록 및 필터
프로젝트는 카드나 목록으로 표시됩니다. 다음을 사용하여 필터링할 수 있습니다.
- 찾다: 직장코드나 직함을 입력하여 검색하세요.
- 유형 필터: AI 생성기, 파일 업로드, 웹페이지 복제, 코드 붙여넣기 등으로 필터링합니다.
- 기간: 특정 기간의 프로젝트를 필터링하려면 시작 날짜와 종료 날짜를 선택하세요.
- 정렬 기준: 최신순, 오래된순, 좋아요수, 조회수 순으로 정렬
프로젝트 관리: 모든 프로젝트 보기, 필터링 및 관리
프로젝트 보기 및 편집
미리 보려면 프로젝트 카드의 "보기" 버튼을 클릭하세요. 미리보기 인터페이스에서는 다음을 수행할 수 있습니다.
- 프로젝트 제목 편집(편집하려면 제목을 두 번 클릭)
- 시각적 편집기로 들어가서 편집을 계속하려면 "편집"을 클릭하세요.
- 작품의 저장 이력을 확인하고 특정 버전으로 복원
공유 현황 관리
Pro 사용자는 프로젝트를 공유하여 다른 사람들이 링크를 통해 볼 수 있도록 할 수 있습니다.
- 공유 활성화: "공유" 버튼을 클릭하면 7일 동안 유효한 공유 링크가 생성됩니다.
- 공유 업데이트: 이미 공유된 프로젝트의 링크를 업데이트하여 유효 기간을 새로 고칠 수 있습니다.
- 공유 중지: "공유 중지"를 클릭하면 링크가 즉시 무효화됩니다.
프로젝트 삭제
프로젝트 카드의 "삭제" 버튼을 클릭하면 프로젝트 카드가 삭제됩니다. 실수로 삭제되는 것을 방지하기 위해 시스템에는 두 개의 확인 대화 상자가 표시됩니다.
- 첫 번째 확인: 이 작품을 삭제할 것인지 묻습니다.
- 두 번째 확인: 삭제하면 되돌릴 수 없음을 알려줍니다.
팁: 한 번에 최대 3개의 기록을 삭제할 수 있습니다. 작업을 삭제하면 사용하던 저장 공간이 해제됩니다.
프로젝트 페이지는 모든 창작물을 보고 관리할 수 있는 전용 공간입니다. 사이드바 또는 사용자 메뉴에서 빠르게 액세스하세요.
작품 전시
페이지에는 모든 프로젝트가 카드로 표시되며 각 프로젝트에는 다음이 포함됩니다.
- 썸네일 미리보기: 빠른 식별을 위한 작품의 시각적 미리보기
- 프로젝트 제목: 프로젝트 이름을 보여줍니다. 편집하려면 클릭하세요.
- 생성시간: 작품이 제작되었을 때의 기록
- 상태 공유: 현재 작업이 공유되어 있는지 여부를 표시합니다.
프로젝트: 모든 창작물을 한 곳에서 보고 관리합니다.
빠른 작업
각 프로젝트 카드는 편리한 작업 버튼을 제공합니다.
- 편집하다: 계속 생성하려면 비주얼 편집기를 입력하세요.
- 공유: 공유 링크 생성 또는 관리(Pro만 해당)
4. 시스템 팁 및 문제 해결
사용 중에 시스템 경고나 제한이 발생할 수 있습니다. 다음은 일반적인 시스템 팁에 대한 설명과 제안입니다.
4.1 HTML 감지 및 핫링크 경고
가져오기 품질과 편집기 안정성을 보장하기 위해 시스템은 URL과 파일을 자동으로 검사하여 잠재적인 문제에 대해 경고합니다.
로컬 리소스 감지
페이지에 로컬 경로가 포함된 경우(예: file:// 또는 C:/), 리소스가 로드되지 않습니다. 제안: 모든 리소스가 공개 HTTP/HTTPS 링크를 사용하는지 확인하세요.
이미지 핫링크 보호
일부 사이트는 이미지에 대한 외부 액세스를 차단합니다. 제안: "이미지 교체"를 사용하여 로컬 파일을 업로드하거나 공용 서비스에 호스팅하세요.
SPA(동적 렌더링 페이지)
JavaScript(SPA)에만 전적으로 의존하는 페이지는 동적 DOM이 직접 캡처되지 않기 때문에 비어 있거나 불완전한 것으로 가져올 수 있습니다. 제안: 브라우저에서 렌더링된 HTML을 복사하여 "코드 붙여넣기"를 사용하세요.
외부 글꼴/아이콘 라이브러리
CORS 헤더가 누락된 글꼴이나 아이콘이 잘못 표시될 수 있습니다. 제안: 편집기에서 시스템 글꼴이나 라이브러리 아이콘으로 대체합니다.
삽입된 콘텐츠(iframe)
보안을 위해 일부 iframe 콘텐츠는 차단되거나 대화형이 아닐 수 있습니다. 시스템은 가능한 경우 자리 표시자를 유지합니다.
4.2 저장 및 사용 제한
HtmlDrag는 계획에 따라 리소스 할당량을 적용합니다. "저장용량 한도에 도달함" 또는 "작업 한도에 도달함" 경고가 표시될 수 있습니다.
저장용량 한도에 도달했습니다.
공간이 부족하면 편집 내용을 저장하거나 파일을 업로드할 수 없습니다. 해결책:
- 공간을 확보하려면 "프로젝트"에서 오래된 항목을 삭제하세요.
- Pro로 더 많은 용량을 얻으려면 대화 상자에서 "지금 업그레이드"를 클릭하세요.
프로젝트 수 제한
무료 사용자는 저장되는 프로젝트 수에 제한이 있습니다. 이 한도를 늘리려면 오래된 프로젝트를 삭제하거나 업그레이드하세요.
이미지 업로드 제한
시스템은 단일 파일 크기와 배치 제한을 확인합니다. "파일 크기가 제한을 초과했습니다." 또는 "배치 크기가 초과되었습니다."가 표시되면 이미지를 압축하거나 더 작은 배치로 업로드하세요. Pro 사용자는 더 높은 한도를 누릴 수 있습니다.
4.3 보안 샌드박스 및 삭제
내장된 보안 스캔은 계정을 보호하기 위해 URL 가져오기, 파일 업로드 또는 코드 붙여넣기 시 콘텐츠 위험을 자동으로 평가합니다.
위험 수준
XSS, 악성 스크립트 또는 위험한 태그와 같은 위협을 기반으로 위험은 다음과 같이 분류됩니다.
- 낮은 위험: 사소한 경고; 일반적으로 진행해도 안전합니다.
- 중간 위험: 잠재적인 문제; 주의해서 진행하세요.
- 위험: 심각한 위험; 소스를 신뢰할 수 있는 경우에만 진행하세요.
- 심각한 위험: 멀웨어 또는 피싱 콘텐츠가 포함되어 있습니다. 즉시 차단됩니다.
안전 모드
일부 위험이 있는 파일의 경우 시스템은 자동 삭제와 같은 "안전 조치"를 제공합니다. 시스템이 레이아웃과 편집 가능성을 유지하면서 위험한 코드를 제거하는 "안전 모드에서 계속"을 선택할 수 있습니다.
4.4 시스템 알림 및 메시지
메시지 모듈은 계정 상태, 결제 알림, 구독 만료 알림, 기능 업데이트 등 중요한 시스템 알림을 받습니다.
메시지: 시스템 알림 및 경고 수신
시스템 메시지 목록
메시지 목록은 시간순으로 정렬되어 제목, 요약, 생성 시간, 만료 시간을 표시합니다. 세부 정보를 보거나 작업(예: "계속 결제", "지금 갱신")을 수행하려면 메시지를 클릭하세요.
읽지 않은 필터
읽지 않은 메시지를 빠르게 필터링하려면 오른쪽 상단의 "읽지 않은 항목만" 상자를 선택하여 중요한 알림에 집중할 수 있습니다.
모두 읽음으로 표시
"모두 읽은 상태로 표시" 버튼을 클릭하면 현재 목록의 모든 메시지를 읽은 상태로 즉시 표시하고 빨간색 점 표시가 지워집니다.
메시지 세부정보
전체 알림 내용을 보려면 메시지 카드를 클릭하세요. 주문 또는 구독 메시지의 경우 편의를 위해 세부 정보에 빠른 작업 버튼이 포함되는 경우가 많습니다.
4.5 피드백 및 지원
문제가 발생하거나 제안 사항이 있는 경우 피드백 모듈을 통해 제출하세요. 문제를 더 잘 설명하기 위해 이미지를 업로드할 수 있습니다.
피드백: 문제 또는 제안 제출
피드백 목록 및 상태
목록에는 제출 내역과 현재 상태가 표시됩니다.
- 진행 중: 의견이 제출되었으며 관리자 검토를 기다리고 있습니다.
- 답변됨: 관리자가 응답했습니다. 보려면 클릭하세요.
- 닫은: 피드백이 보관되거나 해결되었습니다. 더 이상의 답변은 허용되지 않습니다.
새로운 피드백 제출
"새 피드백"을 클릭하고 내용을 입력하세요(필수, 최소 10자). 스크린샷을 제공하려면 "이미지 업로드"(각 최대 2MB)를 수행할 수 있습니다. 완료되면 "의견 제출"을 클릭하세요.
피드백 세부사항 및 대화
목록 항목을 클릭하면 메시지와 관리자 답변을 포함한 전체 대화 기록을 볼 수 있습니다. 상단에는 피드백 ID와 첨부 파일이 표시됩니다.
계속 답장
"진행 중" 또는 "답글" 피드백의 경우 하단의 입력 상자를 사용하여 추가 정보를 제공하거나 문제가 해결될 때까지 관리자에게 회신하세요.
피드백을 제출할 때 관련 스크린샷이나 파일을 추가하면 요청을 더 정확히 이해하는 데 도움이 됩니다. 피드백 상세 페이지에서 관리자의 답변과 대화 기록을 확인하여 처리 진행 상황을 추적할 수도 있습니다.
모든 피드백을 소중히 여기며 최대한 신속하게 처리하겠습니다. 참여와 지원에 감사드립니다!
5. 계정, 크레딧 및 구독(부록)
계정 설정, 로그인 보안, 크레딧 잔액 및 구독 계획을 관리하세요.
5.1 가입
HtmlDrag는 이메일 등록을 사용합니다. 계정을 만들려면 몇 가지 기본 정보만 입력하면 됩니다. 등록이 성공적으로 완료되면 자동으로 로그인되고 홈페이지로 리디렉션됩니다.
이메일 등록
등록 페이지에서 다음 단계를 완료하여 계정을 만드세요.
- 이메일을 입력하세요: 자주 사용하는 이메일 주소를 입력하세요. 이는 로그인 자격 증명 및 알림 채널 역할을 합니다. 이메일 형식이 올바른지 확인하세요. 예:
[email protected]. - 비밀번호 설정: 비밀번호는 문자와 숫자를 모두 포함해야 하며, 8~32자 이내입니다. 계정 보안을 위해 강력한 비밀번호를 사용하는 것이 좋습니다.
- 비밀번호 확인: 두 항목이 모두 일치하는지 확인하려면 비밀번호를 다시 입력하세요.
- 닉네임 설정(선택사항): 닉네임을 맞춤 설정할 수 있습니다. 비워두면 시스템이 자동으로 기본 별명을 생성합니다.
- 약관에 동의: "이용약관 및 개인정보취급방침을 읽었으며 이에 동의합니다."를 체크한 후 "회원가입" 버튼을 클릭하면 회원가입이 완료됩니다.
등록 페이지: 이메일 및 기본 정보를 입력하여 계정 생성
이메일 인증 및 신용 보상
등록이 성공적으로 완료되면 시스템에서 받은 편지함으로 확인 이메일을 보냅니다. 이메일 확인을 완료하면 AI 생성기 및 복제 웹페이지 기능에 사용할 수 있는 보너스 크레딧을 받게 됩니다. 이메일을 받지 못한 경우 스팸 폴더를 확인하세요. 3분 후에 "재전송"을 클릭하여 또 다른 확인 이메일을 요청할 수 있습니다.
팁: 이메일 인증을 완료하면 보너스 크레딧을 받을 뿐 아니라 모든 기능을 이용할 수 있고 계정 보안도 강화됩니다.
5.2 로그인
HtmlDrag는 여러 로그인 방법을 지원합니다. 귀하의 선호도에 따라 가장 편리한 옵션을 선택하십시오.
이메일 및 비밀번호 로그인
등록한 이메일과 비밀번호를 사용하여 로그인하세요.
- 로그인 페이지에 이메일 주소를 입력하세요
- 비밀번호를 입력하세요(비밀번호 표시를 전환하려면 눈 아이콘을 클릭하세요).
- 로그인을 완료하려면 "계속" 버튼을 클릭하세요.
성공적으로 로그인하면 생성을 시작할 수 있는 홈페이지로 자동으로 리디렉션됩니다.
타사 로그인(Google/GitHub)
더 빠르게 액세스하려면 Google 또는 GitHub 계정을 사용하여 로그인할 수 있습니다.
- Google로 로그인: 'Google로 로그인' 버튼을 클릭하세요. Google 승인 팝업에서 계정을 선택하고 승인을 확인하세요.
- GitHub로 로그인: "GitHub으로 로그인" 버튼을 클릭하세요. GitHub의 인증 페이지로 리디렉션됩니다. 확인 후 자동으로 HtmlDrag로 돌아갑니다.
로그인 페이지: 이메일/비밀번호 및 타사 계정 지원
팁: Google 또는 GitHub로 로그인하면 계정이 자동으로 생성되므로 별도 가입이 필요하지 않습니다. 처음으로 타사 계정으로 로그인하면 시스템이 연결된 계정을 자동으로 생성합니다.
비밀번호를 잊으셨나요 링크
비밀번호를 잊으셨다면 '비밀번호를 잊으셨나요?'를 클릭하세요. 비밀번호 재설정 프로세스에 들어가려면 로그인 페이지 오른쪽 하단에 있는 링크를 클릭하세요(섹션 1.3 참조).
5.3 비밀번호 분실 및 재설정
비밀번호를 잊어버린 경우 이메일 인증코드를 이용해 비밀번호를 재설정하실 수 있습니다. 전체 프로세스는 리디렉션 없이 단일 페이지에서 완료됩니다.
비밀번호 재설정 프로세스
비밀번호를 재설정하려면 다음 단계를 따르세요.
- 이메일을 입력하세요: 등록 시 사용한 이메일 주소를 입력하세요.
- 인증 코드 받기: '코드 보내기' 버튼을 클릭하세요. 시스템에서 6자리 인증 코드가 포함된 이메일을 전송합니다.
- 인증코드를 입력하세요: 인증번호 입력란에 수신된 6자리 코드를 입력하세요.
- 새 비밀번호 설정: 새로운 비밀번호를 입력하세요. (문자와 숫자를 포함해야 하며, 8~32자)
- 새 비밀번호 확인: 새 비밀번호를 다시 입력하여 일치하는지 확인하세요.
- "비밀번호 재설정"을 클릭하세요: 비밀번호 재설정을 완료하세요. 성공 메시지가 표시된 후 자동으로 로그인 페이지로 리디렉션됩니다.
비밀번호 분실: 이메일 인증코드를 통해 재설정하세요.
인증 코드 유효성
인증번호는 유효기간이 정해져 있으니 이메일을 받으신 후 바로 사용해주세요. 코드가 만료된 경우 "재전송" 버튼을 클릭하여 새 코드를 요청할 수 있습니다. 재전송하기 전에 카운트다운이 완료될 때까지 기다려야 합니다.
참고: 이메일이 시스템에 등록되어 있지 않으면 인증 코드를 보낼 수 없습니다. 가입할 때 사용한 이메일 주소를 입력했는지 확인하세요.
5.4 프로필 설정
프로필 설정 모듈을 사용하면 아바타, 닉네임, 이메일, 약력, 비밀번호 설정을 포함한 기본 계정 정보를 관리할 수 있습니다.
아바타 변경
아바타 영역에서 "아바타 변경" 버튼을 클릭하고 업로드할 로컬 이미지 파일을 선택하세요. 시스템이 자동으로 새 아바타를 자르고 저장합니다.
닉네임 변경
닉네임 옆에 있는 수정 버튼을 클릭하고 새 이름을 입력한 후 '저장'을 클릭하세요. 귀하의 닉네임은 귀하의 모든 프로젝트와 댓글에 표시됩니다.
이메일 관리
이메일 섹션에는 현재 이메일 주소와 확인 상태가 표시됩니다.
- 확인됨: 귀하의 이메일이 확인되었으며 모든 기능을 사용할 수 있습니다.
- 확인되지 않음: "확인 이메일 보내기"를 클릭하여 확인을 완료하고 보너스 크레딧을 받으세요.
- 이메일 변경: 먼저 현재 이메일을 인증한 후 새 이메일 주소를 입력하여 변경을 완료해야 합니다.
바이오
자기소개 영역에 자기소개를 입력한 후(권장: 200자 이내) '저장'을 클릭하여 업데이트하세요.
비밀번호 변경/비밀번호 설정
비밀번호 설정 대화 상자를 열려면 "비밀번호 변경" 버튼을 클릭하세요.
- 기존 비밀번호를 사용하는 사용자: 현재 비밀번호를 입력한 후 새로운 비밀번호를 설정하세요. (영문, 숫자 포함 8~32자)
- 비밀번호가 없는 사용자: 새로운 비밀번호를 직접 설정하세요. 설정 후 이메일과 비밀번호로 로그인 가능
계정 삭제
계정을 삭제하려면 페이지 하단의 "계정 삭제" 버튼을 클릭하세요. 보안을 위해 이메일 인증 코드를 통해 신원을 확인해야 합니다.
참고: 계정 삭제 요청을 제출하면 일반적으로 30일 동안의 보존 기간이 시작되며, 이 기간에는 로그인할 수 없습니다. 기간이 지나면 시스템이 프로젝트, 크레딧, 기록을 영구적으로 삭제합니다.
프로필: 아바타, 닉네임, 이메일, 비밀번호 관리
5.5 저장소 사용량
스토리지 사용량 모듈은 계정의 스토리지 소비량을 표시하여 남은 공간을 이해하고 이에 따라 창작물을 계획하는 데 도움이 됩니다.
스토리지 개요
상단 섹션에는 다음을 포함한 전체 사용량이 표시됩니다.
- 사용된: 현재 사용중인 저장공간
- 총: 계정의 저장 용량 제한(Pro 사용자는 더 큰 용량을 즐길 수 있음)
- 남은: 새 프로젝트를 생성할 수 있는 공간
- 저장된 프로젝트: 현재 저장된 프로젝트 수 및 한도
스토리지 분석
시스템은 스토리지를 세 가지 유형으로 분류합니다.
- HTML 콘텐츠: 프로젝트의 웹페이지 코드가 사용하는 공간
- 이미지 리소스: 업로드된 이미지 파일이 사용하는 공간
- 기타 리소스: 다른 첨부 파일이 사용하는 공간
프로젝트 수 제한
무료 및 Pro 사용자는 작업 수 제한이 다릅니다. 한도에 도달하면 새 프로젝트를 만들기 전에 일부 프로젝트를 삭제하거나 계획을 업그레이드해야 합니다.
스토리지 새로 고침 및 업그레이드
저장소 정보를 업데이트하려면 새로 고침 버튼을 클릭하세요. 더 많은 저장 공간을 원하시면 "저장 공간 업그레이드"를 클릭하여 가격 페이지를 방문하여 적합한 계획을 선택하세요.
팁: 계정 저장 공간이 가득 차거나 작업 수 한도에 도달하면 새 작업을 만들 수 없습니다. 일부 프로젝트를 삭제하거나 요금제를 업그레이드하여 업로드 권한을 복원하세요.
5.6 크레딧 및 사용 내역
신용 이력 모듈은 소비 및 적립 기록을 포함하여 계정의 신용 거래 내역을 표시합니다.
신용 거래 내역
신용 기록은 다음 정보가 포함된 테이블에 표시됩니다.
- 날짜: 신용 변동이 발생한 때
- 유형: 크레딧 변경 작업 유형
- 학점 변경: 추가된 학점(양수) 또는 차감된 학점(음수)
- 설명: 변경사항에 대한 자세한 설명
날짜 범위 필터를 사용하여 특정 기간의 기록을 볼 수 있습니다.
신용 유형
- AI 생성기: AI 생성기 기능 사용 시 소모되는 크레딧
- 웹페이지 복제: 웹페이지 복제 기능 사용 시 소모되는 크레딧
- 등록 보상: 등록 및 이메일 확인 후 신규 사용자에게 크레딧이 제공됩니다.
- 플랫폼 보너스: 플랫폼에서 선물한 크레딧
- 월별 선물: Pro 사용자를 위한 월별 크레딧 수당
- 신용 충전: 크레딧 구매를 통해 획득한 크레딧
- 관리자 조정: 관리자가 수동으로 조정한 크레딧
신용이력 : 신용거래내역 조회
팁: Pro 사용자는 매월 추가 크레딧을 받습니다. 크레딧은 AI 생성기 및 웹페이지 복제와 같은 유료 기능에 사용할 수 있습니다.
5.7 주문 내역 및 청구
주문 내역 모듈에는 구매 내역과 결제 기록이 표시되므로 주문을 쉽게 조회하고 관리할 수 있습니다.
주문 관리
주문 목록에는 구매 기록이 표시됩니다. 다음을 수행할 수 있습니다.
- 주문 상태 및 세부정보 보기
- 필터를 사용하여 특정 주문을 빠르게 찾으세요
- 보류 중인 주문에 대한 결제 계속
- 더 이상 필요하지 않은 주문을 닫거나 삭제하세요.
팁: 결제에 문제가 있으면 현재 주문을 닫고 새 주문을 생성할 수 있습니다.
5.8 가격 및 구독 계획
가격 페이지에서는 구독 및 크레딧 충전을 관리할 수 있습니다. 귀하에게 가장 적합한 계획을 선택하고 더 많은 창의적인 가능성을 열어보세요.
구독 계획
HtmlDrag는 Pro 및 Pro Max 구독 계획을 제공합니다. 구독 후 활성 구독 기간 동안 포함된 혜택을 사용할 수 있습니다.
찬성: 전체 HTML 편집, AI 생성, 공유, 내보내기 워크플로가 필요한 일반 제작자를 위한 것입니다.
프로 맥스: 더 많은 AI 생성, 더 큰 프로젝트 및 더 높은 사용 제한을 위해.
결제 시 표시된 결제 주기에 따라 구독이 갱신됩니다. 귀하의 계정이나 결제 서비스 제공업체에서 갱신을 관리하거나 취소할 수 있습니다.
가격: 귀하에게 가장 적합한 플랜을 선택하세요
충전 크레딧
AI 생성이나 웹페이지 복제 기능을 일시적으로만 사용해야 하는 경우 크레딧을 충전하도록 선택할 수 있습니다. 구매한 크레딧은 만료되지 않으며 부족할 때 언제든지 충전할 수 있습니다. 기다릴 필요가 없습니다.
기능 비교
무료와 프로의 주요 차이점은 다음과 같습니다.
| 기능 Free/Pro | ||
| AI 콘텐츠 생성 | ✓ | ✓ |
| 모든 템플릿 및 스타일 | ✓ | ✓ |
| 비주얼 편집기 | ✓ | ✓ |
| PNG로 다운로드 | ✓ | ✓ |
| HTML로 다운로드 | ✗ | ✓ |
| 프로젝트 공유 | ✗ | ✓ |
| 라이브 코드 편집 | ✗ | ✓ |
| 월간 크레딧 | 기본 할당량 | 프리미엄 할당량 |
| 저장 용량 | 기본 용량 | 더 큰 용량 |
크레딧 사용 안내
각 AI 세대는 고정된 양의 크레딧을 소비합니다. 무료 사용자는 기본 월간 보너스 크레딧을 받고, Pro 사용자는 더 많은 크레딧을 받습니다. 구매한 크레딧은 만료되지 않으며 부족할 때 언제든지 충전할 수 있습니다. 할당량이 회복될 때까지 기다리지 않아도 됩니다.
HtmlDrag 시작하기
기존 HTML 페이지, 공개 URL, AI 정밀 다듬기 프롬프트 또는 지원되는 파일로 시작하세요. HtmlDrag를 사용하면 소스 자료에서 시각적 편집, 공유 가능한 미리 보기 또는 깔끔한 HTML 내보내기로 이동할 수 있습니다.
이 가이드에서는 HTML 업로드, 코드 붙여넣기, 웹페이지 복제, AI 정밀 다듬기, 파일을 HTML로, 텍스트 및 이미지 편집, 테이블, 구성 요소, 레이어, 링크, 요소 잠금 및 삭제, 저장, 공유 및 HTML 내보내기를 다룹니다.