bblog

Today I Learned

날짜별 업무 및 학습 회고입니다. 매일 무엇을 했고, 무엇을 배웠는지 기록합니다.

Allanimationarchitecturebrowserbundlingcachingcanvasci-cdclscollaborationcssdrag-and-dropeditoreslintgraph-visualizationi18nimagesimmutabilitylanding-pagemeasurementmobilemodalmonoreponavigationnetworknextjsperformanceplaywrightpointer-eventsreactreliabilityscrollsearchsecurityselectionseoserverlessservice-workershellssrstorytellingtestingthemingundousesyncexternalstorevirtualizationwebpackwebsocket
입력 후 350ms 뒤 자동 검색됩니다.

3개의 기록 · #css

2026년 7월

2026-07-11

홈 히어로 scroll-driven 내러티브 연출

GSAP 없이 sticky scrolly·CSS keyframes·view-timeline으로 TIL→Knowledge 승격 데모와 파이프라인 섹션을 구현한 하루

  • sticky scrolly는 래퍼 높이만큼 스크롤 시간축을 만들고, phase는 진행도에서 파생하면 JS가 얇아진다
  • 히어로 라이브 데모는 clip-path steps 와이프 + animation-delay만으로 루프를 만들 수 있다
2026-07-10

Modal peek 스택과 CSS layer 패키지

단일 dialog 안 document push와 @layer 기반 editor CSS 분리로 peek UX·테마 커스터마이징을 맞춘 하루

  • gallery→peek는 dialog를 새로 열기보다 같은 shell에서 documentId만 바꾸는 편이 연속적이다
  • async resolve는 (newId, oldContent) 중간 프레임을 render-time reset으로 막아야 한다

2026년 6월

2026-06-30

직접 업로드 계약, CSS 토큰 테마, 하이드레이션 경계

presigned URL 4단계 업로드, @layer 기반 토큰 테마의 단일 생성기, fr 레이아웃과 마운트 후 하이드레이션에서 배운 공통 원칙

  • presigned URL 업로드는 presign→PUT→complete→create 4단계 계약이고, complete 통지를 빠뜨리면 백엔드가 업로드를 인지하지 못한다.
  • CSS 토큰 테마는 @layer(우선순위)·@scope(범위)·light-dark()(모드)를 분리하고, 런타임·빌드 CSS를 하나의 생성기로 단일화해야 어긋나지 않는다.