첫인상: 강렬한 시각적 몰입과 브랜딩

DRAFT.X 메인 페이지 — 데스크톱 1440×900

DRAFT.X 웹사이트에 접속하면 가장 먼저 압도적인 크기의 비디오 백그라운드와 대담한 타이포그래피가 시선을 사로잡습니다. 하이엔드 디지털 에이전시라는 정체성에 걸맞게, 정적인 정보 전달보다는 “우리가 어떤 시각적 경험을 만들어낼 수 있는가”를 쇼케이스 형태로 증명하는 데 초점을 맞추고 있습니다. 스크롤을 내릴 때마다 끊임없이 이어지는 트랜지션과 마이크로 인터랙션은 사용자에게 강한 브랜딩 인상을 남깁니다.

기술 스택 해부

프레임워크 & 아키텍처 패턴: 왜 Framer를 선택했을까?

추출된 DOM 상태 모델과 생성기 메타데이터(generator="Framer 7587b09")를 확인해 보면, 이 사이트는 전통적인 프론트엔드 프레임워크(React, Next.js 등)로 하드코딩된 것이 아니라 Framer 기반으로 구축되었습니다.

에이전시 관점에서 이러한 아키텍처 선택은 매우 전략적입니다. 에이전시 웹사이트의 최우선 과제는 기능 구현이 아니라 압도적인 시각적 퍼포먼스와 부드러운 트랜지션입니다. Next.js와 Framer Motion을 결합하여 개발자가 픽셀 단위로 인터랙션을 구현하는 방식은 개발 비용과 소요 시간이 큽니다. 반면, Framer를 채택하면 디자이너가 애니메이션 커브와 트리거를 직접 제어할 수 있어 이터레이션 속도가 비약적으로 상승합니다. 이는 개발 생산성보다 시각적 디테일과 배포 주기를 타협 없이 끌어올리기 위한 시니어 레벨의 아키텍처 결정으로 분석할 수 있습니다.

컴포넌트 & 상태 관리 전략

Framer 환경 특성상 __NEXT_DATA__와 같은 단방향 데이터 바인딩 객체가 전역에 노출되지 않습니다. 정적 사이트 생성(SSG) 방식으로 초기 HTML을 빠르게 내려받은 후, 클라이언트 측에서 React 컴포넌트를 마운트(Hydration)하여 동적 인터랙션을 수행하는 생태계의 교과서적인 패턴을 따르고 있습니다. 복잡한 전역 상태 패턴보다는 뷰포트 내 엘리먼트의 가시성(Intersection Observer)에 의존하여 상태를 트리거하는 방식이 지배적입니다.

디자인 시스템 분석

컬러 팔레트

명시적인 CSS 변수(--color-*) 테이블이 외부에 노출되어 있지는 않으나, 시각적 에셋과 렌더링된 스타일을 기반으로 사이트 전체를 관통하는 하이엔드 다크/모노톤 시스템을 관찰할 수 있습니다.

철저하게 무채색 중심의 대비(Contrast)를 활용하여 시선을 분산시키지 않고 클라이언트의 작업물(포트폴리오 비디오 및 이미지) 자체의 색채가 포인트 컬러 역할을 하도록 유도하고 있습니다.

타이포그래피

폰트 패밀리 구성은 대형 디스플레이와 모바일 환경 양쪽에서 기하학적이고 현대적인 느낌을 전달하기 위해 장식이 배제된 산세리프(Sans-serif)를 강력하게 사용합니다. 특히 굵기(Weight)의 극단적인 대비를 통해 텍스트만으로도 시각적인 그리드와 위계를 형성하는 전략이 돋보입니다.

레이아웃 & 반응형 전략

압도적인 스크롤 길이는 이 사이트의 최대 특징입니다. 데스크톱 뷰포트에서 약 9,000px, 모바일에서 9,284px에 달하는 높이를 보유하고 있습니다.

데스크톱 vs 모바일 스크롤 전체 길이 비교

스크롤 길이에 큰 차이가 나지 않는다는 것은, 모바일에서도 콘텐츠를 축약하거나 숨기지 않고 원페이지 스토리텔링의 흐름을 최대한 원형 그대로 유지하겠다는 의도입니다. 모바일 환경에서는 가로 영역 제어를 위해 그리드가 1열 스택(Stack)으로 재편되나, 시각을 압도하는 미디어와 타이포그래피 룩앤필은 그대로 유지됩니다.

UX 패턴 깊이 파기: 시각적 내러티브와 미디어의 조합

스크롤 인터랙션과 트랜지션

Framer의 특장점인 스크롤 기반 애니메이션(Scroll-linked Animations)이 스크롤 진행 내내 부드럽게 연결됩니다. 단순한 나타나기 효과를 넘어, 스크롤 깊이에 따라 요소의 크기가 변하거나 공간적 Z-index를 변경하며 깊이감(Depth)을 창조해 내는 패럴랙스 구성이 뛰어납니다.

커스텀 커서와 인터랙티브 피드백

DRAFT.X에서 눈에 띄는 디테일 중 하나는 기본 OS 커서를 완전히 대체한 커스텀 커서입니다. 페이지 위를 이동할 때 작은 원형 도트가 마우스를 따라다니다가, 클릭 가능한 요소(포트폴리오 썸네일, 버튼 등) 위에 올리면 커서가 확대되거나 텍스트 레이블(“View”, “Play” 등)이 포함된 형태로 모핑됩니다. 이 패턴은 단순한 cursor: pointer 변경과는 차원이 다른 수준의 인터랙션 레이어를 형성합니다.

기술적으로는 mousemove 이벤트에 연결된 커스텀 <div> 요소를 position: fixed로 배치하고, transform: translate3d()와 transition을 조합하여 마우스 좌표를 약간의 딜레이(보통 0.15s ~ 0.2s)로 추적하게 만드는 방식입니다. Framer 환경에서는 이를 컴포넌트 단위로 설정할 수 있어, 특정 섹션에 진입할 때 커서의 색상이나 블렌드 모드(mix-blend-mode: difference)가 바뀌며 배경 콘텐츠와 자연스럽게 반응하는 효과를 구현합니다.

이러한 커스텀 커서는 에이전시 사이트에서 “디테일에 대한 집착”을 보여주는 대표적인 시그널입니다. 다만 모바일에서는 커서 자체가 존재하지 않으므로, 터치 환경에서는 탭 피드백(리플 이펙트 등)으로 대체하거나 아예 비활성화하는 분기 처리가 필요합니다.

미디어 객체의 적극적 활용

일반적인 정적 이미지 대신 다수의 고화질 비디오를 Hover 효과나 백그라운드로 배치합니다. 이는 일반 제품 페이지에서는 성능을 위해 자제하는 방식이지만, 에이전시는 ‘무게감’을 감수하고서라도 사용자에게 몰입형 다이내믹 경험을 주는 데 베팅했습니다.

네비게이션

최상단 헤더는 고정형(Sticky)이 아닌 초기 노출 후 스크롤에 따라 사라지는 방식입니다. 에이전시 포트폴리오 사이트 특성상 GNB(Global Navigation Bar)가 시각적 몰입을 방해하지 않도록 의도적으로 존재감을 최소화한 선택입니다. 메뉴 항목도 최소한으로 유지하여 사용자의 선택지를 줄이고, 스크롤이라는 단일 동선에 집중하도록 유도합니다. 모바일에서는 햄버거 메뉴로 전환되며, 풀스크린 오버레이 형태로 열리는 패턴을 따릅니다.

정보 구조

콘텐츠 계층은 전형적인 에이전시 원페이지 스토리텔링 구조를 따릅니다. 히어로(브랜드 임팩트) → 서비스 소개 → 포트폴리오 쇼케이스 → 팀/문화 → 컨택트 순서로 배치되어 있으며, 각 섹션 전환 지점마다 비디오나 패럴랙스 효과를 삽입하여 시각적 구분자 역할을 합니다. CTA(Call-to-Action)는 페이지 최하단에 집중 배치하여, 전체 포트폴리오를 끝까지 감상한 사용자만 전환 동선으로 유도하는 구조입니다. 이는 단가 높은 B2B 프로젝트 수주를 목표로 하는 에이전시의 세일즈 퍼널에 적합한 설계입니다.

SEO, 웹 표준 및 접근성 (Squirrel Audit 기반)

화려한 프론트엔드 이면에 숨겨진 노코드 툴(Framer 등) 설계의 트레이드오프들이 감사를 통해 확연하게 드러납니다.

이러한 지표는 Framer와 같은 시각화 툴이 개발의 추상화 계층을 극도로 높이는 대신 세밀한 마크업 및 접근성 제어(A11y)에서 아직 빈틈이 있음을 시사합니다.

배울 점 & 아쉬운 점

참조할 만한 기술

Framer의 스크롤 기반 애니메이션을 직접 코드로 구현한다면, Intersection Observer API와 CSS scroll-timeline을 조합하는 방식이 가장 가깝습니다. DRAFT.X에서 사용하는 뷰포트 진입 시 페이드+스케일 트랜지션은 아래와 같은 패턴으로 재현할 수 있습니다:

/* 스크롤 연동 애니메이션 — 뷰포트 진입 시 트리거 */
.reveal-section {
  opacity: 0;
  transform: scale(0.95) translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-section.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

// Intersection Observer로 뷰포트 진입 감지
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        observer.unobserve(entry.target); // 한 번만 트리거
      }
    });
  },
  { threshold: 0.15 }
);
document.querySelectorAll('.reveal-section').forEach((el) => observer.observe(el));

비디오 백그라운드의 경우, <video> 태그에 playsinline muted autoplay loop 속성을 조합하되, preload="none"으로 초기 로드를 차단하고 Intersection Observer로 뷰포트 진입 시에만 .play()를 호출하면 DRAFT.X와 유사한 경험을 성능 손실 없이 구현할 수 있습니다.

커스텀 커서 역시 직접 구현할 수 있습니다. 핵심은 position: fixed 요소를 mousemove에 연결하되, transition으로 약간의 지연을 주어 부드러운 추적감을 만드는 것입니다:

.custom-cursor {
  position: fixed;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transition: transform 0.15s ease-out, width 0.3s, height 0.3s;
}
.custom-cursor.hover {
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%) scale(1);
}

const cursor = document.querySelector('.custom-cursor');

document.addEventListener('mousemove', (e) => {
  cursor.style.left = `${e.clientX}px`;
  cursor.style.top = `${e.clientY}px`;
});

// 클릭 가능한 요소 위에서 커서 확대
document.querySelectorAll('a, button, [data-cursor="expand"]').forEach((el) => {
  el.addEventListener('mouseenter', () => cursor.classList.add('hover'));
  el.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
});

// 터치 디바이스에서는 비활성화
if ('ontouchstart' in window) {
  cursor.style.display = 'none';
}

mix-blend-mode: difference를 적용하면 DRAFT.X처럼 배경 색상에 따라 커서 색이 자동으로 반전되어, 밝은 영역과 어두운 영역 모두에서 커서가 잘 보이는 효과를 얻을 수 있습니다.

개선 여지

노코드 툴이나 빌더를 사용하더라도 수동 튜닝이 필수적입니다. 특히 다음 영역에서 보완이 필요합니다:

• 22개 이상의 이미지에 loading="lazy" 속성이 누락된 점은 커스텀 코드 블록으로 Offscreen 이미지에 지연 로딩을 강제할 수 있습니다.
• <main>, <nav> 등 시맨틱 랜드마크가 부재한 점은 Framer의 컴포넌트 태그 설정에서 HTML 요소를 직접 지정하면 해결됩니다.
• aria-hidden="true"가 포커스 가능한 요소에 적용된 문제는 해당 요소에 tabindex="-1"을 추가하거나 aria-hidden을 제거해야 합니다.
• 포트폴리오 영상에 VideoObject 스키마와 자막 트랙(.vtt)을 추가하면 검색엔진 가시성과 접근성을 동시에 확보할 수 있습니다.

배울 점: 개발자가 가져갈 기술적 인사이트

1. 도메인에 맞는 성능 트레이드오프 결정: B2C SaaS에서는 100ms 로딩 최적화가 최우선이지만, 에이전시나 브랜드 쇼룸에서는 데이터 로드를 희생하면서 고화질 비디오(자동재생)와 거대한 스크롤 이벤트를 통해 사용자 텐션을 유지시키는 전략이 유효합니다. 프로젝트 성격에 따라 코어 웹 바이탈보다 시각적 임팩트가 더 중요한 도메인이 존재한다는 점을 인지해야 합니다.

2. 노코드 툴의 추상화 계층 이해: Framer처럼 개발의 추상화 레벨을 극도로 높이는 도구는 이터레이션 속도를 비약적으로 끌어올리지만, 세밀한 마크업·접근성·SEO 제어에서 빈틈이 생깁니다. 초안 배포 후 개발자가 커스텀 코드 블록을 삽입하여 시맨틱 태그와 지연 로딩을 보완하는 워크플로우가 현실적입니다.

3. Intersection Observer 기반 리소스 제어: 뷰포트 진입 시점에 비디오 재생, 이미지 로드, 애니메이션 트리거를 모두 연결하는 패턴은 DRAFT.X처럼 미디어가 많은 사이트에서 성능과 경험을 모두 잡는 핵심 기법입니다. threshold 값 조정으로 트리거 타이밍을 미세하게 제어할 수 있습니다.

자주 묻는 질문 (FAQ)

Q. 프레이머로 대형 에이전시 사이트를 만들어도 성능상 무리가 없나요?
A. 초기 로딩이나 LCP 등 코어 웹 바이탈 점수는 하드코딩된 최적화 사이트보다 떨어질 확률이 높습니다. 하지만 디자이너가 애니메이션 이터레이션 사이클을 5배 이상 단축할 수 있어, 시각적 충격이 필수적인 에이전시 도메인에서는 그 트레이드오프가 충분히 합리적인 선택입니다.

Q. 프레이머에서 발생하는 SEO/접근성 이슈는 어떻게 보완해야 하나요?
A. Framer 자체에서 제공하는 SEO 설정 탭을 꼼꼼히 채우는 것은 기본이며, 커스텀 <head> 주입 기능을 통해 VideoObject 같은 고급 스키마 마크업을 수동으로 삽입해야 합니다. 시맨틱 태그는 컴포넌트 환경설정에서 가능한 태그(nav, section, main 등)를 지정하는 옵션을 적극 활용해야 합니다.

Q. 이처럼 긴 9,000px 스크롤 페이지에서 사용자 이탈을 막는 핵심은 무엇인가요?
A. 뷰포트에 도달할 때마다 터지는 마이크로 인터랙션과 패럴랙스 요소들입니다. 정적인 텍스트만 9,000px을 나열하면 즉시 이탈하겠지만, 깊이감과 투명도가 계속 변화하는 동적 경험은 사용자로 하여금 “다음엔 무엇이 나올까” 라는 기대감을 유발하여 계속 스크롤을 내리게 만듭니다.

---