안녕하세요, TISTORY 입니다.


그동안 열악한 환경 속에서 스킨 제작하고 수정하시느라 얼마나 고생이 많으셨습니까. 텍스트 박스 두개와 미리보기 하나만으로 지금까지 좋은 스킨 많이 만들어주셔서 정말 감사드립니다. 이제 더 쉽고 편하게 스킨제작/수정하실 수 있는 새로운 스킨 에디터를 소개합니다.




스킨 에디터 구조



새로운 스킨 에디터에서는 미리보기와 소스코드 에디터를 한눈에 보실 수 있습니다. 왼쪽이 미리보기, 오른쪽이 소스코드 에디터입니다. 미리보기에서는 여러가지 모드에서 미리보기가 가능하고 반응형 웹 디자인이 가능하도록 태블릿, 모바일 미리보기를 준비했습니다. 소스코드 에디터에서는 더 편하고 쉽게 코드 파악/수정이 가능하도록 HTML/CSS 문법이 강조된 에디터를 적용하였습니다.


이제 세부적으로 어떤 기능이 있는지 하나하나 소개하도록 하겠습니다.




미리보기 모드



그동안 미리보기는 티스토리 첫페이지만 미리 볼 수 있어서 수정을 하고나서는 반드시 적용을 한 이후에 확인이 가능했습니다. 새로운 스킨 에디터는 이런 불편을 해소하기 위해서 주요 페이지를 미리 볼 수 있도록 '홈, 글, 카테고리, 태그, 위치로그, 미디어로그, 방명록' 의 미리보기 모드를 제공합니다. 미리보기 왼쪽 위 선택 박스에서 선택하는 것으로 쉽게 모드 변경이 가능합니다.

  • 홈 : 티스토리 첫 화면
  • 글 : 개별글 화면
  • 카테고리 : 카테고리의 글 리스트 화면
  • 태그 : 태그 리스트 화면
  • 위치로그 : 위치로그 화면
  • 미디어로그 : 미디어로그 화면
  • 방명록 : 방명록 화면




반응형 미리보기



반응형 미리보기는 PC, 태블릿, 모바일에서 스킨이 어떤 모습으로 보일지 쉽게 보실 수 있는 기능입니다. 물론 단지 가로크기만 조정할 뿐이긴 합니다만 미리보기 창을 정해진 크기로 늘였다 줄였다 하는 수고로움을 조금이라도 줄여드리기 위한 기능입니다.


얼마전 반응형 스킨 공모전을 진행했었는데 그때 이 기능을 선보였다면 얼마나 좋았을까 생각해봅니다. 늦어서 죄송합니다. ㅠ




소스코드 에디터



문법강조도 안되는 작은 박스 안에서 소스코드 편집을 하는 것은 그리 쉽지 않은 일이었습니다. 새로운 스킨 에디터는 HTML/CSS 문법강조를 비롯한 강력한 기능으로 무장된 에디터를 적용하여 별도의 에디터를 사용하지 않아도 될 정도 편리합니다. 또한 미리보기와 소스코드 에디터 사이의 바를 드래그해서 크기도 자유롭게 변경이 가능해서 원하는 크기로 소스코드를 찾거나 수정할 수 있습니다.


변경한 코드를 미리보기에 적용하기 위해서는 미리보기 오른쪽 위의 "새로고침" 버튼을 클릭해야하는데 좀 더 쉽게 적용할 수 있도록 단축키도 준비했습니다.


- 미리보기 새로고침 단축키 : (MacOS) Cmd + S, (PC) Ctrl + S






지금까지 새로운 스킨 에디터를 간략히 소개해드렸는데요. 설명을 여러번 듣는 것보다 직접 써보는 것이 더 알기 쉬운 방법일 것 같습니다. 지금 관리자 페이지에서 새로운 스킨 에디터를 만나보세요. 여러분의 티스토리가 더욱 아름답고 더욱 인기있는 티스토리가 되길 바랍니다.


감사합니다.

저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by 친절한. TISTORY

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 안녕하세요. 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는 미처 개선하지 못한 부분인데 수정하겠습니다.

      나머지 의견도 적극 검토하겠습니다.
      감사합니다.

    • 매칭되는 태그...
      강조색을 더 강한 색으로 바꿔주세요.
      아직도 확 눈에 들어오지 않습니다.

  3. 댓글의 이런저런 분들의 말을 참고해서 덧붙여보자면...

    1) 스킨에디터가 새 창이 아닌 상단에 네비게이션이 추가되면 어떨까 싶습니다. 다음에 있는 상단 gnb처럼 왼쪽에는 티스토리 로고가, 그리고 오른쪽에는 홈, 관리자, 서비스 더보기 버튼이 있으면 될 듯 합니다.

    2) 컨트롤 + F는 다른 단축키로 옮기면 어떨까 싶어요. 브라우저 내장 CTRL + F를 쓰는 사람이 생각보다 많습니다. CTRL + SHIFT + F 등 다른 단축키가 좋아보입니다.

  4. 수고하셨습니다 ^^

  5. 꾸준한 업데이트 감사합니다.

  6. 수고하셨습니다

  7. 파일 업로드에서 오른쪽 마우스 클릭해서 열기로 다운로드가 되더니 다시 사라졌네요.
    빠른 개선 부탁드립니다.그럼 수고하세요.

  8. 컨트롤 + F 로 코드를 검색시, 어떨때는 제대로 찾고
    어떨때는 찾지 못하는 경우가 있더군요.

    동일한 코드인데도 말이죠...

    이 부분 빠른 개선 부탁드립니다.

  9. 발견한 문제(9월 1일)
    - 로그인 후 HTML/CSS편집기를 연 상태에서 다른 탭에서로그아웃 했습니다.
    - 분명히 다른 탭에서 로그아웃 했음에도 저장됐다고 뜹니다.
    - 다른 탭에서 로그아웃 한 상태에서 저장시 원래라면 '로그인해주세요'뜨는게 맞지 않나 싶습니다.

  10. 으음.... 개선을 위해 이것저것 글을 적어 도움을 드리고 싶지만
    딱 어느 경우라고 하기가 어렵네요.

    어떤 경우에 찾지 못하는 것이 아니라, 어떻게 하다가 우연히
    검색이 성공된다고 해야 하나요?

    검색이 거의 안됩니다.

    아마 추측하기로, 가끔씩 검색이 되더라도 그 내용이 왼쪽의 미리보기 화면의
    내용이 검색이 됩니다.

    즉, 오른쪽의 코드가 검색이 되어야 하는데 왼편의 미리보기 화면에서
    검색을 하니 코드를 잘 못 찾는 것 같습니다.

    아, 제가 사용하고 있는 것으 크롬입니다.

  11. 에디터의 기본 기능 중 하나인 찾기 기능이 너무 불편 합니다. 크롬 브라우저에서 에디터 상의 특정 코드 검색을 위해 Ctrl + F를 눌러 검색하면 좌측의 블로그 화면에서만 해당 검색어를 찾습니다.

    크롬 브라우저의 찾기 기능이 무용지물이고 에디터에 내장된 찾기 기능은 생산성이 떨어 집니다. 총 몇개가 검색되었는지 현재의 검색위치에서 이전 검색 위치로 가려면 처음부터 다시 검색을 해야 합니다. 에디터에 내장된 Ctrl +G로 계속 찾기를 하다보면 오타로 G가 입력되어 자칫 모르고 지나가면 코드가 뒤죽박죽 될 수 있어 불안 합니다.

    이러한 점들 때문에 현재 서브라임 에디터로 불러와 편집을 하고 있는 실정 입니다.

    그리고 에디터상에서 마우스 버튼 우클릭시 뜨는 컨텍스트 메뉴에 복사, 붙여넣기 메뉴가 빠져 이것도 불편 합니다. 수동으로 Ctrl+c Ctrl+V를 이용하다 보면 간혹 알파벳 C나 V가 오타로 입력되는데 마찬가지로 오타를 인지하지 못하고 지나쳐 버리면 나중에 찾아내기 어렵게 될 수 있습니다.

  12. 많은 분들이 피드백 남겨주셨듯이, 현재는 브라우저 내장 Ctrl+F가 더 편한 듯합니다
    이동이 안 돼서 메모장에 전체 복사 후 찾아서 바꾸고, 다시 붙여넣기 하는 방식으로 고치고 있네요 ㅠㅠ

  13. 폰트를 맑은고딕으로 바꾸고 싶은대 아무리 검색을 해봐도.
    예전 버전으로 설명된거 밖에 없어서.. 고치는대 너무 어렵네요..

    좀 가르쳐 주세요!! 맑은고딕 폰트로 글 쓰고 싶은 어린양입니다..ㅠ

  14. Ctrl + F
    Ctrl + F
    Ctrl + F
    Ctrl + F 원래대로 브라우저 자체에서 사용할 수 있게 해주세요.
    정말 미친듯이 불편해요;;;

    그리고 무엇보다 예전 스킨 에디터를 그냥 쓰고 싶네요ㅠㅠ 새로운 에디터가 좋은 점도 있지만 많은 부분이 불편해서 예전 에디터가 역시 그립습니다 ㅠ 소스 조금씩 수정하는 재미로 살고있었는데 이제 아예 손도 못대고 있네요.... 물론 새에디터에 대한 생각은 너무 훌륭하고 수고하셨고.... 그렇지만 천천히 익혀가고 싶네요...ㅠㅠ

  15. 과거에는 업로드안 파일목록 중 우측마우스 클릭하면 '다른 이름으로 대상 저장'해가지고 필요할 때 컴퓨터에 저장시킬 수 있었는데 이번 신 버전에는 이게 안되네요..
    우측마우스를 통한 파일 퍼가기 허용 안될까요..ㅠ

  16. 글쓰고 난 후 발행하기 전에 미리보기가 안되네요.ㅠㅠ

  17. html에서 드레그 복사가 어떤 때는 되고 어떤 때는 아래로 화면이 내려가지 않습니다.
    그리고 위로 올리면 되고 자기 마음대로 입니다.

  18. 쓰다보니까 ㅡㅡ; 적응되었습니다.
    하지만 여전히.. 에디터 닫기가 아니라 미리보기 닫기를 만들어주세요.
    (현재 크롬으로 요소검사로 열어서 미리보기 지우고하고 에디터를100% 늘려서 작업중입니다. 하하.. 개불편..)

    컨트롤+f의 경우에는 장단점이 확실하네요. 코드 찾기가 쉬워졌다는 부분도 있습니다.
    그러나 엔터 두번 누르면 코딩이 날라가는 문제가 있구요. 장점보다는 코딩이 날라가는 부작용이 좀더 심한듯합니다. 하지만 반응형으로 미디어쿼리처럼 중복 클래스 사용할때는
    유용합니다.


    - 숙련되면, 사용에는 무리가 없겠으나 오히려 미리보기 닫기를 만들어주셨으면 좋겠습니다. ㅠㅠ 크롬창 하나 더 열면 확인되는것을.. 왜 미리보기를 만드신겁니다.. 어째서..

  19. 가끔 크롬에서는 정상으로 접속이 되는데 ie로는 접속이 안되는 현상이 생깁니다.어제도 그렇고 오늘도 그렇고 시간이 지나면 다시 ie에서도 정상으로 돌아옵니다.이런 현상이 발생되지 않게 확인 부탁드립니다.

  20. html/css 편집을 열면 "스킨저장 실패" 경고창이 뜨네요

    수정후 저장도 안되고요

  21. 쓰다보니까
    이거 정말 좋아요^^!!!
    티스토리가 최근에 한 업데이트중 가장 좋은 것 같아요



티스토리 툴바