블로그에 정성스럽게 글을 작성하시면서 에디터 화면이 유난히 좁게 느껴져 답답하셨던 적 있으실 거예요. 예전에는 넓은 화면에서 시원하게 콘텐츠를 편집할 수 있었지만, 어느 순간부터 가로 860px 정도로 고정된 편집창이 적용되면서 많은 분들이 아쉬움을 느끼고 계시죠. 이러한 변화는 티스토리 글쓰기 에디터의 UI 개편과 반응형 웹 디자인을 다듬는 과정에서 스마트폰이나 태블릿 같은 모바일 환경을 우선적으로 고려했기 때문에 생긴 현상으로 보여요.
하지만 우리가 실제로 공들여 꾸며놓은 블로그 본문은 보통 880px 이상으로 넓게 설정해 두는 경우가 많잖아요. 그래서 티스토리 에디터 가로폭은 좁은데 실제 방문자에게 보이는 화면은 넓다 보니, 글을 쓰면서 다양한 기기에서 내 글이 어떻게 보일지 일일이 확인하는 과정이 꽤 번거로울 수밖에 없습니다.
그래서 오늘은 블로그 글쓰기 화면 넓히기를 통해 에디터의 가로 사이즈를 내가 원하는 대로 조절할 수 있는 편안한 방법들을 차근차근 나누어 보려고 해요. 누구나 손쉽게 활용할 수 있는 간단한 프로그램부터 브라우저 설정까지 다양하게 준비했으니, 이 글을 읽고 나면 훨씬 더 쾌적한 환경에서 글을 쓰실 수 있을 거예요.
글쓰기 에디터는 좁고 본문은 넓다? 가로폭 불일치로 인한 불편함들
지금처럼 편집창이 좁은 상태로 글을 계속 작성하게 되면 생각보다 여러 가지 불편한 점들이 생기게 됩니다.
- 글을 작성할 때 시각적인 정확성이 떨어지게 됩니다.
- 모바일과 PC를 오가는 반응형 콘텐츠를 설계하기가 까다로워집니다.
- 정성껏 만든 표나 이미지, 그리고 광고 배치가 틀어지는 등 전반적인 작업 효율이 떨어지는 원인이 되기도 해요.
평소에 티스토리 화면 넓게 쓰는 법이나 가로 1100px 콘텐츠를 좁은 에디터에서 편집할 때 생기는 문제로 고민하셨던 분들을 위해, 실제 제가 겪었던 사례들을 바탕으로 왜 이런 문제가 생기는지, 그리고 어떻게 해결하면 좋을지 자세히 이야기해 볼게요.
에디터 화면이 좁을 때 구체적으로 어떤 점이 힘들까요?
1. 내가 보는 화면과 방문자가 보는 화면이 다릅니다
- 에디터 안에서는 글씨가 길어서 줄바꿈이 생겼는데, 막상 글을 발행하고 나면 PC 화면에서는 한 줄로 길게 나와서 당황스러운 경우가 있어요.
- 2단으로 나누어진 레이아웃이나 이미지 좌우 정렬, HTML 표 같은 요소들은 좁은 화면에서 맞추다 보면 나중에 넓은 화면에서 보았을 때 레이아웃이 어긋나거나 깨져 보이는 현상이 자주 발생하게 됩니다.
- 이런 미리보기와 실제 화면의 차이는 결국 방문자에게 보여주고 싶은 디자인을 망치는 원인이 되기도 해요.
2. 이미지와 표 사이즈를 예쁘게 맞추기가 어렵습니다
- 해상도가 큰 이미지를 넣으면 좁은 에디터 안에서는 강제로 작게 줄여서 보이기 때문에, 정확한 여백이나 배치를 가늠하기가 참 어렵습니다.
- 표를 만들 때도 셀의 너비나 글자 정렬이 실제와 다르게 보여서 결과물이 삐뚤어지거나 답답하게 보일 때가 많아요.
3. 마우스를 계속 움직여야 해서 눈과 손이 피로합니다
- 내용이 좌우로 넓게 들어가는 코드를 넣거나 가로형 콘텐츠를 작성할 때, 화면이 좁다 보니 수시로 좌우 스크롤을 움직여가며 확인해야 하는 번거로움이 있습니다.
- 코드블럭을 삽입하거나 버튼 위치를 잡을 때마다 스크롤을 하다 보면 작업 피로도가 금방 쌓이게 되죠.
4. 불필요한 엔터(줄바꿈)를 많이 치게 됩니다
- 화면이 좁아서 글자가 자꾸 다음 줄로 넘어가다 보니, 보기 좋게 만들려고 나도 모르게 엔터키나 스페이스바를 눌러 여백을 만들게 되는데요.
- 이렇게 불필요하게 들어간 줄바꿈 태그들은 글의 가독성을 해칠 뿐만 아니라, 장기적으로는 검색 엔진 최적화(SEO)에도 좋지 않은 영향을 줄 수 있어요.
결국 에디터 가로폭 불일치는 단순히 눈으로 보기에 답답한 것을 넘어, 글을 작성하는 분들의 수고를 늘리고 예상치 못한 오류를 만드는 원인이 됩니다. 디자인을 신경 쓰시거나 HTML을 꼼꼼하게 다루시는 분들일수록 이 좁은 화면이 작업의 흐름을 끊는 방해물이 될 수 있어요.
답답한 화면을 시원하게! 대표적인 가로폭 해결 방법 정리
그렇다면 이 문제를 어떻게 해결할 수 있을까요? 현재 활용해 볼 수 있는 몇 가지 유용한 방법들을 비교해 보았습니다.
| 해결 방법 | 간단한 설명 | 참고하실 점 (장단점) |
|---|---|---|
| 브라우저 확장 프로그램 활용 (Stylus) | 글쓰기 화면 폭을 내가 원하는 만큼 강제로 늘려줍니다. | 한 번 설정하면 계속 유지되어서 가장 권장해 드리는 방법입니다. |
| 외부 에디터에서 글 쓰고 붙여넣기 | VS Code나 노션 등 편한 곳에서 쓰고 가져옵니다. | 폭 제한 없이 편하지만, 복사할 때 태그가 깨질 수 있어 주의가 필요해요. |
| 개발자 도구(F12)로 직접 수정하기 | 브라우저의 코드를 직접 건드려 폭을 넓힙니다. | 새로고침을 하면 원래대로 돌아가서 매번 다시 해야 해요. |
참고로 티스토리 자체 설정 메뉴에는 에디터 크기를 조절하는 기능이 없기 때문에, 이렇게 외부의 도움을 살짝 받아야 한답니다.
1. Stylus 확장 프로그램으로 에디터 폭 시원하게 늘리기
가장 먼저 소개해 드릴 방법은 평소 쓰시는 크롬이나 파이어폭스 브라우저에 Stylus 확장 프로그램을 설치하는 것입니다. 이 프로그램을 설치한 뒤 아주 간단한 코드를 하나 넣어주면, 블로그 글쓰기 화면 크기를 실제 내 블로그 본문처럼 넓게 펴서 볼 수 있어요. 눈이 한결 편안해지는 것을 느끼실 수 있을 거예요.
적용해 주실 코드는 아래와 같습니다.
/* 티스토리 글쓰기 화면 에디터 폭 확장 */
.editor_container {
max-width: 1000px !important;
width: 90% !important;
margin: 0 auto !important;
}- 크롬이나 파이어폭스 같은 브라우저에 무료로 설치해서 바로 쓰실 수 있어요.
- 실제 발행될 글과 비슷한 넓이에서 작업할 수 있어서 글쓰기가 정말 편해집니다.
- 다만, 브라우저가 크게 업데이트되거나 블로그 서비스 화면이 개편되면 가끔 작동을 멈출 수도 있다는 점만 기억해 주세요.
2. 다른 곳에서 편하게 쓰고 가져오기 (외부 에디터 사용)
- 평소 글을 쓰실 때 VSCode, 노션(Notion), 타이포라(Typora) 같은 프로그램이 더 익숙하시다면, 그곳에서 편하게 글을 다 쓰신 다음 HTML이나 마크다운 형태로 복사해 오는 방법도 있습니다.
- 화면 좁은 것에 구애받지 않고 마음껏 글을 쓸 수 있다는 게 장점이에요.
- 하지만 다른 곳에서 쓴 글을 복사해서 붙여넣다 보면 눈에 보이지 않는 불필요한 태그들이 딸려 와서 글 양식이 깨지거나 검색 노출에 불리해질 수도 있으니, 꼭 HTML 모드에서 깔끔하게 정리해 주시는 것이 좋습니다.
3. 그때그때 필요할 때만 넓히기 (개발자 도구 활용)
컴퓨터 다루는 것에 익숙하시다면 별도의 프로그램 설치 없이 브라우저의 기능만으로도 화면을 넓힐 수 있습니다. 키보드에서 F12 키를 누르면 나오는 개발자 도구를 활용하는 방법이에요.
- 글쓰기 화면에서 F12 키를 눌러 개발자 도구를 열어주세요.
- 요소 검사 아이콘을 누른 뒤, 에디터 영역인
.editor_container를 찾아 선택해 줍니다. - 그리고 아래의 코드를 직접 타이핑해 넣어주시면 화면이 넓어집니다.
#mceu_19 {
width: 90% !important;
max-width: 1000px !important;
}- 프로그램 설치를 꺼리시는 분들에게는 좋지만, 페이지를 새로고침 할 때마다 초기화되어서 매번 다시 입력해야 하는 번거로움이 있습니다.
- 수정하다가 실수로 다른 코드를 건드리면 작성 중인 글이 날아갈 수도 있으니 꼭 임시저장을 먼저 해주세요.
4. 더 편안한 관리를 위한 자동 폭 조정 프로그램
이런저런 설정들이 모두 복잡하게 느껴지시는 분들을 위해서, 가로 사이즈 숫자만 입력하면 알아서 에디터 화면을 넓혀주는 작은 프로그램도 준비해 보았습니다. 파이썬 웹뷰 기술을 활용해서 크롬 브라우저를 띄우듯 사용할 수 있도록 만들었어요.
- 복잡한 설정 없이 원하시는 가로 픽셀 크기만 적어주시면 에디터 화면이 알맞게 조절됩니다.
- 매번 코드를 넣어야 하는 번거로움 없이 편하게 글쓰기에만 집중하실 수 있도록 도와줍니다.
필요하신 분들은 아래의 블로그 에디터 가로폭 수정 전용 프로그램을 다운로드하셔서 사용해 보세요. 압축을 풀고 나오는 실행 파일을 가볍게 두 번 클릭하시면 됩니다. 처음 여실 때 윈도우 보안 경고 창이 뜰 수 있는데, 한 번만 실행 허용을 눌러주시면 그 다음부터는 편안하게 쓰실 수 있습니다.
