본문 바로가기

새로운 소식/업데이트 소식

새로운 스킨 에디터를 소개합니다.

안녕하세요, TISTORY 입니다.


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




스킨 에디터 구조



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


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




미리보기 모드



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

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




반응형 미리보기



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


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




소스코드 에디터



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


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


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






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


감사합니다.

  • 이전 댓글 더보기