개발자 도구 · HTML WYSIWYG 편집기
WYSIWYG의 짧은 역사: Xerox PARC의 Bravo에서 브라우저 편집기까지
· 배경
HTML 내용 편집 가능 개발자 워크플로
1970년대 연구 시스템에서 전자 출판 및 웹 페이지 빌더를 거쳐 모든 브라우저의 콘텐츠 편집 가능한 편집기에 이르기까지 보이는 대로 얻는 편집을 추적합니다.
WYSIWYG 이전에는 블라인드 형식으로 포맷했으며 마크업 및 인쇄 작업 흐름으로 열었으며 시각적 편집이 혁신적인 이유를 설명했습니다.
작성자는 시각적 편집 전에 제어 코드나 마크업을 작성하고 형식화된 결과를 나중에 보는 경우가 많습니다. 지연으로 인해 레이아웃이 반복되었습니다. 지침을 변경하고, 다시 렌더링하고, 비교하고, 반복했습니다. 작성 중에 서식을 표시하면 해당 루프가 단축되고 비전문가가 문서 소프트웨어에서 기대하는 내용이 변경되었습니다.
이 기사에서는 저장소가 독립적으로 소스를 제공하지 않는 정확한 이름과 날짜를 의도적으로 피합니다. 그 목적은 완전한 역사적 연대기를 인증하는 것이 아니라 브라우저 편집 화면 뒤에 있는 디자인 계보를 설명하는 것입니다. 명명된 마일스톤은 실제 제품 기록으로 게시되기 전에 보관 참조가 필요합니다.
초기 시각적 문서 시스템이 아이디어를 확립했습니다. 이 저장소는 Bravo 연대기를 제공하지 않습니다.
Xerox PARC와 관련된 연구 시스템은 WYSIWYG 역사와 Bravo라는 이름의 통합 문서에서 널리 논의됩니다. 여기에 제공된 저장소 소스는 날짜, 기능 세트 또는 동시대 저장소에 대한 우선순위를 확인하지 않으므로 해당 세부 정보는 사실로 해석하는 대신 생략됩니다.
방어 가능한 개념적 이정표는 형식화된 문서를 직접 조작하는 비트맵 디스플레이입니다. 화면은 단순히 명령을 입력하는 장소가 아니라 출력에 대한 능동적인 근사치가 되었습니다. 눈에 보이는 서식과 기본 구조 사이의 관계는 여전히 현대적인 편집기 장단점을 정의합니다.
시각적 편집이 소비자 데스크탑에 도달했습니다. 정확한 제품 이정표에는 외부 보관 소스가 필요합니다.
통합 문서는 다음으로 Xerox Star, MacWrite 및 데스크탑 출판을 명명합니다. 정확한 순서와 영향을 미치려면 이 코드베이스 이상의 소스가 필요합니다. 발명이 없었다고 말할 수 있는 것은 그래픽 개인용 컴퓨팅이 시각적 구성을 훨씬 더 많은 청중에게 친숙하게 만들고 글꼴, 간격 및 페이지 레이아웃을 통한 편집을 연결했다는 것입니다.
해당 데스크탑 모델은 안정적인 페이지와 제어된 출력 장치에 대한 기대를 높였습니다. 하나의 HTML 조각이 다양한 스타일시트, 너비 및 사용자 기본 설정을 충족할 수 있기 때문에 나중에 웹 콘텐츠는 약속을 복잡하게 만들었습니다. 출판이 종이 같은 페이지에서 반응형 문서로 옮겨가면서 "당신이 보는 것"이라는 문구는 덜 문자 그대로 사용되었습니다.
1990년대 페이지 빌더는 시각적 웹 작성 및 마크업 절충안을 노출했습니다.
시각적 웹 페이지 빌더는 HTML에 직접 구성을 가져오고 생성된 래퍼 및 프리젠테이션 마크업과 연결되었습니다. 다시 말하지만 통합 문서에서는 자세한 평판이나 타임라인에 대한 저장소 증거 없이 특정 제품의 이름을 지정합니다. 이 기사에서는 지속적인 엔지니어링 균형에 대한 요점을 한정합니다.
시각적 도구는 제스처를 트리와 문자열로 변환해야 합니다. 즉각적인 외관을 위해 최적화된 경우 나중에 재설계할 수 없는 로컬 프레젠테이션을 생성할 수 있습니다. 출력을 제한하면 소스에 대한 시각적 충실도가 감소합니다. ToolAcre는 제한된 의미 하위 집합을 선택하고 필터링된 소스를 표시합니다.
편집이 페이지로 이동 — contenteditable이 어떻게 WYSIWYG를 브라우저와 CMS 플랫폼에 도입했는지 설명합니다.
브라우저 contenteditable은 편집 호스트를 일반 페이지 요소로 이동했습니다. 애플리케이션 코드가 컨트롤을 제공하고 innerHTML을 읽는 동안 브라우저는 캐럿, 선택, 입력 및 삭제를 관리할 수 있습니다. ToolAcre는 해당 모델을 따르며 현재 더 이상 사용되지 않는 execCommand를 통해 도구 모음 작업을 보냅니다.
그런 다음 애플리케이션은 붙여넣기 차단, 소스 삭제, 제거 보고서, 문자 및 단어 수, 일반 텍스트 추출, 복사, 다운로드 및 비활성 미리보기 등 기본 편집 호스트가 제공하지 않는 경계를 추가합니다. 이 레이어링은 contenteditable만으로는 완전한 제품이 아닌 이유를 설명합니다.
반대 움직임은 소스 제품 타임라인 없이 제한된 소스와 구조화된 편집을 선호합니다.
경량 마크업과 구조화된 편집기는 동일한 출력 품질 문제에 대해 다르게 대답합니다. 작성자가 표현하거나 저장할 수 있는 내용을 제한한 다음 제어된 결과를 렌더링합니다. 통합 문서는 역사적인 반운동을 요청하지만 여기에는 날짜, 입양 주장 또는 명명된 인과 관계를 뒷받침하는 출처가 없습니다.
유용한 비교는 아키텍처입니다. 제한된 소스는 쉽게 비교하고 변환할 수 있으며, 시각적 표면은 서식 지정에 대한 장벽을 낮춰줍니다. ToolAcre는 시각적 제도와 가시적 HTML을 결합하지만 협업, 문서 모델 또는 결정적 브라우저 간 명령을 제공하지 않습니다.
여기에 포함되지 않는 내용 — 웹에 미치는 영향을 넘어서는 제품별 타임라인 또는 데스크톱 게시
이 기사에서는 제품별 타임라인을 제공하지 않으며, 발명품에 대한 정보를 제공하고, 연구원을 인용하거나 광범위한 영향을 미치는 전자 출판을 다루지 않습니다. 아카이브 소스가 제공되지 않았기 때문에 이러한 생략은 의도적인 것입니다. 편집기 구현은 기록 우선순위가 아닌 현재 동작을 확인할 수 있습니다.
또한 시각적 편집기가 반드시 잘못된 마크업을 생성한다고 주장하지도 않습니다. 출력 품질은 편집 모델 및 정책에 따라 다릅니다. 여기서 별칭과 허용 목록은 브라우저 변경 후 변형을 줄이는 반면, 소스 모드에서는 작성자가 남아 있는 내용을 검토할 수 있습니다. 다른 편집자는 다른 구조를 선택할 수 있습니다.
요점: 오래된 긴장은 여전히 디자인 문제입니다. 시각적 편리함과 깔끔한 출력을 요약하고 ToolAcre의 HTML WYSIWYG 편집기가 편집으로 생성된 마크업을 볼 수 있도록 하여 이를 해결하는 방법을 요약합니다.
오래된 긴장감은 살아남습니다. 직접적인 시각적 제어는 작성자에게 도움이 되고, 내구성 있는 구조화된 출력은 시스템과 향후 유지 관리 담당자에게 도움이 됩니다. 신뢰할 수 있는 편집자는 해당 번역을 표시하고 렌더링이 브라우저 및 대상 컨텍스트에 따라 달라지는 것을 인정합니다.
ToolAcre는 하나의 작은 현대적 예입니다. 일회용 메모의 형식을 지정하고, 필터링된 HTML을 검사하고, 미리보기를 소스와 비교하세요. 이 연습은 소스가 없는 역사적 개요를 잘못된 정밀도로 바꾸거나 이 구현이 모든 WYSIWYG 손상을 해결한다고 주장하지 않고 계보를 보여줍니다.