PROPOSAL

완성된 시안을
실제로 움직이는 웹으로

문화 달력·프로그램·권한별 화면을 PC와 모바일에서 검수하고 백엔드 연동 가능한 원본으로 인계합니다.

01. Analysis & Strategy

시안 구현의 세 가지 성공 기준

클라이언트 핵심 요구사항

PC·모바일 시안 일치

GNB·푸터와 그리드를 화면 폭별로 검수해 Figma 의도를 유지합니다.

동적 화면의 실제 동작

문화 달력·프로그램 필터·일정 행 추가·출석 토글을 클릭 가능한 상태로 만듭니다.

연동 가능한 원본 인계

HTML/CSS/JS·이미지 에셋과 데이터 연결 지점의 주석을 함께 전달합니다.

핵심 역제안

반응형 공통 셸

GNB·푸터·Breakpoint·그리드를 먼저 고정해 페이지 사이 일관성을 확보합니다.

권한별 마이페이지

사용자 신청 상태와 중간관리자 출석·보고서 입력을 각각 검수합니다.

브라우저별 검수

주요 브라우저와 모바일 폭에서 배치·입력·스크립트 동작을 확인합니다.

02. Strategic Deep-Dive

동적 UI를 인계 가능한 상태로

문화 달력

월 전환과 날짜 선택을 구현하고, 선택한 날짜의 공연·전시 일정 목록이 함께 바뀌도록 구성합니다.

Expected Effect

날짜와 일정의 연결을 직접 검수

프로그램 탐색

카테고리 필터와 썸네일 그리드, 상세 일정표와 등록 행 추가를 한 흐름으로 연결합니다.

Expected Effect

목록부터 등록까지 상태 확인

권한별 화면

사용자 신청 내역·상태 뱃지와 중간관리자 출석 토글·보고서 폼을 구분해 구현합니다.

Expected Effect

역할별 화면과 입력 상태 명확화

03. Implementation

작업과 인계를 단순하게 하는 기술

시안과 같은 화면

HTML + CSS Figma 화면을 시맨틱 구조와 Grid/Flex로 구현

화면 폭에 대응

반응형 CSS Breakpoint별 GNB·그리드·입력 영역 검수

달력과 필터 동작

JavaScript/jQuery 날짜·카테고리 선택과 목록 동기화

입력 상태 관리

동적 폼 행 추가·출석 토글·상태 뱃지 동작 구현

접근성과 호환성

브라우저 검수 키보드 입력과 주요 브라우저 표시 확인

바로 쓰는 원본

소스 + 주석 백엔드 데이터 연결 위치와 에셋 정리
04. Sequence

프로젝트의 성공을 완성하는
정교한 8단계 업무 프로세스

01

미팅

요구사항 청취 및 비즈니스 목표 상세 협의

02

계약 진행

상세 과업 범위 확정 및 공식 계약 체결

03

요구사항 재분석

개발 관점에서의 기술적 타당성 도출

04

기획/디자인

UI/UX 설계 및 시스템 아키텍처 상세 정의

05

클라이언트 컨펌

확정된 기획안에 대한 최종 리뷰 및 승인

06

개발

공유된 일정으로 투명한 집중 개발

07

테스트

단위/통합 테스트 및 버그 수정, 안정성 검증

08

배포

최종 운영 환경 배포 및 안정화 지원

05. Timeline

검수하며 완성하는 수행 순서

Step 01

시안·상태 확인

시안과 반응형 검수 기준을 확정합니다.

Step 02

공통 UI 구현

GNB·푸터·반응형 그리드와 로그인 폼을 만듭니다.

Step 03

동적 화면 구현

프로그램·문화 달력·권한별 마이페이지를 연결합니다.

Step 04

검수와 인계

브라우저별 확인 후 HTML/CSS/JS·에셋·주석을 전달합니다.

06. Communication & Trust

외주의 불안함을 확신으로,
가장 투명한 파트너십을 약속합니다.

'답답함'이 없는 커뮤니케이션

클라이언트가 가장 힘들어하는 '소통의 부재'와 '진척도 확인 불가능'을 해결하기 위해, 모든 협업 과정을 시스템화했습니다.

진행 상황 실시간 공유
기획서부터 소스코드까지 일정과 이슈를 함께 봄
항시 연결되는 소통 채널
지연 없는 피드백과 투명한 이슈 관리
정기 데모 세션
상상 속의 결과물이 아닌, 돌아가는 시스템을 매주 확인

"우리는 단순한 외주사가 아닙니다.
성공을 위해 커뮤니케이션의 중요성을
아는 팀입니다."

저희 제안이 마음에 드셨다면,
미팅에서 뵙기를 기대하겠습니다.

Thank You

Your Vision,
Our Mission.