Ⅱ

전략 및 방법론

2.1 사업 이해도

사업 배경 및 목적
사업 범위
기대효과

2.2 추진전략

전략 1: MZ세대 맞춤형 UI/UX
전략 2: Vue.js 최신 프레임워크
전략 3: AI 기반 다국어 시스템

2.3 추진체계

추진 일정
추진 조직

2.4 사업추진 방법론

개발 방법론
품질관리 방안

Ⅱ

2.1 사업 이해도

사업 배경 및 목적

Key Message

제안사는 대중문화교류위원회의 비전과 요구사항을 명확히 이해하고, 사용자 중심의 최적화된 홈페이지 신규 구축을 통해 대국민 서비스 품질을 확보하겠습니다.

사업 추진 배경

01

대국민 소통 채널 필요

대중문화교류위원회의 활동과 정보를 국민에게 효과적으로 전달할 공식 온라인 채널 구축 필요

02

사용자 중심 서비스 구현

PC/모바일 반응형 웹, 직관적인 UI/UX, 웹 접근성 준수를 통한 다양한 사용자 접근성 확보

03

효율적인 콘텐츠 관리체계 구축

담당자의 손쉬운 콘텐츠 관리를 위한 CMS 구축, 국/영문 홈페이지 통합 관리 체계 마련

사업 목적

목적 1 대국민 서비스 향상

사용자 친화적 UI/UX 설계
반응형 웹 구현으로 다양한 기기 지원
웹 접근성 및 웹 표준 준수

목적 2 운영 효율성 제고

직관적인 CMS 기반 콘텐츠 관리
업무 프로세스 자동화
안정적인 시스템 운영 환경 구축

목적 3 보안 및 안정성 확보

최신 보안 기술 적용
개인정보보호 강화
시스템 이중화 및 백업 체계

2.1 사업 이해도

사업 범위

Key Message

제안사는 홈페이지 구축부터 유지보수까지 전 과정을 체계적으로 수행하여 안정적인 서비스 운영을 지원하겠습니다.

사업 범위

구분	주요 내용	세부 사항
홈페이지 구축	디자인	UI/UX 설계, 메인/서브 페이지 디자인, 반응형 웹 디자인
	퍼블리싱	HTML5/CSS3 마크업, 웹 표준/접근성 준수, 크로스브라우징
	개발	CMS 구축, 게시판/회원 기능, 관리자 시스템
시스템 구축	서버 환경	웹서버, WAS, DB서버 구성 및 최적화
시스템 구축	보안	SSL 인증서, 웹 방화벽, 취약점 점검 및 조치
유지보수	운영 지원	콘텐츠 업데이트, 오류 수정, 기능 개선
유지보수	모니터링	서버 상태 점검, 보안 모니터링, 백업 관리

사업 수행 범위 개념도

분석

요구사항 분석
현행 시스템 분석
벤치마킹

설계

IA 설계
UI/UX 설계
DB 설계

구현

디자인/퍼블리싱
기능 개발
시스템 구축

테스트

통합 테스트
보안 점검
성능 테스트

오픈/운영

서비스 오픈
교육/인수인계
유지보수

2.1 사업 이해도

기대효과

Key Message

본 사업을 통해 대중문화교류위원회의 온라인 서비스 품질을 혁신하고, 대국민 소통 채널로서의 역할을 강화합니다.

정량적 기대효과

50%↑

페이지 로딩 속도 개선

최적화된 코드와 서버 환경으로
사용자 대기 시간 단축

AA

웹 접근성 기준

WCAG 2.1 AA 기준 충족을 목표로
다양한 사용자 접근성 확보

30%↓

운영 비용 절감

자동화된 관리 시스템으로
운영 효율성 향상

운영

안정적 서비스 운영

이중화 구성 및 모니터링으로
서비스 안정성 강화

정성적 기대효과

대국민 서비스 품질 향상

직관적인 정보 탐색 경험 제공
모바일 환경 최적화로 접근성 향상
빠른 응답 속도로 사용자 만족도 증대

업무 효율성 극대화

CMS 기반 손쉬운 콘텐츠 관리
반복 업무 자동화로 업무 부담 경감
실시간 현황 파악 및 리포팅

보안 및 신뢰성 강화

최신 보안 기술 적용으로 안전성 확보
개인정보보호법 준수 체계 적용
안정적인 시스템 운영으로 신뢰도 향상

2.1 사업 이해도

유사기관 선분석 (1) - 한국국제문화교류진흥원

Key Message

유사 기관 홈페이지의 UI/UX 트렌드와 콘텐츠 구성 전략을 분석하여 대중문화교류위원회 홈페이지 구축에 반영합니다.

KOFICE 메인 화면 분석

기관명	한국국제문화교류진흥원 (KOFICE) - kofice.or.kr
핵심 특징	• 대형 히어로 배너로 한류 이벤트 현장감 전달 • 하단 아이콘 기반 주요 사업 빠른 접근 • 다국어(영문/중문) 지원으로 글로벌 접근성 확보
벤치마킹 포인트	• 풀스크린 비주얼: K-콘텐츠의 역동성을 시각적으로 표현 • 직관적 네비게이션: 아이콘+텍스트 조합으로 사용자 편의 극대화 • 국제교류 강조: 글로벌 협력 네트워크 시각화
적용 방안	메인 화면에 대형 비주얼 영역 배치, 위원회 주요 활동을 아이콘 기반 퀵메뉴로 구성

2.1 사업 이해도

유사기관 선분석 (2) - 한국콘텐츠진흥원

KOCCA 메인 화면 분석

기관명	한국콘텐츠진흥원 (KOCCA) - kocca.kr
핵심 특징	• 통합 검색 중심의 사용자 경험 설계 • 매거진형 콘텐츠 그리드로 다양한 K-콘텐츠 노출 • 카테고리 태그 기반 콘텐츠 필터링
벤치마킹 포인트	• 검색 UX 강화: 메인 화면 중앙에 검색창 배치로 정보 접근성 향상 • 카드형 레이아웃: 이미지 중심 콘텐츠 배치로 시각적 몰입감 제공 • 콘텐츠 다양성: 웹툰, 음악, 영상 등 장르별 콘텐츠 균형 노출
적용 방안	매거진형 콘텐츠 그리드 도입, 태그 기반 필터링으로 사용자 맞춤 콘텐츠 탐색 지원

2.1 사업 이해도

유사기관 선분석 (3) - 한국문화예술위원회

ARKO 메인 화면 분석

기관명	한국문화예술위원회 (ARKO) - arko.or.kr
핵심 특징	• 그라데이션 배경의 모던한 디자인 적용 • 2개 핵심 서비스(통합플랫폼/기관소개)로 단순화된 진입점 • 명확한 CTA(Call-to-Action) 버튼 배치
벤치마킹 포인트	• 심플한 구조: 복잡한 메뉴 대신 핵심 서비스 2개로 집중 • 현대적 비주얼: 그라데이션, 카드형 UI로 세련된 이미지 전달 • 위원회 형태: 유사 조직 구조로 메뉴 체계 참고 가능
적용 방안	메인 화면에 핵심 서비스 바로가기 강조, 그라데이션 배경으로 현대적 이미지 구현

선분석 종합 시사점

시사점 1 비주얼 중심 설계

K-콘텐츠 특성에 맞는 대형 이미지/영상
매거진형 카드 레이아웃 적용

시사점 2 사용자 경험 최적화

직관적 네비게이션 구조
검색 및 필터링 기능 강화

시사점 3 글로벌 접근성

다국어 지원 체계 구축
국제 표준 웹 접근성 준수

01

Strategy 01

MZ세대 맞춤형 쇼츠/릴스 UI

핵심 전략

Key Message

K-POP, K-Drama 등 대중문화 콘텐츠의 주 소비층인 MZ세대(15~39세)의 콘텐츠 소비 패턴에 최적화된 세로형 숏폼 UI를 메인 화면에 도입하여 시각적 즐거움과 체류 시간을 극대화합니다.

MZ세대 콘텐츠 소비 트렌드 분석

세로형 영상 선호: TikTok, Instagram Reels, YouTube Shorts 등 9:16 비율 숏폼 콘텐츠가 주류
스와이프 인터랙션: 위아래 스와이프로 콘텐츠 탐색, 직관적이고 빠른 콘텐츠 소비
모바일 퍼스트: PC보다 모바일 접속 비중 70% 이상, 한 손 조작 최적화 필요
짧은 집중 시간: 평균 8초 내 흥미 유발 필요, 시각적 임팩트 중요

제안 UI 구성

II ‹ ›

대중문화를 넘어
세계와의 교류를 잇다.

FANOMENON

2027 Festival in the World

자세히보기 +

위원회 소식

K-콘텐츠 교류 활성화

2026 K-Culture 전략

Mobile (반응형)

kpopexchange.kr

交

대중문화
교류위원회

2026 K-Culture

핵심 추진전략

Visions and key news title

+

위원회소개 주요사업 위원회소식 자료실

KR EN

Desktop (매거진 레이아웃)

적용 기능

메인 히어로 영역: 세로형 고화질 영상/이미지 자동 롤링 (RFP SFR-002 충족)
스와이프 네비게이션: 위아래 스와이프로 콘텐츠 전환, 모바일 터치 최적화
플레이/일시정지: 영상 자동재생, 사용자 제어 버튼 제공
반응형 전환: PC 접속 시 매거진형 그리드로 자동 전환 (RFP SFR-001 충족)

민관 협력 기반 콘텐츠 확산 전략

Key Message

대중문화교류위원회와 민간 K-콘텐츠 플랫폼(멜론, 지니, 왓챠 등) 및 소셜미디어 인플루언서와의 협력을 통해 홈페이지 콘텐츠의 바이럴 확산을 유도합니다.

콘텐츠 공유 플로우

STEP 1

위원회
콘텐츠 제작

→

STEP 2

홈페이지
게시

→

STEP 3

SNS 공유
버튼

→

STEP 4

바이럴
확산

SNS 연동 기능

원클릭 공유: Instagram, TikTok, YouTube, X(Twitter) 공유 버튼 제공
딥링크 지원: SNS에서 클릭 시 앱/웹 자동 연결로 유입 경로 확보
공유 트래킹: CMS 대시보드에서 콘텐츠별 공유 횟수, 유입 분석
임베드 코드: 외부 사이트/블로그 게시용 임베드 코드 자동 생성

기대효과

📈

방문자 유입 증가

SNS 바이럴을 통한
신규 방문자 확보

⏱️

체류시간 증가

숏폼 UI로 콘텐츠
연속 소비 유도

🎯

MZ세대 타겟팅

K-콘텐츠 핵심 소비층
정확한 도달

02

Strategy 02

Vue.js 최신 프레임워크 도입

기술 혁신

Key Message

기존 공공기관의 JSP 기반 SSR(Server-Side Rendering) 방식에서 벗어나, 정부24 개편에서도 채택된 Vue.js SPA(Single Page Application) 아키텍처를 도입하여 빠른 페이지 전환과 현대적인 사용자 경험을 제공합니다.

기존 방식 vs Vue.js 비교

구분	기존 JSP/SSR	Vue.js SPA (제안)
페이지 로딩	페이지 이동마다 전체 새로고침	변경 부분만 동적 렌더링
응답 속도	평균 2~3초	0.3초 이내
사용자 경험	화면 깜빡임, 끊김 발생	앱처럼 부드러운 전환
유지보수	코드 분산, 수정 어려움	컴포넌트 기반 재사용
모바일 최적화	별도 개발 필요	반응형 기본 지원
공공기관 사례	대부분 레거시	정부24, 국민비서 등

정부24 Vue.js 도입 사례

2023년 전면 개편: 행정안전부 정부24 포털, Vue.js 3.0 기반으로 재구축
성능 개선: 페이지 로딩 속도 60% 향상, 이탈률 25% 감소
접근성 강화: WCAG 2.1 AA 등급 획득, 웹접근성 인증마크 취득
운영 효율화: 컴포넌트 재사용으로 신규 기능 개발 기간 40% 단축

Vue.js 핵심 기술 스택

Vue 3.0 Composition API: 최신 문법으로 코드 가독성 및 재사용성 향상
Vue Router: SPA 라우팅으로 페이지 전환 시 새로고침 없는 부드러운 탐색
Pinia: Vue 공식 상태관리 라이브러리로 데이터 일관성 유지
Vite: 차세대 빌드 도구로 개발 서버 빠른 시작, 핫 모듈 교체(HMR)
Vue i18n: 프레임워크 레벨 다국어 지원 (전략 3 연계)

RFP 요구사항 대응

RFP 요구사항	Vue.js 대응 방안
SFR-001 매거진형 UI	Vue 컴포넌트 기반 그리드 레이아웃
SIR-001 반응형 웹	CSS-in-JS + 미디어쿼리 자동 대응
PER-002 응답시간	SPA 구조로 0.3초 이내 페이지 전환
QUR-002 웹표준/접근성	Vue A11y 플러그인, 시맨틱 HTML

기대효과

⚡

페이지 속도 10배

SSR 대비 응답속도
획기적 개선

🔧

유지보수 용이

컴포넌트 재사용으로
개발 효율 40% 향상

🏛️

공공기관 검증

정부24 등 대형
공공 포털 적용 사례

03

Strategy 03 - Additional Proposal

AI 기반 실시간 다국어 시스템

추가 제안

Key Message

RFP에서 요구하는 영문 페이지(SFR-004)를 넘어, K-POP/K-Drama의 글로벌 핵심 시장인 일본, 중화권, 남미를 대응하는 다국어 확장 시스템을 제안합니다. Vue i18n과 AI 자동 번역을 결합하여 운영 부담 없이 글로벌 콘텐츠를 제공합니다.

1차 지원 언어 (5개)

🇰🇷

한국어

기본 언어

🇺🇸

영어

RFP 필수

🇯🇵

일본어

K-POP 최대시장

🇨🇳

중국어

간체/번체

🇪🇸

스페인어

남미 20개국

글로벌 K-콘텐츠 시장 현황

시장	주요 국가	K-POP 팬덤 규모	대응 언어
일본	일본	약 2,500만 명	일본어
중화권	중국, 대만, 홍콩	약 1억 5,000만 명	중국어 (간체/번체)
남미	멕시코, 브라질, 아르헨티나 등	약 3,000만 명	스페인어
북미/유럽	미국, 영국, 프랑스 등	약 2,000만 명	영어

2차 확장 대응 언어 (구조만 준비)

🇮🇩 인도네시아어
🇹🇭 태국어
🇻🇳 베트남어
🇧🇷 포르투갈어
🇫🇷 프랑스어
🇩🇪 독일어

AI 자동 번역 워크플로우

STEP 1

CMS에서
한글 콘텐츠 등록

→

STEP 2

AI 자동 번역
(5개 언어)

→

STEP 3

관리자 검수
(선택)

→

STEP 4

다국어
동시 게시

기술 구현 방안

Vue i18n: Vue.js 공식 다국어 라이브러리, 언어 파일 분리 관리
AI 번역 API 연동: Google Cloud Translation / DeepL API 연동으로 고품질 번역
번역 메모리: 반복 번역 방지, K-POP 용어 사전 구축으로 정확도 향상
CMS 다국어 모듈: 언어별 콘텐츠 개별 편집, 번역 상태 관리 대시보드
언어 자동 감지: 사용자 브라우저 언어 설정 기반 자동 언어 전환

기대효과

🌏

글로벌 도달

K-POP 팬 2억 명+
직접 소통 가능

🤖

운영 효율화

AI 번역으로
번역 비용 90% 절감

🔄

확장 용이

2차 언어 추가 시
개발 없이 설정만

Key Message

본 제안은 추가 개발이 아닌 구조 설계 차원입니다. Vue i18n은 전략2(Vue.js 도입)에 이미 포함되며, AI 번역 API 비용은 월 10만원 미만(월 10만 자 기준)으로 운영 가능합니다.

2.3 추진체계

추진 일정

Key Message

착수부터 오픈 안정화까지 단계별 마일스톤을 명확히 관리하고, 주간 점검과 산출물 승인 절차를 통해 일정 지연 위험을 선제적으로 통제합니다.

단계별 추진 로드맵

단계	기간	주요 수행 내용	핵심 산출물	검토/승인
착수	1주차	착수회의, 수행계획 확정, 커뮤니케이션 체계 수립	수행계획서	착수보고
분석	2~3주차	RFP 요구사항 상세화, 현행 콘텐츠 분석, 사용자 시나리오 정의	요구사항 정의서	요구사항 승인
설계	4~5주차	IA/메뉴 구조, 화면설계, 디자인 시안, 아키텍처 설계	화면설계서, 시안	디자인 확정
구현	6~10주차	Vue.js 프론트엔드, 관리자 CMS, 게시판/콘텐츠 기능 구현	소스코드	주간 시연
검증	11~12주차	통합테스트, 접근성/호환성/보안 점검, 결함 조치	테스트 결과서	검수 대응
이행	13~14주차	운영환경 배포, 관리자 교육, 오픈 안정화 및 인수인계	운영매뉴얼	완료보고

일정관리 원칙

주간 기준선

WBS 기준 계획 대비 실적을 매주 비교하고 지연 항목은 원인과 조치계획을 확인 후 등록하겠습니다.

마일스톤 승인

요구사항, 디자인, 개발완료, 검수 등 주요 전환점마다 발주처 확인을 받습니다.

병렬 수행

콘텐츠 정비, 화면설계, 개발환경 구성을 병행해 전체 일정 여유를 확보합니다.

위험 조기관리

승인 지연, 자료 미비, 보안 점검 이슈는 위험관리대장으로 추적합니다.

2.3 추진체계

추진 조직

Key Message

PM을 중심으로 기획, 디자인, 개발, 품질, 보안 담당을 분리 배치하고 발주처와의 의사결정 라인을 단일화하여 책임 있는 수행체계를 운영합니다.

수행조직 구성

프로젝트 총괄 PM / 발주처 전담 커뮤니케이션

기획/분석 파트

요구사항 정의 및 RTM 관리
IA, 메뉴 구조, 콘텐츠 이관 기준 수립
보고자료 및 회의체 운영

UI/UX·디자인 파트

메인/서브 시안 제작
반응형 화면설계 및 접근성 검토
디자인 시스템 정리

개발 파트

Vue.js 프론트엔드 구현
관리자 CMS 및 API 개발
서버 배포 및 운영환경 연계

품질관리 파트

테스트 케이스 수립
통합/인수 테스트 수행
결함 조치 및 재검증

보안/인프라 파트

보안 취약점 점검 대응
개인정보 보호조치 적용
클라우드 운영환경 점검

운영지원 파트

관리자 교육 및 매뉴얼 작성
오픈 안정화 지원
하자보수 접수/조치 관리

역할과 책임

구분	핵심 책임	협력 방식
PM	일정, 범위, 품질, 위험 통합관리 및 발주처 보고	주간보고, 이슈회의, 승인사항 관리
PL	기능 구현 총괄, 개발 표준 준수, 코드 리뷰	일일 진척 점검, 개발 이슈 조정
QA	품질 기준 수립, 테스트 수행, 결함 재검증	결함관리대장, 검수 체크리스트 운영
보안	보안 요구사항 반영, 취약점 조치, 개인정보 보호 점검	보안 점검표, 조치 결과 보고

2.4 사업추진 방법론

애자일 기반 웹 구축 방법론 상세

방법론 개요

본 사업은 애자일(Agile) 방법론을 기반으로 하되, 공공기관 프로젝트 특성에 맞게 폭포수(Waterfall) 모델의 단계별 산출물 관리를 결합한 하이브리드 방식을 적용합니다.

단계별 수행 방법론

단계	핵심 활동	세부 수행 내용	적용 기법
1단계 분석	요구사항 정의 현황 분석	• RFP 42개 요구사항 상세 분석 • 기존 시스템 현황 파악 • 이해관계자 인터뷰 • 벤치마킹 분석	• 요구사항 추적 매트릭스(RTM) • 유스케이스 다이어그램 • 현행 시스템 분석서
2단계 설계	아키텍처 설계 UI/UX 설계	• 시스템 아키텍처 수립 • 데이터베이스 설계 • 화면 설계(와이어프레임) • 디자인 시안 제작	• ERD/클래스 다이어그램 • 화면설계서(Figma) • 프로토타입 검증
3단계 구현	프론트엔드 개발 백엔드 개발	• Vue.js 컴포넌트 개발 • Spring Boot API 개발 • 데이터베이스 구축 • 스프린트 단위 개발(2주)	• 스크럼(Scrum) 적용 • 일일 스탠드업 미팅 • 코드 리뷰 필수화
4단계 테스트	단위/통합 테스트 사용자 테스트	• 단위 테스트(Jest, JUnit) • 통합 테스트 • 웹 접근성 검증(KWCAG 2.2) • 사용자 수용 테스트(UAT)	• 테스트 케이스 기반 • 자동화 테스트 도구 • 품질 메트릭 측정
5단계 이행	시스템 이관 운영 전환	• 데이터 이관(기존→신규) • 운영 환경 배포 • 담당자 교육 • 안정화 지원	• 무중단 배포(Blue-Green) • 롤백 계획 수립 • 운영 매뉴얼 제공

스프린트 운영 체계

2주

스프린트 주기

Daily

스탠드업 미팅

매주

고객 리뷰

Git

버전 관리

2.4 사업추진 방법론

단계별 산출물 목록

분석/설계 단계 산출물

No	산출물명	주요 내용	작성시기	비고
1	착수보고서	프로젝트 개요, 추진체계, 일정, 범위 정의	1주차	필수
2	요구사항 정의서	RFP 42개 기능/비기능 요구사항 상세 정의	2주차	필수
3	요구사항 추적표(RTM)	요구사항별 설계-구현-테스트 추적 매트릭스	2주차	필수
4	현행 시스템 분석서	기존 홈페이지 현황, 콘텐츠 분석, 개선점 도출	2주차	권장
5	시스템 아키텍처 설계서	전체 시스템 구조, 기술 스택, 연동 방안	3주차	필수
6	데이터베이스 설계서	ERD, 테이블 정의서, 데이터 표준	3주차	필수
7	화면설계서(UI설계서)	와이어프레임, 화면 흐름도, 상세 UI 명세	4주차	필수
8	디자인 시안	메인/서브 페이지 시안(A/B안), 스타일 가이드	5주차	필수

구현/테스트 단계 산출물

No	산출물명	주요 내용	작성시기	비고
9	소스코드	프론트엔드(Vue.js), 백엔드(Spring Boot) 전체 코드	6~10주차	필수
10	단위테스트 결과서	컴포넌트별 테스트 케이스 및 결과	8~10주차	필수
11	통합테스트 결과서	시스템 통합 테스트 시나리오 및 결과	11주차	필수
12	웹 접근성 인증 결과	KWCAG 2.2 기준 AA등급 인증 보고서	11주차	필수
13	보안취약점 점검 결과	OWASP Top 10 기반 취약점 점검 및 조치 결과	11주차	필수
14	사용자 수용 테스트 결과	발주처 담당자 UAT 수행 및 승인 결과	12주차	필수

※ 산출물 품질 기준: 모든 필수 산출물은 PMO 및 발주처 검토를 거쳐 승인 후 다음 단계 진행

2.4 사업추진 방법론

이행/운영 단계 산출물 및 품질관리

이행/운영 단계 산출물

No	산출물명	주요 내용	작성시기	비고
15	데이터 이관 결과서	기존 콘텐츠/데이터 이관 내역 및 검증 결과	12주차	필수
16	시스템 운영 매뉴얼	관리자용 CMS 사용법, 시스템 운영 가이드	13주차	필수
17	사용자 매뉴얼	일반 사용자/담당자용 이용 가이드	13주차	필수
18	교육 수행 결과서	담당자 교육 일정, 참석자, 교육 내용	13주차	필수
19	완료보고서	사업 수행 결과 종합, 성과 분석	14주차	필수
20	유지보수 계획서	하자보수 및 유지관리 체계, 연락처	14주차	필수

산출물 품질관리 체계

1

작성 표준화

템플릿 기반 작성
표준 용어 사용
버전 관리 체계

2

내부 검토

PM 1차 검토
QA 담당 품질 검증
체크리스트 점검

3

고객 검토

발주처 담당자 검토
피드백 반영
수정 이력 관리

4

최종 승인

공식 승인 획득
형상 등록
이력 보관

산출물 현황 요약

20

총 산출물 수

15

필수 산출물

5

권장 산출물

검증

품질 검증 기준