테스트 뉴기능

test-ground

블로그의 모든 기능을 한 번에 점검할 수 있는 ‘최종 테스트용 마크다운’입니다.

이 내용을 새 글 쓰기(HTML 모드)에 붙여넣어 발행하신 뒤, PC와 모바일에서 각각 다음 항목들을 체크해 보세요.

0. 블로그 기능 통합 테스트 게시물

이 게시물은 MathJax, 코드 블록, 옵시디언 콜아웃(폴딩 포함), 스켈레톤 UI, 그리고 레이아웃 성능을 테스트하기 위해 작성되었습니다.

1. 수식 레플리카 (MathJax v3)

수식이 로딩될 때 스켈레톤 효과가 나타나는지, 그리고 가로 스크롤바가 라이트 모드에서도 잘 보이는지 확인하세요.

인라인 수식: $e^{i\pi }+1=0$ 이 식이 아름답게 보이나요?

블록 수식 (가로 스크롤 테스트):

$${\int }_{-\mathrm{\infty }}^{\mathrm{\infty }}{e}^{-a{x}^2}dx=\sqrt{\frac{\pi }{a}}\text{and}f(x)=\sum _{n=0}^{\mathrm{\infty }}\frac{f^{(n)}(a)}{n!}(x-a{)}^n={\int }_{-\mathrm{\infty }}^{\mathrm{\infty }}{e}^{-a{x}^2}dx=\sqrt{\frac{\pi }{a}}\text{and}f(x)=\sum _{n=0}^{\mathrm{\infty }}\frac{f^{(n)}(a)}{n!}(x-a{)}^n=\sum \sum \prod \prod \prod adasdsadsadas$$

---

2. 코드 블록 (Prism.js & Scrollbar)

가로로 아주 긴 코드를 넣어두었습니다. 라이트 모드에서 가로 스크롤바가 뚜렷한 회색으로 보이는지 확인하세요.

def check_blog_performance(optimization_level):
    print("스크롤바 색상과 가로 스크롤 성능을 테스트합니다. 이 문장은 가로 스크롤바를 생기게 하기 위해 의도적으로 아주 길게 작성되었습니다. 1234567890 abcdefghijklmnopqrstuvwxyz")

    return optimization_level ** 2

가로로 아주 긴 코드를 넣어두었습니다. 라이트 모드에서 가로 스크롤바가 뚜렷한 회색으로 보이는지 확인하세요.

def check_blog_performance(optimization_level):
    print("스크롤바 색상과 가로 스크롤 성능을 테스트합니다. 이 문장은 가로 스크롤바를 생기게 하기 위해 의도적으로 아주 길게 작성되었습니다. 1234567890 abcdefghijklmnopqrstuvwxyz")

    return optimization_level ** 2

---

3. 옵시디언 콜아웃 (최종 설계 버전)

가장 중요한 테스트입니다. 가로선을 기준으로 위쪽(제목)은 접기, 아래쪽(내용)은 팝업이 뜨는지 확인하세요.¹

[!정리] 일반 콜아웃 (접기 없음)

이 콜아웃은 제목과 내용 사이의 가로선 간격이 좁아야 정상입니다.

본문을 클릭하면 팝업 모달창이 떠야 합니다.

[!보조정리]+ 펼쳐진 상태의 폴딩 콜아웃

제목 왼쪽의 ▼ 아이콘을 확인하세요. ^{2 3}

제목 영역을 누르면 접혀야 하고, 가로선 아래 본문을 누르면 확대 팝업이 떠야 합니다.

[!정리]- 접혀있는 상태의 폴딩 콜아웃

이 콜아웃은 처음에 접혀서 나타나야 합니다. ⁴

제목의 ‘▶ 펼치기’ 또는 제목줄을 눌러서 내용을 확인하세요.

[!증명] 중첩 콜아웃 테스트

콜아웃 안에 또 다른 콜아웃이 들어있는 경우입니다.

[!보조정리]- 내부 접기 테스트

내부에서도 접기가 잘 작동하나요?⁵

---

4. 이미지 및 스켈레톤 UI

아래 이미지가 로딩되는 동안 회색 빛(Shimmer) 효과가 나타나는지 확인하세요.

---

5. 성능 및 기타 체크리스트

• FOUC 방지: 페이지 새로고침 시 라이트 모드에서 ’다크 모드 잔상’이 남지 않는가?

• ToC 동기화: 우측(또는 하단) 목차 버튼을 눌렀을 때 현재 위치가 잘 표시되는가?

• 뒤로 가기 복원: ’더보기’를 몇 번 누른 뒤, 글을 읽고 ’뒤로 가기’를 했을 때 목록과 스크롤 위치가 유지되는가?

• 라이트 모드 스크롤바: 하얀 배경에서 가로 스크롤바가 명확하게 식별되는가?

• Zen 모드: 젠 모드 버튼을 눌렀을 때 수식이나 레이아웃이 깨지지 않는가?

---

💡 테스트 팁

1. 더보기 버튼: 메인 화면에서 이 글이 아래쪽에 배치되도록 여러 글을 쓴 뒤, ’더보기’를 눌러 이 글을 불러올 때 수식이 깨지지 않는지 확인하세요.

2. 모바일 스와이프: 스마트폰 브라우저에서 ‘뒤로 가기’ 제스처를 사용할 때 목록이 리셋되지 않는지 확인하세요.

위 마크다운으로 모든 기능을 점검해 보시고, 혹시라도 어색한 부분이 있다면 바로 말씀해 주세요! 특히 가로선 위아래 클릭 분리가 의도대로 작동하는지 꼭 확인 부탁드립니다. 🚀

---

1. ㄴㅁㅇㄴㅁㅇㄴㅁ임ㄴㅇㄴ므ㅏㅇㅁㄴ안$${\int }_{-\mathrm{\infty }}^{\mathrm{\infty }}{e}^{-a{x}^2}dx=\sqrt{\frac{\pi }{a}}\text{and}f(x)=\sum _{n=0}^{\mathrm{\infty }}\frac{f^{(n)}(a)}{n!}(x-a{)}^n$$ ㄴㅁㅇㄴㅁㅇㄴㅁㅇㄴㅁㄴㅁㅇㄴㅁㅇㄴㅁㅇㅁㄴㅇㄴㅁㅇㅁㄴㅇㄴㅁㅇㅁㄴㅇㄴㅁㅇㄴㅁㅇㄴㅁㅇㄴㅁㅇㄴㅁㅇㄴㅁㅇㄴㅁㅇㄴㅁㅇㄴㅁㅁㅇㄴㅁㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ$${\int }_{-\mathrm{\infty }}^{\mathrm{\infty }}{e}^{-a{x}^2}dx=\sqrt{\frac{\pi }{a}}\text{and}f(x)=\sum _{n=0}^{\mathrm{\infty }}\frac{f^{(n)}(a)}{n!}(x-a{)}^n$$↩︎

2. 테스트1↩︎

3. 테스트2↩︎

4. 테스트3$${\int }_{-\mathrm{\infty }}^{\mathrm{\infty }}{e}^{-a{x}^2}dx=\sqrt{\frac{\pi }{a}}\text{and}f(x)=\sum _{n=0}^{\mathrm{\infty }}\frac{f^{(n)}(a)}{n!}(x-a{)}^n$$↩︎

5. 테스트트트틑↩︎