패턴 조합
소개와 설득 페이지긴 글의 위치를 잡아 주는 레일과 근거 수치, 사례 이미지, 다음 읽을거리, 구독 신청을 이어 붙인 구성입니다.
리서치 노트나 사례 기사처럼 긴 글을 끝까지 읽히고 다음 글로 넘기고 싶을 때 사용합니다.
챕터 리딩 레일 챕터 목록으로 현재 위치와 남은 분량을 보여 줍니다.
카운트업 통계 본문의 근거 수치를 눈에 띄게 정리합니다.
아코디언 갤러리 사례 이미지를 펼쳐 가며 살펴봅니다.
블로그·리소스 카드 이어서 읽을 글과 자료를 제안합니다.
뉴스레터 구독 새 글 알림을 받을 메일 주소를 받습니다.
뷰포트에 들어오면 0부터 목표값까지 카운트업합니다.
패널을 누르거나 Tab으로 이동하면 선택한 장면이 넓어집니다.
뷰포트 밖으로 나간 캔버스가 rAF를 계속 물고 있으면 메인 스레드가 남아나지 않습니다. IntersectionObserver로 반납하는 규약을 정리했습니다.
색을 리터럴로 박으면 다크 모드가 두 배 일이 됩니다. 의미 단위 토큰으로 바꾸면 브랜드 색 하나만 갈아끼우면 됩니다.
애니메이션을 다 만든 뒤 끄는 건 어렵습니다. 처음부터 "끈 상태가 기본"으로 설계하면 공짜로 얻습니다.
날짜는 이미 포맷된 문자열로 받습니다. 컴포넌트 안에서 toLocaleDateString을 부르면 서버(UTC·en-US)와 브라우저(사용자 로케일)가 다른 문자열을 만들어 하이드레이션이 깨집니다. 기계 판독용 원본은 <time datetime>으로 따로 넣습니다.
잘못된 주소를 넣고 눌러 보세요. 검증은 브라우저에 맡기고(type="email"), 메시지만 받아와 우리 UI로 보여줍니다. 직접 정규식을 쓰면 유효한 주소를 틀리게 막기 쉽습니다.
이 데모는 아무 데도 전송하지 않습니다. 실제 전송은 onSubmit으로 위임합니다.