SYSTEM BLUEPRINT

읽는 경험부터
운영까지 하나로

콘텐츠 미디어 리뉴얼 스토리보드

스토리보드란?

주요 화면과 사용자의 행동을 미리 확인하는 문서입니다. 제안용 예시 화면으로 구현 방향을 설명합니다.

  1. 독자가 기사를 발견하고 광고주가 문의하기까지
  2. 마케터 편집부터 검색 이전 검수와 인수인계까지

마지막까지 보시면 화면과 운영이 연결되는 방식을 확인할 수 있습니다.

독자·광고주 시나리오

발견에서 문의까지

기존 콘텐츠와 운영 자산을 유지하며 필요한 경험을 연결합니다.

탐색

관심 주제 선택

읽기

기사와 작성자 확인

신뢰

에디터 소개 확인

비즈니스

광고 유형 확인

문의

필수 정보 제출

독자·광고주 | 화면 01

매거진 탐색

제안용 화면 · 매거진 탐색
오늘의 여가

이번 주, 조금 다른 여가

계절의 변화와 일상의 발견을 담은 매거진

전체 선택됨 여행 선택 가능 공간 선택 가능
원본 사진 영역성수 골목 산책

도시 산책

골목에서 찾은
주말의 속도

익숙한 길에서 만난 새로운 공간 세 곳.

객원 에디터윤서 · 9월 11일
기사 읽기

새로 나온 이야기

오늘의 편집 추천

골목에서 찾은 주말의 속도공간 · 6분
가볍게 떠나는 숲 산책여행 · 4분
취향이 머무는 작은 서점문화 · 7분
제안용 화면 · 기사와 입력 정보는 예시입니다. 실제 접수·게시 없음

[화면 개요 및 목적]

관심 주제에서 기사로 이어지는 매거진 경험을 설계합니다. 데모 1단계에서 카테고리를 선택하고 기사를 엽니다.

[핵심 기능 로직]

컴퓨터와 모바일에서 같은 콘텐츠를 읽도록 반응형 구성요소를 사용합니다.

  • 반응형 콘텐츠 구성
    React · CSS Grid
독자·광고주 | 화면 02

기사와 에디터

제안용 화면 · 기사와 에디터
오늘의 여가

골목에서 찾은 주말의 속도

공간 · 9월 11일 · 읽는 시간 6분

현재 읽는 기사
원본 사진 영역가을의 성수 골목

큰길에서 한 블록만 벗어나도 풍경은 달라집니다. 오래된 건물과 작은 가게 사이를 천천히 걸으며 이번 주말의 목적지를 찾아보세요.

공유하기  저장하기

이 글을 쓴 에디터

객원 에디터 소개

이름윤서
관심 분야공간과 도시 산책
최근 글작은 서점의 하루

걷고 발견한 공간을 기록합니다.

다음 추천 기사

취향이 머무는 작은 서점

관련 주제공간 · 산책 · 취향
기사 정보제목 · 작성자 · 발행일

검색용 기사 데이터와 본문 정보를 함께 관리합니다.

제안용 화면 · 기사와 입력 정보는 예시입니다. 실제 접수·게시 없음

[화면 개요 및 목적]

읽기 중심 본문과 객원 에디터 소개로 콘텐츠 신뢰를 연결합니다. 데모 2단계에서 기사와 작성자를 확인합니다.

[핵심 기능 로직]

제목·작성자·발행일을 본문과 검색용 기사 구조화 데이터에 일치시킵니다.

  • 기사 정보 일관성
    Article · JSON-LD
독자·광고주 | 화면 03

광고 소개와 문의

제안용 화면 · 광고 소개와 문의
오늘의 여가

독자의 일상에 브랜드를 연결하세요

비즈니스 소개 · 상품 구성과 단가는 협의 후 확정

함께 만드는 이야기

목적에 맞는 광고 유형을 선택하세요

브랜디드 콘텐츠에디터 기획 기사
디스플레이 광고메인 배너 노출
콘텐츠 제휴기획전 공동 제작
콘텐츠 제휴 선택됨
원본 사진 영역광고 콘텐츠 예시

제휴 문의

산책생활
김가을
partner@example.com
가을 공간 기획전 콘텐츠 제휴를 논의하고 싶습니다.

개인정보 수집·이용 동의

문의 접수하기
필수값 확인 필요
제안용 화면 · 기사와 입력 정보는 예시입니다. 실제 접수·게시 없음

[화면 개요 및 목적]

광고 유형 이해와 문의 작성을 한 흐름으로 묶습니다. 데모 3단계의 접수 결과는 실제 전송 없는 시연입니다.

[핵심 기능 로직]

필수값과 동의를 검사하고 중복 제출을 방지합니다. 실제 구축 시 알림 성공·실패를 기록합니다.

  • 문의 누락 확인
    Node.js · 폼 검증
운영·검수 시나리오

수정부터 인수인계까지

기존 콘텐츠와 운영 자산을 유지하며 필요한 경험을 연결합니다.

분석

기존 관리자 확인

편집

배너와 문구 수정

미리보기

방문자 화면 확인

검수

주소와 기사 검사

인계

배포와 자료 전달

운영·검수 | 화면 01

마케터 배너 편집

제안용 화면 · 마케터 배너 편집
오늘의 여가

배너와 문구를 직접 편집합니다

기존 관리자 필드 확장 제안 · 최종 항목은 착수 분석 후 합의

편집 정보

가을을 걷는 방법
도시에서 발견한 느린 주말
/magazine/autumn-walk
미게시 변경
미리보기 갱신 

방문자 화면 미리보기

원본 사진 영역가을 산책 대표 이미지

가을을 걷는 방법

도시에서 발견한 느린 주말

매거진 보기
기존 배너 게시 중
검토 범위컴퓨터 · 모바일
제안용 화면 · 기사와 입력 정보는 예시입니다. 실제 접수·게시 없음

[화면 개요 및 목적]

기존 관리자에 필요한 필드만 확장합니다. 데모 4단계에서 문구를 바꾸고 방문자 화면을 미리 확인합니다.

[핵심 기능 로직]

미게시 변경과 현재 게시본을 구분합니다. 구체적 편집 항목과 연동 방식은 기존 소스 분석 후 확정합니다.

  • 기존 관리자 연동
    TypeScript · 기존 CMS
운영·검수 | 화면 02

검색 이전 검수

제안용 화면 · 검색 이전 검수
오늘의 여가

검색 유입을 지키는 이전 검수

개발 검수 자료 예시 · 실제 운영 사이트의 점검 결과가 아닙니다

기존 주소 → 새 주소

/post/old-walk
/magazine/autumn-walk
확인 완료
/post/old-book
/magazine/bookstore
확인 완료
/category/old-space
/magazine/space
검토 대기

기사 구조화 데이터

필수 정보제목 · 작성자 · 발행일
검사 방식본문 정보와 일치 확인

배포 전 확인

주소 이동301 응답과 도착 화면 확인
되돌림배포 전 백업 준비
제안용 화면 · 기사와 입력 정보는 예시입니다. 실제 접수·게시 없음

[화면 개요 및 목적]

새 화면을 적용해도 기존 주소의 연결을 보호합니다. 실제 운영 결과가 아닌 개발 검수 자료 예시입니다.

[핵심 기능 로직]

주소 대응표로 301 이동과 도착 화면을 확인하고 기사 구조화 데이터를 검사합니다. 배포 전 백업과 되돌림을 준비합니다.

  • 검색 이전 검증
    301 Redirect · Article
운영·검수 | 화면 03

납품과 인수인계

제안용 화면 · 납품과 인수인계
오늘의 여가

운영할 수 있는 상태로 인계합니다

납품 계획 예시 · 검수 기준과 문서 형식은 착수 시 확정

디자인 원본화면 시안과 구성요소준비 대상
소스코드 일체설치와 실행 안내 포함준비 대상
요구사항 정의서요구별 구현·검수 대응준비 대상
완료 보고서정부지원사업 증빙 형식합의 필요

기존 서버 배포

배포 순서백업 → 업데이트 → 확인
검수 기준주요 화면과 문의 흐름

담당자 인수인계

운영 안내배너 수정과 게시 방법
자료 전달원본 · 코드 · 검수 기록
제안용 화면 · 기사와 입력 정보는 예시입니다. 실제 접수·게시 없음

[화면 개요 및 목적]

디자인 원본·소스코드·정부지원사업 증빙을 검수 기준과 함께 전달하는 납품 계획입니다.

[핵심 기능 로직]

기존 서버 업데이트 후 주요 흐름을 확인합니다. 내부 담당자가 수정과 게시를 수행하도록 운영 안내를 인계합니다.

  • 검수 가능한 인계
    GitHub · 배포 기록
시나리오

| 화면 01

[화면 개요 및 목적]

[핵심 기능 로직]

    | 화면 02

    [화면 개요 및 목적]

    [핵심 기능 로직]

      | 화면 03

      [화면 개요 및 목적]

      [핵심 기능 로직]