1. 제품 포지셔닝

HtmlDrag란 무엇인가요?

HtmlDrag는 표준 HTML을 출력하는 비주얼 에디터입니다. 서버에 귀속시키는 사이트 빌더와 달리, 배포 효율성을 중시하고 단일 플랫폼에 종속되는 것을 거부하는 사용자를 위해 설계되었습니다.

HtmlDrag는 벤더 락인(Vendor Lock-in)을 거부합니다. 우리는 기존 HTML 페이지의 "마지막 10% 완성"에 집중합니다. AI가 생성한 랜딩 페이지, 웹에서 스크랩한 경쟁사 분석 스냅샷, 디자이너가 전달한 정적 페이지 등 HtmlDrag에서 드래그 앤 드롭과 클릭으로 레이아웃을 최적화할 수 있습니다. 결과물은 Vercel, Netlify 또는 기존 서버에 바로 배포할 수 있는 표준 시맨틱 HTML 코드입니다.

핵심 가치 제안:

• 코드는 당신의 것: 당신의 코드는 HtmlDrag의 런타임 환경에 의존하지 않습니다. 언제든지 다운로드하고 떠나세요, 어디로든 마이그레이션하세요.
• Figma처럼 웹페이지 편집: 전통적인 "코드 뷰"에서 벗어나 직관적인 드래그 앤 드롭, 줌, 레이어 제어를 즐기세요.
• 원활한 AI 핸드오프: ChatGPT나 Claude가 생성한 HTML 코드를 직접 붙여넣어 시각적으로 미세 조정하세요. AI 결과물의 정밀한 세부 제어 문제를 해결합니다.
• SEO 및 성능 최우선: 생성된 코드는 깔끔하며 불필요한 JS 주입이 없어 빠른 로딩과 검색 엔진 친화성을 보장합니다.

2. 네 가지 핵심 진입점

HtmlDrag는 에디터로 콘텐츠를 가져오는 네 가지 방법을 제공하여, 제로 베이스 창작부터 2차 가공까지 모든 시나리오를 커버합니다.

HtmlDrag 네 가지 핵심 진입점: URL 가져오기, HTML 업로드, 코드 붙여넣기, AI 생성기

URL 가져오기: URL을 입력하여 편집 가능한 웹페이지 사본 얻기

HTML 업로드: 로컬 HTML 파일을 드래그 앤 드롭하여 업로드

코드 붙여넣기: HTML 코드를 붙여넣어 즉시 렌더링 및 미리보기

AI 생성기: 텍스트를 입력하여 정적 페이지 빠르게 생성

3. 비주얼 에디터 핵심 기능

HtmlDrag의 중심에는 실제 HTML 환경을 직접 조작할 수 있는 강력한 WYSIWYG 에디터가 있어 지루한 코드 편집과 작별할 수 있습니다.

3.1 자유로운 드래그 앤 드롭 레이아웃

문서 흐름 제한을 깨고 어디에나 배치

전통적인 HTML 요소는 문서 흐름에 제한되어 위치 조정을 위해 CSS 수정이 필요합니다. HtmlDrag는 절대 위치 드래그 앤 드롭을 지원하여 PPT나 Photoshop처럼 요소를 자유롭게 이동할 수 있습니다.

• 스마트 선택: 요소를 클릭하면 파란색 편집 테두리와 8개의 크기 조절 핸들이 나타납니다.
• 자유로운 이동: 길게 누르고 드래그하여 요소를 실시간으로 이동합니다.
• 정밀한 크기 조절: 모서리 핸들을 드래그하여 비율을 유지하거나 자유롭게 크기를 조절합니다.
• 다중 선택: Shift를 누른 채 여러 요소를 클릭하거나 박스 선택으로 일괄 이동합니다.
• 복사 및 붙여넣기: Ctrl+C / Ctrl+V로 페이지 간 요소를 빠르게 복제합니다.

자유로운 드래그 앤 드롭: 요소를 선택하여 자유롭게 이동 및 크기 조절

3.2 더블 클릭하여 텍스트 편집

워드 문서처럼 웹 텍스트 편집

텍스트 영역을 더블 클릭하여 편집 모드로 들어갑니다. 코드에서 텍스트 위치를 찾을 필요 없이 페이지에서 내용을 직접 수정하세요.

• 서식 있는 텍스트 지원: 굵게, 기울임꼴, 색상, 링크 등을 원클릭으로 설정.
• 실시간 미리보기: 편집 내용이 페이지에 즉시 나타납니다.
• 원본 스타일 보존: 텍스트 수정은 기존 CSS 스타일을 깨지 않습니다.

3.3 이미지 교체 및 조정

원클릭 이미지 교체, 드래그하여 크기 조절

페이지의 이미지를 클릭하여 로컬 파일이나 새 이미지 URL로 빠르게 교체하세요. 주황색 핸들을 드래그하여 실시간 미리보기로 크기를 조절하세요.

• 로컬 업로드: JPG, PNG, WebP, GIF 등 일반적인 형식 지원.
• URL 교체: 이미지 링크를 직접 붙여넣어 교체.
• 비율 잠금: 원본 종횡비를 유지하거나 자유롭게 조정하도록 선택.

이미지 편집: 원클릭 교체, 드래그하여 크기 조절

3.4 비주얼 스타일 조정

CSS 코딩 없이 클릭으로 설정

요소를 선택하고 속성 패널을 통해 직관적으로 스타일을 조정하세요:

조정 가능한 속성	설명
마진 & 패딩	4방향 독립 조정
배경 색상	색상 선택기 또는 직접 Hex 입력
타이포그래피	글꼴 크기, 줄 높이, 색상, 정렬
테두리 & 반경	너비, 색상, 스타일; 모서리 반경
그림자	비주얼 Box Shadow 설정
투명도	투명도 슬라이더 조정

3.5 레이어 관리 & DOM 트리

포토샵처럼 HTML 구조 관리

복잡한 중첩 구조의 경우 직접 클릭은 부정확할 때가 많습니다. 레이어 패널은 전체 DOM 트리 뷰를 제공하여 복잡한 div 계층 구조를 뚫고 대상을 정확하게 선택할 수 있게 해줍니다.

• 비주얼 DOM 구조: 명확한 부모-자식 관계를 위해 트리 구조로 HTML 노드를 표시합니다.
• 정밀한 위치 지정: 가려진 요소나 작은 아이콘을 쉽게 선택합니다.
• 비파괴적 작업: 코드 구조를 깨뜨리지 않고 숨기기/잠금 기능으로 편집을 지원합니다.
• 이름 변경: 명확한 구조 구성을 위해 레이어 이름을 지정합니다.

레이어 관리: 명확한 DOM 구조 뷰

3.6 내장 HTML 소스 에디터

정밀 제어를 위해 언제든지 코드 뷰로 전환

HtmlDrag는 비주얼 편집에 중점을 두지만, 코딩 가능한 사용자를 위해 소스 편집 진입점을 유지합니다. 툴바의 "코드" 버튼을 클릭하면 팝업에서 원시 HTML/CSS를 보고 편집할 수 있습니다.

• 구문 강조: 읽기 쉬운 컬러 코드
• 실시간 동기화: 코드 수정 후 캔버스가 즉시 업데이트됨
• 충돌 없음: 비주얼 편집과 코드 편집 간 원활한 전환

소스 에디터: 정밀 제어를 위해 언제든지 코드 뷰로 전환

3.7 요소 즐겨찾기 & 재사용

프로젝트 간 재사용을 위해 "내 즐겨찾기"에 블록 저장

편집 중에 아름답게 디자인된 블록을 찾으셨나요? "내 즐겨찾기" 목록에 저장하세요. 다음에 새 프로젝트를 만들 때 다시 만들 필요 없이 바로 삽입하면 됩니다.

• 원클릭 저장: 요소를 선택하고 우클릭하여 "즐겨찾기에 추가" 선택
• 즐겨찾기 관리: 저장된 요소 보기, 이름 변경, 삭제
• 프로젝트 간 사용: 저장된 요소를 새 프로젝트에 직접 삽입

3.8 뷰포트 크기 프리셋

캔버스 크기를 전환하여 다양한 화면 너비 미리보기

HtmlDrag는 모바일(375px), 태블릿(1024px), 데스크톱(1280px ~ 1920px)을 포함한 다양한 뷰포트 크기 프리셋을 제공하여 페이지가 다른 기기에서 어떻게 보이는지 빠르게 미리 볼 수 있도록 돕습니다.

• 다양한 프리셋: 모바일에서 데스크톱까지 커버하는 7가지 일반적인 화면 크기 내장
• 원본 자동 맞춤: 가져온 콘텐츠를 기반으로 원본 캔버스 크기 자동 식별
• 미리보기 중 편집: 크기를 전환한 후에도 모든 편집 작업 계속 가능

4. 내보내기 & 공유

당신의 작업물은 당신의 것입니다. HtmlDrag는 플랫폼 락인 없이 개방형 내보내기 옵션을 제공합니다.

4.1 표준 HTML 내보내기 (클린 내보내기)

당신의 코드, 완전히 자유롭게

이것이 HtmlDrag와 Wix 또는 Squarespace의 가장 큰 차이점입니다: 우리는 당신을 플랫폼에 묶어두지 않습니다. 다운로드를 클릭하면 어디에나 배포할 수 있는 깔끔한 `.html` 파일을 얻을 수 있습니다.

• 제로 런타임 종속성: 내보낸 페이지는 HtmlDrag JS 라이브러리를 로드하지 않고 실행됩니다.
• 시맨틱 보존: 편집 중에 원래 HTML 시맨틱 태그(header, article, footer 등)를 보존하기 위해 노력하며, 이는 SEO에 유리합니다.
• 두 가지 다운로드 모드:
  • 현재 HTML 다운로드: 모든 편집 및 수정 사항을 포함하며, 에디터 보조 마커를 자동으로 정리합니다.
  • 원본 HTML 다운로드: 비교를 위해 가져오기 시점의 원본 코드를 유지합니다.

4.2 온라인 공유

누구와도 즉시 공유할 수 있는 하나의 링크

서버를 배포하고 싶지 않으신가요? HtmlDrag의 온라인 공유 기능을 사용하세요. 클라이언트, 동료 또는 친구에게 보내 로그인 없이 볼 수 있는 임시 액세스 링크를 생성합니다.

• 즉시 생성: "공유"를 클릭하면 링크가 즉시 준비됩니다
• 유효 기간 관리: 링크는 기본적으로 7일 동안 유효하며 언제든지 갱신할 수 있습니다
• 개인정보 제어: 언제든지 공유를 취소하여 링크를 즉시 무효화할 수 있습니다

온라인 공유: 링크를 생성하여 누구와도 즉시 공유

4.3 이미지 내보내기

디자인 아카이브 또는 소셜 공유를 위해 웹페이지를 이미지로 저장

페이지를 이미지로 저장해야 하나요? HtmlDrag는 전체 페이지(긴 페이지 포함)를 PNG 이미지로 내보내는 것을 지원합니다.

• 전체 페이지 스크린샷: 한 화면뿐만 아니라 긴 페이지 전체 캡처 지원
• 명확한 프레젠테이션: 페이지 텍스트, 이미지 및 스타일을 완전히 보존
• 사용 사례: 디자인 아카이브, 소셜 미디어 공유, 클라이언트 제안 프레젠테이션

5. 전통적인 도구와의 비교

HtmlDrag 대 전통적인 온라인 사이트 빌더

차원	전통적인 SaaS 빌더	HtmlDrag
핵심 포지셔닝	플랫폼에서 전체 사이트를 구축하기 위한 호스팅 서비스 제공	어떤 소스의 HTML이든 수정할 수 있도록 편집 도구 제공
코드 소유권	코드가 종종 암호화되거나 난독화되어 독립 배포를 위해 내보내기 어려움	완전히 투명함 — 소스 코드 내보내기, 플랫폼 의존성 없음
외부 가져오기	일반적으로 외부 HTML 가져오기를 지원하지 않으며 템플릿으로 제한됨	높은 호환성 — AI 생성, URL 가져오기, 파일 업로드, 코드 붙여넣기 지원
장기 비용	계속 구독해야 하며, 그렇지 않으면 사이트가 오프라인됨	락인 없음 — 내보낸 파일은 모든 무료/유료 서버에 호스팅 가능

HtmlDrag 대 로컬 전문 코드 에디터

차원	전문 코드 에디터	HtmlDrag
진입 장벽	HTML/CSS 문법 이해 및 개발 환경 구성 필요	제로 장벽 — 슬라이드처럼 드래그 및 더블 클릭하여 편집
피드백 속도	코드 작성 -> 저장 -> 브라우저 새로고침	실시간 피드백, WYSIWYG, 밀리초 응답
수정 효율성	레이아웃 조정 시 CSS 속성 수동 계산 필요	직관적인 조작, 드래그하여 위치 및 크기 변경
사용 사례	대규모 프로젝트 개발, 로직 프로그래밍	빠른 프로토타이핑, 랜딩 페이지 조정, 카피/이미지 수정

6. 핵심 장점 & 가치

7. 시나리오 & 대상