티스토리 신버전 글쓰기(신규 에디터)가 나온지가 벌써 1년이 넘었지만, 저는 아직도 구버전 글쓰기 (구에디터) 화면이 더 익숙합니다. 신버전의 인터페이스가 아직은 개선되야할 부분이 아직은 남아 있는 것 같아요. 예를 들어 구버전에서 자주 사용되던 기능이었던 '글상자'가 신규 에디터에 없는 것은 아쉬움으로 남습니다. 티스토리 시스템팀에서 요즘 여러가지 시도를 하고 있는 것으로 보아 이런 소소한 불편도 언젠가는 개선이 되지 않을까 생각해봅니다.
사실 이번 포스트는 신규 에디터에서 글쓰기를 시도해보다가 겪은 불편함 때문에 작성하게 되었습니다. 티스토리의 신규 에디터에서 글쓰기를 할 때 현재는 없는 기능인 '글상자' 기능은 구에디터에서는 문제없이 사용가능합니다. 앞으로도 신규 에디터에서 계속 '글상자' 기능이 없는 상태로 운영될지는 모르겠으나 신규 에디터에서 구에디터의 '글상자' 기능을 다른 방법으로라도 사용할 수 있는 방법이 있어서 알려드릴까 합니다. 그리고 현재 현재 구버전에서 사용되고 있는 기본 글상자에 대한 html 코딩도 공유하도록 하겠습니다.
물론, 이번 시간은 글상자에 대한 테마이니만큼 글상자를 사용하는 기본적인 방법과 글상자의 테두리와 색상, 패딩 등을 변경하는 방법들에 대해서도 짚어볼 예정입니다. 그럼 티스토리의 구버전 에디터와 신버전 에디터를 넘나들며 글상자를 활용하는 방법에 대하여 지금 바로 그 방법을 공유해보도록 하겠습니다.
구버전 에디터와 신버전 에디터 선택하는 방법
◆ 먼저 구버전 에디터와 신버전 에디터를 어떻게 선택하여 사용하는지부터 살펴보도록 하죠.
▼ 티스토리 관리자 페이지에서 콘텐츠 하위의 '설정' 버튼을 클릭합니다.
▼ 상단의 새로운 글쓰기를 '사용하지 않습니다(구버전) / 사용합니다(신버전)'를 선택한 후 하단의 '변경사항 저장' 버튼을 누르면 원하는 에디터를 선택할 수 있습니다.
◆ 현재는 구버전 글쓰기 에디터에만 '글상자' 아이콘이 있습니다. 티스토리의 구버전 글쓰기 에디터에서 글상자를 이용하는 방법부터 알아보겠습니다.
▼ 구버전의 글쓰기 에디터에서 텍스트를 먼저 작성한 후 '엔터'키를 쳐서 새로운 문단을 형성시켜줍니다. (엔터키를 치는 이유는 글상자 이후의 텍스트 부분이 글상자 안으로 포함되지 않도록 하기 위함입니다.)
▼ 텍스트 옆으로 커서를 위치시킨 상태에서 상단의 '글상자' 아이콘 클릭 > '간단선택' 탭 선택 > 원하는 형태의 글상자 선택 > '확인' 버튼을 클릭합니다.
▼ 그럼 아래와 같이 텍스트 부분이 글상자로 감싸진 것을 보실 수 있습니다.
▼ 그리고 사전에 텍스트부분('랭크로가든')에서 엔터를 쳐서 문단을 새로 만들었기 때문에 글상자 범위 밖으로 순수한 텍스트를 쓸 수도 있습니다. (만약 텍스트 부분에서 엔터를 치지 않고 글상자를 만들면 경우에 따라서 글상자 밖으로 글을 쓸 수 없는 경우가 생길 수도 있습니다.)
▼ 이번에는 '직접선택' 기능을 활용해서 글상자를 만들어볼게요.
▼ 선스타일, 선굵기, 선 색, 배경색을 각각 선택한 후 '확인' 버튼을 눌러줍시다.
▼ 그럼 아래와 같이 커스텀 글상자가 만들어진 것을 확인할 수 있습니다.
글상자의 html코딩 구성확인 및 글상자 변형해보기
◆ 이번에는 위에서 만들었던 글상자의 html 코딩을 들여다 보도록 하겠습니다.
◆ html과 태그에 대하여 익숙하지 않으신 분은 아래 두 개의 포스트를 먼저 보고 오실 것을 권장합니다.
▼ 위의 html 코딩에서 테두리 부분을 변경해볼게요. border-width를 14px -> 50px로 변경해볼게요. 테두리가 어떻게 바뀔까요?
▼ 테두리가 50픽셀로 대폭 늘어난 것을 확인할 수 있군요.
▼ 그럼 테두리를 50픽셀로 지정해둔 상태에서 글상자의 안쪽여백을 조정해보겠습니다. padding 부분을 10px -> 100px으로 변경해볼게요.
▼ 그랬더니 안쪽 여백이 눈에 띄게 늘어난 것을 확인할 수 있습니다.
▲ 이렇게 html 코딩의 몇 가지를 만지면 원하는 형태의 글상자를 만들 수 있답니다.
신버전 에디터에서 글상자 기능 사용하는 방법
◆ 현재는 티스토리 신버전의 글쓰기 에디터에서는 글상자 기능이 제공되고 있지 않습니다. 하지만, 신버전 에디터에서도 글상자를 사용하고 싶으실 수가 있죠. 하지만, 현재의 시스템을 이용하여 약간 번거로운 작업을 해두신다면 신버전 에디터에서도 글상자 기능을 사용할 수 있습니다. 세 가지 방법이 있으니 편하신 방법으로 적용해보세요.
◆ 아, 그리고 이전에 서식기능을 활용하여 글상자를 꾸미는 방법에 대하여 설명드린 적이 있는데요, 이 부분도 보시면 도움이 되실거예요.
티스토리의 글상자 기능을 잘만 활용하면 포스트 내의 제목이나 테마를 구분할 때 유용하게 사용될 수 있을 뿐만 아니라 제 블로그처럼 이전 글들을 안내하는 용도나 중요한 문구의 강조를 할때도 적용할 수 있어서 좋습니다. 그래서 구버전 뿐만 아니라 신버전에서도 글상자 기능이 있었으면 하는 바람입니다. 새롭게 버전업되면서 신버전 에디터에서도 글상자 기능이 추가될 지도 모르겠지만, 그 때까지는 지금처럼 수동으로 글상자를 변형해서 사용하는 번거로움이 있을 것 같아요.
개인적으로는 구버전 에디터를 없애지 말고 구버전 에디터와 신버전 에디터를 혼용하여 사용할 수 있도록하는 현재의 시스템이 이어졌으면 좋겠습니다. 물론 구버전 에디터를 없앤다면 다시 신버전 에디터에서 새롭게 적응을 해나갈테지만 말이죠. 서두에서 설명드린 것처럼 티스토리 시스템 팀에서 좋은 방향으로 티스토리를 개선해나가고 있기 때문에 제 생각보다 더 나은 방법이 나올지도 모를 일이구요. 오늘은 여기서 줄입니다. 다음 시간에 다시 찾아올게요. 안녕~^^
