2021. 2. 27. 16:19
그동안 디자인을 굳이 바꿀 필요성을 못느끼고 거의 방치해두다 시피하다가,
모바일 접근성이 너무 형편없음을 깨닫고
한 달 정도 걸려서 대략적인 디자인을 잡았습니다.
아직 코드 정리가 전혀 되어있지 않은데
언젠가는 정리하겠죠...
처음에는 아예 밑바닥부터 다 코드를 짜려고 했는데,
티스토리 치환자에 대한 기초 지식이 거의 없었습니다.
대략적으로는 알고 있었지만, 그게 10년전이다 보니까요.
결국 기존 스킨을 수정하는 방향으로 선회했습니다.
티스토리에서 기본 제공하는 Portfolio 라는 이름의 스킨을 기본으로 하여 입맛대로 수정하기로 했습니다.
1. 모바일 접근성
가장 중점을 둔 부분은 위에서도 말했듯 모바일 접근성입니다.
티스토리 스킨계(?)에서는 반응형 디자인으로 통용되는데,
모바일과 PC 환경에서 UX를 해치지 않는 선에서
각 디바이스에 최적화된 화면을 자동적으로 구성해주는 방식으로 이해했습니다.
제가 모르는 사이 CSS가 많은 발전을 거듭해서
화면 가로 사이즈를 기준으로 다른 스타일을 적용할 수 있도록 되어있더군요.
전체적인 여백이나 글 하단의 버튼 등의 디자인에서 유용하게 사용했습니다.
두번째로 중점을 둔 부분은 버튼의 크기와 모양입니다.
모바일에서는 버튼 하나하나가 크지 않으면 매우 짜증을 유발하기 때문에
가능하면 작은 크기의 아이콘을 모조리 없애려고 했습니다.
또한, 터치가 가능한 요소는 box shadow를 입혀 그렇지 않은 요소와 구분이 되도록 했습니다.
세번째는 간결성입니다.
기존 스킨은 화면에 엄청나게 많은 정보가 있었습니다.
PC를 기반으로 하기도 했지만, 한 눈에 정보들을 확인할 수 있다는 장점이 있었죠.
다만 이러한 부분은 블로그라기 보다는 홈페이지에 가깝다는 생각이 들었습니다.
새로 올라온 댓글은 블로그 주인 외에는 그다지 관심갈만한 정보는 아닐겁니다.
최근 태그 목록 등도 사실 화면을 채우는 요소 이외의 별다른 기능으로 생각되지 않았습니다.
카테고리를 햄버거 메뉴에 모조리 몰아넣고, 그 외의 정보는 대부분 숨겨버렸습니다.
네번째로 글 본문 하단의 페이지네이션을 제거했습니다.
이전 글, 다음 글 정도는 제공해도 좋을 것 같아
카테고리 목록의 다른 글 보기 기능을 약간 수정하여 해당 기능을 제공하고,
모바일에 한정하여 카테고리 글 목록 페이지로 갈 수 있는 링크를 추가 제공하였습니다.
대신, 카테고리 글 목록 페이지의 경우에는 페이지네이션을 유지하였습니다.
2. 햄버거 메뉴
스크롤 이후 햄버거 메뉴가 자연스럽게 상단에 고정되도록 했습니다.
메뉴를 열고나서 백 버튼 클릭시 이전 페이지로 넘어가지 않도록 했습니다.
햄버거 메뉴를 열고 나서 새로고침을 하더라도 메뉴가 열리도록 했습니다.
- 이렇게 안하면 백 버튼을 두 번 눌러야 이전 페이지로 가게 됩니다 ㅜㅜ
3. 폐쇄적인 티스토리 요소 수정
티스토리에는 치환자만으로 수정이 불가능한 요소들이 있습니다.
대표적인 것 중 하나가 공감 버튼입니다.
JQuery등 DOM을 직접 건드리면 수정을 할 수는 있으니 폐쇄적이라는 단어에 어폐가 있을지는 모르겠습니다.
다만 순수 HTML과 CSS로는 수정이 쉽지 않은 것은 사실입니다.
예를 들어 그냥 단순히 공감 버튼의 '공감'이라는 글자를 수정하고 싶은데
JQuery를 쓰지 않으면 방법이 없습니다.
또한 이미 정의된 CSS에서 !important를 사용하고 있어서 이를 우회하는 방법을 찾아야 합니다.
이외에도 댓글이 많을 때 자동으로 표시되는 댓글 더 보기 버튼도 따로 치환자로 표현되지 않으므로,
사용자가 직접 댓글을 수십 개 달고나서 class 명을 확인하고 CSS를 수정하는 수밖에 없습니다.
티스토리에서 댓글 수정 / 삭제 / 답글의 답글 달기 등은 새 창으로 뜨도록 되어있습니다.
이 부분은 티스토리 API에서 제공하는 기능을 이용하면 새 창을 띄우지 않고도 제공이 가능할 것으로 생각됩니다.
다만 아직 미뤄두고 있습니다. 너무 귀찮아요 ㅜㅜ
4. 댓글 목록
기존의 댓글 목록을 iMessage 스타일로 만들어보고 싶었습니다.
iMessage gradient effect
...
codepen.io
위 링크를 참조하여 나름의 수정을 거쳤습니다.
한 줄 짜리 메시지와 여러 줄 짜리 메시지의 여백을 다르게 주었고,
블로그 주인장의 답변에 대한 유저의 답글은 다시 오른쪽에 정렬되도록 했습니다.
유저 본인이 쓴 메시지가 왼쪽에 표시되면 조금 이상할 것 같다는 생각이 들었거든요.
기존 링크에서는 여백 근처에 줄이 생기는 버그(?)가 있어서 이를 수정하는데 약간 애를 먹었습니다.
또한 댓글 창이 고정 크기가 아니라서,
전체 크기의 그라이언트를 주는 대신 개별 메시지에 그라디언트를 입히도록 했습니다.
추가적으로, 댓글이 기본적으로 숨겨지도록 수정했습니다.
앞서 언급한 간결성의 연장선상으로 생각했습니다.
5. 제목 및 날짜 변경
제목이 길어지는 경우 상당히 보기 싫어지는 부분이 있어서,
특정 조건에 대해서 자동으로 줄 바꿈을 넣도록 했습니다.
카테고리도 이와 비슷하게,
카테고리의 하위 카테고리까지 표시해야 하는 경우
줄 바꿈을 하고 글자 크기를 줄이는 방식으로 표현했습니다.
날짜는 굳이 게시물이 올라온 시각까지 알 필요가 없고
디자인적으로 변형을 주고 싶어서 일 - 월 - 년 순으로만 표시하도록 변경했습니다.
댓글의 날짜는 아예 표시하지 않도록 했습니다.
6. 고민 중인 부분
댓글 페이지를 수정하면서
댓글 수정/삭제는 말풍선을 눌러야하고,
댓글의 댓글은 프로필을 눌러야 작성할 수 있도록 해둔 상태입니다.
추가적인 아이콘을 만들면 모바일에서 누르기가 너무 힘들기 때문이죠.
다만, 유저가 눌러보기 전에는 그런 기능이 있는지 알기가 어렵다는게 문제인데,
어떻게 수정할지 고민 하는 중입니다.
또한 탐색 기능을 제거해 둔 상태인데 이걸 어디에 넣을지 고민중입니다.
이외에도 생각해둔 것들이 많으나,
일단 현재 버전이 대부분 마음에 들기 때문에 당분간은 큰 수정은 없을 것 같습니다.