보안·접근성 안내
보안 심의와 접근성 점검에 필요한 내용입니다. 라이브러리가 네트워크로 보내는 것과 보내지 않는 것, 외부 요청 없이 쓰는 방법, 뷰어가 KWCAG 2.2를 어디까지 지키는지 정리했습니다.
라이브러리가 보내는 정보
공개 도메인에서 브라우저마다 하루 한 번, https://freereport.app/api/usage로 사용 보고를 한 번 보냅니다(navigator.sendBeacon).
- 도메인 (브라우저의 Origin 헤더)
- 쿼리 문자열과 # 뒤를 뺀 페이지 주소 (origin + path)
- 라이브러리 버전
- 설정한 경우 라이선스 키 (서버가 직접 확인)
유효한 키가 없으면 https://freereport.app/api/domain-status에 "무료 사용" 표시를 할지 묻습니다(쿠키 없이, 하루 캐시). localhost, 사설 IP, 점이 없는 사내 호스트, .local·.internal·.test 주소에서는 아무것도 보내지 않습니다.
서버는 도메인별 합계(처음·마지막 사용일, 사용 일수, 버전, 라이선스 여부, 대표 페이지 주소 하나)만 보관합니다. 방문자의 IP 주소나 브라우저 정보는 저장하지 않으며, 위조 보고를 막기 위해 새 도메인일 때만 보낸 IP의 단방향 해시를 이틀 동안 둡니다.
보내지 않는 정보
- 보고서 데이터, 조회 조건 값, 보고서 정의
- PDF·엑셀·HWPX·CSV·PNG 파일: 브라우저 안에서(또는 renderPdf·renderXlsx로 내 서버에서) 만들어집니다
- 누가 인쇄·저장했는지: onOutput 이벤트는 내 코드로만 갑니다
- 사이트의 쿠키, 로컬 저장소, 입력값
- AI 도우미 요청: 디자이너는 내가 넘긴 assistant 함수와 내 서버를 부르며, FreeReport는 API 키를 갖지 않습니다
방화벽이나 CSP로 freereport.app을 막아도 보고서는 똑같이 동작합니다. 보고만 가지 않고 화면은 바뀌지 않습니다. 이 웹사이트 디자이너의 [공유 링크]는 버튼을 눌렀을 때만 양식을 올립니다. 개인정보처리방침
글꼴 자체 호스팅 (외부 요청 없이)
기본 나눔 글꼴은 처음 필요할 때 fonts.googleapis.com(화면·인쇄)과 cdn.jsdelivr.net(PDF용 트루타입)에서 받습니다. 사내망이거나 외부 요청을 없애려면 파일을 내 서버에 올리고 첫 보고서 전에 등록하세요.
import { registerFont } from '@freereportjs/core';
// 내 서버(사내망)에 올린 파일: 밖으로 나가는 요청이 없습니다
registerFont('Nanum Gothic', {
css: '/fonts/nanum-gothic.css', // @font-face 화면·인쇄용
normal: '/fonts/NanumGothic.ttf', // PDF용 트루타입
bold: '/fonts/NanumGothicBold.ttf',
});
registerFont('Nanum Myeongjo', { css: '/fonts/nanum-myeongjo.css', normal: '/fonts/NanumMyeongjo.ttf' });라이브러리도 CDN 대신 npm으로 설치하거나 freereport.min.js를 내 서버에 두세요. 그러면 사용 보고를 막았을 때 라이브러리가 사내망 밖으로 요청하는 일이 없습니다. 글꼴
CSP (콘텐츠 보안 정책)
라이브러리는 eval이나 new Function을 쓰지 않습니다(수식은 자체 해석기로 계산). 기본 설정에서 동작하는 정책 예시입니다.
Content-Security-Policy:
default-src 'self';
script-src 'self';
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
font-src 'self' https://fonts.gstatic.com;
img-src 'self' data: blob:;
connect-src 'self' https://cdn.jsdelivr.net https://freereport.app;
object-src 'none';
base-uri 'self'- style-src 'unsafe-inline': 뷰어와 디자이너가 style 속성으로 요소를 배치하고, 인쇄는 숨긴 iframe에 스타일이 있는 문서를 씁니다.
- img-src data: blob:: 엠보싱, 직인, PNG 저장, 파일 내려받기가 data:·blob: 주소를 씁니다.
- 글꼴을 직접 호스팅하면 fonts.googleapis.com, fonts.gstatic.com, cdn.jsdelivr.net을 빼세요. freereport.app을 빼면 사용 보고만 가지 않습니다.
- REST 데이터 연결(definition.data.url)을 쓰면 그 주소를 connect-src에 넣으세요.
PDF 암호화·전자서명·원본 확인
- 암호화: AES-256(PDF 2.0, V5/R6) 열기 암호와 인쇄·복사·수정 권한 제한. 브라우저의 WebCrypto로 만듭니다. PDF 보안
- 전자서명: writePdf가 서명 필드를 마련하고, signPdf가 내 인증서·HSM·서명 서버로 만든 분리형 CMS(PKCS#7, PAdES용 CAdES) 서명을 넣습니다. FreeReport는 인증서나 개인 키를 다루지 않습니다.
- 인쇄물 원본 확인: 출력물의 QR 코드로 내 서버의 확인 페이지를 열어, 보관한 원본을 다시 그려 SHA-256 지문을 비교합니다. 데이터는 내 서버 밖으로 나가지 않습니다. 원본 확인
- 워터마크와 출력 이력: 워터마크에 출력자와 출력 시각을 넣을 수 있고, onOutput으로 모든 인쇄·저장을 기록하거나 막을 수 있습니다. 출력 이력
뷰어의 KWCAG 2.2 자체 점검표
뷰어와 디자이너 소스를 직접 읽고 점검한 결과이며, 인증이나 외부 심사 결과가 아닙니다. 사이트 페이지나 양식 내용에만 달린 항목(페이지 제목과 언어 등)은 따로 표시했습니다. 보고서 내용(색, 이미지의 대체 텍스트)은 양식 작성자의 몫입니다.
| 검사 항목 | 상태 | 내용 |
|---|---|---|
| 1.1.1 적절한 대체 텍스트 제공 | 지원 | 도구 모음의 아이콘 버튼에는 aria-label과 title이 있습니다. 이미지·차트·바코드·지도·직인은 alt(템플릿)를 받고, alt가 없으면 차트는 데이터로 만든 요약("막대 차트: 1월 820, 2월 950…"), 바코드는 값, 생성 직인은 글자를 읽습니다. 뷰어는 이를 낭독용 글 층의 role="img"와 페이지 SVG의 <title>로, 태그 PDF는 Figure /Alt로 씁니다. alt가 없는 이미지는 장식으로 보므로 뜻이 있는 이미지에는 alt를 넣으세요. 정의에 accessibility나 lang이 있으면 checkReport가 경고(missing-alt)합니다. |
| 1.3.1 표의 구성 | 부분 지원 | 표(table)·크로스탭 요소는 실제 표 구조가 됩니다. 뷰어의 낭독용 글 층에서는 <th scope>가 있는 <table>, 태그 PDF에서는 /Scope가 있는 Table/TR/TH/TD입니다. 밴드로 그린 표(열 머리글 밴드 + 필드를 배치한 상세 행)는 행마다 문단으로 읽히므로, 표 요소를 쓰거나 [엑셀(데이터)]·CSV 저장을 대안으로 안내하세요. |
| 1.3.2 콘텐츠의 선형 구조 | 지원 | 낭독용 글 층과 태그 PDF는 밴드가 찍히는 순서(제목, 머리글, 행, 합계)를 따르고, 한 밴드 안에서는 위치(위에서 아래, 왼쪽에서 오른쪽) 순서로 읽습니다. 페이지 머리글·바닥글·워터마크·선은 장식으로 빼고, role: 'artifact'로 더 뺄 수 있습니다. 요소가 겹치는 배치는 따로 확인하세요. |
| 1.3.3 명확한 지시 사항 제공 | 지원 | 조회 조건 입력란에 보이는 레이블, 필수 표시, aria-describedby로 연결한 도움말이 있습니다. |
| 1.4.1 색에 무관한 콘텐츠 인식 | 부분 지원 | 뷰어 UI는 아이콘·레이블·눌림 상태로 구분합니다. 보고서 안의 색은 양식 작성자가 정합니다. |
| 1.4.3 텍스트 콘텐츠의 명도 대비 | 지원 | 뷰어 글자색 #0e1726, #4a5568은 흰 바탕에서 약 17:1, 7.5:1이고, 도움말·자리 표시 글자의 회색도 4.5:1 이상으로 진하게 했습니다(테스트로 확인). 보고서 내용의 대비는 양식에 따라 다릅니다. |
| 2.1.1 키보드 사용 보장 | 지원 | 뷰어: 도구 모음, 목차, 썸네일이 모두 버튼·입력란이고, 저장 메뉴는 화살표·Home/End·Esc로 움직입니다. 페이지 영역이 초점을 받아 PageUp/PageDown·화살표, Ctrl+Home/End, Ctrl+F, Ctrl+P, Ctrl+±로 움직이고, 보고서 안의 링크는 글 층에서 Tab으로 갑니다. 디자이너: 도구 상자 버튼을 Enter로 누르면 요소가 추가되고, Tab으로 양식의 요소를 차례로 고르며 화살표(Shift 5mm, Alt 0.1mm)로 옮깁니다. 크기와 모든 속성은 속성 패널의 입력란입니다. |
| 2.1.2 초점 이동과 표시 | 지원 | 버튼, 입력란, 메뉴 항목, 목차, 썸네일에 2px 초점 윤곽선이 보이고(:focus-visible), 페이지 스크롤 영역도 안쪽 테두리에 윤곽선이 보입니다. 글 층의 링크에 초점이 가면 그 페이지 위쪽에 링크가 나타납니다. |
| 2.1.3 조작 가능 | 지원 | 도구 모음 컨트롤 높이는 30px(약 8mm)입니다. |
| 2.1.4 문자 단축키 | 지원 | 한 글자 단축키가 없습니다. 모두 Ctrl·Cmd 조합이고 뷰어에 초점이 있을 때만 동작합니다. |
| 2.2.1 응답 시간 조절 | 해당 없음·사이트 몫 | 시간 제한이 없습니다. |
| 2.3.1 깜빡임과 번쩍임 사용 제한 | 지원 | 깜빡이는 것이 없고, 불러오기 표시는 동작 줄이기 설정에서 느려집니다. |
| 2.4.1 반복 영역 건너뛰기 | 지원 | 뷰어 맨 앞에 초점을 받으면 보이는 건너뛰기 링크가 있어 도구 모음을 건너 페이지로 갑니다. 뷰어를 넣는 사이트 페이지의 건너뛰기 링크는 그 페이지의 몫입니다. |
| 2.4.4 고정된 참조 위치 정보 | 지원 | 쪽 번호가 인쇄물과 같고, 쪽 입력란에 번호를 넣어 이동하며 전체 쪽수를 보여 줍니다. |
| 2.5.1 단일 포인터 입력 지원 | 지원 | Ctrl+휠 확대는 버튼과 배율 목록(50~200%, 너비 맞춤, 쪽 맞춤)으로도 됩니다. |
| 2.5.3 레이블과 네임 | 지원 | 아이콘 버튼은 title과 aria-label에 같은 이름을 씁니다. |
| 3.1.1 기본 언어 표시 | 해당 없음·사이트 몫 | 페이지의 lang 속성은 사이트의 몫입니다. 보고서 자체의 언어(정의의 lang, 기본 ko-KR, 다른 언어는 요소의 lang)는 뷰어의 낭독용 글 층과 태그 PDF의 /Lang에 들어가고, 뷰어의 lang 옵션은 뷰어 UI 글자(한국어·영어)만 바꿉니다. |
| 3.2.1 사용자 요구에 따른 실행 | 지원 | 조회 조건은 [조회]를 눌러야 실행되고, 저절로 새 창을 열지 않습니다. 보고서 안의 링크는 rel=noopener로 새 탭에서 열립니다. |
| 3.3.1 오류 정정 | 지원 | 필수 조회 조건이 비었거나 값이 틀리면 표시하고 고칠 때까지 실행하지 않습니다. |
| 3.3.2 레이블 제공 | 지원 | 조회 조건마다 label이 있고, 쪽 입력란·배율·찾기에는 aria-label이 있습니다. |
| 4.1.2 웹 애플리케이션 접근성 준수 | 지원 | role="toolbar", 이름 붙인 페이지 영역(region), 페이지마다 role="group", aria-expanded·aria-pressed, 화살표로 움직이는 role="menu" 저장 메뉴, 쪽 이동·찾기 결과·상태의 aria-live 안내가 있습니다. 페이지 SVG는 aria-hidden이고 내용은 낭독용 글 층이 전합니다. 디자이너: 도구 모음·배율 버튼과 속성 입력란에 레이블이 있고, 고른 요소를 aria-live로 알려 줍니다. |
PDF: toPdf({ tagged: true })는 태그 PDF, toPdf({ pdfua: true })는 PDF/UA-1을 씁니다(pdfa: true와 함께면 PDF/A-2b도). 제목·표·차트·직인·링크·입력 필드가 있는 예제 보고서가 veraPDF 1.30 검사(PDF/UA-1, PDF/A-2b)를 통과했습니다. 검사기 통과가 사람의 점검을 대신하지는 않으며, 읽는 순서와 대체 텍스트는 양식에 달려 있습니다.
확대: 페이지는 벡터 SVG라 브라우저 확대, 50~400% 배율, Ctrl+휠 어디서도 선명합니다. 다만 용지 크기를 지키므로 좁은 화면에서 페이지 내용이 재배치(reflow)되지는 않으며, 도구 모음은 줄을 바꿔 모든 버튼을 유지합니다. 문제나 요청은 포럼에 남겨 주세요.