광안리 테넌바움294 데모 —
수평선에서 모션을 꺼내는 법
광안리 테넌바움294 데모의 대표 모션은 수평선 리빌 하나뿐입니다. 요소가 아래에서 떠오르는 대신 가로 한 줄에서 위아래로 열립니다. 이 현장이 파는 것이 남쪽으로 열린 바다와 그 위를 가로지르는 광안대교, 즉 수평선이기 때문입니다. 모션은 장식이 아니라 그 현장이 무엇을 파는지를 한 동작으로 말하는 수단입니다.
- 입지 = 남쪽 바다 + 가로로 지나가는 광안대교 → 화면의 기준선은 수평선.
- 대표 모션은 하나만.
clip-path: inset(48% 0)→inset(0)로 가로 한 줄에서 열린다. - 기존 데모의 고유 keyframes 127종에 없는 방식 —
pop·fade·rise·drop·cue다섯이 대부분을 덮고 있었다. prefers-reduced-motion에서 전면 정지. 확정 수치에는 카운트업을 쓰지 않는다.
모션을 정하기 전에 본 것
모션을 먼저 고르고 현장에 끼워 맞추면 어디서 본 듯한 화면이 됩니다. 순서를 뒤집었습니다. 먼저 물었습니다 — 이 현장이 파는 것은 무엇인가. 부산 수영구 광안해변로 323. 남쪽으로 바다가 열리고, 동쪽으로 광안대교가 가로질러 갑니다. 38층 세대에서 찍은 실제 사진을 보면 답이 분명했습니다. 이 현장이 파는 것은 가로로 긴 한 줄입니다.
그래서 수평선 리빌
요소가 아래에서 위로 떠오르는 등장은 가장 흔한 선택입니다. 기존 데모 169개의 고유 keyframes 이름을 세어 보니 127종이었지만 pop(54) fade(33) rise(29) drop(29) cue(28) 다섯이 대부분을 덮고 있었습니다. 우리는 다르게 가려고가 아니라 수평선에서 도출했기 때문에 다른 결과를 얻었습니다.
구현은 단순합니다. 요소를 가로 한 줄로 접어 두었다가 위아래로 펼칩니다.
직접 보기 · 동작
흔한 등장 vs 수평선 리빌
지상 39층 두 개 동에
단 294세대
아래에서 떠오름 — translateY
지상 39층 두 개 동에
단 294세대
수평선 리빌 — clip-path: inset()
왼쪽은 기존 데모 169개에서 가장 흔한 방식입니다. 오른쪽은 광안리 수평선에서 도출한 방식으로, 요소가 가로 한 줄에서 위아래로 열립니다. 같은 문장인데 화면이 말하는 바가 달라집니다. prefers-reduced-motion을 켜 두셨다면 두 쪽 모두 즉시 표시됩니다.
첫 번째 함정 — clip-path와 IntersectionObserver
처음 구현했을 때 첫 화면이 통째로 비어 보였습니다. 원인을 찾는 데 시간이 걸렸습니다. clip-path로 요소를 48% 접어 두면 브라우저가 교차 비율을 접힌 크기로 계산합니다. 실제로는 4%쯤 되는데, IntersectionObserver의 임계값을 12%로 두었으니 영영 발동하지 않았습니다. 임계값 방식을 버리고 위치 계산(getBoundingClientRect().top)으로 바꿔 해결했습니다.
직접 보기 · 함정 재현
clip-path로 접으면 교차 비율이 작게 잡힌다
접힘 48%
실제 높이 대비 보이는 부분 = 4%
임계값 12%
IntersectionObserver 발동 기준
접힌 상태의 노출 비율(4%)이 임계값(12%)보다 작으니 교차 판정이 영영 참이 되지 않습니다. 요소는 화면 안에 있는데 브라우저는 “아직 안 보인다”고 답합니다. 그래서 첫 화면이 통째로 비어 보였습니다. 임계값 대신 getBoundingClientRect().top으로 판정해 해결했습니다.
두 번째 함정 — 빠르게 스크롤하면 건너뛴다
고치고 나서도 빠르게 스크롤하면 일부 요소가 접힌 채 남았습니다. 판정 조건에 r.bottom > 0을 넣었던 탓입니다. 스크롤 이벤트 사이에 요소가 화면 위로 완전히 지나가 버리면 조건이 영원히 거짓이 됩니다. 이미 지나간 것도 열어 주어야 합니다. r.top < vh * 0.92 하나로만 판정하도록 바꿨습니다.
세 번째 함정 — 탭을 옮겼다 돌아오면
등장 처리를 requestAnimationFrame 안에만 두면, 탭이 숨겨진 동안 rAF가 멈추기 때문에 돌아왔을 때 빈 화면을 봅니다. rAF 밖에서도 호출하고 visibilitychange·pageshow를 붙여 막았습니다.
첫 화면은 스크롤을 기다리지 않는다
가장 중요한 원칙입니다. 방문자가 페이지를 열자마자 보는 화면의 요소는 스크롤 트리거에 걸어 두면 안 됩니다. 히어로의 제목·설명·수치는 로드 즉시 표시되게 따로 처리했습니다. 등장 애니메이션 때문에 첫 화면이 비어 보이는 것은 모션의 실패가 아니라 설계의 실패입니다.
그리고 확정 수치에는 카운트업을 쓰지 않습니다. 294세대, 39층, 350대 같은 숫자가 0에서 올라가면 눈길은 끌지만, 방문자가 정확히 읽어야 할 정보가 잠시 거짓이 됩니다.
자주 묻는 질문
대표 모션을 왜 하나만 쓰나요?
clip-path로 만든 등장 효과에 주의할 점이 있나요?
접근성은 어떻게 처리했나요?
이 데모는 실제 의뢰를 받아 만든 건가요?
우리 현장도 이렇게 설계할 수 있을까?
현장 자료만 주시면, 그 현장의 브랜드·지역·상품에서 색과 모션과 레이아웃을 도출한 방향을 무료로 제안드립니다. 골격을 복제하지 않습니다.
무료 견적 받기※ 본 글은 광안리 테넌바움294 리디자인 컨셉 데모의 디자인 근거를 기록한 제작 노트입니다. 이미지·포트폴리오·데모는 PLOT이 역량 시연을 위해 자체 제작한 것으로 실제 의뢰·감수·승인을 받은 것이 아니며, 분양 관련 표기는 해당 현장의 입주자모집공고와 분양계약을 우선합니다. 본문의 수치는 공개된 사업개요·상품 자료를 대조해 확인한 값이고, 검증되지 않은 외부 통계·후기는 사용하지 않았습니다. 최종 업데이트 .