544 lines
24 KiB
Vue
544 lines
24 KiB
Vue
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
<template>
|
|
<div class="mx-auto max-w-3xl text-base leading-7 text-gray-700 px-4">
|
|
<h1 class="mt-10 text-3xl font-bold tracking-tight text-gray-900">
|
|
KISO 이용자 보호 시스템 API 서비스
|
|
</h1>
|
|
<p class="mt-2 text-lg leading-8 text-gray-600">
|
|
KSS(KISO Safeguard System) API Service
|
|
</p>
|
|
|
|
<div class="mt-10 max-w-2xl">
|
|
<h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">
|
|
KSS 소개
|
|
</h2>
|
|
<p class="mt-6">
|
|
KISO 이용자보호시스템(KSS, KISO Safeguard System) API는 국내
|
|
대표 포털 네이버와 카카오로부터 제공받은 욕설·비속어 DB를 활용해
|
|
개발되었습니다.
|
|
</p>
|
|
<p class="mt-6">
|
|
해당 API는 약 80만 건의 욕설·비속어 DB를 활용해 입력된 표현 중
|
|
사전에 포함된 단어가 있는지 검사하고 그 결과를 필터링해 주는
|
|
서비스를 제공합니다.
|
|
</p>
|
|
<p class="mt-6">
|
|
본 서비스의 목적은 다양한 인터넷 서비스에서 사업자가 별도의
|
|
욕설·비속어 DB구축 및 유지 보수의 부담이 없이 욕설·비속어 표현에
|
|
대한 서비스 관리 및 운영에 도움을 드리는 것입니다.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-10 max-w-2xl">
|
|
<h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">
|
|
주요 특징
|
|
</h2>
|
|
|
|
<ul role="list" class="mt-8 max-w-xl space-y-8 text-gray-600">
|
|
<li class="flex gap-x-3">
|
|
<CheckCircleIcon
|
|
class="mt-1 h-5 w-5 flex-none text-indigo-600"
|
|
aria-hidden="true"
|
|
/>
|
|
<span
|
|
><strong class="font-semibold text-gray-900"
|
|
>표준화된 필터 데이터베이스</strong
|
|
>
|
|
<p>
|
|
KSS에서 사용하는 필터 단어 데이터베이스는 네이버와
|
|
카카오와 같은 국내 대형 포털로부터 제공받은 기반
|
|
데이터를 정제하여 표준화 된 것입니다. 대부분의
|
|
인터넷 커뮤니티 서비스에서 바로 사용하기에 적합
|
|
합니다.
|
|
</p>
|
|
</span>
|
|
</li>
|
|
<li class="flex gap-x-3">
|
|
<CheckCircleIcon
|
|
class="mt-1 h-5 w-5 flex-none text-indigo-600"
|
|
aria-hidden="true"
|
|
/>
|
|
<span
|
|
><strong class="font-semibold text-gray-900"
|
|
>빠른 검색 속도</strong
|
|
>
|
|
<p>
|
|
현재 검색 대상 단어 데이터베이스에는 80만개의 단어가
|
|
등록되어 있으며 이는 시간이 흐름에 따라 계속
|
|
늘어나게 됩니다. 하지만 고객사의 API 호출시 필터
|
|
단어를 검색하는 시간은 데이터베이스 크기와 무관하게
|
|
검사 대상인 텍스트의 사이즈만큼만 시간을 소모하도록
|
|
만들어져 있어서 대부분의 인터넷 서비스에 사용 적합
|
|
합니다.
|
|
</p>
|
|
</span>
|
|
</li>
|
|
|
|
<li class="flex gap-x-3">
|
|
<CheckCircleIcon
|
|
class="mt-1 h-5 w-5 flex-none text-indigo-600"
|
|
aria-hidden="true"
|
|
/>
|
|
<span
|
|
><strong class="font-semibold text-gray-900"
|
|
>안정적인 인프라</strong
|
|
>
|
|
<p>
|
|
KSS는 우수한 성능과 안정성을 보유한 AWS 클라우드를
|
|
사용하여 안정적인 서비스를 제공합니다. 서비스
|
|
사용량이 많아서 충분한 처리 속도를 확보하기를 원하는
|
|
회원사를 위한 부하 격리 기능도 준비되어 있습니다.
|
|
</p>
|
|
</span>
|
|
</li>
|
|
<li class="flex gap-x-3">
|
|
<CheckCircleIcon
|
|
class="mt-1 h-5 w-5 flex-none text-indigo-600"
|
|
aria-hidden="true"
|
|
/>
|
|
<span
|
|
><strong class="font-semibold text-gray-900"
|
|
>지속적인 업데이트</strong
|
|
>
|
|
<p>
|
|
KSS는 포털 회원사의 지속적인 DB 제공으로 인터넷상
|
|
빠르게 전파되는 욕설·비속어에 대응할 수 있습니다.
|
|
DB를 직접 제공하지 않고 응용프로그램 인터페이스(API)
|
|
방식으로 서비스하는 것은 업데이트를 하기
|
|
위해서입니다.
|
|
</p>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="mt-10 max-w-2xl">
|
|
<h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">
|
|
필터 DB 생성 절차
|
|
</h2>
|
|
|
|
<div class="mt-6 lg:border-b lg:border-t lg:border-gray-200">
|
|
<nav class="mx-auto max-w-7xl px-2" aria-label="Progress">
|
|
<ol
|
|
role="list"
|
|
class="overflow-hidden rounded-md lg:flex lg:rounded-none lg:border-l lg:border-r lg:border-gray-200"
|
|
>
|
|
<li
|
|
v-for="(step, stepIdx) in steps_db"
|
|
:key="step.id"
|
|
class="relative overflow-hidden lg:flex-1"
|
|
>
|
|
<div
|
|
:class="[
|
|
stepIdx === 0
|
|
? 'rounded-t-md border-b-0'
|
|
: '',
|
|
stepIdx === steps.length - 1
|
|
? 'rounded-b-md border-t-0'
|
|
: '',
|
|
'overflow-hidden border border-gray-200 lg:border-0',
|
|
]"
|
|
>
|
|
<a :href="step.href" aria-current="step">
|
|
<span
|
|
class="absolute left-0 top-0 h-full w-1 bg-indigo-600 lg:bottom-0 lg:top-auto lg:h-1 lg:w-full"
|
|
aria-hidden="true"
|
|
/>
|
|
<span
|
|
:class="[
|
|
stepIdx !== 0 ? '' : '',
|
|
'flex items-start px-5 py-5 text-sm font-medium',
|
|
]"
|
|
>
|
|
<span class="flex-shrink-0">
|
|
<span
|
|
class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-indigo-600"
|
|
>
|
|
<span class="text-indigo-600">{{
|
|
step.id
|
|
}}</span>
|
|
</span>
|
|
</span>
|
|
<span
|
|
class="lg:text-center ml-2 mt-0.5 flex min-w-0 flex-col"
|
|
>
|
|
<span
|
|
class="text-sm font-medium text-indigo-600"
|
|
>{{ step.name }}</span
|
|
>
|
|
<span
|
|
class="text-sm font-medium text-gray-500"
|
|
>{{ step.description }}</span
|
|
>
|
|
</span>
|
|
</span>
|
|
</a>
|
|
|
|
<template v-if="stepIdx !== 0">
|
|
<!-- Separator -->
|
|
<div
|
|
class="absolute inset-0 left-0 top-0 hidden w-3 lg:block"
|
|
aria-hidden="true"
|
|
>
|
|
<svg
|
|
class="h-full w-full text-gray-300"
|
|
viewBox="0 0 12 82"
|
|
fill="none"
|
|
preserveAspectRatio="none"
|
|
>
|
|
<path
|
|
d="M0.5 0V31L10.5 41L0.5 51V82"
|
|
stroke="currentcolor"
|
|
vector-effect="non-scaling-stroke"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
|
|
<div></div>
|
|
|
|
<p class="mt-6 text-sm">
|
|
위 과정을 일정 기간마다 주기적으로 수행하여 항상 최신의 표준화된
|
|
필터 DB를 서비스 합니다.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-10 max-w-2xl">
|
|
<h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">
|
|
서비스 비용
|
|
</h2>
|
|
<p class="mt-6">
|
|
KSS API 서비스는 회원사, 언론사, 공공기관에 무료로 이용
|
|
가능하도록 배포하고 있습니다. KSS 만을 이용하는 경우 서비스
|
|
이용료(월 6만원)가 발생 됩니다.
|
|
</p>
|
|
|
|
<div class="bg-white py-1 rounded-2xl">
|
|
<div class="mx-auto max-w-7xl px-2">
|
|
<div class="mx-auto max-w-2xl lg:max-w-none">
|
|
<dl
|
|
class="mt-1 mb-1 grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4"
|
|
>
|
|
<div
|
|
v-for="stat in stats"
|
|
:key="stat.id"
|
|
class="flex flex-col bg-gray-400/5 py-6"
|
|
>
|
|
<dt
|
|
class="text-2sm font-semibold leading-6 text-gray-600"
|
|
>
|
|
{{ stat.name }}
|
|
</dt>
|
|
<dd
|
|
class="order-first text-xl font-semibold tracking-tight text-gray-900"
|
|
>
|
|
{{ stat.value }}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mt-6 text-sm">
|
|
* 서비스 제공 내용과 요금은 향후 변동 가능하므로 공지 사항이나
|
|
이메일 공지를 반드시 확인해 주세요.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-10 max-w-2xl">
|
|
<h2
|
|
id="service-use-agreement"
|
|
class="mt-16 text-2xl font-bold tracking-tight text-gray-900"
|
|
>
|
|
서비스 이용 절차
|
|
</h2>
|
|
<nav class="mt-6 ml-6" aria-label="Progress">
|
|
<ol role="list" class="overflow-hidden">
|
|
<li
|
|
v-for="(step, stepIdx) in steps"
|
|
:key="step.name"
|
|
:class="[
|
|
stepIdx !== steps.length - 1 ? 'pb-10' : '',
|
|
'relative',
|
|
]"
|
|
>
|
|
<template v-if="step.status === 'complete'">
|
|
<div
|
|
v-if="stepIdx !== steps.length - 1"
|
|
class="absolute left-4 top-4 -ml-px mt-0.5 h-full w-0.5 bg-indigo-600"
|
|
aria-hidden="true"
|
|
/>
|
|
<a
|
|
:href="step.href"
|
|
class="group relative flex items-start"
|
|
>
|
|
<span class="flex h-9 items-center">
|
|
<span
|
|
class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 group-hover:bg-indigo-800"
|
|
>
|
|
<CheckIcon
|
|
class="h-5 w-5 text-white"
|
|
aria-hidden="true"
|
|
/>
|
|
</span>
|
|
</span>
|
|
<span class="ml-4 flex min-w-0 flex-col">
|
|
<span class="text-sm font-medium">{{
|
|
step.name
|
|
}}</span>
|
|
<span class="text-sm text-gray-500">{{
|
|
step.description
|
|
}}</span>
|
|
</span>
|
|
</a>
|
|
</template>
|
|
<template v-else-if="step.status === 'current'">
|
|
<div
|
|
v-if="stepIdx !== steps.length - 1"
|
|
class="absolute left-4 top-4 -ml-px mt-0.5 h-full w-0.5 bg-gray-300"
|
|
aria-hidden="true"
|
|
/>
|
|
<a
|
|
:href="step.href"
|
|
class="group relative flex items-start"
|
|
aria-current="step"
|
|
>
|
|
<span
|
|
class="flex h-9 items-center"
|
|
aria-hidden="true"
|
|
>
|
|
<span
|
|
class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 border-indigo-600 bg-white"
|
|
>
|
|
<span
|
|
class="h-2.5 w-2.5 rounded-full bg-indigo-600"
|
|
/>
|
|
</span>
|
|
</span>
|
|
<span class="ml-4 flex min-w-0 flex-col">
|
|
<span
|
|
class="text-sm font-medium text-indigo-600"
|
|
>{{ step.name }}</span
|
|
>
|
|
<span class="text-sm text-gray-500">{{
|
|
step.description
|
|
}}</span>
|
|
</span>
|
|
</a>
|
|
</template>
|
|
<template v-else>
|
|
<div
|
|
v-if="stepIdx !== steps.length - 1"
|
|
class="absolute left-4 top-4 -ml-px mt-0.5 h-full w-0.5 bg-gray-300"
|
|
aria-hidden="true"
|
|
/>
|
|
<a
|
|
:href="step.href"
|
|
class="group relative flex items-start"
|
|
>
|
|
<span
|
|
class="flex h-9 items-center"
|
|
aria-hidden="true"
|
|
>
|
|
<span
|
|
class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 border-gray-300 bg-white group-hover:border-gray-400"
|
|
>
|
|
<span
|
|
class="h-2.5 w-2.5 rounded-full bg-transparent group-hover:bg-gray-300"
|
|
/>
|
|
</span>
|
|
</span>
|
|
<span class="ml-4 flex min-w-0 flex-col">
|
|
<span
|
|
class="text-sm font-medium text-gray-500"
|
|
>{{ step.name }}</span
|
|
>
|
|
<span class="text-sm text-gray-500">{{
|
|
step.description
|
|
}}</span>
|
|
</span>
|
|
</a>
|
|
</template>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="mt-10 max-w-2xl">
|
|
<h2 class="mt-16 text-2xl font-bold tracking-tight text-gray-900">
|
|
사용문의
|
|
</h2>
|
|
<p class="mt-6">
|
|
API 사용에 필요한 자세한 기술 문서는
|
|
<a
|
|
class="font-semibold text-indigo-600 hover:text-indigo-500"
|
|
href="javascript:void()"
|
|
@click="navigateTo('/doc/api_doc')"
|
|
>API 연동 안내</a
|
|
>
|
|
에 수록되어 있습니다. 또한
|
|
<a
|
|
class="font-semibold text-indigo-600 hover:text-indigo-500"
|
|
href="javascript:void()"
|
|
@click="navigateTo('/doc/guide')"
|
|
>서비스 도입 안내</a
|
|
>,
|
|
|
|
<a
|
|
class="font-semibold text-indigo-600 hover:text-indigo-500"
|
|
href="javascript:void()"
|
|
@click="navigateTo('/support/faq')"
|
|
>FAQ
|
|
</a>
|
|
|
|
을 통해 KSS API 서비스 개념과 사용방법에 대해 살펴보시기
|
|
바랍니다.
|
|
</p>
|
|
|
|
<p class="mt-6">
|
|
API 연동 관련 문의는 이메일(netsafe@kiso.or.kr)로 보내주시기
|
|
바랍니다.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-10 max-w-2xl">
|
|
<h2
|
|
class="mt-16 text-2xl font-bold tracking-tight text-gray-900"
|
|
></h2>
|
|
<p class="mt-6"></p>
|
|
</div>
|
|
|
|
<div class="py-1">
|
|
<div class="mx-auto max-w-7xl px-6">
|
|
<div class="mx-auto max-w-2xl">
|
|
<div
|
|
class="mx-auto mt-2 mb-2 grid grid-cols-4 items-start gap-x-8 gap-y-10"
|
|
>
|
|
<img
|
|
class="col-span-2 max-h-12 w-full object-contain object-left"
|
|
src="https://dev.safekiso.com/kiso_ci_1.png"
|
|
alt="Transistor"
|
|
width="158"
|
|
height="48"
|
|
/>
|
|
<img
|
|
class="col-span-2 max-h-12 w-full object-contain object-left"
|
|
src="https://www.safekiso.com/logos/kss_certification_logo_box_english.png"
|
|
alt="Reform"
|
|
width="158"
|
|
height="48"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-10 max-w-2xl">
|
|
<h2
|
|
class="mt-16 text-2xl font-bold tracking-tight text-gray-900"
|
|
></h2>
|
|
<p class="mt-6"></p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {
|
|
CheckCircleIcon,
|
|
InformationCircleIcon,
|
|
} from '@heroicons/vue/20/solid';
|
|
|
|
import { CheckIcon } from '@heroicons/vue/20/solid';
|
|
|
|
const steps_db = [
|
|
{
|
|
id: '01',
|
|
name: '네이버, 카카오',
|
|
description: '욕설·비속어 DB 제공',
|
|
href: '#',
|
|
status: 'current',
|
|
},
|
|
{
|
|
id: '02',
|
|
name: 'KISO',
|
|
description: '표준화, DB 구축',
|
|
href: '#',
|
|
status: 'current',
|
|
},
|
|
{
|
|
id: '03',
|
|
name: 'KSS API',
|
|
description: 'API 서비스 제공',
|
|
href: '#',
|
|
status: 'current',
|
|
},
|
|
];
|
|
|
|
const steps = [
|
|
{
|
|
name: '서비스 사용 신청',
|
|
description: '이 메일을 통한 서비스 등록 신청',
|
|
href: '#',
|
|
status: 'complete',
|
|
},
|
|
{
|
|
name: '내부 검토 및 계정 등록',
|
|
description: '고객사의 회원 자격 등을 검토 하여 계정을 등록 합니다.',
|
|
href: '#',
|
|
status: 'current',
|
|
},
|
|
{
|
|
name: '회원 가입',
|
|
description: '등록된 이메일 주소로 회원 가입을 진행 합니다.',
|
|
href: '#',
|
|
status: 'upcoming',
|
|
},
|
|
{
|
|
name: 'API 키 생성',
|
|
description: '웹 어드민 기능을 통해 필요한 API 키를 생성 합니다.',
|
|
href: '#',
|
|
status: 'upcoming',
|
|
},
|
|
{
|
|
name: '서비스 연동',
|
|
description:
|
|
'연동 가이드 등을 참고로 발급된 API 키를 서비스와 연동 합니다.',
|
|
href: '#',
|
|
status: 'upcoming',
|
|
},
|
|
];
|
|
|
|
const includedFeatures = [
|
|
'최신 통합 필터 DB 적용',
|
|
'일 최대 8백만건 호출',
|
|
'초당 최대 100회 호출',
|
|
'웹 어드민 페이지',
|
|
];
|
|
|
|
const stats = [
|
|
{ id: 1, name: '일 최대 호출', value: '8,640,000' },
|
|
{ id: 2, name: '1초 호출 제한', value: '100회' },
|
|
{ id: 3, name: '관리 기능 제공', value: '웹 어드민' },
|
|
{ id: 4, name: '낮은 도입 부담', value: '월 단위 결제' },
|
|
];
|
|
|
|
const route = useRoute();
|
|
console.log('route.query = ', route.query);
|
|
console.log('route = ', route.fullPath);
|
|
|
|
onMounted(() => {
|
|
console.log('myheader mounted');
|
|
|
|
if (route.fullPath.endsWith('#service-use-agreement')) {
|
|
const container = document.getElementById('service-use-agreement');
|
|
container.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
});
|
|
</script>
|