HTML 뷰어 | 브라우저 기본 양방향 동기화 HTML/CSS/JS 편집기

공식 웹사이트 직접 접속

지금 바로 툴을 온라인으로 실행하기: https://html-viewer.org/ko

## 프로젝트 소개

HTML Viewer는 브라우저 기반 경량 프론트엔드 코드 편집기이자 실시간 미리보기 실행 도구로, 일상적인 프론트엔드 코딩과 학습 과정에서 소스코드와 렌더링된 페이지 결과를 상호 대조하기 어려운 불편함을 해소합니다.

본 툴의 가장 차별화된 핵심 기능은 **코드 편집창과 미리보기 창 간 양방향 동기 강조 표시**입니다. 왼쪽 영역에서 특정 코드 부분을 클릭하면 미리보기 페이지의 일치하는 요소에 표시가 적용되고, 미리보기 화면에서 아무 콘텐츠를 선택하면 편집기가 즉시 해당 소스코드 줄로 이동해 코드를 강조합니다. 페이지 레이아웃 수정은 물론 마크업 언어가 웹페이지를 어떻게 표현하는지 학습할 때, 해당 기능을 통해 오류 수정, 요소 위치 파악 및 코드 이해 속도를 크게 높일 수 있습니다.

코드 연동 조회 외에도 미리보기 패널에서 직접 시각적 편집이 가능합니다. 렌더링된 페이지에서 텍스트 굵게 처리, 글자 크기 조절, 이미지 삽입, 목록 생성 등을 일일이 HTML 태그를 직접 입력하지 않고 진행할 수 있으며, 시스템이 표준 소스코드를 자동으로 동기 생성합니다. 이를 통해 반복적이고 기계적인 코딩 업무를 줄여 개발자와 학습자 모두의 작업 효율을 향상시킵니다.

전체 툴은 소프트웨어 다운로드나 회원가입이 전혀 필요하지 않으며, 모든 파일 구문 분석 및 미리보기 렌더링은 사용자 브라우저 내 로컬 환경에서 처리되므로 코드 내용이 외부 서버로 업로드되지 않아 코드 프라이버시가 완벽하게 보호됩니다. 또한 로컬 파일 불러오기, 원클릭 코드 정리, 구문 오류 수정, 파일 내보내기 기능을 지원해 자료 가져오기부터 최종 결과물 저장까지 완전한 폐쇄형 작업 흐름을 구축합니다.

### 적합 사용자

- HTML 코드 조각을 빠르게 디버깅하고 페이지 구조를 확인해야 하는 프론트엔드 개발자

- 웹 프론트엔드 기초를 막 시작한 학생 및 자기주도 학습자

- 간단한 정적 페이지 프로토타입 결과를 검증해야 하는 UI 디자이너

- 웹페이지 소스코드를 신속하게 조회하고 표시 오류를 찾아야 하는 테스트 인력

- 소규모 정적 웹페이지 및 간단한 웹 데모 제작 취미 개발자

## 핵심 기능 상세 설명

### 1. 코드-미리보기 양방향 강조 및 매칭 기능

- 코드 → 미리보기: HTML, CSS, JS 코드 조각을 선택하면 미리보기 영역의 해당 DOM 노드에 테두리로 강조 표시됨

- 미리보기 → 코드: 미리보기 페이지의 텍스트, 이미지 또는 블록 요소를 선택하면 편집기가 정확한 소스코드 위치로 자동 이동하고 해당 코드 구간을 강조함

- 대량의 코드를 연속으로 작성해야 할 경우 원클릭으로 연동 동기화를 꺼서 순수 편집 모드로 전환해 방해 없이 작업 가능

### 2. 미리보기 영역 WYSIWYG(보이는 그대로 편집) 시각 편집

미리보기 영역 상단의 시각 편집 버튼을 활성화하면 서식 툴바가 호출되며, 렌더링된 페이지에서 직접 아래 작업을 수행할 수 있습니다:

- 텍스트 서식: 굵게, 기울임, 밑줄, 글자 크기 수정, 문단 정렬

- 페이지 요소: 이미지 자료 삽입, 순서 있는 목록 및 순서 없는 목록 생성

- 모든 편집 행위는 왼쪽 편집 패널의 소스코드를 실시간으로 자동 생성 및 갱신합니다.

### 3. 실용적인 파일 및 코드 보조 도구

✅ 기기 내 로컬 HTML/CSS/JS 파일을 편집기로 불러오기

✅ 어지러운 코드의 들여쓰기와 서식을 통일하는 원클릭 코드 정리

✅ HTML 구문 오류 감지 및 지능형 원클릭 수정

✅ 모든 코드 블록 펼치기/접기로 중첩된 긴 문서 열람 편의성 확보

✅ 수정 완료된 소스 파일을 로컬 저장소로 내보내 저장 및 전달

✅ 다크 모드 전환으로 장시간 편집 시 눈의 피로도 감소

✅ 미리보기 페이지 또는 소스코드 페이지를 별도 새 브라우저 탭으로 열기