File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="content" style="background-color: #f8f8f8;">
<div :class="{ 'top-banner banner': true, [bannerId]: true }" v-if="this.$route.path.startsWith('/aidt')">
<div class="flex-column align-center justify-center content">
<h1 class="banner-title text-ct white" aria-live="assertive">{{ $getMenuInfo().menuNm }}</h1>
<p class="box-title text-ct white">{{ $getMenuInfo().menuCn }}</p>
</div>
</div>
<PageNavigationBar v-if="this.$route.path.startsWith('/aidt')" />
<div class="pt100 pb100 guideline-page">
<div class="w1280">
<div class="pt50 pb50">
<h2 class="page-title text-ct mb30">AI 디지털교과서 개발 가이드라인 안내</h2>
<p class="box-title text-ct mb30">
본 가이드라인은 AI 디지털교과서 개발을 위한 정책가이드를 제시하여<br />
학습자 중심의 맞춤형 학습 체제로의 교육 환경 전환과 양질의 AI 디지털교과서 제작을 지원합니다. <br />
AI 디지털교과서 통합지원센터는 본 가이드라인을 바탕으로 후속적인 기술문서, 컨설팅 등을 지원합니다.
</p>
<div class="guide-line-list flex justify-center align-center">
<div class="gd-4 mb10">
<div class=" border radius flex justify-between align-center pd10"
style="background-color: var(--white);">
<h3 class="pd10 default-text">AIDT 개발 가이드(KOR)</h3>
<div class="flex align-center">
<button class="icon-btn detail-text" aria-label="pdfPreviewButton" id="pdfPreviewButton" title="미리보기"
@click="$openPdfViewrWindwow('FILE_0000000003', pageAuth)"> <svg-icon type="mdi"
:path="pdfPath" role="img"
aria-labelledby="pdfPreviewButton"></svg-icon></button>
<button class="icon-btn detail-text" aria-label="downloadButton" title="다운로드" id="downloadButton"
@click="$downloadFileById('FILE_0000000003', 'CMMN_FILE_0000000003', 'AI 디지털교과서 개발 가이드라인_KOR.pdf', 'BBS_0000000031', pageAuth)">
<svg-icon type="mdi" :path="downloadPath" role="img"
aria-labelledby="downloadButton"></svg-icon></button>
</div>
</div>
</div>
<div class="gd-4 mb10">
<div class="border radius flex justify-between align-center pd10"
style="background-color: var(--white);">
<h3 class="pd10 default-text">AIDT 개발 가이드(ENG)</h3>
<div class="flex align-center">
<button class="icon-btn detail-text" title="미리보기" aria-label="pdfPreviewButton" id="pdfPreviewButton"
@click="$openPdfViewrWindwow('FILE_0000000004', pageAuth)"> <svg-icon type="mdi"
:path="pdfPath" role="img"
aria-labelledby="pdfPreviewButton"></svg-icon></button>
<button class="icon-btn detail-text" aria-label="downloadButton" title="다운로드" id="downloadButton"
@click="$downloadFileById('FILE_0000000004', 'CMMN_FILE_0000000004', 'AI 디지털교과서 개발 가이드라인_ENG.pdf', 'BBS_0000000032', pageAuth)">
<svg-icon type="mdi" :path="downloadPath" role="img"
aria-labelledby="downloadButton"></svg-icon></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pt50 pb50 full-section">
<h2 class="page-title text-ct mb15">가이드라인의 내용</h2>
<div class="w1280">
<div class="guide-navigation flex justify-end align-center mb30">
<div class="swiper-button-prev guide-prev cursor mr10" aria-label="slide prev button"></div>
<div class="swiper-button-next guide-next cursor mr10" aria-label="slide next button"></div>
<button @click="toggleAutoplay" aria-label="slideStopButtonn" id="slideStopButton"><svg-icon type="mdi"
:path="playPath" role="img" aria-labelledby="slideStopButton"></svg-icon></button>
</div>
</div>
<div class="swiper guideLineSwiper" ref="guideLineSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="relative">
<div class="guideline-item pd30 radius guide1">
<h3 class="box-bold-title mb30">01. AI 디지털교과서란</h3>
<p>AI 디지털교과서의 정의와 특성, 개발 원칙 등 주요 정책 안내</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="relative">
<div class="pd30 radius guide2 guideline-item">
<h3 class="box-bold-title mb30">02. AI 디지털교과서 서비스 구성</h3>
<p>서비스의 구성과 공공과 민간의 역할 안내</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="relative">
<div class="pd30 radius guide3 guideline-item">
<h3 class="box-bold-title mb30">03. AI 디지털교과서 개발 절차</h3>
<p>전반적인 개발 절차별 안내</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="relative">
<div class="pd30 radius guide4 guideline-item">
<h3 class="box-bold-title mb30">04. 인프라</h3>
<p>클라우드(SaaS) 기반의 웹 서비스 구성 방안과 클라우드 보안 사항 안내</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="relative">
<div class="pd30 radius guide5 guideline-item">
<h3 class="box-bold-title mb30">05. 공통 기능 연계</h3>
<p>통합인증, 교육과정 표준체계 연계, 서비스 시작 화면 구성 등 공통기능 안내</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="relative">
<div class="pd30 radius guide6 guideline-item">
<h3 class="box-bold-title mb30">06. AI 기반 맞춤형 학습 지원</h3>
<p>AI 기반 맞춤형 학습 지원을 위해 필요한 개발 요소(기능) 안내</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="relative">
<div class="pd30 radius guide7 guideline-item">
<h3 class="box-bold-title mb30">07. 학습데이터 수집·관리·전송</h3>
<p>AI 디지털교과서 학습데이터 수집·관리·전송 안내</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="relative">
<div class="pd30 radius guide8 guideline-item">
<h3 class="box-bold-title mb30">08. UDL 및 접근성</h3>
<p>서비스 접근성, UDL(보편적 학습설계) 보장을 위한 지침 안내</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="relative">
<div class="pd30 radius guide9 guideline-item">
<h3 class="box-bold-title mb30">09. 기타 준수 사항</h3>
<p>학습데이터의 목적 외 사용 금지, AI 리스크 관리, 저작권 확보 지침 안내</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="relative">
<div class="pd30 radius guide10 guideline-item">
<h3 class="box-bold-title mb30">10. 검정심사 절차 및 기준</h3>
<p>AI 디지털교과서 검정 절차 안내(기술심사 영역)</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="relative">
<div class="pd30 radius guide11 guideline-item">
<h3 class="box-bold-title mb30">11. AI 디지털교과서 품질관리</h3>
<p>품질관리체계와 사용자 지원, 보안 및 개인정보 보호 사항 안내</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import PageNavigationBar from '../../../../component/pagenavigationbar/PageNavigationBar.vue';
import { mdiPlay, mdiPause, mdiFileDownloadOutline, mdiFileSearchOutline } from '@mdi/js';
import Swiper from 'swiper/bundle';
export default {
data() {
return {
pageAuth: this.$store.state.pageAuth,
downloadPath: mdiFileDownloadOutline,
pdfPath: mdiFileSearchOutline,
bannerId: 'guide-banner',
path: this.$store.state.path,
isPlaying: true,
playPath: mdiPause,
guideSwiperInstance: null,
}
},
methods: {
// 가이드라인슬라이드 초기화
guideSlideInit() {
this.guideSwiperInstance = new Swiper('.guideLineSwiper', {
loop: true,
navigation: {
nextEl: '.guide-next', prevEl: '.guide-prev'
},
keyboard: true,
slidesPerView: 1,
spaceBetween: 0,
breakpoints: {
500: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 3,
spaceBetween: 20,
},
1280: {
slidesPerView: 4.5,
spaceBetween: 20,
},
},
autoplay: {
delay: 2500,
disableOnInteraction: false
},
centeredSlides: true
});
},
toggleAutoplay: function () {
if (this.isPlaying) {
this.$refs.guideLineSwiper.swiper.autoplay.stop();
this.playPath = mdiPlay
} else {
this.$refs.guideLineSwiper.swiper.autoplay.start();
this.playPath = mdiPause
}
this.isPlaying = !this.isPlaying
},
},
watch: {
},
computed: {
},
components: {
'PageNavigationBar': PageNavigationBar,
},
created() {
},
mounted() {
this.guideSlideInit();
},
unmounted() {
// 컴포넌트가 파괴될 때 Swiper 인스턴스도 파괴
if (this.guideSwiperInstance) {
this.guideSwiperInstance.destroy();
this.guideSwiperInstance = null;
}
},
}
</script>