최근 필자는 리눅스 환경에서 Microsoft Office 온라인 스위트를 직접 테스트해 보았습니다. 생각보다 완성도가 높고 사용하기 편리한 이 제품군 덕분에, 굳이 윈도우로 전환하지 않아도 가장 널리 쓰이는 사실상의 표준 오피스 프로그램들을 여러분이 선호하는 리눅스 배포판에서 그대로 활용할 수 있다는 점을 확인했습니다. 비용 절감과 업무 연속성 측면에서 모두 의미 있는 결과입니다.
다만 한 가지 거슬리는 부분이 있었습니다. 바로 Word 온라인 버전의 문서 배경색이 회색이라는 점입니다. 정확히 말하면 배경은 '투명(transparent)'으로 설정되어 있지만, 그 결과로 드러나는 회색조가 눈에 상당한 부담을 줍니다. 그런데 UI에는 이 색상을 바꿀 수 있는 옵션이나 버튼이 없습니다. 그래서 이번 글에서는 온라인에서 작업하는 동안 일시적으로나마 문서 배경색을 원하는 색으로 바꾸는 방법을 소개하겠습니다.
결국 전부 HTML입니다
클라우드 앱을 구동하는 소프트웨어가 무엇이든, 최종적으로 브라우저는 화면의 내용을 HTML 페이지로 렌더링합니다. 물론 동적 요소와 스크립트도 함께 작동하지만, 이들은 서로 다른 HTML 조각들을 연결하고 움직여 주는 역할일 뿐입니다.
즉, 브라우저에서 보이는 모든 것은 div, table, p 같은 HTML 요소로 구성되어 있으며, 각 요소는 색상, 배경색, 글자 굵기, 테두리, 여백 같은 속성과 스타일을 가지고 있습니다. 이 값들을 바꾸면 화면에 표시되는 객체의 모양도 함께 달라집니다. 모든 최신 브라우저는 마우스 오른쪽 클릭 후 '요소 검사(Inspect)'를 선택하면 표시 중인 HTML 페이지를 조작할 수 있습니다. 정확한 메뉴 명칭은 브라우저마다 조금씩 다를 수 있습니다. 요약하면, HTML/CSS 스타일을 바꾸면 페이지의 생김새가 바뀐다는 것입니다. 우리가 하려는 것이 바로 이것입니다. 그런데 문제가 하나 있습니다.
오른쪽 클릭이 되지 않습니다!
일부 인터랙티브 애플리케이션은 자바스크립트를 적극적으로 활용해 특정 동작이나 클릭을 차단합니다. 모바일 앱에서 흔히 볼 수 있는 현상이지만, 데스크톱에서 다양한 웹사이트를 열 때도 종종 마주하게 됩니다. 이 경우 기본 오른쪽 클릭 메뉴 대신 해당 사이트가 제공하는 메뉴만 표시됩니다.
Microsoft Office Online 역시 오른쪽 클릭을 자체 컨텍스트 메뉴에 할당해 두었습니다. 이 메뉴를 통해 텍스트 복사·붙여넣기, 언어 변경, 번역, 새 메모 추가, 다양한 스타일 편집 등을 할 수 있습니다.
문제는 이 때문에 HTML 요소를 검사하려면 반드시 필요한 브라우저 기본 오른쪽 클릭 메뉴에 접근할 수 없다는 점입니다. 따라서 해결책이 필요합니다. 원론적으로는 Noscript 같은 확장 프로그램을 쓰거나 브라우저 설정을 통해 자바스크립트를 끄면 되지만, 그러면 Microsoft Office Online 페이지의 기능 자체가 심각하게 제한됩니다. 좀 더 부드럽고 덜 침습적인 방법이 필요합니다.
오른쪽 클릭 동작을 우회하는 또 다른 방법은 브라우저 주소창에 자바스크립트 명령을 직접 입력하는 것입니다. 잠시는 효과가 있지만, 페이지가 스스로 새로 고침되면 설정이 무효화됩니다. 궁금하시다면 주소창에 다음 중 하나를 입력해 보세요.
javascript:void(document.oncontextmenu=null);
javascript:void(window.oncontextmenu=null);
Chrome과 Firefox용으로 오른쪽 클릭 기능을 복원해 주는 확장 프로그램도 여럿 있습니다. 그중 하나가 'Enable Right Click and Copy'입니다. 이 확장 프로그램은 설치 후 재시작이 필요 없어 설정과 사용이 매우 간편합니다.
오른쪽 클릭으로 색상 속성 변경하기
이제 브라우저 기본 오른쪽 클릭 메뉴를 사용할 수 있게 되었으니, 페이지 배경 요소를 검사해 보겠습니다. 회색 문서 영역 위에 마우스 커서를 올려놓고 오른쪽 클릭한 뒤, 간단한 요소 조작을 시작해 봅시다.
이 다음 단계는 익숙하지 않은 분들에게 다소 복잡해 보일 수 있습니다. '검사'를 클릭하면 페이지 내부를 디버깅하고 들여다볼 수 있는 복잡한 개발자 도구가 열립니다. 네트워크와 메모리 사용량, 성능, 오류 메시지 등 평소 당연하게 여겼던 세부 정보들과 함께 HTML 코드도 확인할 수 있습니다. 클릭한 위치가 왼쪽 창에서 하이라이트되고, 오른쪽에는 선택된 요소에 적용된 CSS 규칙들이 나열됩니다.
이 경우 페이지 배경은 OutlineContent 클래스를 가진 HTML div로 정의되어 있으며, 배경색은 transparent로 설정되어 있습니다. 오른쪽 창에서 div.OutlineContent 부분으로 커서를 옮기고, background-color: transparent 항목을 클릭한 뒤 transparent라는 단어를 white 또는 다른 원하는 색상으로 바꾸면 됩니다. Enter 키를 누르는 즉시 색상이 변경됩니다.
일시적인 해결책입니다
반드시 짚고 넘어갈 부분이 있습니다. 이 방법은 영구적인 해결책이 아니라는 점입니다. F5로 페이지를 새로 고치면 스타일 수정은 사라집니다. 문서를 내려받아 LibreOffice나 Microsoft Office에서 열면 이번 조정과 무관하게 표준 흰색 배경으로 표시됩니다. 즉, 이것은 외관상의 변경일 뿐이며 여러분의 브라우저에만 적용됩니다. 페이지가 로드된 이후 서버 쪽 작업은 이미 끝난 상태이므로, 페이지 전체를 다시 로드하기 전까지는 임시로 지정한 색상이 유지됩니다. 페이지가 새로 렌더링되는 순간 이 수정 사항은 사라집니다.
이는 Microsoft Office Online에만 국한된 이야기가 아닙니다. 어떤 웹사이트에서든 같은 방식으로 변경할 수 있으며, 특정 레이아웃이나 색상이 마음에 들지 않을 때 특히 유용합니다. 사이트를 사용해야 하는데 표현 계층이 불편할 때 실용적인 대안이 됩니다.
더 이상 이 조정이 필요 없거나 앱 고유의 오른쪽 클릭 메뉴를 되돌리고 싶다면, 브라우저 확장 프로그램을 비활성화하고 페이지를 새로 고치면 됩니다. 처음 상태로 그대로 돌아갑니다. 간단하고, 완전히 되돌릴 수 있으며, 침습적이지 않습니다. 게다가 눈의 피로가 덜해져 하루에 몇 시간씩 더 쾌적하게 작업할 수 있을지도 모릅니다.
마무리
이 짧은 튜토리얼은 두 가지 중요한 교훈을 담고 있습니다. 첫째, HTML의 기본 원리, 페이지가 로드되고 렌더링되는 방식, 그리고 궁극적으로 웹 앱이 무엇인지에 대한 개념입니다. 둘째, Microsoft Office Online의 기본 투명 배경 대신 눈에 편안한 흰색 배경을 적용해 문서와 오랜 시간 쾌적하게 작업할 수 있도록 외관을 손쉽게 조정하는 우아한 방법입니다.
언젠가 마이크로소프트가 데스크톱 버전처럼 UI 안에서 배경색을 직접 변경할 수 있는 옵션을 제공해 줄지도 모릅니다. 그날이 오기 전까지는 위에서 소개한 여러 방법으로 색상을 입맛대로 조정할 수 있습니다. 눈 건강에 관심이 있다면, 사소해 보이지만 중요한 이 작은 팁을 꼭 고려해 보시기 바랍니다. 오늘 새로운 것을 배우셨기를 바랍니다. 즐거운 타이핑 되세요.
그럼, 이만.