티스토리 스킨 편집이 조금 더 쉬워짐 (html 편집 화면 개선)

티스토리에서 따로 공지 없이 조금씩 기능 개선을 하는 경우가 있다.

 

이미지/사진을 넣고 그것에 대해 텍스트로 설명해서 이미지가 안 뜨는 경우에 대체 텍스트를 넣는 ALT 태그를 쉽게 넣는 기능은 내 기억에 따로 공지하지 않고 기능을 추가했다. 해당 기능을 처음 추가했을 때와 지금 해당 기능의 아이콘도 슬그머니 바꿨다.

 

혹시 모르는 분들을 위해 간략히 설명하자면, 사진이나 이미지, 캡쳐 등을 넣고 해당 이미지를 클릭하면 상단에 뜨는 이미지 편집 관련 툴들이 화면에 나오는데, 그 중에 가장 오른쪽 톱니바퀴 아이콘을 누르고 대체텍스트를 입력하면 된다.

 

이미지를 누르면 상단에 뜨는 메뉴

위가 이미지 누르면 상단에 뜨는 메뉴고, 그곳의 제일 오른쪽 아이콘을 누르면.

 

대체텍스트 입력

대체텍스트를 입력할 수 있게 된다. 대체텍스트 입력이 중요하다고 하는 이유는 지구상 모든 사람이 우리나라처럼 인터넷이 빠른 곳에 사는 것이 아니어서, 느린 인터넷 환경인 사람들은 이미지를 제대로 못 볼 수가 있는데 그때 이미지 자리에 입력해 놓은 대체 텍스트가 뜨기 때문이다.

 

구글 검색 순위를 올리기 위해 SEO에 아주 중요하다고 하니 넣을 수 있으면 넣는게 좋다. 굳이 안 넣은 글도 검색 노출에 별 영향이 없어 보이기도 하니, 대체텍스트보다는 본문에 적은 키워드와 그와 관련된 내용이 얼마나 잘 구성되어 있는가가 더 중요하다 생각한다.

 

물론, 비슷한 수준의 글이라면 ALT태그까지 제대로 넣은 포스트가 검색 순위가 더 높을 가능성은 있다고 본다.

 

 

HTML 편집 화면 개선

HTML 편집에 들어갈 일이 많지는 않은데, 오랜만에 뭔가 작업을 하기 위해서 html 편집 모드 들어갔더니 화면이 많이 바뀐 것을 볼 수 있었다. 

 

스킨 편집하다가 하기 쉬운 실수 중 하나가 뭔가를 추가하거나 지우면서 일부 코드를 함께 지우는 것이다. (아니면 하나를 더 추가한다던가) 그럼 스킨이 깨진다. 이상한 문자가 나올 수도 있고, 사이드바가 엉뚱한데 붙어 있을 수도 있는 등.

 

그런데 이번 개선은 그런 실수를 줄여줄 수 있도록 바뀌었다. 자동으로 태그 하나 붙을 때마다 안으로 들여쓰기를 해 주고, 같은 레벨에서 유지되어야 하는 것은 아래 이미지처럼 줄로 연결되어서 어느 코드가 어디와 맞붙는지 직관적으로 보인다.

 

개선된 html 편집 화면

일부러 중간에 있는 코드를 앞으로 막 당겨놓기도 해 봤지만, 저장 버튼을 누르는 순간 자동으로 자기 위치를 찾아 가는 것을 봤다. 스킨 편집하기 엄청 편해졌겠는데. 치환자들도 하이라이트가 다 바뀌어서 눈에 확 띈다.

 

이것만 바뀐게 아니고 CSS도 아주 신박하게 바뀌었다.

 

개선된 css 편집 화면

한 부분을 예시로 가져온건데 컬러 지정하는 부분에 헥스 코드 뿐 아니라, 실제로 그 색이 어떻게 보여지는지까지 네모난 부분으로 나온다.

 

당연히 그 부분을 클릭하면 컬러 팔레트가 뜨면서 색상을 직접 선택할 수 있는 기능도 추가되었다. 

직접 컬러 코드 지정 가능

관련된 소식이 혹시 있나 살펴봤지만, 티스토리 공지 올라오는 블로그에 별다른 언급이 없다. 지난번 ALT 태그와 마찬가지로 조용히 업데이트를 한 모양.

 

이번 개선으로 앞으로 스킨 편집을 할 때 실수를 줄일 수 있고, CSS로 나만의 블로그 스타일을 만드는 것도 더 쉬워질 듯 하다. 

 

앞으로 기본 제공되는 스킨들의 폰트 사이즈도 디폴트 값을 조금 키워주기만 하면 좋을 듯 싶다.

 

[티스토리 팁 글 보기]

티스토리 이미지 편집기 개선

티스토리 기본 폰트사이즈 조절이 필요한 이유

티스토리 스킨 관련 팁 모아 보기

티스토리 스킨편집 할 때 꼭 해 두면 좋은 팁 (ft. 메모장)

티스토리 태그의 용도는? 검색 유입되는 키워드와 다르다.