Minystory

어느 날 Google Search Console에서 CLS 이슈 경고가 들어왔는데, 알고 보니 새 테마를 적용한 날부터 시작된 문제였습니다. 원인은 태그에 width, height 속성이 없는 단순한 이유였지만, 드롭박스 공유 링크를 사용하다 보니 Hugo 빌드 중 …

마크다운에 HTML을 반복해서 붙여넣는 대신, Hugo Shortcodes 하나로 북마크, 탭 UI, 테이블 등을 깔끔하게 삽입할 수 있습니다. Hugo 내장 Shortcodes를 시작으로 Hugo Book 테마의 Columns, Hints, Tabs, 그리고 서택 …

Github 블로그에서 이미지를 삽입할 때마다 브라우저를 오가야 하는 불편함을 해소하기 위해 Dropbox API를 활용한 VS Code 확장 프로그램을 바이브 코딩으로 개발했습니다. 명령어 하나로 여러 이미지를 Dropbox에 업로드하고 마크다운 링크를 자동 삽입 …

매번 반복되는 엑셀 자동화 코드를 한 줄의 함수 호출로 완성하는 통합 함수를 설계합니다. CSV/JSON 데이터에서 헤더를 자동으로 추출하고, 열 명칭으로 서식을 지정하며, 조건부 서식·병합·필터를 순차 적용하는 …

Python OpenPyXL로 엑셀 파일을 읽고 서식을 편집하는 과정을 자동화하는 실전 가이드입니다. 셀 서식, 열 너비 자동 조정, 조건부 서식, BFS 알고리즘 기반 셀 병합, 필터 XML 조작까지 실무에서 즉시 활용 가능한 Python 함수 구현 방법을 코드 …

Hugo 서택스(SeoTax) 테마의 코드블럭에 줄 번호, Mac 스타일 UI, 복사 버튼을 구현한 과정을 다룹니다. highlight.js의 xcode/vs2015 테마를 CSS Variables로 내재화하고, 개발자 블로그에 최적화된 시각적이고 기능적인 코드블럭 …

Hugo 서택스(SeoTax) 테마에 독자의 눈 피로를 줄이는 다크모드 기능을 구현한 과정을 다룹니다. 시스템 설정 자동 감지, localStorage 기반 상태 유지, 토글 버튼 및 키보드 단축키를 통한 테마 전환 시스템 구축 방법을 SCSS 색상 팔레트 설계부터 …

Hugo 서택스(SeoTax) 테마에 독자의 브라우저 언어를 자동 감지하는 동적 다국어 번역 시스템을 구현한 과정을 다룹니다. Hugo의 정적 빌드 기반 다국어 지원 한계를 극복하고, YAML 번역 데이터와 Vanilla JS를 활용해 단일 페이지에서 27개 언어를 …

Hugo 서택스(SeoTax) 테마의 핵심 기능인 동적 검색 페이지 구현 과정을 상세히 다룹니다. Taxonomies로 인한 정적 페이지 증가 문제를 해결하고, Fuse.js와 Vanilla JS를 활용한 고급 검색 필터(카테고리, 태그) 구현 방법을 코드 예제와 …

Hugo 서택스(SeoTax) 테마는 동적 렌더링을 활용해 정적 페이지의 한계를 극복하고, 고급 검색 및 분류(Taxonomy) 기능을 제공합니다. 테마의 설계 목적 및 주요 기능을 소개하니, Hugo 블로그 테마 개발에 관심이 있다면 꼭 참고하세요.