[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68b1b03fc3a48191a6fcc435f5ca21e8","versionInt","title","중장년층 Ai 학습 — 원페이지 웹사이트 (react + Tailwind)","type","code/react","content","import React from \"react\";\nimport { motion } from \"framer-motion\";\nimport {\n Brain,\n Briefcase,\n Bot,\n HeartPulse,\n Rocket,\n ShieldCheck,\n Building2,\n BookOpenCheck,\n MessageSquare,\n TrendingUp,\n Sparkles,\n GraduationCap,\n Smartphone,\n Home,\n Handshake,\n} from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n Accordion,\n AccordionItem,\n AccordionTrigger,\n AccordionContent,\n} from \"@/components/ui/accordion\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { Separator } from \"@/components/ui/separator\";\n\n// ---- Helpers ----\nconst fadeUp = (i = 0) => ({\n initial: { opacity: 0, y: 24 },\n animate: { opacity: 1, y: 0, transition: { delay: i * 0.06, duration: 0.5 } },\n});\n\nconst Section = ({ id, children, className = \"\" }) => (\n

{children}

\n);\n\n// ---- Data ----\nconst NAV = [\n { id: \"home\", label: \"홈\" },\n { id: \"why\", label: \"왜 배워야 할까\" },\n { id: \"career\", label: \"경력·재취업\" },\n { id: \"life\", label: \"일상 편의\" },\n { id: \"inclusion\", label: \"디지털 소외 방지\" },\n { id: \"biz\", label: \"창업·비즈니스\" },\n { id: \"programs\", label: \"학습 로드맵\" },\n { id: \"faq\", label: \"FAQ\" },\n { id: \"contact\", label: \"문의\" },\n];\n\nconst WHY_POINTS = [\n {\n icon: , title: \"커리어 안전망\",\n body: \"AI 도구를 이해하고 활용하면 업무자동화·데이터 기반 의사결정 등으로 경쟁력을 유지할 수 있습니다.\",\n },\n {\n icon: , title: \"일상의 디지털 도우미\",\n body: \"음성비서·챗봇·스마트폰 기능으로 검색, 예약, 정리 등 반복 작업을 쉽게 처리합니다.\",\n },\n {\n icon: , title: \"소외 예방\",\n body: \"키오스크·모바일 금융 등 디지털 전환 속에서 스스로 필요한 서비스를 이용할 수 있게 됩니다.\",\n },\n {\n icon: , title: \"창업과 혁신\",\n body: \"경험과 네트워크에 AI를 더하면 소규모도 민첩하게 실험·확장할 수 있습니다.\",\n },\n];\n\nconst CAREER_ITEMS = [\n {\n icon: , title: \"업스킬·리스킬\",\n bullets: [\n \"엑셀+AI로 데이터 요약/자동화\",\n \"프롬프트 엔지니어링으로 보고서 초안\",\n \"파이썬 기초로 반복 업무 스크립팅\",\n ],\n },\n {\n icon: , title: \"직무 확장\",\n bullets: [\n \"업무 자동화 담당, 데이터 리더\",\n \"AI 품질 검토·거버넌스 역할\",\n \"도메인 전문가+AI 컨설팅\",\n ],\n },\n {\n icon: , title: \"경력 전환\",\n bullets: [\n \"데이터 분석·시각화\",\n \"챗봇 운영·지식베이스 구축\",\n \"AI 도입 PM/PO\",\n ],\n },\n];\n\nconst LIFE_ITEMS = [\n { icon: , title: \"스마트폰/챗봇\", body: \"음성으로 메시지·메모·알람·번역·요약\" },\n { icon: , title: \"건강관리\", body: \"웨어러블·헬스 앱의 AI 분석으로 생활습관 개선\" },\n { icon: , title: \"스마트홈\", body: \"조명·난방·안전 알림·응급 호출 연동\" },\n { icon: , title: \"디지털 금융\", body: \"모바일 자산관리·사기 탐지 알림 활용\" },\n];\n\nconst INCLUSION_STEPS = [\n { title: \"기초 다지기\", body: \"스마트폰·키오스크·보안 기본. 디지털배움터 등 무료 과정 활용.\" },\n { title: \"생활 적용\", body: \"모바일 뱅킹·정부24·교통/병원 예약 실습.\" },\n { title: \"AI 익히기\", body: \"챗GPT·생성형 AI, 프롬프트 작성, 개인정보 보호.\" },\n { title: \"커뮤니티\", body: \"스터디·멘토링·동행학습으로 학습 지속.\" },\n];\n\nconst BIZ_ITEMS = [\n { title: \"AI로 비용 절감\", body: \"재고·수요 예측, 자동 고객응대, 문서 자동화로 효율↑\" },\n { title: \"데이터로 의사결정\", body: \"소상공인도 매출 데이터 분석·타겟 마케팅\" },\n { title: \"니치 창업 기회\", body: \"도메인 지식+AI로 특화 서비스 (컨설팅, 교육, 콘텐츠)\" },\n];\n\nconst ROADMAP = [\n {\n stage: \"Starter\",\n badge: \"입문 2~4주\",\n items: [\"디지털 기초·보안\", \"생성형 AI 이해\", \"프롬프트 기본\"],\n },\n {\n stage: \"Worker\",\n badge: \"실무 4~6주\",\n items: [\"엑셀+AI 자동화\", \"문서 요약/분석\", \"워크플로우 설계\"],\n },\n {\n stage: \"Builder\",\n badge: \"도구 4~8주\",\n items: [\"노코드 챗봇\", \"데이터 시각화\", \"파이썬 기초\"],\n },\n {\n stage: \"Leader\",\n badge: \"전환 4주+\",\n items: [\"AI 도입 전략\", \"거버넌스·정책\", \"윤리·프라이버시\"],\n },\n];\n\nconst FAQ = [\n {\n q: \"프로그래밍을 몰라도 시작할 수 있나요?\",\n a: \"네. 챗봇·노코드 도구부터 시작하고, 필요하면 파이썬 등 기초를 순차적으로 확장하면 됩니다.\",\n },\n {\n q: \"어떤 과정을 먼저 듣죠?\",\n a: \"디지털 기초→생성형 AI 활용→업무 자동화 순서가 일반적입니다. 상황에 따라 로드맵 섹션을 참고하세요.\",\n },\n {\n q: \"얼마나 공부해야 효과가 있나요?\",\n a: \"2~4주만 꾸준히 실습해도 문서 요약·보고서 초안·반복작업 자동화 등 체감 효과가 납니다.\",\n },\n {\n q: \"비용이 부담돼요.\",\n a: \"지자체 디지털배움터, 내일배움카드, 중장년 기술창업센터 등 공공·민간 지원 과정을 우선 활용해 보세요.\",\n },\n {\n q: \"정말 커리어에 도움이 되나요?\",\n a: \"도메인 경험에 AI를 더하면 차별화됩니다. 자동화·데이터 기반 의사결정·품질검토 등 역할이 열립니다.\",\n },\n];\n\nexport default function MidlifeAIPage() {\n const onNav = (id) => {\n const el = document.getElementById(id);\n if (el) el.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n };\n\n return (\n

\n {/* Header */}\n

\n \n

\n 중장년 AI 배우기\n 함께 성장\n

\n \n

\n\n {/* Hero */}\n

\n \n \n 인생 2막을 위한 AI 길잡이\n \n

\n 중장년층이 AI를 배워야 하는 네 가지 이유\n

\n 커리어, 일상, 포용, 창업. 경험에 기술을 더해 더 멀리 가는 방법을 소개합니다.\n

\n \n \n

\n {WHY_POINTS.map((p, i) => (\n \n \n \n {p.icon}\n {p.title}\n \n \n \n {p.body}\n \n \n ))}\n

\n \n

\n\n {/* Why */}\n

\n 왜 지금, 왜 AI인가?\n

\n 기술은 빠르게 바뀌지만, 경력과 삶의 지혜는 쉽게 대체되지 않습니다. 핵심은 경험 × AI의 결합입니다.\n

\n {WHY_POINTS.map((p, i) => (\n \n \n \n \n {p.icon}\n {p.title}\n \n \n {p.body}\n \n \n ))}\n

\n\n {/* Career */}\n

\n \n 새로운 직업 기회와 경력 전환\n \n

\n 업무 자동화·데이터 활용·품질 검토 등에서 중장년의 도메인 경험이 강점이 됩니다.\n

\n {CAREER_ITEMS.map((c, i) => (\n \n \n \n {c.icon}{c.title}\n \n \n

\n \n \n \n ))}\n

\n\n {/* Life */}\n

\n \n 일상생활의 편의성 향상\n \n

\n {LIFE_ITEMS.map((l, i) => (\n \n \n {l.icon}{l.title}\n {l.body}\n \n \n ))}\n

\n \n 작은 습관부터 시작하세요: 예약·요약·번역을 AI에게 맡겨보는 것만으로도 체감 효과가 큽니다.\n

\n\n {/* Inclusion */}\n

\n \n 디지털 소외 방지와 사회 통합\n \n

\n {INCLUSION_STEPS.map((s, i) => (\n \n \n {s.title}\n {s.body}\n \n \n ))}\n

\n 가까운 주민센터·도서관의 디지털배움터, 지자체 무료 강좌부터 이용해 보세요.\n

\n\n {/* Business */}\n

\n \n 창업 및 비즈니스 활용\n \n

\n {BIZ_ITEMS.map((b, i) => (\n \n \n {b.title}\n {b.body}\n \n \n ))}\n

\n 소규모라도 시작할 수 있습니다: 챗봇 고객응대, 자동 견적, 콘텐츠 제작 등부터.\n

\n\n {/* Programs / Roadmap */}\n

\n \n 학습 로드맵 & 추천 트랙\n \n

\n 목적과 시간에 맞춰 단기·실무·심화로 구성했습니다. 공공 지원 과정도 함께 탐색하세요.\n

\n {ROADMAP.map((r, i) => (\n \n \n \n

\n {r.stage}\n {r.badge}\n

\n \n \n

{it}

\n \n \n \n ))}\n

\n\n \n\n

\n \n 공공·지자체\n \n

· 디지털배움터(주민센터·도서관)

· 내일배움카드(고용노동부)

· 중장년 기술창업센터(중기부)

\n \n \n \n 기업·민간\n \n

· 직무 맞춤 AI 실습형 사내교육

· 노코드 자동화·데이터 시각화 워크숍

· 멘토링·커뮤니티 스터디

\n \n \n \n 자가 학습\n \n

· 챗봇으로 매일 10분 실습

· 업무 문서·데이터로 실제 과제 수행

· 개인 포트폴리오(자동화 예시·대시보드) 구축

\n \n \n

\n\n {/* FAQ */}\n

\n \n 자주 묻는 질문\n \n \n {FAQ.map((f, i) => (\n \n {f.q}\n {f.a}\n \n ))}\n \n

\n\n {/* Contact */}\n

\n \n 간단 문의\n \n

\n 관심 분야와 현재 상황을 적어 주시면 가장 알맞은 학습 경로를 추천해 드립니다.\n

\n \n \n

\n \n

\n            <div className=\"flex items-center gap-3\">\n              <Button type=\"button\">제출하기</Button>\n              <Button type=\"button\" variant=\"outline\" onClick={() => window.scrollTo({ top: 0, behavior: \"smooth\" })}>맨 위로</Button>\n            </div>\n          </form>\n        </div>\n      </Section>\n\n      {/* Footer */}\n      <footer className=\"border-t border-slate-200/70 dark:border-slate-800\">\n        <div className=\"mx-auto max-w-6xl px-4 py-10 text-sm text-slate-500 dark:text-slate-400 grid md:grid-cols-3 gap-6\">\n          <div>\n            <div className=\"flex items-center gap-2 font-semibold text-slate-700 dark:text-slate-200\">\n              <Brain className=\"h-4 w-4 text-sky-600\" /> 중장년 AI 배우기\n            </div>\n            <p className=\"mt-2\">경험에 기술을 더해 더 큰 가치를 만드는 여정, 지금 시작하세요.</p>\n          </div>\n          <div>\n            <div className=\"font-semibold text-slate-700 dark:text-slate-200\">바로가기</div>\n            <div className=\"mt-2 flex flex-col gap-1\">\n              {NAV.slice(1, -1).map((n) => (\n                <button key={n.id} onClick={() => onNav(n.id)} className=\"text-left hover:text-sky-600 dark:hover:text-sky-300\">\n                  {n.label}\n                </button>\n              ))}\n            </div>\n          </div>\n          <div>\n            <div className=\"font-semibold text-slate-700 dark:text-slate-200\">문의</div>\n            <p className=\"mt-2\">이 페이지의 내용은 교육·안내 목적입니다. 지역별 지원 프로그램은 지자체 공지를 확인하세요.</p>\n          </div>\n        </div>\n        <div className=\"py-4 text-center text-xs text-slate-400\">© {new Date().getFullYear()} Midlife × AI. All rights reserved.</div>\n      </footer>\n    </div>\n  );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","9419201577758743444","traceTime",1776470573340]
</article></body></html>