| 디바이스 | 해상도 | 최적화 내용 |
|---|---|---|
| PC | 1920px 이상 | 풀 레이아웃, 드롭다운 GNB |
| 태블릿 | 768px ~ 1024px | 적응형 그리드, 터치 최적화 |
| 모바일 | 320px ~ 767px | 햄버거 메뉴, 세로 스크롤 중심 |
| 구분 | 지원 범위 |
|---|---|
| 웹브라우저 | Chrome, Safari, Edge, Firefox 최신 버전 |
| 운영체제 | Windows, MacOS, iOS, Android |
| 영역 | 설계 기준 | CMS 관리 항목 |
|---|---|---|
| Hero | 대중문화 이미지·영상 중심의 첫 화면 임팩트 제공 | 파일, 제목, 링크, 노출 기간, 정렬 순서 |
| 콘텐츠 그리드 | 카드형·웹진형 콘텐츠를 혼합 배치 | 콘텐츠 유형, 썸네일, 게시 상태, 추천 여부 |
| 모바일 | 1단 스택 구조와 터치 영역 확보 | 모바일 썸네일, 노출 순서, 대체 텍스트 |
| 기능 | 상세 |
|---|---|
| 이미지/영상 혼합 | JPG, PNG, WebP, MP4 등 다양한 포맷 지원 |
| 자동 재생 | 웹 표준 준수, Autoplay + Muted 상태로 최적화 |
| 인터랙션 UI | 슬라이드, 페이드 효과, 일시정지/재생 버튼 |
| 예약 게시 | 시작/종료 일시 설정, 기본 이미지 세팅 |
| 기능 | 설명 |
|---|---|
| 노출 방식 | 레이어 팝업 형태 (브라우저 차단 우회) |
| 다중 팝업 | 여러 개 등록 시 슬라이드 또는 격자형 배치 |
| 사용자 편의 | 오늘 하루 / 일주일간 보지 않기 기능 |
| 반응형 | 모바일 화면 크기에 맞춰 자동 조절 |
| 관리자 기능 | 이미지 업로드 후 노출 위치·기간 설정 |
| 구분 | 관리 기능 | 사용자 기능 |
|---|---|---|
| 롤링 배너 | 3~5개 순서 관리, 영상/이미지 혼합, 예약 게시 | 좌우 이동, 번호 표시, 재생/정지, 마우스오버 정지 |
| 팝업 배너 | 노출 위치, 기간, 다중 팝업, 링크 관리 | 오늘 하루 보지 않기, 일주일간 보지 않기, 모바일 자동 조절 |
| 예외 처리 | 미등록·기간 만료 시 기본 이미지 자동 적용 | 깨진 이미지 없이 안정적인 화면 제공 |
게시판 생성/편집 - 일반형, 앨범형, 영상형 등 코딩 없이 자유롭게 생성
콘텐츠 통합 관리 - 카드뉴스, 보도자료, 영상 등 단일 화면에서 제어
다중 관리자 설정 - 메뉴별 읽기/쓰기/삭제 권한 차등 부여
접속 로그 기록 - IP, 시간, 작업 내용 이력 저장
| 관리 항목 | 구현 내용 | 운영 효과 |
|---|---|---|
| 권한 | 읽기, 쓰기, 삭제, 승인 권한을 메뉴 단위로 분리 | 운영자별 책임 범위 명확화 |
| 접속 제한 | 마스터 계정은 지정 IP에서만 접속 가능하도록 설정 | 관리자 화면 접근 위험 감소 |
| 작업 로그 | 로그인, 등록, 수정, 삭제, 메뉴 변경 이력 기록 | 오류 원인 추적 및 보안 감사 대응 |
| 승인 흐름 | 중요 콘텐츠는 작성자와 승인자 역할 분리 가능 | 오게시 및 임의 게시 방지 |
| 기능 | 설명 |
|---|---|
| 실시간 편집 | 영문 텍스트, 이미지, 첨부파일(브로슈어 등) 직접 수정/업로드 |
| 독립적 관리 | 국문/영문 페이지 각각 별도 편집 가능한 다국어 관리 모듈 |
| 영역 | 콘텐츠 | 관리 방식 |
|---|---|---|
| About Us | 위원회 소개, 설립 목적, 주요 역할 | 국문과 독립된 영문 텍스트·이미지 관리 |
| Vision & Mission | 비전, 핵심 가치, 대중문화 교류 방향 | 롱페이지 또는 탭 방식 선택 가능 |
| Key Projects | 주요 사업, 최신 소식, 영문 브로슈어 | 첨부파일 업로드 및 링크 관리 |
| Contact | 연락처, 위치, 관련 사이트 | 운영자가 CMS에서 직접 수정 |
| 기능 | 설명 |
|---|---|
| 템플릿 매핑 | 신규 메뉴 생성 시 그리드/웹진/게시판 방식 중 선택하여 생성 |
| 권한 관리 | 관리자 계정별 특정 메뉴 접근·수정 권한 부여 |
| 순서 변경 | 드래그앤드롭으로 메뉴 순서 실시간 변경 |
| 템플릿 | 적용 대상 | 주요 설정 |
|---|---|---|
| 그리드형 | 사진, 카드뉴스, 주요 콘텐츠 | 썸네일 비율, 카드 개수, 추천 여부 |
| 웹진형 | 기획 기사, 인터뷰, 행사 스케치 | 대표 이미지, 요약문, 관련 콘텐츠 |
| 게시판형 | 공지사항, 보도자료, FAQ | 말머리, 첨부파일, 비밀글, 검색 조건 |
| 정적 페이지 | 위원회 소개, 오시는 길, CI 소개 | 본문 에디터, 이미지, 파일 첨부 |
변경관리 — 요구사항 변경 시 정식 절차를 통해 승인받은 사항만 반영합니다.
권한 관리 — URL 직접 입력 등 비정상 접근 차단을 위해 세션과 권한을 철저히 검증합니다.
| 품질 영역 | 관리 항목 | 검증 방법 |
|---|---|---|
| 정확성 | 데이터 값의 정확한 표현 | 유효값 검증 범위 검증 |
| 완전성 | 필수 데이터 누락 방지 | NULL 체크 필수값 검증 |
| 일관성 | 데이터 간 논리적 관계 유지 | 참조무결성 업무규칙 검증 |
| 유일성 | 중복 데이터 방지 | PK 검증 중복 체크 |
개방 표준 포맷 — JSON, XML, CSV 등 기계판독 가능한 형식으로 데이터 제공 체계 구축
API 연동 지원 — 문화포털, 공공데이터포털 등 외부 시스템과의 연계를 위한 표준 API 구현
| 항목 | 구축 내용 | 운영 기준 |
|---|---|---|
| 도메인/SSL | 공식 도메인 연결, 전 페이지 HTTPS, HTTP 자동 전환 | 만료일과 갱신 일정 관리 |
| 복구 | 서버 장애, DB 손상, 파일 손상 유형별 복구 절차 수립 | 장애 등급별 복구 절차 적용 |
| 점검 | 백업 생성 여부와 복구 가능 여부를 월 1회 이상 확인 | 점검 결과 운영 보고에 포함 |
CPU, 메모리, 네트워크 사용량과 동시 접속자 수를 실시간으로 모니터링하는 대시보드를 구축하겠습니다. 설정한 임계치 도달 시 담당자에게 자동 알림을 발송하여 조기에 대응하겠습니다. 오픈 전 JMeter를 활용해 실제 트래픽 상황을 시뮬레이션하는 부하 테스트를 수행하겠습니다.
| 최적화 영역 | 적용 기술 | 기대 효과 |
|---|---|---|
| 프론트엔드 | CSS/JS 번들링, Critical CSS 인라인화 | First Paint 50% 단축 |
| 이미지 | WebP 변환, 반응형 이미지, Lazy Load | 페이지 용량 40% 감소 |
| 서버 | HTTP/2, Keep-Alive, 서버 사이드 캐싱 | TTFB 30% 개선 |
| 네트워크 | CDN 분산, DNS Prefetch, Preconnect | 전송 지연 최소화 |
| 영역 | 튜닝 방안 | 검증 방법 |
|---|---|---|
| 프론트 | 이미지 최적화, Lazy Loading, CSS/JS 최소화 | Lighthouse, 브라우저 개발자 도구 |
| 서버/API | 캐시 정책, 페이징, 대량 조회 상태 안내 | 부하 테스트, 응답 로그 |
| DB | 검색·목록 조회 인덱스, 쿼리 실행계획 점검 | 슬로우 쿼리 및 실행계획 분석 |
| 콘텐츠 | CDN 전송, 대체 이미지, 업로드 용량 정책 | 네트워크 트래픽과 로딩 시간 측정 |
| 구분 | 테스트 대상 | 검증 항목 |
|---|---|---|
| 브라우저 | Chrome Edge Safari FireFox | 레이아웃, 기능 동일 작동 확인 |
| PC | Windows, macOS | 해상도별 반응형 테스트 |
| 태블릿 | iPad, Android Tablet | 터치 인터랙션, 화면 최적화 |
| 모바일 | iOS, Android | 모바일 레이아웃, 성능 |
W3C Validator로 HTML/CSS 문법 오류를 점검하고, 웹 접근성 자동 검사 도구와 수동 점검을 병행합니다. 특히 이미지에 대체 텍스트가 제대로 들어갔는지, 키보드만으로 모든 메뉴에 접근 가능한지 등을 꼼꼼히 확인합니다.
| 점검 항목 | 적용 내용 | 완료 기준 |
|---|---|---|
| 개인정보 | 개인정보 노출방지 안내서 및 안전성 확보조치 기준 반영 | 개인정보 점검표 확인 |
| 취약점 | 웹 취약점, 소스 보안약점, 공개SW 취약점 점검 | 조치 결과서 및 재점검 완료 |
| 로그 | 관리자 로그인, 주요 설정 변경, 콘텐츠 삭제 이력 기록 | CMS 로그 조회 화면 확인 |
| 자료 보안 | 누출금지정보 식별, 산출물 반출 통제, 보안서약 관리 | 보안 산출물 목록 제출 |
Staging 환경 제공 — 실제 운영 서버와 동일한 조건의 테스트 URL을 별도 생성하여 오픈 전 모든 기능 검증
데이터 정합성 확인 — 실제 콘텐츠(영상, 이미지, 텍스트) 등록 후 디자인 레이아웃 깨짐 여부 최종 확인
| 검수 영역 | 검수 항목 | 검수 담당 |
|---|---|---|
| 디자인 | 시안 일치, 그리드 레이아웃, 영상 배너 재생 상태 | 위원회 담당자 |
| 콘텐츠 | 오타 점검, 영문 페이지 가독성, 이미지 품질 | 위원회 담당자 |
| 기능 | 게시판, 메뉴 변경, 팝업 설정 등 CMS 기능 | 실무자 직접 수행 |
| 관리자 | 권한 설정, 통계, 로그 기록 | 시스템 관리자 |
| UI 패턴 | 설명 |
|---|---|
| 로딩 스피너 | 짧은 대기 시간(3초 미만)에 대한 시각적 피드백 제공 |
| 진행률 표시 | 파일 업로드, 대량 처리 등 진행 상황을 퍼센트로 표시 |
| 예상 시간 안내 | 처리에 소요될 예상 시간을 사전에 안내하여 사용자 대기 유도 |
| 단계별 메시지 | "데이터 수집 중...", "분석 중..." 등 현재 처리 단계 안내 |
| 작업 유형 | 예상 시간 | 안내 방식 |
|---|---|---|
| 검색 결과 | 1~3초 | 로딩 스피너 |
| 파일 업로드 | 용량에 따라 가변 | 진행률 바 업로드 용량 표시 |
| 대량 데이터 조회 | 3초 이상 | 예상 시간 단계별 안내 |
| 리포트 생성 | 5초 이상 | 백그라운드 처리 완료 알림 |
한국문화정보원 클라우드 환경과 기존 운영 소프트웨어와의 호환성을 사전에 검증합니다. 튜닝이나 업데이트 작업은 서비스 운영에 영향을 주지 않도록 계획하고, 필요시 점검 시간을 사전 공지합니다.