로딩 화면 UI 개선: Three.js 배경 투과, 슬라이드 화살표, 스마트 예상 시간

“Three.js 배경이 왜 로딩 페이지에서만 안 보이냐”라는 단순한 질문으로 시작했다.

불투명 배경이 범인이었다

globals.css의 .loadingAnalysis, .loadingAurora, .loadingParticles에 불투명 배경색이 하드코딩돼 있었다.

Three.js 캔버스가 z-index: -2에 있는데, 위에서 불투명 배경이 전부 덮어버리고 있었다.

/* Before — 불투명 배경이 캔버스를 가림 */
.loadingAnalysis { background: #0a0b2a; }

/* After — 투명으로 변경 */
.loadingAnalysis { background: transparent; }

배경을 transparent로 바꾸자 즉시 해결됐다.

CSS 18줄 → 3줄로 줄었다.

슬라이드가 상태 바랑 겹쳤다

.eduSlide.in에 걸려 있던 translateY(-6vh)가 상단 상태 바 영역을 침범하고 있었다.

/* 문제: 위로 올라가면서 상태 바와 겹침 */
.eduSlide.in { transform: translateY(-6vh); }

/* 수정: 기본 위치로 복원 */
.eduSlide.in { transform: translateY(0); }

translateY(0)으로 수정하면서 슬라이드 레이아웃 전체를 다시 잡았다.

추가 UX 개선 2가지

• 화살표 버튼 데스크탑에서 슬라이드를 수동으로 넘길 수 있게 했다. @media (hover: hover) 조건부로 모바일에선 숨긴다.
• 스마트 예상 시간 localStorage에 최근 3회 LLM 응답 시간을 저장하고 평균을 계산한다. "예상 약 N초" 문구가 실제 데이터 기반으로 표시된다.

프롬프트 전략

한 번에 다 요청하면 Claude가 과도하게 리팩토링하는 경향이 있다.

그래서 커밋 단위로 스코프를 나눴다.

첫 번째 프롬프트는 “배경 투명화”만.

두 번째 프롬프트에서 나머지를 묶었다:

“eduSlide가 상태 바와 겹친다. translateY(-6vh) 문제. 데스크탑에서 슬라이드를 수동 조작할 수 있는 화살표 버튼도 추가해.”

작업을 쪼개면 각 커밋의 목적이 명확해진다.

Claude도 더 정확하게 동작한다.

---