지난 8월말 티스토리에서는 관리자 화면의 변화라는 대대적인 개편을 했다. 관리자 화면은 외부에 공개되는 화면이 아니라서 변화를 크게 체감하지는 못했다.
그 이후로는 그리 눈에 띄는 변화는 없었는데 몇일전 글 하단의 공감, 공유, 신고 기능 3가지를 하나로 통합하여 아이콘으로 구성된 버튼 형식으로 변경되었다.
변경된 통합 버튼
이전에는 공감 버튼과 SNS 공유 버튼 신고 버튼이 각각 별도로 구성되어 있어 화면도 많이 차지하고 디자인도 별로 마음에 들지 않아 공감 버튼은 보이지 않도록 했었고, 공유 버튼은 별도로 아이콘을 구성하여 사용했고 신고 버튼도 울며 겨자먹기로 사용했다. (신고 버튼도 바꿀수는 있지만 귀찮다;;;)
이번에 3가지 기능이 통합되면서 치환자가 아닌 각각의 기능 아이콘에 클래스가 지정되어 있어 꾸미기도 훨씬 수월해졌다. 구조를 살펴보자.
공감 공유 신고 버튼 구조
<div class="container_postbtn">
<div class="postbtn_like">
<div class="like_btn" data-uoc-svc="tistory" data-uoc-uid="389140_493" data-uoc-sc="304" data-uoc-pcurl="" data-uoc-fetchurl="http://api.kakao.tistory.com/like/fetch?uid=389140_493">
<label class="uoc-icon">
<span class="ico_postbtn ico_like"></span>
<span class="txt_like uoc-text">공감</span>
<span class="txt_like uoc-count"></span>
<input type="button" class="inp_btn uoc-button"></label>
</div>
<span class="ico_bar"></span>
<label>
<span class="ico_postbtn ico_sns">sns</span>
<input type="button" class="inp_btn"></label>
<span class="ico_bar"></span>
<label data-entry-id="493">
<span class="ico_postbtn ico_report">신고</span>
<input type="button" class="inp_btn">
</label>
</div>
</div>
통합 버튼의 배경 컬러 변경
각각의 클래스를 통해 테두리를 변경하거나 배경의 컬러를 변경할 수도 있고 삭제할 수도 있을 듯 하다.
아이콘은 이미지 파일이라 마음에 들지는 않는다.
현재는 마우스 오버시 아이콘 효과만 추가해 보았다.
왼편으로 정렬되어 있는 통합 버튼의 위치를 변경하는것도 해당 클래스의 CSS 를 이용하면 아래와 같이 간단하게 변경할 수 있다.
개인적으로는 기본 상태인 왼쪽 정렬이 더 마음에 든다. 가운데 정렬시 뭔가 어색하고 이상해 보인다.
통합 버튼의 가운데 정렬과 테두리 색상 변경
결국 기존에 있던 SNS 공유 버튼은 제거했고 작동하지 않는 공감 버튼 제거 문구도 삭제했다.
이번 통합은 개인적으로는 굉장히 마음에 든다.
여러가지 흩어져 있던 기능들을 하나로 묶은 것도 좋고 디자인도 이 정도면 나쁘지 않다고 생각한다.
지금도 너무 너무 너무 너무 X 100 훌륭하고 만족하고 있지만 티스토리의 발전적인 이런 변화는 적극 환영하고 칭찬해주고 싶다.
티스토리 만세!! ㅡ,ㅡ;
