PROPOSAL · WISHKET 159496

스포츠 레슨 플랫폼 홍보 사이트 리뉴얼 기획·설계서

Components MM · 2026년 11월 6일 · 시안과 함께 보시도록 만든 문서입니다

방문자가 서비스를 3분 안에 이해하고 앱으로 넘어가게 하는 홍보 사이트와, 개발자 없이도 계속 다시 쓰는 이벤트 페이지 틀을 30일 안에 만들어 드리는 계획입니다. 메뉴별 페이지 9개를 실제로 동작하는 시안으로 먼저 만들어 두었습니다.

제안 금액500만 원VAT 별도 · 항목별 내역은 12장
기간30일계약 다음 날 시작 · 검수 포함
개발 방식자체 개발정적 사이트 + 이벤트 관리 화면
예상 운영비월 1천 원 안팎AWS 기준 · 도메인 별도

1. 한눈에 보기

2. 공고 분석

요구 과업

구분공고 내용이 계획에서 하는 일
기획자료 검토 후 페이지 구성·작업 계획 제안, 메뉴·버튼 위치와 이동 흐름 정리현행 사이트 진단, 사이트맵, 페이지별 섹션 설계, 앱으로 넘어가는 버튼 위치 설계(5·6장)
디자인제공 문구·이미지·브랜드 자료를 반영한 일관된 디자인디자인 시스템(색·글꼴·간격·폼 규격)을 먼저 정하고 모든 페이지에 같은 규칙 적용(8장)
사이트 리뉴얼서비스 소개, 주요 콘텐츠, 메뉴, 관련 페이지 링크, PC·모바일 반응형메인 + 서브 6종, 화면 폭 7종(360~1920px) 점검
이벤트 페이지목록·상세, 공통 화면 구조, 이벤트별 콘텐츠 교체상태가 날짜로 자동 계산되는 목록, 블록형 상세 틀, 비개발자용 관리 화면(7장)
배포협의한 호스팅에 실제 접속 가능하게 배포클라이언트 명의 계정에 배포 후 권한 이전(10장)
검수화면·이미지·메뉴·버튼·링크 확인, 합의 범위 내 오류 수정, 검수 방법 안내검수용 주소 상시 공개, 자동 점검표(폭별·링크) 제출, 영업일 2일 안에 반영(15장)
결과물사이트, 소스, 디자인 원본, 배포 정보와 권한, 운영 안내서, 결과보고서모두 포함. 결과보고서는 지원사업 제출 양식에 맞춰 작성

공고에서 읽히는 조건

3. 벤치마킹

국내외 레슨·매칭 서비스 6곳과 이벤트 페이지 4곳을 확인했습니다(2026년 11월 6일 기준).

서비스성격잘하는 점가져올 것
나코차스포츠 코치 매칭수강생·코치·센터장별 섹션 분리, 코치 인증제(자격·경력·범죄 경력)코치 검증 단계를 전면에. 수강생과 코치 동선 분리
숨고전문가 매칭(레슨 포함)첫 화면에서 지역을 고르고 바로 요청첫 화면의 종목·지역 선택 상자
플랩풋볼소셜 풋살 매치마감 임박 같은 상태 표시, 배너 유입 경로 추적이벤트 D-day 배지, 버튼별 유입 추적
스매시테니스 매칭·레슨 앱문제 제기 → 숫자 지표 순서의 설득 구조서비스 소개의 문제와 해결 구성
Playtomic라켓 스포츠 예약·매칭대상별 메뉴(선수/클럽), 앱 다운로드 링크 하나로 기기 구분코치 지원을 별도 메뉴로, 앱 링크 하나로 통일
CoachUp미국 개인 코치 매칭신뢰 약속 3가지, 종목별 페이지안심 장치 3가지, 종목 상세(커리큘럼·가격표)

이벤트 페이지 패턴

메가박스, 이마트24, 스타벅스, 김캐디는 공통적으로 진행 중/종료 탭, 썸네일·제목·기간 카드, 대표 이벤트 슬라이더를 씁니다. 상세는 제목·기간·공유 다음에 본문을 통이미지로 넣는 경우가 많아, 검색 노출과 접근성이 약하고 문구 수정에 디자이너가 필요합니다. 이번 틀은 같은 순서를 따르되 본문을 텍스트 블록으로 바꾸고, 확인한 사례에서는 보이지 않던 D-day 배지와 모바일 하단 고정 버튼을 더합니다.

4. 전략과 콘셉트

수강생

  • 20~40대 직장인, 퇴근 후나 주말에 배울 곳을 찾는 사람
  • 궁금한 것: 가격, 코치 실력, 일정 변경, 장비
  • 사이트의 일: 3분 안에 이해시키고 앱으로 보내기

코치

  • 개인 레슨을 하는 지도자, 수강생 모집과 정산이 부담
  • 궁금한 것: 수수료, 정산 주기, 입점 절차
  • 사이트의 일: 예상 수입을 보여 주고 지원서까지

핵심 문장: "오늘 시작하는 ○○ 레슨." 종목 단어가 첫 화면 영상과 함께 바뀌어, 어떤 종목이든 배울 수 있다는 것을 문장 하나로 보여 줍니다.

디자인 언어: 코트의 흰 선을 화면 구획선과 전환 연출에 씁니다. 하드코트의 코발트 블루를 주색으로, 클레이코트의 주황을 강조색으로 정해 어느 종목에도 어울리면서 스포츠다운 인상을 줍니다. 실제 브랜드 자료를 받으면 색과 로고는 설정 파일에서 바로 바뀝니다.

5. 정보 구조

홈 서비스 소개레슨 종목이용 방법 이벤트 목록고객센터코치 지원 종목 상세(팝업)수강생 / 코치 탭 이벤트 상세(공통 틀) 자주 묻는 질문공지사항1:1 문의 정산 계산기지원서 이벤트 관리 화면 저장하면 바로 반영 앱 (예약 · 결제) 모든 페이지의 앱 버튼
메뉴는 6개, 화면은 9개입니다. 점선 상자는 같은 페이지 안의 화면입니다. 머리글과 각 페이지 마지막의 앱 버튼은 모두 앱으로 이어지고, 이벤트 관리 화면에서 저장한 내용은 목록과 상세에 바로 반영됩니다.
메뉴방문자의 질문핵심 콘텐츠주요 버튼
홈뭐 하는 서비스지?종목이 바뀌는 첫 화면, 예약 흐름, 추천 코치, 후기, 진행 중 이벤트코치 찾기, 앱으로 시작하기
서비스 소개믿을 만한가?문제와 해결, 코치 검증 4단계, 안심 장치, 연혁레슨 받기 / 코치 지원 갈림길
레슨 종목내 종목도 있나, 얼마인가?분류별 종목 카드, 4회 커리큘럼, 회차권 가격표, 준비물이 종목 코치 찾기
이용 방법어떻게 예약하고 취소하나?단계별 앱 화면, 회차권 할인, 취소·환불 기준질문 전체 보기
이벤트지금 받을 혜택은?대표 이벤트 슬라이더, 상태 탭, D-day 카드참여하기, 쿠폰 복사
고객센터내 문제의 답은?질문 검색, 분류, 공지사항, 1:1 문의문의 보내기
코치 지원얼마나 벌 수 있나?혜택, 정산 계산기, 입점 절차, 지원서지원서 보내기

6. 화면 설계

각 페이지의 섹션 순서입니다. 시안에서 실제로 확인하실 수 있습니다.

페이지섹션 순서
홈종목 영상 첫 화면(종목·지역 선택) → 종목 띠 → 왜 이 서비스인가 → 종목 가로 스크롤 → 예약 흐름(휴대폰 화면) → 수치 → 추천 코치 → 후기 → 진행 중 이벤트 → 코치 모집 → 앱 설치
서비스 소개페이지 머리 → 대표 사진 → 문제와 해결 3가지 → 선언문 → 코치 검증 4단계 → 안심 장치 → 연혁 → 갈림길(수강생/코치)
레슨 종목페이지 머리 → 분류 칩 + 종목 카드 → (카드 누르면) 커리큘럼·가격표·준비물 → 레슨 형태 비교 → 종목 제안
이용 방법수강생/코치 탭 → 단계별 앱 화면 4개 → 회차권 가격표 → 취소·환불 기준 → 자주 묻는 질문 5개
코치 지원사진 첫 화면 → 혜택 4가지 → 정산 계산기 → 입점 절차 → 지원서
이벤트 목록페이지 머리 → 대표 이벤트 슬라이더 → 상태 탭(전체/진행 중/오픈 예정/종료) → 카드 → 알림 신청
이벤트 상세7장의 공통 틀
고객센터질문 검색 + 분류 → 질문 목록 → 공지사항 → 1:1 문의

7. 이벤트 공통 구조

모든 이벤트는 같은 틀에 내용만 바뀌어 들어갑니다. 진행 중, 오픈 예정, 종료는 시작일과 종료일로 자동 계산되므로 사람이 따로 바꿀 필요가 없습니다.

블록들어가는 내용비어 있으면
첫 화면대표 이미지, 상태와 D-day, 제목, 한 줄 설명, 기간, 대상, 참여 버튼, 링크 복사필수
혜택 요약큰 값(50%, 10,000원) + 이름 + 설명. 1~3개에 맞춰 칸이 자동 조정블록 숨김
참여 방법단계 문장 목록블록 숨김
쿠폰코드와 복사 버튼. 종료되면 자동으로 숨김블록 숨김
유의사항한 줄에 하나씩블록 숨김
다른 이벤트진행 중인 이벤트 3개를 자동으로자동
모바일 하단 버튼D-day와 참여 버튼을 화면 아래에 고정종료 시 숨김

운영 흐름: 관리 화면에서 "새 이벤트" → 제목, 기간, 이미지, 혜택, 참여 방법 입력 → 오른쪽 미리보기 확인 → 저장 → 목록과 상세에 반영. 시안의 관리 화면 데모에서 직접 해 보실 수 있습니다. 시안은 보시는 브라우저에만 저장되고, 실제 구축 때는 서버에 저장됩니다.

8. 디자인 시스템

색

이름값쓰는 곳대비
잉크#0B1330본문 글자, 어두운 구간밝은 배경 위 16.9 : 1
코트 블루#2448FF주요 버튼, 링크, 강조흰 글자 6.1 : 1
클레이#FF6A3D이벤트, 첫 화면 종목 단어, 진행 막대잉크 글자 6.4 : 1 (흰 글자 금지 2.8 : 1)
페이퍼#F5F6F2기본 배경-
보조 글자#5B6478설명, 날짜밝은 배경 위 5.5 : 1

글꼴과 크기

한글은 Pretendard(무료, 상업 사용 가능), 영문 라벨과 숫자는 폭을 바꿀 수 있는 Archivo(무료)를 씁니다. 크기는 화면 폭에 따라 자연스럽게 줄어듭니다.

단계모바일PC줄 간격쓰는 곳
첫 화면 제목40px96px1.12홈, 코치, 이벤트 상세 첫 화면
페이지 제목34px68px1.16서브 페이지 머리
섹션 제목28px48px1.22각 섹션
카드 제목20px24px1.35카드, 단계
도입 문장17px19px1.75설명 문단
본문16px16px1.7본문
보조13~14px13~14px1.5안내 문구, 날짜

간격과 화면 폭

폼 규격

행정안전부의 범정부 디자인 시스템(KRDS) 공식 소스의 수치를 기준으로 맞췄습니다.

항목이번 설계KRDS메모
입력창 높이48px (첫 화면·검색은 56px)medium 48 / large 56px같음
입력 글자16pxmedium 17px아이폰은 16px 미만이면 입력할 때 화면을 확대
레이블15px, 입력창과 8px15px, 8px같음
안내·오류 문구13px13px오류는 빨간 테두리 + 문구로 함께 표시
버튼56 / 48 / 40pxlarge 56 / medium 48 / small 40px같음
모서리8px6~8px
체크박스20px, 누를 수 있는 영역 44px20px터치 영역은 WCAG 2.5.5 기준
여러 줄 입력최소 144px, 글자 수 표시144px같음

휴대폰 번호는 입력하는 동안 010-1234-5678 형식으로 자동으로 바뀌고, 보내기를 누르면 첫 번째 오류 칸으로 이동합니다. 필수 항목은 별표와 화면 낭독용 "(필수)"를 함께 둡니다.

줄바꿈과 깨짐 방지

9. 인터랙션 설계

움직임은 내용을 이해시키는 곳에만 씁니다. 운영체제에서 "동작 줄이기"를 켠 분께는 모든 연출이 꺼진 정지 화면을 보여 드립니다.

위치PC모바일동작 줄이기
페이지 전환코트 선이 그려지는 막이 덮었다 걷힘같음즉시 전환
홈 첫 화면종목 영상 4편이 6.5초마다 바뀌고 제목의 종목 단어가 함께 바뀜, 진행 막대가벼운 모바일용 영상정지 이미지
종목 띠스크롤 속도에 따라 빨라지고 방향이 바뀌며 글자 폭이 늘어남같음정지
종목 카드화면이 멈춘 채 가로로 이동, 속도에 따라 카드가 기울어짐손가락으로 넘기는 가로 목록가로 목록
예약 흐름휴대폰 화면이 스크롤 위치에 맞춰 4단계로 바뀜단계를 누르거나 자동 넘김누를 때만
수치·후기숫자가 올라가고, 후기 두 줄이 반대 방향으로 흐름같음최종값, 정지
코치 검증스크롤에 따라 코트 선이 그려짐카드형선 고정
이벤트 슬라이더자동 넘김과 진행 막대, 마우스를 올리면 멈춤밀어서 넘기기자동 넘김 끔
버튼·카드버튼이 커서 쪽으로 살짝 끌려오고, 카드가 기울어짐없음없음

배경 영상은 화면에 가까워질 때만 파일을 받고, 보이지 않으면 멈추며, 휴대폰에서는 멀어지면 메모리에서 비웁니다. 첫 화면 영상은 한 편에 0.2~1.7MB입니다.

10. 개발 방식과 이유

기준자체 개발 (제안)웹사이트 빌더 (아임웹·윅스 등)
이벤트 교체쉬움 전용 관리 화면에서 칸만 채우면 됨보통 페이지를 복제해 편집기에서 직접 수정
디자인·인터랙션제약 없음 시안 그대로 구현제약 스크롤 연출과 맞춤 레이아웃에 한계
월 비용월 1천 원 안팎 AWS 무료 구간 안월 1~5만 원대 요금제에 따라 계속 발생
속도·검색 노출유리 필요한 파일만, 페이지별 제목·설명 직접 지정보통 빌더 공통 코드가 함께 실림
소유권클라이언트 소스와 계정 모두 이전빌더 종속 다른 곳으로 옮기기 어려움
큰 구조 변경개발자 필요 이후 유지보수 계약으로 대응직접 가능

기술 구성: HTML·CSS·JavaScript로 만든 정적 사이트, 스크롤 연출은 GSAP(무료), 부드러운 스크롤은 Lenis(무료)를 씁니다. 이벤트는 데이터 파일 하나와 이미지로 관리하고, 관리 화면은 비밀번호로 보호된 작은 서버 기능(AWS Lambda)으로 이 파일을 고칩니다. 문의와 코치 지원서는 담당자 이메일로 바로 받습니다.

방문자운영자 CDN (CloudFront)서버 기능 (Lambda) 저장소 (S3)사이트 · 이벤트 데이터 · 이미지 이메일 발송 (SES)담당자 페이지 요청파일 전달 이벤트 저장문의·지원서 이벤트 데이터 · 이미지 수정 문의·지원서 제출
방문자는 CDN을 거쳐 저장소의 파일을 읽기만 합니다. 이벤트를 고치는 길은 비밀번호로 보호된 서버 기능 하나뿐이고, 저장하면 다음 방문부터 바로 반영됩니다.

지금 쓰시는 호스팅이 있고 계속 쓰기를 원하시면 그 환경에 맞춰 올려 드립니다. 이 경우 관리 화면의 저장 방식만 그 환경에 맞게 바뀝니다.

11. 일정

기간작업클라이언트 확인산출물
1~7일착수 회의, 자료 수령, 현행 사이트 진단, 사이트맵·화면 설계 확정화면 설계 승인진단표, 화면 설계서
8~14일메인·서브 디자인(PC·모바일), 1차 수정디자인 승인디자인 원본
15~21일퍼블리싱·개발, 이벤트 관리 화면, 검수용 주소 공개중간 검수검수용 사이트
22~27일기기별 점검, 수정 2회, 실제 콘텐츠 입력, 운영 교육(화상)최종 검수점검표
28~30일정식 배포, 기존 주소 연결, 권한 이전, 문서 납품인수 확인운영 안내서, 결과보고서

매주 1회 화상으로 30분 진행 상황을 보여 드리고, 그 사이에는 검수용 주소에서 언제든 확인하실 수 있습니다.

12. 비용

항목포함 내용금액
분석·기획현행 진단, 벤치마킹, 사이트맵, 화면 설계서50만 원
디자인메인 + 서브 7종 PC·모바일, 디자인 시스템, 원본 파일140만 원
웹사이트 리뉴얼 개발반응형 퍼블리싱, 스크롤 인터랙션, 폼 2종, 검색 노출 기본 설정(제목·설명·공유 썸네일·사이트맵)160만 원
이벤트 페이지목록·상세 공통 틀, 이벤트 관리 화면, 첫 이벤트 2개 입력90만 원
배포·검수·문서호스팅 구성과 배포, 기존 주소 연결, 기기별 점검, 운영 안내서, 결과보고서60만 원
합계 (VAT 별도)500만 원

예산 500만 원이 VAT 포함이라면 공급가 450만 원(VAT 포함 495만 원)으로 맞추겠습니다. 서비스 소개와 이용 방법을 한 페이지로 합치고, 이벤트 관리를 구글 시트 편집 방식으로 바꿔 50만 원을 줄입니다. 나머지 범위와 품질 기준은 같습니다.

별도로 드는 비용

항목예상 비용메모
호스팅 (AWS S3 + CloudFront)월 1천 원 안팎CDN 무료 구간(월 1TB 전송) 안에서는 저장 비용과 도메인 연결 비용(월 0.5달러)만 발생
서버 기능, 이메일 발송0원에 가까움Lambda 무료 구간, 이메일 1,000통당 0.1달러
도메인기존 도메인 사용 시 0원새로 사면 연 2만 원 안팎
글꼴0원Pretendard, Archivo 모두 무료 상업 사용 가능
사진·영상0원 (제공 자료 사용)시안의 사진과 영상은 AI로 만든 예시입니다. 실사로 교체하며, 유료 사진이 필요하면 실비로 따로 협의

추가 요청 단가

13. 성공 기준

시안 단계에서 이미 같은 기준으로 점검했습니다. 화면 폭 7종 × 화면 11개, 모두 77개 조합에서 가로 넘침과 스크립트 오류가 0건이었습니다. 폼 검사, 관리 화면에서 이벤트 만들기, 메뉴 이동 등 동작 22개도 모두 통과했습니다. 본 작업에서도 같은 점검 스크립트를 쓰고, 그 결과를 결과보고서에 첨부합니다.

아래가 모두 확인되면 이 프로젝트가 끝났다고 봅니다. 각 항목은 결과보고서에 근거와 함께 넣습니다.

14. 미정 범위에 대한 의견

공고의 미정 항목제안
세부 화면 수와 콘텐츠 배치메인 1 + 서브 7종 + 이벤트 관리 화면을 기본으로 제안합니다. 현행 사이트의 메뉴를 보고 착수 1주 안에 확정하며, 줄이거나 늘려도 위 단가로 정산합니다.
첫 이벤트 콘텐츠와 상세 구성상시로 쓰기 좋은 "첫 레슨 할인"과 시즌 이벤트 1개, 모두 2개를 오픈 때 넣는 것을 제안합니다. 배너 이미지가 없으시면 이 2개의 배너는 저희가 만들어 드립니다(비용에 포함).
호스팅 환경지금 쓰시는 호스팅이 없거나 빌더라면 클라이언트 명의 AWS 계정을 함께 만들고 그 위에 올려 드립니다. 운영 중인 서버가 있다면 그대로 씁니다.

착수 전에 확인하고 싶은 것

  1. 지금 사이트의 주소, 만든 방식(빌더 또는 자체 개발), 도메인과 호스팅 계정을 갖고 계신지
  2. 앱으로 연결할 주소(App Store, Google Play, 웹 서비스)와 특정 화면으로 바로 여는 링크가 있는지
  3. 예산 500만 원이 VAT 포함인지, 지원사업 정산에 필요한 서류(견적서, 계약서, 세금계산서, 결과보고서 양식)
  4. 이벤트 참여 신청을 사이트에서 받아야 하는지, 앱으로만 보내면 되는지(사이트에서 받으면 신청 폼이 추가됩니다)
  5. 문의와 코치 지원서를 받을 곳(이메일, 구글 시트, 슬랙 중)
  6. 로고 원본과 브랜드 색·글꼴 기준, 쓸 수 있는 실제 사진의 양
  7. 방문 분석 도구(GA4, 메타 픽셀 등) 설치가 필요한지

15. 검수와 사후 지원

16. 참고 자료

이 문서와 시안의 브랜드명 "레슨픽", 사진, 수치는 모두 제안용 예시입니다. 실제 자료를 받으면 교체합니다.