워드프레스(WordPress)에서 엘레멘터(Elementor)로 작성한 정적페이지(Simply Static)내 보낼 때 깨지는 현상

홈페이지 제작 공장장이 되었다.

요즘 홈페이지를 공장처럼 만들기 시작했다.
어렵게 만드는 건 아니고
도커로 워드프레스 기본 폼 만든다음 복사해놨다가 여행이나 행사 사진 정리용으로 홈페이지 하나 만들어서 정적 페이지로 내보내고 끝!!!(나중에 한번에 정리해서 블로깅 할까??)
보관용으로 내보내면 제작된 여행후기 홈페이지를 usb에 넣어서 선물로 줄수도 있어서 유용하게 사용하고 있다.

하루 이틀에 홈페이지 하나씩 만들어서 찍어 내다보니 몇가지 에러가 발생하는데 이를 해결한 팁을 공유하려 한다.

워드프레스에서 정적 페이지를 내보냈는데 css 가 깨진다.

나처럼 코찔이(코드찌질이-코드를 보지 못한단 이야기)가 홈페이지를 만드는 유일한 방법은 엘리멘터ㅍ플러그인을 사용해서 손쉽게 만드는 것 뿐이다. 그러기 위해서 필요한 것이 3개 있다. (내가 항상 설치한 플러그인)

  1. 당연한 elementor 플러그인
  2. 작성 완료한 홈페이지를 내보내 줄 simply static 플러그인
  3. 페이지 내에 있는 파일들을 정리할 수 있는 wp파일관리자 플러그인

일단 엘레멘터(elementor)를 사용해 홈페이지를 예쁘게 구축한다. 그런 다음 simply static 플러그인으로 내보냈는데 css를 제대로 불러오지 못하는지 화면이 계속 깨진다.

해결 방법은 간단하다.

엘레멘터 설정의 css 단축 관련 옵션을 기본에서 비활성화로 바꾼다.

엘레멘터 - 설정을 클릭하면 Experiments 이라는 탭이 보인다. 이를 클릭하면 상위 두개에 Improved Asset LoadingImproved CSS Loading 옵션이 보인다. 크롬의 번역이 알려준 바에 따르면 기본적으로 페이지에 로드되는 코드의 양을 줄여준다. 의 기능이 있다.
코드의 빈공간이나 안쓰는 코드등을 제거하고 쓰는것만 내보내는 것 같다. 그러나 simply static 플러그인과 만나면 제대로불러 오지 못하는 것 같으니 이를 비활성화 (Inactive)로 바꿔주면 정적페이지로 내 보낼 때 깨지는 현상이 사라진다.

이미지가 안불러와지는 오류는 Lazyload 옵션을 꺼주자

여행사진 중 특별한 사진을 모아서 회전목마처럼 돌려보려고 하면 가끔 이미지가 안불러와 지는 경우가 있다. 이때는 이미지 기능중에 Lazyload이라는 기능을 꺼주면 된다. 이 기능은 이미지를 한번에 불러왔을 경우 보여지는 페이지에 비해 로딩 속도가 너무 느려지는 경우가 생기기 때문에 이미지 로딩을 가장 마지막으로 해주는 기능이....려나?? 아무튼 그렇다.

이 기능을 켜 놓으면 simply static 플러그인의경우 이미지를 안가져와 버린다. 기능을 꺼주면 된다.

아직 풀리지 않은 미스테리....

simply static 플러그인으로 마치 홈페이지 전문가 처럼 홒페이지를 정적 페이지로 마구마구 찍어내고 있는데... 간혹 풀리지 않는 미스테리가 있다.

  1. 간혹 용량 큰 파일은 내보내기가 되지 않아 수동으로 내보내 준경우가 있다. 아예 안된 것도 아니다. 처음 몇번 잘 내보내지다가 수정하기 위해 다시 내보냈는데 100메가 넘는 동영상이 간혹 안나갈 대가 있다. (되다 안되다) 아마 서버로 사용하고 있는 pc의 성능이 듀얼코어...게다가 노트북... 이라서 (노인학대 죄송) 램도 2기가... 게다가 당시 다른 프로그램 사용중 그런지는 모르겠으나... 내보낸 홈페이지에 대용량 단일 파일이 빠져 있어서 수동으로 카피해주었다.
  2. 주소가 한글이면 간혹 깨진다. 이거는 지킬도 그렇고 여기저기 다 그렇다고 하니까 패스

혹시 나처럼 워드프레스로 정적페이지 만드는 사람이 있다면 참고하세요.

PDF 날짜 지난 파일 열기 및 날짜 제한 삭제

서론

PDF는 편집을 위한 파일이 아니다. 완성본이다. 그렇기 때문에 PDF를 편집한다는 건 수많은 에러와 마주할 각오를 하고 진행 해야 한다.

거래처에서 오는 파일 보고용으로 돌리는 파일 등 업무에서 많은 부분의 파일이 PDF로 만들어 진다. 이유는 간단. 인쇄용이기 때문이다. 한글,워드 파워포인트는 폰트를 첨부해야 하는데 이것이 버전에 따라 읽히기도 아니기도 한다. 그러나 pdf는 언제나 비슷한 퀄리티로 페이지를 보여주기 때문에 나는 편집할 일이 없는 파일은 무조건 pdf 로 달라고 해서 받는 편이다.

그런데 간혹 아주 간혹 pdf 를 수정해야 할 경우가 생긴다. 그럴때는 어도비 아크로뱃(Acrobat pro, 유료)로 한두글자나 그림 한두개 정도 편집 하는 편이다.
각설하고..

날짜 기한이 정해진 파일 날짜 지나서 안열릴 때

pdf는 대단한 보안 툴이 포함된 파일이 아니다. 대부분의 열람 날짜 제한은 JAVA로 작성된다. 인터넷연결해서 시간을 보는게 아니라 PC시간 기준으로 시간을 측정한다. 그렇다. "pc기준"이다.

그럼 아주아주 간단한 방법은 pc의 시간을 열람 가능한 날짜로 변경 하는 것...

  1. 윈도우 오른쪽 날짜 부분에서 마우스 우클릭을 한다.
  2. 날짜/시간 조정 을 클릭한다.
  3. 자동으로 시간 설정을 끈다.
  4. 수종으로 날짜 및 시간 설정 아래 변경 버튼을 클릭한다.
  5. 날짜를 변경해 변경 버튼을 눌러 날짜를 바꾼다.

날짜 기한 제거

위에서 말 했듯 pdf에는 대단한 기능 제한을 걸기 어렵다. 날짜 제한 역시 대부분 JAVA로 인한 설정이다.

  1. 어도비 아크로뱃(Acrobat pro, 유료)로 파일을 연다.
  2. 도구에서 사용자정의 항목에 JavaScript에 들어간다.
  3. 모든 JavaScript로 들어간다.
  4. 적힌 스크립트 중 funtion포함 이하 구문을 삭제 한다.

저장한다.

아크로벳에서만 화면 보이는 파일 수정

Pdf 중에서 아크로뱃 리더로만 화면이 보이고 크롬이나 타 프로그램으로는 내용 확인이 안되는 PDF 가 있다. PDF는 대단한 보안 설정이 있는게 아니라 단지 화면이 다른 화면으로 가려져 있을 뿐이다. 이 가려진 화면을 삭제 해 주면 된다.

  1. 어도비 아크로뱃(Acrobat pro, 유료)로 프로그램을 연다.
  2. 왼쪽 툴을 보면 클립모양 아래 사각형 여러겹 있는 아이콘을 클릭한다. (레이어 편집, 레이어가 없으면 보이지 않음)
  3. 마우스 우클릭으로 속성에 들어간 뒤 잠겨 있으면 잠금을 풀고 인쇄 "가시성,인쇄,내보내기" 모두 항상숨기기로 설정한다.
  4. 확인을 누르고 레이어 설정창에서 "레이어결합"을 해서 숨겨진 상태의 레이어가 PDF 파일로 결합되게 한다.

이렇게 되면 타 프로그램에서 레이어가 가려지는 현상없이 파일을 오픈 할 수 있다.

좋은 방향으로만 활용하기 바랍니다.

정적 페이지도 결국은 워드프레스

도루묵

워드프레스를 사용하다 지킬로 갈아탔다. 이유는 사이트 로딩 속도와 유지비...
무료로 하려면 집에서 구동중인 서버 대용 pc로 돌려야 하는데 리눅스를 설치해도 마음에 드는 속도가 나오지 않는다. 무료로 사이트 운용할 수 있는 깃허브를 쓰자니 정적 사이트가 아니라서 어렵다.

깃허브를 이용하면 정적 사이트 유지 비용은 사실상 제로...

속도도 php를 사용한 사이트와 비교 불가할 정도..

마크다운을 활용한 편리한 글 쓰기...

나는 지킬로 갈아탈 수 밖에 없었다. 그러나...

지킬은 자주 포스트하지 않는 나에게는 너무 번거러울 뿐 아니라 글을 쓸때마다 까먹어서 구글링을 새로 해야 했다...
지킬 버전이 변할 때 마다 가끔 뜨는 알수업는 오류들... 루비프로그램 개념을 잘 모르는 나에게는 오류 하나 해결하는데 꼬박 일주일씩을 구글링 해야 겨우 실마리를 찾을 수 있었다.

나처럼 코질이(코딩 찌질이)에겐 조금만 예쁘게 꾸미려고 해도 만져야 할게 너무너무너무 많고 그나마 예쁘게 되지도 않는다.

결국 나는 다시 워드프레스로 돌아야와 했다.

simply static plugin으로 대부분의 고민 해결

나의 가장 큰 고민은 사이트 로딩속도였다. 집에 있는 10년도 넘은 구형 노트북(윈도우)을 기반으로 서버를 돌리는 나에게 워드프레스는 지인에게만 사용하는 용도로도 너무 느린 속도였다.

정적 사이트가 필요했다. 깃허브를 이용하거나 아파치만을 이용한(php 없이) 호스팅은 속도가 빠르다. 그래서 구글링으로 검색한 결과 나온 해결책이 simply static plugin이다.

생각했던것 보다 잘되고 생각보다 안된다.

결국 개념은 이거다 어차피 사이트를 보는 사람은 php고 아파치고 간에 브라우저로 읽는다. 워드프레스를 정적 사이트처럼 html로 내보낸 주는거다.

조금만 복잡한 기능을 사용하면 작동이 안될 거라는 나의 우려와는 달리 왠만한 기능은 다 내보내기가 되었다. (라이트박스, 메뉴등)

문제가 발생한 것들은 대부분 플러그인으로 해결 했다.

  1. 사이트맵 - Yoast SEO플러그인으로 해결 했다.
  2. 사이트 꾸미기 - Elementor plugin으로 해결했다. 현재 대채 불가능한 페이지 빌더다. 홈페이지를 그나마 내 마음에 들게 꾸미고 싶다면 무조건 깔아야 한다. 유일한 단점이자 가장 치명적인 단점은 사이트 속도를 어마어마어마어마하게 느리게 만든다는 것.
  3. 마크다운 - 먼저 내가 가장 중요하게 생각것이 마크다운기능...이다. 마크다운의 편의성은 미리 메모장 같은데 작성해 두었다가 붙여넣기만 하면 포스팅이 끝난다는데 있다. 나는 플러그인(WP Githuber MD)을 사용했다. WP Githuber MD 이외의 다른 플러그인의 경우 설치후 엘리멘터 페이지 편집으로 안들어가지는 현상을 겪었다. 마크다운과 엘리맨터중 선택해야 한다. 제트팩을 쓰면 편하게 사용할 수 있다고 하는데 나의 설치 환경인 인트라넷 (192.168..)같은 경우는 제트팩이 활성화 되지 않아 시도해 보지 못했다.

아직 극복하지 못한 단점이 있다.

  1. 간혹 작성한 페이지가 에러가 나서 안열리거나 깨질 때가 있다 내용을 복사해 두었다. 새로 만들어서 내용을 붙여 넣으면 이상 없이 만들어 졌다. 원인을 모르기 때문에 불안하다.

  2. 지킬처럼 하나만 포스팅해도 전체 페이지를 내보내기 받아야 한다. 지킬은 그나마 빌드 속도가 빠른데 이놈은 느려도 너무 느리다. 또 사이트 전체 용량이 너무 많아지면 속도가 느리려지거나 zip으로는 다운이 안된다.
    simply static plugin이 zip 내보내기가 안될 때가 있다. 링크를 클릭해도 zip가 다운로드 되지 않는다. 완료가 뜨면 생성은 되어있는 상태인지라 wp-content/plugins/simply-static/static-files 경로로 가면 생성한 zip파일이 있다. 이도 안되면 압축되지 않은 상태의 파일을 경로지정해서 내보내기 할 수도 있다. 깃허브에 바로 올리거나 서버에서 바로 웹구동할때는 이방법이 더 좋을 수도 있다.

  3. 이건 아주 치명적인데 간혹 한글로 된 링크는 먹지 않을때가 있다. 미디어에 이미지 이름이 한글로 되어 있어서 여러 외계어로 처리되어 로딩이 안되었다. 그런데 그건 지킬도 비슷한 단점이 있었다.

  4. 글 작성하기 까지가 시간이 오래 걸린다. 미리 글을 작성해 둔뒤 붙여 넣기를 한다고 해도 지킬의 경우 붙여넣고 명령어 한줄 치면 바로 빌드가 된다. 그러나 워드프레스는 사이트를 구동시키고 (상시 구동시켜 놓지 않았을 경우...) 로그인을 하고 글쓰기 메뉴로 들어가서 글울 작성한다. 위에서 말한 정적 사이트 변환 까지 하면... 글 쓰는 시간보다 준비하고 빌드하는 시간이 더 오래 걸릴 수 있다.

그래도 구관이 명관

많은 단점에도 불구하고 워드프레스의 장점은 명확하다. 쉽게 예쁜 사이트를 구축할 수 있다. (물론 난 디자인감각이 없어서 남의 이야기지만...) 쓰던거라 편하다. 배우고 까먹고를 반복하지 않아도 된다. 잘모르는 루비 설치며 버전에러에 고민할 필요 없다. 원인을 알수 없는 에러메시지에 불안해 하지 않아도 된다. 사진 등 미디어 첨부하는데 골머리를 썩지 않아도 된다.

워드프레스의 단 하나의 단점은 정적 페이지가 아닌것... 그로인해속도도 느리고 구축 자체가 어렵다.

물론 코드를 보는것이 익숙해지고 이런저런 에러를 풀어가며 공부를 하기 위해선 지킬도 좋긴 하겠다. 그러나 나에겐 너무 복잡하고 개발자가 아닌 단순 유저인 나로서는 워드프레스를 정적 페이지로 변환하는게 정신 건강에 좋았다.