PROPOSAL · WISHKET 159496
스포츠 레슨 플랫폼 홍보 사이트 리뉴얼 기획·설계서
방문자가 서비스를 3분 안에 이해하고 앱으로 넘어가게 하는 홍보 사이트와, 개발자 없이도 계속 다시 쓰는 이벤트 페이지 틀을 30일 안에 만들어 드리는 계획입니다. 메뉴별 페이지 9개를 실제로 동작하는 시안으로 먼저 만들어 두었습니다.
1. 한눈에 보기
- 무엇을 만드나: 메인과 서브 페이지 7종(서비스 소개, 레슨 종목, 이용 방법, 코치 지원, 이벤트 목록, 이벤트 상세 공통 틀, 고객센터), 그리고 이벤트를 직접 올리고 고치는 관리 화면입니다.
- 왜 자체 개발인가: 사내에 개발 인력이 없으셔서 이벤트 교체는 코드 없이 되어야 하고, 지원사업이 끝난 뒤의 월 비용도 작아야 합니다. 정적 사이트에 간단한 관리 화면을 붙이면 두 가지를 모두 맞출 수 있습니다. 자세한 비교는 10장에 있습니다.
- 무엇이 다른가: 이벤트 상세를 통이미지가 아닌 텍스트 블록(혜택, 참여 방법, 쿠폰, 유의사항)으로 만듭니다. 그래서 검색에 잡히고, 화면을 읽어 주는 기능으로도 읽히며, 문구 하나 고치는 데 디자이너가 필요 없습니다.
- 확인이 필요한 것: 지금 사이트의 주소와 구축 방식, 예산의 VAT 포함 여부, 앱으로 연결할 주소입니다. 14장에 질문을 정리했습니다.
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. 정보 구조
| 메뉴 | 방문자의 질문 | 핵심 콘텐츠 | 주요 버튼 |
|---|---|---|---|
| 홈 | 뭐 하는 서비스지? | 종목이 바뀌는 첫 화면, 예약 흐름, 추천 코치, 후기, 진행 중 이벤트 | 코치 찾기, 앱으로 시작하기 |
| 서비스 소개 | 믿을 만한가? | 문제와 해결, 코치 검증 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 | 줄 간격 | 쓰는 곳 |
|---|---|---|---|---|
| 첫 화면 제목 | 40px | 96px | 1.12 | 홈, 코치, 이벤트 상세 첫 화면 |
| 페이지 제목 | 34px | 68px | 1.16 | 서브 페이지 머리 |
| 섹션 제목 | 28px | 48px | 1.22 | 각 섹션 |
| 카드 제목 | 20px | 24px | 1.35 | 카드, 단계 |
| 도입 문장 | 17px | 19px | 1.75 | 설명 문단 |
| 본문 | 16px | 16px | 1.7 | 본문 |
| 보조 | 13~14px | 13~14px | 1.5 | 안내 문구, 날짜 |
간격과 화면 폭
- 간격은 4px 단위만 씁니다: 4 · 8 · 12 · 16 · 24 · 32 · 40 · 56 · 80 · 120.
- 섹션 위아래 여백 88~140px, 좌우 여백 20~48px, 내용 최대 폭 1,280px.
- 구간: 559px 이하(1단), 560~767px, 768~1023px(태블릿), 1024~1279px(작은 PC), 1280px 이상.
- 점검 폭: 360 · 390 · 768 · 1024 · 1280 · 1440 · 1920px. 모든 페이지를 자동으로 열어 가로 넘침, 화면 밖 요소, 잘린 글자, 스크립트 오류를 확인합니다.
폼 규격
행정안전부의 범정부 디자인 시스템(KRDS) 공식 소스의 수치를 기준으로 맞췄습니다.
| 항목 | 이번 설계 | KRDS | 메모 |
|---|---|---|---|
| 입력창 높이 | 48px (첫 화면·검색은 56px) | medium 48 / large 56px | 같음 |
| 입력 글자 | 16px | medium 17px | 아이폰은 16px 미만이면 입력할 때 화면을 확대 |
| 레이블 | 15px, 입력창과 8px | 15px, 8px | 같음 |
| 안내·오류 문구 | 13px | 13px | 오류는 빨간 테두리 + 문구로 함께 표시 |
| 버튼 | 56 / 48 / 40px | large 56 / medium 48 / small 40px | 같음 |
| 모서리 | 8px | 6~8px | |
| 체크박스 | 20px, 누를 수 있는 영역 44px | 20px | 터치 영역은 WCAG 2.5.5 기준 |
| 여러 줄 입력 | 최소 144px, 글자 수 표시 | 144px | 같음 |
휴대폰 번호는 입력하는 동안 010-1234-5678 형식으로 자동으로 바뀌고, 보내기를 누르면 첫 번째 오류 칸으로 이동합니다. 필수 항목은 별표와 화면 낭독용 "(필수)"를 함께 둡니다.
줄바꿈과 깨짐 방지
- 한글은 단어 단위로만 줄을 바꿉니다(word-break: keep-all). 제목은 줄 길이를 고르게(text-wrap: balance), 본문은 마지막 줄에 한 글자만 남지 않게 합니다.
- 제목의 의도한 줄바꿈은 PC에서만 적용하고, 모바일에서는 화면 폭에 맞춰 자연스럽게 바뀝니다.
- 카드 설명은 2줄까지만 보이게 해 카드 높이를 맞춥니다. 표는 좁은 화면에서 표 상자 안에서만 옆으로 넘깁니다.
- 영문 종목 이름은 카드 폭에 비례해 크기가 정해져 BADMINTON처럼 긴 이름도 잘리지 않습니다.
9. 인터랙션 설계
움직임은 내용을 이해시키는 곳에만 씁니다. 운영체제에서 "동작 줄이기"를 켠 분께는 모든 연출이 꺼진 정지 화면을 보여 드립니다.
| 위치 | PC | 모바일 | 동작 줄이기 |
|---|---|---|---|
| 페이지 전환 | 코트 선이 그려지는 막이 덮었다 걷힘 | 같음 | 즉시 전환 |
| 홈 첫 화면 | 종목 영상 4편이 6.5초마다 바뀌고 제목의 종목 단어가 함께 바뀜, 진행 막대 | 가벼운 모바일용 영상 | 정지 이미지 |
| 종목 띠 | 스크롤 속도에 따라 빨라지고 방향이 바뀌며 글자 폭이 늘어남 | 같음 | 정지 |
| 종목 카드 | 화면이 멈춘 채 가로로 이동, 속도에 따라 카드가 기울어짐 | 손가락으로 넘기는 가로 목록 | 가로 목록 |
| 예약 흐름 | 휴대폰 화면이 스크롤 위치에 맞춰 4단계로 바뀜 | 단계를 누르거나 자동 넘김 | 누를 때만 |
| 수치·후기 | 숫자가 올라가고, 후기 두 줄이 반대 방향으로 흐름 | 같음 | 최종값, 정지 |
| 코치 검증 | 스크롤에 따라 코트 선이 그려짐 | 카드형 | 선 고정 |
| 이벤트 슬라이더 | 자동 넘김과 진행 막대, 마우스를 올리면 멈춤 | 밀어서 넘기기 | 자동 넘김 끔 |
| 버튼·카드 | 버튼이 커서 쪽으로 살짝 끌려오고, 카드가 기울어짐 | 없음 | 없음 |
배경 영상은 화면에 가까워질 때만 파일을 받고, 보이지 않으면 멈추며, 휴대폰에서는 멀어지면 메모리에서 비웁니다. 첫 화면 영상은 한 편에 0.2~1.7MB입니다.
10. 개발 방식과 이유
| 기준 | 자체 개발 (제안) | 웹사이트 빌더 (아임웹·윅스 등) |
|---|---|---|
| 이벤트 교체 | 쉬움 전용 관리 화면에서 칸만 채우면 됨 | 보통 페이지를 복제해 편집기에서 직접 수정 |
| 디자인·인터랙션 | 제약 없음 시안 그대로 구현 | 제약 스크롤 연출과 맞춤 레이아웃에 한계 |
| 월 비용 | 월 1천 원 안팎 AWS 무료 구간 안 | 월 1~5만 원대 요금제에 따라 계속 발생 |
| 속도·검색 노출 | 유리 필요한 파일만, 페이지별 제목·설명 직접 지정 | 보통 빌더 공통 코드가 함께 실림 |
| 소유권 | 클라이언트 소스와 계정 모두 이전 | 빌더 종속 다른 곳으로 옮기기 어려움 |
| 큰 구조 변경 | 개발자 필요 이후 유지보수 계약으로 대응 | 직접 가능 |
기술 구성: HTML·CSS·JavaScript로 만든 정적 사이트, 스크롤 연출은 GSAP(무료), 부드러운 스크롤은 Lenis(무료)를 씁니다. 이벤트는 데이터 파일 하나와 이미지로 관리하고, 관리 화면은 비밀번호로 보호된 작은 서버 기능(AWS Lambda)으로 이 파일을 고칩니다. 문의와 코치 지원서는 담당자 이메일로 바로 받습니다.
지금 쓰시는 호스팅이 있고 계속 쓰기를 원하시면 그 환경에 맞춰 올려 드립니다. 이 경우 관리 화면의 저장 방식만 그 환경에 맞게 바뀝니다.
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로 만든 예시입니다. 실사로 교체하며, 유료 사진이 필요하면 실비로 따로 협의 |
추가 요청 단가
- 서브 페이지 추가: 1페이지당 30만 원
- 이벤트 상세 디자인 제작 대행(배너 이미지 포함): 1건당 10만 원
- 오픈 후 유지보수: 월 15만 원, 또는 수정이 있을 때 건별 결제
13. 성공 기준
시안 단계에서 이미 같은 기준으로 점검했습니다. 화면 폭 7종 × 화면 11개, 모두 77개 조합에서 가로 넘침과 스크립트 오류가 0건이었습니다. 폼 검사, 관리 화면에서 이벤트 만들기, 메뉴 이동 등 동작 22개도 모두 통과했습니다. 본 작업에서도 같은 점검 스크립트를 쓰고, 그 결과를 결과보고서에 첨부합니다.
아래가 모두 확인되면 이 프로젝트가 끝났다고 봅니다. 각 항목은 결과보고서에 근거와 함께 넣습니다.
- 화면 폭 7종(360~1920px)에서 모든 페이지에 가로 넘침, 잘린 글자, 겹친 요소가 하나도 없다. 자동 점검표로 증명합니다.
- 모든 메뉴, 버튼, 링크가 의도한 화면이나 앱으로 이동한다. 링크 점검표로 증명합니다.
- 담당자분이 운영 안내서만 보고 새 이벤트를 10분 안에 올리고, 종료 처리된 것을 확인할 수 있다. 운영 교육 때 직접 해 보시도록 합니다.
- 모바일 기준 Lighthouse 성능 85점, 접근성 90점 이상이다.
- 실제 도메인으로 접속되고, 기존 사이트 주소로 들어와도 새 페이지로 이어진다.
- 소스, 디자인 원본, 호스팅 계정 권한, 운영 안내서, 결과보고서가 모두 클라이언트에게 넘어갔다.
14. 미정 범위에 대한 의견
| 공고의 미정 항목 | 제안 |
|---|---|
| 세부 화면 수와 콘텐츠 배치 | 메인 1 + 서브 7종 + 이벤트 관리 화면을 기본으로 제안합니다. 현행 사이트의 메뉴를 보고 착수 1주 안에 확정하며, 줄이거나 늘려도 위 단가로 정산합니다. |
| 첫 이벤트 콘텐츠와 상세 구성 | 상시로 쓰기 좋은 "첫 레슨 할인"과 시즌 이벤트 1개, 모두 2개를 오픈 때 넣는 것을 제안합니다. 배너 이미지가 없으시면 이 2개의 배너는 저희가 만들어 드립니다(비용에 포함). |
| 호스팅 환경 | 지금 쓰시는 호스팅이 없거나 빌더라면 클라이언트 명의 AWS 계정을 함께 만들고 그 위에 올려 드립니다. 운영 중인 서버가 있다면 그대로 씁니다. |
착수 전에 확인하고 싶은 것
- 지금 사이트의 주소, 만든 방식(빌더 또는 자체 개발), 도메인과 호스팅 계정을 갖고 계신지
- 앱으로 연결할 주소(App Store, Google Play, 웹 서비스)와 특정 화면으로 바로 여는 링크가 있는지
- 예산 500만 원이 VAT 포함인지, 지원사업 정산에 필요한 서류(견적서, 계약서, 세금계산서, 결과보고서 양식)
- 이벤트 참여 신청을 사이트에서 받아야 하는지, 앱으로만 보내면 되는지(사이트에서 받으면 신청 폼이 추가됩니다)
- 문의와 코치 지원서를 받을 곳(이메일, 구글 시트, 슬랙 중)
- 로고 원본과 브랜드 색·글꼴 기준, 쓸 수 있는 실제 사진의 양
- 방문 분석 도구(GA4, 메타 픽셀 등) 설치가 필요한지
15. 검수와 사후 지원
- 검수 방법: 15일차부터 검수용 주소를 열어 두고, 휴대폰과 PC에서 바로 확인하실 수 있습니다. 의견은 공유 시트나 화면 캡처로 주시면 영업일 2일 안에 반영합니다.
- 수정 범위: 디자인 방향 수정은 2회까지 포함하고, 합의 범위 안의 기능 오류·화면 깨짐·링크 오류·누락은 횟수 제한 없이 고칩니다.
- 필요한 자료: 서비스 소개 문구, 로고 원본, 사진, 앱 주소, 이벤트 2개의 내용. 착수 3일 안에 받으면 일정이 밀리지 않습니다.
- 납품 후: 오픈 후 60일 동안 하자는 무상으로 고칩니다. 이후 유지보수는 월 15만 원, 또는 수정이 있을 때 건별로 결제하시면 됩니다. 새 기능과 고도화는 따로 협의합니다.
16. 참고 자료
- KRDS 범정부 UI/UX 디자인 시스템: 입력 필드, 타이포그래피, 공식 소스(GitHub)
- W3C, WCAG 2.2 Target Size (Enhanced); CSS-Tricks, 16px or Larger Text Prevents iOS Form Zoom
- 벤치마킹: 나코차, 숨고, 플랩풋볼, 스매시, Playtomic, CoachUp
- 이벤트 페이지: 메가박스, 이마트24, 스타벅스, 김캐디
- 시장 단가: 위시켓, 홈페이지 제작 비용 계산 가이드(2025), unwebs, 2026 홈페이지 견적 단가
이 문서와 시안의 브랜드명 "레슨픽", 사진, 수치는 모두 제안용 예시입니다. 실제 자료를 받으면 교체합니다.