촬영 일정부터 채널 게시까지, 콘텐츠팀의 네 단계 업무를 한 화면에서 관리하고 AI·자동화가 도울 수 있는 지점을 함께 보여주는 내부용 웹 목업입니다.
과제명
콘텐츠 제작 운영 관리 목업 사이트 제작
작성자
구본세
작성일
2026년 9월 7일
데모 주소
https://stayflow.trendkit.app
가상 숙소 데이터 · 서버·DB·로그인 없음 · 입력한 내용은 사용자의 브라우저에만 저장됩니다.
이 문서에 대하여
이 설명서는 목업 사이트를 처음 여는 분이 5분 안에 전체 흐름을 파악하고, 각 화면에서 무엇을 할 수 있는지 따라 해 볼 수 있도록 만들었습니다.
제작 의도 — 콘텐츠팀 업무를 어떻게 이해했는가
화면 구성 한눈에 보기
사용 방법 · 대시보드와 전체 콘텐츠 보드
사용 방법 · 01 촬영 일정 관리 / 02 촬영 사진 업로드
사용 방법 · 03 보정·검수 / 수정사항
사용 방법 · 04 채널별 게시 / 상세 화면 / 데이터 옮기기
AX 관점의 개선 — AI가 어디에서 도움이 되는가
기술 구성, 실행 방법, 한계와 다음 단계
1제작 의도
콘텐츠팀은 숙소·공간 콘텐츠 한 건을 만들 때 촬영 일정 관리 → 촬영 사진 업로드 → 사진 보정 및 검수 → 채널별 콘텐츠 업로드의 네 단계를 거칩니다. 이 흐름을 들여다보면서 실제로 시간을 잡아먹는 지점은 각 단계의 작업 자체보다 단계와 단계 사이라고 판단했습니다. 일정은 캘린더에, 사진은 드라이브에, 검수 의견은 메신저에, 게시 여부는 각 채널에 따로 흩어져 있어서 "이 콘텐츠가 지금 어디까지 왔고 다음에 누가 뭘 해야 하는지"를 사람이 기억으로 이어 붙여야 합니다.
그래서 이 목업은 세 가지 원칙으로 설계했습니다.
콘텐츠 한 건 = 카드 한 장
숙소 하나가 하나의 카드가 되어 여섯 단계(촬영 예정 · 사진 업로드 · 보정 중 · 검수 대기 · 채널 게시 · 완료)를 순서대로 통과합니다. 카드를 열면 일정, 사진, 검수, 채널 게시가 탭으로 이어져 있습니다.
다음 할 일이 버튼 하나로 보이게
모든 화면에서 카드마다 "촬영 일정 관리", "사진 업로드", "사진 검수·승인"처럼 지금 단계의 행동이 버튼으로 붙어 있습니다. 넘김 조건(필수 컷 확인, 수정 요청 해소, 채널 게시 완료)은 시스템이 강제합니다.
AI는 제안, 판단은 사람
각 단계에 AI·자동화가 먼저 처리하거나 제안할 수 있는 항목을 함께 표시하되, 승인·수정 요청·게시 확정은 항상 담당자가 합니다.
서버 없는 목업
더미 데이터 10건으로 시작하고, 사용자가 바꾼 상태는 브라우저에만 저장됩니다. 실제 서버·DB·로그인 없이 흐름과 화면을 검증하는 데 집중했습니다.
화면 구성 한눈에 보기 OVERVIEW
왼쪽 사이드바가 화면의 목차입니다. 위쪽 세 개는 전체를 보는 화면, 아래 네 개는 단계별 실무 화면이고, 숫자는 그 화면에서 처리할 콘텐츠 수입니다.
그림 1대시보드. 상단 타일 4개, AX ASSIST 안내, AI·자동화 작업량, 제작 파이프라인, 오늘의 촬영, 우선 확인할 콘텐츠 순으로 배치되어 있습니다.
메뉴
역할
주 사용자
대시보드
오늘 상황 요약. 진행 중 · 이번 주 마감 · 마감 지연 · 완료 타일과 AI가 지금 도울 수 있는 작업량
팀장 · 운영
전체 콘텐츠 보드
6단계 칸반. 어느 단계에 콘텐츠가 몰려 있는지, 병목이 어디인지 확인
팀 전체
수정사항
사진별 수정 요청이 걸려 있는 콘텐츠만 모아 재검수
보정 담당
01 촬영 일정 관리
촬영일 · 시간 · 담당자 · 마감 편집, 촬영 완료 처리
촬영 담당
02 촬영 사진 업로드
원본 사진 추가, 공간 분류, 필수 컷 확인
촬영 담당
03 보정·검수
보정 전후 비교, 사진별 수정 요청, AI 사전 검수, 승인
보정 · 검수 담당
04 채널별 게시
자사 웹 · 인스타그램 · 네이버 블로그 게시 완료 표시, 게시 URL 저장, 판매 채널 검수
운영 담당
데모 기준일 화면 오른쪽 위의 "2026년 9월 4일, 금요일"이 목업의 오늘입니다. 마감 지연, 오늘의 촬영, 이번 주 마감은 모두 이 날짜를 기준으로 계산됩니다.
사용 방법 대시보드 · 전체 콘텐츠 보드
A대시보드에서 하루 시작하기
상단 타일 4개로 전체 상황을 봅니다. 진행 중(완료 제외), 이번 주 마감, 마감 지연, 완료 건수이며, 타일을 누르면 그 조건으로 보드가 열립니다.
AX ASSIST 띠는 지금 가장 먼저 볼 일을 한 줄로 알려 줍니다. "검수 확인하기"를 누르면 검수 대기 콘텐츠로 바로 이동합니다.
AI·자동화가 지금 처리할 수 있는 일은 단계별로 AI가 미리 처리하거나 제안할 수 있는 작업량입니다. 각 항목을 누르면 해당 워크스페이스로 이동합니다.
오늘의 촬영과 우선 확인할 콘텐츠에서 카드를 누르면 바로 그 콘텐츠의 작업 화면이 열립니다.
그림 2AI·자동화 작업량. 동선 묶기 제안, 자동 분류 대기, AI 사전 검수 대상, 캡션 초안 생성 가능 건수를 실제 데이터에서 계산합니다.
B전체 콘텐츠 보드에서 병목 찾기
여섯 컬럼에 카드가 단계별로 놓입니다. 카드에는 담당자, 마감일, 사진 수, 그리고 지금 단계의 작업 버튼이 있습니다.
상단 타일이나 오른쪽 드롭다운(모든 단계 · 진행 중만 · 마감 지연만 · 이번 주 마감 · 단계별)으로 조건을 겁니다. 컬럼은 그대로 두고 카드만 걸러지므로 어느 단계에서 지연이 생겼는지 바로 보입니다.
검색창에 숙소명, 지역, 담당자를 입력해 찾을 수 있습니다. "필터 해제 · 전체 보기"로 되돌립니다.
촬영 예정과 보정 중 카드에는 "촬영 완료 → 업로드", "보정 완료 → 검수 요청" 바로가기가 있어 상세 화면을 열지 않고도 다음 단계로 넘길 수 있습니다.
그림 3"마감 지연" 타일을 누른 상태. 검수 대기 컬럼에 지연된 콘텐츠 1건만 남아 병목 위치가 드러납니다.
사용 방법 01 촬영 일정 관리 · 02 촬영 사진 업로드
01촬영 일정 관리
촬영 예정 콘텐츠가 촬영일·시간 순으로 표가 됩니다. 오른쪽에서 촬영 기간과 담당자로 걸러 볼 수 있습니다.
행의 "일정 확인 · 수정"을 누르면 상세 화면이 열립니다. 촬영일, 시간, 담당자, 최종 마감일을 고치고 일정 저장을 누릅니다. 마감일이 촬영일보다 앞서면 저장되지 않습니다.
촬영이 끝났으면 촬영 완료 · 사진 업로드로 이동을 누릅니다. 카드가 다음 단계로 넘어가고 작업 기록에 남습니다.
그림 4일정 상세. 촬영 일정 편집, 촬영 브리프, 촬영 완료 버튼, 작업 기록이 한 화면에 있습니다.
02촬영 사진 업로드
업로드 대기 콘텐츠를 왼쪽 목록에서 고릅니다. 점선 상자를 누르거나 파일을 끌어다 놓아 사진을 추가합니다(PNG · JPEG · WebP). 큰 사진은 긴 변 1600px로 자동 축소되어 브라우저에만 저장됩니다.
사진마다 객실 · 욕실 · 외관 · 편의시설 중 하나로 분류합니다. 여러 장을 체크한 뒤 선택 막대의 항목 일괄 지정으로 한 번에 분류할 수도 있습니다. 분류 결과가 아래 촬영 체크리스트에 자동으로 반영되고, 빠진 항목은 누락 후보로 표시됩니다.
필수 컷 네 종이 모두 확인되어야 보정 시작으로 넘어갈 수 있습니다. 빠진 채 누르면 무엇이 빠졌는지 알려 줍니다.
잘못 올린 사진은 체크해서 선택 삭제할 수 있습니다.
그림 5업로드 상자. 올린 사진은 이 브라우저에만 저장됩니다. 이 단계의 AI 인사이트는 공간 자동 분류 제안, 필수 컷 누락 감지, 중복·흔들림 컷 사전 필터이며 분류 UI와 누락 감지는 실제로 동작합니다.
사용 방법 03 보정·검수 · 수정사항
03보정·검수
그림 6보정·검수 워크스페이스. 왼쪽 큐에서 전체 · 보정 중 · 검수 대기 · 수정 요청으로 걸러 보고, 오른쪽에서 선택한 콘텐츠를 검수합니다. 상단 띠는 이 단계의 AX 시나리오입니다.
왼쪽 보정·검수 대상에서 콘텐츠를 고릅니다. 마감 지연 표시가 있는 것부터 보는 것을 권합니다.
사진별 수정·재검수의 사진 타일을 누르면 그 사진의 메모 입력창이 열리고, 아래 보정 전·후 비교 영역에 슬라이더가 나타납니다. 좌우로 끌어 원본과 보정본을 비교하고, 밝기·대비를 미리보기로 조절해 볼 수 있습니다.
고칠 사진이 있으면 메모를 남기고 "수정 요청 저장"을 누릅니다. 타일에 "재검수 필요" 표시가 붙고, 콘텐츠가 보정 중으로 돌아가며 채널 게시 표시는 초기화됩니다.
AI 사전 검수의 "검사 실행"을 누르면 흐림 · 노출 · 수평 검사를 시뮬레이션해 주의 항목만 보여 줍니다. 최종 판단은 검수자가 합니다.
문제가 없으면 검수 승인 · 게시 준비, 전체를 다시 보정해야 하면 검수 의견을 적고 수정 요청을 누릅니다. 사진별 수정 요청이 남아 있으면 승인할 수 없습니다.
그림 7AX 인사이트. 자동 · 제안 · 확인 세 종류로 구분해 표시합니다.그림 8AI 사전 검수 결과. 주의 항목과 공간 태그 제안이 표시됩니다.
+수정사항 화면
사진별 수정 요청이 하나라도 걸려 있는 콘텐츠만 모아 보여 줍니다. 보정 담당자는 여기서 요청 메모를 확인하고 사진을 교체한 뒤 재검수 완료를 누릅니다. 모든 요청이 해소되면 목록에서 빠지고, 콘텐츠는 다시 검수 요청을 보낼 수 있는 상태가 됩니다. 사이드바의 숫자가 남은 수정 요청 건수입니다.
사용 방법 04 채널별 게시 · 상세 화면 · 데이터 옮기기
04채널별 게시
검수가 승인된 콘텐츠가 왼쪽 게시 대상에 나타납니다. 상단 띠에 채널별 규격(자사 웹 16:9 · 인스타그램 4:5 · 네이버 블로그 3:2)과 캡션 초안 제안이 표시됩니다.
채널마다 실제로 게시한 뒤 게시 완료 표시를 누릅니다. 세 채널이 모두 완료되면 콘텐츠가 자동으로 완료 단계로 이동합니다.
게시 URL을 저장해 두면 나중에 사진을 수정했을 때 해당 채널에 "재확인 필요" 표시가 붙어, 완료 표시와 실제 게시물이 어긋나는 것을 막습니다.
판매 채널 등록본 검수에서는 상품 URL을 넣고 AI 사전 검수 예시를 실행한 뒤, 상품명·가격·사진·표현 네 항목을 사람이 확인하고 승인합니다.
그림 9채널 항목. 채널마다 규격 안내, 게시 URL 입력, 완료 표시 버튼이 있습니다.
+상세 화면과 되돌리기
어느 화면에서든 카드 제목을 누르면 오른쪽에서 상세 화면이 열립니다. 위쪽 진행 표시로 현재 단계를 확인하고, 촬영·정보 / 사진·검수 / 채널 게시 세 탭으로 모든 작업을 한곳에서 할 수 있습니다. 잘못 넘긴 경우 이전 단계로 되돌리기에 사유를 적고 되돌릴 수 있으며, 모든 변경은 작업 기록에 남습니다.
그림 10상세 화면. 단계 진행 표시, 탭, 되돌리기, 작업 기록.
+작업 데이터 옮기기
입력한 내용은 이 브라우저에만 저장되므로, 다른 PC나 브라우저로 옮기려면 데이터 내보내기로 JSON 파일을 받고 다른 쪽에서 데이터 불러오기로 선택합니다. 사진, 진행 상태, 메모, 게시 URL이 모두 포함됩니다. 처음 상태로 되돌리려면 시크릿 창에서 열거나 브라우저 저장 데이터를 지우면 됩니다.
AX 관점의 개선 AI가 어디에서 도움이 되는가
설계 원칙은 하나입니다. AI는 확인 대상을 제안하고, 최종 판단은 담당자가 합니다. 사람을 대체하는 것이 아니라 사람이 봐야 할 것을 줄이는 방향으로 잡았고, 화면의 AI 항목은 모두 자동 · 제안 · 확인 세 종류로 구분해 표시했습니다.
01 촬영 일정에서
같은 날 같은 지역 촬영을 묶어 동선을 제안하고, 한 담당자에게 촬영이 겹치면 경고합니다. 숙소 유형별 촬영 체크리스트를 자동으로 만들고 촬영 전날 확인 메시지를 보냅니다. 촬영 1건당 이동 시간과 재촬영 건수가 줄어드는지로 검증합니다.
02 사진 업로드에서
이미지 인식으로 객실 · 욕실 · 외관 · 편의시설을 분류해 제안하고, 체크리스트와 대조해 누락 컷을 바로 알려 줍니다. 유사 컷은 묶어 대표 1장을 제안하고 흔들림·과노출 컷은 보정 대상에서 제외 후보로 표시합니다.
03 보정·검수에서
이전에 승인된 같은 유형 콘텐츠의 보정값으로 1차 보정 프리셋을 적용해 톤을 맞추고, 흐림 · 노출 · 수평 같은 기술 결함을 사전 검수해 검수자는 주의 항목만 봅니다. 사진별 수정 메모는 보정 지시서로 자동 정리되어 보정 담당자에게 전달됩니다.
04 채널 게시에서
승인 사진을 채널별 규격으로 자동 변환하고 숙소 정보로 캡션 · 해시태그 · 본문 초안을 만듭니다. 채널 등록본과 승인 원본을 대조해 누락·중복을 찾고, 게시 URL의 접속 여부와 대표 이미지 일치를 주기적으로 점검합니다. 완료 뒤에는 채널별 성과를 모아 재촬영 시점을 제안합니다.
→도입한다면 세 단계로
단계
내용
이 목업에서
1단계 · 규칙 기반
동선 묶기, 담당자 충돌, 필수 컷 대조, 게시 URL 재확인처럼 이미 있는 데이터만으로 되는 자동화
실제 동작
2단계 · 비전·언어 모델
공간 분류, 결함 검출, 보정 프리셋, 캡션·본문 초안 생성
고정 예시 · 시뮬레이션
3단계 · 채널 연동
채널 API 게시, 게시물 상태 점검, 성과 수집. 사내 인증과 채널 계정 연동 필요
범위 밖
효과 측정 효과 수치는 아직 측정하지 않았습니다. 도입 시에는 다음 쪽 표의 "검증할 지표"를 파일럿 기간 동안 재어 보고 확장 여부를 정하는 것을 제안합니다.
AX 개선 아이디어 상세 업무 문제 · 개선 방식 · 목업 범위 · 지표
앱 안의 "AX 개선 아이디어 · 구현 범위 보기" 패널과 같은 내용입니다. 목업 범위 열이 이번 과제에서 실제로 구현한 부분과 설명으로만 반영한 부분을 구분합니다.
더미 숙소 10건. 변경 상태는 브라우저 localStorage(stayflow-v1)에만 저장
상태 전환
app/projects.ts의 transition() 한 곳에서 단계 전환 규칙과 조건을 강제
테스트
Node 테스트 12개 — 상태 전환, 백업 호환, 사진 검수, AX 집계
배포
정적 파일(dist/). Vercel 또는 아무 정적 호스팅에 올리면 됩니다
로컬에서 실행하기 (Node.js 22.13 이상)
npm ci # 의존성 설치
npm run dev # 개발 서버 → http://localhost:5173
npm test # 테스트
npm run build # dist/ 생성 (정적 호스팅용)
→5분 데모 순서
대시보드에서 타일과 AI 작업량을 보고, 마감 지연 타일을 눌러 보드가 걸러지는 것을 확인합니다.
01 촬영 일정 관리에서 "서촌의 오후"를 열어 일정을 바꾸고 촬영 완료로 넘깁니다.
02 촬영 사진 업로드에서 "모먼트 부산"에 사진 몇 장을 올리고 분류합니다. 필수 컷이 빠지면 넘어가지 못하는 것을 확인합니다.
03 보정·검수에서 "스테이 온유"의 비교 슬라이더와 검사 실행을 눌러 보고, 사진 하나에 수정 요청을 남겨 수정사항 메뉴에 모이는 것을 확인합니다.
04 채널별 게시에서 "파도, 머무르다"의 채널 세 개를 완료 처리해 완료 컬럼으로 이동시킵니다.
!한계와 다음 단계
이 목업은 흐름과 화면을 검증하기 위한 것이라 데이터가 브라우저에만 남고 여러 사람 사이에 공유되지 않습니다. 실제로 쓰려면 사내 인증과 공용 저장소(파일 서버 또는 오브젝트 스토리지)를 붙이는 것이 첫 작업이고, 그다음 1단계 규칙 기반 자동화를 그대로 옮긴 뒤, 2단계 모델 연동은 공간 분류나 결함 검출 중 하나를 골라 파일럿으로 지표를 재면서 넓혀 가는 순서를 제안합니다.
