헬스장 홈페이지 제작기, 마포 그룹 트레이닝 모션 클럽 디자인 이야기
요약 헬스장 홈페이지 제작에서 저희가 붙잡은 질문은 "운동을 오래 쉰 사람도 이 수업에 끼어들 수 있을까"였습니다. 모션 클럽은 실제 고객이 아니라, 블러썸팩토리가 서울 마포의 가상 그룹 트레이닝 헬스장을 정하고 실제 의뢰처럼 대표 코치의 강점부터 잡아 만든 포트폴리오 홈페이지입니다. 정원 12명에 코치 2명, 동작마다 난이도 3단계라는 약속을 시간표와 난이도 토글로 어떻게 보여 줬는지 디자이너가 직접 들려 드립니다.
마포의 가상 그룹 트레이닝 헬스장, 이렇게 가정했습니다
그룹 운동을 알아보는 분들의 걱정은 1:1 PT와 다릅니다. "운동을 오래 쉬었는데 따라갈 수 있을까", "뒤에서 눈치만 보다 끝나면 어쩌지"처럼 실력보다 분위기를 먼저 걱정합니다. 직장인과 동네 주민이 섞이는 마포 같은 지역에서는 "여기라면 계속 다닐 수 있겠다"는 느낌이 가격보다 먼저 결정을 움직입니다.
그래서 가상의 헬스장 '모션 클럽'을 정하고, 한도윤 대표 코치라는 가상 인물에게 강점 하나를 주었습니다. "모든 수업 정원 12명에 코치 2명, 처음 온 사람도 이름을 불러 주고 동작마다 난이도를 3단계로 바꿔 주며 운동을 계속하게 만드는 코치"입니다. 헤드라인은 "혼자서는 안 하던 운동, 같이 하면 합니다."로 정했습니다. 잘하는 사람을 위한 곳이 아니라, 계속 오는 사람이 많은 클럽이라는 이야기입니다.
사진은 포트폴리오라서 연출 사진(AI 생성 이미지와 무료 사진)을 썼습니다. 실제 제작에서는 대표 코치님과 코치 팀, 실제 수업 장면을 저희가 직접 촬영합니다. 그룹 트레이닝은 함께 땀 흘리는 분위기가 곧 상품이라, 실제 회원과 공간을 찍은 사진만큼 설득력 있는 자료가 없습니다.
첫 화면: 3·2·1 GO, 그리고 스티커처럼 붙인 숫자
사이트를 열면 수업 타이머처럼 큰 이탤릭 숫자 3, 2, 1이 코발트와 레드 배경을 가르며 카운트다운되고, "GO!"와 함께 사선 띠 두 줄이 화면을 열어 줍니다. 그룹 수업이 시작되기 직전의 살짝 설레는 긴장감을 첫 3초에 옮기고 싶었습니다. 혼자 하는 운동이 아니라 "이제 같이 시작한다"는 신호입니다.
히어로에는 MOVE TOGETHER 대형 타이포 아래로 심박 선이 지나가고, 여러 명이 함께 점프 스쿼트를 하는 사진을 알약 모양으로 잘라 넣었습니다. 사진 위에는 '정원 12명', '코치 2명', '동작마다 난이도 3단계'를 스티커처럼 붙였습니다. 처음 온 사람이 가장 궁금한 세 가지 숫자를 문단 속에 숨기지 않고 첫 화면에서 바로 읽히게 한 것입니다. 회전하는 'FREE 1ST CLASS' 도장은 첫 수업이 무료라는 사실을 가볍게 알려 줍니다.
헤더 오른쪽의 BPM 숫자는 스크롤 속도에 맞춰 72에서 170대까지 오르내립니다. 페이지를 내리는 행동 자체가 같이 움직이는 리듬이 되도록 만든 장치입니다. 바로 아래에는 경기장 전광판 같은 스코어보드를 두어 12 : 02라는 숫자를 한 번 더 각인시키고, 세 가지 원칙(이름부터 부릅니다, 같은 동작 세 가지 난이도, 잘하게보다 계속하게)을 옆에 나란히 붙였습니다.
디자인 언어: 낮빛 스포츠 캠페인의 팀 컬러
PT 스튜디오가 어둡고 조용한 집중을 판다면, 그룹 트레이닝은 밝고 시끌벅적한 에너지를 팝니다. 그래서 밝은 낮빛 스포츠 브랜드 캠페인처럼 오프화이트(#F7F7F5) 바탕에 코발트(#1F3DFF)와 시그널 레드(#FF3B2F)만 썼습니다. 사진 속 코발트 리그와 빨간 박스까지 같은 색으로 맞춰, 화면 전체가 하나의 팀 유니폼처럼 묶이게 했습니다. 형광 그린처럼 헬스장에서 흔한 강한 색은 "운동 잘하는 사람들의 공간"처럼 보이기 쉬워 고르지 않았습니다.
글꼴은 영문 대형 타이포와 스코어보드 숫자에 Archivo 이탤릭 900을, 라벨에 Archivo Expanded 700을 썼습니다. 한글 제목도 Pretendard 800을 기울여 써서 앞으로 달려 나가는 속도감을 맞췄습니다. 반듯한 그리드 위에 둥근 알약 태그와 회전 스탬프를 얹어 경기장처럼 경쾌하게 만들고, 사진은 알약과 스타디움 모양으로 잘라 무겁지 않은 운동으로 보이게 했습니다.
| 요소 | 고른 것 | 이유 |
|---|---|---|
| 바탕색 | 오프화이트 | 밝고 열린 낮 시간의 클럽 분위기 |
| 포인트 색 | 코발트와 시그널 레드 두 가지 | 사진 속 기구와 화면을 한 팀 컬러로 묶기 |
| 영문과 숫자 | Archivo 이탤릭 900 | 앞으로 달려 나가는 속도감, 전광판 숫자 |
| 장식 | 알약 태그, 회전 스탬프, 스티커 | 엄숙한 헬스장이 아니라 즐거운 경기장 |
| 사진 | 알약·스타디움 모양 자르기 | 여럿이 웃으며 움직이는 장면을 가볍게 |
섹션 구성: "나도 할 수 있겠다"까지의 순서
그룹 트레이닝 홈페이지에서 가장 중요한 질문은 "언제 가면 되지?"와 "내가 따라갈 수 있을까?" 두 가지입니다. 그래서 다섯 가지 수업 소개 바로 뒤에 시간표를, 그 뒤에 난이도 체험을 붙였습니다.
| 섹션 | 담은 것 | 풀어 주는 망설임 |
|---|---|---|
| 스코어보드와 원칙 | 12 : 02, 세 가지 원칙 | 뒤에서 방치되지 않을까 |
| 다섯 가지 수업 | 컨디셔닝, 스트렝스, 로잉·엔진, 모빌리티, 입문 | 어떤 수업이 나한테 맞을까 |
| 주간 시간표 | 요일별 수업, 강도, 담당 코치 | 내 퇴근 시간에 수업이 있을까 |
| 난이도 3단계 | 스쿼트·푸시업·런지 쉬움·보통·어려움 | 오래 쉬었는데 따라갈 수 있을까 |
| 대표 코치와 코치 팀 | 한마디, 경력, 코치 네 명 | 누가 내 이름을 기억해 줄까 |
| 처음 2주 | 무료 수업 예약, 입문 클래스 6회, 정규 합류 | 처음 가면 무엇부터 할까 |
주간 시간표는 컨디셔닝, 스트렝스, 로잉·엔진, 모빌리티, 입문 필터를 누르면 해당 수업 칸만 튀어 오르고 나머지는 흐려집니다. 칸에 마우스를 올리면 강도와 정원, 담당 코치 두 명이 툴팁으로 보입니다. 시간표 이미지를 한 장 걸어 두는 대신, 방문자가 자기 퇴근 시간에 맞는 수업을 직접 찾아보게 했습니다.
이 사이트의 핵심은 난이도 3단계 토글입니다. 스쿼트, 푸시업, 런지를 고른 뒤 쉬움, 보통, 어려움을 누르면 그림 속 인물이 튕기듯 자세를 바꾸고 박스 같은 소품이 나타나며 반복 동작을 보여 줍니다. 설명과 코치 큐, 강도 막대도 함께 바뀝니다. "LV1이라서 덜 하는 게 아닙니다"라는 문장과 함께, 방문자가 직접 눌러 보며 "나도 LV1부터 하면 되겠다"고 느끼게 만드는 장치입니다.
대표 코치 섹션의 제목은 "운동을 '잘하게'보다 '계속하게' 만드는 코치."입니다. 한마디도 "저희가 매 수업 가장 먼저 챙기는 숫자는 무게가 아니라 출석입니다"로 정했습니다. 사진은 회원과 하이파이브하는 장면을 골라 '오늘도 왔네요, 지은님!' 말풍선을 붙였고, 아래에는 코치 네 명을 알약 카드로 나란히 세워 한 사람이 아니라 팀이 맞이한다는 인상을 주었습니다.
휴대폰 화면: 요일 탭과 하단 고정 예약 바
그룹 수업은 "오늘 저녁 수업 있나?" 하고 휴대폰으로 확인하는 경우가 많습니다. 그래서 모바일에서는 일곱 칸짜리 시간표를 요일 탭으로 바꿔, 요일을 누르면 그날 수업이 시간순 카드로 크게 보이게 했습니다. 마우스가 없으니 툴팁은 칸을 탭하면 열리도록 바꿨습니다.
난이도 토글도 그림과 버튼이 한 화면에 들어오도록 세로로 쌓았고, 엄지로 누르기 쉽게 버튼을 넉넉하게 키웠습니다. 화면 아래에는 '전화'와 '첫 수업 무료 예약' 버튼을 고정해, 시간표를 보다가 마음에 드는 수업이 생기면 바로 예약으로 넘어가게 했습니다.
검색 세팅, 그리고 우리 헬스장에 적용한다면
피트니스 센터 홈페이지는 "마포 헬스장", "역 이름 + 그룹 PT"처럼 지역과 운동 방식을 함께 검색하는 분들이 찾아옵니다. 그래서 페이지 제목은 "모션 클럽 MOTION CLUB — 혼자서는 안 하던 운동, 같이 하면 합니다"로, 설명 문구에는 "서울 마포", "정원 12명에 코치 2명", "그룹 트레이닝 클럽", "첫 수업 무료"를 담았습니다. 실제 제작에서는 수업 이름마다 페이지를 나눠 "마포 컨디셔닝 수업" 같은 검색어도 받을 수 있게 합니다.
첫 화면 사진을 뺀 이미지는 지연 로딩으로 불러오고, 효과는 가벼운 움직임 위주로 만들어 휴대폰에서도 부드럽게 열리게 했습니다. 포트폴리오 자체는 가상 업체라 noindex로 검색에서 빼 두었습니다. 실제 의뢰라면 업체 정보와 영업시간을 담은 구조화 데이터를 넣고 네이버와 구글에 등록한 뒤 검색 노출용 칼럼을 함께 발행합니다. 강점 하나에서 디자인을 시작하는 이유는 「병원 브랜딩, 원장님에서 시작해야 하는 이유」에 병원 사례로 정리해 두었는데, 헬스장도 같은 원리입니다.
제작은 대표님 인터뷰에서 시작합니다. 회원이 왜 우리 클럽을 계속 다니는지 듣고 강점을 한 문장으로 정한 뒤, 수업 소개와 시간표, 코치 페이지 구조를 짭니다. 이어서 실제 수업을 직접 촬영하고, 디자인과 효과, 검색 세팅을 거쳐 오픈한 뒤 첫 수업 예약 클릭 같은 숫자를 함께 확인합니다.
비용은 330만 원(부가세 포함)으로 직접 촬영이 포함되고 페이지 수와 수정 횟수에 제한이 없습니다. 검색 노출용 칼럼 6편과 오픈 후 3개월 유지보수도 무료이며, 이후 유지보수 정기권은 월 110만 원(월 마케팅이나 개원 마케팅 이용 시 무료)입니다. 다른 업종 사례는 홈페이지 포트폴리오에서, 우리 헬스장 홈페이지에서 무엇부터 바꾸면 좋을지는 무료 사전 진단으로 먼저 확인해 보세요.
자주 묻는 질문
헬스장 홈페이지 제작 비용은 얼마인가요?
330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색 노출용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다.
수업 시간표가 자주 바뀌는데 계속 고쳐 주시나요?
오픈 후 3개월은 무료로 수정해 드리고, 이후에는 유지보수 정기권으로 시간표와 코치, 이벤트 변경을 맡기실 수 있습니다.
효과가 많으면 휴대폰에서 느리지 않나요?
첫 화면 외 이미지는 지연 로딩하고 효과는 가벼운 움직임 위주로 만들어, 휴대폰에서 직접 검수한 뒤 오픈합니다.
그룹 수업이 아니라 일반 헬스장도 이렇게 만들 수 있나요?
네, 인터뷰에서 대표님 헬스장만의 강점을 찾아 그에 맞는 첫 화면과 장치를 새로 설계하며 같은 틀을 복사해 쓰지 않습니다.
회원 사진을 홈페이지에 써도 되나요?
촬영 전에 동의를 받은 회원만 찍고, 원하지 않는 분은 얼굴이 드러나지 않게 구도를 잡아 촬영합니다.