본문으로 건너뛰기
포트폴리오 목록으로

웹사이트콘셉트 데모

Minute — AI 회의록 · 태스크 자동화 SaaS

실시간 음성 파형 캔버스·스크롤 타임라인·Linear/Jira 연동으로 완성한 B2B SaaS 웹사이트

직접 써보기 이 사례를 참고해 문의하기

4.2시간 · 5개 페이지주당 절감 시간

누구를 위해
제품의 복잡한 AI 파이프라인과 요금제·도입 성과를 직관적인 스크롤 모션으로 설득하려는 B2B SaaS 팀
무엇이 문제였나
기능 나열식 SaaS 랜딩 페이지로는 실제 회의 중 실시간 화자 분리·요약·이슈 트래커(Linear/Jira/Slack) 전달이 어떻게 이어지는지 체감하기 어려웠습니다.
무엇을 했나
실시간 음성 파형 캔버스 히어로, 300vh 스티키 스크롤 라이브 회의록 씬, 가로 스크롤 3단계 파이프라인, 요금제 시뮬레이터, 고객 도입 사례를 5개 페이지로 유기적으로 설계했습니다.
무엇이 달라지나
방문자가 홈·제품·요금제·고객사례·회사소개 5개 페이지를 커튼 트랜지션과 함께 오가며 도입 효과(주당 4.2시간 절감)와 플랜 구성을 즉시 검증할 수 있습니다.
Minute — AI 회의록 · 태스크 자동화 SaaS 체험 화면
가상 브랜드로 만든 체험 화면입니다. 실제 고객 사례가 아닙니다.

어떻게 움직이나

한 건의 일이 처음부터 끝까지 어떻게 흘러가는지 순서대로 보여드립니다.

회의 음성 한 건이 요약과 담당자별 할 일로 전달되기까지

예시 입력회의 녹음 3분기 로드맵 리뷰 · 58분 (참석 6명)연동 워크스페이스 Linear · Jira · Slack

재생을 누르거나 단계를 눌러 순서대로 살펴보세요.

직접 써보기

가상 브랜드로 만든 데모입니다. 주문·예약·상담은 실제로 전송되지 않습니다.

이렇게 해보세요

  1. 상단 페이지 스위처에서 01 홈 · 02 제품 · 03 요금제 · 04 고객 사례 · 05 회사 소개 5개 페이지를 전환해보세요
  2. 01 홈 화면에서 아래로 스크롤하면 3D 틸트 회의록 창이 펴지면서 실시간 발화·요약·담당자 할 일이 차례대로 나타납니다
  3. 계속 스크롤하면 01 듣기 → 02 정리 → 03 전달 가로 스크롤 트랙과 숫자 카운트업(4.2시간, 96%, 30초, 2,400팀)이 동작합니다
체험 가이드 1개 더 보기
  • 페이지 안의 버튼(무료로 시작하기, 제품 보기, 고객 사례 등)을 클릭하면 커튼 모션과 함께 해당 페이지로 이동합니다

화면 크기를 바꿔 PC와 모바일에서 같은 흐름을 확인할 수 있습니다.

https://example.com
Minute01 홈 · 라이브 회의록

회의는 끝나도, 기록은 남습니다 — 실시간 화자 분리·요약·액션아이템 전달

만든 범위

Modernist 디자인 시스템(Archivo 헤비 타이포그래피 · 버밀리온 액센트 · 헤어라인 그리드)과 커스텀 모션 엔진(motion.js)으로 구현한 B2B SaaS 멀티페이지 웹사이트입니다. 커서 반응형 음성 파형 캔버스(Canvas 2D), 스크롤 진행률에 따라 실시간으로 대화록·요약·할 일이 채워지는 300vh 스티키 씬, 3단계 가로 스크롤 카드 트랙, 월간/연간 요금제 전환, 고객사 성과 프리뷰까지 모든 화면이 끊김 없이 동작합니다.

구현한 기능

  • 커서 반응형 음성 파형 Canvas & 프리로더마우스 위치와 속도에 반응하는 다중 사인파 음성 파형 캔버스와 00→100 카운터 프리로더로 첫인상 몰입감 형성
  • 300vh 스티키 라이브 회의록 & 가로 스크롤 트랙스크롤 위치에 따라 화자별 타임스탬프 발화 → 5줄 요약 완료 → 담당자별 기한 배정이 순차 점등되는 인터랙티브 씬
  • 5개 멀티페이지 & 스와이프 커튼 트랜지션Home · Product · Pricing · Customers · Company 5개 페이지 간 스와이프 커튼 전환과 상단 탭 즉시 이동 지원
  • 요금제 플랜 비교 & 고객 도입 성과 인덱스Starter·Team·Enterprise 플랜 비교, 보안 아키텍처(SOC 2 Type II), 산업별 도입 전후 지표 프리뷰 제공

사용한 기술

Modernist Design System · Custom Motion Engine (motion.js) · HTML5 Canvas 2D · React 18 / DC Runtime · Sticky Scroll Choreography

확인된 사실

페이지 구성
Home · Product · Pricing · Customers · Company
핵심 모션
음성 파형 캔버스 · 300vh 스티키 스크롤 씬
전환 설계
월/연간 요금 토글 · 좌석 수 계산 · FAQ
도입 지표
96% 한국어 인식 · 30초 요약 완료

데모의 구현 범위입니다. 실제 고객 성과가 아니며, 브랜드와 인물은 체험을 위해 만든 가상 콘셉트입니다.