골프로(GOLPRO) 웹사이트 구축 설계 보고서
프로젝트 명: GOLPRO (대한민국 대표 골프 포럼형 플랫폼)
타겟 유저: 30~50대 남성 골퍼 (직관적 UI, 큰 폰트, 모바일 최적화 필수)
핵심 가치: 운영 효율 극대화(Smart Management), 수익성(Affiliate/Ads), 자산화(Data Archive)
Mobile First Design: 트래픽의 70% 이상이 발생하는 모바일 환경에 최적화된 UI/UX를 우선 설계합니다.
1. 사이트맵 (Sitemap) 구조
타겟 유저(30~50대 남성)의 이용 패턴을 분석하여, 정보 접근 단계를 최소화한 직관적인 구조로 설계했습니다.
Main (Home): 플랫폼 정체성 전달 및 최신 데이터 큐레이션
메인 배너 (신제품/뉴스/광고)
Smart Feed (실시간 WITB 자동 피드)
Forum Hot Feed ('내 장비 자랑' 및 '나의 스윙 진단' 인기 프리뷰)
Top-rated CC (유저 평점 상위 골프장 TOP 3)
GNB 1. WITB (What's In The Bag) - 프로 선수별 사용 장비 데이터 아카이브 (핵심 기능)
PGA
LPGA
KPGA
KLPGA (투어별 분류)
GNB 2. 골프장 리뷰 (CC Rating) - 핵심 기능
실시간 CC 랭킹 (별점 및 평점순)
CC 리얼 평가 (4대 항목: 코스, 서비스, 시설, 가성비 별점 시스템 및 토론)
GNB 3. 커뮤니티 (Forum) - 유저 체류 시간 증대 및 자발적 콘텐츠 생성
자유게시판: 골프 일상 및 정보 공유.
나의 스윙 진단: 유저 영상 업로드 및 댓글 피드백 (향후 개인 레슨 서비스 확장 기반).
내 장비 자랑: 클럽 구성 인증 및 실사용 리뷰 (구매 유도 데이터 축적).
GNB 4. 이벤트/공지
공지사항
진행 중인 이벤트
GNB 5. 연락하기 (Contact) - 운영 효율화를 위한 필터링 문의 시스템
- 광고/제휴 협업: 비즈니스 제안 전용 창구
- 장비 정보 제보/수정: 데이터 정확성 유지를 위한 유저 참여 창구
- 저작권/신고: 법적 리스크 및 서비스 불편 사항 관리
Member
로그인/회원가입 (SNS 연동)
마이페이지
2. 상세 정보구조 (IA) 및 기능 명세
A. 메인 페이지 (Main Experience)
방문자를 즉시 사로잡는 ‘시각적 임팩트’와 최신 정보를 전달하는 ‘정보성’의 균형을 맞춥니다.
Hero Section: 슬라이드 배너 (브랜드 아이덴티티가 담긴 이미지나 동영상 등록).
Quick Menu: 아이콘 형태의 바로가기 (PGA, LPGA, 스윙체크 등).
Smart Feed (Auto-Sync): 최신 등록된 선수(WITB) 콘텐츠를 2열(Mobile) / 4열(PC) 그리드로 노출.
Logic: 관리자가 데이터를 등록하는 즉시 최신순으로 자동 정렬 및 노출 (수동 배치 불필요).
UI: 대표 이미지 + 선수명 + 최근 우승 타이틀 노출.
인기 포럼글 / 골프장 랭킹 요약
B. WITB 상세 페이지 (Player Detail Viewer) - 핵심 개발 영역
이 프로젝트의 기술적 난이도가 가장 높은 영역으로, 어떤 관리 엔진을 선택하든 동일한 고품질 프론트엔드 디자인을 제공합니다.
선수 프로필 섹션: 선수 사진과 프로필 정보가 입체적인 유리 질감(Glassmorphism) 배경 위에 표시됩니다.
[System] 현재 사용 장비 (Current Gear): 상단에 카드 형태로 강조되어 노출, 각 카드에 마우스를 올리면 상세 보기 인터랙션이 반응합니다.
UI: 드라이버, 우드, 아이언, 웨지, 퍼터, 볼 순서로 상단 카드 정렬.
Interaction: 마우스 오버 시 상세 정보 확장.
Action: [최저가 보기] 버튼 클릭 시 → 제휴 링크(쿠팡/제조사)로 새 창 열기 (아웃링크).
[System] 과거 사용 장비 (Gear Archive):
Logic: 관리자 모드에서 ‘현재 사용중’ 체크박스가 OFF인 상품들을 ‘연도별’ 및 '등록순'으로 하단에 리스트 나열.
Effect: 스크롤 시 부드럽게 떠오르는(Staggered Fade-up) 애니메이션 적용.
Action: [최저가 보기] 버튼 클릭 시 → 제휴 링크(쿠팡/제조사)로 새 창 열기 (아웃링크).
C. 골프장 리뷰 (CC Rating) - 상품 엔진 우회 활용
쇼핑몰의 시스템을 재설계하여 ‘별점 기반의 리뷰 플랫폼’을 구축합니다.
구조: 골프장 하나를 하나의 '상품'으로 등록 (가격 0원, 구매 버튼 숨김 처리).
상세 화면: 골프장 전경 이미지, 별점 통계("평점 4.8 / 참여 1,364명" 자동 집계).
기능: 유저 별점/사진 리뷰 작성, 평점순/최신순 필터링.
D. 커뮤니티 (Forum)
UI 타입: 스윙 체크(동영상 갤러리형), 일반 토크(리스트형).
기능: 에디터 탑재(사진 첨부, 유튜브 링크 임베드), 댓글, 좋아요.
광고: 게시판 목록의 상단(Header) 또는 사이드바(Sidebar) 영역에 배너 블록 배치 (시스템 안정성 확보).
3. 관리자(Back-office) IA: WITB 듀얼 엔진 제안
“엑셀 없는 스마트 관리”를 실현하기 위해 두 가지 관리 방식을 모두 개발하여 제공합니다. 대표님께서 직접 사용해 보시고 가장 편한 방식을 선택하실 수 있습니다.
[Option A] 커스텀 GUI 엔진 (Headless Board)
"SNS 포스팅 방식의 직관성" 식스샵 관리자 페이지에 들어갈 필요 없이, 디자인 에디터 내 전용 입력 패널에서 인스타그램처럼 업로드합니다.
입력 방식 (
VESPUR_WITB_Uploader):전용 블록 패널에서
사진,이름,내용만 입력하고 [업로드] 버튼 클릭.클릭 즉시 메인 페이지와 상세 페이지 동시 생성 (자동화).
수정/삭제 방식 (Shortcut):
업로더 옆에 배치된 [매니저 블록]에서 수정할 선수 이름 옆 [관리] 버튼 클릭.
새 창으로 해당 선수의 수정 화면이 즉시 열림 (메뉴 탐색 불필요).
[Option B] 통합 관리 엔진 (Product Bypass)
"쇼핑몰 운영 방식의 익숙함" 별도의 업로드 도구 없이, 식스샵 기본 [상품 등록] 메뉴를 활용합니다.
입력 방식:
[상품 관리] > [상품 등록]에서
상품명(선수명),이미지(프로필),상세설명입력.가격을
0원으로 설정 후 저장.
특징:
저장 즉시 메인 피드와 상세 페이지 자동 노출.
기존 쇼핑몰 운영 경험이 있다면 별도 학습 불필요.
4. 데이터 마이그레이션 및 초기 세팅
문서에 언급된 '초기 데이터 10명(또는 상품 50개)' 약속을 이행하기 위한 프로세스입니다.
카테고리 트리 확정: 4대 투어(PGA, LPGA, KPGA, KLPGA) 우선 생성.
샘플 데이터(Seed Data) 입력:
타이거 우즈, 로리 맥길로이 등 대표 선수 4명 선정.
선택된 엔진(Option A or B)에 맞춰 각 선수당 장비 약 14개(Full Bag) 데이터 등록.
검증: 메인 페이지 피드 연동 및 상세 페이지 로직(현재/과거 장비 분기) 테스트.
CC 데이터: 국내 주요 골프장 5개 우선 '상품'으로 등록하여 리뷰 베이스 마련.
5. 기능 명세 (Functional Specification)
1) [관리자] 스마트 데이터 컨트롤 (Dual Engine)
Auto-Sync: 어떤 엔진(A/B)을 선택하든 데이터 입력 시 메인 페이지 피드와 상세 페이지가 실시간 동기화됩니다.
Zero-Code: 복잡한 코딩이나 페이지 수동 생성 없이, '입력' 행위만으로 사이트가 업데이트됩니다.
2) [사용자] 마이크로 인터랙션 (Micro-interactions)
2026 웹 트렌드를 반영하여 '살아있는 웹사이트'의 경험을 제공합니다.
Smart Cursor: 마우스 커서가 클릭 가능한 요소(장비, 버튼) 위에 올라가면 형태가 변하며 클릭을 유도합니다.
Smooth Scroll: 페이지 스크롤 시 툭툭 끊기지 않고 물 흐르듯 부드러운 관성 스크롤을 적용합니다.
Loading Animation: 고해상도 이미지가 로딩되는 동안 세련된 스켈레톤 UI를 보여줍니다.
Parallax Effect: 배경 이미지와 전경의 속도 차를 이용한 깊이감 형성.
Text Reveal: 스크롤 시 텍스트가 부드럽게 떠오르는 애니메이션.
댓글