안녕하세요, TISTORY 입니다.
그동안 열악한 환경 속에서 스킨 제작하고 수정하시느라 얼마나 고생이 많으셨습니까. 텍스트 박스 두개와 미리보기 하나만으로 지금까지 좋은 스킨 많이 만들어주셔서 정말 감사드립니다. 이제 더 쉽고 편하게 스킨제작/수정하실 수 있는 새로운 스킨 에디터를 소개합니다.
스킨 에디터 구조
새로운 스킨 에디터에서는 미리보기와 소스코드 에디터를 한눈에 보실 수 있습니다. 왼쪽이 미리보기, 오른쪽이 소스코드 에디터입니다. 미리보기에서는 여러가지 모드에서 미리보기가 가능하고 반응형 웹 디자인이 가능하도록 태블릿, 모바일 미리보기를 준비했습니다. 소스코드 에디터에서는 더 편하고 쉽게 코드 파악/수정이 가능하도록 HTML/CSS 문법이 강조된 에디터를 적용하였습니다.
이제 세부적으로 어떤 기능이 있는지 하나하나 소개하도록 하겠습니다.
미리보기 모드
그동안 미리보기는 티스토리 첫페이지만 미리 볼 수 있어서 수정을 하고나서는 반드시 적용을 한 이후에 확인이 가능했습니다. 새로운 스킨 에디터는 이런 불편을 해소하기 위해서 주요 페이지를 미리 볼 수 있도록 '홈, 글, 카테고리, 태그, 위치로그, 미디어로그, 방명록' 의 미리보기 모드를 제공합니다. 미리보기 왼쪽 위 선택 박스에서 선택하는 것으로 쉽게 모드 변경이 가능합니다.
- 홈 : 티스토리 첫 화면
- 글 : 개별글 화면
- 카테고리 : 카테고리의 글 리스트 화면
- 태그 : 태그 리스트 화면
- 위치로그 : 위치로그 화면
- 미디어로그 : 미디어로그 화면
- 방명록 : 방명록 화면
반응형 미리보기
반응형 미리보기는 PC, 태블릿, 모바일에서 스킨이 어떤 모습으로 보일지 쉽게 보실 수 있는 기능입니다. 물론 단지 가로크기만 조정할 뿐이긴 합니다만 미리보기 창을 정해진 크기로 늘였다 줄였다 하는 수고로움을 조금이라도 줄여드리기 위한 기능입니다.
얼마전 반응형 스킨 공모전을 진행했었는데 그때 이 기능을 선보였다면 얼마나 좋았을까 생각해봅니다. 늦어서 죄송합니다. ㅠ
소스코드 에디터
문법강조도 안되는 작은 박스 안에서 소스코드 편집을 하는 것은 그리 쉽지 않은 일이었습니다. 새로운 스킨 에디터는 HTML/CSS 문법강조를 비롯한 강력한 기능으로 무장된 에디터를 적용하여 별도의 에디터를 사용하지 않아도 될 정도 편리합니다. 또한 미리보기와 소스코드 에디터 사이의 바를 드래그해서 크기도 자유롭게 변경이 가능해서 원하는 크기로 소스코드를 찾거나 수정할 수 있습니다.
변경한 코드를 미리보기에 적용하기 위해서는 미리보기 오른쪽 위의 "새로고침" 버튼을 클릭해야하는데 좀 더 쉽게 적용할 수 있도록 단축키도 준비했습니다.
- 미리보기 새로고침 단축키 : (MacOS) Cmd + S, (PC) Ctrl + S
지금까지 새로운 스킨 에디터를 간략히 소개해드렸는데요. 설명을 여러번 듣는 것보다 직접 써보는 것이 더 알기 쉬운 방법일 것 같습니다. 지금 관리자 페이지에서 새로운 스킨 에디터를 만나보세요. 여러분의 티스토리가 더욱 아름답고 더욱 인기있는 티스토리가 되길 바랍니다.
감사합니다.
안녕하세요. TISTORY입니다.
스킨에디터가 변경된지 열흘이 다 되어갑니다. 갑작스럽게 변한 부분 넓은 마음으로 이해하시고 잘 사용해주셔서 감사합니다.
오늘도 불편하다고 하신 부분 몇가지 더 개선하여 알려드립니다.
# 소스코드에디터를 닫을 수 있습니다.
소스코드 에디터 상단에 "닫기" 버튼을 누르시면 소스코드 에디터가 숨겨지고 미리보기만 보입니다. 숨겨진 상태에서는 미리보기 상단의 "에디터 열기" 버튼을 누르시면 다시 에디터가 보입니다.
# 소스코드 검색이 더 편해졌습니다.
소스코드 상에서 단축키 Ctrl-F 를 누르면 상단에 검색박스가 생기는데 눈에 잘 띄지 않아 불편하신 것 같아 좀 더 눈에 잘 띄는 색으로 변경하고 안내도 추가했습니다. 다음 검색결과로 이동하는 단축키 Ctrl-G의 안내도 추가했습니다. 이전 검색 결과로 가는 단축키는 Shift-Ctrl-G 입니다. (맥OS에선 Ctrl 대신 Cmd 아시죠?)
스크롤바에 검색결과가 있는 곳이 표시됩니다. 아쉽게도 맥OS에선 스크롤바가 숨겨져서 안보입니다.
# 매칭되는 태그가 강조됩니다.
커서가 위치한 태그와 매칭되는 태그가 강조되어 표시됩니다. 복잡한 HTML 코드를 탐색하시는데 도움이 되시리라 생각합니다.
# 글 미리보기에 댓글이 표시됩니다.
그동안 정말 답답하셨을텐데 미리보기에선 댓글이 표시되지 않고 있었습니다. 이제 표시되니 댓글도 편하게 수정해주세요.
---
업데이트 소식은 여기까지이구요. 한가지 더 안내드리고자합니다.
소스코드 에디터는 이미 알아차리신 분들도 있겠지만 CodeMirror라는 오픈소스 에디터를 사용하고 있습니다.
CodeMirror는 여러 웹 IDE에서 사용되며 편리함과 안정성이 검증되어 이번에 도입을 결정하게 되었고 현재는 기본 테마와 검색관련된 addon만 몇가지 사용 중입니다. 현재 이와 관련된 도움말을 준비 중이며 CodeMirror 웹사이트에서 에디터의 모든 기능을 보실 수 있습니다.
- http://codemirror.net
감사합니다.
문제점 지적해보자면...
1) 닫기 버튼이 새로 고침 버튼 오른쪽에 고정되어 있으면 어떨까 싶습니다. 닫기 버튼은 오른쪽에 있는데 열기 버튼은 새로고침 옆에 있다보니 다소 불편하네요.
2) 에디터가 닫힌 상태에서 창 크기를 변경 하면 풀 화면으로 보이는 것이 아니라 우측에 여백이 생겨버립니다.
3) 2단 보기 기능이 있었으면 합니다. 현재처럼 HTML과 CSS를 따보 보는 기능 외에도 HTML과 CSS를 한 화면에서 볼 수 있었으면 합니다. 위에는 HTML, 아래는 CSS를 배치하면 편의성이 더 좋아 질 듯 합니다.
4) 파일 업로드 미리보기가 조금 바뀌었으면 합니다. 현재는 우측에 작은 창으로 뜨는데, 세로로 2단으로 분할하여 위에는 미리보기, 아래에는 파일 리스트를 볼 수 있었으면 합니다.
5) 파일을 여러개 삭제 할 수 있듯이, 아래에 '다운로드' 버튼이 추가되면 어떨까 싶네요.
6) 3번과 이어지는 것인데, 현재는 가로로 분할 되어 있지만, 세로로 분할 된 레이아웃으로도 볼 수 있으면 어떨까 싶어요. 확실히 큰 디스플레이의 경우 좌우 레이아웃보다 상하 레이아웃이 더 좋지 않을까 싶습니다.(4번의 내용처럼 가로로 2분할 해서 좌우로 HTML과 CSS를 볼 수 있는 부분도 괜찮아보이네요)
7) HTML과 CSS처럼 script.js도 에디터 상에서 편집 가능해지면 어떨까 싶습니다. 사람들이 꽤나 많이 원하고 있는 부분인 것 같아요.
심각한 문제점 한개 더
body id가 정상적으로 적용되지 않고 tt-body-admin/skin으로 적용됩니다. tt-body-page를 사용하고 있는데, 저렇게 나오니 다소 불편하네요.
그리고 정말 페이지 이동도 가능했으면 좋겠어요(...) 자신이 원하는 다른 글을 볼 수 있으면 하는데, 최근 글만 가능하네요.
추가) 관리자 페이지에서 글의 수정/삭제 버튼도 보였으면 합니다. 실제로 동작하진 않고요. 관리자페이지인데 관리자 글 수정/관리가 안보이다니...
여러가지 의견과 버그 신고 감사합니다.
- 창 크기를 변경할때 오른쪽에 여백이 생기는 버그 수정했습니다.
- body의 id는 미처 개선하지 못한 부분인데 수정하겠습니다.
나머지 의견도 적극 검토하겠습니다.
감사합니다.
매칭되는 태그...
강조색을 더 강한 색으로 바꿔주세요.
아직도 확 눈에 들어오지 않습니다.
댓글의 이런저런 분들의 말을 참고해서 덧붙여보자면...
1) 스킨에디터가 새 창이 아닌 상단에 네비게이션이 추가되면 어떨까 싶습니다. 다음에 있는 상단 gnb처럼 왼쪽에는 티스토리 로고가, 그리고 오른쪽에는 홈, 관리자, 서비스 더보기 버튼이 있으면 될 듯 합니다.
2) 컨트롤 + F는 다른 단축키로 옮기면 어떨까 싶어요. 브라우저 내장 CTRL + F를 쓰는 사람이 생각보다 많습니다. CTRL + SHIFT + F 등 다른 단축키가 좋아보입니다.
오래 걸리더라도 답변 기다리겠습니다.
정말 열심히 노력하시는 티스토리 관리자분들께 감사합니다.
완전 동감!!!!
수고하셨습니다 ^^
꾸준한 업데이트 감사합니다.
수고하셨습니다
파일 업로드에서 오른쪽 마우스 클릭해서 열기로 다운로드가 되더니 다시 사라졌네요.
빠른 개선 부탁드립니다.그럼 수고하세요.
브라우저마다 다르겠지만 "링크를 다른 이름으로 저장"하면 저장가능합니다.
컨트롤 + F 로 코드를 검색시, 어떨때는 제대로 찾고
어떨때는 찾지 못하는 경우가 있더군요.
동일한 코드인데도 말이죠...
이 부분 빠른 개선 부탁드립니다.
어떤 경우에 찾지 못하는지 조금 구체적으로 말씀해주실 수 있나요?
발견한 문제(9월 1일)
- 로그인 후 HTML/CSS편집기를 연 상태에서 다른 탭에서로그아웃 했습니다.
- 분명히 다른 탭에서 로그아웃 했음에도 저장됐다고 뜹니다.
- 다른 탭에서 로그아웃 한 상태에서 저장시 원래라면 '로그인해주세요'뜨는게 맞지 않나 싶습니다.
으음.... 개선을 위해 이것저것 글을 적어 도움을 드리고 싶지만
딱 어느 경우라고 하기가 어렵네요.
어떤 경우에 찾지 못하는 것이 아니라, 어떻게 하다가 우연히
검색이 성공된다고 해야 하나요?
검색이 거의 안됩니다.
아마 추측하기로, 가끔씩 검색이 되더라도 그 내용이 왼쪽의 미리보기 화면의
내용이 검색이 됩니다.
즉, 오른쪽의 코드가 검색이 되어야 하는데 왼편의 미리보기 화면에서
검색을 하니 코드를 잘 못 찾는 것 같습니다.
아, 제가 사용하고 있는 것으 크롬입니다.
에디터의 기본 기능 중 하나인 찾기 기능이 너무 불편 합니다. 크롬 브라우저에서 에디터 상의 특정 코드 검색을 위해 Ctrl + F를 눌러 검색하면 좌측의 블로그 화면에서만 해당 검색어를 찾습니다.
크롬 브라우저의 찾기 기능이 무용지물이고 에디터에 내장된 찾기 기능은 생산성이 떨어 집니다. 총 몇개가 검색되었는지 현재의 검색위치에서 이전 검색 위치로 가려면 처음부터 다시 검색을 해야 합니다. 에디터에 내장된 Ctrl +G로 계속 찾기를 하다보면 오타로 G가 입력되어 자칫 모르고 지나가면 코드가 뒤죽박죽 될 수 있어 불안 합니다.
이러한 점들 때문에 현재 서브라임 에디터로 불러와 편집을 하고 있는 실정 입니다.
그리고 에디터상에서 마우스 버튼 우클릭시 뜨는 컨텍스트 메뉴에 복사, 붙여넣기 메뉴가 빠져 이것도 불편 합니다. 수동으로 Ctrl+c Ctrl+V를 이용하다 보면 간혹 알파벳 C나 V가 오타로 입력되는데 마찬가지로 오타를 인지하지 못하고 지나쳐 버리면 나중에 찾아내기 어렵게 될 수 있습니다.
많은 분들이 피드백 남겨주셨듯이, 현재는 브라우저 내장 Ctrl+F가 더 편한 듯합니다
이동이 안 돼서 메모장에 전체 복사 후 찾아서 바꾸고, 다시 붙여넣기 하는 방식으로 고치고 있네요 ㅠㅠ
폰트를 맑은고딕으로 바꾸고 싶은대 아무리 검색을 해봐도.
예전 버전으로 설명된거 밖에 없어서.. 고치는대 너무 어렵네요..
좀 가르쳐 주세요!! 맑은고딕 폰트로 글 쓰고 싶은 어린양입니다..ㅠ
Ctrl + F
Ctrl + F
Ctrl + F
Ctrl + F 원래대로 브라우저 자체에서 사용할 수 있게 해주세요.
정말 미친듯이 불편해요;;;
그리고 무엇보다 예전 스킨 에디터를 그냥 쓰고 싶네요ㅠㅠ 새로운 에디터가 좋은 점도 있지만 많은 부분이 불편해서 예전 에디터가 역시 그립습니다 ㅠ 소스 조금씩 수정하는 재미로 살고있었는데 이제 아예 손도 못대고 있네요.... 물론 새에디터에 대한 생각은 너무 훌륭하고 수고하셨고.... 그렇지만 천천히 익혀가고 싶네요...ㅠㅠ
과거에는 업로드안 파일목록 중 우측마우스 클릭하면 '다른 이름으로 대상 저장'해가지고 필요할 때 컴퓨터에 저장시킬 수 있었는데 이번 신 버전에는 이게 안되네요..
우측마우스를 통한 파일 퍼가기 허용 안될까요..ㅠ
글쓰고 난 후 발행하기 전에 미리보기가 안되네요.ㅠㅠ
죄송합니다. 오류가 있었네요. 정상화되었습니다.
html에서 드레그 복사가 어떤 때는 되고 어떤 때는 아래로 화면이 내려가지 않습니다.
그리고 위로 올리면 되고 자기 마음대로 입니다.
쓰다보니까 ㅡㅡ; 적응되었습니다.
하지만 여전히.. 에디터 닫기가 아니라 미리보기 닫기를 만들어주세요.
(현재 크롬으로 요소검사로 열어서 미리보기 지우고하고 에디터를100% 늘려서 작업중입니다. 하하.. 개불편..)
컨트롤+f의 경우에는 장단점이 확실하네요. 코드 찾기가 쉬워졌다는 부분도 있습니다.
그러나 엔터 두번 누르면 코딩이 날라가는 문제가 있구요. 장점보다는 코딩이 날라가는 부작용이 좀더 심한듯합니다. 하지만 반응형으로 미디어쿼리처럼 중복 클래스 사용할때는
유용합니다.
- 숙련되면, 사용에는 무리가 없겠으나 오히려 미리보기 닫기를 만들어주셨으면 좋겠습니다. ㅠㅠ 크롬창 하나 더 열면 확인되는것을.. 왜 미리보기를 만드신겁니다.. 어째서..
가끔 크롬에서는 정상으로 접속이 되는데 ie로는 접속이 안되는 현상이 생깁니다.어제도 그렇고 오늘도 그렇고 시간이 지나면 다시 ie에서도 정상으로 돌아옵니다.이런 현상이 발생되지 않게 확인 부탁드립니다.
html/css 편집을 열면 "스킨저장 실패" 경고창이 뜨네요
수정후 저장도 안되고요
쓰다보니까
이거 정말 좋아요^^!!!
티스토리가 최근에 한 업데이트중 가장 좋은 것 같아요