[티스토리 꾸미기] 페이지 이동 시 깜빡임·흔들림 완벽 방지! 부드러운 '페이드인(Fade-in) 효과' 적용 방법

 

티스토리 깜빡임 방지 & 페이드인 CSS 효과 적용법

∶

오늘은 내 티스토리 블로그에 접속하거나 페이지를 이동할 때, 화면이 부드럽게 스르륵 나타나는 페이드인(Fade-in) 효과를 적용하는 방법을 소개해 드리려고 합니다.

 

블로그를 돌아다니다 보면 페이지가 바뀔 때마다 화면이 순간적으로 흰색으로 팍 깜빡이거나(Flickering), 글씨나 레이아웃이 덜컥거리며 위치를 잡느라 흔들리는 현상을 한 번쯤 겪어보셨을 겁니다.

 

이런 현상은 블로그의 첫인상을 산만하게 만들고 전문성을 떨어뜨리는 주범인데요.

 

자바스크립트(JS) 같은 무거운 스크립트 없이, 오직 가벼운 CSS 코드 몇 줄만으로 이 깜빡임과 흔들림 현상을 완벽하게 예방하고, 대기업 공식 웹사이트처럼 고급스러운 전환 효과를 주는 방법을 알려드립니다.

📌 알림 

웹서핑을 하다 보면, 제가 만든 코드나 태그 속성, 심지어 오탈자까지 그대로 가져가 본인 글처럼 사용하는 경우가 있습니다. 코드 자체의 복사는 막을 수 없지만, 제 자료를 활용해 관련 포스팅을 작성하실 때는 반드시 출처를 명시해 주시기 바랍니다.

그 외 개인적인 사용은 자유롭게 하시면 됩니다.

728x90

---

왜 이 코드를 써야 할까요? (기존 코드들의 치명적인 문제)

☑

인터넷에 돌아다니는 일반적인 페이드인 코드를 잘못 쓰면 오히려 블로그 환경을 해치게 됩니다.

1. 지저분한 깜빡임 현상: 화면이 순간적으로 다 보였다가, 갑자기 팍 사라진 후 다시 스르륵 나타남
2. 레이아웃 흔들림(CLS): 상단 메뉴나 사이드바, 폰트 등이 제자리를 잡기 전에 화면이 먼저 나타나서 위아래로 덜컥 흔들림

이 문제는 페이지가 완전히 로딩되기 전에 브라우저가 body 요소를 서둘러 보여주기 때문에 발생합니다.

 

오늘 소개해 드릴 코드는 웹페이지 로딩 전 상태를 완전히 투명하게 숨겨두는 opacity: 0;과, 로딩이 완료된 시점의 정돈된 상태를 그대로 고정해 주는 forwards 속성을 조합했습니다. 덕분에 페이지 이동 시 불쾌한 깜빡임이나 레이아웃 흔들림(CLS) 없이, 처음부터 정돈된 화면이 부드럽게 등장합니다.

 

현재 제 블로그에도 적용되어 있는 방식입니다.

 

---

티스토리 적용 방법 (초간단 3분 완료)

☑

1단계: 티스토리 스킨 편집 들어가기

CSS 코드를 수정하기 위해 '관리자 홈'에서 꾸미기 → 스킨 편집 → HTML 편집 → CSS 탭으로 이동합니다.

2단계: 코드 수정 및 추가하기

1. 키보드로 Ctrl + F를 누른 뒤 body {를 검색합니다. 보통 CSS 가장 윗부분에 body { ... } 코드가 위치해 있습니다.

body {

 

2. 기존에 있던 body { 스타일 코드를 찾으셨다면, 아래 코드를 참고하여 덮어씌우거나 추가해 줍니다.

(또는 CSS 맨 아래에 그대로 붙여넣으셔도 작동합니다.)

body {
  -webkit-text-size-adjust: 100%;
  font-weight: 400;
  font-family: 'AppleSDGothicNeo', Pretendard-Regular, sans-serif;
  font-size: 1em;
  line-height: 1.25;
  color: #555;
  /* 페이드인 효과 추가 */
  opacity: 0; /* 로딩 전에는 투명하게 숨김 (깜빡임 방지) */
  animation: fadein 0.6s ease-in-out forwards; /* fadein 0.6s를 원하는 속도 숫자로 변경하세요 */
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
  /* 페이드인 효과 추가 END */

3단계: CSS코드 삽입 예제

4단계: 저장하고 확인하기

우측 상단의 [적용] 버튼을 누릅니다. 내 블로그로 이동한 뒤, 카테고리를 누르거나 다른 글을 클릭해 보며 페이지 이동 시 깜빡임이나 덜컥거림 없이 부드럽게 로딩되는지 확인합니다! (확인이 잘 안 될 때는 Ctrl + F5로 강제 새로고침을 해주세요.)

---

내 입맛대로 속도 조절하는 꿀팁!

☑

코드 안의 1.6s는 화면이 완전히 나타나는 데 걸리는 시간(0.6초)을 의미합니다.

 

만약 화면이 뜨는 속도가 조금 느리거나 답답하게 느껴지신다면 이 숫자를 조절하여 취향에 맞춰보세요. 페이지 이동이 잦은 블로그의 특성상 조금 더 빠른 속도를 추천해 드립니다.

• animation: fadein 0.6s ease-in-out forwards; (강력 추천 ★★★)
  • 화면 전환이 매우 신속하면서도, 부드러운 감성이 살아나 깜빡임 예방과 빠른 서핑을 모두 만족하는 가장 이상적인 속도(0.6초)입니다.
• animation: fadein 1.0s ease-in-out forwards;
  • 따뜻하고 감성적인 스킨 스타일에 어울리며, 부드러움을 극대화하고 싶을 때 추천하는 속도(1초)입니다.

---

마치며

☑

블로그 레이아웃을 크게 해치지 않으면서도, 방문자가 글을 넘겨볼 때 느껴지는 피로감(깜빡임, 어긋남)을 줄여주는 아주 효과적인 튜닝법입니다.

 

코드 몇 줄로 블로그의 디테일과 방문자들의 가독성을 한 단계 높여보세요! 궁금한 점이 있거나 적용 후 잘 안 되시는 분들은 언제든 댓글 남겨주시면 정성껏 답변해 드리겠습니다.

여러분의 공감과 댓글은 큰 힘이 됩니다.✦ 가람과 함께하는 이야기 ✦