대중문화교류위원회 홈페이지 구축 및 유지보수 사업 제안요약서 표지
CONTENTS
Ⅰ
제안개요 및 핵심 대응
04
Ⅱ
주요 수행실적
07
Ⅲ
제안 전략 및 실행방안
14
Ⅲ
IA·목표시스템·디자인 방향
21
Ⅲ
대표 시안 설명
25
Ⅳ
사업수행조직 및 일정
31
Ⅰ

제안개요

사업 이해, RFP 대응 범위, 제안의 핵심 방향

제안개요Ⅰ
1.

제안배경 및 목적

RFP 42개 요구사항을 중심으로 구축, 운영, 유지보수를 하나의 실행계획으로 구성합니다.
Key Message

대중문화교류위원회의 공식 디지털 채널을 콘텐츠 중심, 모바일 중심, 운영 중심의 대표 홈페이지로 구축합니다.

42

요구사항 전 항목 대응

기능, 인터페이스, 데이터, 보안, 성능, 품질, 관리, 지원 요구사항을 원 제안서 장표 전반에 반영했습니다.

90일

구축 기간 준수

착수/분석, 설계, 개발, 테스트, 이관/오픈을 12주 일정으로 관리하여 계약일로부터 90일 구축을 달성합니다.

2026.12

운영·유지보수

오픈 이후 장애 대응, 콘텐츠 운영지원, 교육, 산출물 이관, 하자보수까지 지속 지원합니다.

구축 범위

대표 홈페이지, 영문 안내 페이지, 통합 CMS, 클라우드 인프라, 도메인/SSL, 보안 설정, 운영 및 유지보수 체계

차별화 포인트

대중문화 콘텐츠에 적합한 매거진형 UI, Vue.js 기반 빠른 사용자 경험, CMS 중심 운영 편의성, 공공 웹 품질 준수

제안개요Ⅰ
2.

사업범위 및 RFP 대응 체계

원 제안서와 동일하게 42개 요구사항을 범주별로 대응합니다.
Point

요약서에서는 세부 요구사항을 모두 나열하기보다 평가자가 확인해야 할 대응 범주와 실행 장표를 명확히 보여줍니다.

분류수량핵심 대응 내용요약서 연결
기능 / 인터페이스8매거진형 UI, 배너, CMS, 영문 안내, IA, 반응형 웹전략, IA, 시안
데이터 / 기술 / 보안16데이터 관리, 클라우드, eGovFrame+Vue, SSL, 접근통제, 취약점 대응목표시스템 구성도
성능 / 품질 / 제약11응답시간, 동시접속, 웹표준, 접근성, 호환성, 저작권 준수디자인 골, 품질 대응
관리 / 지원7추진일정, 교육, 산출물, 장애대응, 유지보수, 하자보수조직, 일정, 결론

누락 없는 범위

RFP의 필수 구축 범위를 넘어가지 않되, 필수 요구를 평가자가 쉽게 찾도록 재배치했습니다.

실행 가능한 설계

기술 구조, IA, CMS, 일정, 조직을 같은 흐름으로 연결해 실제 수행 가능성을 보여줍니다.

운영 관점 강화

오픈 이후 운영권한, 데이터, 매뉴얼, 교육, 유지보수까지 발주처 관점에서 정리합니다.

Ⅱ

주요 수행실적

유사사업 경험과 본 사업 적용 가능성

주요 수행실적Ⅱ
1.

주요 사업실적 총괄

샘플 요약서 방식에 맞춰 실적을 먼저 제시하고, 이후 유사사업을 개별 장표로 설명합니다.
사업명기간발주처본 사업 연계성
스마트K팩토리 3차 고도화 사업25.2~25.10에이아이더뉴트리진AI 모델링, 추천서비스, 플랫폼 고도화
파메스테틱 커머스 플랫폼 구축25.9~26.9투비소프트웹 플랫폼 구축 및 운영 경험
한진그룹 그룹웨어 시스템 개선25.2~25.10엘루오씨앤씨대형 조직 업무시스템 개선
소상공인진흥공단 빅데이터 플랫폼24.3~24.5오픈메이트공공 데이터 플랫폼 구축
하수도 정보시스템 기능개선23.8~23.12데브릭스공공 시스템 UI/UX 개선
비점오염관리 정보시스템기 구축네오브릭스정부 디자인 표준 및 모바일 최적화
주요 수행실적Ⅱ
2.

유사사업 수행실적 (1/5)

AI 모델링 및 LLM 기반 추천서비스 구축 경험
01

AI 모델링 기반 플랫폼 고도화

모바일 웹 / PC 웹

AI 모델링 및 자체 LLM 기반 맞춤형 공장정보 추천서비스를 개발하여 SMART 매칭 프로세스를 고도화했습니다.
스마트K팩토리 PC 화면
스마트K팩토리 모바일 화면

핵심 수행

  • AI 모델링 기반 추천 로직 구현
  • 사용자 조건 기반 매칭 프로세스 개선
  • PC·모바일 대응 서비스 화면 구성

본 사업 적용

  • 콘텐츠 탐색성과 개인화 확장 가능성 확보
  • CMS 데이터 구조 설계 경험 활용
  • 향후 콘텐츠 추천/검색 고도화 기반 마련
주요 수행실적Ⅱ
2.

유사사업 수행실적 (2/5)

모바일 기반 업무서비스 구축 경험
02

모바일 웹/앱 서비스 구현

농장주 및 관리자 대상 서비스

가축질병 발생정보, 차량 일시 이동 중지, 차량 관제와 질병 모니터링을 지원하는 모바일 서비스를 구축했습니다.
농림축산검역본부 방역 서비스 화면 1
농림축산검역본부 방역 서비스 화면 2
농림축산검역본부 방역 서비스 화면 3

핵심 수행

  • 사용자/관리자 로그인 서비스 구현
  • 상황 정보 기반 모니터링 화면 구성
  • 모바일 이용 환경 최적화

본 사업 적용

  • 모바일 퍼스트 홈페이지 구축
  • 관리자와 일반 사용자 역할 구분
  • 현장 사용성을 고려한 화면 설계
주요 수행실적Ⅱ
2.

유사사업 수행실적 (3/5)

데이터 통합과 대시보드 시각화 경험
03

데이터 통합 및 시각화

PC 웹 기반 대시보드

각종 데이터를 통합하여 대시보드로 구현하고, GIS 연동을 통해 인구·시설·사고 이력 등을 모니터링하는 시스템을 구축했습니다.
함평군청 빅데이터 통합 플랫폼 상단 화면
함평군청 빅데이터 통합 플랫폼 하단 화면

핵심 수행

  • 다중 데이터 통합 구조 설계
  • 실시간 GIS 연동 화면 구성
  • 관리자 중심 대시보드 구현

본 사업 적용

  • CMS 콘텐츠 관리 현황 시각화
  • 게시물·배너·팝업 관리 흐름 설계
  • 운영자 관점의 정보 구조화
주요 수행실적Ⅱ
2.

유사사업 수행실적 (4/5)

공공 시스템 UI/UX 최신화 경험
04

노후 UI/UX 최신화

모바일 웹 / PC 웹

전국 하수도 시설 및 운영 데이터를 관리하는 국가 전산 시스템의 불편하고 노후된 UI/UX를 최신화했습니다.
하수도정보시스템 PC 화면
하수도정보시스템 모바일 화면

핵심 수행

  • 복잡한 공공 데이터 화면 재구성
  • PC·모바일 사용성 개선
  • 정책 지원 시스템의 정보 가독성 향상

본 사업 적용

  • 위원회 콘텐츠를 이해하기 쉬운 구조로 정리
  • 노후화 없는 최신 웹 UI 구현
  • 공공기관 사용자 경험 품질 확보
주요 수행실적Ⅱ
2.

유사사업 수행실적 (5/5)

정부 디자인 표준 및 모바일 최적화 경험
05

공공 디자인 표준 적용

모바일 웹 / PC 웹

정부 디자인 표준을 준수하고 복잡한 서비스를 직관적인 단계별 비주얼과 모바일 최적화 레이아웃으로 구현했습니다.
비점오염관리 정보시스템 PC 화면
비점오염관리 정보시스템 모바일 화면

핵심 수행

  • KRDS 기반 공공 서비스 신뢰성 강화
  • 단계별 정보 구조와 비주얼 체계 설계
  • 모바일 최적화 레이아웃 구현

본 사업 적용

  • 웹 표준·접근성·호환성 준수
  • 대중문화 콘텐츠의 시각적 전달력 강화
  • 공공성과 문화성을 함께 담는 디자인 구현
Ⅲ

사업수행방안

추진전략, IA, 목표시스템, 디자인 및 시안

사업수행방안Ⅲ
1.

제안의 특징 및 장점 (1/7)

원 제안서 2장의 전략을 요약서용으로 상세 전개합니다.
01

MZ세대 맞춤형 UI/UX

숏폼·릴스형 콘텐츠 소비 패턴, 모바일 퍼스트, 매거진형 화면 구성으로 대중문화 콘텐츠의 체류 경험을 강화합니다.

02

Vue.js 최신 프레임워크

컴포넌트 기반 화면, 빠른 페이지 전환, 반응형 구현, 유지보수 효율을 확보합니다.

03

영문·다국어 확장 구조

RFP 필수 영문 안내 페이지를 안정적으로 구현하고 향후 언어 확장이 가능한 CMS 구조를 설계합니다.

STEP 1

사용자 콘텐츠 소비 방식 분석

STEP 2

매거진형 UI와 IA 설계

STEP 3

Vue.js·CMS 기반 구현

STEP 4

운영·유지보수 체계 이관

사업수행방안Ⅲ
1.

제안의 특징 및 장점 (2/7)

대중문화 콘텐츠의 주요 소비층과 이용행태를 화면 설계에 반영합니다.
Key Message

K-POP, K-Drama 등 대중문화 콘텐츠의 주 소비층인 MZ세대의 콘텐츠 소비 패턴에 맞춰 시각적 즐거움과 체류 시간을 높입니다.

콘텐츠 소비 트렌드

  • 세로형 영상과 짧은 콘텐츠 선호
  • 스와이프 기반의 빠른 탐색에 익숙
  • 모바일 접속 중심의 한 손 조작 경험
  • 초기 화면에서 즉시 흥미를 유발해야 함

제안 화면 방향

  • 메인 히어로 영역에 고화질 이미지·영상 노출
  • 카드뉴스, 갤러리, 웹진형 레이아웃 적용
  • PC는 매거진형, 모바일은 숏폼 친화형 구성
  • 콘텐츠 공유와 유입 확산을 고려한 CTA 배치
짧고 강한 첫인상15~60초 단위의 영상 소비 방식에 맞춰 메인 비주얼과 핵심 소식을 빠르게 노출합니다.
스와이프형 탐색모바일에서 다음 콘텐츠로 자연스럽게 이동하는 탐색 흐름을 반응형 UI에 반영합니다.
Web Magazine
PC 매거진 레이아웃PC에서는 이미지, 기사, 영상자료를 그리드로 묶어 문화 콘텐츠의 맥락을 풍부하게 전달합니다.
사업수행방안Ⅲ
1.

제안의 특징 및 장점 (3/7)

홈페이지 콘텐츠가 외부 채널로 확산될 수 있는 구조를 제안합니다.
Key Message

위원회가 생산한 콘텐츠를 홈페이지에 축적하고, SNS 공유와 외부 유입을 통해 대중문화 교류의 접점을 넓힙니다.

STEP 1

위원회 콘텐츠 제작

STEP 2

CMS 등록 및 홈페이지 게시

STEP 3

배너·갤러리·영상자료 노출

STEP 4

SNS 공유 및 유입 확산

방문자 유입

콘텐츠 중심 메인 구성으로 신규 방문자의 관심을 빠르게 확보합니다.

체류시간 증가

연속 탐색 가능한 카드형 콘텐츠로 홈페이지 내 소비 흐름을 만듭니다.

운영 편의

관리자가 배너, 팝업, 게시물을 CMS에서 직접 등록·수정합니다.

사업수행방안Ⅲ
1.

제안의 특징 및 장점 (4/7)

공공 웹의 안정성 위에 현대적인 사용자 경험을 구현합니다.
Key Message

Vue.js 기반 SPA 구조를 적용하여 페이지 전환의 부드러움, 컴포넌트 재사용성, 유지보수성을 함께 확보합니다.

구분제안 방식
화면 전환변경 영역 중심의 빠른 화면 전환
유지보수컴포넌트 기반 재사용으로 일관성 확보
반응형PC·태블릿·모바일 레이아웃을 함께 설계
다국어Vue i18n 기반 언어 리소스 확장 가능

공공서비스 적용 예시

정부24는 현재 Nuxt/Vue 계열 프론트엔드 구조가 확인되는 대표 대민 공공서비스입니다. 본 사업도 공공 웹 환경에 적합한 컴포넌트 기반 구조로 설계합니다.

정부24

정부24

Nuxt/Vue 계열 구조가 확인되는 대민 포털 사례

실제 서비스 화면

공공 포털의 카드형 정보 구조와 반응형 UX를 참고합니다.

정부24 홈페이지 화면
사업수행방안Ⅲ
1.

제안의 특징 및 장점 (5/7)

기술 선택을 RFP 요구사항과 직접 연결합니다.

핵심 기술스택

  • Vue 3 Composition API
  • Vue Router 기반 화면 라우팅
  • Pinia 기반 상태관리
  • Vite 기반 개발 및 빌드 환경
  • Vue i18n 기반 언어 확장 구조

RFP 직접 대응

  • SFR-001 매거진형 UI: 컴포넌트 기반 그리드
  • SIR-001 반응형 웹: 화면 크기별 최적화
  • PER 요구사항: 정적 리소스 최적화와 캐싱
  • QUR 요구사항: 시맨틱 HTML과 접근성 점검
Vue 3
Router
Pinia
Vite
i18n
Result

기술은 새로운 것을 보여주기 위한 장식이 아니라, 콘텐츠 운영과 사용자 경험을 안정적으로 유지하기 위한 수행 기반입니다.

사업수행방안Ⅲ
1.

제안의 특징 및 장점 (6/7)

RFP 필수 범위인 영문 페이지를 중심으로 운영 확장성을 확보합니다.
Key Message

영문 안내 페이지를 별도 관리 가능한 구조로 구현하고, 향후 콘텐츠 확장 시 언어별 운영 부담을 줄이는 CMS 구조를 설계합니다.

K-pop 팬을 위한 글로벌 접점

영문 페이지는 단순 번역 페이지가 아니라 해외 K-pop 팬, 문화행사 관계자, 언론·기관 이용자가 위원회 정보를 공식적으로 확인하는 기본 채널입니다.

EN

About

위원회 소개와 역할

K

Programs

교류행사와 지원사업

N

News

소식과 보도자료

북미·유럽영문 기반 공식 정보 접근
일본·아시아K-pop 팬덤과 행사 정보 탐색
남미확산력이 높은 글로벌 팬 커뮤니티 대응
국내 기관국문·영문 콘텐츠 일관 관리
사업수행방안Ⅲ
1.

제안의 특징 및 장점 (7/7)

운영자가 실제로 관리할 수 있는 절차를 중심으로 설명합니다.
STEP 1

국문 콘텐츠 등록

STEP 2

영문 콘텐츠 입력 또는 번역 반영

STEP 3

관리자 검수 및 게시 승인

STEP 4

국문·영문 동시 운영

관리 항목

  • 언어별 제목, 본문, 첨부파일, 이미지 대체텍스트
  • 게시 상태, 예약 게시, 노출 순서
  • 번역 상태와 검수 여부

운영 효과

  • 영문 페이지 갱신 누락 방지
  • 담당자 중심 콘텐츠 운영 가능
  • 해외 이용자 대상 공식 정보 전달력 강화
사업수행방안Ⅲ
2.

정보구조(IA) 설계

3Depth 이내 접근과 CMS 메뉴 관리를 기준으로 설계합니다.
Key Message

위원회 소개, 주요사업, 위원회소식, 자료실, EN 메뉴를 직관적으로 배치하여 국내외 이용자가 원하는 정보에 빠르게 접근하도록 합니다.

대중문화교류위원회 대표 홈페이지

위원회소개

인사말
설립목적·연혁
조직도
CI 소개
오시는 길

주요사업

교류행사
지원사업
협력사업
연구·조사

위원회소식

공지사항
보도자료
갤러리
영상자료

자료실

발간물
홍보자료
서식자료

EN

About
Programs
News
Contact
사업수행방안Ⅲ
3.

목표 시스템 구성도

한국문화정보원 클라우드 기반 안정 인프라 구성
Key Message

사용자, 관리자, 운영자 접속을 분리하고 웹·애플리케이션·데이터·백업 계층을 보안 구조 안에서 운영합니다.

클라우드 기반

한국문화정보원 클라우드 인프라 구성

기술스택

Vue.js 3, eGovFrame 4.x, Tomcat 10, PostgreSQL 15

보안 계층

SSL/TLS, 방화벽, WAF, IDS/IPS 적용

운영 이관

위원회 명의 계정, 데이터, 관리권한 이관

일반 사용자
사무국 관리자
시스템 운영자
HTTPS / SSL / 외부 방화벽
CDN
WAF
IDS/IPS
내부 방화벽 / 접근 제어
Vue.js 3
eGovFrame 4.x
Tomcat 10
PostgreSQL
Object Storage
Backup
한국문화정보원 클라우드
사업수행방안Ⅲ
4.

디자인 구성 기본요건

새로 정리하되 원 제안서의 디자인 방향에서 벗어나지 않게 구성했습니다.
Goal

콘텐츠가 먼저 보이는 공공 디지털 매거진. 대중문화의 시각성과 공공 홈페이지의 신뢰성, 접근성, 운영성을 동시에 만족합니다.

디자인 원칙

  • 이미지·영상 중심 콘텐츠 몰입
  • 가독성 높은 정보 구조와 명확한 CTA
  • 모바일 퍼스트 반응형 경험
  • 웹 표준·접근성·호환성 준수

운영 원칙

  • 배너·팝업·게시판·갤러리의 모듈화
  • 국문/영문 콘텐츠 일관 운영
  • 이미지 과다 사용을 줄인 빠른 로딩
  • 위원회 역할과 특성을 살린 톤앤매너

Content First

대중문화 콘텐츠가 첫 화면에서 직접 보이도록 구성합니다.

Public Trust

공공기관 정보 전달의 신뢰와 안정감을 유지합니다.

CMS Ready

관리자가 반복 운영할 수 있는 디자인 모듈을 제공합니다.

사업수행방안Ⅲ
5.

품질 확보 및 검증 방안

시안, 테스트, 승인, 이관까지 연결해 실제 완성도를 관리합니다.

시안 검증

메인, 매거진, 모바일, 팝업 등 핵심 화면을 실제 콘텐츠 기준으로 검토하고 발주처 승인을 거칩니다.

기능 검증

별도 테스트 사이트에서 CMS 등록, 게시, 배너, 팝업, 영문 페이지, 반응형 동작을 확인합니다.

오픈 검증

데이터 정합성, 웹접근성, 보안, 브라우저 호환성, 성능 점검 후 최종 오픈합니다.

관리 기준

디자인이 의도대로 나왔는지, 기능이 안정적으로 작동하는지, 운영자가 CMS로 직접 관리할 수 있는지를 최종 품질 기준으로 삼습니다.

제안요약서 시안 페이지 1
제안요약서 시안 페이지 2
제안요약서 시안 페이지 3
제안요약서 시안 페이지 4
제안요약서 시안 페이지 5
Ⅳ

사업관리 및 지원

수행조직, 추진일정, 운영 안정화 계획

사업관리 및 지원Ⅳ
1.

사업수행조직도

1장 수행조직 및 업무분장을 요약합니다.

프로젝트 관리자(PM)

프로젝트 관리 및 통제, 요구사항 분석, 일정·위험·품질·성능관리, 보고 및 의사소통 총괄

품질관리

  • 산출물 품질 기준 수립
  • 테스트 결과 및 결함 조치 확인
  • 웹표준·접근성 점검 지원

사업관리

  • WBS·진척률 관리
  • 위험·이슈·변경관리
  • 보고자료 및 회의체 운영

공통/아키텍처

  • 목표시스템 구조 설계
  • 프레임워크 설계·구축
  • 공통모듈 개발

기획/IA

  • 요구사항 상세분석
  • IA·메뉴구조 설계
  • 화면설계서 작성

UI/UX 개발

  • 메인·서브 디자인 시안
  • 반응형 퍼블리싱
  • 웹표준·접근성 대응

개발/CMS

  • 기능 개발
  • CMS 설치·커스터마이징
  • 보안 취약점 대응
구분주요 책임핵심 산출물
착수/분석사업범위 확정, 요구사항 정의, 현황 분석수행계획서, 요구사항정의서
설계IA, 화면, DB, 디자인 시안 설계 및 승인IA설계서, 화면설계서, 디자인시안
개발/검증홈페이지·CMS 구현, 테스트, 보안·접근성 점검소스코드, 테스트결과서, 보안점검결과서
이관/운영데이터 이관, 관리자 교육, 운영 안정화운영매뉴얼, 사용자매뉴얼, 최종보고서
사업관리 및 지원Ⅳ
2.

사업수행일정표

총 12주 수행일정과 마일스톤
Key Message

착수/분석 1~3주, 설계 4~6주, 개발 7~10주, 테스트 11주, 이관/오픈 12주의 단계별 일정으로 관리합니다.

작업123456789101112
착수보고
요구분석
IA/메뉴설계
UX/UI 설계
디자인 시안
프론트엔드 개발
백엔드/CMS 개발
통합·보안·접근성 테스트
이관/교육/오픈

M1 착수보고

1주차
킥오프 회의

M2 설계완료

6주차
설계서 승인

M3 개발완료

10주차
기능 구현 완료

M4 테스트완료

11주차
품질 검증

M5 오픈

12주차
서비스 오픈

사업관리 및 지원Ⅳ
3.

기대효과 및 제안 결론

실행 가능한 구축·운영 제안
Conclusion

검증된 수행 경험, 명확한 3대 전략, RFP 42개 요구사항 대응, 12주 실행일정을 바탕으로 홈페이지를 안정적으로 구축·운영합니다.

대표성 강화

위원회 설립 목적, 주요사업, 소식, 자료를 한눈에 보여주는 공식 대표 홈페이지를 구축합니다.

사용자 경험 개선

매거진형 UI, 반응형 웹, 영문 안내를 통해 국내외 이용자의 접근성과 체류 경험을 높입니다.

운영 안정성 확보

CMS, 클라우드, 보안, 백업, 교육, 유지보수를 포함해 2026년 말까지 안정 운영합니다.

감사합니다

대중문화교류위원회 홈페이지 구축 및 유지보수 사업 제안요약서

질의응답

제안 내용과 수행방안에 대해 답변드리겠습니다.