워드프레스에서 이미지를 많이 올리다 보면 게시물이 지나치게 길어지는 경우가 있습니다. 특히 지도나 서버 설정 화면처럼 캡처 이미지가 많은 글은 스크롤이 너무 길어져서 모바일에서 보기 불편해질 수 있습니다.
저 역시 OpenLiteSpeed 관련 설정 글과 워드프레스 튜토리얼을 작성하면서 이미지 정리가 가장 고민이었습니다. 처음에는 기본 갤러리를 사용했는데 정렬이 어색했고, 이미지 크기도 일정하지 않아 글 흐름이 깔끔하지 않았습니다.
그러다 여러 플러그인을 테스트해본 뒤 지금은 FooGallery를 계속 사용하고 있습니다. LiteSpeed Cache 환경에서도 충돌이 거의 없었고, 이미지가 많은 게시물에서도 로딩 흐름이 안정적인 편이었습니다.
목차
FooGallery 사용법을 찾게 된 이유
처음에는 단순히 이미지 정렬만 생각했습니다. 그런데 실제 운영에서는 문제가 더 많았습니다.
- 이미지가 많아지면 모바일 스크롤이 길어짐
- 기본 갤러리는 썸네일 정렬이 일정하지 않음
- 이미지를 확대해서 보기 불편함
- 게시물 흐름이 중간중간 끊어짐
- 서버 관련 캡처 화면이 너무 커서 가독성이 떨어짐
특히 OpenLiteSpeed와 LiteSpeed Cache 조합에서는 이미지 최적화를 많이 사용하기 때문에 갤러리 호환성도 중요했습니다. 몇 가지 플러그인을 비교했는데 FooGallery 사용법이 가장 단순했고, 이미지 정렬 스타일도 자연스러운 편이었습니다.
플러그인 설치 후 가장 먼저 확인했던 부분
워드프레스 관리자에서 플러그인 추가 메뉴로 들어가 FooGallery를 검색하면 바로 확인할 수 있습니다. 설치 수가 많고 최근 업데이트도 계속 이어지고 있어서 워드프레스 버전 충돌 부분은 비교적 안정적으로 느껴졌습니다.
지원 포럼에도 실제 오류 사례와 해결 방법이 많이 올라와 있어서 문제를 찾기 편했던 점도 마음에 들었습니다.
글 작성 화면에서 바로 갤러리를 추가했던 흐름
FooGallery 사용법에서 편했던 부분 중 하나는 글 작성 화면에 버튼이 바로 추가된다는 점이었습니다. 플러그인을 활성화한 뒤 새 글 화면으로 들어가면 Add FooGallery 버튼이 나타납니다.
워드프레스 기본 블록처럼 바로 연결되는 느낌이라 기존 글 흐름을 크게 바꾸지 않아도 됐습니다. 특히 서버 설정 가이드처럼 캡처 이미지가 많은 글에서는 중간중간 갤러리를 삽입하는 방식이 훨씬 깔끔했습니다.
이미지를 불러올 때 가장 많이 사용한 방식
갤러리 편집 화면으로 이동하면 Add From Media Library 버튼을 통해 기존 이미지를 바로 가져올 수 있습니다. 저는 대부분 OpenLiteSpeed 설정 캡처나 워드프레스 화면 이미지를 미리 업로드해두고 사용하는 편이라 이 기능을 가장 많이 사용했습니다.
Gallery Preview 기능도 있어서 실제 배열 상태를 바로 확인할 수 있었는데, 모바일에서 이미지가 어떻게 보이는지 확인할 때 꽤 편했습니다.
FooGallery 사용법에서 가장 많이 사용했던 스타일
처음에는 기본 반응형 스타일만 사용했는데 게시물 종류에 따라 계속 바꾸게 됐습니다.
특히 많이 사용했던 스타일은 다음과 비슷했습니다.
- 반응형 이미지 갤러리
- 정당화 갤러리
- 벽돌 이미지 갤러리
- 단순 포트폴리오
지도 게시물에서는 정당화 갤러리를 자주 사용했고, 서버 설정 캡처는 반응형 스타일이 가장 보기 편했습니다. 검색 엔진에서도 이미지 구조를 조금 더 명확하게 읽는 느낌이 있었고, 모바일에서 이미지 흐름도 이전보다 안정적이었습니다.
행 높이와 여백 설정을 자주 수정했던 이유
FooGallery 사용법에서 의외로 중요한 부분이 여백과 행 높이였습니다. 기본 상태로 두면 이미지 간격이 너무 넓거나 모바일에서 크기가 어색한 경우가 있었습니다.
특히 LiteSpeed Cache 이미지 최적화와 함께 사용하는 경우 썸네일 비율이 달라질 수 있어서 직접 수정하는 편이 훨씬 안정적이었습니다.
저는 보통:
- 행 높이 약간 낮춤
- 여백 최소화
- 전체 크기 이미지 연결 사용
방식으로 정리했습니다.
이렇게 바꾸고 나니 이미지가 많은 게시물도 훨씬 짧고 정리된 느낌이 강했습니다.
모습 설정에서 가장 체감이 컸던 부분
모습 설정에서는 그림자와 둥근 모서리보다 로딩 방식 차이가 더 크게 느껴졌습니다. 특히 이미지가 많은 게시물에서는 로딩 아이콘과 전환 효과가 부드러운 쪽이 훨씬 보기 편했습니다.
처음에는 기본값 그대로 사용했는데 모바일 환경에서 이미지가 갑자기 튀어나오는 느낌이 있어서 조금씩 수정하게 됐습니다. OpenLiteSpeed 환경에서 HTTP/3를 사용하는 경우 이미지 로딩 자체는 빨랐지만 갤러리 애니메이션이 어색하면 체감 속도가 오히려 느리게 느껴질 수 있었습니다.
그래서 로딩 효과를 단순하게 유지하는 쪽이 훨씬 안정적이었습니다.
FooGallery 사용 후 체감했던 변화
처음에는 단순히 이미지 정리 목적이었습니다.
그런데 적용 후에는 생각보다 변화가 컸습니다.
- 모바일 스크롤 길이 감소
- 이미지 많은 글 가독성 개선
- 관련 이미지 흐름 정리
- 썸네일 구조 안정화
- 게시물 집중도 증가
특히 지도 게시물처럼 이미지가 여러 장 들어가는 글에서는 차이가 꽤 크게 느껴졌습니다.
LiteSpeed Cache 이미지 최적화와 함께 사용해도 큰 충돌 없이 유지됐고, 캐시 삭제 이후에도 배열이 무너지지 않았습니다.
실제 운영하면서 중요했던 부분
FooGallery 사용법 자체는 어렵지 않았지만 처음부터 너무 많은 효과를 넣는 것은 오히려 복잡하게 느껴졌습니다.
저도 처음에는 그림자와 애니메이션을 많이 넣었다가 결국 단순한 구조로 다시 정리했습니다.
지금은:
- 반응형 스타일 유지
- 여백 최소화
- 모바일 가독성 우선
- 이미지 확대 기능 유지
정도로만 사용하고 있습니다.
워드프레스는 이미지가 많아질수록 페이지 구조가 복잡해지는데, 이런 부분을 정리하는 것만으로도 사용자 흐름이 꽤 달라지는 느낌이 있었습니다.
FAQ
FooGallery 사용법은 무료 버전만으로 충분한가요?
기본 갤러리와 반응형 이미지 정렬 정도는 무료 버전만으로도 충분했습니다. 일반 블로그 운영 기준에서는 부족함이 크지 않았습니다.
FooGallery 사용법이 LiteSpeed Cache와 충돌하나요
현재까지는 큰 충돌 없이 사용 중입니다. 다만 이미지 최적화 기능을 강하게 사용하는 경우 썸네일 캐시를 한 번 비워주는 것이 안정적이었습니다.
FooGallery 사용법에서 가장 추천하는 스타일은 무엇인가요?
이미지가 많은 게시물은 정당화 갤러리나 반응형 이미지 갤러리가 가장 보기 편했습니다. 모바일 화면에서도 흐름이 자연스러웠습니다.
