요약

• 바이오·딥테크 기업이 글로벌 VC 앞에서 가장 자주 실패하는 지점은 복잡한 기술 메커니즘을 2D 슬라이드로 전달하려는 시도 자체입니다.
• 3D 스크롤리텔링 IR 웹은 스크롤 동작에 맞춰 분자 구조·작동 원리가 실시간으로 펼쳐지는 인터랙티브 홈페이지 기획 방식입니다.
• WebGL / React Three Fiber 기반 구현이 대중화되면서 제작 비용과 로딩 속도 장벽이 모두 낮아졌습니다.
• 핵심은 '3D 기교'가 아니라 내러티브 설계 → 에셋 경량화 → 스크롤 트리거 매핑 → 데이터 레이어 연동의 순서입니다.
• 이 글은 시리즈 A~B 라운드를 앞둔 딥테크 기업의 CMO·PR 담당자가 기획 초기에 바로 활용할 수 있도록 작성했습니다.

PPT 피칭덱으로 설명 못 한 MoA, 3D 스크롤리텔링 IR 웹으로 바꾸는 법

해외 VC 심사역에게 신약 후보 물질의 작용 기전(MoA)을 설명하는 자리를 상상해 보세요. 슬라이드를 넘기며 "이 수용체에 결합하면..."이라고 말하는 순간, 상대방의 눈빛이 흐려집니다. 시차 때문에 피로한 상태에서 영어로 듣는 단백질 구조 설명은, 아무리 훌륭한 데이터라도 뇌에 착지하지 않습니다.

이 문제를 근본적으로 해결하는 방식이 3D 스크롤리텔링(Scrollytelling) IR 웹 기획입니다. 피칭 세션이 끝난 뒤 심사역이 링크 하나를 열어 스스로 스크롤을 내리면서, 분자가 회전하고 약물이 결합하는 장면을 직접 '조작'하며 이해하는 경험을 만드는 것입니다.

왜 지금 이 방식인가: 기술 장벽이 무너진 시점

3D 웹은 오랫동안 '무겁고 비싸다'는 이유로 기업 홈페이지 제작에서 외면받았습니다. 하지만 2025~2026년을 기점으로 세 가지 변화가 동시에 일어났습니다.

① WebGL / WebGPU 렌더링 성능의 도약 브라우저가 GPU를 직접 활용할 수 있게 되면서, 수만 개의 폴리곤을 가진 세포 구조물도 버벅임 없이 실시간 렌더링이 가능해졌습니다.

② React Three Fiber(R3F) 생태계 성숙 React 기반 개발 환경에서 3D 씬(Scene)을 컴포넌트처럼 다룰 수 있어, 프론트엔드 개발자가 별도 3D 전문 인력 없이도 스크롤 연동 3D를 구현할 수 있습니다.

③ Spline, Needle Engine 같은 노코드 3D 도구 확산 기획자와 디자이너가 프로토타이핑 단계에서 직접 3D 에셋을 만들고 웹에 임베드할 수 있어, 기획-개발 간 커뮤니케이션 비용이 크게 줄었습니다.

결과적으로 '3D 스크롤리텔링 IR 웹'은 더 이상 대기업 전용 프로젝트가 아닙니다. 시리즈 A~B 라운드를 준비하는 딥테크 스타트업도 현실적인 예산 안에서 구현할 수 있는 홈페이지 제작 옵션이 됐습니다.

기획 전 반드시 결정해야 할 것: '무엇을 3D로 보여줄 것인가'

3D 스크롤리텔링의 가장 흔한 실패 원인은 기술 과시입니다. 분자가 빙글빙글 돌아가는데 정작 투자자가 알고 싶은 임상 수치는 어디에 있는지 찾기 어려운 경우입니다.

기획 초기에 아래 세 가지 질문에 먼저 답해야 합니다.

• 우리 기술에서 '눈에 보이지 않아 설명이 가장 어려운 단 하나의 장면'은 무엇인가? (예: 항체가 암세포 표면 수용체에만 선택적으로 결합하는 순간 / 나노 소자가 특정 주파수에서만 공명하는 메커니즘)

• 그 장면을 보고 나면 투자자가 어떤 질문을 '스스로' 해결하게 되는가?

• 3D 연출 이후 바로 이어져야 할 데이터(임상 결과, 시장 규모, 특허 현황)는 무엇인가?

이 세 질문의 답이 곧 화면 설계의 뼈대가 됩니다.

4개 구간으로 나누는 스크롤 내러티브 설계

바이오·딥테크 IR 웹에서 검증된 스크롤 구간 설계입니다. 스크롤 진행률 0~100%를 4개 구간으로 나눕니다.

구간 1 (0~20%): 페인 포인트를 3D로 제시

투자자가 페이지에 처음 도착했을 때 보는 장면입니다. 현재 시장에 존재하는 문제를 3D 그래픽으로 직관적으로 보여줍니다.

• 바이오 예시: 암세포가 정상 세포를 잠식하는 장면, 또는 기존 약물이 타깃을 빗나가는 모습
• 딥테크 예시: 기존 반도체 회로에서 열이 발생해 효율이 떨어지는 시뮬레이션

이 구간의 목적은 '우리가 해결하려는 문제의 심각성'을 언어 장벽 없이 전달하는 것입니다.

구간 2 (20~55%): MoA를 카메라 워킹으로 설명

핵심 기술 메커니즘을 단계별로 펼치는 구간입니다. 스크롤 위치와 3D 애니메이션 프레임을 1:1로 매핑하는 기법(GSAP ScrollTrigger 또는 R3F <ScrollControls>)을 사용합니다.

실제 매핑 예시:

• 스크롤 20~35%: 전체 세포 모델이 천천히 회전하며 타깃 단백질 영역을 강조 표시
• 스크롤 35~50%: 카메라가 타깃 수용체로 줌인, 결합 부위 클로즈업
• 스크롤 50~55%: 약물 후보 물질이 수용체에 결합하는 장면 재생

각 단계 옆에는 한 문장짜리 핵심 설명 텍스트만 띄웁니다. 긴 문단은 금물입니다.

구간 3 (55~80%): 결과 데이터와 3D를 동시에 노출

약물 결합 이후 세포가 사멸하거나 시스템 효율이 개선되는 장면을 3D로 보여주면서, 화면 옆 또는 아래에 인터랙티브 데이터 차트를 함께 배치합니다.

이때 Tailwind CSS 기반의 벤토 그리드(Bento Grid) 레이아웃을 활용하면, 임상 수치·시장 규모·경쟁사 대비 우위 등 핵심 지표를 깔끔하게 정리할 수 있습니다. 마우스 호버 시 세부 데이터가 팝업되는 마이크로 인터랙션을 더하면 투자자의 자율 탐색을 유도할 수 있습니다.

구간 4 (80~100%): 비즈니스 컨텍스트와 CTA

기술 설명이 끝난 뒤, 투자자가 자연스럽게 도달하는 구간입니다. 파이프라인 현황, 특허 포트폴리오, 팀 소개, 투자 문의 버튼을 배치합니다. 이 구간은 일반적인 홈페이지 제작 원칙과 동일하게 설계합니다.

기술 구현 전 반드시 해야 할 에셋 최적화

3D 스크롤리텔링 IR 웹이 실패하는 두 번째 원인은 로딩 속도입니다. 아무리 멋진 분자 구조 모델도 로딩에 10초가 걸리면 투자자는 이탈합니다.

바이오 기업의 경우: PDB(Protein Data Bank) 파일을 그대로 웹에 올리면 브라우저가 다운됩니다. 반드시 GLTF 또는 GLB 형식으로 변환하고, 텍스처 용량 압축과 로우폴리곤(Low-Poly) 최적화를 거쳐야 합니다.

딥테크·하드웨어 기업의 경우: CAD 파일을 동일한 방식으로 GLTF로 변환합니다. 제품의 내부 구조를 '분해 뷰(Exploded View)'로 연출하면 복잡한 부품 구성을 직관적으로 보여줄 수 있습니다.

로딩 속도 기준: 초기 페이지 로딩은 3초 이내를 목표로 합니다. 모든 3D 에셋을 한 번에 불러오지 않고, 스크롤 진행에 따라 필요한 구간의 에셋만 순차적으로 로드하는 가상 스크롤링(Virtual Scrolling) 기법을 적용해야 합니다.

모바일 대응: 글로벌 VC가 아이패드로 검토한다는 사실

해외 VC 심사역들은 이동 중에 아이패드나 스마트폰으로 IR 자료를 검토하는 경우가 많습니다. 3D 스크롤리텔링 웹을 기획할 때 모바일 반응형 설계는 선택이 아닌 필수입니다.

실무에서 자주 놓치는 포인트:

• 화면 크기에 따라 3D 카메라의 FOV(시야각)를 자동 조정하는 코드 설계가 필요합니다. 데스크톱에서 완벽하게 보이던 분자 구조가 모바일에서는 잘려 보이는 경우가 흔합니다.
• 스크롤 조작감을 부드럽게 유지하려면 Lenis 같은 스무스 스크롤 라이브러리를 활용하되, 브라우저의 기본 스크롤 동작을 크게 방해하는 스크롤 하이재킹(Scroll Hijacking)은 최소화해야 합니다. 과도한 스크롤 제어는 모바일에서 특히 사용자 피로를 유발합니다.
• 터치 인터랙션에서도 3D 오브젝트를 회전하거나 특정 부위를 탭해 세부 정보를 볼 수 있도록 터치 이벤트를 별도로 설계해야 합니다.

기획 단계 체크리스트: 에이전시에 의뢰하기 전 내부에서 준비할 것

3D 스크롤리텔링 IR 웹 제작을 외부 에이전시에 의뢰할 때, 내부에서 이 항목들을 먼저 준비해두면 기획 시간과 비용을 크게 줄일 수 있습니다.

• [ ] 핵심 기술 메커니즘 1개를 선정하고, 그것을 설명하는 기존 그림·도식 자료 수집
• [ ] PDB 파일 또는 CAD 파일 보유 여부 확인 (없다면 3D 아티스트가 새로 제작해야 함)
• [ ] 투자자에게 반드시 전달해야 할 핵심 수치 5개 이내 선정 (임상 결과, 특허 수, 시장 규모 등)
• [ ] 경쟁사 대비 차별점을 한 문장으로 정리 (3D 연출의 카피라이팅 기준이 됨)
• [ ] 페이지 목적 명확화: 투자 문의 유도인지, 피칭 전 사전 이해 자료인지, 피칭 후 복습 자료인지

자주 묻는 질문 (FAQ)

Q1. 3D 스크롤리텔링 IR 웹 제작 비용은 얼마나 드나요? 프로젝트 범위에 따라 다르지만, 3D 에셋 제작 수준과 인터랙션 복잡도가 비용의 주요 변수입니다. Spline 같은 노코드 도구를 활용한 프로토타입 수준과, R3F 기반 풀커스텀 구현은 비용 차이가 큽니다. 기획 초기에 '어떤 장면을 3D로 꼭 보여줘야 하는가'를 좁혀두면 불필요한 범위 확장을 막을 수 있습니다.

Q2. 기존 홈페이지와 별도로 IR 전용 페이지를 만들어야 하나요? 반드시 별도일 필요는 없습니다. 기존 기업 홈페이지의 특정 서브 페이지(/ir 또는 /technology)로 구성하거나, 피칭 시즌에 맞춰 별도 도메인의 마이크로사이트로 운영하는 방식 모두 가능합니다. 마이크로사이트는 보안 관리(비공개 링크 설정)가 용이하다는 장점이 있습니다.

Q3. 3D 그래픽이 과학적으로 정확해야 하나요? 투자자 대상 IR 웹에서는 정확성과 직관성의 균형이 중요합니다. 학술 논문 수준의 정밀도보다는, 핵심 작용 원리를 왜곡 없이 단순화한 '설명용 3D'가 더 효과적입니다. 단, 실제 데이터와 충돌하는 시각적 연출은 반드시 피해야 합니다.

Q4. SEO 관점에서 3D 스크롤리텔링 페이지는 불리하지 않나요? JavaScript 렌더링 의존도가 높아 검색 엔진 크롤링에 불리할 수 있습니다. IR 웹의 경우 검색 유입보다 직접 링크 공유가 주된 유입 경로이므로 SEO 우선순위는 낮게 설정해도 됩니다. 다만 기업 메인 홈페이지에 통합할 경우, 핵심 콘텐츠를 <noscript> 태그나 서버사이드 렌더링(SSR)으로 별도 제공하는 설계를 권장합니다.

Q5. 바이오가 아닌 로보틱스·우주항공 기업도 같은 방식이 통하나요? 네, 오히려 하드웨어 기반 딥테크에서 효과가 더 직관적입니다. 로봇 관절의 토크 메커니즘, 위성 부품의 전개 구조, 나노 소자의 공명 원리 등은 CAD 기반 3D 분해 뷰와 스크롤 연동이 매우 잘 맞습니다.

마치며

해외 VC 심사역은 하루에 수십 개의 피칭덱을 봅니다. 텍스트와 그래프로 가득 찬 자료 더미 속에서, 스크롤 한 번으로 분자가 움직이고 데이터가 살아나는 IR 웹은 단순한 '멋진 홈페이지'가 아닙니다. 투자자의 뇌가 기술을 이해하는 방식 자체를 바꾸는 설득 도구입니다.

기획 초기에 '무엇을 3D로 보여줄 것인가'라는 질문 하나만 명확히 해도, 이후 제작 방향이 훨씬 선명해집니다.

에이달(ADALL)은 바이오·딥테크 기업의 글로벌 IR 홈페이지 제작 경험을 바탕으로, 내러티브 설계부터 3D 에셋 최적화, 스크롤 트리거 구현까지 일관된 프로세스로 진행합니다. 기획 초기 단계의 방향성 논의부터 함께할 수 있습니다.

프로젝트 문의: 02-2664-8631 | master@adall.co.kr