PT샵 홈페이지 제작기, 강남 PT 스튜디오 포지를 이렇게 만들었습니다

요약 PT샵 홈페이지 제작에서 저희가 가장 먼저 정한 것은 "이 스튜디오에서는 내 운동이 기록으로 남는다"는 한 문장이었습니다. 포지 퍼스널트레이닝은 실제 고객이 아니라, 블러썸팩토리가 서울 강남의 가상 PT 스튜디오를 정하고 실제 의뢰처럼 대표 코치의 강점부터 잡아 만든 포트폴리오 홈페이지입니다. 첫 화면의 대표 코치, 회원 앱 기록지, 12주 기록 스크롤을 왜 이렇게 설계했는지 디자이너가 직접 풀어 드립니다.

강남의 가상 PT 스튜디오, 이렇게 가정했습니다

퍼스널트레이닝 홈페이지를 기획할 때 저희는 회원이 문을 열기 전에 품고 있는 의심부터 적습니다. PT를 알아보는 분들은 대개 두 가지를 걱정합니다. "상담은 대표님이 해도 결국 아무 트레이너나 붙는 것 아닐까", 그리고 "적지 않은 돈을 내는데 제대로 늘고 있는지 내가 알 수 있을까"입니다. 강남처럼 PT샵이 많은 지역에서는 이 의심을 먼저 풀어 주는 곳이 선택받습니다.

그래서 가상의 스튜디오 '포지 퍼스널트레이닝'을 정하고, 강도윤 대표 코치라는 가상 인물에게 강점 하나를 주었습니다. "모든 회원의 첫 4주를 대표 코치가 직접 맡고, 매 수업 무게와 횟수와 자세를 기록해 회원 앱으로 보여 주는 기록하는 PT"입니다. 이 문장이 첫 화면부터 마지막 예약 버튼까지 모든 섹션의 기준이 되었습니다.

사진은 포트폴리오라서 연출 사진(AI 생성 이미지와 무료 사진)을 썼습니다. 실제 제작에서는 대표 코치님과 스튜디오, 수업 장면을 저희가 직접 촬영합니다. 1:1 PT일수록 대표 코치의 얼굴이 가장 강한 증거이기 때문입니다.

첫 화면: 대표 코치의 얼굴과 '첫 4주는 직접'

사이트를 열면 먼저 바벨 로딩 인트로가 나옵니다. 원판이 한 장씩 '쿵' 끼워질 때마다 화면이 살짝 흔들리고, 아래쪽 무게 숫자가 170KG까지 차오른 뒤 FORGE 대문자가 떨어져 자리를 잡습니다. 흔한 근육 사진 슬라이드 대신 무게가 실리는 감각으로 시작하고 싶었습니다. 움직임 줄이기 설정을 켠 기기에서는 효과를 최소로 줄입니다.

인트로가 끝나면 왼쪽에 "몸은 반복으로 단련됩니다." 한 줄과 "모든 회원의 첫 4주는 대표 코치가 직접"이라는 설명이, 오른쪽에 대표 코치의 사진이 섭니다. 역동적인 운동 사진을 거는 방법도 있지만, 1:1 PT에서 회원이 고르는 것은 결국 사람입니다. 그래서 첫 화면의 주인공은 대표 코치로 정했고, 버튼은 '1회 체험 예약'과 '기록하는 PT란' 두 개로 줄였습니다.

바로 아래 섹션에서는 "기억이 아니라 기록으로 가르칩니다."라는 제목과 함께 회원 앱 기록지 화면을 사진 위에 겹쳐 띄웠습니다. 세션 번호, 날짜, 담당 코치, 백 스쿼트 42.5kg 8×4 같은 숫자와 코치 메모가 적힌 카드입니다. '기록하는 PT'를 말로 설명하는 것보다 기록지 모양을 먼저 보여 주는 편이 훨씬 빨리 믿음을 줍니다. 카드 아래에는 '가상 예시 화면'이라고 적었습니다.

디자인 언어: 매트 블랙 위에 '기록'만 라임으로

색은 매트 블랙(#0B0B0B)과 차콜(#131313), 스틸 그레이(#1B1B1B)를 바탕으로 깔고, 글자는 순백 대신 살짝 따뜻한 본 화이트(#ECECE6)를 썼습니다. 포인트인 애시드 라임(#C6FF3D)은 진행 바, 기록 그래프 선, 선택 표시처럼 '기록'을 가리키는 곳에만 아껴 썼습니다. 라임을 여기저기 뿌리면 흔한 헬스장 전단처럼 보이지만, 한 가지 의미에만 쓰면 강렬하면서도 고급스러운 인상이 남습니다.

글꼴은 세 가지 역할로 나눴습니다. 영문 대형 타이포와 큰 숫자는 Anton의 좁고 무거운 대문자로 무게감을 주었고, 한글 제목과 본문은 Pretendard 800으로 단단하게 맞췄습니다. 라벨과 기록 숫자에는 JetBrains Mono를 써서 훈련 일지 같은 질서를 만들었습니다. 사진은 어둡게 눌러 두고 라임빛 스포트라이트가 커서를 따라가게 했습니다.

섹션 구성: 회원의 망설임을 순서대로 풀기

스크롤 흐름은 회원이 품는 질문 순서를 그대로 따랐습니다. "누가 가르치나"에는 대표 코치 섹션이, "내 목표에도 맞나"에는 프로그램 선택기가, "정말 늘고 있는지 알 수 있나"에는 12주 기록지가 답합니다.

대표 코치 섹션은 이름을 Anton 대문자로 크게 걸고 "처음 4주 동안 잡은 자세가, 그 뒤 몇 년의 운동을 정합니다."라는 한마디를 붙였습니다. 사진도 혼자 포즈를 잡은 컷이 아니라 회원의 스쿼트 자세를 옆에서 잡아 주는 장면을 골라, '직접 본다'는 말이 화면에서 바로 보이게 했습니다.

프로그램 섹션은 목록 대신 선택기로 만들었습니다. 왼쪽에서 FAT LOSS, STRENGTH, POSTURE, REHAB, BODY PROFILE 중 하나를 누르면 주당 수업 횟수와 12주 동안의 주차별 구성 막대그래프(근력, 컨디셔닝, 가동성과 회복), 기록 항목이 애니메이션으로 바뀝니다. 방문자가 "내 경우"를 직접 찾게 하는 장치입니다.

이 사이트에서 가장 공들인 곳은 12주 기록지입니다. 화면이 고정된 채 스크롤을 내리면 1주차부터 12주차까지 한 장씩 넘어가며 백 스쿼트, 데드리프트, 벤치프레스 무게가 올라가고 라인 차트가 그려집니다. 코치 메모와 '대표 코치 리뷰' 도장도 함께 바뀝니다. 실제 회원 기록으로 오해하지 않도록 "이해를 돕기 위한 가상 예시 기록"이라는 문구를 바로 아래에 붙였습니다.

마지막은 첫 4주 과정과 자주 묻는 질문, 이용 시간과 오시는 길, 그리고 1회 체험 0원 예약입니다. PT는 결제 금액이 커서 바로 등록을 권하면 망설이게 됩니다. 그래서 가격표 대신 "대표 코치와 50분 수업을 직접 해 보고, 계속할지는 그다음에 정하세요"로 첫걸음을 가볍게 만들었습니다.

휴대폰 화면: 엄지 하나로 체험 예약까지

PT샵을 찾는 분들은 대부분 퇴근길 휴대폰으로 검색합니다. 그래서 모바일에서는 대표 코치 사진을 맨 위에 크게 세웠습니다. 화면 아래에는 '전화'와 '1회 체험 0원 예약' 두 버튼을 고정해, 어느 섹션을 보다가도 엄지 한 번이면 예약으로 넘어가게 했습니다.

터치 화면에서는 스포트라이트가 사진 위를 스스로 움직이게 바꿨습니다. 회원 앱 기록지 카드와 12주 기록지는 휴대폰 폭에 맞게 한 열로 다시 짰고, 무게 숫자 크기는 줄이지 않았습니다. 기록지는 숫자가 주인공이기 때문입니다.

검색 세팅, 그리고 우리 PT샵에 적용한다면

멋진 PT 스튜디오 홈페이지 디자인도 검색에 나오지 않으면 소용없습니다. 페이지 제목은 "포지 퍼스널트레이닝 FORGE — 몸은 반복으로 단련됩니다"로, 설명 문구에는 "서울 강남", "첫 4주를 대표 코치가 직접", "기록하는 PT"를 담았습니다. 실제 제작에서는 "강남 PT", "역 이름 + 퍼스널트레이닝"처럼 회원이 실제로 치는 검색어를 제목과 소제목에 넣습니다.

속도도 신경 썼습니다. 첫 화면 사진을 뺀 이미지는 모두 지연 로딩으로 불러오고, 효과는 가벼운 움직임 위주로 만들어 휴대폰에서도 버벅이지 않게 했습니다. 포트폴리오 자체는 가상 업체라 검색에 잡히지 않도록 noindex로 막아 두었습니다. 실제 의뢰라면 업체 정보를 담은 구조화 데이터를 넣고 네이버 서치어드바이저와 구글 서치 콘솔에 등록한 뒤, 검색 노출용 칼럼을 함께 발행합니다. 첫 화면을 왜 이렇게 짜는지는 「병원 홈페이지 제작, 첫 화면에 원장님이 보여야 하는 이유」에서 병원 사례로 더 자세히 다뤘는데, PT샵에도 같은 원리가 적용됩니다.

제작은 대표님 인터뷰에서 시작합니다. 회원이 왜 우리 스튜디오에 남는지 들어 보고 강점을 한 문장으로 정한 뒤, 그 문장에 맞춰 섹션과 프로그램 페이지 구조를 짭니다. 이어서 직접 촬영, 디자인과 효과, 검색 세팅을 거쳐 오픈하고, 오픈 후에는 체험 예약 클릭 같은 숫자를 함께 확인합니다.

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

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

자주 묻는 질문

PT샵 홈페이지 제작 비용은 얼마인가요?

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

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

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

회원 앱이 없어도 이런 홈페이지를 만들 수 있나요?

네, 기록지는 강점을 보여 주는 한 가지 방법일 뿐이며 인터뷰에서 대표님 스튜디오만의 강점을 찾아 그에 맞는 장치를 설계합니다.

트레이너나 프로그램이 바뀌면 수정해 주시나요?

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

사진은 꼭 새로 찍어야 하나요?

포트폴리오에는 연출 사진을 썼지만 실제 제작에서는 대표 코치님과 스튜디오를 직접 촬영하며, 촬영은 제작비에 포함되어 있습니다.