소셜 미디어를 오래 스크롤하다 보면 터무니없는 대화 내용이나 믿기 어려운 텍스트 스크린샷을 종종 접하게 됩니다. 사실 여러분의 직감은 맞습니다. 대부분 조작된 가짜입니다.
의외로 모르시는 분들이 많은데, 웹사이트의 텍스트를 수정하고 스크린샷을 찍는 일은 생각보다 훨씬 간단합니다. 고급 이미지 편집 프로그램조차 필요하지 않습니다. 이 글에서는 구글 크롬을 활용해 웹사이트 텍스트를 변경하는 방법을 소개합니다.
웹사이트 텍스트 편집하는 방법
먼저 편집하고 싶은 페이지를 브라우저로 불러옵니다. 여기서는 크롬을 기준으로 설명하지만, 다른 브라우저에서도 과정은 거의 동일합니다.
페이지가 열리면 수정하려는 텍스트 위에서 마우스 오른쪽 버튼을 클릭하고 검사(Inspect)(브라우저에 따라 요소 검사(Inspect Element)로 표시됨)를 선택합니다. 그러면 크롬 개발자 도구가 열리며 Elements 탭이 나타납니다. F12 키로 텍스트를 변경하는 방법이 궁금하다면, F12 키를 눌러도 같은 패널을 열 수 있습니다.
해당 패널에는 현재 방문 중인 페이지의 HTML 코드가 표시됩니다. HTML이 낯설다면 기본 입문 자료를 먼저 참고하는 것도 좋습니다.
선택한 텍스트에 따라 <p>, <div> 등의 태그 안에 내용이 담겨 있는 경우가 대부분입니다. 태그 옆의 화살표를 클릭해 섹션을 펼치면 전체 텍스트를 확인할 수 있습니다.
이제 변경하고 싶은 텍스트 블록을 더블클릭하거나 마우스 오른쪽 버튼을 눌러 Edit text(텍스트 편집)를 선택합니다. 다른 곳을 클릭하거나 Enter 키를 누르면 수정한 내용이 바로 적용됩니다.
이 과정은 원하는 만큼 반복할 수 있습니다. Elements 패널에서 태그 위에 마우스를 올리면 페이지에서 해당 텍스트가 하이라이트되어 어떤 부분인지 쉽게 파악할 수 있습니다. 특정 블록 전체를 삭제하고 싶다면 마우스 오른쪽 버튼을 클릭한 후 Delete element를 선택하면 됩니다.
변경 사항은 페이지를 새로고침하기 전까지 유지됩니다. 스크린샷을 찍어 재미있게 편집한 결과물을 자유롭게 공유해 보세요.
디자인 모드로 웹사이트 손쉽게 편집하기
웹사이트 텍스트 수정을 자주 한다면 크롬의 디자인 모드(Design Mode)를 꼭 알아두세요. 이 기능을 사용하면 HTML 코드를 일일이 찾아볼 필요 없이, 페이지의 텍스트를 클릭하는 즉시 바로 편집할 수 있습니다.
사용 방법은 간단합니다. F12 키를 눌러 개발자 도구를 연 뒤 Console 탭으로 이동합니다. 그다음 콘솔 입력창(하단 경고 메시지 옆의 화살표 위치)에 아래 명령어를 입력하고 Enter 키를 누르면 됩니다:
document.designMode = "on"명령어를 실행한 후에는 페이지의 아무 텍스트나 클릭하고 바로 입력하여 자유롭게 수정할 수 있습니다.
디자인 모드는 현재 열려 있는 탭에만 적용되며, 새로 사용할 때마다 명령어를 다시 입력해야 합니다. 하지만 한 페이지에서 여러 군데를 수정해야 할 때는 이 방법이 훨씬 효율적입니다.
웹사이트 텍스트 변경, 이제 어렵지 않습니다
브라우저가 웹페이지를 한 번 불러오면, 그 사본은 사용자 기기에 저장된 것이므로 자유롭게 수정할 수 있습니다. 바로 이 때문에 웹사이트에 표시된 텍스트를 변경하는 것이如此 쉬운 것입니다. 이제 웹사이트 텍스트 편집 방법을 익혔으니 재미있게 활용해 보세요!
이 글이 유용했다면, 친구들에게 장난칠 수 있는 재미있는 컴퓨터 관련 실용적 농담들도 함께 확인해 보시기 바랍니다.