1. 계정 및 로그인

HtmlDrag를 사용하기 전에 계정을 생성해야 합니다. 빠르게 시작할 수 있도록 다양한 가입 및 로그인 방법을 제공합니다.

1.1 회원가입

HtmlDrag는 이메일 가입을 사용합니다. 몇 가지 기본 정보를 입력하여 계정을 생성하세요. 가입이 완료되면 자동으로 로그인되어 홈페이지로 이동합니다.

이메일 가입

가입 페이지에서 다음 단계를 완료하여 계정을 생성하세요:

• 이메일 입력: 자주 사용하는 이메일 주소를 입력하세요. 이 이메일은 로그인 자격 증명 및 알림 채널로 사용됩니다. 이메일 형식이 올바른지 확인하세요. 예: [email protected].
• 비밀번호 설정: 비밀번호는 문자와 숫자를 모두 포함해야 하며, 길이는 8-32자입니다. 계정 보안을 위해 강력한 비밀번호 사용을 권장합니다.
• 비밀번호 확인: 비밀번호를 다시 입력하여 두 항목이 일치하는지 확인하세요.
• 닉네임 설정 (선택): 닉네임을 사용자 정의할 수 있습니다. 비워두면 시스템이 자동으로 기본 닉네임을 생성합니다.
• 약관 동의: "서비스 약관 및 개인정보 처리방침을 읽었으며 동의합니다"를 체크한 후 "회원가입" 버튼을 클릭하여 가입을 완료하세요.

가입 페이지: 이메일과 기본 정보를 입력하여 계정 생성

이메일 인증 및 크레딧 보상

가입이 완료되면 시스템이 받은 편지함으로 인증 이메일을 발송합니다. 이메일 인증을 완료하면 AI 생성기 및 URL 가져오기 기능에 사용할 수 있는 보너스 크레딧을 받게 됩니다. 이메일을 받지 못한 경우 스팸 폴더를 확인하세요. 3분 후 "재전송"을 클릭하여 다른 인증 이메일을 요청할 수 있습니다.

팁: 이메일 인증을 완료하면 보너스 크레딧을 받을 뿐만 아니라 전체 경험을 잠금 해제하고 계정 보안을 강화할 수 있습니다.

1.2 로그인

HtmlDrag는 여러 로그인 방법을 지원합니다. 선호도에 따라 가장 편리한 옵션을 선택하세요.

이메일 및 비밀번호 로그인

가입 시 등록한 이메일과 비밀번호로 로그인하세요:

1. 로그인 페이지에서 이메일 주소를 입력하세요
2. 비밀번호를 입력하세요 (눈 아이콘을 클릭하여 비밀번호 표시/숨기기)
3. "계속" 버튼을 클릭하여 로그인을 완료하세요

로그인에 성공하면 자동으로 홈페이지로 이동하여 창작을 시작할 수 있습니다.

소셜 로그인 (Google / GitHub)

더 빠른 접근을 위해 Google 또는 GitHub 계정으로 로그인할 수 있습니다:

• Google로 로그인: "Google로 로그인" 버튼을 클릭하세요. Google 인증 팝업에서 계정을 선택하고 인증을 확인하세요.
• GitHub로 로그인: "GitHub로 로그인" 버튼을 클릭하세요. GitHub 인증 페이지로 이동합니다. 확인 후 자동으로 HtmlDrag로 돌아옵니다.

로그인 페이지: 이메일/비밀번호 및 소셜 계정 지원

팁: Google 또는 GitHub 로그인을 사용하면 자동으로 계정이 생성됩니다—별도의 가입이 필요 없습니다. 첫 번째 소셜 로그인 시 시스템이 자동으로 연결된 계정을 생성합니다.

비밀번호 찾기 링크

비밀번호를 잊어버린 경우 로그인 페이지 오른쪽 하단의 "비밀번호를 잊으셨나요?" 링크를 클릭하여 비밀번호 재설정 과정으로 이동하세요 (섹션 1.3 참조).

1.3 비밀번호 찾기

비밀번호를 잊어버린 경우 이메일 인증 코드를 사용하여 재설정할 수 있습니다. 전체 과정은 리디렉션 없이 단일 페이지에서 완료됩니다.

비밀번호 재설정 과정

다음 단계에 따라 비밀번호를 재설정하세요:

1. 이메일 입력: 가입 시 사용한 이메일 주소를 입력하세요
2. 인증 코드 받기: "코드 전송" 버튼을 클릭하세요. 시스템이 6자리 인증 코드가 포함된 이메일을 발송합니다
3. 인증 코드 입력: 받은 6자리 코드를 인증 코드 필드에 입력하세요
4. 새 비밀번호 설정: 새 비밀번호를 입력하세요 (문자와 숫자를 포함해야 하며, 8-32자 길이)
5. 새 비밀번호 확인: 새 비밀번호를 다시 입력하여 일치하는지 확인하세요
6. "비밀번호 재설정" 클릭: 비밀번호 재설정을 완료하세요. 성공 메시지가 표시된 후 자동으로 로그인 페이지로 이동합니다

비밀번호 찾기: 이메일 인증 코드로 재설정

인증 코드 유효 기간

인증 코드는 유효 기간이 제한되어 있습니다—이메일 수신 후 즉시 사용하세요. 코드가 만료된 경우 "재전송" 버튼을 클릭하여 새 코드를 요청할 수 있습니다 (재전송 전에 카운트다운이 완료될 때까지 기다려야 합니다).

참고: 이메일이 시스템에 등록되지 않은 경우 인증 코드를 발송할 수 없습니다. 가입 시 사용한 이메일 주소를 입력하고 있는지 확인하세요.

2. 프로필

프로필은 계정 정보, 작품 및 주문을 관리하는 중앙 허브입니다. 오른쪽 상단의 아바타를 클릭하여 접근하세요.

프로필: 계정, 작품, 주문을 한 곳에서 관리

2.1 프로필 설정

프로필 설정 모듈에서는 아바타, 닉네임, 이메일, 자기소개 및 비밀번호 설정을 포함한 기본 계정 정보를 관리할 수 있습니다.

아바타 변경

아바타 영역의 "아바타 변경" 버튼을 클릭하고 로컬 이미지 파일을 선택하여 업로드하세요. 시스템이 자동으로 새 아바타를 자르고 저장합니다.

닉네임 변경

닉네임 옆의 편집 버튼을 클릭하고 새 이름을 입력한 후 "저장"을 클릭하세요. 닉네임은 모든 작품과 댓글에 표시됩니다.

이메일 관리

이메일 섹션에서 현재 이메일 주소와 인증 상태를 표시합니다:

• 인증됨: 이메일이 인증되었으며 모든 기능을 사용할 수 있습니다
• 미인증: "인증 이메일 전송"을 클릭하여 인증을 완료하고 보너스 크레딧을 받으세요
• 이메일 변경: 먼저 현재 이메일을 인증한 후 새 이메일 주소를 입력하여 변경을 완료하세요

자기소개

자기소개 영역에 자기소개를 입력하세요 (권장: 200자 이하), 그런 다음 "저장"을 클릭하여 업데이트하세요.

비밀번호 변경 / 비밀번호 설정

"비밀번호 변경" 버튼을 클릭하여 비밀번호 설정 대화상자를 엽니다:

• 기존 비밀번호가 있는 사용자: 현재 비밀번호를 입력한 후 새 비밀번호를 설정하세요 (8-32자, 문자와 숫자 포함)
• 비밀번호가 없는 사용자: 새 비밀번호를 직접 설정하세요. 설정 후 이메일과 비밀번호로 로그인할 수 있습니다

계정 삭제

계정을 삭제하려면 페이지 하단의 "계정 삭제" 버튼을 클릭하세요. 보안을 위해 이메일 인증 코드를 통해 본인 확인이 필요합니다.

참고: 삭제 요청을 제출한 후 계정은 보유 기간(일반적으로 30일)에 들어가며 이 기간 동안 로그인할 수 없습니다. 이 기간이 지나면 시스템이 작품, 크레딧 및 기록을 영구적으로 삭제합니다.

프로필: 아바타, 닉네임, 이메일 및 비밀번호 관리

2.2 저장 공간 사용량

저장 공간 사용량 모듈은 계정의 저장 공간 소비량을 표시하여 남은 공간을 파악하고 그에 따라 창작을 계획할 수 있도록 도와줍니다.

저장 공간 개요

상단 섹션에서 전체 사용량을 표시합니다:

• 사용됨: 현재 사용 중인 저장 공간
• 총량: 계정의 저장 공간 한도 (Pro 사용자는 더 큰 용량을 누릴 수 있음)
• 남음: 새 작품을 만들 수 있는 사용 가능한 공간
• 저장된 작품: 현재 저장된 작품 수와 한도

저장 공간 분류

시스템은 저장 공간을 세 가지 유형으로 분류합니다:

• HTML 콘텐츠: 작품의 웹페이지 코드가 사용하는 공간
• 이미지 리소스: 업로드된 이미지 파일이 사용하는 공간
• 기타 리소스: 기타 첨부 파일이 사용하는 공간

작품 수 제한

무료 및 Pro 사용자는 서로 다른 작품 수 제한이 있습니다. 한도에 도달하면 새 작품을 만들기 전에 일부 작품을 삭제하거나 플랜을 업그레이드해야 합니다.

저장 공간 새로고침 및 업그레이드

새로고침 버튼을 클릭하여 저장 공간 정보를 업데이트하세요. 더 많은 저장 공간을 원하시면 "저장 공간 업그레이드"를 클릭하여 구독 페이지를 방문하고 적합한 플랜을 선택하세요.

팁: 계정 저장 공간이 가득 차거나 작품 수가 한도에 도달하면 시스템이 새 작품 생성을 동결합니다. 일부 작품을 삭제하거나 플랜을 업그레이드하여 업로드 권한을 복원하세요.

2.3 파일

작품 관리 모듈은 생성한 모든 작품을 표시하며, 보기, 편집, 공유 및 삭제 작업을 지원합니다.

작품 목록 및 필터

작품은 카드 또는 목록 형식으로 표시됩니다. 다음을 사용하여 필터링할 수 있습니다:

• 검색: 작품 코드 또는 제목을 입력하여 검색
• 유형 필터: AI 생성기, 파일 업로드, URL 스냅샷, 코드 붙여넣기 등으로 필터링
• 날짜 범위: 시작 및 종료 날짜를 선택하여 특정 기간의 작품 필터링
• 정렬 기준: 최신순, 오래된순, 좋아요 수 또는 조회수로 정렬

작품 관리: 모든 작품 보기, 필터링 및 관리

작품 보기 및 편집

작품 카드의 "보기" 버튼을 클릭하여 미리보기하세요. 미리보기 인터페이스에서 다음을 수행할 수 있습니다:

• 작품 제목 편집 (제목을 더블클릭하여 편집)
• "편집"을 클릭하여 비주얼 에디터로 들어가 편집 계속하기
• 작품의 저장 기록을 보고 특정 버전으로 복원

공유 상태 관리

Pro 사용자는 작품을 공유하여 다른 사람이 링크를 통해 볼 수 있습니다:

• 공유 활성화: "공유" 버튼을 클릭하여 7일 동안 유효한 공유 링크 생성
• 공유 업데이트: 이미 공유된 작품은 링크를 업데이트하여 유효 기간 갱신 가능
• 공유 중지: "공유 중지"를 클릭하여 즉시 링크 무효화

작품 삭제

작품 카드의 "삭제" 버튼을 클릭하여 삭제하세요. 시스템은 실수로 인한 삭제를 방지하기 위해 두 개의 확인 대화상자를 표시합니다:

1. 첫 번째 확인: 이 작품을 삭제할지 묻습니다
2. 두 번째 확인: 삭제는 되돌릴 수 없다고 알립니다

팁: 한 번에 최대 3개의 기록을 삭제할 수 있습니다. 작품을 삭제하면 해당 저장 공간이 해제됩니다.

2.4 크레딧

크레딧 기록 모듈은 소비 및 적립 기록을 포함한 계정의 크레딧 거래 내역을 표시합니다.

크레딧 거래 내역

크레딧 기록은 다음 정보를 포함하는 테이블로 표시됩니다:

• 날짜: 크레딧 변경이 발생한 시점
• 유형: 크레딧 변경의 작업 유형
• 포인트 변경: 추가된 크레딧(양수) 또는 차감된 크레딧(음수)
• 설명: 변경에 대한 자세한 설명

날짜 범위 필터를 사용하여 특정 기간의 기록을 볼 수 있습니다.

크레딧 유형

• AI 생성기: AI 생성기 기능 사용 시 소비되는 크레딧
• URL 가져오기: URL 가져오기 기능 사용 시 소비되는 크레딧
• 가입 보상: 가입 및 이메일 인증 완료 후 신규 사용자에게 지급되는 크레딧
• 플랫폼 보너스: 플랫폼에서 제공하는 크레딧
• 월간 선물: Pro 사용자를 위한 월간 크레딧 할당량
• 크레딧 충전: 크레딧 구매를 통해 얻은 크레딧
• 관리자 조정: 관리자가 수동으로 조정한 크레딧

크레딧 기록: 크레딧 거래 세부 정보 보기

팁: Pro 사용자는 매월 추가 크레딧을 받습니다. 크레딧은 AI 생성기 및 URL 가져오기와 같은 유료 기능에 사용할 수 있습니다.

2.5 주문

주문 기록 모듈은 구매 내역과 결제 기록을 표시하여 주문을 쉽게 조회하고 관리할 수 있습니다.

주문 관리

주문 목록에서 구매 기록을 표시합니다. 다음을 수행할 수 있습니다:

• 주문 상태 및 세부 정보 보기
• 필터를 사용하여 특정 주문을 빠르게 찾기
• 대기 중인 주문에 대한 결제 계속하기
• 더 이상 필요하지 않은 주문 닫기 또는 삭제

팁: 결제 문제가 발생하면 현재 주문을 닫고 새 주문을 할 수 있습니다.

2.6 포트폴리오

포트폴리오 페이지는 모든 작품을 보고 관리하는 전용 공간입니다. 사이드바 또는 사용자 메뉴에서 빠르게 접근하세요.

작품 표시

페이지에서 모든 작품을 카드로 표시하며, 각 카드에는 다음이 포함됩니다:

• 썸네일 미리보기: 빠른 식별을 위한 작품의 시각적 미리보기
• 작품 제목: 작품 이름 표시, 클릭하여 편집
• 생성 시간: 작품 생성 시점 기록
• 공유 상태: 작품이 현재 공유되고 있는지 표시

포트폴리오: 모든 작품을 한 곳에서 보고 관리

빠른 작업

각 작품 카드는 편리한 작업 버튼을 제공합니다:

• 편집: 비주얼 에디터에 들어가 창작 계속하기
• 공유: 공유 링크 생성 또는 관리 (Pro 전용)

3. 사이드바 내비게이션

HtmlDrag는 처음부터 창작하는 것부터 2차 처리까지 모든 시나리오를 다루는 다양한 콘텐츠 가져오기 방법을 제공합니다. 왼쪽 사이드바를 사용하여 진입점 간에 빠르게 전환하세요.

사이드바 내비게이션: 다양한 창작 진입점에 빠르게 접근

3.1 홈

홈은 HtmlDrag의 기본 진입점으로, AI 생성기가 있습니다. 여기에 콘텐츠를 입력하여 빠르게 전문적인 웹 디자인을 생성하세요.

3.2 URL 가져오기

URL 가져오기를 사용하면 공개 웹페이지 링크를 입력하고 시스템이 자동으로 페이지 콘텐츠를 캡처하여 편집 가능한 작품을 생성합니다. 이것은 추가 편집을 위해 기존 웹 디자인을 빠르게 얻는 이상적인 방법입니다.

URL 입력

입력 필드에 캡처하려는 웹페이지 주소를 붙여넣으세요. 공개 http/https 링크만 지원됩니다. 비공개 또는 로컬 주소는 허용되지 않습니다.

URL 가져오기: URL 입력, 웹페이지 즉시 캡처

크레딧 차감 확인

"캡처 시작"을 클릭하면 크레딧 차감 확인 대화상자가 나타나며, 이 작업에 필요한 크레딧, 현재 크레딧 잔액 및 월간 보너스 크레딧을 표시합니다. 월간 보너스 크레딧이 먼저 차감되며, 나머지 비용은 현재 크레딧에서 차감됩니다.

캡처 진행 상황 및 상태

확인하면 시스템이 페이지 콘텐츠 캡처를 시작합니다. 캡처 중에는 중단을 피하기 위해 페이지를 떠나지 마세요. 캡처가 성공하면 자동으로 에디터로 리디렉션됩니다.

팁:

일부 웹사이트는 캡처할 수 없습니다: 로그인 인증이 필요하거나 복잡한 프론트엔드 프레임워크(일부 SPA 애플리케이션 등)를 사용하는 웹사이트는 캡처되지 않거나 불완전할 수 있습니다.

오디오/비디오 웹사이트: 오디오 및 비디오 웹사이트의 동적 콘텐츠는 제대로 캡처되지 않을 수 있습니다.

페이지가 너무 큼: 페이지 콘텐츠가 서버에서 허용하는 크기를 초과하면 캡처가 실패할 수 있습니다. 더 간단한 페이지를 시도해 보세요.

3.3 HTML 업로드

HTML 업로드 기능을 사용하면 로컬 HTML 파일을 HtmlDrag로 가져올 수 있습니다. 시스템은 보안 스캔을 수행하고 편집 가능한 작품을 생성합니다. 추가 편집이 필요한 기존 HTML 템플릿이나 이메일 디자인에 이상적입니다.

파일 형식 및 크기 제한

.html 및 .htm 파일 형식을 지원합니다. 단일 파일 크기는 시스템 제한을 초과하면 안 됩니다 (구체적인 제한은 업로드 인터페이스 참조). 업로드된 파일은 고급 처리를 거치므로 원본 파일에 비해 실제 저장 크기가 크게 증가할 수 있습니다. 충분한 남은 용량이 있는지 확인하세요.

HTML 업로드: 드래그 앤 드롭 또는 클릭하여 HTML 파일 업로드

보안 스캔

시스템은 업로드된 파일의 보안을 스캔하여 잠재적인 악성 스크립트, 위험한 태그 및 의심스러운 외부 리소스를 감지하고 제거합니다. 위험 수준(낮음, 중간, 높음, 심각)에 따라 시스템이 적절한 경고를 제공하거나 저장을 차단합니다.

참고: 악성 코드가 포함된 파일을 업로드하지 마세요. 악의적인 업로드는 계정 정지를 초래할 수 있습니다.

미리보기 및 저장

파일이 파싱된 후 미리보기 영역에서 결과를 미리 볼 수 있습니다. 확인되면 "작품 저장"을 클릭하여 작품을 계정에 저장하고, 언제든지 비주얼 에디터에 들어가 편집할 수 있습니다.

3.4 코드 붙여넣기

코드 붙여넣기 기능을 사용하면 HTML 코드를 직접 붙여넣을 수 있으며, 시스템이 보안 스캔을 수행하고 비주얼 디자인으로 변환합니다. 이것은 가장 유연한 가져오기 방법으로, 개발자나 코드를 정밀하게 제어해야 하는 사용자에게 적합합니다.

HTML 코드 붙여넣기

코드 입력 영역에 HTML 코드를 붙여넣으세요. 선택적으로 작품 제목을 입력할 수 있습니다 (비워두면 시스템이 기본 이름 "제목 없는 작품"을 사용합니다).

코드 붙여넣기: HTML 코드를 직접 붙여넣어 편집 시작

보안 스캔

파일 업로드와 마찬가지로 시스템은 붙여넣은 코드에 대해 보안 감지를 수행합니다. 코드 위험 수준이 너무 높으면 시스템 보안 정책이 이 콘텐츠 처리를 거부합니다. 코드를 검토하고 다시 시도하세요.

참고: 악성 코드나 스크립트를 붙여넣지 마세요. 악의적인 사용은 계정 정지를 초래할 수 있습니다.

미리보기 생성 및 저장

코드를 입력한 후 "미리보기 생성" 버튼을 클릭하세요. 코드가 보안 검사를 통과하면 미리보기가 자동으로 생성됩니다. 결과를 확인한 후 "작품 저장"을 클릭하여 작품을 계정에 저장하세요.

3.5 AI 생성기

AI 생성기는 실제 자료에서 시작할 때 가장 잘 맞습니다. PDF, PPT/PPTX, Excel/XLSX, CSV, Word, Markdown, TXT, JPG/PNG 또는 직접 입력을 준비하고 목적을 설명하세요.

1. 자료를 업로드하거나 요구를 입력합니다.
2. AI가 제목, 문단, 목록, 카드, 섹션으로 정리합니다.
3. 내용, 계층, 이미지, 표, 텍스트 순서를 확인합니다.
4. HtmlDrag 캔버스에서 텍스트, 이미지, 블록, 색상, 레이아웃을 다듬습니다.
5. 저장, 공유 또는 HTML 다운로드를 진행합니다.

자료 유형마다 적합한 정리 방식이 다릅니다.

3.6 요금제

요금제 페이지에서 구독 및 크레딧 충전을 관리합니다. 자신에게 가장 적합한 플랜을 선택하고 더 많은 창작 가능성을 잠금 해제하세요.

구독 플랜

HtmlDrag는 Pro 및 Pro Max 구독 플랜을 제공합니다. 구독 후 활성 구독 기간 동안 포함된 혜택을 사용할 수 있습니다:

Pro: HTML 편집, AI 생성, 공유 및 내보내기의 전체 워크플로가 필요한 일반 크리에이터를 위한 플랜입니다.

Pro Max: 더 많은 AI 생성, 더 큰 프로젝트, 더 높은 사용 한도가 필요한 사용자를 위한 플랜입니다.

구독은 결제 화면에 표시된 청구 주기에 따라 갱신됩니다. 계정 또는 결제 제공업체에서 갱신을 관리하거나 취소할 수 있습니다.

요금제: 자신에게 가장 적합한 플랜 선택

크레딧 충전

AI 생성 또는 URL 가져오기 기능을 일시적으로만 사용해야 하는 경우 크레딧을 충전할 수 있습니다. 구매한 크레딧은 만료되지 않으며, 부족할 때 언제든지 충전할 수 있습니다—기다릴 필요 없습니다.

기능 비교

Free과 Pro의 주요 차이점은 다음과 같습니다:

기능	Free	Pro
AI 콘텐츠 생성	✓	✓
모든 템플릿 및 스타일	✓	✓
비주얼 에디터	✓	✓
PNG로 다운로드	✓	✓
HTML로 다운로드	✗	✓
작품 공유	✗	✓
실시간 코드 편집	✗	✓
월간 크레딧	기본 할당량	프리미엄 할당량
저장 용량	기본 용량	더 큰 용량

크레딧 사용 가이드

각 AI 생성은 고정된 양의 크레딧을 소비합니다. Free 사용자는 기본 월간 보너스 크레딧을 받고, Pro 사용자는 더 많이 받습니다. 구매한 크레딧은 만료되지 않으며, 부족할 때 언제든지 충전할 수 있습니다—할당량 복구를 기다릴 필요 없습니다.

3.7 기록

왼쪽 사이드바의 "내 작품" (기록)에서 과거 창작물에 빠르게 접근할 수 있습니다. 모든 편집 기록이 시간순으로 나열됩니다.

빠른 선택 및 편집

목록에서 기록을 클릭하면 에디터에 빠르게 로드하여 다시 가져오지 않고도 중단한 부분부터 계속할 수 있습니다.

미리보기 창 세부 정보

기록 항목 위에 마우스를 올리면 미리보기 창이 표시됩니다. 미리보기 창에서 다음을 수행할 수 있습니다:

• 제목 직접 편집: 제목 텍스트를 클릭하여 작품 이름을 즉시 수정합니다.
• 공유 상태 보기: 아이콘이 작품이 현재 공유되고 있는지 나타냅니다.
• 빠른 작업: 편집, 삭제 및 기타 바로가기에 접근합니다.

기록: 과거 작품의 빠른 미리보기 및 관리

4. 비주얼 에디터

HtmlDrag의 핵심은 강력한 WYSIWYG 에디터로, 코드 편집 없이 실제 HTML 환경에서 직접 작업할 수 있습니다.

4.1 에디터 인터페이스 개요

에디터는 클래식 3열 레이아웃을 사용합니다: 왼쪽 내비게이션과 작업 기록, 중앙 캔버스 미리보기 영역, 오른쪽 기능 패널. 상단 및 하단 바는 작업 액션과 편집 컨트롤을 제공합니다.

에디터 인터페이스: 왼쪽 내비게이션, 중앙 캔버스, 오른쪽 패널

왼쪽 내비게이션 및 기록

왼쪽 내비게이션은 빠른 접근 지점을 제공합니다. "내 작품"을 클릭하여 작업 기록 목록을 확장하고 빠르게 탐색하고 전환하세요. 공유된 작품은 공유 상태를 관리하는 데 도움이 되는 "공유됨" 배지를 표시합니다.

중앙 캔버스 영역

캔버스는 페이지 요소를 직접 선택, 드래그 및 편집할 수 있는 실시간 미리보기 창입니다. 하단의 줌 컨트롤러를 통해 줌 및 팬 작업을 지원합니다. 모든 편집은 실시간으로 반영됩니다.

오른쪽 패널 (편집 / 구성 요소 / 레이어 / 라이브러리)

오른쪽 패널에는 네 개의 탭이 있습니다: 편집 (스타일 조정 및 모드 토글), 구성 요소 (새 요소 삽입), 레이어 (레이어 목록 및 일괄 작업), 라이브러리 (개인 구성 요소 라이브러리). 탭을 클릭하여 기능 간에 전환하세요.

상단 제목 표시줄 및 액션

상단 바에는 작품 제목이 표시됩니다 (더블클릭하여 편집). 오른쪽에는 공유, 이미지로 다운로드, HTML로 다운로드를 위한 액션 버튼이 있습니다. 일부 기능은 Pro 권한이 필요합니다.

하단 도구 모음

하단 도구 모음에는 미리보기 (새 창에서 열림), 실행 취소, 다시 실행, 미리보기 새로고침, 마지막 저장 상태 복원, 초기 HTML 복원 및 저장 버튼이 있어 핵심 편집 컨트롤을 제공합니다.

4.2 기본 작업

HtmlDrag는 직관적인 비주얼 작업을 제공합니다—마우스 오버, 단일 클릭, 더블클릭 및 우클릭이 대부분의 편집 작업을 커버합니다.

요소 인식

캔버스의 모든 요소 위에 마우스를 올리면 시스템이 자동으로 감지하고 점선 테두리를 표시하여 작업 가능한 요소를 빠르게 식별할 수 있습니다. 인식은 텍스트, 이미지, 버튼, 컨테이너 및 기타 HTML 요소를 다룹니다.

요소 인식: 마우스 오버 시 점선 테두리 표시

드래그 모드

모든 요소를 단일 클릭하면 드래그 모드로 들어가며, 8개의 크기 조정 핸들이 있는 선택 테두리가 표시됩니다. 다음을 수행할 수 있습니다: 요소를 드래그하여 위치 변경; 코너 핸들을 드래그하여 비례 크기 조정; 가장자리 핸들을 드래그하여 한 방향으로 크기 조정. 선택된 동안 오른쪽 "편집" 패널에서 조정을 위한 요소의 스타일 속성을 표시합니다.

드래그 모드: 클릭하여 선택, 자유롭게 이동 및 크기 조정

편집 모드

텍스트 요소를 더블클릭하면 편집 모드로 들어갑니다—커서가 텍스트 안에 위치하여 직접 편집할 수 있습니다. 편집 모드에서 오른쪽 패널은 글꼴, 크기, 색상, 굵게, 기울임꼴 등을 위한 텍스트 스타일 도구를 표시합니다. 요소 외부를 클릭하거나 Esc를 눌러 편집 모드를 종료하세요.

편집 모드: 더블클릭하여 진입, 텍스트 직접 편집

컨텍스트 메뉴

선택한 요소를 우클릭하면 컨텍스트 메뉴가 열리며, 복사, 붙여넣기, 라이브러리에 추가, 링크 편집, 레이어 작업, 잠금, 숨기기, 삭제 등에 빠르게 접근할 수 있습니다. 자세한 내용은 4.9 컨텍스트 메뉴를 참조하세요.

다중 선택

Shift를 누른 상태에서 여러 요소를 클릭하여 일괄 작업을 위해 함께 선택하세요. 다중 선택 모드에서 오른쪽 패널은 빠른 레이아웃 정렬을 위한 정렬 도구 (왼쪽/오른쪽/위/아래 가장자리 정렬, 가로/세로 중앙 정렬, 가로/세로 균등 분배)를 표시합니다.

다중 선택: Shift를 누른 상태에서 클릭하여 여러 요소 선택

4.3 내 작품 바로가기 바

왼쪽의 "내 작품" 바로가기 바를 사용하면 작품 목록을 확장/축소하고 작품 간에 빠르게 전환하여 여러 창작물 간의 원활한 전환을 용이하게 합니다.

확장 및 축소

왼쪽 상단의 "내 작품" 버튼을 클릭하여 사이드바 작품 목록을 확장하세요. 다시 클릭하거나 사이드바 외부를 클릭하여 축소하세요. 확장되면 기록 작품의 썸네일과 제목을 시각적으로 찾아볼 수 있습니다.

작품 전환

목록에서 작품 카드를 클릭하면 콘텐츠가 즉시 에디터에 로드됩니다. 이를 통해 홈페이지나 프로필로 돌아가지 않고도 다양한 디자인 초안을 빠르게 비교하고 수정할 수 있습니다.

4.4 캔버스 단축키

키보드 단축키를 마스터하면 편집 효율성을 크게 높일 수 있습니다. 캔버스 영역에서 지원되는 주요 단축키는 다음과 같습니다:

작업	단축키
줌	Ctrl / Cmd + 마우스 휠
팬	Space + 마우스 드래그
다중 선택	Shift + 클릭
복사	Ctrl / Cmd + C
붙여넣기	Ctrl / Cmd + V
실행 취소	Ctrl / Cmd + Z
삭제	Delete / Backspace

4.5 오른쪽 패널 - 편집 탭

"편집" 탭은 가장 자주 사용되는 영역으로, 모드 토글과 풍부한 스타일 조정 도구를 제공합니다. 요소를 선택하면 패널이 요소 유형에 따라 편집 옵션을 지능적으로 표시합니다.

편집 탭: 모드 토글 및 스타일 도구

모드 토글

패널 상단에는 에디터 상호작용 동작을 제어하는 네 가지 모드 스위치가 있습니다. 각 토글은 독립적으로 켜거나 끌 수 있으며, 현재 상태를 나타내는 메시지 알림이 표시됩니다.

모드	설명
구성 요소 편집	활성화되면 대화형 기능 구성 요소(버튼, 양식 입력 등)를 선택하고 조정할 수 있습니다. 비활성화되면 텍스트 콘텐츠만 편집할 수 있습니다. 정밀한 양식 요소 조작이 필요한 시나리오에 이상적입니다.
링크 내비게이션	활성화되면 편집 모드에서 링크된 요소를 클릭하면 대상 URL로 직접 이동합니다. 비활성화되면 내비게이션이 차단되어 링크 요소 자체를 편집할 수 있습니다. 참고: 이 설정은 미리보기 또는 다운로드된 링크 기능에 영향을 미치지 않습니다.
삭제 모드	활성화되면 컨텍스트 메뉴를 사용하지 않고 클릭만으로 요소를 삭제할 수 있습니다. 비활성화되면 일반 편집 모드가 재개됩니다. 여러 요소를 빠르게 지우는 데 이상적입니다.
장식 레이어	활성화되면 빈 컨테이너 및 장식 요소(테두리 컨테이너, 배경 레이어 등)를 식별하고 편집할 수 있습니다. 비활성화되면 실제 콘텐츠가 있는 요소만 인식됩니다. 복잡한 페이지 레이아웃의 경우 이 기능을 활성화하면 장식 요소를 더 세밀하게 제어할 수 있습니다.

팁: 편집 중에는 구성 요소 편집을 허용하기 위해 링크 내비게이션이 기본적으로 비활성화됩니다. 링크를 따라가려면 편집 패널에서 "링크 내비게이션" 스위치를 켜세요. 양식 제출도 콘텐츠를 보호하기 위해 편집 모드에서 차단됩니다.

텍스트 스타일

텍스트 요소를 선택하거나 편집 모드로 들어가면 패널에 다음 서식 옵션이 있는 포괄적인 텍스트 스타일 도구가 표시됩니다:

텍스트 스타일: 글꼴, 크기, 색상 설정

기능	설명
글꼴	시스템 글꼴, 영어 글꼴 (Inter, Roboto, Open Sans 등), 한국어/중국어 글꼴 (SimSun, SimHei, Microsoft YaHei, Source Han Sans 등)에서 선택합니다.
글꼴 크기	12px에서 72px까지 여러 프리셋 크기 또는 사용자 정의 크기를 수동으로 입력합니다.
글꼴 색상 / 배경 색상	색상 선택기를 통해 텍스트 색상과 배경 하이라이트를 설정하며, 캔버스 색상 선택기를 지원합니다.
굵게, 기울임꼴, 밑줄, 취소선	굵게, 기울임꼴, 밑줄, 취소선 효과를 원클릭으로 토글합니다.
정렬	네 가지 텍스트 정렬 옵션—왼쪽, 가운데, 오른쪽, 양쪽 맞춤.
줄 높이, 자간, 단락 간격	최적화된 타이포그래피를 위해 줄 높이 (1x~3x), 자간, 단락 간격을 미세 조정합니다.
위 첨자, 아래 첨자	수학 공식, 화학 표기법 등을 위해 선택한 텍스트를 위 첨자 또는 아래 첨자로 서식을 지정합니다.
글머리 기호 목록, 번호 매기기 목록	텍스트를 순서 없는 (글머리 기호) 또는 순서 있는 (번호 매기기) 목록으로 빠르게 변환합니다.
들여쓰기 제어	단락 계층 구조를 조정하기 위해 들여쓰기를 늘리거나 줄입니다.

요소 스타일

요소를 선택한 후 요소 스타일 도구를 사용하여 모양을 조정합니다:

기능	설명
테두리 스타일	테두리 유형 (없음, 실선, 점선, 점), 너비 (1px-10px), 색상을 설정합니다. "테두리 지우기"를 클릭하여 모든 테두리를 빠르게 제거합니다.
모서리 반경	네 모서리 모두의 모서리 반경을 조정하여 둥근 직사각형 또는 원형 효과를 만듭니다.
불투명도	슬라이더를 사용하여 투명도 효과를 위해 요소 불투명도 (0%-100%)를 조정합니다.
그림자	빠른 깊이 효과를 위한 네 가지 그림자 프리셋—없음, 가벼운 그림자, 중간 그림자, 깊은 그림자.
위치 및 크기	요소의 X/Y 좌표와 너비/높이 값을 정밀하게 설정합니다.
가로세로 비율 잠금	활성화되면 너비를 조정할 때 높이가 비례적으로 자동 조정됩니다.

이미지 스타일

이미지 요소를 선택한 후 표시 옵션을 조정하고 이미지를 교체합니다:

기능	설명
이미지 맞춤	네 가지 맞춤 모드—contain (비례 크기 조정), cover (채우기), fill (늘리기), none (원본 크기).
위치	9그리드 위치 지정기를 사용하여 컨테이너 내에서 이미지 정렬을 설정합니다 (왼쪽 상단, 상단 가운데, 오른쪽 상단, 왼쪽 가운데, 가운데, 오른쪽 가운데, 왼쪽 하단, 하단 가운데, 오른쪽 하단).
이미지 교체	새 로컬 이미지를 업로드하거나 URL을 입력하여 교체합니다. 로컬 업로드는 JPG, PNG, GIF, WebP 및 기타 일반 형식을 지원합니다.

표 스타일

표 또는 표 셀이 선택되면 전용 표 편집 도구를 사용할 수 있습니다. 자세한 지침은 4.10 표 편집을 참조하세요.

표 스타일: 행/열 작업, 테두리 및 셀 설정

기능	설명
행/열 작업	위/아래에 행 삽입, 왼쪽/오른쪽에 열 삽입, 행/열 삭제.
셀 정렬	셀 콘텐츠의 가로 정렬 (왼쪽, 가운데, 오른쪽) 및 세로 정렬 (위, 중간, 아래)을 설정합니다.
테두리 스타일	표 테두리 너비, 스타일 (실선, 점선 등), 색상을 조정합니다.
셀 배경	셀 배경색을 설정합니다—머리글 또는 중요 데이터를 강조하는 데 이상적입니다.
병합/분할	인접한 셀을 선택하여 하나로 병합합니다. 병합된 셀은 원래대로 분할할 수 있습니다.

링크 편집

모든 요소에 클릭하여 탐색하는 링크를 추가하거나 기존 링크를 편집합니다:

기능	설명
링크 삽입 / 편집	선택한 요소에 클릭 탐색을 추가하기 위해 대상 URL을 입력합니다. http/https 링크를 지원합니다.
링크 제거	요소에서 링크를 제거하여 일반 요소로 복원합니다. 시스템은 실행 전에 제거할 링크 수를 확인합니다.

정렬 도구 (다중 선택)

여러 요소가 선택되면 패널에 요소 레이아웃을 빠르게 정리하는 데 도움이 되는 정렬 및 분배 도구가 표시됩니다:

기능	설명
왼쪽 / 오른쪽 / 위 / 아래 가장자리 정렬	선택한 모든 요소를 가장 왼쪽/오른쪽/위/아래 요소의 가장자리에 정렬합니다.
가로 / 세로 중앙 정렬	선택한 모든 요소의 중심점을 가로 또는 세로로 정렬합니다.
가로 / 세로 균등 분배	선택한 여러 요소를 가로 또는 세로로 동일한 간격으로 분배합니다.

4.6 오른쪽 패널 - 구성 요소 탭

"구성 요소" 탭은 다양한 요소 유형에 대한 빠른 삽입 옵션을 제공하여 캔버스에 새 콘텐츠를 빠르게 추가할 수 있습니다. 버튼을 클릭하여 해당 구성 요소를 삽입하세요.

구성 요소 탭: 원클릭으로 다양한 요소 삽입

구성 요소	설명
텍스트 삽입	캔버스에 편집 가능한 텍스트 블록을 삽입합니다. 삽입 후 더블클릭하여 편집 모드로 들어가 콘텐츠를 수정하세요.
버튼 삽입	미리 스타일이 지정된 버튼 요소를 삽입합니다. 버튼 텍스트를 편집하고 클릭 링크를 추가할 수 있습니다.
이미지 삽입	로컬 업로드 또는 URL 입력을 지원하는 이미지 업로드 대화상자를 엽니다. 단일 파일 크기 및 일괄 업로드 제한이 적용됩니다—자세한 내용은 업로드 인터페이스를 참조하세요.
아이콘 삽입	화살표, 도형, 기호, 소셜, 장식, 일반 등 6개 카테고리가 있는 아이콘 선택기를 엽니다. 삽입 전에 아이콘 색상과 크기를 설정하세요.
표 삽입	표 크기 선택기를 엽니다. 마우스를 올려 행과 열을 선택하고 (예: 3×4 표) 클릭하여 삽입하세요.
링크 삽입	캔버스에 링크된 텍스트 요소를 삽입합니다. 링크 URL과 표시 텍스트를 입력하세요.
사각형 / 원 삽입	기본 도형 요소를 삽입합니다. 요소 스타일 도구를 사용하여 테두리, 배경색, 반경 및 기타 속성을 장식 또는 레이아웃용으로 조정하세요.

4.7 오른쪽 패널 - 레이어 탭

"레이어" 탭은 캔버스의 모든 편집 가능한 요소의 목록 보기를 제공하며, 필터링, 일괄 작업 및 정밀 위치 지정을 지원합니다—복잡한 페이지 요소를 관리하는 강력한 도구입니다.

레이어 탭: 레이어 관리 및 일괄 작업

요소 카드 목록

패널은 관리 가능한 모든 요소를 카드로 표시합니다. 각 카드는 요소의 태그 유형 (예: DIV, IMG, SPAN)과 레이어 레벨을 표시하며, 텍스트 요소는 콘텐츠 미리보기를 표시합니다. 장식 레이어 요소는 "장식" 배지로 표시됩니다. 각 카드 오른쪽에 빠른 잠금/잠금 해제 및 숨기기/표시 아이콘이 나타납니다.

필터 옵션

필터 버튼을 클릭하여 요소 상태별로 목록을 필터링하며, 다음 옵션이 있습니다:

필터	설명
전체	관리 가능한 모든 요소 표시
잠김	잠긴 요소만 표시
잠금 해제됨	잠금 해제된 요소만 표시
숨김	숨겨진 요소만 표시
표시됨	표시된 요소만 표시

일괄 작업

카드 목록에서 여러 요소를 선택한 후 일괄 작업 버튼을 사용하여 통합 처리합니다:

작업	설명
모두 선택 / 선택 반전	모든 요소를 빠르게 선택하거나 현재 선택을 반전합니다
선택 항목 잠금 / 잠금 해제	선택한 요소를 일괄 잠금 또는 잠금 해제합니다. 잠긴 요소는 편집하거나 이동할 수 없습니다
선택 항목 숨기기 / 표시	선택한 요소를 일괄 숨기거나 표시합니다. 숨겨진 요소는 캔버스에서 보이지 않지만 HTML에는 남아 있습니다
선택 항목 삭제	확인 프롬프트와 함께 선택한 요소를 일괄 삭제합니다

정밀도 토글

레이어 탭은 요소 인식 정확도를 제어하는 정밀도 토글을 제공합니다:

상태	설명
정밀도 켜짐	자동 중복 제거, 호스트 요소만 표시하여 중복 카드 감소
정밀도 꺼짐	모든 후보 요소 (인라인 프래그먼트 포함) 표시, 정밀한 인라인 요소 작업에 이상적

카드 클릭하여 위치 찾기

요소 카드를 클릭하면 캔버스가 자동으로 스크롤되고 해당 요소가 하이라이트되어 페이지에서 특정 구성 요소를 빠르게 찾을 수 있습니다. 이것은 복잡하거나 계층화된 페이지 레이아웃으로 작업할 때 특히 유용합니다.

4.8 오른쪽 패널 - 라이브러리 탭

"라이브러리" 탭은 자주 사용하는 요소나 구성 요소를 저장하여 다른 작품에서 재사용할 수 있는 개인 구성 요소 라이브러리로, 창작 효율성을 높입니다.

라이브러리 탭: 개인 구성 요소 라이브러리

즐겨찾기 구성 요소 목록

패널은 저장된 모든 구성 요소를 카드로 표시하며, 각 카드에는 썸네일과 이름이 표시됩니다. 썸네일은 저장 시 자동 생성되며, 이름이 없는 구성 요소는 "제목 없음"으로 표시됩니다.

즐겨찾기 검색

검색 상자를 사용하여 이름으로 저장된 구성 요소를 빠르게 찾으세요. 입력할 때 목록이 실시간으로 필터링됩니다.

즐겨찾기 구성 요소 삽입

라이브러리 카드의 "삽입" 버튼을 클릭하여 해당 구성 요소를 현재 캔버스에 추가하세요. 삽입된 구성 요소는 정상적으로 편집하고 조정할 수 있습니다.

즐겨찾기 이름 바꾸기 / 삭제

각 라이브러리 카드는 "이름 바꾸기" 및 "삭제" 옵션을 제공합니다. 이름 바꾸기는 나중에 구성 요소를 더 쉽게 찾을 수 있게 합니다. 삭제는 저장된 구성 요소를 영구적으로 제거합니다—주의해서 사용하세요.

라이브러리에 추가하는 방법

캔버스에서 요소를 선택한 다음 컨텍스트 메뉴에서 "라이브러리에 추가"를 선택하여 해당 요소와 하위 요소를 구성 요소로 저장하세요. 성공하면 "라이브러리에 추가됨" 확인이 나타납니다.

4.9 컨텍스트 메뉴

선택한 요소를 우클릭하면 일반적인 작업에 빠르게 접근할 수 있는 컨텍스트 메뉴가 열립니다. 메뉴 콘텐츠는 선택한 요소 유형에 따라 동적으로 조정됩니다.

컨텍스트 메뉴: 일반적인 작업에 빠르게 접근

메뉴 항목	설명
복사 / 붙여넣기	선택한 요소를 클립보드에 복사하거나 클립보드 콘텐츠를 캔버스에 붙여넣습니다. 작품 간 복사 및 붙여넣기를 지원합니다.
라이브러리에 추가	선택한 요소를 다른 작품에서 재사용할 수 있도록 개인 라이브러리에 저장합니다.
링크 추가/편집/제거	요소에 클릭하여 탐색하는 링크를 추가하거나 기존 링크를 편집/제거합니다. 제거 시 확인을 요청합니다.
이미지 교체	이미지 요소에만 표시됩니다. 로컬 업로드 또는 URL 이미지로 빠르게 교체합니다.
위로 이동 / 아래로 이동	쌓기 순서에서 요소의 위치를 조정합니다. 위로 이동하면 앞으로 옵니다.
맨 앞으로 가져오기 / 맨 뒤로 보내기	요소를 모든 요소의 맨 앞 또는 맨 뒤로 직접 이동합니다.
잠금 / 잠금 해제	잠긴 요소는 편집하거나 이동할 수 없어 실수로 인한 변경을 방지합니다. 잠금 해제하여 편집 가능성을 복원합니다.
숨기기 / 표시	HTML에 유지하면서 캔버스에서 요소를 일시적으로 숨깁니다. 표시하면 가시성이 복원됩니다.
삭제	선택한 요소를 영구적으로 삭제합니다. 여러 요소가 선택된 경우 개수가 표시됩니다.

표 전용 메뉴

표 셀을 우클릭하면 메뉴에 추가 표 전용 작업이 표시됩니다:

메뉴 항목	설명
행 삭제	현재 셀이 포함된 전체 행 삭제 (마지막 행은 삭제할 수 없음)
열 삭제	현재 셀이 포함된 전체 열 삭제 (마지막 열은 삭제할 수 없음)

4.10 표 편집

표 또는 표 셀이 선택되면 오른쪽 패널에 포괄적인 표 스타일링 및 구조 조정 기능이 있는 전용 표 편집 도구가 표시됩니다.

표 편집: 행/열 작업 및 스타일 설정

행 및 열 작업

표 편집기 패널의 "행 및 열" 섹션은 다음을 제공합니다:

작업	설명
위에 행 삽입 / 아래에 행 삽입	현재 행 위 또는 아래에 새 행 삽입
행 삭제	현재 선택한 행 삭제 (마지막 행은 삭제할 수 없음)
왼쪽에 열 삽입 / 오른쪽에 열 삽입	현재 열 왼쪽 또는 오른쪽에 새 열 삽입
열 삭제	현재 선택한 열 삭제 (마지막 열은 삭제할 수 없음)

셀 병합 / 분할

여러 인접한 셀을 선택한 후 "셀 병합"을 사용하여 하나로 결합합니다. 병합된 셀의 경우 "셀 분할"을 사용하여 원래 여러 셀로 복원합니다.

셀 정렬

두 차원에서 셀 콘텐츠 정렬을 설정합니다:

차원	옵션
가로	왼쪽, 가운데, 오른쪽
세로	위, 중간, 아래

테두리 스타일

표 테두리 모양을 사용자 정의합니다:

속성	설명
테두리 너비	테두리 두께 설정
테두리 스타일	실선, 점선, 점, 이중선, 없음
테두리 색상	색상 선택기를 통해 테두리 색상 선택

"적용"을 클릭하여 변경 사항을 저장합니다.

셀 배경

색상 선택기를 사용하여 셀 배경색을 설정합니다—머리글이나 중요 데이터 행을 강조하는 데 이상적입니다.

4.11 줌 제어 및 뷰포트

캔버스 하단의 줌 컨트롤러는 줌 및 뷰포트 크기 조정을 제공하여 다양한 장치 크기에서 작품을 미리 볼 수 있습니다.

줌 제어: 캔버스 줌 및 뷰포트 크기 조정

확대 / 축소 / 재설정

"+" 및 "−" 버튼을 사용하여 캔버스 보기를 확대 또는 축소하거나 Ctrl/Cmd + 마우스 휠을 눌러 빠르게 줌합니다. 백분율 숫자를 클릭하여 기본 줌으로 재설정합니다. Space + 드래그를 눌러 캔버스를 팬합니다.

뷰포트 크기 프리셋

뷰포트 선택기를 클릭하여 미리보기 크기 간에 전환하여 다양한 장치에서 표시를 시뮬레이션합니다:

뷰포트 크기	설명
자동	콘텐츠 크기와 일치, 대부분의 시나리오에 적합
데스크톱 1920×1080 (기본값)	Full HD 데스크톱 모니터
데스크톱 1440×900	일반 노트북 화면
데스크톱 1366×768	인기 노트북 해상도
데스크톱 1280×720	HD 해상도
태블릿 1024×768	표준 태블릿 장치
모바일 375×812	iPhone 및 유사한 모바일 장치

미리보기 패치

특수 구조의 HTML 페이지의 경우 표시를 최적화하기 위해 세 가지 미리보기 패치를 사용할 수 있습니다. 패치를 활성화하거나 비활성화하면 자동 저장되고 미리보기가 새로고침됩니다:

패치	설명
USP — 초장형 페이지 안정화	초장형 또는 경계 없는 캔버스를 최적화하여 흔들림을 줄입니다. 복잡한/경계 없는 정적 파일에 적합
UFP — 뷰포트 너비 고정	뷰포트 너비를 제한하여 적절한 복잡한 레이아웃 표시 복원
SHP — 비정상적 크기 최적화	비정상적으로 구조화된 HTML을 최적화하여 호환성 개선

팁: 패치가 눈에 띄는 효과를 보이지 않으면 먼저 "초기 HTML 복원"을 시도한 다음 패치를 다시 활성화하세요.

4.12 HTML 에디터

HTML 에디터를 사용하면 작품의 완전한 HTML 소스 코드를 직접 보고 편집할 수 있습니다—미세 조정이나 사용자 정의 코드 추가가 필요한 고급 사용자에게 이상적입니다. 이 기능은 Pro 전용입니다.

HTML 에디터: 소스 코드 직접 편집 (Pro)

전체 HTML 보기 / 편집

HTML 에디터를 열면 완전한 HTML 소스 코드 (<!DOCTYPE html> 포함)가 표시됩니다. 코드를 직접 편집할 수 있으며, 저장하면 변경 사항이 적용됩니다.

검색 및 바꾸기

Ctrl+F를 사용하여 찾기를 열고 키워드를 입력하여 코드를 빠르게 찾습니다. Ctrl+H를 사용하여 바꾸기를 열어 일괄 텍스트 바꾸기를 수행합니다. 도구 모음에 일치 개수 (예: "3 / 15")가 표시되며, 개별 또는 모두 바꾸기 옵션이 있습니다.

줄로 이동

Ctrl+G 또는 도구 모음 이동 기능을 사용하여 줄 번호를 입력하고 해당 줄로 빠르게 이동합니다—대용량 HTML 파일에 유용합니다.

대소문자 일치

검색 중에 "대소문자 일치" 옵션을 활성화하여 대소문자 구분 콘텐츠를 정확하게 일치시킵니다.

자동 줄 바꿈

자동 줄 바꿈이 활성화되면 긴 코드 줄이 가로 스크롤 없이 볼 수 있도록 자동으로 줄 바꿈됩니다.

복사 / 저장

"HTML 복사"를 클릭하여 완전한 소스 코드를 클립보드에 복사합니다. 편집 후 저장을 클릭하여 변경 사항을 적용합니다. 콘텐츠가 비어 있거나 구문 오류가 포함된 경우 적절한 메시지가 나타납니다.

참고: HTML 콘텐츠가 저장 용량 제한을 초과하면 저장 시 "저장 공간 부족, 이 편집을 저장할 수 없습니다."가 표시됩니다. 불필요한 콘텐츠를 삭제하거나 플랜을 업그레이드하여 용량을 늘리세요.

4.13 하단 도구 모음

하단 도구 모음은 미리보기, 실행 취소/다시 실행, 복원 및 저장 기능을 포함한 에디터의 핵심 작업 버튼을 제공합니다.

하단 도구 모음: 미리보기, 저장 및 복원

미리보기 (새 창에서 열림)

미리보기 버튼을 클릭하여 새 창에서 작품의 전체 미리보기를 열어 실제 표시 결과를 보여줍니다. 미리보기 페이지에는 임시 미리보기 알림이 표시되어 재사용할 수 없는 링크가 있는 편집 단계 미리보기임을 사용자에게 알립니다.

실행 취소 / 다시 실행

실행 취소는 마지막 작업을 되돌리고, 다시 실행은 취소된 작업을 복원합니다. 여러 실행 취소/다시 실행 단계를 지원합니다. Ctrl+Z (실행 취소) 및 Ctrl+Y (다시 실행)를 통해서도 사용할 수 있습니다.

미리보기 새로고침

새로고침을 클릭하면 미리보기 영역이 다시 로드됩니다. 시스템은 먼저 현재 콘텐츠를 저장한 다음 캔버스를 새로고침하여 최신 상태를 표시합니다. 광범위한 편집 후 표시를 동기화하는 데 유용합니다.

마지막 저장 상태 복원

작품을 마지막으로 수동 저장한 상태로 복원합니다. 저장되지 않은 모든 편집이 손실됩니다—주의해서 사용하세요. 시스템은 실행 전에 확인을 요청합니다.

초기 HTML 복원

작품의 HTML을 처음 생성했을 때의 원래 상태로 복원합니다. 모든 편집 기록이 지워집니다. 이 작업은 되돌릴 수 없습니다—중요한 콘텐츠를 백업했는지 확인하세요.

저장

현재 모든 변경 사항을 수동으로 저장합니다. 시스템은 자동 저장도 지원하지만, 데이터 안전을 보장하기 위해 중요한 편집 후 수동 저장을 권장합니다. 완료 시 "저장 성공"이 나타납니다.

4.14 상단 도구 모음

상단 도구 모음은 작품 정보와 빠른 작업 버튼을 표시하여 공유 및 다운로드 기능에 빠르게 접근할 수 있습니다.

상단 도구 모음: 제목, 공유 및 다운로드

작품 제목 (더블클릭하여 편집)

상단에 현재 작품 제목이 표시됩니다. 제목 영역을 더블클릭하여 편집 모드로 들어가 이름을 변경하세요. 제목은 비어 있을 수 없습니다. 성공 시 "제목이 성공적으로 업데이트되었습니다"가 나타납니다. 이름이 없는 작품은 "제목 없는 작품"으로 표시됩니다.

공유 버튼

공유 버튼을 클릭하여 작품 공유를 활성화하고 접근 가능한 링크를 생성하세요. 자세한 내용은 4.16 공유 기능을 참조하세요. 이 기능은 Pro 전용입니다.

다운로드 버튼

오른쪽에 "이미지로 다운로드" 및 "HTML로 다운로드" 버튼이 있습니다. 자세한 내용은 4.15 작품 다운로드를 참조하세요.

4.15 작품 다운로드

HtmlDrag는 유연한 내보내기 옵션을 제공하여 공유, 보관 또는 추가 개발을 위해 작품을 이미지 또는 표준 HTML 파일로 다운로드할 수 있습니다.

상단 바의 "이미지로 다운로드" 버튼을 클릭하여 전체 캔버스 콘텐츠의 고품질 PNG 이미지를 생성하고 다운로드하세요. 디자인 쇼케이스, 소셜 미디어 공유 또는 미리보기에 완벽합니다.

HTML로 다운로드

Pro 사용자는 작품을 표준 HTML 소스 파일로 내보낼 수 있습니다. "HTML로 다운로드" 버튼을 클릭하면 두 가지 옵션이 제공됩니다:

• 현재 HTML 다운로드: 에디터에서 수정하고 조정한 모든 내용이 포함됩니다—보이는 대로 얻습니다.
• 원본 HTML 다운로드: 작품이 처음 생성되었을 때의 원본 코드를 내보내며, 후속 편집은 포함하지 않습니다.

다운로드 옵션: 현재 편집 버전 또는 원본 버전 중 선택

4.16 공유 기능

공유 기능을 사용하면 작품에 대한 공개 접근 가능한 링크를 생성하여 창작물을 쉽게 공유할 수 있습니다. 공유 페이지는 접근 통계도 제공합니다. 이 기능은 Pro 전용입니다.

공유 설정: 링크 및 상태 관리

설정 및 관리

• 공유 활성화: 공유 버튼을 클릭하여 고유한 공유 링크를 생성합니다. 처음 활성화 시 "공유가 활성화되었습니다. 링크가 클립보드에 복사되었습니다"가 나타납니다.
• 유효 기간: 공유 링크는 기본적으로 7일 동안 유효합니다. 공유 대화상자에서 특정 만료 시간을 볼 수 있습니다.
• 시간 업데이트: 링크가 곧 만료되거나 연장하려면 "링크 업데이트"를 클릭하여 유효 기간을 재설정하세요.
• 공유 중지: "공유 중지"를 클릭하여 현재 링크를 즉시 무효화하여 추가 접근을 방지합니다.
• 링크 복사: 복사 버튼을 클릭하여 공유 링크를 클립보드에 복사합니다.

공유 페이지 및 통계

방문자가 공유 링크를 열면 독립 실행형 프레젠테이션 페이지가 표시됩니다. 오른쪽 사이드바에 작품 정보가 표시됩니다:

• 제목 및 작성자: 닉네임과 작품 제목을 표시합니다.
• 통계: 조회수와 좋아요를 보고 인기도를 추적합니다.
• 만료: 공유 링크가 만료되는 시기를 표시합니다.

공유 페이지: 방문자 보기 및 통계

참고: 작품이 신고되어 정책 위반이 확인되면 시스템이 해당 작품에 대한 공유를 비활성화할 수 있으며 "이 작품은 신고되어 확인되었습니다. 시스템에 의해 공유가 비활성화되었습니다."라는 메시지가 표시됩니다.

5. 기타 기능

핵심 편집 기능 외에도 HtmlDrag는 최신 정보를 얻고 저희와 소통하는 데 도움이 되는 메시지 및 피드백 기능도 제공합니다.

5.1 메시지

메시지 모듈은 계정 상태, 결제 알림, 구독 만료 알림 및 기능 업데이트를 포함한 중요한 시스템 알림을 수신합니다.

메시지: 시스템 알림 및 경고 수신

시스템 메시지 목록

메시지 목록은 시간순으로 정렬되어 제목, 요약, 생성 시간 및 만료 시간을 표시합니다. 메시지를 클릭하여 세부 정보를 보거나 작업을 수행하세요 (예: "결제 계속", "지금 갱신").

읽지 않음 필터

오른쪽 상단의 "읽지 않음만" 상자를 체크하여 읽지 않은 메시지를 빠르게 필터링하여 중요한 알림에 집중할 수 있습니다.

모두 읽음으로 표시

"모두 읽음으로 표시" 버튼을 클릭하여 현재 목록의 모든 메시지를 즉시 읽음으로 표시하여 빨간 점 표시기를 지웁니다.

메시지 세부 정보

메시지 카드를 클릭하여 전체 알림 콘텐츠를 봅니다. 주문 또는 구독 메시지의 경우 세부 정보에는 편의를 위한 빠른 작업 버튼이 포함되는 경우가 많습니다.

5.2 피드백

문제가 발생하거나 제안이 있으시면 피드백 모듈을 통해 제출하세요. 문제를 더 잘 설명하기 위해 이미지를 업로드할 수 있습니다.

피드백: 문제 또는 제안 제출

피드백 목록 및 상태

목록에 제출 기록과 현재 상태가 표시됩니다:

• 진행 중: 피드백 제출됨, 관리자 검토 대기 중.
• 답변됨: 관리자가 응답함; 클릭하여 보기.
• 종료됨: 피드백이 보관되거나 해결됨; 추가 답변 불가.

새 피드백 제출

"새 피드백"을 클릭하고 콘텐츠를 입력하세요 (필수, 최소 10자). 스크린샷을 제공하기 위해 "이미지 업로드" (각 최대 2MB)를 할 수 있습니다. 완료되면 "피드백 제출"을 클릭하세요.

피드백 세부 정보 및 대화

목록 항목을 클릭하여 메시지와 관리자 답변을 포함한 전체 대화 기록을 봅니다. 상단에 피드백 ID와 첨부 파일이 표시됩니다.

답변 계속

"진행 중" 또는 "답변됨" 피드백의 경우 하단의 입력 상자를 사용하여 해결될 때까지 추가 정보를 제공하거나 관리자에게 답변하세요.

6. 시스템 팁

사용 중에 시스템 경고 또는 제한을 만날 수 있습니다. 일반적인 시스템 팁에 대한 설명과 제안입니다.

6.1 HTML 감지 경고

가져오기 품질과 에디터 안정성을 보장하기 위해 시스템은 URL과 파일을 자동으로 스캔하여 잠재적인 문제를 알립니다.

로컬 리소스 감지

페이지에 로컬 경로 (예: file:// 또는 C:/)가 포함된 경우 리소스가 로드되지 않습니다. 제안: 모든 리소스가 공개 HTTP/HTTPS 링크를 사용하는지 확인하세요.

이미지 핫링크 보호

일부 사이트는 이미지에 대한 외부 접근을 차단합니다. 제안: "이미지 교체"를 사용하여 로컬 파일을 업로드하거나 공개 서비스에 호스팅하세요.

동적 렌더링 페이지 (SPA)

JavaScript (SPA)에 전적으로 의존하는 페이지는 동적 DOM이 직접 캡처되지 않기 때문에 빈 상태 또는 불완전하게 가져올 수 있습니다. 제안: 브라우저에서 렌더링된 HTML을 복사하여 "코드 붙여넣기"를 사용하세요.

외부 글꼴 / 아이콘 라이브러리

CORS 헤더가 누락된 글꼴이나 아이콘은 잘못 표시될 수 있습니다. 제안: 에디터에서 시스템 글꼴이나 라이브러리 아이콘으로 교체하세요.

포함된 콘텐츠 (iframe)

보안을 위해 일부 iframe 콘텐츠가 차단되거나 상호작용이 불가능할 수 있습니다. 시스템은 가능한 경우 자리 표시자를 보존합니다.

6.2 저장 공간 및 제한

HtmlDrag는 플랜에 따라 리소스 할당량을 적용합니다. "저장 공간 한도에 도달함" 또는 "작품 한도에 도달함" 경고가 표시될 수 있습니다.

저장 공간 한도 도달

공간이 부족하면 편집을 저장하거나 파일을 업로드할 수 없습니다. 해결책:

• "포트폴리오"에서 오래된 항목을 삭제하여 공간을 확보하세요.
• 대화상자에서 "지금 업그레이드"를 클릭하여 Pro으로 더 많은 용량을 얻으세요.

작품 수 제한

Free 사용자는 저장된 작품 수에 제한이 있습니다. 오래된 작품을 삭제하거나 업그레이드하여 이 제한을 늘리세요.

이미지 업로드 제한

시스템은 단일 파일 크기와 일괄 제한을 확인합니다. "파일 크기가 제한을 초과합니다" 또는 "일괄 크기 초과"가 표시되면 이미지를 압축하거나 더 작은 배치로 업로드하세요. Pro 사용자는 더 높은 제한을 누릴 수 있습니다.

6.3 보안 스캔

내장된 보안 스캔은 URL 가져오기, 파일 업로드 또는 코드 붙여넣기 시 콘텐츠 위험을 자동으로 평가하여 계정을 보호합니다.

위험 수준

XSS, 악성 스크립트 또는 위험한 태그와 같은 위협을 기반으로 위험은 다음과 같이 분류됩니다:

• 낮은 위험: 사소한 경고; 일반적으로 진행해도 안전합니다.
• 중간 위험: 잠재적인 문제; 주의해서 진행하세요.
• 높은 위험: 심각한 위험; 소스를 신뢰할 수 있는 경우에만 진행하세요.
• 심각한 위험: 맬웨어 또는 피싱 콘텐츠 포함; 즉시 차단됩니다.

안전 모드

일부 위험이 있는 파일의 경우 시스템은 자동 살균과 같은 "보안 조치"를 제공합니다. "안전 모드로 계속"을 선택하면 시스템이 레이아웃과 편집 가능성을 유지하면서 위험한 코드를 제거합니다.