MindReach
설명
바이오 플랫폼 — 기업 웹사이트
기간
Jun 2026
역할
- 기업 브랜드 아이덴티티(BI)에 맞춘 웹사이트 전체 기획 및 국·영문 UI/UX 디자인.
- React 기반 반응형 프론트엔드 퍼블리싱 및 스크롤 인터랙션·헬릭스 캔버스 모션 총괄 구현.
- Supabase 관리자 CMS·문의 자동화·SEO/GA4·Vercel 배포까지 풀스택 개발.
기술
React 18 · TypeScript · Vite · Tailwind CSS 3
GSAP · ScrollTrigger · Lenis
Supabase (Auth · Postgres · Storage · RLS) · Resend
GA4 · Vercel
프로젝트 목적
"질병의 장벽을 넘어, 치료의 희망을 연결합니다." ㈜마인드리치는 독자적인 혈뇌장벽(BBB) 투과 약물전달 플랫폼 B-REACH™(작용물질 MR-01)로 난치성 뇌질환 신약을 개발하는 바이오 플랫폼 기업입니다. BBB 개폐 기전·검증 데이터·투트랙 파이프라인 같은 복잡한 신약 개발 기술을 비전문가도 신뢰할 수 있도록 시각화하고, 글로벌 제약사 대상 라이선스아웃(L/O)과 투자 유치에 설득력을 갖춘 하이엔드 기업 웹사이트를 구축하는 데 목적을 두었습니다. 오프화이트·네이비·틸 라이트 에디토리얼 디자인으로 바이오 산업의 신뢰감과 첨단 기술의 정제된 무드를 동시에 전달했습니다.
범위
- · 기업 공식 웹사이트 UI/UX 기획 및 디자인
- · 국·영문(i18n) 반응형 프론트엔드 퍼블리싱
- · Supabase 기반 관리자 CMS 구축
- · 문의 자동 알림·GA4·SEO 세팅 및 배포
주요 기술 특징
스크롤 기반 에디토리얼 인터랙션
- · Lenis 관성 스무스 스크롤과 GSAP ScrollTrigger를 결합해 히어로(DNA 헬릭스 캔버스) → 회사소개 → 플랫폼 → 파이프라인 → PR → 문의로 이어지는 섹션 등장을 설계했습니다.
- · 헤딩 마스크 리빌을 전 구간에 적용하되 prefers-reduced-motion을 존중해 접근성을 확보했습니다.
국·영문 다국어 구조
- · 모든 카피를 { ko, en } 데이터 레이어로 분리해 언어 컨텍스트로 실시간 전환합니다. 마크업 중복이 없습니다.
- · 언어별 디스플레이 헤딩 크기·히어로 높이·폰트(KoPubWorld 돋움 · Syne)까지 따로 최적화해, 어느 쪽도 번역본처럼 읽히지 않게 했습니다.
Supabase 기반 관리자 CMS
- · Auth·Postgres·Storage·RLS를 기반으로 인사말·비전·연혁 등 주요 텍스트, 이미지 교체, PR 게시글·첨부파일, 파이프라인, 푸터, 문의 상담을 관리자 페이지에서 직접 운영합니다.
- · 클라이언트가 코드 수정이나 배포 대기 없이 전부 바꿀 수 있습니다.
문의 자동화 · 데이터 분석
- · 문의 폼 제출 시 Postgres 트리거와 pg_net으로 Resend 이메일 알림을 자동 발송합니다.
- · GA4 라우트 추적과 페이지별 동적 SEO(title·description·OG·sitemap)를 적용했습니다.
모바일 성능 최적화
- · 실기기(iOS Safari) 렌더 부하를 분석해 터치 환경에서 헬릭스 캔버스와 과도한 blur를 조건부 비활성화했습니다.
- · 폰트 비차단 로딩·코드 스플리팅으로 저사양·저속망 환경까지 대응했습니다.
디자인 포인트
라이트 에디토리얼 바이오 아이덴티티
오프화이트(#f3f8f7) 베이스에 네이비 텍스트와 틸(#83cbc5) 액센트를 조합한 전면 라이트 에디토리얼 디자인으로, 바이오·제약 산업의 신뢰감과 첨단 기술의 정제된 무드를 동시에 연출했습니다. 넉넉한 여백과 타이포 위계가 전문성을 전달합니다.
근거 중심 스토리텔링
BBB 개폐 기전, Dextran 검증 데이터, 안전성, 투트랙 파이프라인(개발 단계 바)을 도식·피규어 카드·인터랙티브 테이블로 전면에 배치해, 제약사·투자자 대상 설득력을 높였습니다.
시그니처 헬릭스 히어로
딥틸·오션블루로 재색한 DNA 헬릭스 캔버스 애니메이션을 히어로에 배치해 '혈뇌장벽을 넘어 치료를 연결한다'는 브랜드 서사를 하나의 상징으로 시각화했습니다.