← WORK 목록으로
KOREA위시켓웹 개발

학교 인쇄물 고객 구성표 웹앱 본개발 및 관리 화면·사내 연동 API 구축 전문가

학교 인쇄물(독서기록장·학습플래너 등)의 표지·내지 샘플을 골라 책 한 권의 쪽 순서(구성표)를 짜서 원고와 함께 접수하는 웹앱을 실운영 수준으로 완성하는 프로젝트입니다. 기존 HTML·CSS·JS 시험판을 다듬고, Flask 백엔드로 서버 저장·썸네일 생성·SMTP 메일 발송·스팸 차단·관리 화면·사내 연동 API를 구축하며 그누보드 게시판(읽기 전용) 연동이 포함됩니다. 레거시 PHP/MariaDB 환경에서의 그누보드 연동과 Flask 백엔드, 반응형 퍼블리싱을 모두 다룰 수 있는 풀스택 개발자에게 적합합니다.

2026.10.19VIEW 31위시켓에서 수집
Budget3,999,999원
Difficulty고급
Duration1.5~2개월
Work style외주
Required stack

필요 기술

FlaskPythonJavaScriptMariaDB그누보드ApacheAWSHTML/CSS
Project brief

프로젝트 내용

[프로젝트 개요]
- 저희는 학교 인쇄물(독서기록장, 학습플래너 등)을 제작하는 회사입니다.
- 학교 선생님이 홈페이지의 표지·내지 샘플을 골라 책 한 권의 쪽 순서(구성표)를 짜서 요청사항 및 원고 파일과 함께 저희에게 보내는 웹앱을 구축하고자 합니다.
- 현재 부품을 고르는 화면은 순수 HTML·CSS·JS로 동작하는 시험판이 준비되어 있으며, 이번 과업을 통해 서버 저장, 메일 발송, 관리 화면, 사내 시스템 연동 API, 썸네일 생성, 스팸 차단 기능을 갖춘 실운영 제품으로 완성하려고 합니다.

[클라이언트 소개]
- 산업 분야: 학교 및 교육기관 대상 맞춤형 인쇄물(독서기록장, 학습플래너, 노트 등) 기획 및 제작
- 프로젝트 의사결정 구조: 내부 실무 담당자가 과업 명세와 데이터 규격을 직접 정의하며, 빠르게 의사결정을 진행합니다.
- 개발 지식: 사내에 전문 개발자는 없으나 서버 환경 실측과 데이터 구조 정의는 준비되어 있습니다. 향후 저희가 AI 코딩 도구로 일부를 직접 고칠 수 있도록 단순한 구조와 충분한 주석·문서를 희망합니다.

[왜 이 프로젝트를 하는가]
- 지금 상황: 현재 독서기록장·학습플래너 문의는 말이나 글로 오고 있어, 직원이 이를 다시 쪽 목록으로 옮기고 빠진 것을 되묻는 데 많은 시간이 듭니다.
- 끝나면 이렇게 되기를 바랍니다: 첫 문의가 부품 순서 목록으로 접수되어 되묻기가 줄어들고, 카톡 문의 건도 직원이 같은 화면으로 대신 짜서 보내며, 받은 구성표를 사내 시스템이 API로 바로 가져가 초벌을 만들 수 있기를 바랍니다.
- 다만 이런 점이 우려됩니다: 첫째, 정부 지원사업(2026 혁신 소상공인 AI 활용지원 사업)으로 진행되어 공급가 400만 원(부가세 별도) 고정 예산과 11월 27일(금) 완료 기한을 반드시 지켜야 합니다. 둘째, 사이트 게시판에 자동 등록 스팸이 실제로 많이 들어오고 있어 스팸 차단과 업로드 파일 실행 차단이 꼭 필요합니다.

[필수 과업 범위와 결과물]
1. 수행 범위
- SW 개발: 화면·데이터 꼴 설계 확정(묶음 A), 시험판 이전 및 고객 화면 다듬기(묶음 B), 관리 화면 신규 구축(묶음 C), 백엔드 저장·썸네일·파일·스팸·메일·API 개발(묶음 D)
- 외부 연동: 기존 그누보드 5.4 샘플 게시판(읽기 전용) 연동, 외부 SMTP(465 포트) 메일 연동, 사내 시스템 조회용 서버 간 API 1종 연동
- 인프라 구축·배포: 자사 리눅스 서버(Apache 2.4, PHP 7.0.33, MariaDB 10.1) 설치·동작 확인 및 문서 작성·2개월 하자 보수(묶음 E)

2. 상세 기능 요구 사항
2-1. 고객 화면 — 고르기 및 미리보기·표시 (묶음 B)
- 시험판 이전 및 화면 다듬기: 기존 시험판(index.html 1개 및 부품 목록 JS 3개)을 기반으로 학교인쇄통 사이트와 어울리게 모바일 퍼스트 반응형으로 다듬기 처리(새 디자인 시안 제작 없음)
- 게시판 기반 품목·분류·정렬 연동: 품목 및 분류 탭(표지, 간지, 도서목록 등)을 그누보드 게시판 분류에서 읽고, 인기 등급(0·1·2) → 조회수 → 최신순으로 정렬 처리
- 내 원고로 교체: 담은 쪽 하나를 한글, PDF, 이미지 파일로 바꿔 달라고 표시(첨부만, 내용 변환 없음)하고 미리보기 해당 쪽에 교체 요청 파일명 표시
- 브라우저 자동 저장: 고르던 내용과 표시를 브라우저에 자동 저장하여 다시 열면 이어서 작성하도록 구현(첨부 파일은 빼고 재첨부 안내)
- 미리보기 및 표시 저장: 양면·한 쪽 넘겨 보기와 펜·글상자 표시 기능을 유지하고, 표시 내역을 구성표와 함께 서버에 저장하여 관리 화면에서 그대로 보이도록 구현
2-2. 고객 화면 — 보내기 및 보안·스팸 차단 (묶음 B·D)
- 보내기 입력 폼: 문의 내용(맨 위 큰 칸), 기관명·담당자·휴대폰·메일, 수량·받을 날, 개인정보 수집·이용 동의 구현(칸 이름은 자사 1:1 문의 정형 칸 이름과 통일)
- 파일 첨부 제한: 교표, 사진, 원고 파일 첨부 시 확장자 및 크기 제한(서버 설정 기준 파일 하나 20MB, 한 번에 30개) 적용 및 업로드 파일 실행 차단 처리
- 스팸 막기: 무료 캡차 연동, 숨은 칸, 과속 제출 거름, 같은 곳에서 짧은 시간 여러 번 보내기 제한 적용
- 접수 번호 발급: 먼저 서버에 저장하여 구성표 번호를 발급한 뒤 메일을 발송하여 메일이 안 가도 구성표를 잃지 않도록 처리
2-3. 백엔드 — 썸네일·메일 발송·사내 연동 API (묶음 D)
- 서버 썸네일 만들기: 그누보드 게시판 글의 첫 첨부 이미지(평균 1400×1970px, 최대 5718×8036px)를 읽어 휴대폰용 작은 그림(JPEG·PNG)을 서버에서 생성 및 저장 후 재사용(서버 GD 2.1 사용, 썸네일 생성 스크립트 내 memory_limit 512MB 상향 적용)
- 저희 메일 및 고객 확인 메일 발송: SMTP(465)로 사내 메일(제목에 번호·기관·품목·수량, 본문에 문의내용·연락처·쪽 순서와 작은 그림·파일 링크·관리 화면 링크) 및 고객 접수 확인 메일 발송, 실패 시 관리 목록에 메일 실패 표시
- 사내 시스템 연결 API: 구성표 번호와 API 키(서버끼리만)로 요청 시 구성표 JSON과 파일 내려받기 URL을 반환하는 API 1종 구현(키 없는 요청이나 번호만으로는 열리지 않음)
2-4. 관리 화면 (묶음 C·D)
- 관리자 로그인: 비밀번호 해시 저장을 적용한 로그인 및 비로그인 시 구성표 열람 차단
- 받은 구성표 목록 및 검색: 번호, 날짜, 기관, 품목, 수량, 메일 상태(실패 표시), 스팸 표시 목록 제공 및 기관명·번호·기간·품목 검색 구현
- 구성표 상세 보기: 쪽 순서, 그림, 올린 파일, 미리보기 표시가 고객이 보낸 그대로 보이는 상세 화면 구현
- 스팸 지우기 및 자동 삭제: 스팸 표시 건 삭제 및 보관 기간이 지난 구성표와 서버 첨부 파일 자동 삭제 처리
- 게시판 연동 및 설정: 품목과 그누보드 게시판(item01_1 등) 매핑 표 및 마지막 읽은 시각 확인, 품목 갈래별 받는 메일 설정 구현(학교인쇄통·오케이노트 두 사이트의 같은 글은 하나로 처리)

3. 결과물
- 원본 소스 전체와 변경 기록(git)
- 자사 서버 설치 및 동작 확인
- README(설치·설정·구조·데이터 꼴) 및 관리 화면 사용 설명서(관리자용, 짧게)
- 필수 확인 항목 테스트 결과(화면 캡처 포함) 및 완료보고서
- 검수 후 2개월 하자 보수

[아직 정하지 않은 범위]
- 본 과업의 예산은 공급가 400만 원(부가세 별도)으로 고정되어 있습니다. 400만 원 안에서 과업명세서 v6 전체 범위를 수행하시거나, 또는 아래 후보 기능을 덜어내어 400만 원에 맞춘 범위 조정안을 제안해 주셔도 좋습니다.
- 범위 조정 시 우선 덜어낼 수 있는 후보 기능: (1) 요소 13번 학년별 여러 벌(구성표 복제), (2) 요소 19번 미리보기 색 코드(HEX·CMYK) 저장, (3) 요소 27번 메일 실패 시 자동 재발송(실패 표시만 남김), (4) 요소 34번 보관 기간 설정 화면(고정값으로 처리)
- 단, 보내기(서버 저장·번호 발급·메일), 관리 목록·상세, API, 썸네일 생성, 기본 스팸 막기는 반드시 포함되어야 합니다.

[클라이언트 준비 사항]
- 준비된 것: 상세 과업명세서(v6, 화면별 번호표와 캡처 포함), 동작하는 시험판 원본 소스(순수 HTML·CSS·JS), 서버 환경 실측표(PHP 7.0.33, GD 2.1, memory_limit 512MB 가용, curl HTTPS 및 SMTP 465 확인 완료)
- 준비 중인 것: 착수 회의 전 확정할 API 데이터 상세 규격 및 화면 다듬기 기준(로고·색·글꼴·간격)
- 이 프로젝트 담당: 실무 담당자가 직접 소통하며, 착수 후 매주 진행 상황을 메일로 공유받고자 합니다.

[오픈 시점과 예산]
- 목표 시점: 2026년 11월 27일(금) 완료 및 설치 필수 (11월 둘째 주 1차 시험판 확인, 12월 첫째 주 기능 확인 및 수정 반영)
- 희망 착수: 2026년 10월 말 계약 즉시 착수 / 개발 기간: 약 1개월
- 예산: 400만 원 (부가세 별도 / 고정 금액)
- 계약 및 정산 조건: 정부 지원사업(2026 혁신 소상공인 AI 활용지원 사업) 규정에 따라 사업자 업력 1년 이상 및 소프트웨어 개발 업종이어야 하며, 개발사 명의 전자세금계산서 발행 및 보조금 계좌를 통한 직접 계좌이체(선금 50% 이내 지급 가능)로 진행됩니다.

[제안 포함 필수 사항]
- 지원 내용은 아래 기준으로 검토합니다.
- 사업자 업력 1년 이상 및 소프트웨어 개발 업종 요건 충족 여부를 적어 주세요.
- 다섯 묶음(A 설계 / B 고객 화면 / C 관리 화면 / D API·파일·스팸·메일 / E 설치·문서·하자 보수) 기준의 작업 내역별 금액과 합계(총 400만 원 맞춤), 작업 기간, 투입 인원을 적어 주세요.
- 400만 원 예산 기준 전체 범위 수행 여부 또는 후보 기능(13·19·27·34번 등) 조정안을 명확히 적어 주세요.
- 서버 환경(PHP 7.0 및 8.x 호환, GD 2.1 메모리 상향 및 썸네일 캐싱)을 고려한 구현 방안과 비슷한 작업 실적(링크·화면)을 적어 주세요.
- 적합한 기술 스택과 그 선택 이유를 적어 주세요.
지원 기회 분석

지원 전에 볼 것

핵심 요구사항

  • 기존 HTML·CSS·JS 시험판을 모바일 퍼스트 반응형으로 이전·정비 및 미리보기(펜·글상자 표시) 기능 유지
  • Flask 백엔드로 구성표 서버 저장, 접수번호 선발급 후 SMTP(465) 사내·고객 메일 발송
  • 그누보드 5.4 게시판(읽기 전용) 품목·분류 연동 및 첫 첨부 이미지 서버 썸네일 생성(GD 2.1, memory_limit 512MB)
  • 캡차·허니팟·레이트리밋 등 스팸 차단과 업로드 파일 실행 차단, 확장자·용량 제한
  • 비밀번호 해시 로그인 기반 관리 화면(구성표 목록·검색·상세·스팸 삭제·자동 삭제)
  • API 키 기반 서버 간 사내 연동 API 1종(구성표 JSON·파일 다운로드 URL 반환)

예상 산출물

  • 전체 원본 소스 및 git 변경 기록
  • 자사 리눅스 서버(Apache·PHP·MariaDB) 설치·동작 확인
  • README(설치·설정·구조·데이터 규격) 및 관리자 사용 설명서
  • 필수 확인 항목 테스트 결과(화면 캡처) 및 완료보고서
  • 검수 후 2개월 하자 보수

매력 포인트

  • 과업 명세가 묶음별로 매우 상세하고 데이터 규격이 준비되어 스펙이 명확함
  • 범위 조정(기능 덜어내기) 제안이 허용되어 협상 여지가 있음

확인할 점

  • 약 400만원 고정 예산 대비 과업 범위(백엔드·관리화면·API·썸네일·스팸·그누보드 연동·인프라 배포)가 과다하여 단가가 낮음
  • 11월 27일 완료 기한이 고정된 정부 지원사업으로 일정 압박이 크고 유연성이 없음
  • PHP 7.0.33·MariaDB 10.1 등 EOL된 구형 레거시 환경 연동 필요
Client signal

클라이언트 정보

회사 · 위시켓 / 지역 · 서울특별시 중구 / 고용형태 · CONTRACTOR
START THE LOOP · CHOOSE

시장과 사람의 답을 봤다면,
다음 결과물의 구조를 고릅니다.

한 번의 결과에 기대지 않고 다시 만들 수 있도록, 문제 발견부터 제작·배포·수익화까지 이어지는 전체 흐름을 익혀보세요.

TTJ CLASS에서 다음 구조 고르기 →
처리 중...