웹 페이지를 자유자재로 편집하는 방법: 브라우저 내장 기능 활용
웹 페이지는 단순한 문서처럼 보이지만, 웹 브라우저를 통해 우리 눈에 보이는 형태로 표현될 뿐입니다. 만약 우리가 웹 페이지를 직접 수정할 수 있다면 어떨까요? 놀랍게도 브라우저 확장 프로그램 없이, 모든 최신 브라우저에 이미 내장된 기능으로 가능합니다.
이 마법 같은 기능은 바로 웹 브라우저의 JavaScript 콘솔에서 활성화할 수 있는 ‘document.designMode’ 입니다. 최근 토멕 술코프스키(@sulco) 님이 트위터에서 이 기능을 언급하여 많은 이들에게 알려졌습니다. 정말 유용한 기능이라 여러분과 공유하고 싶습니다.
`document.designMode`를 처음 접했을 때의 그 놀라움 pic.twitter.com/bxA1otzCjN
— Tomek Sułkowski (@sulco) 2019년 9월 27일
이 기능을 사용하면 인쇄하기 전에 웹 페이지를 깔끔하게 정리하거나, 변경 사항이 어떻게 보이는지 미리 테스트해 볼 수 있습니다. 또한 친구들에게 재미있는 장난을 칠 수도 있습니다. 마치 워드 문서를 편집하듯이 쉽게 웹 페이지를 수정할 수 있으며, 복잡한 HTML 코드를 건드릴 필요도 없습니다.
이제 이 기능을 활성화하는 방법을 알아볼까요? 먼저 원하는 웹 페이지를 열고 개발자 콘솔을 실행합니다. 구글 크롬(Chrome)의 경우, 메뉴 > 도구 더보기 > 개발자 도구를 선택하거나, 단축키 Ctrl+Shift+i를 누르면 됩니다.
크롬을 예시로 들었지만, 이 기능은 다른 최신 브라우저에서도 동일하게 작동합니다. 각 브라우저에서 콘솔을 여는 방법은 아래와 같습니다.
파이어폭스(Mozilla Firefox): 메뉴 > 웹 개발자 > 웹 콘솔 선택 또는 Ctrl+Shift+K 단축키 사용.
애플 사파리(Apple Safari): Safari > 환경설정 > 고급 메뉴에서 “메뉴 막대에 개발자용 메뉴 보기”를 활성화한 후 개발 > JavaScript 콘솔 보기를 클릭.
마이크로소프트 엣지(Microsoft Edge): 메뉴 > 도구 더보기 > 개발자 도구 선택 또는 F12 키를 누른 후 “콘솔” 탭을 선택합니다.
개발자 도구 패널 상단의 “콘솔” 탭을 클릭하고, 다음 명령어를 입력한 후 엔터 키를 누릅니다.
document.designMode="on"
이제 콘솔 창을 닫고 웹 페이지를 마치 편집 가능한 문서처럼 수정할 수 있습니다. 원하는 곳을 클릭하여 커서를 이동하고 텍스트를 입력하거나, 백스페이스 또는 Delete 키를 사용하여 텍스트, 이미지 등 다양한 요소를 삭제할 수 있습니다.
이 방법은 웹 페이지가 브라우저에 표시되는 방식을 변경하는 것이며, 페이지를 새로 고침하면 원본 상태로 돌아갑니다. 또한 다른 웹 페이지나 탭으로 이동하면 편집 모드가 해제되어 콘솔을 다시 열고 명령어를 입력해야 합니다.
디자인 모드를 비활성화하고 싶다면, 콘솔 창에서 다음 명령어를 입력하면 됩니다.
document.designMode="off"
웹 페이지는 더 이상 편집할 수 없지만, 변경 사항은 페이지를 새로 고칠 때까지 유지됩니다.
