리뷰픽(reviewpick) — 그누보드5 기반 블로그·인스타 체험단 플랫폼 (캠페인 60개·리뷰어/광고주 회원·신청→선정→리뷰 검수 흐름·체험후기 웹진·세로 영상후기)

• 사이트: https://reviewpick.oootool.com/
• 대표 이미지(업로드 칸 1개): https://reviewpick.oootool.com/data/portfolio/00_cover.png (로컬: /workspace/reviewpick/data/portfolio/00_cover.png)

소개

리뷰픽은 레뷰·리뷰노트·디너의여왕·미블 등 국내 체험단 사이트의 기능을 분석해서 그누보드5 위에 만든 블로그·인스타그램·유튜브 체험단 플랫폼 시연 사이트입니다. 코어는 거의 고치지 않았습니다. 테마(theme/reviewpick), extend/ 훅, 별도 rp_* 테이블, 게시판 스킨으로 구성했습니다. 캠페인·업체·회원·후기는 모두 시연용 가상 샘플입니다. 이미지와 영상도 생성한 것입니다.

주요 기능

• 캠페인: 방문형·배송형·구매평·기자단·프리미엄 5가지 유형이 있고, 블로그·인스타·릴스·유튜브·클립 채널을 지원합니다. 지역(8개)과 분류(11개) 필터, 최신·마감임박·인기·선정확률·포인트순 정렬을 넣었습니다.
• 캠페인 상세: 모집 인원과 신청 수, 진행 일정(모집→발표→체험→리뷰 마감), 제공 내역, 미션·키워드, 대가성 고지 문구, 신청서(채널 선택·한마디)가 있습니다.
• 신청→선정→리뷰 흐름: 리뷰어가 신청하면 광고주나 관리자가 선정합니다. 리뷰어가 리뷰 URL을 제출하면 검수(수정 요청·승인)를 거치고, 승인되면 포인트가 지급됩니다. 미제출이나 어뷰징에는 경고·블랙 패널티를 줍니다.
• 회원 유형: 리뷰어(인플루언서)는 가입할 때 채널(URL·방문자·팔로워)을 등록합니다. 광고주는 회사 정보를 입력하고 광고주 센터를 씁니다.
• 마이페이지(리뷰어): 신청 현황, 선정 결과, 리뷰 제출, 내 채널, 포인트, 출금 신청(관리자 승인), 찜, 패널티를 볼 수 있습니다.
• 광고주 센터: 내 캠페인별로 신청자 목록(채널·방문자·등급·한마디)을 보고, 선정·탈락 처리와 리뷰 검수를 하고, 광고주 문의를 남길 수 있습니다.
• 체험후기 게시판: 썸네일·요약·작성자·캠페인 태그가 있는 웹진형 목록입니다. 보기 화면에는 캠페인 카드(신청하기), 리뷰어 카드, 별점, 원문 링크, 관련 캠페인이 있습니다.
  • 글쓰기는 WYSIWYG 에디터(page-ai-editor)로 하고, 캠페인·채널·평점·원문 URL을 선택해 입력합니다.
• 영상후기 게시판: 세로(9:16) 10~15초 영상을 카드형 목록으로 보여줍니다. 카드를 누르면 쇼츠처럼 넘겨 보는 전체화면 플레이어가 열립니다(React).
  • 플레이어에서 좋아요와 댓글을 쓸 수 있습니다.
  • 영상을 업로드하면 ffmpeg로 첫 장면 포스터와 영상 길이를 자동으로 추출합니다.
• 프로필 이미지: 그누보드 표준 회원이미지(data/member_image)를 사용해서 게시판·댓글·카드 어디서나 같은 사진이 나옵니다. WEBP 업로드, 미리보기·변경·삭제를 지원합니다.
• 관리자: 캠페인, 신청, 회원(유형·채널), 패널티, 출금 승인 관리 메뉴를 추가했습니다.
• 기타: 광고주 문의 게시판(작성자 마스킹, 비밀글 강제), 공지·FAQ·1:1 문의, og:image와 파비콘, 검색엔진 차단(robots/llms.txt, noindex)을 적용했습니다.

디자인

• 실제 체험단 사이트들의 CSS를 직접 수집해 분석했습니다. 공통점은 브랜드색을 넓은 면이 아니라 글자·숫자·선택 상태에만 쓰고, 흰 배경에 회색 선, 작은 둥근 모서리(0~8px)를 쓰고, 그림자가 거의 없고, 사진을 먼저 보여준다는 점이었습니다.
• 이 분석에 맞춰 차분한 블루(#1d5fc4) 한 가지 색과 회색 계열로 디자인 토큰을 만들었습니다. 빨강(#d92d20)은 마감임박에만 씁니다. 그라데이션·글로우·큰 라운드·과한 알약 모양 라벨은 쓰지 않았습니다.
• 메인 화면: 배너 3장, 검색바, 원형 아이콘 메뉴로 구성했습니다. 캠페인 카드는 사진 아래에 채널·유형, 업체명, 제공 내역, 남은 기간과 신청 수만 넣었습니다.
• 반응형(PC 1280 / 모바일 390)이고, 텍스트 명도 대비는 WCAG AA 기준을 맞췄습니다.

화면 (PC)

화면 (모바일)

기술

그누보드5 · PHP 8.4 · MariaDB · Nginx · Pretendard · jQuery · React(영상 플레이어, Vite 빌드) · ffmpeg · Playwright(화면 점검)