오페라 브라우저의 활용 팁(I) 소스보기로 편집까지

오페라 브라우저(Opera Browser)는 다양하고 재미있는 기능을 가지고 있다. 물론 내가 좋아하는 이유도 그중 마음에 드는 기능이 있기 때문이다. 그중 깜찍한 기능이 있는데 편집기능이다.

오페라는 소스보기로 변경을 저장한다

오페라(Opera) 웹브라우저는 어느 버전 부터 인지 잘 기억하지 못하지만 소스보기 창이 탭으로 열리면서 "저장"과 "변경적용" 버튼이 생겼다. 네트위크상의 페이지를 볼 때는 별로 쓸일이 없겠지만 컴퓨터 상의 HTML 문서를 열어 두고 소스보기 창에서 수정을 할 수 있다. 그런 다음 "변경 저장"을 하면 열어둔 HTML문서도 변경된 상태로 갱신된다. 인터넷상의 HTML파일의 소스보기를 통해서 "변경 적용"을 하면 오페라 브라우저에서만이 느낄 수 있는 매직을 경험할 수 있다. 즉 인터넷 문서가 메모리상에서 변경되어 표시된다.

그럼 화면을 보면서 설명해 봅시다. 먼저 검색 엔진을 써서 보통의 웹페이지를 열어 봅니다.

 

검색결과의 블로그 페이지를 보면 한때는 제 블로그 글이 상단에 다수 차지했는데, 이제는 첫페이지의 하단에 위치하고 있군요.  오른쪽에  보면 검색 추천 블로그라는 글상자가 있는데 여기에 제 블로그가 없지만 "소스보기"와 "변경저장"의 기능을 써서 한번 랭킹 조작을 해봅니다. (이 조작은 설명을 위한 것일뿐 검색 엔진사의 내용이 바뀌는 것은 아닙니다. )

  
원래 소스는 이렇게 생겼는데 상위 5개 랭킹을 전부 글자 치환을 해서 변경 저장 버튼을 누르면 어떻게 될까요?

보시다 시피 이렇게 HTML내용이 변경되어 브라우저 상에 표시됩니다.(이것은 이미지 편집이 아니라 브라우저의 표시가 직접 바뀐 것을 화면 갈무리 한 것입니다.)

이런 기능을 어디에 쓰는고?

이런 기능을 어디에 쓰려고 오페라사는 제공했을까? 지금까지 써본 바로는 스타일시트(CSS)를 바꿀 때 편리했다. 블로그의 스타일을 바꾸려면 CSS를 바꿔주어야 하는데 바꿀 때마다 미리보기를 실행하는 것도 번거롭고 시간이 많이 든다. 그럴 때 블로그 페이지를 컴퓨터에 저장해 둔다. 오페라에서 열어 두고 소스보기를 하면 소스, 또는 CSS를 열수 있다. 테스트하려는 부분을 수정하고 변경저장을 하면 순식간에 바뀐다. 몇번의 시행착오를 거치면 마음에 드는 스타일이 얻어진다. 최종 결과를 업로드 하든지 복사해서 붙이면 오프라인 상태에서도 손쉽게 가능하다.

또한 HTML작성의 디버깅이 손쉽게 가능하다. 서기 직원이 작성한 HTML파일이 원하는 대로 표시되지 않는다고 하여 임시로 공개된 파일을 보면서 수정해 줄때 다른 브라우저는 소스를 아무리 고쳐도 제대로 고쳐졌는지를 확인하려면 서버에 올려서 확인할 수 밖에 없지만 오페라 브라우저를 통해서 보면 서버의 파일이 바뀌지 않고 충분히 PC에서 확인을 해보고 최종본을 서버에 올릴 수 있다.

이런 방법을 읽고 있는 독자중에는 자바스크립트, CSS의 디버깅에 아이디어가 떠오를 것이다. 자바스크립트를 디버깅하기 위해서 서버에 올리지 않고도 로컬상에서 충분히 디버깅할 수 있는 것이다. 

관련된 내 블로그:

[경험과 리뷰] - 내가 오페라 인터넷 브라우저를 쓰는 이유

관련 블로그에 관하여

내가 오페라 브라우저를 거의 10년 가까이 쓰고 있다고 생각하지만 블로그를 시작한 것이 얼마 안되어 글을 올리지 못했다. 그런데 오페라 인터넷 브라우저에 관한 상세한 글을 공개한 블로그를 발견하고서 매우 감탄하였다. 앞으로도 나만의 글을 공개할 생각이지만 굳이 다른 블로거에 의해 공개된 글을 중복하여 올리는 것은 무의미하기 때문에 이하에 참조를 메모해둔다. 그리고 오페라관련 팁등의 웹자료는 [내가 오페라 인터넷 브라우저를 쓰는 이유]의 댓글에 통합해 두고  있다.

관련 URL: http://mihuwang.tistory.com/176 --- 오페라의 세세한 기능을 연재하고 있는 글