스포츠 경영을 꿈꾸면서, 단순히 기록만 보는 분석이 아니라 구단의 시각으로 경기를 해석하는 공간이 필요했습니다. 그런 플랫폼이 없었기에, 직접 만들어보기로 결심했습니다. 그렇게 시작된 프로젝트가 바로 Sports Monologue입니다.
1. 시작 – 왜 만들게 되었는가
야구를 좋아하며 경영을 배우고 싶은 사람으로서 단순한 팬 페이지가 아닌, 분석을 경영 언어로 풀어내는 사이트가 필요했습니다. 이 웹사이트는 단순히 기록을 모아두는 곳이 아니라 구단 경영을 연구하는 전력분석실이 되길 바랐습니다.
처음에는 “블로그만 있으면 되겠지”라는 생각으로 출발했지만, 점점 ‘이왕 만드는 거 제대로 만들어야 한다’는 마음으로 변했습니다.
2. 첫 시도 – 정적 HTML 페이지
- 개인 도메인 3t1sy1fa.com 구매
- GitHub Pages로 간단한 정적 사이트 제작
- HTML과 CSS로 메인 화면과 메뉴(선수·경기·구단 분석) 구현
하지만 글을 올릴 때마다 HTML 파일을 직접 수정해야 해서 작성 → 수정 → 재업로드의 반복이 힘들었습니다. 글을 쓰는 데 집중하고 싶다는 생각이 들었고 새로운 방법을 찾게 됐습니다.
3. 관리가 쉬운 블로그로 – Netlify CMS 도입
- Netlify CMS를 사용해 웹에서 직접 글을 작성·관리
- 작성한 글이 .md 파일로 저장되고 사이트에 자동 반영
- 블로그답게 꾸밀 수 있는 기반이 생김
하지만 여기서도 문제가 있었습니다.
Markdown으로는 글을 올리면 되는데, 페이지 전체 구조를 바꾸려면 여전히 직접 HTML을 손봐야 하고, 사이트가 단순 ‘글 모음’ 같아 보여 분석실답게 체계화하기 어려웠죠.
4. 사이트를 처음부터 다시 짓다 – Eleventy로 전환
결국 사이트를 처음부터 다시 짓기로 했습니다. Markdown → HTML 자동 변환, 카테고리 관리, 글 목록 자동 생성…
이 모든 걸 하려면 Static Site Generator(SSG)가 필요했죠.
- Eleventy(11ty) 도입
- /src 중심으로 코드 구조를 전면 개편
- 공통 레이아웃(includes, layouts)으로 디자인 통일
- Netlify CMS와 Eleventy 연동 → 글 작성 → 자동 변환 → 게시
빌드 오류와 삽질
이 과정에서 많은 실패가 있었습니다…
- Netlify 빌드 에러: 처음에는 layout.njk 파일을 못 찾는다는 오류가 계속 발생
- CSS와 이미지 경로 문제로 사이트가 제대로 뜨지 않음
- Sass, TypeScript 같은 패키지가 갑자기 설치돼서 빌드가 꼬임
- 레이아웃이 깨지고 반응형이 동작하지 않아 HTML과 CSS를 몇 번이고 다시 작성
하지만 이런 문제를 해결하면서 Eleventy의 구조와 빌드 프로세스를 확실히 이해하게 됐습니다.
5. 구단별 전용 분석 페이지
Sports Monologue의 핵심 중 하나는 10개 구단을 각각 독립적으로 분석할 수 있는 페이지입니다.
- /teams/lg, /teams/kia … 식으로 팀별 페이지 생성
- 각 팀 색상을 반영한 전용 CSS 제작
- 좌측은 최근 경기 결과 + 공식 링크, 우측은 사견 분석글
- 경기 결과는 game-results.json으로 관리 → 한 번 수정 시 모든 팀 페이지 자동 반영
처음에는 각 팀 페이지를 하나하나 수작업으로 만들었지만, 데이터와 반복문을 이용하면서 유지보수가 훨씬 쉬워졌습니다.
6. 디자인과 반응형 UI
디자인에서도 KBO 공식 홈페이지처럼 정제된, 분석실다운 느낌을 내고 싶었습니다.
- 상단을 좌우로 나눠 로고와 메뉴 배치
- 메뉴: 선수 분석, 구단 분석, 경기 분석, 소개, 문의, Manage Mode
- 폰트와 레이아웃을 KBO 감성에 맞게 조정
- 모바일에서도 깨지지 않도록 반응형 레이아웃 적용
7. 앞으로의 목표
- 선수별 분석 페이지 자동 생성 기능
- 댓글과 커뮤니티 기능 도입
- 전력분석 데이터를 활용한 승부 예측 시스템 개발
Sports Monologue는 단순히 블로그가 아닙니다.
경기를 기록하고 분석해, 콘텐츠로 만들고,
그 콘텐츠로 다시 경영을 이야기할 수 있는 플랫폼입니다.
이곳이 언젠가 제가 꿈꾸는
프로야구 구단 전력분석실의 시작점이 되길 바랍니다.