더샵 퍼스트월드 상봉 오피스텔 티저 사이트 구축

• 프로젝트 세팅, 인트로와 메인·서브 페이지 퍼블리싱
• 인트로의 로고가 헤더 로고로 이어지는 전환 애니메이션 구현
• 모바일 입지환경 섹션을 배경 고정·내용 스크롤 방식으로 바꿔 기기별 화면에 최적화
• 메인 프리미엄 섹션 진입 애니메이션 추가, 메인 비주얼 레이아웃 교체
• 모바일 개별 닫기 팝업 제작, 슬라이드 팝업 딤 오류 수정
• 관심고객등록 페이지 제작, 동의 문구와 유효성 검사 추가
• 이미지 용량 축소와 리소스 압축으로 성능 개선
• 관심고객등록 이벤트 당첨자 발표 페이지 등 오픈 이후 유지보수

섹션별 화면

GSAP ScrollTrigger와 Lenis를 쓰는 세로 스크롤 메인입니다. 각 섹션의 PC 화면(왼쪽)과 모바일 화면(오른쪽)입니다.

메인 비주얼

"Nice 2 meet you" 카피와 일러스트로 구성한 첫 화면입니다. 인트로가 끝나면 인트로의 로고가 헤더 로고 자리로 이어지는 애니메이션을 넣어, 인트로와 메인이 끊기지 않고 연결되도록 했습니다. 검수 과정에서 인트로 영상과 메인 비주얼 레이아웃을 한 차례 교체했습니다.

입지환경

스크롤하는 동안 화면이 고정된 채 카피와 이미지컷이 차례로 바뀌는 섹션입니다. 모바일에서는 기기별 화면 크기에 맞춰 최적화하기 위해, 배경 영역만 고정하고 내용이 스크롤되는 방식으로 변경했습니다. 메인 이미지컷을 추가하면서 이미지 용량을 함께 줄였습니다.

Brand Story

브랜드 소개 문구와 인테리어 이미지를 나란히 보여 주는 섹션입니다. 모바일에서는 문구와 이미지가 세로로 이어지도록 구성했습니다.

프리미엄

섹션에 들어설 때 재생되는 진입 애니메이션을 추가했고, 스크롤에 따라 프리미엄 항목이 번호 순서대로 넘어갑니다.

오시는 길

지도와 교통편별 안내를 한 화면에 담은 섹션입니다.