👥 팀 소개

📍 팀명: 쓰리피트 ⚾

저희 밋업프로젝트 A팀의 팀명은 ‘쓰리피트’ 입니다. 저희 팀의 메인 도메인인 야구의 룰에서 착안한 팀명인데요! 야구의 3-peat 룰처럼 밋업 프로젝트를 통해 모든 팀원의 마음이 3-peat 만큼 가까워지고 싶은 마음을 담아 팀명을 정했습니다.

저희는 단순한 팀을 넘어, 모든 팀원이 열정을 다해 단기간에 IT 서비스를 구현하는 과정에서 함께 도전하고 성취하는 과정을 지나가고 있습니다. 더 나아가 저희 서비스인 HitZone(히트존)이 우리 팀의 끈끈한 유대와 협력의 상징이 되기를 기대합니다.

🌟 R&R 분배

분야	이름	포지션
기획	박소민	📈 PM, 서비스 기획 - 유저 리서치, 와이어프레임 작성, UX writing
기획	김서연	📊서비스 기획 - 유저 리서치, 와이어프레임 작성, UX writing
기획	김혜은	📋 서비스 기획 - 유저 리서치, 와이어프레임 작성, UX writing
디자인	설정원	🔐 디자인 리드, ux/ui디자인, gui 디자인, 디자인 시스템 구축
디자인	윤지우	📢 ux/ui 디자인, 캐릭터 디자인, gui 디자인
프론트엔드	박인애	🔦 프론트엔드 리드, 화면 UI 구현, 서버 연동
프론트엔드	이은학	📱 화면 UI 구현, 서버 연동
백엔드	한상호	💻 백엔드 리드, DB 및 API 구축, 서버 배포
백엔드	박준형	🖥️ DB 및 API 구축, 서버 배포

💡 기획

⚾️ 서비스 개요

서비스 이름

히트존 (HitZone)

Hit(히트)는 야구에서 가장 짜릿한 순간 중 하나를 상징합니다.

타자가 공을 정확히 맞히는 타격은 경기의 흐름을 바꾸고, 관중을 열광시키는 핵심 키워드입니다. 실제로 멀티히트, 싸이클링 히트, 런앤히트 등 타자의 좋은 타격 성적을 포함하는 많은 야구 용어에도 ‘Hit(히트)’가 포함되어 있습니다.

Zone(존)은 야구장의 수많은 구역(좌석)들을 의미합니다. 또한, ‘특정한 목적을 위한 지역으로 정해두다’ 라는 뜻을 가진 ‘Zone’을 서비스명에 포함하여 유저의 니즈를 반영한 구역 추천 결과를 제공한다는 점을 드러내고자 합니다.

따라서 HitZone(히트존)은 유저가 우리의 서비스를 통해

우리의 유저들이 야구 직관 시 자신의 니즈에 적합한 구역에 앉아

야구 직관의 가장 흥미로운 순간을 관람하도록 나아가고 있습니다! 😉

배포 링크

⚾️ HitZone 바로가기❗

서비스 메인 슬로건

‘나에게 가장 Fit한 Zone에서 야구를 즐겨보세요, HitZone!’

Fit(피트)는 서비스 명인 Hit(히트)와도 유사한 발음을 가진 동시에, 유저의 야구 직관 성향과 방문 니즈에 가장 적합한 구역을 추천하겠다는 자신감을 의미합니다. 각 구역의 특성과 관람 목적을 고려해 개인화된 추천을 제공함으로써, 유저가 자신에게 가장 적합한 좌석을 선택할 수 있도록 돕는 ‘HitZone(히트존)’의 서비스를 상징하는 키워드입니다.

따라서 HitZone(히트존)은 단순한 좌석 추천 서비스가 아니라, 우리 서비스만의 추천 과정을 통해 팬들에게 가장 '타격감 있는 순간'을 제공하는 공간을 선사하겠다는 약속을 담은 이름입니다. 즉, 야구장에서의 생생한 경험과 설렘을 한 단어에 함축한 강렬한 브랜드를 구축하고자 합니다! ⚾🔥

서비스 한 줄 설명

유저가 ‘히트존’을 통해 야구장 방문 니즈에 딱! 맞는 구역을 추천받을 수 있습니다.

🔎 기획 배경

문제 인식

💡 문제 인식

아이디어 발제 기획 배경
- 프로야구 관중 수가 1,000만 명을 돌파한 지금, 야구를 직관하며 겪는 불편함은 여전히 해결되지 못한 과제로 남아 있습니다. ‘구장마다 다른 구역 특성과 유형’, ‘홈/원정 좌석 위치의 변화’, ‘복잡한 층별 안내도’와 같은 다양한 변수는 관람객의 직관 경험을 혼란스럽게 만듭니다.
- 이러한 문제점에서 출발하여, ‘이 모든 변수들을 한곳에서 편리하게 확인할 수 있는 서비스’를 만들자는 아이디어를 발제했습니다.
- **히트존(HitZone)**은 야구 팬뿐만 아니라 야구 문화에 입문하고자 하는 사람들까지 모두가 직관을 더 쉽게 즐길 수 있도록 돕고자 하는 서비스입니다.
- 야구장에 갈 때, 재밌는 응원과 같은 야구의 매력에만 집중할 수 있도록
  
  직관 시 편리함을 제공하는 서비스를 만들어보고자 합니다.

시장분석

💡 거시환경 분석

사회적 환경

1️⃣ 프로야구 인기 ↑ KBO 1,000만 관중 돌파!

https://www.newsis.com/view/NISX20240912_0002886155

https://www.newspim.com/news/view/20240829000612

2024년 KBO 리그 천만 관중을 돌파한 지금, 야구의 점점 더 높아지는 인기를 확인할 수 있습니다.

2️⃣ MZ세대인 20대 원정팬들의 야구 직관 수요 증가!

https://www.mk.co.kr/news/economy/11136512

https://biz.sbs.co.kr/article/20000196625?division=NAVER

20대 소비자는 야구 직관 문화를 ‘경험 소비’로 재해석합니다.

경기의 승패를 넘어서, 야구장 자체를 즐거운 놀이 공간으로 받아들이고 있습니다.
또한, 1만 원대에도 관람권을 구할 수 있어 가격 접근성도 다른 여가 활동에 비해 뛰어난 편입니다.

경제적 환경

역대급 흥행 중인 ‘프로야구’ 광고효과까지 ‘1조’ 예상!

https://www.newstof.com/news/articleView.html?idxno=23916

https://www.starnewskorea.com/stview.php?no=2024090219274097646

프로야구의 인기에 힘입어 프로야구단을 운영하는 기업들이 올해 누리게 될 광고 효과도 각 수천억원에 이를 것으로 추산되는 상황입니다.
이외에도 구단 별 각종 브랜드와의 콜라보가 ‘품절대란’을 일으킬 만큼 야구를 활용한 굿즈 판매도 활발하게 이뤄지고 있습니다.

문화적 환경

KBO(국내 프로야구)가 이제는 세계로?

https://www.moneys.co.kr/article/2024082814445814533

야구 관련 문화가 해외로도 진출 할 만큼, 인기를 얻고 있는 상황입니다.

실제로 야구의 인기에 힘입어, 많은 국내 치어리더들이 대만으로 진출하고 있습니다.

종목 특성

야구라는 종목이 가진 특징

‘야구’라는 종목 특성상 타 국내 프로 운동 종목(축구, 농구, 배구 등)보다 정규 시즌이 깁니다. (정규시즌: 4월~10월, 한국시리즈 11월&시범경기 3월까지)
주 당 게임 수가 많습니다. (주 6회)
게임 시간이 깁니다. (평균 3시간)

→ 이 점들로 인해 많은 타겟을 유입시킬 수 있습니다.

💡 경쟁사 분석

[프로야구 10개 구단 자체 앱 분석&정리]

팀명	예매 기능	일정 확인	자체 커뮤니티	전체 순위 확인
기아 타이거즈	홈 경기 예매	O	O (일부 회원 대상)	X
삼성 라이온즈	홈 경기 예매	O	X	X	일반회원/시즌권/블루회원 분
LG 트윈스	홈 경기 예매	O	O	O
KT 위즈	홈 경기 예매	O	O	O
두산 베어스	홈 경기 예매	O	X	O
SSG 랜더스	홈 경기 예매	O	X	O
롯데 자이언츠	홈 경기 예매	O	O	O
한화 이글스	홈 경기 예매	O	X	O
NC 다이노스	홈 경기 예매	O	X	O
키움 히어로즈	별도 사이트				자체 앱 X

모두 홈경기 예매만 가능, 해당 구단 선수 정보 등 팀에 대한 정보만 확인 가능
대부분 기본적인 기능만 제공
- 자체 구단 앱의 경우, 앱의 목적 자체가 해당 팀의 팬들을 위한 것이기 때문에 야구를 잘 모르는 유저들까지 타겟으로 포함하기에는 어려움이 있다는 점을 분석했습니다.

[유사 서비스 분석]

1️⃣ SPOT!

해당 서비스의 경우, 좌석의 시야를 제공하고, 간단한 추천 기능과 직관 아카이빙 기능을 제공합니다.
그러나, 현재 ‘잠실야구장’만 이용 가능한 상태입니다. 또한, 시야 사진을 1장 올려야만 한다는 점이 저희 서비스의 타겟들에게는 페인포인트가 될 수 있다고 분석했습니다.

2️⃣ 자리어때

해당 서비스의 경우, 유저가 좌석을 선택했을 때 그 좌석의 시야(실제 유저들의 사진), 예매 가격 등의 정보를 제공합니다.
즉, 좌석을 추천하는 기능보다는 좌석의 시야를 제공하는 데 중점을 두는 서비스입니다.
따라서, 해당 서비스의 메인 타겟은 야구장 좌석 예매 시 구역을 정한 후, 각 좌석의 시야를 알고 싶은 유저들로 분석했습니다.

🤩 ‘히트존’은 각 구단의 팬뿐만 아니라, 야구를 잘 알지 못하는 모든 사람이 야구장을 방문할 때 참고할 수 있는 유용한 기능을 제공한다는 점에서 차별점을 가집니다.

💬 유저리서치 및 인사이트

유저리서치 진행

💡 유저리서치

구글폼을 이용한 설문조사

서비스 런칭 시, 실 유저가 될 타겟들을 대상으로 설문조사를 진행했습니다.
응답자 총 265명의 응답을 수집했습니다.

[설문기간] 10월 6일부터 12일까지(7일 간)

[설문 목적]

야구 문화를 즐기고 싶지만 야구장에 대해 잘 알지 못하는 분들을 대상으로, 편리하게 야구를 관람할 수 있는 서비스를 기획하고 있기에, 야구 직관 시 느낄 수 있는 불편함을 파악하고, 이를 해결할 수 있는 서비스를 개발하고자 설문조사를 진행하는 것입니다.

[설문 배포 시 활용한 점]

도메인인 ‘야구’의 특성을 파악하여, 실제로 서비스 런칭 시 이용 확률이 높은 야구 팬들이 많이 모여있는 ‘팀 별 커뮤니티’를 파악하여 배포했습니다.

✅ 현재 설문조사는 완료되었으며, 결과를 바탕으로 인사이트를 도출했습니다.

인사이트 도출

💡 인사이트

1️⃣ 야구 예매 시 구역 별 특징은 중요한 요소로 여겨진다.

야구 예매 시 구역 별 특징 및 주의사항을 몰라 불편함을 겪는 사람들이 많음 - 52.8%
‘티켓을 예매하게 된다면 구역 별 특징을 고려할 것 답변 - 81.9%

2️⃣ 사람들은 구역 추천 기능을 사용하고자 하는 니즈를 가지고 있다.

니즈에 따른 구역 추천 기능이 있다면, 서비스 사용 의향 있음 - 96.3%
구역에 대한 정보를 쉽게 얻을 수 있다 67.6%, 내가 원하는 구역을 쉽게 추천받을 수 있을 것 같다 31.6% 등의 반응

3️⃣ 사람들은 야구장에 방문했을 때, 먹거리 정보에 대한 부족으로 어려움을 겪는다.

야구장 방문했을 때 먹거리 즐기는 사람 - 94.3%
먹거리 위치 정보 모름 55.8%, 인기 있는 먹거리 알기 힘듦 16.7% 등의 이유

▶️ 인사이트 : 야구장 관람객들은 구역별 특징과 먹거리 정보에 대한 접근성을 높일 수 있는 서비스에 높은 관심을 보인다.

👤 서비스 타겟층 정의

유저리서치 인사이트

유저 행동 매핑 (Behavior Mapping)

1️⃣ 설문조사 바탕으로 265명의 응답자를 5개 그룹으로 나누고, 행동변수 도출

→ A : 야구 열성팬, B : 가벼운 관람, C : 정보 중심, D : 먹거리 중시, E : 편의성 중시

2️⃣ 설문조사 데이터 바탕으로 유저 그룹 별 주요 행동 패턴 추출

→ A : 야구 열성팬, B : 가벼운 관람, C : 정보 중심, D : 먹거리 중시, E : 편의성 중시

3️⃣분포도 바탕으로 주요 그룹 A+C / B+E 패턴 분석

4️⃣ 분포도 바탕으로 주요 그룹 A+C / B+E 유저 표본 분석

→ A+C : 높은 야구 관심도와 세부적인 정보를 바탕으로 야구 관람을 하고자 하는 유저 표본

→ B+E : 비교적 낮은 야구에 대한 관심을 가지고 있으며, 간편하고 편리한 서비스 선호하는 유저 표본

💡 A+C / B+E 유저 표본의 패턴 분석을 기반으로 아래와 같이 서비스 타겟층을 도출했습니다.

A+C → 메인 타겟
B+E → 서브 타겟

서비스 타겟층 도출

⭐ 메인 타겟 : 원정경기를 보러 가는 야구 팬

➕ 서브 타겟 : 야구에 대해서 잘 모르지만, 야구 경기를 즐기고 싶은 초보자

🙋🏻 Persona & Journey Map & Story Board

Persona

Journey Map

Story Board

📝 데스크리서치

⭐️ 서비스 핵심 기능

MVP 포함 핵심 기능

1️⃣ 저희 히트존의 MVP는 '유저의 니즈에 맞는 각 구장 별 구역 추천' 입니다.

2️⃣ 2번째 핵심 기능은 ‘구장별 구역 가이드’ 입니다.

➕ 저희 서브 기능은 ‘야구 문화 가이드’ 입니다.

✳️ 핵심 기능에 이어서 코치마크를 구현했고, 추후 서브 기능과 온보딩, 마이페이지도 함께 구현할 예정입니다.

프로젝트 기간 내 구현 할 구장 선정

🧢 저희는 두 달이라는 한정된 프로젝트 기간을 고려하여 8개의 구장 중(한화 이글스파크는 2025년부터 신구장인 ‘베이스볼 드림파크’로 이전 예정이므로 제외),

잠실야구장과 수원KT위즈파크를 우선적으로 구현하고자 결정했습니다. 이 두 개의 구장을 선택한 이유는 다음과 같습니다.

1️⃣ 잠실야구장 (두산 베어스, LG 트윈스 홈구장, 서울 송파구 소재)

→ 현재 잠실야구장은 두 개의 서울 연고팀이 하나의 구장을 쓰는 중입니다. (두산 베어스, LG 트윈스)

따라서 전체 144 경기 중 72경기를 치르는 타 구장과 달리 온전히 144 경기를 모두 치르고 있습니다. 이로 인해 방문자 수가 많으므로, 잠실야구장을 우선적으로 구현하는 것이 적합하다고 판단했습니다.

구장명	수용 가능 인원(단위: 약) (기준: 좌석 기준)
잠실 야구장	25,000명
고척 스카이돔	17,000명
인천 SSG 랜더스필드	23,000명
기아 챔피언스 필드	20,500명
삼성 라이온즈 파크	24,000명
사직 야구장	23,500명
수원KT위즈파크	20,000명
창원NC파크	22,000명
한화생명이글스파크(이전 예정)	13,000명

또한, 각 구장 별 좌석 기준 수용 가능 인원을 조사해본 결과

잠실 야구장의 자체 수용 인원이 가장 많은 편이라는 점도 고려했습니다.

2️⃣ 수원KT위즈파크 (KT wiz 홈구장, 경기도 수원 소재)

→ 수원KT위즈파크의 경우, 홈 구장으로 사용하는 팀인 ‘KT wiz’가 2015년에 가장 늦게 창단되었지만, 해당 팀의 인기가 가파르게 증가하는 추세라는 점과 경기도 내 유일한 야구 팀이라는 점을 고려했습니다.

⑴ KT wiz의 꾸준한 상위권 성적 유지

잠실 ‘외딴섬’→3루 지배자로…주말 관중 3000명도 감지덕지였는데, 어떻게 비인기 꼬리표 뗐을까

뉴스 : 네이버스포츠

→ 기사에서 분석한 것처럼, KT wiz팀은 최근 꾸준한 상위권 성적(5년 연속 포스트 시즌 진출)을 유지하고 있어 많은 야구 팬들이 주목하는 동시에 많은 신규 팬이 유입되는 중인 상황입니다.

⑵ 2024 시즌 KBO 최초 기록 달성

더불어, 올해 2024 시즌에서 KBO 역사상 최초로 ‘와일드카드전 업셋’이라는 성과를 이뤄냈습니다.

올해도 꼴찌에서 가을까지…kt 마법야구, 진한 여운 남기고 종료 | 연합뉴스

[뉴스1 PICK]'0%' 확률 깬 KT…사상 첫 '5위 업셋' 주인공

⑶ KT wiz의 적극적인 마케팅 운영

케이티위즈 온라인스토어

KT wiz의 경우 가장 늦게 창단되었다는 점을 고려하여, 구단 자체적으로도 많은 팬들을 유입시키고자 활발한 마케팅 전략을 운영 중이라는 점을 분석했습니다.

굿즈 측면
- ‘스누피 콜라보 유니폼, MD 상품 출시’, ‘연고지인 수원을 활용한 정조대왕 유니폼 출시’, ‘선수들이 직접 그린 나만의 커스텀샵 오픈’을 진행 중입니다.
관람 편의 측면
- ‘홈구장 방문 시 무료 티켓 혜택 제공’, ‘원정 관람 편의를 위한 원정 마법사 버스 운행’ 등의 적극적인 마케팅 전략을 운영하는 구단입니다.

→ 이러한 점들을 고려하여, 잠실야구장과 함께 수원KT위즈파크를 우선적으로 구현할 구장으로 선정했습니다.

기능 추가 : 유저 편의성 증대

☝ GUI 작업 완료 후, 유저의 편의성을 증대하기 위해 추가한 부분입니다.

💬 온보딩 > 코치마크 / 홈화면 > 코치마크

코치마크

추가 계기

저희 메인 도메인의 특성상 유저마다 필요로 하는 정보가 상이하고, 그 정보의 양도 많습니다. 따라서, 한 페이지 내에 유저를 위한 다양한 버튼을 넣어 설계했습니다. 버튼에 대한 피로도를 줄이기 위해 버튼을 간결하게 구성했으나, 유저의 입장에서 설명이 필요하다고 판단했습니다.

따라서, 코치마크를 활용해 더 편리한 서비스를 만들고자 합니다.
코치마크가 웹앱의 형태로 구현할 저희 서비스에 잘 맞는 기능이라고 판단한 이유는,

1️⃣ 홈 화면에 대한 사용법을 제시하여 유저가 서비스를 잘 이해하게 만들 수 있기 때문입니다.

Coach Marks는 유저에게 특정 기능이나 화면의 중요한 부분을 강조하고 설명하기 위해 사용됩니다.

2️⃣ 추후 서비스의 확장성을 고려했을 때도, 코치마크가 유용할 것이라고 판단했기 때문입니다.

즉, 애플리케이션이나 웹사이트를 처음 사용하는 유저에게 도움이 되며, 새로운 업데이트나 기능 도입 시에도 유용하게 활용하고자 코치마크를 추가했습니다.

💬 홈 화면 / 구역 가이드

좌석 배치도 수정

추가 계기

저희 서비스의 경우, 메인 홈화면과 구역 가이드에서 야구장 좌석 배치도를 보여줌으로써 유저가 쉽게 좌석을 선택하고 그 좌석의 특징을 바로 확인할 수 있는 서비스를 제공합니다.
그러나, 두 화면에서 같은 야구장 좌석 배치도를 보여준다면, 메인 홈과 구역 가이드의 구분이 모호해지며 이는 사용성을 저하하기 때문에 명확한 구분이 가능해야 된다고 판단했습니다.
따라서, 메인 홈 화면과 구역 가이드의 정보 특징을 고려하여 각기 다른 좌석 배치도를 넣어 유저에게 보다 편리한 서비스를 제공하고자 합니다.

수정 후

메인 홈 : 구역별 좌석배치도
- 메인 홈에서 유저는 구역을 클릭함으로써 해당 구역의 특징과 한줄 팁을 볼 수 있습니다. 이를 위해서는 좌석 번호가 필요하지 않고, 각 구역에 대한 인식이 중요하다고 판단하여 아래와 같은 좌석 배치도를 홈화면에 배치했습니다.
구역 가이드 : 구역+구역 번호 좌석배치도
- 구역 가이드에서 유저는 구역을 클릭함으로써 해당 구역의 위치, 단차 등의 정보 그리고 참고사항과 같은 다양한 정보를 얻을 수 있습니다. 구역 번호를 언급하는 정보도 존재하기 때문에, 구역 가이드에는 구역 번호가 나타내는 좌석 배치도를 사용하여 유저의 정보 탐색을 더욱 용이하게 하였습니다.

💬 홈화면 > 구역 추천 받기 > 추천 결과 페이지

구역 추천 결과지 : 유형 레이아웃 및 해시태그 수정

추가 계기

구역 추천 결과에서 유저의 유형을 만들어줌과 동시에 구역 추천이 이루어지기 때문에, 해당 유형의 캐릭터 크기와 유형 설명 부분을 좀 더 눈에 잘 들어오고 이해하기 쉽게 구성할 필요가 있다고 판단했습니다. 따라서, 상단의 유형 결과 레이아웃과 해시태그를 수정함으로써 직관적인 이해가 가능하게 할 예정입니다.

수정 후

레이아웃 변경 : 유형 캐릭터 사이즈를 키우고 레이아웃을 더 이해하기 쉽게 변경했습니다.
유형 해시태그 변경 : 유형에 대한 긴 설명을 없애는 대신 해시태그만으로도 바로 어떤 유형인지 알 수 있도록 변경했습니다.
- Ex. “주6일 야구장 출퇴근러” 유형 해시태그
기존 #월요일은심심해 #18시를공기로안다 → 변경 후 #비공식응원단장 #오늘도야구장출석완료

💬 홈화면 > 야구장 초보 가이드

야구장 초보 가이드 : UX 라이팅 및 레이아웃 수정

추가 계기

기존에는 홈 화면에 야구장 초보 가이드 버튼을 누르면 1) 야구 직관 Tip, 2) 좌석 예매 정보를 볼 수 있었습니다.

해당 버튼은 서브 타겟인 ‘야구장에 방문하고 싶지만 야구에 대해서 잘 모르는 사람’을

위한 기능으로, 야구 직관 초보자가 야구에 대해 잘 모를 만한 내용을 담았습니다.
야구장을 처음 방문하는 사람의 경우, 좌석 예매를 유형 추천 결과에 나오는 예매하러 가기 버튼을 통해서 하거나, 혹은 관람 파트너가 예매를 대신 해주는 경우가 많기 때문에 좌석 예매 정보가 이들에게 유의미하지 않다고 판단했습니다. 따라서, 좌석 예매 정보를 빼는 대신 야구 직관 Tip을 조금 더 친절하게 전달하고자 합니다.

수정 후

야구장 초보 가이드 버튼 : 보다 직관적인 이해를 위해 ‘야구장 초보 가이드’를 ‘야구 직관 Tip’으로 변경했습니다.
- 기존 : 야구장 초보 가이드
- 변경 후 : 야구 직관 Tip
야구 직관 Tip-야구장 직관 매너
- 서브 타겟인 초보자의 이해를 돕기 위해 내용을 최대한 친절하고 간략하게 적고, 일러스트를 통해 직관적으로 나타내고자 했습니다.
- 친절한 느낌을 위해 모든 문장을 ~요체로 통일했습니다.

💻 사용성 테스트

1차 MVP 기능을 중심으로 유저테스트와 UT 후 인터뷰를 진행했습니다.

💡UT

UT 방식 : 온라인(zoom, 구글미트 등) / 대면진행
UT 일시 : 24.11.18 ~ 24.11.23
참여자 : 총 16명
- 메인 타겟 : 7명
- 서브 타겟 : 9명

💰 비즈니스모델

⚙️ Information Architecture (IA)

🌎 확장 서비스

서비스 확장 개요

HitZone은 야구 관련 주요 기능을 성공적으로 구현한 이후, 서비스의 범위를 확장하여 야구 문화 경험과 개인화된 유저 데이터 관리를 제공하고자 합니다. 이를 통해 더 많은 유저층을 확보하고, 기존 유저들의 충성도를 강화할 예정입니다.

➡️ 서비스 확장의 필요성

더 넓은 유저층 확보
- 기존의 메인 타겟 외에도, ‘야구에 관심은 있지만 잘 모르는’ 서브 타겟 을 대상으로 서비스를 확장함으로써 더 큰 시장 점유율을 확보할 수 있습니다.
  
  → 초보자들을 위한 친근한 서비스 제공
종합적인 경험 제공
- 단순 경기 관람이 아닌, 구장 주변의 음식과 문화 콘텐츠를 포함한 종합적인 경험을 제공할 수 있습니다.
- 유저의 개인 데이터를 기반으로 맞춤형 기능을 제공하여 지속적인 유저 참여를 유도합니다.

야구 문화 - 먹거리, 즐길거리

🍔 야구 문화

야구 문화 메인 페이지 / 상세 정보 팝업

주요 기능

야구 문화 페이지에서 구장을 선택한 후, 해당 구장에서 즐길 수 있는 컨텐츠를 한 번에 확인할 수 있습니다.
이때, 먹거리, 즐길 거리 / 구장 내부, 구장 외부 별 즐길 수 있는 다양한 컨텐츠를 제공할 예정입니다.
초기에는 구장에서 가장 인기 있는 먹거리 약 5개를 선별하여 소개한 후, 추후 모든 먹거리로 확장할 계획입니다.

기대효과

라이프스타일과 연관된 야구 컨텐츠로 연결하여 서브 타겟의 참여를 유도하고자 합니다.
다양한 방문 경험을 제공하여 서비스 재이용률 증가를 기대할 수 있습니다.

마이페이지 - HitZone 에서의 모든 기록 확인

🔒 마이페이지

챗봇 대화 기록 / 좌석 추천 정보

주요 기능

마이페이지에서는 유저가 HitZone을 사용하면서 생긴 모든 기록들을 확인할 수 있습니다.
- 좌석 추천 정보 : HitZone의 주요 기능인 “구역 추천”에서의 좌석 추천 결과 기록, 유저가 선호 좌석을 확인하고 최적의 선택을 할 수 있도록 도움을 줄 수 있습니다.
- 챗봇 대화 기록 : 챗봇 루키와 했던 기록 모두 확인 가능, 유저가 쉽게 과거 대화 내역을 참고할 수 있습니다.

기대효과

유저 데이터 제공을 통해 개인화된 경험을 강화하고자 합니다.
투명성과 기록 관리 서비스 제공을 통해 유저의 서비스 신뢰도를 향상할 수 있습니다.

🌟 디자인

Branding

💡 HitZone

‘HitZone’ 의 ‘n’을 의자 모양으로 형상화 + 야구공을 합쳐서 만든 로고 의자 모양을 형상화해서 유저에게 알맞는 자리(구역)를 추천해주겠다는 의미를 담음
‘n’ > 로고 디테일 수정

Character

🔥 유형별 5가지 3D캐릭터 제작 완료

Design System

💡 Color -핑크(피그마>main color>50)가 조화를 상징하는 컬러이기도 하고 (신규) 팬들이 팀에 대한 애정이나 경기에 대한 열정을 표현할 수 있는 컬러로 활용할 수 있음

그레이 스케일을 주로 쓰되 메인 컬러는 포인트를 주는 방향으로 활용
구장별 다양한 좌석을 구장별로 쓰고 있는 좌석 색상으로 구분

구장 컴포넌트

⛳ 잠실종합운동장

⛳ KT위즈파크

GUI 디자인

⚾ 온보딩 > 로그인

⚾ 홈화면

⚾️ 홈화면 > 나에게 맞는 구역 찾으러 가기

⚾ 홈화면 > 챗봇

⚾ 구역 가이드

⚾ 야구 문화

⚾ 마이페이지

🧑🏻‍💻👩🏻‍💻 개발

🚀 Backend

사용 스택 & 선정 이유

🛠 Stacks

Spring Boot 3.3.4
JDK 17
MySQL
NCP Object Storage : 정적 리소스 파일을 관리하기 위해 사용하였습니다.
NCP Clova Studio : 챗봇 답변을 도출하기 위한 AI 기능으로 활용하였습니다.
Redis : Refresh Token 관리 & 분산 락에 활용하였습니다.
Jwt Token & Cookie : 유저를 인증하고, 토큰을 안전하게 보관 및 전달하기 위해 사용하였습니다.
Nginx : 웹 서버, 리버스 프록시 등을 사용해 블루 ↔ 그린 무중단 배포에 활용하였습니다.
Docker : 프로젝트를 빌드하고 NCP 인스턴스 내부에서 서버 컨테이너를 실행하는데 활용하였습니다.
Docker Compose : 여러 컨테이너가 동일한 환경 & 네트워크에서 실행되도록 하며, 간편하게 컨테이너들을 관리하기 위해 사용하였습니다.
NCP Container Registry : Docker Image를 관리하는데 사용하였습니다.
Github Actions : CICD 작업을 수행하는데 활용하였습니다.

시스템 아키텍처

ERD

Issue & PR

Code Review & Approve 룰 설정
- 상대방이 Approve 올린 사람이 Merge

Branch

생성한 이슈에 따라서 브랜치 생성 Ex) feature/#4/login
main branch : 개발 최종 완료 시 merge
develop branch : 개발 진행
feature branch : 각 새로운 기능 개발
hotfix branch : 배포 이후 긴급 수정
refactor branch : 리팩토링 진행

Commit Message

이슈 번호 붙여서 커밋 Ex) #4 [feat] : 로그인 기능을 추가한다
Body는 추가 설명 필요하면 사용

작업태그	내용
feat	새로운 기능 추가 / 일부 코드 추가 / 일부 코드 수정 (리팩토링과 구분) / 디자인 요소 수정
fix	버그 수정
refactor	코드 리팩토링
style	코드 의미에 영향을 주지 않는 변경사항 (코드 포맷팅, 오타 수정, 변수명 변경, 에셋 추가)
chore	빌드 부분 혹은 패키지 매니저 수정 사항 / 파일 이름 변경 및 위치 변경 / 파일 삭제
docs	문서 추가 및 수정
rename	패키지 혹은 폴더명, 클래스명 수정 (단독으로 시행하였을 시)
remove	패키지 혹은 폴더, 클래스를 삭제하였을 때 (단독으로 시행하였을 시)

Naming

패키지명 : 한 단어 소문자 사용 Ex) service
클래스명 : 파스칼 케이스 사용 Ex) JwtUtil
메서드명 : 카멜 케이스 사용, 동사로 시작 Ex) getUserScraps
변수명 : 카멜 케이스 사용 Ex) jwtToken
상수명 : 대문자 사용 Ex) EXPIRATION_TIME
컬럼명 : 스네이크 케이스 사용 Ex) user_id

Package

DDD 방식을 사용하였습니다.

global
result
- application
  - dto
    - request
    - response
  - service
- domain
  - enums
  - model
  - repository
  - service
  - util
- presentation
- status
- infra
  - jpa
    - entity
    - repository
    - repositoryImpl
  - mapper
stadium
user

API Documentation

REST Docs + Swagger 📑

API Response

{
  "isSuccess": true,
  "code": "200",
  "message": "가이드 챗봇 답변을 가져오는 데 성공했습니다.",
  "payload": {
    "answers": [
      "야구장 입장 가능 시간은 경기 시작 시간을 기준으로 평일 90분 전, 주말 120분 전입니다.",
      "또한, 경기 시작 이후에도 언제든지 입장이 가능하고 경기가 모두 끝나지 않은 이후라도 언제든지 원하는 시간에 퇴장도 가능해요!"
    ],
    "imgUrl": null
  }
}

isSuccess : 성공 여부
code : 성공 코드, HTTP 상태 코드와 동일함
message : 성공 메세지, 커스텀 가능
payload : 데이터가 들어가는 곳

1차 리팩토링 진행

[A팀] 백엔드 파트 코드리뷰용 PR by bbbang105 · Pull Request #44 · KUSITMS-30th-TEAM-A/backend

심사위원분께서 코드리뷰 해주신 코멘트를 기반으로 refactor-v1 브랜치에서 1차 리팩토링을 완료하였습니다.

🖥️ Frontend

사용 스택 & 선정 이유

🛠 Stacks

React 18.3.1 : 컴포넌트를 기반으로 상태관리, 재사용 및 유지보수에 강한 프론트엔드 UI 개발 라이브러리
Next.js 15.0.2 : React 기반의 서버 사이드 렌더링(SSR)을 지원하는 프레임워크로 빌드 속도 최적화 제공
typescript 5.6.3 : 코드 안정성, 타입 명시, 런타임 에러 예방을 위한 정적 타입 시스템 제공
tailwind css 3.4.13 : 빠른 커스텀 디자인 적용과 효율적인 반응형 디자인 구현을 위한 CSS 프레임워크
Axios 1.7.7 : REST API 요청 처리와 서버와의 비동기 통신을 간결한 인터페이스로 제공하는 HTTP 클라이언트 라이브러리
Vercel : 자동화된 빌드 및 배포 프로세스를 제공하고, Next.js에 최적화된 배포 환경을 제공하는 프론트엔드 호스팅 서비스

Issue & PR

이슈 템플릿 설정
- 기능 이슈
- 버그 이슈
프론트 맞춤형 PR 템플릿 설정
Code Review & Approve 룰 설정
- 상대방이 Approve 올린 사람이 Merge

Branch

feature branch rule
- 동사X
- 커밋유형/#이슈번호-이슈명요약(영어,명사)
- 카멜 케이스
- Ex) design/#1-loginPage
- Ex) feat/#2-loginPageApi
브랜치 종류
- feature branch : 각 새로운 기능
- develop branch : 실 개발 진행 (default)
- hotfix branch : 배포 이후 긴급 수정
- main branch : 개발 최종 완료 시 merge

Commit Message

🐻‍❄️ 일반 커밋
- (#1) 🚀 feat: 야구 좌석 컴포넌트 API 연동
- (#2) 🎨 design: 구매 페이지 버튼 칩스 생성
- (#이슈번호) 이모지 커밋유형: 커밋내용
- 커밋내용은 한글, 영어 자유
🐻‍❄️ 머지 커밋
- (#3) 🐻‍❄️ FRONT: 야구 좌석 페이지 구현 및 머지
- (#PR번호) 이모지 대표자: 이슈 내용 요약 및 머지

커밋 유형	설명
⚒️ chore	빌드 부분 혹은 패키지 매니저 수정 사항 / 파일 이름 변경 및 위치 변경 / 파일 삭제
🎨 design	새로운 컴포넌트 추가 / 디자인 요소 수정
📑 docs	문서 추가 및 수정
🚀 feat	새로운 기능 추가 / 일부 코드 추가 / 일부 코드 수정 (리팩토링과 구분)
🐞 fix	버그 수정
🔄 refactor	코드 리팩토링
✂️ remove	패키지 혹은 폴더, 클래스를 삭제하였을 때 (단독으로 시행하였을 시)
✏️ rename	패키지 혹은 폴더명, 클래스명 수정 (단독으로 시행하였을 시)
✨ style	코드 의미에 영향을 주지 않는 변경사항 (코드 포맷팅, 오타 수정, 변수명 변경, 에셋 추가)

Package

├─ public
├─ src
	 ├─ api
	 ├─ assets
	 ├─ components
	 ├─ constants
	 ├─ hooks
	 ├─ pages
	 ├─ styles
	 ├─ types
	 └─ utils

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

👥 팀 소개

🌟 R&R 분배

💡 기획

⚾️ 서비스 개요

🔎 기획 배경

💬 유저리서치 및 인사이트

👤 서비스 타겟층 정의

🙋🏻 Persona & Journey Map & Story Board

📝 데스크리서치

⭐️ 서비스 핵심 기능

💻 사용성 테스트

💰 비즈니스모델

⚙️ Information Architecture (IA)

🌎 확장 서비스

🌟 디자인

🧑🏻‍💻👩🏻‍💻 개발

🚀 Backend

사용 스택 & 선정 이유

시스템 아키텍처

ERD

Issue & PR

Branch

Commit Message

Naming

Package

API Documentation

API Response

1차 리팩토링 진행

🖥️ Frontend

사용 스택 & 선정 이유

Issue & PR

Branch

Commit Message

Package

Files

README.md

Latest commit

History

README.md

File metadata and controls

👥 팀 소개

🌟 R&R 분배

💡 기획

⚾️ 서비스 개요

🔎 기획 배경

💬 유저리서치 및 인사이트

👤 서비스 타겟층 정의

🙋🏻 Persona & Journey Map & Story Board

📝 데스크리서치

⭐️ 서비스 핵심 기능

💻 사용성 테스트

💰 비즈니스모델

⚙️ Information Architecture (IA)

🌎 확장 서비스

🌟 디자인

🧑🏻‍💻👩🏻‍💻 개발

🚀 Backend

사용 스택 & 선정 이유

시스템 아키텍처

ERD

Issue & PR

Branch

Commit Message

Naming

Package

API Documentation

API Response

1차 리팩토링 진행

🖥️ Frontend

사용 스택 & 선정 이유

Issue & PR

Branch

Commit Message

Package