[App Landing] 폰 목업과 스토어 버튼으로 앱을 소개하는 다운로드 랜딩

한 줄 요약 - 앱스토어에 올릴 모바일 앱을 소개하는 한 페이지짜리 랜딩으로, 폰 모양 목업과 스토어 버튼/기능/통계를 위에서 아래로 쭉 보여줍니다.

이럴 때 필요해요

앱을 만들면 "이게 뭐 하는 앱이고 왜 받아야 하는지"를 한 화면에서 설득해야 합니다. 글만 잔뜩 있으면 와닿지 않죠. 그래서 실제 앱 화면을 폰 안에 넣어 보여주고, App Store / Google Play 버튼과 별점/다운로드 수를 같이 두는 구성이 표준이 됐습니다. 이 데모는 그 골격 전체를 한 벌로 담았습니다.

어떻게 동작하나

1. 폰 목업은 이미지가 아니라 전부 CSS로 그렸어요. 검은 테두리 박스에 둥근 모서리와 노치(상단 카메라 홈)를 얹고, 그 안에 진짜 앱처럼 보이는 가계부 화면을 채웠습니다.
2. 화면이 떠 있는 순간 잔액 숫자가 0에서 목표값까지 올라갑니다. requestAnimationFrame(브라우저가 매 프레임마다 불러주는 함수)으로 짧게 증가시켜 살아있는 느낌을 줍니다.
3. 아래로 스크롤하면 각 섹션이 살짝 아래에서 위로 떠오르며 나타나요. 화면에 들어왔는지를 IntersectionObserver(요소가 보이는지 감시하는 브라우저 기능)로 감지해, 보이는 순간 한 번만 애니메이션을 켭니다.

핵심은 이거예요

스크린샷 한 장 없이도 CSS만으로 "진짜 앱처럼 보이는 폰 화면"을 만들 수 있다는 것 - 목업/미니 차트/카테고리 리스트가 전부 div와 색으로 조립돼 있습니다.

놓치기 쉬운 것

• 이 랜딩은 페이지 안에 끼워 넣어(임베드) 보여주는데, 그 경우 스크롤이 페이지 전체가 아니라 작은 박스 안에서 일어나요. 그래서 reveal 감지를 화면(viewport)이 아니라 가장 가까운 스크롤 박스 기준으로 잡아야 제대로 작동합니다.
• 모바일에서는 기능 그리드가 한 줄로 접히고 폰 목업이 가운데로 와야 깨지지 않습니다 - 기본을 모바일로 두고 넓어질 때만 다열로 펴는 식으로 짰어요.
• 움직임을 싫어하는 사용자를 위해 reduce-motion 설정이 켜져 있으면 등장 애니메이션을 끕니다.

이런 곳에 써요

• 가계부/습관/운동 같은 모바일 앱의 공식 소개 페이지
• 신규 앱 출시 캠페인이나 사전 예약 안내 페이지