- 비교 기준 추출: 기존 소개 글에서 학습 방식, 소요 시간, 피드백, 수강 기간 등 핵심 기준 4~5개를 추출하여 플랜 간 비교 단위를 통일합니다.
- 네이티브 HTML 표 삽입: 기존 페이지에 표 컴포넌트를 추가하고 비교 데이터를 편집 가능한 HTML로 유지합니다.
- 캔버스에서 직접 편집: 셀과 행·열을 수정하고, Table Style로 강조 스타일을 조정하며 링크 도구로 대상 주소를 설정합니다.
- 저장·미리보기·내보내기: 데스크톱과 좁은 화면에서 배치를 확인하고 버전을 저장한 뒤, 전달할 파일에는 Edited HTML을 선택합니다.
랜딩 페이지에서 각 옵션을 아무리 꼼꼼히 설명하더라도, 방문자가 여러 플랜의 차이를 한눈에 파악하기는 쉽지 않습니다. 어떤 과정에 강사 피드백이 포함되어 있는지, 전체 소요 시간은 얼마인지, 자료 열람 기간은 언제까지인지 확인하려면 여러 문단을 오가며 찾아야 합니다. 전용 비교표는 이러한 핵심 질문에 대한 답을 하나의 격자로 정리해 줍니다. 하지만 기존 HTML 페이지에 표를 추가할 때 기존에는 세 가지 딜레마가 있었습니다:
- HTML 표 수동 코딩:
<table>,<tr>,<td>태그를 직접 작성하는 것은 매우 번거롭고, 복잡한 Tailwind CSS 유틸리티 클래스가 얽혀 있는 경우 태그 하나만 닫지 않아도 전체 레이아웃이 깨지기 쉽습니다. - 타사 위젯 삽입: 선택한 서비스에 따라 외부 스크립트, 서비스 설정 또는 구독 요금제를 관리해야 할 수 있습니다.
- AI로 전체 페이지 재생성: 표 외의 영역까지 검토 범위가 넓어질 수 있으므로 주변 문구, 스타일 및 동작도 확인합니다.
네이티브 HTML 표의 시각적 편집은 기존 페이지에 비교 정보를 추가하고 계속 관리하는 실용적인 방법입니다. 편집 및 게시 절차에 맞추어 다음 방식을 비교할 수 있습니다.
| 기술 방식 | SEO 크롤링 및 검색 색인 | 페이지 성능 (Core Web Vitals) | 지속적인 유지보수성 | 주변 기존 페이지 파괴 위험 |
|---|---|---|---|---|
| 네이티브 HTML 표 (인플레이스 시각적 편집) | 비교 데이터가 페이지 HTML에 포함됩니다. | 네이티브 표 마크업을 사용하며 삽입 후 배치를 확인합니다. | 편집기에서 셀과 행·열을 수정합니다. | 대상에 집중해 편집하고 주변 내용도 확인합니다. |
| 외부 위젯 플러그인 (iframe / 스크립트 삽입) | 렌더링과 통합 방식은 위젯마다 다릅니다. | 외부 스크립트나 임베드 프레임이 추가될 수 있습니다. | 제공 업체의 편집 절차를 통해 관리합니다. | 원래 페이지에서 위젯 스타일과 차지하는 공간을 확인합니다. |
| AI 전체 페이지 재생성 (채팅창 프롬프트) | 사용 전에 생성된 HTML 구조를 검토합니다. | 생성된 마크업, 스타일 및 리소스에 따라 달라집니다. | 생성 결과를 업데이트하고 변경 사항을 검토합니다. | 요청한 표 이외의 변경 사항도 확인합니다. |
1단계: 시각적 편집기에서 기존 HTML 파일 열기
본 가이드에서는 기술 작문 교육 브랜드인 Fieldnote Writing School의 강좌 소개 페이지(자율 학습 과정과 라이브 워크숍 2개 플랜)를 예시로 사용합니다. 기존 페이지에는 강의 설명, 커리큘럼, FAQ가 이미 잘 구성되어 있습니다. 목표는 이 정보들을 바탕으로 명확한 비교 요약을 추가하고 언제든 손쉽게 업데이트할 수 있도록 만드는 것입니다.
HtmlDrag의 온라인 HTML 파일 편집 창구를 통해 해당 파일을 불러옵니다. 이 튜토리얼은 Upload HTML 경로를 따르며, 표는 직접 시각적 편집기로 완성합니다.
페이지가 로드되면 보존해야 할 콘텐츠와 표가 들어갈 위치를 확인합니다. 원래의 자세한 설명 문단은 그대로 둡니다. 상세 설명은 각 옵션의 깊이 있는 정보를 전달하고, 비교표는 가로축으로 차이점을 빠르게 파악하도록 돕습니다.
2단계: 실제 구매 결정에 직결되는 4~5개 비교 기준 추출
방문자가 어떤 결정을 내려야 하는지에서 시작해야 합니다. 강좌 선택 페이지라면 "내 일정과 피드백 요구에 어떤 형식이 맞는가"가 가장 유용한 질문입니다. 각 행은 모든 옵션에 대해 동일한 질문을 던지고, 단위를 일치시켜야 합니다.
Fieldnote 원본 페이지에는 이미 학습 방식, 소요 시간, 피드백, 자료 열람 기간, 일정이라는 5가지 유용한 기준이 명시되어 있습니다. 이것이 새로 추가할 표의 확실한 데이터 소스가 되므로 가격이나 혜택을 억지로 꾸며낼 필요가 없습니다.
표 디자인을 다듬기 전에 간단한 데이터 초안을 정리해 두면 누락된 정보나 불일치하는 단어를 쉽게 잡아낼 수 있습니다:
| 비교 기준 | Self-paced course (자율 학습) | Live workshop (라이브 워크숍) |
|---|---|---|
| Learning format | 녹화 강의 수강 | 소규모 실시간 그룹 세션 |
| Time commitment | 총 4시간 (자율 진행) | 회당 2시간씩 총 2회 세션 |
| Feedback | 셀프 리뷰 체크리스트 | 강사 리뷰 1회 |
| Learning access | 90일간 강의 시청 가능 | 90일간 녹화본 다시보기 가능 |
| Schedule | 언제든 즉시 시작 | 10:00 UTC (참여 전 현지 시간 확인) |
SaaS 플랜이나 서비스 패키지에서도 마찬가지입니다. "이 차이점이 고객의 선택을 바꾸는가?"를 기준으로 삼고 실질적인 제한 사항과 혜택을 담아야 합니다.
3단계: 네이티브 HTML 표 삽입 및 행·열과 셀 직접 편집
좌측 Components 패널에서 Table을 선택하여 크기 선택기를 엽니다. 2개의 플랜과 5개의 비교 항목의 경우 제목 행을 포함하여 3열 6행이 목표 구조가 됩니다.
수정이 필요한 셀만 최소 단위로 편집하기
표 안의 텍스트는 캔버스에서 더블클릭하여 바로 입력하고 수정할 수 있습니다. 열람 기간이 변경되면 해당 셀만 수정하고, 비교 항목이 늘어나면 행을 하나 추가하면 됩니다. HtmlDrag의 툴바를 통해 행과 열의 삽입/삭제, 테두리, 셀 배경색을 자유롭게 조절할 수 있습니다.
이 예시에서는 표를 FAQ 섹션 아래, 문의 섹션 위에 배치했습니다. 라이브 워크숍 제목에는 강사 피드백이 있음을 나타내는 Guided feedback 문구를 추가하고, 해당 열의 셀에 은은한 배경색을 적용하여 시각적 강조 효과를 주었습니다.
셀 강조와 하이퍼링크로 차이점 명확히 하기
배경색이 없더라도 옵션의 내용이 명확히 전달되도록 플랜 이름과 비교 라벨을 정확히 기재합니다. HTML 표 구조의 접근성과 관련하여, W3C WAI 표 튜토리얼에서 설명하듯 제목 셀(th)과 데이터 셀(td) 간의 의미적 관계가 중요하며 색상에만 의존해서는 안 됩니다.
간단한 셀에서 추가 안내가 필요할 때는 하이퍼링크를 연결합니다. 본 예시에서는 라이브 워크숍 일정 문구 중 check your time zone before joining. 텍스트를 선택하여 표준시 변환기 링크를 설정했습니다.
주변 요소를 실수로 건드리지 않도록 고정하는 '요소 잠금' 기능과 불필요한 라벨 삭제 기능도 원클릭으로 함께 활용할 수 있습니다.
4단계: 분업 협업——AI로 구조를 정리하고, 직접 편집으로 디테일 완성하기
긴 서비스 설명에서 비교 포인트를 뽑아내는 단계에서는 AI를 활용해 초안을 빠르게 정리할 수 있습니다. 그리고 문구와 수치가 확정된 후에는 에디터에서 직접 편집하는 것이 가장 정확합니다.
| 작업 내용 | 적합한 방법 | 보호 및 유지해야 할 대상 |
|---|---|---|
| 긴 설명문에서 비교 가능한 사실 추출 | AI 어시스턴트 초안 정리 | 원본 사실, 제한 조건 및 미기재 사항 |
| 라벨, 수치, 링크 수정 | 텍스트 및 링크 직접 편집 | 다른 셀 및 주변 기존 웹페이지 |
| 비교 기준(행) 또는 새 플랜(열) 추가 | 표 행·열 조작 툴바 | 헤더 대응 관계 및 기존 데이터 |
재사용 가능한 데이터 정리용 프롬프트
페이지를 편집하기 전, 아래 프롬프트를 AI에게 전달하면 전체 페이지를 망가뜨리지 않고 표에 들어갈 데이터만 깔끔하게 추출할 수 있습니다.
아래 강좌 소개글을 바탕으로 비교 초안 표를 만들어 주세요.
열: 비교 기준, 자율 학습 과정, 라이브 워크숍.
행: 학습 방식, 소요 시간, 피드백, 자료 열람 기간, 일정.
제시된 사실만 사용하고 수치, 시간대, 제한 사항을 정확히 유지하세요.
언급되지 않은 정보는 "미기재"로 표시하고 혜택이나 가격을 추측하지 마세요.
비교 데이터만 반환하고 웹페이지 전체를 재작성하거나 HTML을 생성하지 마세요.
[원본 강좌 소개글 붙여넣기]원본 소개글과 대조하여 아래 비교 초안을 검증해 주세요.
단위 불일치, 누락된 제한 조건, 근거 없는 과장 표현을 지적해 주세요.
사실적 의미를 바꾸지 않으면서 간결하고 대칭적인 문장을 제안해 주세요.
수정 사항만 반환하고 플랜 이름과 링크 대상은 그대로 유지하세요.
주변 랜딩 페이지 카피를 임의로 고치거나 과대 약속을 덧붙이지 마세요.
[원본 소개글 및 비교 초안 붙여넣기]5단계: 버전 스냅샷 저장, 최종 미리보기 및 클린 HTML 내보내기
스타일을 확인하기 전, 각 행을 가로로 읽어보며 수치가 올바른 플랜에 연결되어 있는지 확인합니다. 그런 다음 페이지 전체 문맥에서 표를 점검하여 주변 콘텐츠 및 CTA 버튼과의 여백을 확인합니다.
Fieldnote 예시에서는 Save version을 클릭하여 저장 완료 메시지를 확인한 후, 최종 미리보기를 열어 6행 3열의 완성된 표가 올바르게 배치되었음을 검증했습니다.
발행 전 셀프 체크리스트
- 사실 확인: 기간, 수강 기한, 제한 조건, 표준시가 원본 소개와 일치하는가.
- 구조: 모든 데이터가 올바른 헤더 아래 위치하며 누락된 셀이 없는가.
- 가독성: 데스크톱 및 모바일 좁은 화면에서 글자 줄바꿈, 여백, 대비가 깨지지 않는가.
- 링크: 설정된 텍스트와 목적지 URL이 정상 작동하는가.
- 내보내기: 에디터 저장 후 내보낸 HTML을 로컬에서 열어 최종 표시 상태를 재확인했는가.
파일 내보내기 준비 시 Export 창에서 Edited HTML을 선택합니다. Download HTML(다운로드) 또는 Copy HTML(코드 복사) 옵션을 사용하여 표가 반영된 최신 코드를 즉시 활용할 수 있습니다.
HTML 비교표 관련 자주 묻는 질문 (FAQ)
코딩 없이 기존 웹페이지에 비교표를 추가할 수 있나요?
네, 가능합니다. HtmlDrag와 같은 시각적 HTML 에디터를 사용하면 드래그 앤 드롭으로 표를 삽입하고 텍스트, 행과 열, 스타일, 링크를 직관적으로 편집할 수 있습니다. 사전에 비교 데이터를 정리해 두면 작업이 훨씬 수월합니다.
원래 있던 강좌나 상품 상세 설명을 지우고 교체해야 하나요?
아닙니다. 비교표는 핵심 차이점을 요약하는 역할을 하고, 원래 설명은 각 옵션의 깊이 있는 세부 사항을 다룹니다. 이번 예시에서도 기존 설명을 모두 유지한 채 하단에 비교 요약을 추가했습니다.
나중에 비교표의 행이나 열을 수정하려면 어떻게 하나요?
표 조작 툴바를 통해 해당하는 행이나 열을 간편하게 추가·삭제하고 라벨과 수치를 정돈할 수 있습니다. 단순한 문구 변경이라면 해당 셀을 더블클릭하여 바로 수정 가능합니다.
표의 셀 안에 하이퍼링크를 넣을 수 있나요?
네, 가능합니다. 링크를 연결할 텍스트를 선택하고 링크 툴바에서 목적지 URL을 입력하면 됩니다. 표준시 변환기나 세부 규정 안내 페이지로 연결하기에 적합합니다.
vibe coding 이나 Tailwind 로 제작된 페이지에서도 사용할 수 있나요?
네, 페이지의 HTML 사본을 준비하고 필요한 CSS 및 리소스가 정상 연결되어 있는지 확인한 후 에디터로 불러와 편집할 수 있습니다. 작업 완료 후 일반적인 배포 프로세스에 맞춰 배포하면 됩니다.
유용한 비교표는 명확한 질문에 답을 제시하며 이후 유지보수도 매우 간편합니다. 검증된 사실에서 출발하여 표기를 통일하고 셀과 행·열 단위로 직접 수정하세요. 시각적 HTML 드래그 앤 드롭 에디터를 사용하면 기존 웹페이지를 손상시키지 않고 강력한 비교표를 즉시 추가할 수 있습니다.