포스팅 양식 전격 개편(ver.202408)

 최초로 적용한 포스팅은
혼잣말처럼 넘기는 알고리즘 (파트2) [🔗blogger][🔗티스토리]이긴 한데,

시리즈 번호상 파트1도 마저 적용했습니다.

 

 

 대학때 별다른 양식없이 대-중-소단원만 나눠서 노트 정리하던 블로그지만,
다루는 내용이나 방식이 더는 그 때의 것으로 작성하는데 한계점이 와서 방송대 팁에 대한 포스팅을 하면서 포스팅 양식 업데이트를 시도 했는데 솔직히 성에 차지는 않았습니다. 모바일로 보면, 일부 테이블 테두리 옵션등이 PC환경으로 볼때하고는 다르다거나.

 그렇게 날 잡아서 레이아웃이나 가독성등 HCI의 기초를 아주 약간만 적용해 대대적으로 손을 보게 됐군요.

 

 처음에 포스팅 양식을 손 볼때만 해도 바뀌어봐야 얼마나 바뀌고 과연 공사를 마칠수 있을까로 스스로를 조금 의심하긴 했어도 결과적으로는 대조샷으로 보면... 바꾸길 잘 했다고 봅니다. 솔직히 나같아도 레이아웃 신경 쓴거라곤 테이블로 그룹 묶은 정도인 이 페이지는 가독성이나 내용구성에 딱히 신경쓰지 않았을거라는 예상이 들고, 그리되면 뒤로가기 혹은 탭닫기.

 

CSS를 위한 별도의 저장소를 따로 두진 못하니
- 테이블등은 HTML태그로만 해결

- 레이아웃내 영역별 정보량을 반영한 글자 크기 활용

- 포스팅 에디터에서 편집 중인 구간 식별을 겸한 '그림 이모티콘' 적극활용

- 대-중-소 단원별 여백크기 재편성

 

 

개편전. 상단 목차	개편후. 상단 목차
	양식 적용직후 테스트때 캡쳐한거여서 지금과 달리 '0. 준비'목차가 존재.

 

 

 파트별 목차 정보의 강약 조절과 그림 이모티콘인 ▼과 ▷를 활용해 '접단 패널'의 형태를 빌려오는걸로 이전과 비슷한 면적임에도 정보 및 네비게이션에서 많이 개선됐습니다. 아무래도 안드로이드 프로그래밍을 하던 시기에 각종 UI컴포넌트를 다뤄본 경험이 여기서 활용되지 않았나 싶군요.

 

 캡쳐에도 나오지만,

포스팅시 메인 컬러는 rgb(119, 209, 216)으로 잡았습니다. 고전적인 SF풍 LED색이 되버리긴 했어도 색약자가 식별 가능한 색상 범위가 청록색이라더군요.

 저 역시 난시라는 개인적인 문제가 있다보니 가독성이 좋은 자료들로 받아온 도움이 적지 않다보니, 그런 학습자에게 진입장벽을 조금이라도 낮추도록 신경 쓰면 괜찮지 않을까로 생각이 이어지면서 메인 컬러가 정해졌습니다.

 

 

개편전. 대분류	개편후. 대분류

 

 

 머릿말에 해당하는 공통된 안내사항은... 매 포스팅마다 있다보니 그냥 폰트 사이즈를 줄이는걸로 타협.

 

 

개편전. 테이블	개편후. 테이블

 블로그가 프로그래밍을 위주로 구성된터라,

 수도코드 혹은 코드 조각이 종종 들어가다보니 글자의 폭이 고정된 폰트가 좀 더 나을거 같긴한데 다행스럽게도 '나눔 고딕 코딩'이 있더군요. (티스토리는 나눔고딕)