콘텐츠·문화 사이트 반응형 웹 개발 제안
걱정하신 ‘오픈 후 직접 운영’부터
먼저 만들어 봤습니다
이 시안은 그림이 아니라 실제 관리자(CMS)에 내용을 넣고 만든 사이트입니다. 사전 검색, 나의 컬러 찾기, 갤러리, 글 복제를 모두 눌러 보실 수 있습니다. 화면 디자인은 기능 확인용이며, 실제 작업은 보내 주신 일러스트레이터 시안을 그대로 구현합니다.
공고 요구사항 체크
| 요구사항 | 시안에서 확인하는 곳 | 바로 가기 |
|---|---|---|
| 포스트 카테고리·태그 구분, 포스트 검색 | 읽을거리 → 카테고리 탭, #태그, 목록 안 검색 / 머리 검색창 | 열기 |
| (추가 제안) 운영자가 직접 페이지 구성 | 블록 조합형: 블록 9종을 골라 쌓고 순서를 바꿔 새 페이지를 만듦. 편집하며 실시간 미리보기 | 열기 |
| 기존 페이지를 복사해 새 글 만들기 (레이아웃 고정, 이미지·영상·글만 교체) | ‘겨울 특별전’은 ‘가을 특별전’ 페이지를 관리자에서 [복제]해 사진·기간·글만 바꾼 페이지입니다. 화면 형식은 잠겨 있어 바뀌지 않습니다 | 열기 |
| 페이지와 글을 계속 추가 | 페이지·글·사전 항목·갤러리 사진 모두 개수 제한 없음. 디자인 시안의 페이지마다 형식을 하나씩 만들어 둡니다 | 열기 |
| 사전 검색: 단어 → 컬러 코드·설명·연관 자료(외부 링크) | ‘노을’ 검색 → 결과 페이지로 바로 이동. 컬러 코드(HEX·RGB·CMYK·HSL·먼셀)와 복사 버튼, 설명, 연관 자료 소개와 외부 링크(새 창) | 열기 |
| 사전 콘텐츠 관리자 등록·수정 | 관리자 → 컬러 사전. 색 이름이 아닌 일반 단어도 등록, 한 단어에 색 여러 개 연결, 컬러 코드 형식 검사, 코드 값 기준(출처) 칸 | 열기 |
| 나의 컬러 찾기: 질문 2개, 첫 선택지 4~7개, 선택에 따라 두 번째 선택지가 달라짐 | 첫 질문 5개 → 두 번째 질문 3~4개씩 → 결과 19개. 결과마다 공유용 주소 | 열기 |
| 질문·선택지·분기 규칙·결과 CMS 편집 | 관리자 → 나의 컬러 찾기. 첫 선택지를 펼치면 두 번째 질문·선택지·결과가 바로 아래에 | 열기 |
| 갤러리: 이미지 등록·관리, 카테고리별 분류 | 갤러리 8분류 탭, 크게 보기(키보드 ←→), 사진마다 사전 컬러 연결 | 열기 |
| 빠른 로딩 | 모든 페이지를 미리 만들어 두는 방식 + 사진 자동 축소(WebP 3단계) + 화면에 보일 때만 불러오기 | 열기 |
| 반응형 (PC·태블릿·모바일) | 이 시안도 휴대폰에서 그대로 확인하실 수 있습니다 | 열기 |
관리자 화면: 개발자 없이 이어서 운영하실 수 있게
페이지·글·사전 항목·갤러리 사진 모두 추가 개수 제한이 없습니다. 메뉴와 칸 이름은 한국어로, 칸마다 무엇을 넣는지 설명을 달았습니다. 게시 전 임시 저장, 저장할 때마다 이전 버전이 남아 되돌리기도 됩니다. 아래는 이 시안의 실제 관리자 화면입니다.
![[블록 추가]: 그림을 보고 고릅니다](/proposal/admin-addblock.jpg)
![새 글은 비슷한 글을 열고 [⋯] → [복제]](/proposal/admin-dup.jpg)
미팅 때 관리자 화면을 화면 공유로 띄워, 글을 복제하고 사진을 바꿔 게시하는 과정을 직접 보여 드리겠습니다.
페이지를 만드는 방법 세 가지를 모두 드립니다
보내 주실 30페이지는 모두 관리자에서 글·사진·영상을 바꿀 수 있게 만듭니다. 여기에 더해, 오픈 후 새 페이지를 개발자 없이 직접 꾸미실 수 있도록 블록 조합형을 넣었습니다. 모두 견적에 들어 있습니다.
| 구분 | 예 | 관리자에서 하는 일 |
|---|---|---|
| 형식 고정 (시안 그대로) | 서비스 소개, 전시·행사, 특집 글 | 시안의 페이지마다 형식을 하나씩 만듭니다. 같은 형식의 페이지를 [복제]해 사진·영상·글만 바꾸면 새 페이지가 됩니다. 배치는 잠겨 있어 디자인이 흐트러지지 않습니다. |
| 블록 조합형 (추가 제안) | 특집, 이벤트, 새 소개 페이지 등 오픈 후 새로 만들 페이지 | 블록 9종을 골라 쌓고 끌어서 순서를 바꿉니다. 블록 하나하나는 시안의 디자인을 따르므로 자유롭게 꾸며도 사이트 전체의 모양이 흐트러지지 않습니다. 편집하면서 실시간 미리보기로 확인합니다. |
| 기능 페이지 | 사전 결과, 나의 컬러 찾기, 갤러리, 글 목록·검색 | 화면은 시안대로 고정하고, 들어가는 내용(단어, 질문·결과, 사진, 글)만 관리자에서 넣으면 자동으로 채워집니다. |
시안 예: 서비스 소개(소개형) · 가을 특별전(전시·행사형) · 겨울 특별전(가을 특별전을 복제해 만든 페이지) · 특집: 가을, 우리 색으로 읽기(블록 조합형)
정하지 않으신 부분: 이렇게 권합니다
1. CMS 방식 → Payload CMS + Next.js + PostgreSQL
- 공고의 ‘복사해서 내용만 교체’가 기본 기능입니다. 복제 버튼이 처음부터 있고, 화면 형식을 잠가 레이아웃을 건드리지 않게 할 수 있습니다.
- 무료 오픈소스(MIT 라이선스)이고 담당자님 서버에 설치합니다. 월 사용료나 사용자 수 제한이 없고, 이용 업체가 사라져도 사이트는 그대로입니다.
- 관리자 화면이 한국어를 지원합니다. 이 시안의 관리자 화면도 한국어로 만들었습니다.
- 다른 개발사로 옮기기 쉽습니다. 국내에서 가장 흔한 웹 기술(TypeScript, React/Next.js)과 표준 DB(PostgreSQL)라 인수할 개발자를 찾기 어렵지 않습니다.
- 빠릅니다. 저장하면 그 페이지만 새로 만들어 두고, 방문자에게는 미리 만든 화면을 보냅니다. 사진은 올릴 때 자동으로 작게 줄입니다.
다른 방식과 비교 보기
| 방식 | 장점 | 이번 공고에 맞지 않는 점 |
|---|---|---|
| Payload (권장) | 복제·형식 고정·한국어·버전 되돌리기 기본, 무료, 자체 설치 | 관리자 화면을 쉽게 다듬는 작업이 필요(이번 견적에 포함) |
| Strapi | 무료, 한국어, 복제 기능 | 미리보기는 유료 요금제, 화면과 관리자를 따로 운영해야 함 |
| Sanity·Contentful 같은 호스팅형 | 설치가 필요 없음 | 데이터가 외부 업체에 있고 사용량에 따라 요금. 소유·이전 요구와 맞지 않음 |
| 관리자 직접 개발 | 원하는 대로 만듦 | 관리자 화면을 처음부터 만들어 3~4주와 비용이 더 듦 |
2. 모바일 앱 → 이번에는 웹으로, 필요하면 2단계로
말씀하신 대로 웹사이트를 감싸기만 한 앱은 심사에서 거절되기 쉽습니다. 다만 거절 사유는 로그인이 없어서라기보다 ‘앱만의 기능이 없어서’(애플 심사 지침 4.2 최소 기능)인 경우가 많습니다. 그래서 앱을 내신다면 아래처럼 앱 기능을 더하는 쪽을 권합니다.
| 방식 | 내용 | 참고 비용·기간 |
|---|---|---|
| 1단계: 홈 화면 설치(PWA) | 휴대폰 홈 화면에 아이콘 추가, 인터넷이 끊겨도 본 사전 항목 보기. 스토어 심사 없음 | 50~150만원, 1주 |
| 2단계: 스토어 앱 | 지금 웹을 그대로 쓰고 푸시 알림(오늘의 색), 공유, 오프라인 사전 같은 앱 기능을 더해 심사 통과 조건을 맞춤 | 600~1,000만원, 4~6주 + 애플 개발자 계정 연 129,000원, 구글 25달러(1회) |
3. 페이지 수를 줄이면
기능과 공통 틀(머리·바닥·부품) 비용은 그대로이고, 페이지 1장당 8만원씩 줄어듭니다. 예) 25페이지 710만원, 20페이지 670만원, 15페이지 630만원(부가세 별도). 비슷한 화면은 하나의 형식으로 묶어 관리자에서 복제하는 쪽이 오픈 후 운영에도 편해서, 시안을 받으면 묶을 수 있는 페이지를 먼저 표로 정리해 드리겠습니다.
견적: 750만원 (부가세 별도) · 8주
| 항목 | 내용 | 금액 |
|---|---|---|
| 퍼블리싱 30페이지 (반응형) | 공통 틀·부품 90만 + 페이지당 8만 × 30 | 330만 |
| 관리자·CMS | 30페이지 형식별 편집 칸, 페이지·글 복제, 블록 조합형(블록 9종)·실시간 미리보기, 카테고리·태그, 사진·영상, 임시 저장·되돌리기 | 120만 |
| 사전 검색 | 검색(초성·코드 검색), 결과 페이지, 연관 자료, 관리 화면, 단어 목록 엑셀 일괄 등록 | 80만 |
| 나의 컬러 찾기 | 분기 편집 화면, 결과 페이지·공유 주소, 연결 누락 검사 | 80만 |
| 갤러리 | 분류, 크게 보기, 관리 화면 | 40만 |
| 서버·배포·문서 | 서버·SSL·백업 설정, DB 스키마, 관리자 사용 안내, 배포·운영 매뉴얼 | 60만 |
| 검수·성능 점검 | 기기별 확인, 로딩 속도 측정·개선, 수정 반영 | 40만 |
| 합계 | CMS 라이선스 비용 없음 | 750만 |
일정 (8주)
- 1주시안 분석 → 색·글자·여백 값 정리(디자인 가이드를 저희가 만들어 드립니다), 공통 틀, 관리자 구조 확정, 서버 계정 개설(발주사 명의)
- 2~4주퍼블리싱 30페이지. 매주 금요일 10페이지씩 실제 주소로 공유
- 3~5주사전 검색, 나의 컬러 찾기, 갤러리, 글 관리 연결
- 6주받은 단어 목록·질문·결과 입력, 연결 누락 검사, 관리자 사용 안내 작성
- 7주검수 기간: 시안과 다른 곳은 횟수 제한 없이 고칩니다. 속도 측정
- 8주오픈, 담당자 화상 교육(1시간), 소스·계정·문서 인계
서버·호스팅·SSL
- 권장: AWS Lightsail 서울 2GB 월 약 2만원(부가세 별도, 연 약 24만원). 이미지·영상 저장소(Cloudflare R2)는 10GB까지 무료, 이후에도 월 수백 원 수준
- 국내 업체를 원하시면 카페24 가상서버 월 2.2만원(부가세 포함)
- SSL 무료(Let’s Encrypt). 인증서 유효 기간이 계속 짧아지고 있어 자동 갱신으로 설정합니다
- 서버·저장소 계정은 발주사 명의로 만들고, 요금도 발주사 카드로 직접 결제됩니다. 매일 자동 백업
납품 후 수정과 유지보수
- 검수 기간(7주차) 시안과 다르게 구현된 곳은 횟수 제한 없이 고칩니다
- 오픈 후 3개월 저희 쪽 오류는 무료로 고칩니다
- 오픈 후 1개월 문구·사진 배치 같은 작은 수정 5건 무료
- 그 뒤(선택) 월 15만원: 서버·보안 업데이트, 백업 확인, 월 2시간 수정. 또는 건별 견적
소유권과 이전
- 소스코드 전체, 디자인 구현물, DB는 모두 발주사 소유입니다. 계약서에 명시합니다
- 소스는 발주사 GitHub 저장소로 넘기고, 서버·도메인·저장소도 발주사 명의라 넘겨받을 것이 따로 없습니다
- 다른 개발사가 이어받을 수 있게 DB 스키마, 배포·운영 매뉴얼(서버 재설치부터 백업 복구까지)을 드립니다
결과물
- 전체 소스코드와 DB 스키마 문서
- 디자인 가이드(시안에서 뽑은 색·글자·여백 값)
- 관리자 사용 안내(그림 포함): 글 복제, 사전 등록, 컬러 찾기 수정, 갤러리
- 배포·운영 매뉴얼, 담당자 화상 교육 1회
준비하신 자료는 이렇게 쓰겠습니다
- 일러스트레이터 시안 30페이지 원본(.ai)에서 색·글자 크기·여백 값을 뽑아 디자인 가이드로 먼저 정리하고, 그 값으로 구현합니다. 1주차에 확인받습니다
- 사전 단어 목록 엑셀로 주시면 한 번에 등록합니다. 단어마다 컬러 코드, 설명, 연관 자료(제목·소개·주소)를 한 줄씩 받는 양식을 드립니다
- 질문·선택지·분기·결과 표로 받아 입력하고, 모든 경로(첫 선택지 × 두 번째 선택지)가 결과로 이어지는지 자동으로 확인합니다
- 요구사항 정의서·화면설계서·IA 기준 문서로 삼아, 주마다 체크표로 진행 상황을 공유합니다
미팅 때 여쭙고 싶은 것
- 시안에 모바일·태블릿 화면이 따로 있는지
- 시안에 쓴 글꼴의 웹 사용 라이선스
- 사전 단어 수, 그리고 한 단어에 색이 하나인지 여러 개인지
- 30페이지 중 운영하면서 새로 늘려 갈 페이지(예: 전시·행사)는 어떤 것인지
- 영상은 유튜브로 올리실지, 파일로 직접 올리실지