Lab YouMind · MarkAny 전자연구노트(ELN) — 랜딩 페이지

마크애니의 차세대 전자연구노트(ELN) 신사업 상품 Lab YouMind를 소개하는 완전 반응형(Responsive) 정적 랜딩 페이지입니다.

프로젝트 목표

• 디지털트윈 × 멀티-LLM 기반 전자연구노트의 핵심 가치를 명료하게 전달
• Apple-esque / IBM Carbon 미니멀 디자인 + 완전 반응형 (480 / 768 / 960 / 1200px 브레이크포인트)
• 상담 FAB·모달·폼 → hosungss@gmail.com으로 이메일 포워딩

완료된 기능

레이아웃 & 반응형

• 유틸리티 바 (데스크탑에서만 표시)
• 스티키 헤더 (스크롤 그림자 / 활성 섹션 하이라이트)
• 모바일 햄버거 드로어 (터치 UX 최적화)
• 모든 섹션 완전 반응형 (1열 → 다열 그리드)
• 스크롤 리빌 애니메이션 (IntersectionObserver)

콘텐츠 섹션

ID	섹션
#top	히어로 (그라디언트 타이틀 + 4지표 그리드)
concept-band	6개 핵심 컨셉 칩
#product	데스크탑/모바일 목업 카드 + 실제 데모 링크
#capabilities	코어 기능 4종 그리드
#modules	AI 모듈 5단계 리스트
#mesh	멀티-LLM 다크 섹션 (9종 LLM)
#marketplace	확장 모듈 마켓플레이스
#pricing	구독 플랜 3종 + 월간/연간 토글 + 경쟁사 비교
#team	연구팀 5인
#contact	CTA 밴드

상담 기능 (도입 상담 → hosungss@gmail.com)

• 플로팅 버튼(FAB): 히어로 스크롤 후 자동 등장, 항상 우하단 고정
• 상담 버튼 6곳: 헤더, 히어로, 모바일 드로어, 각 플랜 카드, CTA 밴드, 푸터
• 모달 다이얼로그: 접근성 준수 (role="dialog", aria-modal, ESC 키 닫기, 오버레이 클릭 닫기)
• 인라인 폼: 성함*, 기관, 이메일*, 연락처, 관심 플랜 선택, 문의 내용* (실시간 유효성 검사)
• 이메일 포워딩: mailto:hosungss@gmail.com 으로 제목·본문 자동 구성 후 시스템 이메일 클라이언트 오픈
• 성공 화면: 전송 후 확인 화면 표시

외부 링크

• 데모 보기 → https://hosungss.github.io/ELN-Beta-/
• 데스크탑 버전 → https://hosungss.github.io/ELN-Beta-/LabYouMind_desktop.html
• 모바일 버전 → https://hosungss.github.io/ELN-Beta-/LabYouMind_mobile.html

파일 구조

lab-youmind-landing/
├── index.html          메인 랜딩 (단일 페이지, 10개 섹션)
├── css/
│   └── style.css       전체 스타일 (IBM Carbon 토큰 · 4 브레이크포인트 · 모달)
├── js/
│   └── main.js         인터랙션 전체 (모달 · 폼 · 스크롤 · 프라이싱 토글)
├── download.html       ZIP 다운로드 페이지 (JSZip + FileSaver.js, 5개 파일 번들)
├── BUILD_LOG.md        빌드 로그 — 버전 히스토리 · 기술 명세 · 디자인 토큰
└── README.md           본 파일

기술 스택

• HTML5 / CSS3 / Vanilla JavaScript (빌드 도구 없음)
• 폰트: Pretendard, Inter, IBM Plex Mono (CDN)
• 의존 백엔드 없음 — 순수 정적 사이트

구독 플랜

플랜	월간	연간 (20%↓)	대상
Starter	₩59,000/월	₩47,000/월	최대 3인
Pro ⭐	₩189,000/월	₩151,000/월	최대 10인
Enterprise	별도 협의	—	무제한

추천 다음 단계

1. 실제 폼 백엔드 연동 (Formspree / EmailJS 등) — 현재는 mailto 방식
2. KR/EN 다국어 전환 구현 (data-i18n 방식)
3. 섹션별 애니메이션 추가 고도화
4. ELN 데모 화면 실제 스크린샷 이미지로 목업 교체

페이지 목록

경로	설명
index.html	메인 랜딩 페이지
download.html	ZIP 다운로드 페이지 (JSZip + FileSaver.js)

배포

상단 Publish 탭에서 원클릭 배포 가능합니다.