개인 포털을 Apple 발표회 스타일로 만들다

출발점: 한 문장의 요구사항

“개인 포털 사이트 하나 만들어 줘. GitHub 프로젝트를 보여주는.” — 요구사항은 이게 전부였습니다. 첫 판은 금방 나왔죠: 어두운 배경, 파티클 구체, 거대한 타이포그래피. 예쁘냐고 물으면, 뭐 분명 예뻤습니다.

그러나 “예쁨”과 “옳음” 사이에는 미적 체계 하나가 통째로 놓여 있습니다.

첫 번째 탈선: “멋짐”을 목표로 삼기

lusion.co를 보고 나서야 제가 원하는 감각을 알았다고 생각해 쫓기 시작했습니다: Three.js 파티클 필드, 블룸 후처리, 은하 형태, 유성, 클릭 충격파… 버전 번호는 17까지 굴러갔습니다.

그러다 사용자(바로 저 자신)가 치명적인 한마디를 던졌습니다: “영 뭔가 사이파이 같지 않아. 클럽 같아.”

이 한마디는 천금의 가치가 있습니다. 이펙트 누적의 근본 문제를 폭로했으니까요: 이펙트는 덧셈이지만 고급스러움은 뺄셈입니다. 알록달록한 노이즈 파티클 + 전면 블룸 + 모든 것이 움직임 = 모든 요소가 소리치고 있음 = 주인공이 없음.

잣대의 교체: “Apple이라면 어떻게 할까”

새 잣대를 대자 모든 결정이 단순해졌습니다:

• 한 페이지에 허락되는 시각적 주인공은 하나 → 파티클은 알록달록한 노이즈에서 은백색 서리 유리 행성으로, 조명받은 실체처럼
• 페이지 전체에 남기는 색은 하나 → Apple 블루 궤도 링, 나머지는 전부 흑백회
• 이펙트는 구조적 의미를 가져야 함 → 숨쉬기, 궤도 링, 스크롤 모핑은 유지. 유성과 충격파는 삭제
• 글자는 장식이 아니라 콘텐츠 → 반짝이는 그라디언트를 걷어내고 HUD 각 라벨과 좌표 표시도 철거

바꾸고 나서 17판을 다시 보니 “단순해졌다”가 아니라 처음으로 제품처럼 보였습니다.

중간에 돌아간 길도 있다

“더 Apple답게”라는 직감이 전부 옳았던 건 아니었습니다. 한때 작품 섹션을 전체 화면 카드 넘기기로 만들었는데 — 한마디에 퇴짜를 맞았죠: “이거 PPT가 됐어.” 진짜 문제는 이것이었습니다: Apple의 페이지는 연속적으로 흐르며 ‘넘기기’라는 이산 동작이 존재하지 않습니다. 최종판은 연속 에디토리얼 배치: 넉넉한 여백, 머리카락 굵기의 선, 스크롤에 따라 떠오르는 콘텐츠, 그 뒤로 끝없이 흐르는 파티클 필드.

가라앉은 세 가지 군율

1. 한 화면의 주인공은 하나 — 나머지는 조연의 논리로 어둡게, 작게, 뒤로
2. 모션은 구조적 의미를 가질 것 — 시선을 이끌거나 상태를 설명할 것. 순수한 허세는 전부 삭제
3. 절제는 순환하는 화폐다 — 색과 모션을 아껴 쓰고, 저축한 주의력을 정말 중요한 한 순간에 쓴다

이 사이트는 아직도 반복 중이지만, 이 세 가지는 이제 바뀌지 않을 겁니다.