서버

.htaccess같은 파일은 외부에서 접근 자체를 막는 등 보안과 관련된 작업을 좀 진행했습니다.


워드프레스 테마

확실히 이젠 테마만 쥐고 있기보단 무슨 글을 쓸지 궁리를 해야 할 것 같은데, 마땅히 쓸만한 글이 생각나질 않네요 ㅠㅠ

홈 화면 슬라이더

슬라이더에 애니메이션을 추가했습니다.

예전엔 투명도만 변경되며 슬라이드가 넘어갔는데, 이젠 좌 / 우측으로 넘어다니는 애니메이션이 추가됐습니다.

딱히 쉽지만은 않았는데, 만들고 보니 투명도만 변경되는 것보단 나아 보이긴 하네요.

그래도 아직은 손 볼 부분이 많습니다.

움짤 (애니메이션 gif)

워드프레스에서 기본적으로 이미지를 올리면 썸네일 등에 사용하기 위해 이미지를 특정 사이즈로 잘라서 보관합니다.

이 과정에서 움짤은 움직이지 않는 이미지로 변경되는데, gif의 리사이즈 자체를 막아서 무조건 원본만 불러오도록 변경했습니다.

썸네일 등에서만 움직이지 않는 이미지로 변경되면 크게 상관없는데, 본문에 첨부된 이미지도 기기 크기에 따라 리사이즈된 이미지가 출력되기 때문에, 본문에서도 움짤이 움직이지 않는 현상이 발생해서 이런 업데이트를 하게 됐습니다.

문제는 이렇게 작게 이미지가 표시되는 부분에도 1080 * 1920의 이미지가 표시되는 겁니다.

움짤을 썸네일로 지정하지 않는 방법으로 지금은 해결해뒀는데, 좀 더 나은 해결방안을 강구해봐야겠습니다.

움짤이 계속 움직이게 하면서 자르는 방법도 있던데, 그건 용량 문제가…

포스트 목록 추가

홈 화면에 추가하기 위해 만든 포스트 목록입니다.

다른 목록과 마찬가지로 카테고리 등에서도 사용할 순 있게 작업했는데, 아마 쓸 일은 없지 싶습니다.

공유 버튼 추가 (메타 태그 작업)

포스트 하단에 글을 공유할 수 있는 버튼을 추가해봤습니다.

Open Graph 메타 태그들은 진작에 작업해뒀는데, 트위터는 따로 메타 태그를 써줘야 하길래, 그것도 작업했습니다.

이렇게 스크롤 내리다가 공유 버튼이 화면에 보이면 화면 하단에 고정되는 방식도 고려해봤는데, 딱히 그만한 양질의 글을 생산한단 기분도 안 들고, 생각보다 별로라 그냥 폐기했습니다.


여담으로, 페이지 로딩 속도 향상을 위해 이런저런 툴을 쓰다 보니 이미지 중에 PNG가 많다고 JPG로 올리라고 권고하기에 이미지를 전부 JPG로 바꿔서 압축한 후에 올렸는데, 챙틸다 T 전화 테마 때부터 느끼는 건데 JPG 이미지는 손실 압축이라 그런지 이미지 열화가 심하네요.

앞으론 그냥 적당히 PNG도 써야겠습니다.

profile

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

(?)

  1. 저도 이미지 열화때문에
    예전 포스팅
    배경화면이나 티전화 테마 스샷들 전부 PNG로 올렸었는데..
    https://imgur.com/cGcDQFB.mp4
    점점 이미지가 많아지다보니, 로딩이 오래걸리길래..
    지금은 그냥 JPG로 올리고 있어요.
    이미지가 많지 않으면 PNG로 올려도 괜찮을거 같아요 🙂
    https://imgur.com/N2zyTxi.mp4

    1. 생각보다 깨지는 현상이 심하더라고요 ㅠㅠ
      아무래도 티스토리 자체가 그리 빠르진 않다 보니, 무리일 수 있을 것 같긴 하네요.

      https://imagecompressor.com/
      https://tinypng.com/

      제가 사용하는 이미지 압축 사이트들인데, 압축이 꽤 훌륭해서 품질 저하 없이 용량을 꽤 많이 낮춰줍니다.
      한 번 사용해보세요! 로딩 속도 향상에 도움될 겁니다.
      혹시 이미 사용하고 계신가 싶어 올리신 스크린샷으로 테스트해보니 60%가량 압축이 되는 거로 봐선 사용하지 않으시는 것 같네요 ㅎㅎ

      https://contents.vryjam.com/c0HiV8N6WXOGLSP.mp4

    2. 몇 번 이미지 압축해서 올린 적이 있는데,
      이게 은근 시간을 잡아먹더라고요~
      이미지가 적으면 괜찮을 텐데,
      여러 장이다 보니 아주 간혹 특정 색상 열화가 나타나는 게 있어
      이미지 압축 후 이상 없나 하나하나 확인하려니
      조금 귀찮기도 하고..

      https://imgur.com/4qhzRlz.mp4

      요즘 PC와 스마트폰 사양들이 좋으니
      괜찮을 거라고.. 괜찮을 거라고..
      지금은 그냥 이미지 압축 안 하고 올려요 ^^
      그래도 나중에 사용할 일이 있을지 모르니
      알려주신 사이트들 확인해보았는데
      다행히 2곳 다 북마크 되어있네요~

    3. 하긴 한 번에 올리시는 사진 양이 엄청나시니, 시간을 꽤 잡아먹을 것 같긴 하네요 ㅋㅋㅋㅋ

      키스미 님 올리시는 파일이 대부분 JPG라 압축하면 열화가 생기지 않나 싶습니다. ㅎㅎ
      보통 PNG는 압축해도 문제가 없더라고요.

      키스미 님 블로그는 평소엔 괜찮은데, 티스토리 서버가 좀 불안정한 날에는 이미지 전부 로딩하는데 시간이 좀 걸리긴 하더라고요 ㅠㅠ
      이건 뭐 블로거가 해결하긴 힘든 문제니...서버가 안정하길 기도하면서 쓰는 수밖에 없겠네요 ㅠㅠ

      https://imgur.com/yrPizBP.jpg
      아맹

  2. 티스토리 포스팅할때 이미지를 하나도 올리지 않을 경우,
    아래 이미지처럼 뜨던데...,
    소스보기를 보니
    [!-- BEGIN OPENGRAPH --]
    [meta property="og:image" content="https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png"]
    [!-- END OPENGRAPH --]

    이런식으로 #banner에 노출되더라구요 ?!
    이걸 강제적으로 저만의 이미지로 변경하는 방법이 있을까요?
    기존의 이미지가 있을 경우, #banner에 영향을 주지 않으며 이미지가 없는 경우만 말이죠

    https://i.imgur.com/srFRlrh.png

    1. 배너에 이미지 넣는 스크립트를 수정하시면 됩니다.
      opengraph란 단어가 들어가면 특정 이미지를 사용하는 방식으로요.

    2. 아래처럼 해봤는데 안되어서요
      혹시 참고할 만한 곳이나 뭐가 잘못된 것인지 알려주실수 있나요??
      항상 느끼는 것이지만 기본이 없어서 항상 헤메네요 ^^;

      아니면 마샬님 공부하셨던 방법이라도 공유받을 수 있을까요?
      매번 물어보려니 손발이 부끄러워서요 ^^;

      $(function() {
      if ($("body").is("#tt-body-page")) {
      if ($("meta[property='og:image']").text("openGraph").length !== 0) {
      $("#banner").css("background-image", "url(" + $("meta[property='og:image']").attr("content") + "?original)")
      } else {
      $("#banner").css("background-image", "url(./images/ooppa-og_image.png)")
      }
      }});

    3. 1. 스트링에 단어가 포함된 지 확인할 땐 주로 indexOf()과 같은 방법을 사용합니다.
      2. length는 엘리먼트의 개수, 스트링의 길이 등을 나타내는 데 사용합니다.
      3. jQuery의 text()는 엘리먼트 내부에 적힌 글자를 파악합니다. meta 태그 내부엔 적힌 게 없으니 아무것도 찾지 않을 겁니다.
      - $("meta[property='og:image']").attr("content")는 메타 태그의 내용을 리턴합니다. text() 함수는 필요 없습니다.
      4. 의무가 아닌 권장이지만, "url(" + $("meta[property='og:image']").attr("content") + "?original)" 보다 `url(${$("meta[property='og:image']").attr("content")}?original)` 같이 백틱(`)을 사용하시는 걸 추천합니다.`

      공부는 그냥 구글 뒤져가며 삽질해가며 했습니다.
      예를 들면 1번처럼 스트링 내부에서 글자를 찾으려면 어떻게 하는지 궁금할 땐 구글에 javascript find word in string 같은 방식으로 검색하면 stackoverflow, w3schools 같은 곳에 간단한 기능은 전부 해답이 있습니다.

      전 시간이 많아 그냥 될 때까지 시간 부어가며 삽질했는데, 제가 사용한 방식이 그리 효율적일진 모르겠네요.

    4. 답변 감사해요 ^^

      포스팅할 내용중 굳이 이미지가 없어도 되는 내용에 사용해보려고 했거든요
      이미지 첨부가 없을때, 지정된 이미지를 보여주는 방식은 나중에 천천히 해봐야겠습니다.

      요 몇일 시간이 잠시되어서 삽질해봤는데..., 내일부터 2주간 바빠질거라,
      그럼 수고하세요 ^^