돼지게티 웹사이트 구축

• AI 도구를 활용한 원페이지 웹사이트 메인 퍼블리싱 및 UI 구현
• GSAP 및 CSS Sticky 기반 스크롤 연동 인터랙션과 콘텐츠 모션 구현
• 콘텐츠별 레이아웃 및 구성 차이를 고려한 다양한 유형의 반응형 UI 구현
• 기존 팝업 시스템을 기반으로 신규 팝업 UI 설계 및 스타일링 적용
• AI 도구를 활용한 퍼블리싱 전반의 QA 및 오류 검증, UI 개선 작업 수행
• 인트로 애니메이션 타임라인과 스크롤 트리거 진행 구간을 전체적으로 조정, 카운팅 애니메이션 속도 개선
• GIF를 MP4로 교체하고 전체 슬라이더를 무한 롤링으로 설정
• 27인치 고해상도 화면 대응

섹션별 인터랙션

GSAP ScrollTrigger와 Lenis로 스크롤에 반응하는 원페이지입니다. 각 영상은 해당 섹션을 스크롤한 PC 화면(왼쪽)과 모바일 화면(오른쪽)입니다.

인트로

스크롤에 맞춰 진행되는 인트로 애니메이션입니다. 피드백을 받으며 타임라인을 여러 차례 조정했고, 모바일은 스크롤 디테일과 속도를 따로 맞췄습니다.

매출

매출 그래프에 이어 지점별 매출 카드가 스크롤에 따라 흐르는 섹션입니다. 컨페티 효과를 다듬고, 모바일에서는 요소 크기를 다시 잡았습니다.

숫자로 보는 PORKGHETTI

섹션에 들어서면 숫자가 올라가는 카운팅 애니메이션입니다. 피드백을 반영해 숫자가 더 천천히 올라가도록 속도를 조정했습니다.

고객 리뷰

고객 리뷰 화면을 모아 보여 주는 섹션입니다. 모바일에서는 여러 리뷰가 한꺼번에 보이면 읽기 어렵다고 판단해, 리뷰가 하나씩 롤링되는 방식을 기획자에게 먼저 제안했고 이를 반영해 가독성을 높였습니다.

성공 포인트

스크롤 진행에 따라 성공 포인트가 차례로 넘어가는 섹션입니다. 스크롤 트리거의 진행 구간 높이를 전체적으로 다시 맞췄고, 모바일의 네 번째 포인트에는 배경을 따로 넣었습니다.

메뉴

대표 메뉴를 슬라이더로 넘겨 보는 섹션입니다. 슬라이더를 무한 롤링으로 설정하고 슬라이더 크기와 여백, 모바일의 라인과 위치를 조정했습니다.

창업 프로모션

PC에서는 왼쪽 타이틀이 고정된 채 오른쪽 내용이 스크롤에 따라 바뀝니다. 모바일에서는 영역을 섹션으로 분리하고 애니메이션 속도를 조정했습니다.

성과

오픈 후 고객사로부터 결과물에 만족한다는 피드백을 받았습니다. 사이트 오픈 이후 가맹 상담이 늘었고, 같은 고객사와 다른 프로젝트 계약 두 건을 더 하게 되었습니다.