크로스핏 홈페이지 디자인, 일산 바시티 크로스핏 커뮤니티 제작기

요약 크로스핏 홈페이지 디자인에서 저희가 붙잡은 질문은 "센 사람들만 하는 운동 아닐까, 마흔 넘어 처음인데 괜찮을까"였습니다. 바시티 크로스핏은 실제 고객이 아니라, 블러썸팩토리가 경기 일산의 가상 동네 크로스핏을 정하고 실제 의뢰처럼 대표 코치의 강점부터 잡아 만든 포트폴리오 홈페이지입니다. 회원 이름과 기록을 모두 기억하는 코치, 매달 열리는 커뮤니티 이벤트, 부모와 아이가 함께하는 패밀리 클래스를 이름표와 리더보드, 티켓 캘린더로 어떻게 보여 줬는지 디자이너가 직접 들려 드립니다.

일산의 가상 동네 크로스핏, 이렇게 가정했습니다

신도시 동네에서 크로스핏을 알아보는 분들의 망설임은 조금 다릅니다. "센 사람들만 하는 운동 아닐까", "마흔 넘어 처음인데 혼자 뒤처지면 어쩌지", "주말엔 아이를 봐야 하는데" 같은 걱정입니다. 이분들에게 필요한 건 강도 높은 영상이 아니라, "여기는 나를 받아 주는 팀"이라는 느낌입니다.

그래서 가상의 박스 '바시티 크로스핏'을 정하고, 진아름 대표 코치라는 가상 인물에게 강점 하나를 주었습니다. "등록한 회원 한 사람 한 사람의 이름과 기록을 모두 기억하는 코치"입니다. 여기에 매달 커뮤니티 이벤트, 부모와 아이가 함께하는 패밀리 클래스, 마흔 이후 입문반을 더했습니다. 헤드라인은 WE KNOW YOUR NAME.으로, 한글 부제는 "회원 이름과 기록을 모두 기억하는 일산 동네 크로스핏, 바시티"로 정했습니다. 같은 크로스핏이라도 「아이언하우스 크로스핏 제작기」가 '끝까지 하게 만드는 스케일링'을 내세웠다면, 바시티는 '이름으로 기억되는 팀'을 내세운 셈입니다.

사진은 포트폴리오라서 연출 사진(AI 생성 이미지와 무료 사진)을 썼습니다. 실제 제작에서는 대표 코치님과 회원들, 커뮤니티 이벤트 현장을 저희가 직접 촬영합니다.

첫 화면: 펠트 패치, 그리고 넘어가는 이름표

사이트를 열면 2019, 40+, FAMILY, GO TEAM 패치가 '쿵' 하고 눌리듯 차례로 찍히고, 가운데 VARSITY 로고 패치가 박음질 선을 따라 완성됩니다. 이어서 페넌트 톱니 모양의 막이 걷히며 첫 화면이 열립니다. 학교 운동부 재킷에 패치를 하나씩 붙이던 소속감을 첫 3초에 옮기고 싶었습니다.

히어로 왼쪽에는 WE KNOW YOUR NAME.을 초록과 벽돌색 슬랩 세리프로 크게 세우고, 오른쪽에는 회원들이 하이파이브하는 폴라로이드 사진을 겹쳐 붙였습니다. 사진 아래 'HELLO MY NAME IS' 이름표에는 공항 안내판처럼 글자가 촤르륵 넘어가며 '지수 회원님', '민호 아버님', '영숙 회원님'이 차례로 바뀌고, 그 아래 '06:30 클래스', '40+ 입문반 3주차' 같은 메모가 따라옵니다. 이름을 기억하는 코치라는 강점을, 문장보다 먼저 눈으로 겪게 한 장치입니다.

바로 아래에는 MONTHLY, FAMILY, 40+ 세 단어로 강점을 정리하고, 스크롤 속도에 따라 펄럭이는 페넌트 가랜드를 걸었습니다.

디자인 언어: 오래된 학교 체육관과 바시티 재킷

크로스핏 홈페이지는 검정과 형광색으로 강하게 가는 경우가 많습니다. 하지만 마흔 이후 입문자와 아이 손을 잡고 오는 부모에게 그런 화면은 "나와는 먼 곳"으로 읽힙니다. 그래서 오래된 대학 체육관과 바시티 재킷에서 색을 가져왔습니다. 크림 바탕에 포레스트 그린과 머스터드, 포인트로 벽돌 레드를 쓰고, 사진 속 초록 벽과 크림색 티셔츠까지 같은 색으로 맞춰 화면 전체가 한 팀 유니폼처럼 묶이게 했습니다.

영문 대제목은 두꺼운 슬랩 세리프 Alfa Slab One, 라벨과 숫자는 칼리지 서체 Graduate로 학교 연감 분위기를 냈습니다. 한글은 Pretendard로 또렷하게 읽히게 했습니다. 장식으로는 펠트 패치, 페넌트, 티켓 스텁, 폴라로이드, 필름 그레인을 얹어 차갑고 강한 크로스핏이 아니라 따뜻한 동네 팀으로 보이게 했습니다.

섹션 구성: "나도 이 팀에 끼고 싶다"까지의 순서

커뮤니티형 박스에서 방문자가 확인하고 싶은 것은 운동 강도보다 사람입니다. 그래서 대표 코치를 가장 먼저 소개하고, 그다음에 회원들이 서로 축하하는 리더보드, 가족과 마흔 이후를 위한 수업, 이달의 이벤트 순서로 이어 갔습니다.

대표 코치 섹션은 학교 연감 한 페이지처럼 만들었습니다. 제목은 "이름을 부르고, 지난 기록을 기억하는 코치"이고, 한마디는 "이름을 부르면, 사람은 한 번 더 옵니다."입니다. 옆에는 '처음 온 날부터 이름으로', '기록은 코치가 기억합니다', '매달 한 번, 다 같이' 세 가지 약속을 붙이고, 손글씨 메모처럼 코치 노트 예시를 달았습니다. "지수님 — 백스쿼트 지난주보다 2.5kg, 무릎 안쪽 모이는 것 다시 체크"처럼 실제로 기억한다는 증거를 보여 주는 것입니다.

이 사이트의 핵심은 스플릿 플랩 리더보드입니다. 박스 입구의 안내판처럼 글자가 촤르륵 넘어가며 '이번 주 완주 순위', 'PR 축하합니다!', '새 친구 환영해요' 세 판이 7초마다 바뀌고, 탭으로 직접 고를 수도 있습니다. 판에 오르는 기준은 무게가 아니라 '이번 주 개근', '첫 RX 완주', '아이와 함께' 같은 꾸준함입니다. 1등을 가리는 판이 아니라 다 같이 축하하는 판이라는 점이, 센 사람만 대접받을까 하는 걱정을 풀어 줍니다.

패밀리 클래스는 "엄마 아빠의 운동 시간이 아이와 노는 시간이 되도록"이라는 제목 아래, 부모와 아이가 나란히 케틀벨을 드는 사진과 대상·기구·코치 수·형제자매 환영을 작은 카드로 정리했습니다. 그 아래 초록 박스에는 "마흔 넘어 처음이어도 괜찮아요"로 시작하는 40+ 입문반 안내를 붙여, 가족과 마흔 이후라는 두 망설임을 한 화면에서 함께 풀었습니다.

이달의 이벤트는 티켓 캘린더로 만들었습니다. 10월의 파트너 WOD, 패밀리 데이 운동회, 호수공원 5K 런과 브런치, 바비큐 데이, 핼러윈 코스튬 WOD가 색이 다른 티켓으로 놓여 있고, 누르면 절취선의 스텁이 찢겨 떨어지며 티켓이 뒤집혀 시간과 대상, 내용이 나옵니다. 운동 바깥의 분위기를 보여 주는 이 섹션이 "나도 이 팀에 끼고 싶다"는 마음을 가장 크게 움직인다고 봤습니다.

휴대폰 화면: 이름표와 리더보드를 한 손에

동네 박스는 휴대폰으로 처음 만나는 경우가 대부분입니다. 그래서 모바일에서도 이름표와 리더보드의 플랩 효과를 그대로 살리고, 리더보드는 칸 수를 줄여 글자가 작아지지 않게 했습니다. 티켓 캘린더는 세로로 한 장씩 쌓아 엄지로 하나씩 뜯어 볼 수 있게 했습니다.

마지막 'ADMIT ONE.' 티켓에는 "첫 수업은 무료입니다. 이름만 알려 주세요."를 크게 적었습니다. 화면 아래에는 '전화'와 '첫 수업 무료 예약' 버튼을 고정해, 리더보드나 이벤트를 보다가 마음이 생기면 바로 연락할 수 있게 했습니다.

검색 세팅, 그리고 우리 박스에 적용한다면

동네 크로스핏은 "일산 크로스핏", "역 이름 + 크로스핏"처럼 지역으로 검색하는 분들이 가장 많고, "40대 크로스핏", "아이와 함께 운동"처럼 상황을 검색하는 분도 있습니다. 그래서 페이지 제목은 "바시티 크로스핏 | 이름을 부르는 동네 크로스핏 · 일산"으로, 설명 문구에는 "일산 동네 크로스핏", "매달 커뮤니티 이벤트", "패밀리 클래스", "40대 이후 입문자 환영", "첫 수업 무료"를 담았습니다. 실제 제작에서는 패밀리 클래스와 40+ 입문반을 각각 페이지로 나눠 상황별 검색어도 받을 수 있게 합니다.

첫 화면 외 이미지는 지연 로딩으로 불러오고, 플랩과 페넌트 효과는 가볍게 만들었습니다.포트폴리오 자체는 가상 업체라 noindex로 검색에서 빼 두었습니다. 실제 의뢰라면 업체 정보와 수업 시간을 담은 구조화 데이터를 넣고 네이버와 구글에 등록한 뒤, 매달 이벤트 후기를 검색 노출용 칼럼으로 함께 발행합니다. 그룹 수업의 분위기를 시간표로 풀어낸 다른 사례는 「모션 클럽 헬스장 제작기」에서 보실 수 있습니다.

제작은 대표님 인터뷰에서 시작합니다. 회원들이 왜 우리 박스를 '우리 팀'이라고 부르는지 듣고 강점을 한 문장으로 정한 뒤, 수업과 이벤트, 처음 오는 날의 과정을 짭니다. 이어서 실제 수업과 커뮤니티 이벤트를 직접 촬영하고, 디자인과 효과, 검색 세팅을 거쳐 오픈한 뒤 첫 수업 예약 클릭 같은 숫자를 함께 확인합니다. 첫 화면 설계 순서는 「병원 홈페이지 제작, 첫 화면에 원장님이 보여야 하는 이유」에 병원 사례로 정리해 두었는데, 박스도 대표 코치가 첫 화면의 주인공이라는 점은 같습니다.

비용은 330만 원(부가세 포함)으로 직접 촬영이 포함되고 페이지 수와 수정 횟수에 제한이 없습니다. 검색 노출용 칼럼 6편과 오픈 후 3개월 유지보수도 무료이며, 이후 유지보수 정기권은 월 110만 원(월 마케팅이나 개원 마케팅 이용 시 무료)입니다. 다른 업종 사례는 홈페이지 포트폴리오에서, 우리 박스 홈페이지에서 무엇부터 바꾸면 좋을지는 무료 사전 진단으로 먼저 확인해 보세요.

완성된 홈페이지 직접 둘러보기 ↗

자주 묻는 질문

크로스핏 홈페이지 제작 비용은 얼마인가요?

330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색 노출용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다.

매달 바뀌는 이벤트 일정도 고쳐 주시나요?

오픈 후 3개월은 무료로 수정해 드리고, 이후에는 유지보수 정기권으로 이벤트와 시간표, 코치 변경을 맡기실 수 있습니다.

리더보드에 회원 이름을 올려도 괜찮을까요?

실제 운영에서는 닉네임으로 올리고, 원하지 않는 회원은 빼는 방식을 권합니다. 화면에도 그 원칙을 함께 적어 둡니다.

효과가 많으면 휴대폰에서 느리지 않나요?

첫 화면 외 이미지는 지연 로딩하고 효과는 가볍게 만들어, 휴대폰에서 직접 검수한 뒤 오픈합니다.

회원과 아이들 사진을 홈페이지에 써도 되나요?

촬영 전에 동의를 받은 회원만 찍고, 아이는 보호자 동의를 받으며, 원하지 않는 분은 얼굴이 드러나지 않게 구도를 잡아 촬영합니다.