본문 바로가기
티스토리/글쓰기,꾸미기

[Tistory]티스토리 에디터 선택, 글상자 변형, 신버전 에디터에서 글상자 사용해보기

by 랭크로 2020. 6. 2.

티스토리 신버전 글쓰기(신규 에디터)가 나온지가 벌써 1년이 넘었지만, 저는 아직도 구버전 글쓰기 (구에디터) 화면이 더 익숙합니다. 신버전의 인터페이스가 아직은 개선되야할 부분이 아직은 남아 있는 것 같아요. 예를 들어 구버전에서 자주 사용되던 기능이었던 '글상자'가 신규 에디터에 없는 것은 아쉬움으로 남습니다. 티스토리 시스템팀에서 요즘 여러가지 시도를 하고 있는 것으로 보아 이런 소소한 불편도 언젠가는 개선이 되지 않을까 생각해봅니다.

사실 이번 포스트는 신규 에디터에서 글쓰기를 시도해보다가 겪은 불편함 때문에 작성하게 되었습니다. 티스토리의 신규 에디터에서 글쓰기를 할 때 현재는 없는 기능인 '글상자' 기능은 구에디터에서는 문제없이 사용가능합니다. 앞으로도 신규 에디터에서 계속 '글상자' 기능이 없는 상태로 운영될지는 모르겠으나 신규 에디터에서 구에디터의 '글상자' 기능을 다른 방법으로라도 사용할 수 있는 방법이 있어서 알려드릴까 합니다. 그리고 현재 현재 구버전에서 사용되고 있는 기본 글상자에 대한 html 코딩도 공유하도록 하겠습니다.

물론, 이번 시간은 글상자에 대한 테마이니만큼 글상자를 사용하는 기본적인 방법과 글상자의 테두리와 색상, 패딩 등을 변경하는 방법들에 대해서도 짚어볼 예정입니다. 그럼 티스토리의 구버전 에디터와 신버전 에디터를 넘나들며 글상자를 활용하는 방법에 대하여 지금 바로 그 방법을 공유해보도록 하겠습니다.

구버전 에디터와 신버전 에디터 선택하는 방법

◆ 먼저 구버전 에디터와 신버전 에디터를 어떻게 선택하여 사용하는지부터 살펴보도록 하죠.

▼ 티스토리 관리자 페이지에서 콘텐츠 하위의 '설정' 버튼을 클릭합니다.

▼ 상단의 새로운 글쓰기를 '사용하지 않습니다(구버전) / 사용합니다(신버전)'를 선택한 후 하단의 '변경사항 저장' 버튼을 누르면 원하는 에디터를 선택할 수 있습니다.

▼ '새로운 글쓰기를 사용하지 않습니다.'를 선택하면 구버전 글쓰기 에디터로 글쓰기가 진행이 됩니다.

▼ 변경사항 저장을 해주시구요.

▼ 그 후 '쓰기' 버튼을 눌러서 글쓰기 화면으로 들어가볼까요?

▼ 그럼 아래와 같이 구버전 글쓰기 에디터로 들어가지는 것을 확인할 수 있습니다.

▼ '새로운 글쓰기를 사용합니다.'를 선택하면 신버전 글쓰기 에디터로 글쓰기가 진행이 됩니다.

▼ 글쓰기 선택이 완료되셨다면 '변경사항 저장' 버튼을 눌러주세요.

▼ 그 후에 '글쓰기' 버튼을 눌러서 들어갑니다.

▼ 그럼 다음과 같이 신버전 글쓰기 에디터가 실행되는 것을 알 수 있습니다.

◆ 음~ 참고로 작성한지는 오래되었지만, 티스토리에서 (구버전 에디터로) 글쓰기 하는 방법을 포스팅한 적이 있었죠. 초보분이시라면 한 번 읽어보시면 도움이 되실거예요.

[Tistory]티스토리 글올리는 방법 마스터하기 (글올리기 기초)

티스토리 구버전 에디터에서 글상자 사용하는 방법

◆ 현재는 구버전 글쓰기 에디터에만 '글상자' 아이콘이 있습니다. 티스토리의 구버전 글쓰기 에디터에서 글상자를 이용하는 방법부터 알아보겠습니다.

▼ 구버전의 글쓰기 에디터에서 텍스트를 먼저 작성한 후 '엔터'키를 쳐서 새로운 문단을 형성시켜줍니다. (엔터키를 치는 이유는 글상자 이후의 텍스트 부분이 글상자 안으로 포함되지 않도록 하기 위함입니다.)

▼ 텍스트 옆으로 커서를 위치시킨 상태에서 상단의 '글상자' 아이콘 클릭 > '간단선택' 탭 선택 > 원하는 형태의 글상자 선택 > '확인' 버튼을 클릭합니다.

▼ 그럼 아래와 같이 텍스트 부분이 글상자로 감싸진 것을 보실 수 있습니다.

▼ 그리고 사전에 텍스트부분('랭크로가든')에서 엔터를 쳐서 문단을 새로 만들었기 때문에 글상자 범위 밖으로 순수한 텍스트를 쓸 수도 있습니다. (만약 텍스트 부분에서 엔터를 치지 않고 글상자를 만들면 경우에 따라서 글상자 밖으로 글을 쓸 수 없는 경우가 생길 수도 있습니다.)

▼ 이번에는 '직접선택' 기능을 활용해서 글상자를 만들어볼게요.

▼ 선스타일, 선굵기, 선 색, 배경색을 각각 선택한 후 '확인' 버튼을 눌러줍시다.

▼ 그럼 아래와 같이 커스텀 글상자가 만들어진 것을 확인할 수 있습니다.

글상자의 html코딩 구성확인 및 글상자 변형해보기

◆ 이번에는 위에서 만들었던 글상자의 html 코딩을 들여다 보도록 하겠습니다.

◆ html과 태그에 대하여 익숙하지 않으신 분은 아래 두 개의 포스트를 먼저 보고 오실 것을 권장합니다.

[Tistory]html의 기본구조와 티스토리 html 기본편집

[Tistory]p, br, div, span 태그의 의미와 티스토리 글상자, 글자배경색 적용

▼ 그럼 위에서 만들었던 글상자를 가져와볼게요.

▼ 그리고, 에디터 우측 상단의 'html' 부분을 체크하여 html을 들여다보도록 하겠습니다.

▼ 코딩은 아래와 같은 형태로 되어 있습니다. (참고로 아래의 코딩은 좀 더 보기 편하도록 신버전 에디터의 html 보기 화면을 캡쳐했어요.)

▼ 글상자 부분은 <div> 태그로 시작하여 </div> 태그로 마무리가 됩니다. 그리고 그 가운데에는 <p>태그와 </p>태그 내부에 '랭크로가든' 텍스트가 들어있는 형태죠. 즉 '랭크로가든'이라는 텍스트를 글상자가 감싸고 있는 형태라고 보시면 됩니다.

▼ 그리고 그 바로 아래에는 <p>태그에 감싸진 <br /> 태그가 있습니다. 줄바꿈을 한 테그죠. (이런 태그들은 위에서 설명드린 두 개의 포스트를 미리 읽어보셨다면 쉽게 이해가 되실겁니다.)

▼ <div>태그 부분만 살펴볼게요. class의 'txc-textbox'는 CSS에서 글상자를 불러온다는 의미이고, style은 해당 글상자의 스타일을 정의하는 것입니다. style의 각각의 요소는 어떤 의미인지 살펴볼게요. 'border-style'은 테두리 종류, 'border-width'은 테두리 두께, 'border-color'는 테두리의 색상, 'background-color'은 글상자의 배경색을, 'padding'은 글상자 안쪽 여백을 의미합니다.

◆ 참고로 위에서 색상표시는 rgb로 표시되는데, 이 부분은 아래의 포스트를 보시면 이해하시는 데 도움이 되실거예요.

[Tistory]티스토리에서 3원색(RGB)의 10진수 16진수 코딩과 색상코드 확인하는 방법

▼ 위의 html 코딩에서 테두리 부분을 변경해볼게요. border-width를 14px -> 50px로 변경해볼게요. 테두리가 어떻게 바뀔까요?

▼ 테두리가 50픽셀로 대폭 늘어난 것을 확인할 수 있군요.

▼ 그럼 테두리를 50픽셀로 지정해둔 상태에서 글상자의 안쪽여백을 조정해보겠습니다. padding 부분을 10px -> 100px으로 변경해볼게요.

▼ 그랬더니 안쪽 여백이 눈에 띄게 늘어난 것을 확인할 수 있습니다.

▲ 이렇게 html 코딩의 몇 가지를 만지면 원하는 형태의 글상자를 만들 수 있답니다.

신버전 에디터에서 글상자 기능 사용하는 방법

◆ 현재는 티스토리 신버전의 글쓰기 에디터에서는 글상자 기능이 제공되고 있지 않습니다. 하지만, 신버전 에디터에서도 글상자를 사용하고 싶으실 수가 있죠. 하지만, 현재의 시스템을 이용하여 약간 번거로운 작업을 해두신다면 신버전 에디터에서도 글상자 기능을 사용할 수 있습니다. 세 가지 방법이 있으니 편하신 방법으로 적용해보세요.

◆ 아, 그리고 이전에 서식기능을 활용하여 글상자를 꾸미는 방법에 대하여 설명드린 적이 있는데요, 이 부분도 보시면 도움이 되실거예요.

[Tistory]티스토리 서식기능으로 색깔 글상자 만들어서 글쓰기에 적용하기

1. 구버전 에디터에서 글상자를 서식으로 저장 > 신버전 에디터에서 불러오기

▼ 먼저 구버전 글쓰기로 가셔야겠죠.

▼ '서식 관리'를 선택하여 들어갑니다.

▼ 우측 상단의 '서식 쓰기' 버튼을 클릭해서 들어가시구요.

▼ 위에서 배웠던대로 글상자를 만듭니다.

▼ 서식의 제목을 넣어줍시다. 이 글상자는 '글상자_노랑색_실선'이라고 이름지어보겠습니다.

▼ 그리고 하단의 '발행' 버튼을 눌러주세요.

▼ 이번에는 신버전 글쓰기로 들어가봅시다.

▼ 신버전 에디터 화면입니다.

▼ 상단의 '…' 아이콘을 클릭한 후 '서식' 탭을 선택해주세요.

▼ 그리고 좀 전에 저장했던 서식인 '글상자_노랑색_실선'을 클릭하여 불러옵니다.

▼ 그럼 아래와 같이 신버전 글쓰기 에디터에서도 글상자를 사용할 수 있습니다.

▼ 글상자 바로 아래 칸에서도 오류없이 글쓰기가 가능하군요. 와우!

▲ 참고로 '구버전' 에디터의 서식기능을 활용하면 '구버전' 에디터와 '신버전' 에디터 모두에서 해당 서식을 불러올 수 있습니다. 따라서 위의 서식은 구버전 에디터에서도 동일하게 적용할 수 있는거죠.

2. 구버전 에디터에서 글상자 생성 > html 코딩 복사 > 신버전 에디터에 붙여넣기

◆ 이번에는 구버전 에디터에서 글상자를 생성한 후 만들어진 html 코딩을 신버전 html 에디터에 붙여 넣는 방법으로 신버전 에디터에 글상자를 적용해보겠습니다.

▼ 먼저 구버전 에디터에서 글상자를 생성합니다.

▼ 우측 상단의 html 부분을 체크해서 html 에디터로 들어가주시구요.

▼ html 모드에서 코딩을 복사합니다.

▼ 이번에는 신버전 에디터로 이동해봅시다.

▼ 모드를 'html'으로 변경합니다.

▼ html 모드에서 좀 전에 복사한 html 코딩을 붙여넣어주세요.

▼ 그리고 기본모드로 돌아옵시다.

▼ 그럼 아래와 같이 글상자가 동일하게 생성된 것을 알 수 있습니다.

▼ 그 이후에 글상자와 글쓰기를 진행하시면 되겠습니다.

## 글상자 코딩 템플릿 공유 ##

◆ 위의 코딩을 일일이 붙여넣기가 힘드실테니 제가 그 수고를 대신했습니다. 아래에서 구버전의 24가지 글상자를 코딩으로 담아뒀습니다. 글상자 템플릿이 필요하신 분은 가져가시면 되겠습니다.

1. 흰색글상자_테두리(무).txt
다운로드
2. 흰색글상자_테두리(점선).txt
다운로드
3. 흰색글상자_테두리(실선).txt
다운로드
4. 흰색글상자_테두리(실선2겹).txt
다운로드
5. 회색글상자_테두리(무).txt
다운로드
6. 회색글상자_테두리(점선).txt
다운로드
7. 회색글상자_테두리(실선).txt
다운로드
8. 회색글상자_테두리(실선2겹).txt
다운로드
9. 노랑색글상자_테두리(무).txt
다운로드
10. 노랑색글상자_테두리(점선).txt
다운로드
11. 노랑색글상자_테두리(실선).txt
다운로드
12. 노랑색글상자_테두리(실선2겹).txt
다운로드
13. 빨강색글상자_테두리(무).txt
다운로드
14. 빨강색글상자_테두리(점선).txt
다운로드
15. 빨강색글상자_테두리(실선).txt
다운로드
16. 빨강색글상자_테두리(실선2겹).txt
다운로드
17. 초록색글상자_테두리(무).txt
다운로드
18. 초록색글상자_테두리(점선).txt
다운로드
19. 초록색글상자_테두리(실선).txt
다운로드
20. 초록색글상자_테두리(실선2겹).txt
다운로드
21. 파랑색글상자_테두리(무).txt
다운로드
22. 파랑색글상자_테두리(점선).txt
다운로드
23. 파랑색글상자_테두리(실선).txt
다운로드
24. 파랑색글상자_테두리(실선2겹).txt
다운로드

3. 신버전 에디터에서 글상자 서식으로 저장 > 신버전 에디터에서 불러오기

◆ 이번에는 신버전 에디터에서 글상자 서식을 만들어서 저장한 후 신버전 에디터에서 사용하는 방법을 알아보겠습니다.

▼ 먼저 신버전 에디터로 이동해주세요.

▼ '콘텐츠' 하위의 '서식관리' 탭을 선택하시구요.

▼ 우측 상단의 '서식 쓰기' 버튼을 클릭하여 들어갑니다.

▼ 서식쓰기 화면입니다.

▼ 우측 상단의 기본모드를 'html'모드로 변경해주세요.

▼ 제가 위에서 공유드렸던 글상자 템플릿 중 원하는 것을 골라주세요. 저는 빨강색글상자를 선택해보겠습니다.

▼ 해당 템플릿 내의 내용을 복사합니다.

▼ 그리고 html 코드를 붙여넣습니다.

▼ 다시 기본모드로 돌아와보겠습니다.

▼ 그럼 아래와 같이 글상자가 적용됩니다.

▼ 그 다음 글상자의 제목을 입력합시다. 저는 '글자색_빨강색_점선'으로 정해봤습니다.

▼ 하단의 '완료' 버튼을눌러서 마무리 합시다.

▼ 그리고, 신버전 에디터에서 글쓰기로 들어가보겠습니다.

▼ 에디터 상단에서 '서식' 탭을 선택해주세요.

▼ 그 후에 좀 전에 만들었던 서식을 선택합시다.

▼ 그럼 글쓰기 화면에서 글상자를 이상없이 불러올 수 있습니다.

▼ 참고로 신버전에서 만들어진 서식을 구버전에서 사용할 수 있는지 살펴봤습니다. 과연 구버전에서도 사용할 수 있을까요? (두근두근)

▼ 구버전 에디터에서 서식을 불러와봤지만 좀 전에 만들었던 '글자색_빨강색_점선'이라는 서식은 보이지 않는군요.

신버전 에디터에서 제작한 서식신버전 에디터에서만 사용가능합니다.

◆ 구버전 에디터에서 제작한 서식구버전 에디터와 신버전 에디터 모두에서 사용가능합니다.


마치며...

티스토리의 글상자 기능을 잘만 활용하면 포스트 내의 제목이나 테마를 구분할 때 유용하게 사용될 수 있을 뿐만 아니라 제 블로그처럼 이전 글들을 안내하는 용도나 중요한 문구의 강조를 할때도 적용할 수 있어서 좋습니다. 그래서 구버전 뿐만 아니라 신버전에서도 글상자 기능이 있었으면 하는 바람입니다. 새롭게 버전업되면서 신버전 에디터에서도 글상자 기능이 추가될 지도 모르겠지만, 그 때까지는 지금처럼 수동으로 글상자를 변형해서 사용하는 번거로움이 있을 것 같아요.

개인적으로는 구버전 에디터를 없애지 말고 구버전 에디터와 신버전 에디터를 혼용하여 사용할 수 있도록하는 현재의 시스템이 이어졌으면 좋겠습니다. 물론 구버전 에디터를 없앤다면 다시 신버전 에디터에서 새롭게 적응을 해나갈테지만 말이죠. 서두에서 설명드린 것처럼 티스토리 시스템 팀에서 좋은 방향으로 티스토리를 개선해나가고 있기 때문에 제 생각보다 더 나은 방법이 나올지도 모를 일이구요. 오늘은 여기서 줄입니다. 다음 시간에 다시 찾아올게요. 안녕~^^

 

이 포스팅과 어울리는 다른 글도 확인해보세요.

      ↓ ↓ ↓ ↓      

   ↓ ↓ ↓ ↓

[Tistory]티스토리 직접유입 및 기타유입의 의미와, 검색로봇 통계반영 여부

[Tistory]티스토리 자동생성 사이트맵으로 네이버 및 구글웹마스터도구 5분등록!

[Tistory]캔바(Canva)로 블로그대표이미지(아이콘) 만들기 따라하기