블로그 작업노트 19: 관리자단 변경 및 자잘한 UI 수정

31 views as of January 14, 2025.

관리자단 리스트 페이지 조정
헤딩 스타일 변경
본문내 이미지, 동영상 최대 크기 변경
컬렉션 한글화 및 사이드바 레이아웃 정리

오랜(?)만에 쓰는 작업노트.

작업이 반복되면서 점점 완성형으로 다가가기때문에 작업건이 사라져서 이제는 리뉴얼이나 기능추가 아닌이상 쓸일이 없을거같다.

관리자단 리스트 페이지 조정

기존에 관리자단 레이아웃 수정작업을 거치고 이후에 조금 더 편의성을 위한 UI 개선을 진행했다.

포스팅 리스트

글쓰기 페이지

포스팅관련 리스트는 패딩값을 재조정해 한화면에 내용을 더 많이 보이게 조정했고, 페이징도 더보기와 함께 이중구현해서 원하는 방식으로 리스트 조회를 할 수 있게 백단 코드와 함께 개선했다.

쓰기 페이지는 기존과 크게 차이는없다.

에디터 파일 카드 리스트

최애캐 AI 갤러리 카드 리스트

에디터 파일 카드리스트는 기존 카드리스트에 포스팅 리스트와 같이 두가지 페이징을 적용했으며 마찬가지로 이후에 모든 리스트에도 적용했다.

더불어 삭제로직을 조금 뒤틀었는데, 기존에는 에디터 자체의 이미지 매니저 방식으로 파일을 삭제처리했다면 에디터에서는 이제 이미지의 추가, 재등록만 가능하게 했고, 이미지의 삭제는 내가 따로 구현한 파일 리스트에서만 할 수 있게 구현했다.

더불어 해당 이미지가 로드될때 내 포스팅에서 이미지를 사용중인지 검사하고, 사용중인 이미지면 그 사용중인 글 수정 페이지로 이동하는 링크를 게시하고, 사용중이지않으면 이미지 중앙에 삭제 버튼이 보이도록 구현했다.

마찬가지로 내가 AI로 생성한 그림들을 모아두는 내 전용 갤러리도 비슷한 방식으로 구현해두었고 소스코드 관리를 위해 에디터 파일 카드 리스트와 비슷하게 내부 구조를 구현해놓았다.

헤딩 스타일 변경

기존에 글에서 문맥을 파악하기위한 헤딩 스타일을 아래와 같이 쓰고있었다.

하지만 워낙 주변 글들과 비슷한 스타일로인해 나조차도 단락구분히 힘들정도여서... 개선이 필요하다 생각했다.

기존 스타일

신규 스타일

그래서 위와같이 신규 스타일에 내 블로그의 포인트 색을 이용해서 강조 효과를 주어보았다.

지금까지는 나름 괜찮아 보이는거 같아 만족한다.

본문내 이미지, 동영상 최대 크기 변경

내 블로그의 컨텐츠 가로사이즈는 변화가 많았다.

예전엔 모바일 지향 사이트 한다고 피시에서도 가로사이즈가 540px 정도로 제한된 상태로 내용을 띄워줬고 이후에 광고를 넣고 본격적으로 블로그를 만지다보니 피시 뷰가 중요해져서 570, 620, 680, 700 사이즈를 거쳐 지금은 730px을 컨텐츠 가로사이즈로 잡고있다.

자연스럽게 이미지의 가로 사이즈가 max-width: 100% 로 되어있던 이미지들도 덩달아서 커졌고, 일부 이미지에서 문제가 발생했다.

가로로 긴 landspace 형식의 이미지는 컨텐츠가 넓어져도 이미지의 세로는 적당한 수준이라 봐줄만 했지만 세로로 긴 이미지인 portrait 형식의 이미지는 가로가 넓어지니 세로는 그의 배로 길어지고, 그러다보니 애니메이션 포스터같은경우는 피시에서 화면을 꽉채우는 수준까지 늘어나게되었다.

조정이 필요하다는거는 예전부터 느껴서 여러가지 사이즈로 조정해보았고, 최종적으로 이런 이미지와 동영상의 최대 가로 사이즈를 500px로 조정했다.

더불어 500px의 배수에 해당하는 1000px를 최적화 이미지(다운스케일링)의 가로사이즈로 정하고 백단 코드도 싹 바꾸었다.