블로그의 종류는 굉장히 많습니다. 국내에서는 네이버 블로그, 티스토리가 인기를 얻지만 해외에서는 워드프레스가 대표적인 블로그라고 할 수 있습니다. 워드프레스는 사이트형 블로그이기 때문에 자유롭게 자신이 원하는 스타일로 바꿀 수 있지만 서버비가 든다는 점에서 사진 용량 줄이기 많은 신경을 써야 합니다. 너무 큰 용량의 사진을 올릴 경우에는 서버 용량의 한계가 빨리 오기 때문에 비용이 많이 들 수 있고 방문자는 사이트 로딩 시간이 길어서 이탈을 할 수 있습니다. 테마(스킨)에 따라서 자동으로 이미지를 줄여주기도 하지만 그것은 로딩 속도에 관한 것이고 업로드 용량은 그대로 인 경우가 많습니다. 그래서 애초에 사진 용량을 줄여서 올리는 것이 좋습니다. 그 방법 중에서 알씨와 워드프레스 플러그인으로 하는 방법을 알아보겠습니다. 사진 용량 줄이기 알씨 활용 알씨는 대표적인 < 이미지 뷰어 프로그램 >입니다. 다양한 기능 중에서 사진의 해상도, 용량을 줄여주는 기능 뿐만 아니라 동영상 만들기, SNS 공유, 보정 기능, 포맷 변환 등이 있습니다. 무료로 다운로드 할 수 있다는 점과 포토샵처럼 어렵지 않기 때문에 누구나 쉽게 사용할 수 있다는 점에서 많은 분들이 워드프레스 사진 용량 줄이기 하실 분들은 필수 프로그램이라고 할 수 있습니다. 알씨 프로그램을 설치하는 방법도 어렵지 않은데 네이버 검색창에서 < 알씨 >라고 검색을 하게 되면 소프트웨어 정보에서 개별로 보실 수도 있고 바로 아래에 웹사이트에서 제작자인 < 이스트소프트 알툴즈 > 사이트도 보실 수 있습니다. 둘 중에 하나를 이용하셔서 설치를 하시면 됩니다. 공식 사이트를 방문해서 설치를 하시려는 분들은 아래를 클릭하시면 바로 다운로드 페이지를 보실 수 있습니다. ▶ 알씨 프로그램 다운로드 페이지로 가기 알씨를 설치 완료하게 되면 윈도우 탐색기에서 이미지를 클릭하게 되면 알씨 프로그램으로 보실 수 있습니다. 여기서 용량을 줄이실 사진에서 < 마우스 우 클릭 >을 하게 되면

 워드프레스를 운영하시는 분들이라면 속도에 대해서 많은 신경을 쓰게 되실 것입니다.저는 제가 열어보았을 때 느리지 않아서 신경 쓰지 않고 있다가 최근에 Google Search Console 에서 속도가 느린 게시물들이 표시가 되어서 PageSpeed Insight 사이트에서 속도 측정을 해보고 빨간색 범위에 들어서 당황스러웠습니다. 그래서 측정 결과에서 수정하라는 내용들을 보면서 수정을 하고 있는데 정말 쉽지 않습니다. 포털에 검색을 해도 제가 원하는 정보을 찾기가 쉽지 않아서 외국 사이트를 번역기 돌리면서 알아보았습니다. 저 같이 프로그래밍에 대해서 잘 모르시는 분들이 어려울 수 있는 ‘ 중요한 요청 로드하기 ‘ 해결 방법에 대해서 정리해보겠습니다. PageSpeed insight 저 같은 경우는 ‘ 중요한 요청을 미리 로드하기 ‘  항목에서 폰트 로드 절감 효과가 540ms가 나왔습니다. 여기서 설명을 보게 되면 < link rel=Preload >를 사용하여 우선 순위를 정하라는 내용을 볼 수 있는데 폰트 같은 경우에 CSS 파일의 맨 아래에 위치하는 경우가 많기 때문에 우선 순위를 높여서 미리 로드되게 하라는 것입니다. 그럼 먼저 다양한 중요한 요청을 로드하게 하는 플러그인을 먼저 소개를 드리고 폰트 문제를 해결한 방법을 알려드리겠습니다. Wp Fastest Cache 중요한 요청을 미리 로드하기를 수정하기 위해서 그 동안 설치를 진행하지 않았던 캐쉬 플러그인을 설치하게 되었습니다. 캐쉬 플러그인은 사이트의 속도를 빠르게 해주는 것으로 PageSpeed insight에 나오는 대부분의 문제를 수정할 수 있습니다. 제가 선택한 것은 WP Fastest Cache 라는 캐쉬 플러그인으로 1백만 이상이 사용하고 있는 것으로 계속 업데이트가 진행되고 있기 때문에 안심하고 사용할 수 있습니다. WP Fastest Cache 설치하고 설정을 보게 되면 Preload라는 것이 보이게 됩니다. 이것을 체크하게 되면 대부분의 Preload 문제를 해결하실

 사이트 속도 검사를 해보고 만족할 만한 속도가 나오지 않아서 다양한 방법을 검색했는데 가장 많이 추천을 한 것이 CDN 적용이었습니다. 그래서 라이트 세일을 사용하기 때문에 AWS Cloudfront 적용하기로 했습니다. 근데 라이트세일 워드프레스 설치할 때도 그랬지만 처음 하는 것이기 때문에 다양한 글들을 검색해보며 하다 보니 시간이 오래 걸렸는데 저 같이 사이트 최적화를 위해서 CDN 적용하시려는 분들을 위해서 제가 했던 방법을 정리해보겠습니다. 다양한 옵션들이 있기 때문에 제가 한 설정은 절대적이지 않습니다. 그래서 자신의 환경에 맞게 설정하기 위해서 저의 설명과 함께 추가적으로 검색을 해서 적용해보시길 바랍니다. Cloudfront 생성 라이트세일로 워드프레스를 만들었기 때문에 다른 CDN 서비스 보다는 한 곳에서 하는 것을 원하실 것입니다. 저도 그렇기 때문에 Cloudfront 사용하게 되었습니다. 먼저 AWS 서비스에서 Cloudfront 들어가게 되면 상단에 Create Distribution 버튼이 있는데 이것을 클릭하시면 됩니다. 다음 화면에서는 2가지 선택이 나오게 되는데 여기서 Web 선택하시면 됩니다. 여기서 문구를 보게 되면 왜 이것을 선택하는지 알 수 있습니다. 정적 및 동적 컨텐츠(ex: html, css, php, 이미지 파일)의 배포 속도를 높입니다. HTTP 또는 HTTPS 사용하여 미디어 파일을 배포하십시오. 개체를 추가, 업데이트 또는 삭제하고 웹 양식에서 데이터를 제출하십시오. 실시간 스트리밍을 사용하여 이벤트를 실시간으로 스트리밍하십시오. Amazon S3 버킷 또는 웹서버 중 하나에 파일을 저장합니다. 이 문구를 잘 보셔야 하는데 라이트세일을 사용하고 있기 때문에 S3가 아닌 웹서버라고 할 수 있습니다. 이것을 토대로 Cloudfront 설정하게 될 것이기 때문에 S3 버킷 사용해서 파일을 저장하고 있다면 다르게 설정해야 합니다. 저는 라이트세일 기준으로 설명드리겠습니다. Get Started 버튼을 누르게 되면 설

 제가 사용하는 라이트세일은 다른 곳들과 다르게 PHP 업그레이드가 설정만으로 업그레이드가 되는 것이 아닌 인스턴스 이전을 통한 방법으로 해야 하기 때문에 복잡해서 그 동안 미루었는데 이번에 시간을 두고 진행을 하기로 했습니다. 근데 그 동안은 인스턴스 이전을 통한 PHP 업그레이드 과정을 정리하지 않아서 매번 다시 검색을 하면서 진행하였기 때문에 이번에 순서대로 정리를 해서 다음에 다시 PHP 업그레이드를 할 때 참고할 수 있도록 하려고 합니다. 아래에 제가 정리하는 부분은 저의 기준에 맞춘 것이기 때문에 모든 인스턴스 이전 방법과 다를 수 있습니다. 그래서 이 글을 보실 분들은 그대로 따라하기 보다는 자신의 설정과 비교를 해보고 참고용으로 사용하시길 바랍니다. 인스턴스 이전을 하기 전에는 문제가 발생할 수 있기 때문에 기존에 사용하는 인스턴스는 스냅샷을 해두어서 문제가 생길 경우 다시 복구할 수 있도록 합니다. 오랜만에 인스턴스 이전을 하는 것이기 때문에 많은 오류들이 발생했고 그 부분도 아래에 설명을 하도록 하겠습니다. 인스턴스 이전 – 백업 인스턴스 이전을 하기 위해서는 먼저 기존 워드프레스를 백업해야 하는데 다양한 플러그인이 있지만 저는 UpdraftPlus를 사용하여서 백업을 진행하였습니다. 해당 플러그인은 용량이 클 경우 유료로 전환을 해야 하지만 구글 드라이브 공간을 이용하게 되면 무료로 백업을 할 수 있습니다. 플러그인을 설치하신 후에 상단 메뉴에서 설정을 볼 수 있고 들어가셔서 구글 드라이브 선택하고 인증하면 저장 공간으로 사용할 수 있습니다. 백업은 100% 오류 없이 저장하는 것은 아니기 때문에 실패한 부분을 찾아서 직접 업로드를 진행해주셔야 합니다. 저 같은 경우도 이미지가 일부 오류가 발생하면서 직접 파일을 업로드하였습니다. 플러그인 사용 방법에 대해서는 글을 작성한 적이 있기 때문에 해당 게시물을 참고해 보시길 바랍니다. – 워드프레스 백업 할 수 있는 Updraftplus 플러그인 인스턴스 생성 기존의 워드프레스를 백업하였다면 라이

 AWS Lightsail 워드프레스를 운영하고 있는데 최근에 최적화를 위해서 다양한 방법을 알아보는 와중에 HTTP/2 라는 것을 알게 되었습니다. 기존에 속도 최적화를 위한 다양한 방법들을 검색할 때는 본 적이 없는 내용이었는데 GTmetrix 사이트에서 측정을 한 결과 추천 항목에서 볼 수 있었습니다. HTTP/2는 월드 와이드 웹에서 쓰이는 HTTP 프로토콜로 HTTP 1.1 이 텍스트 전송 프로토콜이라면 HTTP/2는 사진, 동영상 등과 같은 고용량의 데이터 전송을 위해서 개발되었습니다. HTTP 1.1 프로토콜이 하나의 파일만 전송한다면 HTTP/2는 병목 현상 없이 한꺼번에 파일을 전송하기 때문에 지연 시간을 감소시켜 워드프레스 페이지 로드 속도를 개선할 수 있습니다. [지원하는 기능] HTTP 헤더 데이터 압축 서버 푸시 기술 요청을 HTTP 파이프라인으로 처리 HTTP 1.X의 HOL blocking 문제 해결 TCP 연결 하나로 여러 요청을 다중화 처리 AWS Lightsail HTTP/2 확인 먼저 HTTP/2가 적용되어 있는지 확인을 해봐야 하는데 Geekflare HTTP/2 Test 사이트에서 자신의 주소를 입력하게 되면 적용되어 있는지 확인할 수 있습니다. 사이트 이용하지 않고 확인하는 방법은 크롬과 엣지 브라우저에서 F12키를 누른 후에 Network 선택하고 Name 빈 공간 마우스 우 클릭해서 Protocol 를 활성화하게 되면 위에 보이는 것처럼 HTTP/2가 적용되어 있는지 확인할 수 있습니다. test ! -f “/opt/bitnami/common/bin/openssl” && echo “Approach A: Using system packages.” || echo “Approach B: Self-contained installation 마지막 HTTP/2 적용되어 있는지 확인하는 방법은 라이트 세일 SSH 로 접속하신 후에 위의 내용을 입력하게 되면 위에 보이는 Approach A 라고 나오게 되면 적용이

 워드프레스는 블로그, 홈페이지, 커뮤니티 등 다양한 목적으로 운영을 하시게 되는데 커뮤니티를 운영하시는 분들이라면 게시판 기능에 대해서 알아보실 것입니다. 워드프레스 게시판 플러그인 몇 가지가 있지만 해외에서는 bbpress를 많이 사용하고 국내에서는 KBoard라는 게시판을 많이 사용합니다.  KBoard를 사용하는 이유는 국내에서 많이 보았던 게시판의 UI와 기능들이 있고 한국어로 되어 있다는 점에서 많은 분들이 사용을 합니다.  저는 워드프레스로 블로그를 운영하고 있는데 게시판이 있으면 좋겠다는 생각에 여러가지의 게시판을 설치해 보았지만 KBoard를 사용하는 것이 편했습니다. 수정을 할 필요가 없이 스킨을 바꾸기만 하면 되고 기존에 사용했던 인터페이스 그리고 개발자 사이트에서 다양한 정보를 얻을 수 있었기 때문입니다.  제가 워드프레스 게시판을 개설한 이유는 글을 쓸 때 자료들이 많아서 긴 글을 쓸 수 있는 주제가 아닌 정말 간단한 정보라서 짧은 글을 써야 하는 주제를 게시판에 쓰기 위해서입니다.  근데 아래에서도 설명을 드리겠지만 게시판을 설치하면서 가장 궁금했던 점은 검색 엔진 노출 여부였습니다. KBoard 질문 게시판을 통해서 알아본 결과로는 RSS를 제출해서 검색 노출이 가능하다는 점이었습니다.  직접 해본 결과는 아래에 알려드리면서 먼저 워드프레스 게시판 플러그인 KBoard를 설치하는 방법부터 알아보겠습니다.  워드프레스 게시판 KBoard 설치 코스모스팝 제작자 홈페이지 로 들어가게 되면 위의 화면처럼 설명 페이지를 보실 수 있습니다. 여기서 상단에 Kboard 게시판, KBoard 댓글 플러그인 두 개를 다운로드하시면 됩니다.  간혹 워드프레스 관리자 페이지 플러그인 새로 추가에서 검색해서 찾으시는 분들이 있을 수 있는데 검색을 해서 보시면 찾을 수 없고 부가적인 KBoard 플러그인만 보실 수 있습니다. 워드프레스 게시판 플러그인 KBaord을 다운로드하게 되면 압축 파일(ZIP) 파일 2개를 보실 수 있습니다. 처음에는 이것을 압축

 뉴스 채널을 보게 되면 사이드바에 이미지가 순서대로 움직이는 < 슬라이드 이미지 >가 있는 것을 본 적이 있을 것입니다. 자신의 워드프레스 사이드바 적용하고 싶은 분들이 있을 것입니다. 기본적으로 잿팩 플러그인을 사용한다면 기능이 포함되어 있기 때문에 그것을 사용하시면 됩니다.  하지만 저 같이 무거워서 잿팩을 사용하지 않는 분들이라면 플러그인이 있나 찾게 되는데 본문에 사용하는 것이 대부분이고 사이드바에 적용하는 것은 유료인 경우가 많습니다.  그래서 찾는 것이 어려우신 분들을 위해서 사이드바 위젯 모음이라고 할 수 있는 Siteorigin widegets bundle 플러그인 으로 워드프레스 사이드바에 슬라이드 이미지 위젯을 적용하는 방법을 소개해 드릴까 합니다. 워드프레스 사이드바 플러그인 플러그인 추가 검색 창에 siteorigin widgets bundle이라고 검색을 하게 되면 바로 찾으실 수 있을 것입니다. 사용자 수를 보게 되면 정말 많은 것을 볼 수 있고 최근 업데이트도 5일 전이기 떄문에 꾸준이 업데이트가 되는 것도 확인할 수 있습니다. 워드프레스 사이드바 siteorigin widgets bundle 플러그인은 위젯 번들로 사용자 정의 할 수 있는 모음을 제공하는 것으로 설치를 하게 되면 위젯 설정으로 추가된 위젯들을 볼 수 있습니다.  슬라이드 이미지 위젯 만드는 방법 설치를 완료하고 테마 디자인 위젯 설정으로 들어가게 되면 설치된 위젯들을 볼 수 있는데 여기서 siteorigin slider이라는 것이 이미지 슬라이드입니다. 이것을 원하는 위젯 위치로 드래그하게 되면 위와 같은 창이 나오게 됩니다.  여기서 먼저 Animation speed는 이미지가 변하는 속도를 정하는 것으로 기본적으로 800초로 설정되어 있는데 1~3초로 하시면 됩니다. Timeout은 총 시간을 설정하는 것으로 8000초로 설정되어 있는데 움직이는 것을 단시간에 끝내고 싶다면 시간을 줄이시면 됩니다.  이제 사용할 이미지를 추가해야 하는데 상단에 Sl