# AIROUM 랜딩 페이지 디자인 설계 문서 ## 1. 개요 ### 1.1. 프로젝트 목표 AI 교육 전문 기업 '에이로움'의 전문성과 가치를 효과적으로 전달하고, 잠재 고객(학생, 학부모, 교사, 기업)의 교육 프로그램 문의 및 신청을 유도하는 것을 목표로 합니다. ### 1.2. 타겟 사용자 - AI 교육에 관심 있는 초·중·고등학생 및 학부모 - AI를 수업에 활용하고자 하는 교사 및 교육 공무원 - 업무 효율성을 높이고 싶은 기업 및 일반 직장인 - AI 교육 전문가로 활동하고 싶은 강사 및 교육 기획자 --- ## 2. 레이아웃 디자인 (Wireframe) 사용자 동선을 고려하여 핵심 정보를 순차적으로 배치하고, 최종적으로 문의 양식으로 이어지도록 설계했습니다. ``` ┌────────────────────────────────────────────────────────────────────────────────────────┐ │ [AIROUM 로고] [회사소개] [교육 프로그램] [교육 실적] [문의 및 신청 📝] │ ├────────────────────────────────────────────────────────────────────────────────────────┤ │ │ │ (배경 이미지 위에 아래 텍스트가 표시됩니다) │ │ │ │ "에이로움은 'AI(인공지능)'와 '새로움'의 가치를 융합하여 탄생한 AI 교육 전문 기업입니다. │ │ 초중등 생성형 AI 활용 교육, AI 시대 진로 교육... 미래를 준비하는 든든한 동반자가 되겠습니다." │ │ │ └────────────────────────────────────────────────────────────────────────────────────────┘ ┌───────────────────────────────────( 회사 소개 )───────────────────────────────────────┐ │ │ │ ┌──────────────────────────────────┬──────────────────────────────────┐ │ │ │ 1. 누구나 바로 적용할 수 있는 교육 │ 2. 어디에서나 열려 있는 교육 │ │ │ │ 실천 중심 맞춤형 교육 설계 │ 지역 거점 센터로 기회 확대 │ │ │ ├──────────────────────────────────┼──────────────────────────────────┤ │ │ │ 3. 미래를 연결하는 교육 │ 4. 검증된 커리큘럼과 강사 │ │ │ │ 융합적 사고 기반 교육 제공 │ 전문가 중심의 콘텐츠 제공 │ │ │ └──────────────────────────────────┴──────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────────────────┘ ┌───────────────────────────────────( 우리만의 차별점 )───────────────────────────────────┐ │ │ │ 01. 실천 중심 교육 ───────────> 바로 적용 가능한 맞춤형 교육 설계 │ │ │ │ 02. 열린 교육 기회 ───────────> 지역 거점 센터를 통한 교육 기회 확대 │ │ │ │ 03. 미래 연결 교육 ───────────> 진로·교과·현장을 연결하는 융합 사고 교육 │ │ │ │ 04. 검증된 커리큘럼 ──────────> 현장 경험과 성과로 증명된 전문가 콘텐츠 │ │ │ └────────────────────────────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────( 교육 프로그램 )─────────────────────────────────────┐ │ │ │ < ┌───────────────────┐ ┌───────────────────┐ ┌───────────────────┐ > │ │ │ [ 이미지 ] │ │ [ 이미지 ] │ │ [ 이미지 ] │ │ │ │ ────────── │ │ ────────── │ │ ────────── │ │ │ │ [대상] 학생 │ │ [대상] 학생 │ │ [대상] 모두 │ │ │ │ AI 진로·직업 │ │ AI 교과 연계 │ │ AI 윤리 교육 │ │ │ │ 진로 설계 수업... │ │ 교과 융합 수업... │ │ 디지털 시민의식...│ │ │ └───────────────────┘ └───────────────────┘ └───────────────────┘ │ │ │ └──────────────────────────────────────────────────────────────────────────────────────────┘ ┌────────────────────────────────( 무료 상담 및 교육 문의 )────────────────────────────────┐ │ │ │ "AI 시대, 더 이상 망설일 이유가 없습니다." │ │ │ │ ┌──────────────────────────────────────────────────────────────────────────────────┐ │ │ │ 이름: [_________________] 전화번호: [_________________] │ │ │ │ 이메일: [_________________________________________] │ │ │ │ 문의 내용: [__________________________________________________________________] │ │ │ │ [ 문의하기 > ] │ │ │ └──────────────────────────────────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────────────────┘ ┌────────────────────────────────────────────────────────────────────────────────────────┐ │ [AIROUM] │ │ (주)에이로움 | 대표: ... | 사업자등록번호: ... │ │ 주소: ... [Naver Blog ↗] [Instagram ↗] │ └────────────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## 3. 테마 디자인 (Visual Theme) 전문성과 혁신성을 시각적으로 표현하기 위해 `.superdesign/design_system/design-system.json` 파일과 브랜드 색상 제안을 조합하여 디자인 시스템을 정의합니다. ### 3.1. 색상 (Colors) - **Primary Color**: `#0A2A5B` (Deep Blue) - 신뢰성, 전문성 - **Accent Color**: `#00D1FF` (Cyber Blue) - 혁신, 기술, CTA 버튼 - **Background Color**: `#FFFFFF` (White) - 깔끔함, 현대성 - **Text Color**: `#1F2937` (Neutral Black) - 가독성 ### 3.2. 타이포그래피 (Typography) - **기본 폰트**: `Pretendard` - 높은 가독성과 현대적인 느낌 - **헤드라인 (h1, h2)**: `font-weight: 700` (Bold) - **본문 (body)**: `font-weight: 400` (Regular), `line-height: 1.6` --- ## 4. 애니메이션 디자인 (Animation) 사용자 경험을 향상시키고 동적인 느낌을 주기 위해 다음과 같은 애니메이션을 적용합니다. ### 4.1. 핵심 애니메이션 시스템 - **페이지 로드**: 각 섹션이 아래에서 위로 부드럽게 나타나는 `Fade In Up` 효과 (Duration: 800ms) - **스크롤 인터랙션**: 스크롤 시 콘텐츠 요소들이 시차를 두고 나타나는 `Scroll Reveal` 효과 - **호버(Hover) 효과**: 버튼, 카드 등 인터랙티브 요소에 마우스를 올렸을 때 시각적 피드백 제공 (Transition: 0.3s ease) - **네비게이션**: 스크롤 시 상단에 고정되는 `Sticky Navigation` - **입력 폼**: 입력 필드 포커스 시 테두리 하이라이트 효과 ### 4.2. 애니메이션 마이크로-구문 ``` // Page Load & Scroll sectionLoad: 800ms ease-out [Y+50→0, α0→1] stagger+150ms navSticky: 300ms ease [bg: transparent→dark, shadow+] // Hover Effects btnHover: 300ms ease [S1→1.05, bg→primary-dark] cardHover: 300ms ease [Y0→-8px, shadow-lg] // Form Interactions inputFocus: 200ms ease [border→accent, ring+] submitBtn: 200ms ease [S1→0.98] press // Micro-interactions iconHover: 200ms ease [R±10°] linkUnderline: 300ms ease [width: 0%→100%] // Card Carousel cardScroll: 500ms ease-in-out [X-320→0] cardNavClick: 200ms ease [S1→0.95→1] --- ## 5. 교육 프로그램 상세 내용 사용자가 카드 캐러셀을 통해 흥미를 느낀 후, 전체 프로그램을 쉽게 비교하고 탐색할 수 있도록 상세 내용을 표 형태로 제공합니다. | 프로그램명 | 대상 | 설명 (한 줄 소개) | | :--- | :--- | :--- | | ✔ **AI 진로·직업 프로젝트 수업** | 학생 | 생성형 AI를 활용해 흥미와 강점을 탐색하고 진로를 설계하는 수업 | | ✔ **AI 교과 연계 프로젝트 수업** | 학생 | 국어·사회·과학 등 교과 주제와 생성형 AI를 융합한 프로젝트 수업 | | ✔ **AI 윤리 교육** | 학생, 교사, 일반인 | 모든 연령 대상, AI 시대에 필요한 디지털 윤리와 책임감 교육 | | ✔ **생성형 AI 실무 활용 교육** | 교사, 일반인, 기업 | 텍스트·이미지·영상 등 생성형 AI 도구 실습 중심 교육 | | ✔ **교사·공무원 연수 프로그램** | 교사, 공무원 | 현장 적용 중심의 워크숍형 AI 연수 프로그램 | | ✔ **AI 금융 활용 교육** | 학생, 일반인 | 생성형 AI를 활용해 금융 정보 탐색·자산관리 실습 교육 | | ✔ **생성형 AI 강사 양성 과정** | 강사, 교육기획자 | 생성형 AI 교육 전문성 강화를 위한 강사 양성 과정 |