안녕하세요, TISTORY 입니다.
그동안 열악한 환경 속에서 스킨 제작하고 수정하시느라 얼마나 고생이 많으셨습니까. 텍스트 박스 두개와 미리보기 하나만으로 지금까지 좋은 스킨 많이 만들어주셔서 정말 감사드립니다. 이제 더 쉽고 편하게 스킨제작/수정하실 수 있는 새로운 스킨 에디터를 소개합니다.
스킨 에디터 구조
새로운 스킨 에디터에서는 미리보기와 소스코드 에디터를 한눈에 보실 수 있습니다. 왼쪽이 미리보기, 오른쪽이 소스코드 에디터입니다. 미리보기에서는 여러가지 모드에서 미리보기가 가능하고 반응형 웹 디자인이 가능하도록 태블릿, 모바일 미리보기를 준비했습니다. 소스코드 에디터에서는 더 편하고 쉽게 코드 파악/수정이 가능하도록 HTML/CSS 문법이 강조된 에디터를 적용하였습니다.
이제 세부적으로 어떤 기능이 있는지 하나하나 소개하도록 하겠습니다.
미리보기 모드
그동안 미리보기는 티스토리 첫페이지만 미리 볼 수 있어서 수정을 하고나서는 반드시 적용을 한 이후에 확인이 가능했습니다. 새로운 스킨 에디터는 이런 불편을 해소하기 위해서 주요 페이지를 미리 볼 수 있도록 '홈, 글, 카테고리, 태그, 위치로그, 미디어로그, 방명록' 의 미리보기 모드를 제공합니다. 미리보기 왼쪽 위 선택 박스에서 선택하는 것으로 쉽게 모드 변경이 가능합니다.
- 홈 : 티스토리 첫 화면
- 글 : 개별글 화면
- 카테고리 : 카테고리의 글 리스트 화면
- 태그 : 태그 리스트 화면
- 위치로그 : 위치로그 화면
- 미디어로그 : 미디어로그 화면
- 방명록 : 방명록 화면
반응형 미리보기
반응형 미리보기는 PC, 태블릿, 모바일에서 스킨이 어떤 모습으로 보일지 쉽게 보실 수 있는 기능입니다. 물론 단지 가로크기만 조정할 뿐이긴 합니다만 미리보기 창을 정해진 크기로 늘였다 줄였다 하는 수고로움을 조금이라도 줄여드리기 위한 기능입니다.
얼마전 반응형 스킨 공모전을 진행했었는데 그때 이 기능을 선보였다면 얼마나 좋았을까 생각해봅니다. 늦어서 죄송합니다. ㅠ
소스코드 에디터
문법강조도 안되는 작은 박스 안에서 소스코드 편집을 하는 것은 그리 쉽지 않은 일이었습니다. 새로운 스킨 에디터는 HTML/CSS 문법강조를 비롯한 강력한 기능으로 무장된 에디터를 적용하여 별도의 에디터를 사용하지 않아도 될 정도 편리합니다. 또한 미리보기와 소스코드 에디터 사이의 바를 드래그해서 크기도 자유롭게 변경이 가능해서 원하는 크기로 소스코드를 찾거나 수정할 수 있습니다.
변경한 코드를 미리보기에 적용하기 위해서는 미리보기 오른쪽 위의 "새로고침" 버튼을 클릭해야하는데 좀 더 쉽게 적용할 수 있도록 단축키도 준비했습니다.
- 미리보기 새로고침 단축키 : (MacOS) Cmd + S, (PC) Ctrl + S
지금까지 새로운 스킨 에디터를 간략히 소개해드렸는데요. 설명을 여러번 듣는 것보다 직접 써보는 것이 더 알기 쉬운 방법일 것 같습니다. 지금 관리자 페이지에서 새로운 스킨 에디터를 만나보세요. 여러분의 티스토리가 더욱 아름답고 더욱 인기있는 티스토리가 되길 바랍니다.
감사합니다.
