프로그램·문화 달력·권한별 화면이 PC와 모바일에서 이어지는 모습을 확인합니다.
스토리보드란?
스토리보드는 완성될 웹사이트의 화면과 사용자 흐름을 실제 모습에 가깝게 보여주는 문서입니다. 동적 기능과 반응형 배치를 함께 검수합니다.
마지막까지 보시면 시안이 실제로 어떻게 동작하고 인계되는지 확인할 수 있습니다.
방문자가 프로그램을 찾고 상세 회차를 살핀 뒤 달력에서 날짜별 일정을 확인합니다.
카테고리 탐색
회차 확인
일정 행 추가
날짜 선택
해당 일정 확인
제안서의 공통 셸과 카테고리형 게시판 전략을 PC 화면으로 보여줍니다. 데모 1단계에서 필터가 동작합니다.
카테고리 선택 시 카드 목록과 결과 수가 함께 바뀝니다. 썸네일·상태 뱃지는 동일한 카드 구조를 재사용합니다.
충주문화회관 대공연장
2026.10.12 ~ 2026.10.26
회차별 80명
프로그램 신청일정표와 신청 가능 상태, 동적 행 추가를 한 화면에서 확인합니다. 데모 2단계에서 행을 추가합니다.
회차 데이터 행을 추가·삭제하는 이벤트를 분리하고, 백엔드 데이터 연결 지점을 주석으로 인계합니다.
전시관 · 11:00~18:00
접수중 →소극장 · 19:00
예정월별 문화 달력과 선택일의 일정 목록을 모바일 한 화면에 연결합니다. 데모 3단계에서 날짜를 선택합니다.
월 이동·날짜 선택 상태와 목록 필터를 같은 날짜 키로 동기화합니다. 일정이 없는 날의 빈 상태도 구분합니다.
회원은 신청 상태를, 중간관리자는 출석과 운영 보고서를 처리합니다.
계정 입력
신청 내역
뱃지 확인
출석 전환
행 추가·저장
문화 프로그램 신청 내역을 이어서 확인하세요.
일반 로그인과 소셜 로그인 진입, 회원가입 링크를 모바일 입력 구조로 보여줍니다.
입력 완료와 오류 상태를 구분합니다. 소셜 인증 자체는 백엔드 연동 범위로 남기고 화면 이벤트를 인계합니다.
김문화 님의 프로그램 신청 현황
10.12 (월) 14:00 · 문화회관
● 접수 완료10.18 (일) 11:00 · 전시관
● 확인 중08.20 (목) 19:00 · 소극장
● 종료사용자가 신청 내역 탭과 상태 뱃지를 읽는 화면입니다. 데모 4단계에서 상태를 확인합니다.
탭 전환과 상태별 라벨을 분리하여 신청 데이터 연동 시에도 같은 화면 컴포넌트를 재사용합니다.
충주 예술의 빛 · 11:00 회차
진행 내용 가을 전시 해설 운영
참여 인원 28명
특이 사항 현장 접수 3명
중간관리자의 출석 토글과 보고서 동적 폼을 한 화면에 배치합니다. 데모 4단계에서 역할별 차이를 확인합니다.
출석 상태 변경과 보고 항목 행 추가를 동작시키고 저장 데이터 접점을 주석으로 표시합니다.