• 태블릿, 스마트폰 규격에 맞춰 반응형으로 노출되는 열의 숫자를 2열, 1열로 줄이고 싶은데, 여러 번 요청해도 안된다.
• 크기를 줄일 때 게시글의 순서가 갑자기 바뀌는 것을 보니 이 전체가 눈으로는 3열로 나뉜 것 같지만 실제론 다른 구성인 것으로 보인다.
• 내일은 3개의 단으로 HOME 화면 부분을 나눠보는 것을 시도해봐야겠다.

• HOME 화면에서 드래그를 해서 내리는데 아래 스크린샷처럼 제목부분이나 Search부분의 크기가 바뀌지 않고 튀어나오다가, 드래그를 더 하면 갑자기 위로 올라가버리는 현상이 발생했다.
• 개선 요청했다.
• Codex가 3m 45s 동안 작업 후 바로 고쳤다.

아쉬움

• 내 역량에 대한 아쉬움이 크다. HTML, CSS 내용을 아직 모르는게 많아서 아주 정확하게 요청사항을 보내지 못하고 있다.
• Codex가 피드백 하는 부분에서 워딩 힌트를 얻고 키워드를 배껴서 보내면서 조금씩 익히고 있다.
• 본문 ‘카드’ 라던가, padding, ‘사이드바’같은 단어가 바로 그것이다.

개요

2026년 6월 26일에는 Ideography Home Sidebar Features 플러그인과 커스텀 CSS를 중심으로 HOME 목록 레이아웃, 반응형 그리드, 좌측 사이드바 폭, 모바일 메뉴 버튼, 카드 디자인을 추가로 다듬었다.
플러그인 버전은 0.1.22에서 0.1.30까지 업데이트되었다.

수정된 주요 파일

• ideography-home-sidebar-features/ideography-home-sidebar-features.php
• lueim-vana-custom-css.css
• History_modificaion_260624.md
• ideography-home-sidebar-features.zip

플러그인 버전 업데이트

오늘 작업을 통해 Ideography Home Sidebar Features 플러그인이 0.1.30까지 갱신되었다.

주요 흐름은 다음과 같다.

• 0.1.23부터 HOME 카드, 사이드바, archive 헤더 정리 시작
• 0.1.26에서 HOME 목록 카드 크기와 반응형 열 배치 조정
• 0.1.28부터 Masonry 레이아웃 보정 강화
• 0.1.29에서 HOME 목록을 CSS Grid 기준으로 재정리
• 0.1.30에서 모바일 햄버거 버튼과 데스크톱 워드마크 디자인 정리

HOME 목록 카드 변경

HOME 목록 카드의 이미지, 텍스트, 여백, 반응형 배치가 여러 차례 조정되었다.

• 목록 본문 미리보기를 3줄 clamp 기준으로 축소
• 이미지와 텍스트 영역 padding을 3px에서 5px, 이후 7px 기준으로 확대
• 본문 미리보기 하단 여백을 10px, 12px 기준으로 조정
• 본문 미리보기 텍스트 색상을 rgba(51, 51, 51, 0.5)로 낮춰 더 연하게 표시
• HOME 카드 제목 크기를 데스크톱 기준 약 30.6px, 스마트폰 기준 약 25.5px로 확대
• 카드 이미지와 텍스트 padding 영역의 배경을 투명하게 정리
• 카드 세로 간격은 36px 기준으로 맞춤

HOME 반응형 그리드 개선

Masonry가 남기는 inline style 때문에 반응형 레이아웃이 흐트러지는 문제를 보정했다.

• HOME 목록에 .ivf-home-loop-grid 클래스를 추가
• HOME 계열 화면에서도 반응형 규칙이 안정적으로 적용되도록 보강
• Masonry가 삽입하는 position, left, top, transform, width, height 값을 반복 제거
• DOMContentLoaded, load, resize, 지연 실행 시점에 레이아웃을 다시 정리
• MutationObserver를 추가해 Masonry가 inline style을 다시 넣는 경우에도 재보정
• 최종적으로 HOME 목록을 CSS Grid 기준으로 고정
• 데스크톱은 3열, 태블릿은 2열, 스마트폰은 1열로 정리

좌측 사이드바 및 Ideography 타이틀 변경

좌측 사이드바 폭과 Ideography 타이틀 디자인을 계속 다듬었다.

• 데스크톱 사이드바 폭을 187px로 축소
• 태블릿 사이드바 폭을 145px로 축소
• Ideography 제목이 줄바꿈되지 않도록 글자 크기와 줄바꿈 규칙 조정
• 기존 장식선을 제거하고 어두운 파란색 배경 박스 형태로 정리
• 이후 사각형 배경과 장식선을 다시 제거하고 어두운 파랑 워드마크형 텍스트로 변경
• 1180px 이하에서는 브랜딩/로고 영역을 숨겨 창 축소 시 타이틀이 크게 고정되는 문제를 방지

모바일 메뉴 변경

태블릿과 스마트폰에서 보이는 햄버거 버튼과 메뉴 동작을 정리했다.

• 1180px 이하에서 본문 좌우 padding을 clamp(14px, 4vw, 28px) 기준으로 조정
• 햄버거 버튼을 어두운 파랑 기반의 리퀴드 형태 버튼으로 변경
• 버튼 안의 흰색 3줄, radial highlight, inset shadow를 추가
• 부드러운 blob 애니메이션을 추가
• prefers-reduced-motion 환경에서는 애니메이션이 꺼지도록 처리
• 창을 줄였을 때 브랜딩 영역이 커지는 문제를 막기 위해 모바일/태블릿에서는 로고 영역을 계속 숨김

상단 피처 영역 변경

HOME 상단의 Popular tags와 Drawing pick 영역도 시각적으로 정리되었다.

• Popular tags 라벨 글자와 장식선을 흰색으로 변경
• Drawing pick 라벨과 제목을 한 줄로 배치
• 라벨과 제목 사이에 세로 구분선을 추가
• Drawing pick 이미지 위 레이어 박스에 제목과 작성일을 한 줄로 표시
• 제목과 날짜 사이 간격을 5ch 기준으로 넓힘
• 날짜 폰트 크기를 제목과 동일하게 조정
• 이미지 아래에는 카테고리명 | 제목 형태의 한 줄 영역을 추가

Archive / Category / Tag 화면 변경

분류 목록 화면의 헤더와 기본 테마 출력도 정리되었다.

• category, archive, tag 목록 상단에 현재 분류명 표시
• Page X of N 페이지 정보를 함께 표시
• 페이지 정보는 우측 정렬되도록 조정
• 테마 기본 카테고리 설명 박스를 숨김
• 플러그인 archive 헤더만 보이도록 정리
• archive 헤더의 카테고리명 글자 크기를 키우고 밝은 회색 계열로 조정

새 글 배지 변경

새 글 N 배지도 시각적으로 조정되었다.

• 기존 골드 톤에서 빨간색 계열로 변경
• 흔들림 중심의 모션에서 중심 회전 모션으로 변경
• HOME 카드에서 더 눈에 띄는 배지로 정리

배포 파일

오늘 최종적으로 갱신된 배포 파일은 다음과 같다.

• ideography-home-sidebar-features.zip

최종 상태

0.1.30