📌 MindReach (마인드리치) - 혈뇌장벽(BBB) 투과 약물전달 플랫폼 바이오 기업 웹사이트 구축

🔹 프로젝트 개요

• 작업 기간: 2026.06
• 작업 범위: 기업 공식 웹사이트 UI/UX 기획 및 디자인, 국·영문(i18n) 반응형 프론트엔드 퍼블리싱(React 18 + TypeScript + Vite), GSAP ScrollTrigger·Lenis 스크롤 인터랙션 및 헬릭스 캔버스 모션 구현, Supabase 기반 관리자 CMS(텍스트·이미지·게시글·문의) 구축, 문의 자동 이메일 알림·GA4·SEO 세팅 및 Vercel 배포
• 사용 도구: React 18, TypeScript, Vite, Tailwind CSS 3, GSAP + ScrollTrigger, Lenis(스무스 스크롤), Supabase(Auth·Postgres·Storage·RLS), Resend, GA4, Vercel, UI/UX 디자인 툴

🔹 프로젝트 목적

㈜마인드리치(MindReach Inc.)는 독자적인 혈뇌장벽(BBB) 투과 약물전달 플랫폼 'B-REACH™'(작용물질 MR-01)로 난치성 뇌질환 신약을 개발하는 바이오 플랫폼 기업입니다. 본 프로젝트는 "질병의 장벽을 넘어, 치료의 희망을 연결합니다"라는 핵심 메시지를 중심으로, BBB 개폐 기전·검증 데이터·투트랙 파이프라인 등 복잡한 신약 개발 기술을 비전문가도 신뢰할 수 있도록 시각화하고, 글로벌 제약사 대상 라이선스아웃(L/O)과 투자 유치에 설득력을 갖춘 하이엔드 기업 웹사이트를 구축하는 데 목적을 두었습니다. 카나프테라퓨틱스·레보스케치의 톤앤매너를 반영한 오프화이트·네이비·틸(#83cbc5) 라이트 에디토리얼 디자인으로 바이오 산업의 신뢰감과 첨단 기술의 정제된 무드를 동시에 전달했습니다.

🔹 핵심 기술 및 구현 기능 (Key Technical Features)

• Scroll-driven Editorial Interaction (스크롤 기반 에디토리얼 인터랙션):

Lenis 관성 스무스 스크롤과 GSAP ScrollTrigger를 결합해 히어로(DNA 헬릭스 캔버스)→회사소개→플랫폼→파이프라인→PR→문의로 이어지는 섹션 등장과 헤딩 마스크 리빌을 구현하고, prefers-reduced-motion을 존중해 접근성을 확보했습니다.

• Bilingual Content Architecture (국·영문 다국어 구조):

모든 카피를 { ko, en } 데이터 레이어로 분리해 언어 컨텍스트로 실시간 전환하고, 언어별 디스플레이 헤딩 크기·히어로 높이·폰트(KoPubWorld 돋움·Syne)까지 최적화한 유지보수 친화적 i18n 구조를 설계했습니다.

• Admin CMS on Supabase (Supabase 기반 관리자 CMS):

Auth·Postgres·Storage·RLS를 기반으로 인사말·비전·연혁 등 주요 텍스트, 이미지 교체, PR 게시글·첨부파일, 파이프라인, 푸터, 문의 상담을 코드 수정 없이 관리자 페이지에서 직접 운영하도록 구축했습니다.

• Inquiry Automation & Analytics (문의 자동화·데이터 분석):

문의 폼 제출 시 Postgres 트리거와 pg_net으로 Resend 이메일 알림을 자동 발송하고, GA4 라우트 추적과 페이지별 동적 SEO(title·description·OG·sitemap)를 적용했습니다.

• Mobile Performance Optimization (모바일 성능 최적화):

실기기(iOS Safari) 렌더 부하를 분석해 터치 환경에서 헬릭스 캔버스·과도한 blur를 조건부 비활성화하고, 폰트 비차단 로딩·코드 스플리팅으로 저사양·저속망 환경 대응을 완료했습니다.

🔹 디자인 포인트

• Light Editorial Bio Identity: 오프화이트(#f3f8f7) 베이스에 네이비 텍스트와 틸(#83cbc5) 액센트를 조합한 전면 라이트 에디토리얼 디자인으로, 바이오·제약 산업의 신뢰감과 첨단 기술의 정제된 무드를 동시에 연출했습니다. 넉넉한 여백과 타이포 위계로 전문성을 전달합니다.