[IMAGE: https://steemitimages.com/DQmQV1rpchd8DPrH7SkXp4h5aYjfDmS9S5Jp4FmhFmfRTz1/front_normal.jpeg]
스팀잇 글쓰기 너무 불편해서 한번 글쓰고나면 뒷목이 뻣뻣하죠. 그래서 항상 스팀잇 UI가 개선되기만을 손꼽아 기다려 왔습니다. 그런데 오늘 nhj12311 님께서 아주 멋진 브라우저 플러그인을 소개 해 주셨습니다.그런데 보안업계에 종사하던 저인지라, 차마 설치를 못하겠더라구요. 플러그인이 가진 권한을 다 체크할수도없고, 소스코드를 다 검사할수도 없는 노릇이라.. 아무리 안전하게 사용한다고 하더라도 최악의 상황을 방지할 방법이 생각이 나지 않았습니다.
그래서 일단 좀더 기다려 보기로 하고, 불편하더라도 안전한 방법을 사용 하는것이 좋을 것 같아서, 이리저리 궁리끝에 플러그인 설치 없이 에디터를 개선할 수 있는 방법을 개발했습니다. 단 글쓰기전에 잠시 해야할 작업이 있는데, 하루에 한두번 글쓰는거 생각하면 그정도는 일도 아니죠. 무엇보다 안전하니까 한번 따라해 보세요. 일단 효과를 보여드릴게요.
에디터와 프리뷰가 나란히 놓입니다. 그리고 기본 높이도 커집니다.
https://i.imgur.com/itoT649.png?1
브라우저 창에 꽉차게 커집니다. (최대사이즈 없앰)
https://i.imgur.com/UcDh7kk.png
입력창 드래그해서 크기 조절 하면 자동으로 프리뷰 창 사이즈도 조절됩니다.
https://i.imgur.com/6xEeecm.png
당연하지만 그림도 보입니다.
https://i.imgur.com/8ffwl7D.jpg
적용하는 법
100% 안전한 방법인 대신, 글쓰기전에 잠깐 수작업을 해주셔야 합니다. 창만 안닫으면 유지되는데, 창 닫았다 열면 리셋되니 다시 해주시면 됩니다. 크롬 기준으로 설명할게요.
아래 내용을 긁어서 CTRL+C 해둠
> function nice_viewer(){var e,t,l,i;try{e=document.querySelectorAll(".vframe")[0],t=e.querySelectorAll(".Preview")[0],l=e.querySelectorAll(".ReplyEditor__body")[0],i=l.getElementsByTagName("textarea")[0];try{document.querySelectorAll(".ReplyEditor")[0].className=""}catch(r){}}catch(r){return}t.style.position||(e.style.position="relative",i.style.height="500px",i.style.width="50%",t.style.position="absolute",t.style.right="0px",t.style.top="50px",t.style.overflowY="scroll");var o=l.getBoundingClientRect(),y=i.getBoundingClientRect(),s=o.width-y.width-10,n=y.height-10;t.style.width=s+"px",t.style.maxHeight=n+"px"}setInterval(nice_viewer,500);
이 코드는 제가 작성한것이고, 100% 안전하니까 걱정 안하셔도 됩니다. 다른 프로그래머분들께서 인증 해주시면 더 좋겠네요 ^^ 짧게 하기위해서 minify 한것이며, 원본소스는 아래에 첨부 하였습니다. 이 코드를 바탕화면 메모장같은데 복사해두고 글쓰실때 사용하시면 될듯 해요.
코드는 한번만 넣으세요. 실수로 여러번 넣으셨으면 창 새로고침 하시고 한번만 넣으세요. ㅎㅎ
화면에서 오른쪽버튼 클릭하고, "검사" 클릭 (구글 크롬 기준)
https://i.imgur.com/DrmP7i7.png
검사창이 열리면, "Console" 클릭한후 아래에 입력창 프롬프트 클릭하여 내용 입력할 준비
https://i.imgur.com/qHy3bVW.png
CTRL+V 눌러서 아까 복사했던 것 붙여넣음. 그리고 엔터!
https://i.imgur.com/cx4pwqk.png
X 버튼 눌러서 "검사" 창 닫음
쨔쟌!
https://i.imgur.com/itoT649.png?2
자, 적용이 되었나요? 윈도우 크기도 조절하시고, 글쓰는 상자 사이즈도 조절해 보세요. 이제 넓고 편한 환경에서 글쓰기를 즐겨보세요~^^
전체 소스는 여기에 있습니다.
https://gist.github.com/ianpark/77526668b8aca41c0b7575381737f362
박세계 님께서 알려주신 대박팁!
정말 머리가 좋으신것 같아요. 이생각을 저는 왜 못했을까요? ^^ 정말 감사드립니다.
위에 세계님이 말씀하신 방법대로 하시는데, URL 부분에 아래 내용 복사해서 넣으시면 됩니다. 그럼 클릭한번으로 적용이됩니다. ^^
>javascript:function nice_viewer(){var e,t,l,i;try{e=document.querySelectorAll(".vframe")[0],t=e.querySelectorAll(".Preview")[0],l=e.querySelectorAll(".ReplyEditor__body")[0],i=l.getElementsByTagName("textarea")[0];try{document.querySelectorAll(".ReplyEditor")[0].className=""}catch(r){}}catch(r){return}t.style.position||(e.style.position="relative",i.style.height="500px",i.style.width="50%",t.style.position="absolute",t.style.right="0px",t.style.top="50px",t.style.overflowY="scroll");var o=l.getBoundingClientRect(),y=i.getBoundingClientRect(),s=o.width-y.width-10,n=y.height-10;t.style.width=s+"px",t.style.maxHeight=n+"px"}setInterval(nice_viewer,500);
