My Portal · 개인 포털

왜 만들었나

만들어 온 것들을 펼쳐 놓고 생각을 기록할 장소가 필요했습니다. 그리고 그 장소 자체가 제 미적 감각을 대표해야 한다고 믿었습니다 — 절제, 정확함, 그리고 유행 타지 않는 약간의 기술감.

레퍼런스는 빠르게 결정됐습니다. Apple의 이벤트 페이지: 순수한 검은 배경, 극한으로 조명받은 “하나의 물체”, 거대한 타이포그래피, 스크롤 기반 스토리텔링.

세 번의 허물기

이 사이트의 가장 정직한 이야기는 반복의 역사입니다 (v1에서 v19까지).

1. 먼저 더하기: Lusion식 파티클 필드, 블룸 후처리, 은하 형태, 유성, 충격파… 이펙트를 17판까지 쌓아 올리니 시각적 임팩트는 올랐지만 전체적 기품이 “클럽” 쪽으로 표류하기 시작했습니다.
2. 그다음 빼기 배우기: “Apple이라면 어떻게 할까”를 잣대로 다시 만들었습니다 — 파티클은 알록달록한 노이즈에서 은백색 서리 유리 행성으로. 페이지 전체에 남은 색은 하나 (Apple 블루 궤도 링). 유성과 충격파를 지우자 페이지는 즉시 조용해졌습니다.
3. 마지막으로 뼈대: 작품 섹션은 “카드 넘기기”에서 연속되는 에디토리얼 배치로. 데이터 소스는 GitHub API에서 로컬 관리로 — 빌드 시점 외부 요청 제로, 사이트는 그 어떤 서드파티의 생존에도 의존하지 않게 되었습니다.

기술 포인트

• Astro 정적 사이트: 콘텐츠 전부가 Markdown화 (Content Collections + 스키마 검증). 작품이나 글 하나 추가는 .md 파일 하나 커밋하는 일
• Three.js 파티클 필드: 커스텀 셰이더(파티클별 크기와 위상), 스크롤 구동 3형태 모핑(행성 ⇄ 은하 ⇄ 파도 격자), 포인터가 가르는 스프링 질점 물리
• GSAP + Lenis: 관성 있는 부드러운 스크롤. 모든 등장 애니메이션은 prefers-reduced-motion에 맞춰 단계적으로 완화
• 외부 요청 제로: 빌드 시 API를 호출하지 않음. 통계와 문안은 로컬 관리

하나의 설계 규칙

이 프로젝트가 증류해 낸 가장 가치 있는 규칙: 한 화면의 주인공은 오직 하나. 히어로 영역의 주인공은 행성이고, 작품 영역의 주인공은 글자입니다. 어떤 요소가 장면을 가로채려 하면 먼저 “이 화면의 주인공인가?”라고 물으세요 — 아니라면 어둡게, 작게, 뒤로.