표지 프로젝트 개요 브랜드 방향 현 사이트 분석 경쟁사 분석 사용자 분석 UX 전략 사이트맵(IA) 페이지별 상세 기획 모바일(375px) 구조 디자인 컨셉 구현 방향(HTML/CSS/JS) 기대효과 최종 제안 # 표지 (Cover) --- ### PREMIUM OCEAN GOLF EXPERIENCE # 동부산CC 웹사이트 리뉴얼 기획서 ### Dongbusan Country Club Website Renewal Proposal --- ### 부산의 자연과 바다가 만나는 ### 가장 품격 있는 라운드 경험 --- #### 프로젝트명 동부산CC 웹사이트 UX/UI 리뉴얼 프로젝트 #### 프로젝트 유형 실무형 웹사이트 구축 기획안 #### 제작 목적 브랜드 경험 강화 및 예약 전환 중심 디지털 플랫폼 구축 #### 작성일 2026. 06 #### 제작 커사맨(CURSAMAN) --- **Brand Concept** > Premium Ocean Golf Resort --- **Core Message** > “부산에서 가장 경험해보고 싶은 > 프리미엄 오션뷰 골프장” # 목차 (Contents) --- # CONTENTS ### 01. 프로젝트 개요 1.1 프로젝트 배경 1.2 프로젝트 목적 1.3 프로젝트 목표 1.4 핵심 컨셉 1.5 기대 효과 --- ### 02. 브랜드 방향 (Brand Direction) 2.1 브랜드 방향성 2.2 브랜드 핵심 가치 2.3 브랜드 포지셔닝 2.4 톤앤매너(Tone & Manner) 2.5 브랜드 핵심 메시지 --- ### 03. 현 사이트 분석 3.1 분석 목적 3.2 현재 사이트 구조 분석 3.3 현 사이트 강점 분석 3.4 문제점 분석 3.5 개선 필요 요소 3.6 분석 결론 --- ### 04. 경쟁사 분석 (Benchmark Analysis) 4.1 분석 목적 4.2 경쟁사 선정 기준 4.3 분석 항목 4.4 경쟁사 벤치마킹 분석 4.5 경쟁사 비교표 4.6 핵심 인사이트 4.7 분석 결론 --- ### 05. 사용자 분석 (User Analysis) 5.1 사용자 분석 목적 5.2 주요 타겟 사용자 정의 5.3 핵심 사용자 Persona 5.4 사용자 행동 흐름 분석 5.5 Pain Point 분석 5.6 사용자 요구사항 5.7 분석 결론 --- ### 06. UX 전략 (UX Strategy) 6.1 UX 전략 목적 6.2 UX 핵심 방향성 6.3 사용자 감정 흐름 설계 6.4 메인페이지 UX 전략 6.5 모바일 UX 전략 6.6 UX 전략 요약 6.7 UX 전략 결론 --- ### 07. 사이트맵 (IA) 7.1 사이트맵 설계 목적 7.2 IA 설계 원칙 7.3 최종 사이트맵 구조 7.4 상세 IA 구조 7.5 사용자 흐름 기반 IA 7.6 모바일 IA 구조 7.7 IA 설계 결론 --- ### 08. 페이지별 상세 기획 8.1 페이지별 기획 목적 8.2 메인페이지 8.3 예약하기 페이지 8.4 코스안내 페이지 8.5 시설안내 페이지 8.6 갤러리 페이지 8.7 이용안내 페이지 8.8 공지사항 페이지 8.9 문의하기 페이지 8.10 페이지별 기획 결론 --- ### 09. 모바일(375px) 구조 9.1 모바일 구조 설계 목적 9.2 모바일 UX 설계 원칙 9.3 모바일 메인 구조 9.4 모바일 Header 구조 9.5 Hero Banner 구조 9.6 브랜드 소개 구조 9.7 코스 Preview 구조 9.8 시설 소개 구조 9.9 갤러리 구조 9.10 후기 구조 9.11 하단 CTA 구조 9.12 모바일 페이지 구조 9.13 UX 전략 요약 9.14 모바일 구조 결론 --- ### 10. 디자인 컨셉 (Design Concept) 10.1 디자인 컨셉 목적 10.2 핵심 방향성 10.3 디자인 키워드 10.4 톤앤매너 10.5 비주얼 방향성 10.6 컬러 시스템 10.7 타이포그래피 10.8 UI 컴포넌트 방향 10.9 모바일 디자인 방향 10.10 디자인 컨셉 결론 --- ### 11. 구현 방향 (HTML/CSS/JavaScript) 11.1 구현 방향 개요 11.2 파일 구조 11.3 HTML 구현 방향 11.4 메인페이지 HTML 구조 11.5 CSS 구현 방향 11.6 CSS 변수 시스템 11.7 레이아웃 구조 11.8 Header 구현 11.9 Hero 구현 11.10 버튼 컴포넌트 11.11 카드 UI 11.12 모바일 반응형 11.13 JavaScript 방향 11.14 메뉴 구현 11.15 스크롤 인터랙션 11.16 코스 탭 기능 11.17 갤러리 모달 11.18 예약 CTA 구현 11.19 구현 우선순위 11.20 구현 결론 --- ### 12. 기대효과 12.1 기대효과 개요 12.2 브랜드 측면 기대효과 12.3 UX 측면 기대효과 12.4 예약 전환 측면 기대효과 12.5 운영 측면 기대효과 12.6 마케팅 측면 기대효과 12.7 기대효과 요약 12.8 기대효과 결론 --- ### 13. 최종 제안 (Final Proposal) 13.1 프로젝트 최종 제안 개요 13.2 최종 제안 방향 13.3 핵심 전략 요약 13.4 웹사이트 방향성 13.5 단계별 추진 제안 13.6 프로젝트 기대 결과 13.7 최종 결론 --- ### 부록 (Appendix) A. 사이트 와이어프레임 B. UI 컴포넌트 가이드 C. 모바일 화면 구조 D. 구현 구조 예시 # 1. 프로젝트 개요 ## 1.1 프로젝트명 **동부산CC 웹사이트 리뉴얼 프로젝트** 부제: **Premium Ocean Golf Experience 기반 디지털 플랫폼 구축** --- ## 1.2 프로젝트 배경 최근 골프 산업은 모바일 중심 예약 문화와 디지털 브랜딩 강화 흐름에 따라 기존 오프라인 중심 운영 방식에서 온라인 중심 플랫폼 구조로 빠르게 변화하고 있다. 특히 골프장 웹사이트는 단순한 정보 제공 채널이 아니라 브랜드 이미지를 형성하고 예약 행동을 유도하는 핵심 접점으로 역할이 확대되고 있다. 동부산CC는 부산 지역 내 우수한 접근성과 자연 친화적 코스, 오션뷰 기반 프리미엄 골프 경험이라는 차별화 요소를 보유하고 있음에도 현재 웹사이트에서는 이러한 강점이 충분히 전달되지 못하고 있다. 현재 사이트는 정보 전달 중심 구조에 머물러 있으며, 모바일 환경 최적화, 감성 중심 콘텐츠 경험, 예약 전환 UX(User Experience) 측면에서 개선이 필요한 상황이다. 이에 따라 본 프로젝트는 동부산CC의 브랜드 가치를 강화하고 사용자 경험을 향상시키기 위한 **웹사이트 리뉴얼 기획 및 UX/UI 개선 전략 수립**을 목적으로 한다. --- ## 1.3 프로젝트 목적 본 프로젝트의 주요 목적은 다음과 같다. ### 1) 브랜드 가치 강화 동부산CC가 보유한 자연환경, 오션뷰, 프리미엄 골프 경험 요소를 디지털 경험으로 연결하여 브랜드 이미지를 강화한다. ### 2) 사용자 경험(UX) 개선 기존 정보 중심 구조를 개선하여 사용자가 쉽고 직관적으로 정보를 탐색할 수 있도록 UX 구조를 재설계한다. ### 3) 모바일 환경 최적화 모바일 중심 사용 환경에 대응하기 위해 **375px 기반 Mobile First 구조**를 적용하여 접근성과 사용성을 향상시킨다. ### 4) 예약 전환율 향상 웹사이트 내 예약 CTA(Call To Action)를 강화하여 사용자가 자연스럽게 예약 행동까지 이어질 수 있는 구조를 설계한다. ### 5) 프리미엄 브랜드 경험 구축 단순 골프장 정보 제공이 아닌, 방문 전부터 프리미엄 경험을 기대하게 만드는 감성 중심 웹사이트를 구축한다. --- ## 1.4 프로젝트 목표 본 프로젝트는 다음과 같은 목표를 기반으로 진행된다. | 구분 | 목표 | | ------ | --------------- | | 브랜드 | 프리미엄 골프장 이미지 강화 | | 사용자 경험 | 정보 탐색 편의성 향상 | | 모바일 | 모바일 UX 최적화 | | 예약 | 예약 전환율 향상 | | 콘텐츠 | 감성 중심 브랜드 경험 강화 | --- ## 1.5 프로젝트 핵심 컨셉 ### Brand Keyword * Premium * Ocean View * Luxury Golf * Healing Nature * Premium Experience ### Core Message > **“부산의 자연과 바다가 만나는 > 가장 품격 있는 라운드 경험”** ### UX Concept 사용자의 행동 흐름을 고려한 > **관심 → 기대 → 몰입 → 신뢰 → 예약** 구조를 중심으로 설계한다. --- ## 1.6 기대 효과 본 프로젝트를 통해 다음 효과를 기대할 수 있다. ### 브랜드 측면 * 프리미엄 브랜드 이미지 강화 * 동부산CC 차별화 포인트 강화 ### 사용자 측면 * 쉽고 직관적인 정보 탐색 * 모바일 사용성 향상 ### 운영 측면 * 예약 전환 증가 * 고객 유입 강화 ### 마케팅 측면 * SNS 공유 증가 * 브랜드 신뢰도 향상 # 2. 브랜드 방향 (Brand Direction) ## 2.1 브랜드 방향성 동부산CC는 단순한 골프장이 아닌 부산의 자연과 바다가 함께하는 프리미엄 골프 경험 공간으로 포지셔닝 되어야 한다. 기존 골프장 웹사이트가 단순 정보 제공 중심에 머물렀다면, 동부산CC는 브랜드 감성과 프리미엄 경험을 전달하는 디지털 플랫폼으로 방향성을 전환할 필요가 있다. 특히 동부산CC가 가진 핵심 강점인 **오션뷰, 자연환경, 전략적인 코스 구성, 부산 접근성**은 타 골프장과 차별화되는 브랜드 자산이다. 따라서 웹사이트는 단순 시설 소개가 아닌 다음과 같은 브랜드 경험을 사용자에게 전달해야 한다. > **“골프를 치는 장소가 아니라 > 하루를 경험하는 공간”** --- ## 2.2 브랜드 핵심 가치 동부산CC 브랜드는 다음 네 가지 핵심 가치를 중심으로 설계한다. ### 1) Premium Experience (프리미엄 경험) 고객이 웹사이트를 방문하는 순간부터 품격 있는 경험을 느낄 수 있도록 설계한다. 단순 골프 예약이 아닌, 프리미엄 라운드 경험을 기대하게 만드는 감성 중심 UX를 구축한다. 핵심 키워드: * 고급스러움 * 프리미엄 * 품격 * 신뢰감 --- ### 2) Ocean View (오션뷰 차별화) 동부산CC의 가장 큰 경쟁력은 부산 바다를 배경으로 한 자연환경이다. 웹사이트에서는 오션뷰 중심 이미지와 콘텐츠를 적극 활용하여 사용자가 실제 라운드를 상상할 수 있도록 설계한다. 핵심 키워드: * 오션뷰 * 자연 * 개방감 * 힐링 --- ### 3) Healing Nature (자연 속 휴식) 골프는 단순 스포츠가 아니라 휴식과 힐링의 경험이기도 하다. 따라서 동부산CC는 자연과 함께하는 여유로운 하루라는 감성을 전달하는 브랜드 방향을 가져야 한다. 핵심 키워드: * 힐링 * 여유 * 자연 친화 * 감성 경험 --- ### 4) Strategic Golf (전략적 코스 경험) 코스별 난이도와 특징을 강조하여 골프 본연의 재미를 전달한다. 단순한 코스 소개가 아니라 플레이 기대감을 형성하는 콘텐츠 구조가 필요하다. 핵심 키워드: * 전략성 * 플레이 재미 * 도전 * 경험 --- ## 2.3 브랜드 포지셔닝 동부산CC는 다음과 같은 브랜드 위치를 목표로 한다. ### 기존 인식 > “부산의 골프장” ### 리뉴얼 후 목표 인식 > **“부산에서 가장 경험해보고 싶은 프리미엄 오션뷰 골프장”** 즉, 단순 골프 시설 경쟁이 아닌 > **‘경험 가치 중심 브랜드’** 로 포지셔닝 한다. --- ## 2.4 브랜드 톤앤매너 (Tone & Manner) 웹사이트 디자인은 다음 감성을 중심으로 구성한다. ### Tone * Premium * Luxury * Elegant * Calm * Trust ### Visual Style * 풀스크린 오션뷰 이미지 * 넓은 여백 * 고급 타이포그래피 * 딥그린 + 골드 컬러 * 자연 중심 이미지 ### UX Direction 사용자가 웹사이트를 방문했을 때 다음 감정을 느끼도록 설계한다. > “와… 여기 한번 가보고 싶다” > “부산에 이런 골프장이 있었네” > “예약해보고 싶다” --- ## 2.5 브랜드 핵심 메시지 ### Main Message > **부산의 자연과 바다가 만나는 > 가장 품격 있는 라운드 경험** ### Sub Message > 단순한 골프장이 아닌 > 특별한 하루를 경험하는 공간 --- ## 2.6 브랜드 전략 방향 본 프로젝트의 브랜드 전략은 다음 흐름을 따른다. ### 관심 유도 오션뷰 중심 강한 비주얼 ↓ ### 기대 형성 코스 및 시설 경험 강조 ↓ ### 신뢰 형성 프리미엄 서비스 이미지 제공 ↓ ### 행동 유도 예약 CTA 강화 ↓ ### 예약 전환 최종 예약 행동 연결 이를 통해 동부산CC 웹사이트는 단순 정보 제공 사이트가 아닌 > **브랜드 경험 + 예약 전환 플랫폼** 으로 전환하는 것을 목표로 한다. # 3. 현 사이트 분석 ## 3.1 현 사이트 분석 목적 본 분석은 현재 동부산CC 웹사이트의 구조와 사용자 경험(UX)을 검토하고, 향후 리뉴얼 방향 수립을 위한 개선 포인트를 도출하는 데 목적이 있다. 분석 기준은 다음과 같다. * 브랜드 전달력 * 사용자 경험(UX) * 사용자 인터페이스(UI) * 모바일 최적화 * 콘텐츠 구성 * 예약 전환 구조 * 정보 접근성 이를 기반으로 동부산CC 웹사이트가 단순 정보 제공 사이트를 넘어 **브랜드 경험 중심 플랫폼**으로 개선될 수 있는 방향을 제안한다. --- ## 3.2 현 사이트 구조 분석 현재 동부산CC 웹사이트는 골프장 소개, 코스 안내, 예약 안내, 공지사항 등 기본적인 정보 제공 기능 중심 구조로 운영되고 있다. 주요 메뉴는 다음과 같이 구성되어 있다. ### 현재 메뉴 구조 * 메인 * 예약안내 * 코스안내 * 클럽소개 * 이용안내 * 공지사항 * 고객센터 기본적인 정보 탐색은 가능하지만 사용자의 감정적 몰입과 예약 행동 유도 측면에서는 개선 여지가 존재한다. --- ## 3.3 현 사이트 강점 분석 ### 1) 오션뷰 중심 자연환경 강점 동부산CC의 가장 큰 강점은 부산의 자연과 바다를 함께 경험할 수 있는 오션뷰 코스이다. 특히 일부 홀에서는 개방감 있는 자연환경을 경험할 수 있으며, 이는 타 골프장과 차별화되는 핵심 경쟁력으로 볼 수 있다. 그러나 현재 웹사이트에서는 이러한 강점이 충분히 강조되지 못하고 있다. ### 개선 방향 > 오션뷰 중심 Hero 이미지 강화 > 감성 중심 비주얼 콘텐츠 확대 --- ### 2) 프리미엄 골프장 잠재력 동부산CC는 코스 구성, 시설, 자연환경 측면에서 프리미엄 브랜드 포지셔닝이 가능한 요소를 보유하고 있다. 하지만 현재 웹사이트는 이러한 프리미엄 이미지를 충분히 전달하지 못하고 있으며 정보 중심 구조에 머무르고 있다. ### 개선 방향 > 브랜드 경험 중심 UX 강화 > 럭셔리 골프 리조트 감성 적용 --- ### 3) 기본 정보 접근 가능 코스 소개, 시설 소개, 예약 관련 정보 등 기본적인 정보는 확인 가능하다. 다만 콘텐츠 구조와 UI 측면에서 사용자 경험 개선 필요성이 존재한다. --- ## 3.4 현 사이트 문제점 분석 ### 문제점 1. 메인페이지 임팩트 부족 현재 메인페이지는 방문자에게 강한 첫인상을 제공하지 못하는 구조로 보인다. 골프장 웹사이트의 경우 첫 화면(Hero Section)은 브랜드 경험 형성에 매우 중요하지만, 현재는 감성적 몰입 요소가 부족한 편이다. ### 현재 상태 * 비주얼 몰입도 낮음 * 브랜드 감성 전달 부족 * 방문 동기 유발 약함 ### 개선 방향 > 풀스크린 오션뷰 중심 Hero 구성 > 강한 브랜드 메시지 적용 예시: **“부산의 자연과 바다가 만나는 가장 품격 있는 라운드 경험”** --- ### 문제점 2. 예약 전환 구조 부족 현재 사이트는 예약 행동으로 자연스럽게 이어지는 UX 흐름이 부족하다. 사용자가 정보를 탐색한 뒤 예약까지 연결되는 과정에서 CTA(Call To Action) 노출 빈도가 낮은 편이다. ### 현재 상태 * 예약 버튼 노출 부족 * 행동 유도 구조 약함 * 예약 흐름 단절 ### 개선 방향 각 섹션마다 > [실시간 예약하기] CTA 버튼 반복 배치 --- ### 문제점 3. 모바일 UX 최적화 부족 최근 사용자 환경은 모바일 중심으로 변화하고 있으나, 현재 구조는 모바일 몰입감 측면에서 개선 가능성이 있다. 특히 다음 요소 보완이 필요하다. * 버튼 크기 * 콘텐츠 가독성 * 이미지 몰입도 * 탐색 편의성 ### 개선 방향 > Mobile First 구조 적용 > 375px 기준 UI 설계 --- ### 문제점 4. 감성 콘텐츠 부족 현재 사이트는 정보 전달 기능은 수행하고 있으나 사용자의 감정을 자극하는 콘텐츠 흐름은 상대적으로 부족하다. 골프장 선택 시 사용자는 단순 가격보다 다음 요소를 중요하게 고려한다. * 자연환경 * 풍경 * 플레이 기대감 * 프리미엄 경험 ### 개선 방향 단순 소개형 구조가 아닌 > **스토리 기반 UX 구조** 적용 흐름: > 관심 → 기대 → 몰입 → 신뢰 → 예약 --- ## 3.5 개선 필요 요소 요약 | 분석 항목 | 현재 상태 | 개선 방향 | | ------ | ------ | --------------- | | 브랜드 전달 | 약함 | 프리미엄 감성 강화 | | 메인 비주얼 | 임팩트 부족 | 오션뷰 Hero 강화 | | 예약 UX | CTA 부족 | 예약 전환 구조 강화 | | 모바일 | 최적화 미흡 | Mobile First 적용 | | 콘텐츠 | 정보 중심 | 감성 중심 콘텐츠 | | UX 흐름 | 단절 | 스토리 UX 적용 | --- ## 3.6 현 사이트 분석 결론 동부산CC 웹사이트는 기본적인 정보 제공 기능은 수행하고 있으나, 브랜드 경험 전달과 예약 행동 유도 측면에서는 개선 가능성이 존재한다. 특히 동부산CC가 가진 **오션뷰, 자연환경, 프리미엄 경험 요소**는 강력한 브랜드 자산임에도 현재 웹사이트에서는 충분히 활용되지 못하고 있다. 따라서 리뉴얼 방향은 단순 UI 개선 수준이 아니라, > **브랜드 경험 중심 디지털 플랫폼 전환** 을 목표로 설정해야 한다. 이를 위해서는 * 프리미엄 감성 디자인 * 모바일 퍼스트 UX * 예약 전환 구조 * 스토리 기반 콘텐츠 흐름 이 핵심 전략으로 적용되어야 한다. # 4. 경쟁사 분석 (Benchmark Analysis) ## 4.1 경쟁사 분석 목적 본 분석은 국내 프리미엄 골프장 웹사이트 사례를 비교 분석하여 동부산CC 웹사이트 리뉴얼 방향을 도출하는 데 목적이 있다. 특히 다음 항목을 중심으로 분석하였다. * 브랜드 전달력 * 메인 비주얼 * 예약 UX * 모바일 최적화 * 코스 소개 방식 * 감성 콘텐츠 * 예약 전환 구조 이를 통해 동부산CC에 적용 가능한 UX/UI 전략을 도출하고자 한다. --- ## 4.2 경쟁사 선정 기준 동부산CC와 유사한 프리미엄 골프 경험 제공이 가능한 골프장을 중심으로 분석을 진행하였다. ### 선정 기준 1. 프리미엄 브랜드 이미지 2. 자연환경 강점 3. 코스 차별화 요소 4. 모바일 UX 완성도 5. 예약 경험 우수 사례 ### 분석 대상 * 제주 고급 골프 리조트 * 국내 프리미엄 골프장 * 오션뷰 및 자연 중심 골프장 * UX/UI 우수 사례 사이트 --- ## 4.3 경쟁사 분석 항목 본 분석은 다음 기준으로 평가하였다. | 평가 항목 | 분석 기준 | | ------ | ------------- | | 브랜드 전달 | 브랜드 이미지 전달 수준 | | 메인 비주얼 | 첫 화면 임팩트 | | 코스 소개 | 플레이 기대감 형성 | | 예약 UX | 예약 접근 편의성 | | 모바일 UX | 모바일 사용성 | | 콘텐츠 감성 | 감성적 경험 전달 | | CTA | 예약 행동 유도 | --- ## 4.4 경쟁사 벤치마킹 분석 ### 경쟁사 A – 프리미엄 리조트형 골프장 #### 강점 * 풀스크린 Hero 이미지 사용 * 프리미엄 감성 강함 * 자연환경 중심 브랜딩 * 예약 버튼 노출 우수 #### 약점 * 콘텐츠 탐색 깊이 부족 * 정보 접근 속도 느림 #### 적용 포인트 > 첫 화면 오션뷰 Hero 구성 > 브랜드 감성 강화 --- ### 경쟁사 B – 모바일 UX 우수 골프장 #### 강점 * 모바일 메뉴 탐색 편리 * 큰 버튼 구조 * 직관적 정보 배치 #### 약점 * 브랜드 감성 부족 * 비주얼 몰입감 낮음 #### 적용 포인트 > Mobile First UI 적용 > 큰 CTA 버튼 구조 --- ### 경쟁사 C – 코스 경험 중심 골프장 #### 강점 * 홀별 코스 상세 설명 우수 * 플레이 기대감 형성 * 코스 몰입도 높음 #### 약점 * 예약 연결 구조 약함 #### 적용 포인트 > 홀별 상세 콘텐츠 강화 > 플레이 스토리 강조 --- ### 경쟁사 D – 럭셔리 브랜드형 골프장 #### 강점 * 호텔 브로슈어 수준 디자인 * 프리미엄 브랜드 이미지 강함 * 고급 타이포 사용 #### 약점 * 정보 접근성 일부 부족 #### 적용 포인트 > 동부산CC 브랜드 고급화 > 딥그린 + 골드 톤 적용 --- ## 4.5 경쟁사 비교표 | 항목 | 경쟁사 A | 경쟁사 B | 경쟁사 C | 경쟁사 D | 동부산CC 적용 방향 | | ------ | ----- | ----- | ----- | ----- | --------------- | | 메인 비주얼 | 매우 우수 | 보통 | 우수 | 매우 우수 | 오션뷰 Hero 강화 | | 모바일 UX | 우수 | 매우 우수 | 보통 | 우수 | Mobile First 적용 | | 코스 소개 | 보통 | 보통 | 매우 우수 | 우수 | 홀별 상세 강화 | | 브랜드 감성 | 매우 우수 | 낮음 | 보통 | 매우 우수 | 프리미엄 방향 | | 예약 UX | 우수 | 우수 | 보통 | 우수 | CTA 강화 | --- ## 4.6 벤치마킹 핵심 인사이트 경쟁사 분석 결과 다음 요소가 중요하게 나타났다. ### 1) 강한 첫 화면 경험 프리미엄 골프장일수록 메인 Hero 영역에서 브랜드 감성을 강하게 전달하고 있었다. 특히 자연환경 중심 풀스크린 이미지가 브랜드 신뢰 형성에 중요한 역할을 수행하였다. ### 동부산CC 적용 방향 > 오션뷰 중심 Hero 구성 --- ### 2) 모바일 UX 중요성 대부분 사용자는 모바일 환경에서 골프장 정보를 탐색하는 경향이 증가하고 있다. 따라서 모바일 UI 완성도가 예약 행동에 직접적인 영향을 미친다. ### 동부산CC 적용 방향 > 375px Mobile First 설계 --- ### 3) 코스 몰입 콘텐츠 필요 코스 소개가 단순 이미지 나열 수준일 경우 사용자의 플레이 기대감 형성이 어렵다. ### 동부산CC 적용 방향 > 홀별 상세 콘텐츠 제공 > 플레이 경험 중심 설명 강화 --- ### 4) 예약 행동 유도 구조 우수한 골프장 사이트는 예약 버튼(CTA)이 자연스럽게 반복 노출되었다. ### 동부산CC 적용 방향 모든 주요 섹션 하단에 > [실시간 예약하기] CTA 반복 배치 --- ## 4.7 경쟁사 분석 결론 경쟁사 분석 결과, 프리미엄 골프장 웹사이트의 성공 요인은 단순 정보 제공이 아닌 **브랜드 경험 중심 UX 설계**에 있음을 확인할 수 있었다. 특히 다음 요소가 핵심 경쟁력으로 나타났다. * 강한 Hero 비주얼 * 감성 중심 브랜드 경험 * 모바일 최적화 * 플레이 기대감 형성 * 자연스러운 예약 유도 동부산CC는 오션뷰와 자연환경이라는 차별화 자산을 보유하고 있으므로, > **‘프리미엄 오션뷰 골프 경험’ 중심 웹사이트** 로 포지셔닝 하는 전략이 적합할 것으로 판단된다. # 5. 사용자 분석 (User Analysis) ## 5.1 사용자 분석 목적 본 분석은 동부산CC 웹사이트를 이용하는 주요 고객층의 특성과 행동 패턴을 파악하고, 이를 기반으로 사용자 경험(UX) 전략 수립 방향을 도출하는 데 목적이 있다. 골프장 웹사이트는 단순 정보 제공 사이트가 아니라 사용자의 기대감을 형성하고 최종 예약 행동까지 연결해야 하는 플랫폼이다. 따라서 본 프로젝트에서는 사용자의 정보 탐색 방식, 행동 흐름, 불편 요소(Pain Point)를 중심으로 분석을 진행하였다. --- ## 5.2 주요 타겟 사용자 정의 동부산CC의 주요 이용 고객은 다음 세 그룹으로 정의할 수 있다. ### 1) 프리미엄 골프 고객층 #### 특징 * 40~60대 중심 * 골프 경험 풍부 * 품질 중심 선택 * 자연환경 중요 * 코스 난이도 고려 #### 주요 니즈 * 코스 퀄리티 * 프리미엄 시설 * 편리한 예약 * 신뢰감 있는 정보 #### 행동 패턴 검색 → 코스 확인 → 시설 확인 → 예약 #### UX 필요 요소 > 코스 중심 콘텐츠 강화 > 프리미엄 감성 디자인 --- ### 2) 기업 VIP 및 접대 고객층 #### 특징 * 기업 고객 * 접대 및 모임 목적 * 브랜드 이미지 중요 #### 주요 니즈 * 품격 있는 장소 * 고급 시설 * 서비스 수준 * 접근성 #### 행동 패턴 브랜드 확인 → 시설 확인 → 예약 문의 #### UX 필요 요소 > 고급 브랜드 이미지 강조 > 클럽하우스 및 시설 콘텐츠 강화 --- ### 3) 관광형 골프 고객층 #### 특징 * 부산 방문 고객 * 여행 + 골프 목적 * 오션뷰 선호 #### 주요 니즈 * 풍경 * 힐링 요소 * 사진 콘텐츠 * 접근성 #### 행동 패턴 검색 → 사진 확인 → 후기 확인 → 예약 #### UX 필요 요소 > 오션뷰 중심 Hero > 감성 이미지 강화 --- ## 5.3 핵심 사용자 Persona ### Persona A – 프리미엄 골프 고객 #### 이름 김OO (54세) #### 직업 자영업 / 전문직 #### 특징 주말 라운딩을 즐기며 코스 품질과 시설 수준을 중요하게 생각한다. 단순 가격보다 자연환경과 플레이 경험을 더 중요하게 고려한다. #### 목표 > “좋은 골프장에서 제대로 라운딩하고 싶다.” #### Pain Point * 코스 정보 부족 * 홀별 특징 이해 어려움 * 시설 정보 부족 #### UX 전략 > 코스 콘텐츠 강화 > 홀별 상세 설명 제공 --- ### Persona B – 기업 VIP 고객 #### 이름 박OO (49세) #### 직업 기업 임원 #### 특징 거래처 접대 및 모임 장소 선택 시 브랜드 이미지와 품격을 중요하게 고려한다. #### 목표 > “거래처를 만족시킬 수 있는 장소를 찾고 싶다.” #### Pain Point * 고급감 부족 * 시설 정보 부족 #### UX 전략 > 럭셔리 감성 강화 > 클럽하우스 콘텐츠 강조 --- ### Persona C – 관광 골프 고객 #### 이름 이OO (45세) #### 직업 회사원 #### 특징 부산 여행 중 특별한 골프 경험을 원한다. SNS 공유와 감성 경험을 중요하게 생각한다. #### 목표 > “부산에서 특별한 골프 경험을 하고 싶다.” #### Pain Point * 풍경 정보 부족 * 사진 콘텐츠 부족 #### UX 전략 > 오션뷰 중심 콘텐츠 > 감성 Hero 강화 --- ## 5.4 사용자 행동 흐름 분석 동부산CC 고객의 일반적인 행동 흐름은 다음과 같다. ### 1단계 – 유입 * 네이버 검색 * 지인 추천 * SNS * 골프 예약 플랫폼 ↓ ### 2단계 – 첫인상 형성 메인 Hero 확인 브랜드 이미지 판단 ↓ ### 3단계 – 정보 탐색 * 코스 확인 * 시설 확인 * 위치 확인 * 이용 요금 확인 ↓ ### 4단계 – 신뢰 형성 * 사진 확인 * 후기 확인 * 코스 특징 확인 ↓ ### 5단계 – 예약 행동 예약 버튼 클릭 또는 전화 문의 --- ## 5.5 사용자 Pain Point 분석 현재 사용자가 경험할 가능성이 있는 주요 문제는 다음과 같다. | 항목 | Pain Point | | ----- | ---------- | | 메인페이지 | 첫인상 약함 | | 코스 정보 | 플레이 기대감 부족 | | 시설 정보 | 고급감 전달 부족 | | 모바일 | 탐색 피로 | | 예약 | 행동 유도 부족 | --- ## 5.6 사용자 요구사항 정리 사용자가 웹사이트에서 기대하는 요소는 다음과 같다. ### 1) 강한 첫인상 > “여기 한번 가보고 싶다” 느낌 형성 --- ### 2) 직관적 정보 탐색 쉽고 빠르게 * 코스 * 예약 * 시설 정보 접근 가능 --- ### 3) 플레이 기대감 홀별 특징과 풍경을 통해 기대감 형성 --- ### 4) 신뢰감 프리미엄 골프장이라는 인식 강화 --- ### 5) 쉬운 예약 예약 행동까지 자연스럽게 연결 --- ## 5.7 사용자 분석 결론 동부산CC의 주요 고객은 단순 가격보다 **경험 가치와 브랜드 신뢰**를 중요하게 생각하는 경향이 있다. 특히 다음 요소가 핵심적으로 요구된다. * 프리미엄 감성 * 자연환경 강조 * 오션뷰 콘텐츠 * 직관적 정보 탐색 * 쉬운 예약 구조 따라서 웹사이트는 단순 정보 제공 중심 구조가 아니라 > **“브랜드 경험 + 예약 전환 중심 UX 플랫폼”** 으로 설계되어야 한다. # 6. UX 전략 (UX Strategy) ## 6.1 UX 전략 목적 본 프로젝트의 UX(User Experience) 전략은 단순 정보 제공 중심 웹사이트를 넘어 사용자의 감정과 행동을 고려한 **브랜드 경험 중심 디지털 플랫폼** 구축에 목적이 있다. 기존 골프장 웹사이트는 주로 정보 전달 기능에 집중되어 있으나, 동부산CC 웹사이트는 사용자가 방문하는 순간부터 기대감을 형성하고 최종적으로 예약 행동까지 자연스럽게 이어질 수 있도록 설계되어야 한다. 따라서 본 프로젝트에서는 사용자의 감정 흐름과 행동 흐름을 중심으로 UX 전략을 수립하였다. --- ## 6.2 UX 핵심 방향성 동부산CC UX 전략의 핵심 방향은 다음과 같다. ### 1) 브랜드 경험 중심 UX 골프장 웹사이트는 단순한 시설 소개가 아니라 사용자가 실제 라운드를 기대하게 만드는 경험을 제공해야 한다. 동부산CC는 오션뷰와 자연환경이라는 강점을 보유하고 있으므로, 웹사이트 역시 이러한 경험을 디지털 환경에서 전달해야 한다. ### UX 목표 > “와… 여기 한번 가보고 싶다” > “부산에 이런 골프장이 있었네” > “예약해보고 싶다” --- ### 2) Mobile First UX 최근 사용자 환경은 모바일 중심으로 변화하고 있으며 골프장 검색과 예약 또한 모바일 비중이 증가하고 있다. 따라서 본 프로젝트는 **375px 기반 Mobile First 설계**를 적용한다. ### 핵심 전략 * 큰 버튼 * 쉬운 메뉴 탐색 * 짧고 직관적인 콘텐츠 * 카드형 UI 구조 * 빠른 예약 접근 --- ### 3) 예약 전환 중심 UX 사용자는 사이트 탐색 과정에서 자연스럽게 예약 행동으로 연결되어야 한다. 이를 위해 웹사이트 주요 영역마다 CTA(Call To Action)를 반복 노출하여 예약 전환율을 향상시킨다. ### CTA 전략 * Hero 영역 * 코스 안내 * 시설 소개 * 후기 영역 * 하단 Footer 모든 핵심 섹션에 > [실시간 예약하기] 버튼 반복 배치 --- ## 6.3 사용자 감정 흐름 설계 본 프로젝트에서는 사용자의 감정 흐름을 고려한 **스토리 기반 UX 구조**를 적용한다. ### UX Flow ### 1단계 – 관심 (Interest) #### 목적 사용자의 시선을 끌고 첫인상을 형성한다. #### UX 전략 * 오션뷰 중심 Hero 이미지 * 강한 카피 문구 * 브랜드 감성 전달 #### 사용자 감정 > “와… 멋진데?” --- ### 2단계 – 기대 (Expectation) #### 목적 골프장에 대한 기대감을 형성한다. #### UX 전략 * 코스 소개 * 시설 소개 * 자연환경 강조 #### 사용자 감정 > “어떤 곳인지 궁금하다” --- ### 3단계 – 몰입 (Immersion) #### 목적 실제 플레이 경험을 상상하게 만든다. #### UX 전략 * 홀별 콘텐츠 * 코스 갤러리 * 플레이 감성 콘텐츠 #### 사용자 감정 > “여기서 라운딩하면 좋겠다” --- ### 4단계 – 신뢰 (Trust) #### 목적 예약에 대한 심리적 안정감을 형성한다. #### UX 전략 * 시설 정보 * 이용 안내 * 브랜드 이미지 강화 #### 사용자 감정 > “믿고 갈 수 있겠다” --- ### 5단계 – 예약 (Conversion) #### 목적 최종 예약 행동으로 연결한다. #### UX 전략 * CTA 반복 노출 * 예약 버튼 강조 * 쉬운 예약 구조 #### 사용자 행동 > 예약 버튼 클릭 --- ## 6.4 메인페이지 UX 전략 메인페이지는 방문자의 첫인상을 결정하는 가장 중요한 영역이다. 따라서 다음 흐름으로 설계한다. ### Section 1. Hero #### 목표 브랜드 임팩트 형성 #### 구성 * 오션뷰 전경 * 강한 브랜드 카피 * 예약 버튼 카피 예시: > **부산의 자연과 바다가 만나는 > 가장 품격 있는 라운드 경험** --- ### Section 2. 브랜드 가치 #### 목표 동부산CC 차별화 요소 전달 #### 구성 * Ocean View * Premium Experience * Strategic Course * Healing Nature --- ### Section 3. 코스 경험 #### 목표 플레이 기대감 형성 #### 구성 * EAST COURSE * WEST COURSE * SOUTH COURSE 홀별 특징 소개 --- ### Section 4. 시설 소개 #### 목표 프리미엄 이미지 강화 #### 구성 * 클럽하우스 * 레스토랑 * 라운지 * 락커룸 --- ### Section 5. 갤러리 #### 목표 감성 경험 제공 #### 구성 * 계절별 코스 * 오션뷰 * 플레이 이미지 --- ### Section 6. 후기 및 신뢰 #### 목표 예약 심리 강화 #### 구성 * 고객 후기 * 추천 메시지 --- ### Section 7. 예약 CTA #### 목표 최종 행동 유도 구성: > 지금 > 동부산CC에서 특별한 하루를 경험하세요. [실시간 예약하기] --- ## 6.5 모바일 UX 전략 모바일 사용자는 빠른 정보 탐색을 선호한다. 따라서 다음 UX 원칙을 적용한다. ### UI 원칙 * 큰 버튼 * 카드형 레이아웃 * 짧은 텍스트 * 큰 이미지 * 쉬운 메뉴 구조 ### 모바일 메뉴 구조 햄버거 메뉴 기반 * 메인 * 예약 * 코스안내 * 시설안내 * 갤러리 * 공지사항 * 문의 --- ## 6.6 UX 전략 요약 | 항목 | 전략 방향 | | ------ | ------------ | | 브랜드 UX | 프리미엄 경험 강화 | | 모바일 UX | Mobile First | | 예약 UX | CTA 반복 노출 | | 콘텐츠 UX | 감성 중심 콘텐츠 | | 코스 UX | 플레이 기대감 강화 | | 메인 UX | 오션뷰 Hero 중심 | --- ## 6.7 UX 전략 결론 동부산CC 웹사이트는 단순한 골프장 소개 사이트가 아니라 > **‘브랜드 경험 + 예약 전환’ 중심 UX 플랫폼** 으로 설계되어야 한다. 이를 위해 사용자의 감정 흐름을 고려한 > **관심 → 기대 → 몰입 → 신뢰 → 예약** UX 구조를 적용하며, 오션뷰 중심 감성 콘텐츠와 모바일 퍼스트 UX를 통해 최종 예약 행동까지 자연스럽게 연결하는 방향으로 설계한다. # 7. 사이트맵(IA : Information Architecture) ## 7.1 사이트맵 설계 목적 사이트맵(IA)은 웹사이트 내 정보 구조를 체계적으로 설계하여 사용자가 원하는 정보를 쉽고 빠르게 탐색할 수 있도록 구성하는 단계이다. 특히 골프장 웹사이트는 정보 탐색뿐 아니라 **브랜드 경험과 예약 행동 유도**가 중요하기 때문에 단순 메뉴 구조가 아닌 사용자 행동 흐름 중심으로 설계해야 한다. 동부산CC 사이트맵은 다음 목표를 기반으로 설계한다. ### 목표 1. 사용자 탐색 편의성 향상 2. 모바일 중심 구조 최적화 3. 브랜드 경험 강화 4. 예약 전환 흐름 강화 5. 콘텐츠 탐색 효율성 향상 --- ## 7.2 IA 설계 원칙 동부산CC 정보구조는 다음 UX 원칙을 기반으로 설계한다. ### 1) 단순하고 직관적인 구조 메뉴 단계가 깊어질수록 사용자의 이탈 가능성이 증가한다. 따라서 최대 2Depth 중심 구조를 적용하여 탐색 피로를 최소화한다. ### 적용 원칙 > 최대 2Depth 예: 메인 → 코스안내 → EAST COURSE --- ### 2) 예약 중심 정보 구조 사용자는 사이트 탐색 과정에서 자연스럽게 예약 행동으로 연결되어야 한다. 따라서 예약 메뉴를 독립적 핵심 메뉴로 배치한다. ### UX 목표 > 탐색 중 언제든 예약 가능 --- ### 3) 모바일 우선 구조 375px 기준 모바일 사용자 환경에 최적화한다. 햄버거 메뉴 기준으로 정보 접근성을 고려한다. --- ## 7.3 최종 사이트맵 구조 ### Depth 1 (메인 메뉴) ```plaintext HOME ├── 예약하기 ├── 코스안내 ├── 시설안내 ├── 갤러리 ├── 이용안내 ├── 공지사항 └── 문의하기 ``` --- ## 7.4 상세 IA 구조 ### 1. HOME (메인) #### 목적 브랜드 첫인상 형성 및 예약 유도 #### 구성 ```plaintext HOME ├── Hero Banner ├── 브랜드 소개 ├── 코스 미리보기 ├── 시설 소개 ├── 갤러리 Preview ├── 후기 영역 └── 예약 CTA ``` #### UX 목표 > “와… 여기 한번 가보고 싶다” --- ### 2. 예약하기 #### 목적 빠른 예약 행동 유도 #### 구성 ```plaintext 예약하기 ├── 예약안내 ├── 예약방법 ├── 예약 유의사항 └── 실시간 예약 연결 ``` #### UX 목표 > 쉽고 빠른 예약 --- ### 3. 코스안내 #### 목적 플레이 기대감 형성 #### 구성 ```plaintext 코스안내 ├── EAST COURSE │ ├── 홀별 소개 │ ├── 코스 특징 │ └── 코스 갤러리 │ ├── WEST COURSE │ ├── 홀별 소개 │ ├── 코스 특징 │ └── 코스 갤러리 │ └── SOUTH COURSE ├── 홀별 소개 ├── 코스 특징 └── 코스 갤러리 ``` #### UX 목표 > “여기서 플레이하고 싶다” --- ### 4. 시설안내 #### 목적 프리미엄 브랜드 신뢰 형성 #### 구성 ```plaintext 시설안내 ├── 클럽하우스 ├── 레스토랑 ├── 락커룸 ├── 라운지 └── 연습시설 ``` #### UX 목표 > 프리미엄 골프 경험 전달 --- ### 5. 갤러리 #### 목적 감성 콘텐츠 강화 #### 구성 ```plaintext 갤러리 ├── 코스 갤러리 ├── 오션뷰 갤러리 ├── 계절별 풍경 └── 시설 사진 ``` #### UX 목표 > 감정적 몰입 형성 --- ### 6. 이용안내 #### 목적 정보 탐색 편의성 제공 #### 구성 ```plaintext 이용안내 ├── 이용요금 ├── 운영시간 ├── 이용 규정 ├── 위치안내 └── 주차안내 ``` #### UX 목표 > 신뢰감 형성 --- ### 7. 공지사항 #### 목적 운영 정보 전달 #### 구성 ```plaintext 공지사항 ├── 일반공지 ├── 이벤트 ├── 휴장안내 └── 이용안내 ``` --- ### 8. 문의하기 #### 목적 고객 접근성 강화 #### 구성 ```plaintext 문의하기 ├── 전화문의 ├── 문의폼 ├── 오시는 길 └── FAQ ``` #### UX 목표 > 문의 허들 최소화 --- ## 7.5 사용자 흐름 기반 IA 사용자는 다음 흐름으로 행동하도록 설계한다. ### 신규 방문자 HOME ↓ 코스안내 ↓ 시설안내 ↓ 갤러리 ↓ 예약하기 --- ### 재방문 사용자 HOME ↓ 예약하기 ↓ 예약 완료 --- ### 관광형 사용자 HOME ↓ 오션뷰 갤러리 ↓ 코스안내 ↓ 예약하기 --- ## 7.6 모바일 IA 구조 모바일 메뉴는 햄버거 메뉴 기반으로 설계한다. ### 모바일 메뉴 구조 ```plaintext ☰ MENU HOME 예약하기 코스안내 시설안내 갤러리 이용안내 공지사항 문의하기 ``` ### 모바일 UX 원칙 * 1클릭 접근 * 큰 메뉴 버튼 * 쉬운 탐색 * 예약 버튼 고정 --- ## 7.7 IA 설계 결론 동부산CC 사이트맵은 단순 정보 제공 구조가 아닌 > **브랜드 경험 + 예약 전환 중심 구조** 를 목표로 설계하였다. 특히 * 예약 중심 UX * 모바일 퍼스트 구조 * 코스 경험 강화 * 감성 콘텐츠 확대 를 통해 사용자가 자연스럽게 브랜드에 몰입하고 최종 예약 행동까지 이어질 수 있도록 설계한다. # 8. 페이지별 상세 기획 ## 8.1 페이지별 기획 목적 페이지별 상세 기획은 사용자의 행동 흐름을 고려하여 각 페이지의 역할과 UX(User Experience) 목표를 정의하는 단계이다. 동부산CC 웹사이트는 단순한 정보 제공 사이트가 아니라 사용자의 감정과 행동을 고려하여 브랜드 경험을 제공하고 최종적으로 예약 행동까지 연결되는 구조를 목표로 한다. 따라서 각 페이지는 다음 역할을 수행해야 한다. ### 핵심 방향 > 브랜드 경험 강화 > 정보 탐색 편의성 향상 > 플레이 기대감 형성 > 예약 전환율 향상 --- # 8.2 HOME (메인페이지) ## 페이지 목적 사용자에게 강한 첫인상을 제공하고 동부산CC 브랜드 경험을 전달한다. 또한 코스, 시설, 갤러리, 예약까지 자연스럽게 연결하는 허브 역할을 수행한다. ### UX 목표 > “와… 여기 한번 가보고 싶다” --- ## 화면 구성 ### Section 1. Hero Banner #### 목적 첫인상 형성 #### 구성 요소 * 드론 오션뷰 이미지 * 브랜드 카피 * CTA 버튼 #### 카피 예시 > **부산의 자연과 바다가 만나는 > 가장 품격 있는 라운드 경험** 버튼: [ 실시간 예약 ] [ 코스 둘러보기 ] --- ### Section 2. 브랜드 소개 #### 목적 동부산CC 차별화 요소 전달 #### 구성 카드 UI * Ocean View * Premium Experience * Strategic Course * Healing Nature --- ### Section 3. 코스 미리보기 #### 목적 플레이 기대감 형성 #### 구성 * EAST COURSE * WEST COURSE * SOUTH COURSE 각 코스 카드형 구성 버튼: [ 코스 자세히 보기 ] --- ### Section 4. 시설 소개 #### 목적 프리미엄 브랜드 이미지 강화 #### 구성 * 클럽하우스 * 레스토랑 * 락커룸 * 라운지 --- ### Section 5. 갤러리 Preview #### 목적 감성 경험 제공 #### 구성 슬라이드형 이미지 * 코스 풍경 * 오션뷰 * 계절별 이미지 --- ### Section 6. 후기 및 신뢰 #### 목적 신뢰 형성 #### 구성 고객 후기 카드 별점 UI --- ### Section 7. 예약 CTA #### 목적 최종 행동 유도 카피: > 지금 > 동부산CC에서 특별한 하루를 경험하세요. 버튼: [ 실시간 예약 ] --- # 8.3 예약하기 페이지 ## 페이지 목적 사용자가 쉽고 빠르게 예약 행동까지 이어질 수 있도록 지원한다. ### UX 목표 > 예약 허들 최소화 --- ## 화면 구성 ### 예약 프로세스 안내 예약 절차 시각화 ```plaintext id="y1gxgm" 예약 확인 ↓ 날짜 선택 ↓ 코스 선택 ↓ 예약 완료 ``` --- ### 예약 방법 안내 * 온라인 예약 * 전화 예약 * 예약 유의사항 --- ### 실시간 예약 CTA 큰 버튼 강조 > [ 실시간 예약하기 ] --- # 8.4 코스안내 페이지 ## 페이지 목적 코스 경험과 플레이 기대감을 형성한다. ### UX 목표 > “여기서 플레이해보고 싶다” --- ## 화면 구성 ### 코스 Hero 대형 코스 이미지 코스 소개 문구 --- ### EAST COURSE #### 특징 오션뷰 중심 코스 #### 콘텐츠 * 코스 특징 * 전략 포인트 * 홀별 소개 --- ### WEST COURSE #### 특징 전략적 플레이 중심 #### 콘텐츠 * 난이도 * 코스 특징 * 추천 공략 --- ### SOUTH COURSE #### 특징 자연 친화 코스 #### 콘텐츠 * 풍경 * 플레이 특징 --- ### 홀별 상세 콘텐츠 각 홀 클릭 시 * 코스 이미지 * 거리 * 공략법 * 특징 --- ### 예약 CTA > [ 이 코스 예약하기 ] --- # 8.5 시설안내 페이지 ## 페이지 목적 프리미엄 브랜드 신뢰 형성 ### UX 목표 > “시설도 좋네” --- ## 화면 구성 ### 클럽하우스 대형 이미지 시설 소개 --- ### 레스토랑 메뉴 및 공간 소개 --- ### 락커룸 프리미엄 서비스 강조 --- ### 라운지 휴식 공간 강조 --- ### 연습시설 골프 연습 환경 안내 --- # 8.6 갤러리 페이지 ## 페이지 목적 감정적 몰입 강화 ### UX 목표 > “풍경이 정말 좋다” --- ## 화면 구성 ### 카테고리 * 코스 * 오션뷰 * 계절별 풍경 * 시설 --- ### 갤러리 UI Masonry Grid 구조 또는 카드형 이미지 --- ### 이미지 클릭 확대 모달 --- # 8.7 이용안내 페이지 ## 페이지 목적 신뢰감 있는 정보 제공 --- ## 화면 구성 ### 이용요금 표 형태 --- ### 운영시간 시간 안내 --- ### 이용규정 유의사항 --- ### 오시는 길 지도 연동 --- # 8.8 공지사항 페이지 ## 페이지 목적 운영 정보 전달 --- ## 화면 구성 리스트형 게시판 * 공지 * 이벤트 * 휴장안내 검색 기능 포함 --- # 8.9 문의하기 페이지 ## 페이지 목적 문의 접근성 강화 ### UX 목표 > 쉽고 빠른 문의 --- ## 화면 구성 ### 문의 폼 * 이름 * 연락처 * 문의내용 --- ### 전화 문의 큰 전화 CTA --- ### 위치 안내 지도 삽입 --- ## 8.10 페이지별 기획 결론 동부산CC 페이지별 기획은 단순 정보 전달이 아닌 > **브랜드 경험 → 정보 탐색 → 플레이 기대 → 예약 행동** 으로 이어지는 사용자 흐름을 중심으로 설계하였다. 특히 모든 주요 페이지에서 > **예약 CTA를 반복 노출** 하여 최종 예약 행동까지 자연스럽게 연결될 수 있도록 UX 구조를 설계하였다. # 9. 모바일(375px) 구조 설계 ## 9.1 모바일 구조 설계 목적 최근 웹사이트 사용 환경은 모바일 중심으로 변화하고 있으며 골프장 정보 탐색 및 예약 또한 스마트폰 기반 사용 비율이 증가하고 있다. 특히 사용자는 이동 중에도 골프장 정보를 탐색하며, 코스 확인과 예약 행동을 모바일 환경에서 수행하는 경우가 많다. 따라서 동부산CC 웹사이트는 **375px 기준 Mobile First 구조**를 기반으로 설계하여 정보 탐색 편의성과 예약 접근성을 극대화한다. ### 모바일 UX 목표 > 쉽고 빠른 정보 탐색 > 감성 중심 브랜드 경험 > 빠른 예약 전환 --- ## 9.2 모바일 UX 설계 원칙 동부산CC 모바일 UI는 다음 원칙을 기반으로 설계한다. ### 1) One Thumb UX 한 손 사용 환경을 고려하여 주요 기능은 화면 하단 또는 중앙 중심으로 배치한다. ### 적용 요소 * 큰 버튼 * 하단 CTA * 쉬운 메뉴 탐색 --- ### 2) Mobile First 구조 PC 화면 축소형이 아닌 모바일 우선 설계를 적용한다. ### 원칙 * 짧은 콘텐츠 * 큰 이미지 * 카드형 UI * 세로 스크롤 중심 --- ### 3) 빠른 예약 접근 사용자는 언제든 예약 행동이 가능해야 한다. ### 적용 전략 하단 고정 버튼 적용 ```plaintext id="fjhx5j" [ 실시간 예약하기 ] ``` --- ## 9.3 모바일 메인 구조 (375px) ### 화면 흐름 ```plaintext id="2o6otn" Header ↓ Hero Banner ↓ 브랜드 소개 ↓ 코스 Preview ↓ 시설 소개 ↓ 갤러리 Preview ↓ 후기 ↓ 예약 CTA ↓ Footer ``` --- ## 9.4 모바일 Header 구조 ### 목적 빠른 메뉴 접근 ### 화면 구성 ```plaintext id="g6z7ie" LOGO 동부산CC ☰ 햄버거 메뉴 ``` ### 메뉴 클릭 시 ```plaintext id="t5u8gm" HOME 예약하기 코스안내 시설안내 갤러리 이용안내 공지사항 문의하기 ``` ### UX 전략 > 한 번 클릭으로 이동 --- ## 9.5 Hero Banner 구조 ### 목적 첫인상 형성 ### 375px 화면 구조 ```plaintext id="jlwmh2" ━━━━━━━━━━━ [오션뷰 이미지] 동부산CC 부산의 자연과 바다가 만나는 가장 품격 있는 라운드 경험 [ 실시간 예약 ] [ 코스 둘러보기 ] ━━━━━━━━━━━ ``` ### UX 목표 > “와… 여기 가보고 싶다” --- ## 9.6 브랜드 소개 구조 ### 목적 브랜드 가치 전달 ### 구성 방식 카드형 UI ```plaintext id="bmn8g4" [ Ocean View ] [ Premium ] [ Healing ] [ Strategic ] ``` ### UX 전략 짧고 직관적인 정보 제공 --- ## 9.7 코스 Preview 구조 ### 목적 플레이 기대감 형성 ### 화면 구성 세로 카드형 ```plaintext id="f2uj6l" [EAST COURSE 이미지] 오션뷰 중심 코스 [ 자세히 보기 ] ━━━━━━━━━━━ [WEST COURSE 이미지] 전략적 플레이 [ 자세히 보기 ] ━━━━━━━━━━━ [SOUTH COURSE 이미지] 힐링 중심 코스 [ 자세히 보기 ] ``` ### UX 전략 > 카드형 UI 적용 --- ## 9.8 시설 소개 구조 ### 목적 브랜드 신뢰 강화 ### 카드형 UI ```plaintext id="dqf3gh" [클럽하우스] [레스토랑] [라운지] [락커룸] ``` ### UX 목표 > 프리미엄 경험 전달 --- ## 9.9 갤러리 Preview 구조 ### 목적 감성 경험 제공 ### UI 방식 가로 슬라이드 ```plaintext id="1dbk0g" ← 이미지 슬라이드 → ``` ### UX 전략 사진 몰입감 강화 --- ## 9.10 후기 영역 구조 ### 목적 신뢰 형성 ### 카드 UI ```plaintext id="4k7h0r" ★★★★★ 풍경이 정말 좋았습니다. 김OO 고객 ``` --- ## 9.11 하단 고정 CTA ### 목적 예약 전환 극대화 ### 고정 버튼 구조 ```plaintext id="zkc0vs" ━━━━━━━━━━━ [ 실시간 예약하기 ] ━━━━━━━━━━━ ``` ### UX 전략 모든 화면에서 예약 가능 --- ## 9.12 모바일 페이지 구조 ### 예약하기 ```plaintext id="um7u8r" 예약안내 날짜 선택 코스 선택 [ 예약하기 ] ``` --- ### 코스안내 ```plaintext id="2qrlp0" 코스 Hero 홀별 소개 코스 특징 예약 CTA ``` --- ### 시설안내 ```plaintext id="84m14g" 시설 이미지 설명 예약 CTA ``` --- ### 문의하기 ```plaintext id="1xphu8" 이름 전화번호 문의내용 [ 문의하기 ] ``` --- ## 9.13 모바일 UX 핵심 전략 요약 | 항목 | 전략 | | --- | ------------ | | 탐색 | 햄버거 메뉴 | | 콘텐츠 | 카드형 UI | | 이미지 | 풀스크린 중심 | | 예약 | 하단 고정 CTA | | UX | One Thumb UX | | 구조 | Mobile First | --- ## 9.14 모바일 구조 결론 동부산CC 모바일 구조는 단순한 PC 축소형 구조가 아닌 > **375px 기준 Mobile First UX** 를 중심으로 설계하였다. 특히 * 큰 이미지 * 큰 버튼 * 카드형 UI * 쉬운 탐색 * 예약 CTA 강화 를 적용하여 사용자가 모바일 환경에서도 자연스럽게 브랜드를 경험하고 최종 예약 행동까지 이어질 수 있도록 설계한다. # 10. 디자인 컨셉 (Design Concept) ## 10.1 디자인 컨셉 목적 디자인 컨셉은 동부산CC가 사용자에게 전달하고자 하는 브랜드 이미지와 감성 경험을 시각적으로 구현하기 위한 기준을 정의하는 단계이다. 동부산CC는 단순한 골프장이 아니라 부산의 자연과 바다가 함께하는 프리미엄 골프 경험 공간이라는 브랜드 방향을 가지고 있다. 따라서 웹사이트 디자인 또한 정보 제공 중심이 아닌 사용자의 감정과 기대를 형성하는 **브랜드 경험 중심 UI**를 목표로 설계한다. --- ## 10.2 디자인 핵심 방향성 동부산CC 웹사이트 디자인은 다음 방향을 중심으로 구성한다. ### Design Concept > **Premium Ocean Golf Resort** ### 핵심 메시지 > **“부산의 자연과 바다가 만나는 > 가장 품격 있는 라운드 경험”** ### 디자인 목표 1. 프리미엄 브랜드 경험 강화 2. 오션뷰 중심 감성 전달 3. 자연 친화적 분위기 형성 4. 예약 행동 유도 5. 모바일 중심 사용성 강화 --- ## 10.3 디자인 키워드 동부산CC 디자인은 다음 다섯 가지 키워드를 중심으로 구성한다. ### 1) Premium 고급스럽고 품격 있는 분위기 전달 #### 적용 요소 * 넓은 여백 * 세련된 타이포그래피 * 고급 컬러 --- ### 2) Ocean View 동부산CC의 핵심 경쟁력인 바다 풍경을 강조한다. #### 적용 요소 * Hero 오션뷰 이미지 * 자연 중심 비주얼 * 드론 전경 활용 --- ### 3) Healing Nature 자연 속 휴식과 힐링 경험을 전달한다. #### 적용 요소 * 자연 풍경 * 부드러운 색감 * 감성 중심 UI --- ### 4) Luxury Experience 프리미엄 골프 경험을 시각적으로 표현한다. #### 적용 요소 * 골드 포인트 컬러 * 호텔 브로슈어 느낌 * 카드 UI --- ### 5) Elegant Simplicity 복잡한 구조가 아닌 깔끔하고 정돈된 UI를 제공한다. #### 적용 요소 * 심플한 레이아웃 * 큰 이미지 * 직관적 구조 --- ## 10.4 톤앤매너 (Tone & Manner) 동부산CC 웹사이트는 프리미엄 골프 리조트 감성을 기반으로 디자인한다. ### Tone * Premium * Luxury * Elegant * Calm * Trust ### 사용자 감정 목표 웹사이트 방문 시 다음 감정을 느끼도록 설계한다. > “와… 여기 한번 가보고 싶다” > “부산에 이런 골프장이 있었네” > “예약해보고 싶다” --- ## 10.5 비주얼 방향성 ### 1) 풀스크린 Hero 이미지 메인 첫 화면은 오션뷰 중심 대형 이미지를 활용한다. #### 목적 강한 첫인상 형성 #### 구성 * 드론 전경 * 바다와 코스 * 강한 브랜드 카피 예시 카피: > **부산의 자연과 바다가 만나는 > 가장 품격 있는 라운드 경험** --- ### 2) 감성 중심 이미지 단순 시설 사진이 아닌 사용자가 실제 라운드를 상상할 수 있는 이미지 중심 구성 #### 적용 이미지 * 오션뷰 홀 * 자연 풍경 * 플레이 감성 * 석양 분위기 --- ### 3) 카드형 UI 정보 탐색 편의성을 위해 카드 UI를 적용한다. #### 적용 영역 * 코스 소개 * 시설 소개 * 후기 * 갤러리 --- ## 10.6 컬러 시스템 동부산CC 디자인은 자연과 프리미엄 감성을 반영한 컬러 시스템을 적용한다. ### Primary Color #### Deep Green ```plaintext id="6z1mwe" #18392B ``` #### 의미 자연 친화 + 신뢰감 --- ### Secondary Color #### Ocean Navy ```plaintext id="7m8o1t" #203447 ``` #### 의미 오션뷰 + 프리미엄 --- ### Accent Color #### Luxury Gold ```plaintext id="eh3trf" #C6A86B ``` #### 의미 품격 + 고급감 --- ### Background #### Warm White ```plaintext id="1jlwm0" #F8F7F4 ``` #### 의미 따뜻한 프리미엄 감성 --- ## 10.7 타이포그래피 방향 ### 제목 영역 #### 스타일 세련되고 고급스러운 타이포 #### 특징 * 굵은 제목 * 넓은 자간 * 강한 브랜드 임팩트 --- ### 본문 영역 #### 스타일 읽기 쉬운 가독성 중심 #### 특징 * 모바일 최적화 * 짧은 문장 * 쉬운 정보 탐색 --- ## 10.8 UI 컴포넌트 방향 ### 1) 버튼 디자인 #### Primary Button ```plaintext id="e7n0ob" [ 실시간 예약하기 ] ``` 스타일: * 딥그린 배경 * 골드 포인트 * 둥근 Radius --- ### 2) 카드 UI 코스 및 시설 소개에 적용 #### 구성 * 이미지 * 제목 * 설명 * CTA --- ### 3) 후기 카드 #### 구성 ```plaintext id="mqebkh" ★★★★★ 풍경이 정말 좋았습니다. 김OO 고객 ``` --- ### 4) 이미지 슬라이드 갤러리 영역 적용 가로 스크롤 방식 --- ## 10.9 모바일 디자인 방향 (375px) 모바일에서는 다음 방향을 적용한다. ### 구조 * 세로 스크롤 중심 * 큰 버튼 * 카드 UI * 큰 이미지 ### UX 전략 > 한 손 사용 환경 최적화 > 쉬운 예약 --- ## 10.10 디자인 컨셉 결론 동부산CC 웹사이트 디자인은 단순 정보 전달 중심 UI가 아니라 > **프리미엄 골프 경험을 전달하는 브랜드 중심 UI** 를 목표로 설계한다. 특히 * 오션뷰 중심 비주얼 * 프리미엄 감성 * 모바일 퍼스트 * 예약 전환 구조 를 통해 사용자가 방문 순간부터 기대감을 느끼고 최종 예약 행동까지 자연스럽게 이어질 수 있도록 디자인 방향을 설정한다. # 11. 구현 방향 (HTML / CSS / JavaScript) ## 11.1 구현 방향 개요 동부산CC 웹사이트 리뉴얼은 **실제 퍼블리싱 가능한 정적 웹사이트 구조**를 기준으로 구현한다. 본 프로젝트는 웹퍼블리싱 포트폴리오 및 실제 운영형 웹사이트 제작을 고려하여 HTML, CSS, JavaScript를 기반으로 구성한다. 구현의 핵심은 단순히 화면을 만드는 것이 아니라, 기획서에서 정의한 UX 전략과 디자인 컨셉이 실제 웹페이지에서 자연스럽게 작동하도록 구현하는 것이다. ### 구현 목표 * 반응형 웹사이트 구축 * 모바일 375px 기준 최적화 * 프리미엄 브랜드 UI 구현 * 예약 CTA 구조 구현 * 코스/시설/갤러리 콘텐츠 구조 구현 * JavaScript 기반 인터랙션 적용 --- ## 11.2 전체 파일 구조 실제 구현 시 다음과 같은 파일 구조를 기준으로 제작한다. ```plaintext dongbusancc-renewal/ │ ├── index.html ├── reservation.html ├── course.html ├── facility.html ├── gallery.html ├── notice.html ├── contact.html │ ├── css/ │ ├── reset.css │ ├── common.css │ ├── layout.css │ ├── main.css │ └── responsive.css │ ├── js/ │ ├── main.js │ ├── menu.js │ ├── slider.js │ └── course.js │ ├── images/ │ ├── hero/ │ ├── course/ │ ├── facility/ │ └── gallery/ │ └── README.md ``` --- ## 11.3 HTML 구현 방향 HTML은 의미 있는 태그 구조를 기반으로 작성한다. ### 기본 원칙 * 시맨틱 태그 사용 * 섹션 단위 구조화 * 유지보수 쉬운 클래스명 사용 * 모바일/PC 공통 구조 고려 * 접근성 고려 ### 주요 시맨틱 태그 ```html
``` --- ## 11.4 메인페이지 HTML 구조 메인페이지는 브랜드 경험과 예약 전환을 중심으로 구성한다. ```html

Premium Ocean Golf Experience

부산의 자연과 바다가 만나는
가장 품격 있는 라운드 경험

실시간 예약 코스 둘러보기

Why Dongbusan CC?

Ocean View
Premium Experience
Healing Nature
Strategic Course

Course Experience

EAST COURSE

EAST COURSE

오션뷰를 중심으로 한 전략적 코스

WEST COURSE

WEST COURSE

도전과 재미를 담은 플레이 중심 코스

SOUTH COURSE

SOUTH COURSE

자연과 함께하는 힐링 코스

Premium Facility

클럽하우스
레스토랑
라운지
락커룸

Gallery

동부산CC 갤러리

지금 동부산CC에서 특별한 하루를 경험하세요

실시간 예약하기
``` --- ## 11.5 CSS 구현 방향 CSS는 공통 스타일과 페이지별 스타일을 분리하여 관리한다. ### CSS 설계 원칙 * 공통 스타일 분리 * 반응형 기준 명확화 * 컬러 변수 사용 * 컴포넌트 단위 스타일 작성 * 유지보수 가능한 구조 --- ## 11.6 CSS 변수 시스템 디자인 컨셉에서 정의한 컬러 시스템을 CSS 변수로 관리한다. ```css :root { --color-green: #18392B; --color-navy: #203447; --color-gold: #C6A86B; --color-white: #F8F7F4; --color-dark: #111111; --font-title: 'serif'; --font-body: 'sans-serif'; --section-padding: 100px; --mobile-padding: 24px; } ``` --- ## 11.7 기본 레이아웃 CSS ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--color-white); color: var(--color-dark); font-family: var(--font-body); line-height: 1.6; } a { text-decoration: none; color: inherit; } img { width: 100%; display: block; } section { padding: var(--section-padding) 8%; } ``` --- ## 11.8 Header 구현 방향 PC에서는 가로형 메뉴, 모바일에서는 햄버거 메뉴를 적용한다. ```css .header { position: fixed; top: 0; left: 0; width: 100%; height: 72px; padding: 0 8%; display: flex; align-items: center; justify-content: space-between; z-index: 100; background: rgba(24, 57, 43, 0.75); color: #fff; } .logo { font-size: 22px; font-weight: bold; } .gnb { display: flex; gap: 32px; } .menu-btn { display: none; } ``` --- ## 11.9 Hero Section 구현 방향 Hero 영역은 동부산CC의 첫인상을 결정하는 핵심 영역이다. ```css .hero { height: 100vh; background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url("../images/hero/hero.jpg") center/cover no-repeat; display: flex; align-items: center; color: #fff; } .hero-text { max-width: 760px; } .hero-text p { color: var(--color-gold); letter-spacing: 3px; margin-bottom: 20px; } .hero-text h1 { font-size: 56px; line-height: 1.25; margin-bottom: 32px; } .hero-buttons { display: flex; gap: 16px; } ``` --- ## 11.10 버튼 컴포넌트 ```css .btn { display: inline-block; padding: 14px 28px; border-radius: 999px; font-weight: bold; transition: 0.3s; } .btn.primary { background-color: var(--color-gold); color: #111; } .btn.secondary { border: 1px solid #fff; color: #fff; } .btn:hover { transform: translateY(-3px); } ``` --- ## 11.11 카드 UI 구현 방향 ```css .brand-card-wrap, .course-card-wrap, .facility-card-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .brand-card, .course-card, .facility-card { background: #fff; border-radius: 24px; padding: 32px; box-shadow: 0 12px 30px rgba(0,0,0,0.08); } ``` --- ## 11.12 모바일 반응형 구현 375px 기준 모바일 구조를 적용한다. ```css @media (max-width: 768px) { .header { height: 64px; padding: 0 20px; } .gnb { display: none; } .menu-btn { display: block; background: none; border: 0; color: #fff; font-size: 28px; } section { padding: 72px var(--mobile-padding); } .hero { height: 100vh; align-items: flex-end; padding-bottom: 120px; } .hero-text h1 { font-size: 34px; } .hero-buttons { flex-direction: column; } .brand-card-wrap, .course-card-wrap, .facility-card-wrap { grid-template-columns: 1fr; } } ``` --- ## 11.13 JavaScript 구현 방향 JavaScript는 사용자 인터랙션을 위한 최소 기능 중심으로 구현한다. ### 적용 기능 * 모바일 햄버거 메뉴 * 스크롤 시 헤더 변경 * 갤러리 슬라이드 * 코스 탭 전환 * 예약 CTA 이동 * 이미지 모달 --- ## 11.14 모바일 메뉴 JS ```javascript const menuBtn = document.querySelector(".menu-btn"); const gnb = document.querySelector(".gnb"); menuBtn.addEventListener("click", function () { gnb.classList.toggle("active"); }); ``` --- ## 11.15 스크롤 헤더 변경 ```javascript const header = document.querySelector(".header"); window.addEventListener("scroll", function () { if (window.scrollY > 100) { header.classList.add("scroll"); } else { header.classList.remove("scroll"); } }); ``` ```css .header.scroll { background-color: #18392B; box-shadow: 0 8px 24px rgba(0,0,0,0.15); } ``` --- ## 11.16 코스 탭 기능 ```html
EAST COURSE 내용
WEST COURSE 내용
SOUTH COURSE 내용
``` ```javascript const tabButtons = document.querySelectorAll(".course-tabs button"); const courseContents = document.querySelectorAll(".course-content"); tabButtons.forEach(function (button) { button.addEventListener("click", function () { const target = button.dataset.course; courseContents.forEach(function (content) { content.classList.remove("active"); }); document.querySelector("#" + target).classList.add("active"); }); }); ``` --- ## 11.17 갤러리 모달 기능 ```javascript const galleryImages = document.querySelectorAll(".gallery img"); const modal = document.querySelector(".modal"); const modalImg = document.querySelector(".modal img"); galleryImages.forEach(function (img) { img.addEventListener("click", function () { modal.classList.add("active"); modalImg.src = img.src; }); }); modal.addEventListener("click", function () { modal.classList.remove("active"); }); ``` --- ## 11.18 예약 CTA 구현 방향 예약 버튼은 사용자의 행동을 유도하는 핵심 요소이므로 모든 주요 영역에서 반복 배치한다. ### 적용 위치 * Hero 영역 * 코스 상세 하단 * 시설 안내 하단 * 갤러리 하단 * 모바일 하단 고정 영역 ```html
실시간 예약하기
``` ```css .fixed-reservation { display: none; } @media (max-width: 768px) { .fixed-reservation { display: block; position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--color-green); padding: 16px; z-index: 200; } .fixed-reservation a { display: block; text-align: center; background-color: var(--color-gold); padding: 14px; border-radius: 999px; font-weight: bold; } } ``` --- ## 11.19 구현 우선순위 ### 1단계 * HTML 페이지 구조 작성 * 공통 Header/Footer 작성 * 메인페이지 구성 ### 2단계 * CSS 디자인 시스템 적용 * 반응형 구조 적용 ### 3단계 * JavaScript 인터랙션 적용 * 메뉴 / 탭 / 갤러리 기능 구현 ### 4단계 * 이미지 최적화 * 모바일 테스트 * 브라우저 테스트 --- ## 11.20 구현 방향 결론 동부산CC 웹사이트 구현은 단순한 정적 페이지 제작이 아니라 기획 단계에서 정의한 > **브랜드 경험 + 예약 전환 + 모바일 퍼스트 UX** 를 실제 화면으로 구현하는 과정이다. HTML은 의미 있는 구조를 기반으로 작성하고, CSS는 디자인 시스템과 반응형 레이아웃을 중심으로 관리하며, JavaScript는 사용자 행동을 돕는 최소 인터랙션 중심으로 적용한다. 이를 통해 동부산CC 웹사이트는 정보 제공형 사이트를 넘어 실제 예약 행동까지 연결되는 실무형 웹사이트 구조로 완성될 수 있다. # 12. 기대효과 ## 12.1 기대효과 개요 동부산CC 웹사이트 리뉴얼 프로젝트는 단순한 홈페이지 디자인 개선을 넘어 **브랜드 경험 강화, 사용자 만족도 향상, 예약 전환율 개선, 디지털 경쟁력 확보**를 목표로 한다. 특히 기존 정보 전달 중심 웹사이트에서 벗어나 사용자의 감정 흐름을 고려한 **브랜드 경험 중심 UX 플랫폼**으로 전환함으로써 운영 측면과 마케팅 측면 모두에서 실질적인 효과를 기대할 수 있다. --- ## 12.2 브랜드 측면 기대효과 ### 1) 프리미엄 브랜드 이미지 강화 현재 동부산CC가 가진 자연환경, 오션뷰, 코스 경쟁력은 충분한 잠재력을 가지고 있으나 디지털 환경에서는 그 가치가 충분히 전달되지 못하고 있다. 리뉴얼 이후에는 브랜드 감성과 프리미엄 경험을 중심으로 한 UX/UI를 적용함으로써 다음과 같은 효과를 기대할 수 있다. ### 기대효과 * 프리미엄 골프장 이미지 강화 * 고급 브랜드 인식 향상 * 부산 대표 골프장 이미지 구축 * 브랜드 차별화 강화 ### 기대 인식 변화 #### 기존 > “부산의 골프장” #### 리뉴얼 이후 > **“부산에서 가장 경험해보고 싶은 프리미엄 오션뷰 골프장”** --- ### 2) 브랜드 신뢰도 향상 웹사이트는 고객이 브랜드를 처음 접하는 디지털 접점이다. 감성 중심 디자인과 프리미엄 비주얼을 적용함으로써 고객 신뢰도를 향상시킬 수 있다. ### 기대효과 * 브랜드 신뢰감 향상 * 방문 기대감 증가 * 고객 만족도 향상 --- ## 12.3 사용자 경험(UX) 측면 기대효과 ### 1) 정보 탐색 편의성 향상 기존 복잡하거나 직관적이지 못한 정보 탐색 구조를 개선하여 사용자가 원하는 정보를 쉽고 빠르게 찾을 수 있도록 설계한다. ### 기대효과 * 정보 탐색 시간 단축 * 사용자 피로 감소 * 코스 및 시설 접근성 향상 --- ### 2) 모바일 UX 개선 375px Mobile First 구조 적용을 통해 모바일 사용자 환경을 최적화한다. ### 기대효과 * 모바일 탐색 편의성 향상 * 이탈률 감소 * 사용 만족도 증가 --- ### 3) 플레이 기대감 강화 코스 소개와 갤러리 콘텐츠를 강화하여 사용자가 실제 라운드를 상상할 수 있도록 설계한다. ### 기대효과 > “한번 가보고 싶다” 라는 감정 형성 * 플레이 기대감 증가 * 브랜드 몰입감 향상 --- ## 12.4 예약 전환 측면 기대효과 ### 1) 예약 전환율 향상 현재 정보 제공 중심 구조에서 예약 행동 중심 UX 구조로 개선한다. CTA(Call To Action)를 반복 배치하여 예약 행동 허들을 최소화한다. ### 기대효과 * 예약 버튼 클릭률 증가 * 예약 문의 증가 * 실제 예약 전환율 향상 ### UX 전략 > 관심 → 기대 → 몰입 → 신뢰 → 예약 흐름 강화 --- ### 2) 예약 접근성 향상 모바일 하단 고정 CTA와 직관적 예약 구조를 적용한다. ### 기대효과 * 예약 과정 단순화 * 사용자 편의성 향상 --- ## 12.5 운영 측면 기대효과 ### 1) 고객 문의 감소 기존 고객 문의 중 반복되는 질문을 웹사이트 콘텐츠로 제공하여 운영 효율성을 향상시킬 수 있다. 예: * 운영시간 * 요금안내 * 예약방법 * 코스안내 ### 기대효과 * 전화 문의 감소 * 운영 효율 향상 --- ### 2) 콘텐츠 관리 효율성 향상 공지사항, 이벤트, 갤러리 등 운영 콘텐츠 관리 구조를 체계화할 수 있다. ### 기대효과 * 운영 편의성 향상 * 콘텐츠 업데이트 효율 증가 --- ## 12.6 마케팅 측면 기대효과 ### 1) SNS 확산 효과 감성 중심 이미지와 오션뷰 콘텐츠는 SNS 공유 가능성을 높인다. ### 기대효과 * 자연 유입 증가 * 바이럴 마케팅 효과 * 브랜드 노출 확대 --- ### 2) 검색 경쟁력 강화 SEO(Search Engine Optimization)를 고려한 웹 구조를 적용할 경우 검색 노출 향상이 가능하다. ### 기대효과 * 네이버 검색 노출 증가 * 구글 검색 노출 향상 * 신규 방문자 증가 --- ## 12.7 기대효과 요약 | 구분 | 기대효과 | | --- | ------------ | | 브랜드 | 프리미엄 이미지 강화 | | UX | 정보 탐색 편의성 향상 | | 모바일 | 사용성 개선 | | 예약 | 전환율 증가 | | 운영 | 관리 효율 향상 | | 마케팅 | 자연 유입 증가 | --- ## 12.8 기대효과 결론 동부산CC 웹사이트 리뉴얼은 단순한 디자인 변경 프로젝트가 아니라 > **브랜드 가치 향상 + 예약 전환 최적화 + 디지털 경쟁력 확보** 를 목표로 하는 전략적 프로젝트이다. 특히 * 오션뷰 중심 브랜드 경험 * Mobile First UX * 감성 중심 콘텐츠 * 예약 전환 구조 를 기반으로 동부산CC의 디지털 경쟁력을 강화하고, > **“부산 대표 프리미엄 오션뷰 골프장”** 으로서 브랜드 가치를 높이는 데 기여할 것으로 기대된다. # 13. 최종 제안 (Final Proposal) ## 13.1 프로젝트 최종 제안 개요 본 프로젝트는 단순한 웹사이트 디자인 개선이 아닌, 동부산CC의 브랜드 경쟁력을 강화하고 사용자 경험을 향상시키기 위한 **디지털 플랫폼 리뉴얼 프로젝트**이다. 현재 골프 산업은 모바일 중심 예약 환경과 브랜드 경험 중심 경쟁 구조로 변화하고 있으며, 골프장 웹사이트는 단순 정보 제공 기능을 넘어 고객의 감정과 행동을 설계하는 핵심 접점 역할을 수행하고 있다. 동부산CC는 부산 지역 내 우수한 자연환경과 오션뷰라는 차별화된 강점을 보유하고 있음에도 현재 웹사이트에서는 이러한 브랜드 가치가 충분히 전달되지 못하고 있는 상황이다. 따라서 본 프로젝트는 동부산CC의 브랜드 아이덴티티를 재정립하고, 사용자 경험(UX)을 강화하며, 최종적으로 예약 행동까지 연결되는 구조를 목표로 한다. --- ## 13.2 최종 제안 방향 동부산CC 웹사이트는 기존의 단순 정보 제공 중심 구조에서 다음 방향으로 전환되어야 한다. ### 기존 구조 > 정보 제공형 골프장 홈페이지 #### 특징 * 단순 메뉴 중심 * 정보 나열형 콘텐츠 * 감성 경험 부족 * 예약 전환 약함 ↓ ### 리뉴얼 방향 > **브랜드 경험 중심 디지털 플랫폼** #### 특징 * 프리미엄 오션뷰 브랜드 강화 * 감성 중심 UX * Mobile First 구조 * 예약 전환 중심 설계 --- ## 13.3 핵심 전략 요약 본 프로젝트는 다음 네 가지 핵심 전략을 중심으로 추진한다. ### 1) 브랜드 경험 강화 동부산CC의 핵심 경쟁력인 * 오션뷰 * 자연환경 * 프리미엄 골프 경험 을 디지털 경험으로 전환한다. ### 핵심 목표 > “부산에서 가장 경험해보고 싶은 골프장” 브랜드 인식 형성 --- ### 2) Mobile First UX 구축 최근 사용자 행동 패턴 변화에 맞춰 > **375px 기반 Mobile First 구조** 를 적용한다. ### 핵심 목표 * 쉽고 빠른 정보 탐색 * 모바일 예약 편의성 향상 * 이탈률 감소 --- ### 3) 예약 전환 구조 강화 모든 주요 페이지에 CTA(Call To Action)를 반복 배치하여 예약 행동 허들을 최소화한다. ### UX 흐름 > 관심 > → 기대 > → 몰입 > → 신뢰 > → 예약 ### 핵심 목표 예약 전환율 향상 --- ### 4) 감성 중심 콘텐츠 강화 단순 텍스트 중심 구조에서 벗어나 > **“플레이 기대감을 형성하는 콘텐츠”** 중심으로 구성한다. 적용 요소: * 오션뷰 중심 이미지 * 코스 경험 콘텐츠 * 시설 감성 콘텐츠 * 갤러리 몰입 구조 --- ## 13.4 최종 웹사이트 방향성 동부산CC 웹사이트는 다음과 같은 방향으로 구축하는 것을 제안한다. ### Brand Concept > **Premium Ocean Golf Resort** ### UX Concept > **브랜드 경험 + 예약 전환 중심 UX** ### Design Concept > **Luxury Hotel Brochure × Premium Golf Experience** ### Mobile Strategy > **375px Mobile First** ### Core Message > **부산의 자연과 바다가 만나는 > 가장 품격 있는 라운드 경험** --- ## 13.5 단계별 추진 제안 ### STEP 1. 기획 확정 * 사이트 구조 확정 * UX 전략 확정 * 페이지 구성 정의 --- ### STEP 2. 와이어프레임 제작 375px 모바일 구조 설계 * 메인 * 예약 * 코스 * 시설 * 갤러리 --- ### STEP 3. UI 디자인 제작 Figma 기반 디자인 * 컬러 시스템 * 컴포넌트 * 디자인 가이드 --- ### STEP 4. 퍼블리싱 구현 HTML / CSS / JavaScript 기반 구현 --- ### STEP 5. 운영 및 고도화 * SEO 적용 * 예약 시스템 강화 * 콘텐츠 운영 --- ## 13.6 프로젝트 기대 결과 본 프로젝트 완료 시 다음 결과를 기대할 수 있다. ### 브랜드 측면 > 프리미엄 골프장 브랜드 이미지 강화 ### 사용자 측면 > 쉽고 직관적인 UX 제공 ### 예약 측면 > 예약 전환율 증가 ### 운영 측면 > 콘텐츠 운영 효율 향상 ### 마케팅 측면 > SNS 공유 및 자연 유입 증가 --- ## 13.7 최종 결론 동부산CC는 단순한 골프장이 아닌, > **자연과 바다가 함께하는 프리미엄 골프 경험 공간** 으로 브랜딩 될 잠재력을 보유하고 있다. 따라서 웹사이트 역시 단순 안내형 구조가 아닌, > **‘브랜드 경험 + 감성 콘텐츠 + 예약 전환’** 을 중심으로 설계되어야 한다. 본 프로젝트를 통해 동부산CC는 > **“부산 대표 프리미엄 오션뷰 골프장”** 으로서의 브랜드 경쟁력을 강화할 수 있을 것으로 기대된다. 또한 사용자는 웹사이트 방문 순간부터 > **“와… 여기 한번 가보고 싶다”** 라는 감정을 느끼고, 자연스럽게 예약 행동까지 이어질 수 있는 경험을 제공받게 될 것이다.