필라테스 홈페이지 제작, 성수 숨 필라테스 제작기
요약 필라테스 홈페이지 제작에서 가장 먼저 정할 것은 디자인이 아니라 대표님의 강점 한 문장이며, 그 문장이 첫 화면부터 예약 버튼까지 이어져야 회원이 망설임 없이 첫 수업을 신청합니다. 이 글은 블러썸팩토리가 가상의 성수 필라테스 센터 '숨 필라테스'를 정하고, 실제 의뢰처럼 강점부터 잡아 만든 포트폴리오 홈페이지의 제작기입니다. 구조를 어떻게 짰는지, 장면마다 어떤 망설임을 풀려고 했는지 디자이너가 직접 설명합니다.
이런 필라테스 센터라고 가정했습니다
숨 필라테스는 실제 고객이 아니라, 저희가 포트폴리오용으로 만든 가상의 성수 필라테스 센터입니다. 그래도 만드는 순서는 실제 의뢰와 똑같이 했습니다. 먼저 대표님이 어떤 분인지 정하고, 그분이 다른 스튜디오와 무엇이 다른지를 한 문장으로 줄이는 데서 시작했습니다.
가정한 대표 강사는 대학병원 재활치료실에서 10년을 일한 물리치료사 출신입니다. 성수에는 새로 문을 연 필라테스 센터가 많고, 처음 알아보는 분은 대개 두 가지를 궁금해합니다. "한 수업에 몇 명이 들어가나", 그리고 "누가 내 몸을 제대로 봐 주나"입니다. 그래서 강점 한 문장을 이렇게 정했습니다. 물리치료사 출신 대표님이 첫 수업 전 60분 동안 체형과 호흡을 직접 평가하고, 한 수업에 최대 3명만 지도합니다.
이 문장이 정해지면 홈페이지에서 할 일은 단순해집니다. 모든 섹션이 이 약속을 하나씩 증명하면 됩니다. 반대로 문장이 없으면 "쾌적한 시설, 친절한 강사진" 같은 말이 첫 화면을 채우고, 옆 스튜디오와 구별되지 않습니다.
첫 화면: 숫자로 약속하고, 숨으로 속도를 늦춥니다
첫 화면 제목은 "숨이 바뀌면, 자세가 바뀝니다."입니다. 그 아래에 강점 문장을 그대로 두고, 바로 밑에 3명(한 수업 최대 정원), 60분(첫 수업 전 체형·호흡 평가), 1:1(평가와 수업 설계는 대표님이 직접) 세 숫자를 나란히 놓았습니다. 필라테스 센터 홈페이지를 둘러보는 분은 글을 오래 읽지 않기 때문에, 핵심 약속은 문장보다 숫자로 먼저 닿게 하는 편이 빠릅니다.
들어오자마자 보이는 인트로는 화면 가운데 테라코타 원이 4초 리듬으로 부풀었다 줄어드는 장면입니다. 들숨에 '숨' 한 글자가 떠오르고, 원 안에 사진이 차오른 뒤 그대로 아치 창 모양으로 열리며 첫 화면 사진이 됩니다. 화려하게 놀라게 하기보다 방문자의 호흡부터 늦추고 싶었습니다. 이 스튜디오가 파는 것이 결국 그 느린 호흡이기 때문입니다.
첫 화면에 버튼은 두 개만 두었습니다. "첫 평가 예약하기"와 "평가는 이렇게 합니다"입니다. 아직 마음을 정하지 못한 분에게는 예약 대신 평가 장면으로 내려가는 길을 열어 두는 것이, 결과적으로 예약까지 가는 분을 늘린다고 봤습니다.
섹션 구성: 회원의 망설임 순서대로 쌓았습니다
필라테스 홈페이지 제작에서 섹션 순서는 스튜디오가 하고 싶은 말이 아니라, 처음 오는 분이 품는 질문 순서를 따라야 합니다. 숨 필라테스는 아래 순서로 짰습니다.
| 섹션 | 담은 것 | 풀어 주는 망설임 |
|---|---|---|
| 숨의 방식 | 3명, 60분 평가, 재활 현장 10년이라는 세 가지 약속 | 여기도 다른 곳이랑 비슷하지 않을까 |
| 대표 강사 소개 | 물리치료사 면허, 재활치료실 경력, 수업 철학 | 누가 내 몸을 보는가 |
| 체형 평가 | 척추 라인이 곧게 펴지는 장면과 평가 항목 6가지 | 첫날 무엇을 하는지 모르겠다 |
| 수업 | 1:1, 2:1, 3인, 체형 교정, 산전·산후 수업 | 나에게 맞는 수업이 있을까 |
| 공간 | 리포머 룸, 캐딜락, 라운지 사진 | 붐비거나 낯설지 않을까 |
| 첫 방문 과정과 질문 | 예약, 평가, 수업 설계 상담, 첫 수업 4단계와 FAQ | 운동을 안 해 봤는데 괜찮을까 |
대표 강사 소개는 강점 바로 다음에 두었습니다. "물리치료사 출신"이라는 말을 들은 직후에 그 사람의 얼굴과 경력을 보여 줘야 믿음이 이어지기 때문입니다. 경력은 긴 문단 대신 면허, 경력, 지도자 과정, 산전·산후 과정 네 줄로 정리했습니다.
포트폴리오에서는 AI로 만든 연출 사진을 썼지만, 실제 제작에서는 대표님과 스튜디오를 저희가 직접 촬영합니다. 수업 중인 손, 회원을 바라보는 눈빛처럼 연출로 대신할 수 없는 장면이 이 섹션의 설득력을 만듭니다.
핵심 장면: 첫 수업 전 평가를 그림으로 보여 주기
이 홈페이지에서 가장 공들인 곳은 체형 평가 섹션입니다. "60분 동안 체형과 호흡을 평가합니다"라고 글로 쓰면 읽는 분은 무엇을 보는지 상상하기 어렵습니다. 그래서 화면을 잠시 고정해 두고, 스크롤할수록 마디 점이 있는 굽은 척추 선과 기울어진 어깨·골반 선이 기준선 위로 곧게 정렬되게 했습니다. 동시에 오른쪽의 호흡 패턴, 척추 정렬, 어깨 높이, 골반 기울기, 발 아치, 생활 습관 6개 항목이 하나씩 체크됩니다.
섹션 맨 아래에는 "통증이 심하거나 진단이 필요한 경우에는 의료기관 진료를 먼저 안내해 드립니다"라는 문장을 작게 두었습니다. 재활 현장을 아는 대표님이라면 할 법한 말이고, 이런 한 줄이 오히려 전문성을 보여 준다고 판단했습니다.
수업 섹션은 리포머를 단순하게 그린 일러스트로 만들었습니다. 캐리지를 스크롤이나 드래그로 밀면 스프링이 늘어나고, 멈추는 자리마다 1:1 개인, 2:1 듀엣, 3인 소그룹, 체형 교정, 산전·산후 수업 설명과 사진이 바뀝니다. 기구를 처음 보는 분도 한 번 밀어 보면 낯섦이 조금 줄어듭니다. 수강료는 평가 후 상담에서 안내한다고 적어, 가격 비교보다 첫 평가 예약으로 이어지게 했습니다.
색과 글꼴: 오전 햇살이 드는 아치 창 스튜디오
바탕은 크림(#FAF6F0)과 웜 샌드(#EDE3D6), 포인트는 테라코타(#C9714F)와 올리브(#7D8456)로 잡았습니다. 성수의 오래된 벽돌과 햇살이 드는 스튜디오의 온도를 옮기고 싶었습니다. 한글 제목은 붓끝 느낌이 있는 고운바탕, 영문은 Fraunces 이탤릭, 본문은 Pretendard로 나눠, 제목은 숨결처럼 부드럽고 본문은 휴대폰에서도 또렷하게 읽히게 했습니다.
사진, 지도, 예약 영역까지 모두 아치 창 모양으로 통일했고, 화면 위에는 반투명한 잎 그림자가 천천히 흔들립니다. 스크롤할수록 빛이 아침의 연노랑에서 오후의 호박색으로 바뀌고, 오른쪽 아래 작은 해시계가 지금 '몇 시의 빛'인지 알려 줍니다. 페이지를 끝까지 읽는 일이 스튜디오에서 하루를 보내는 느낌이 되도록 한 장치입니다.
휴대폰 화면과 검색 세팅
필라테스 센터를 찾는 분은 대부분 휴대폰으로 봅니다. 그래서 휴대폰 화면 아래에 "전화"와 "첫 평가 예약" 버튼을 항상 고정해, 어느 섹션을 읽다가도 바로 연락할 수 있게 했습니다. 체형 평가 장면은 좁은 화면에서도 척추 그림과 체크 항목이 한 화면에 함께 보이도록 배치를 다시 짰고, 리포머 캐리지는 손가락으로 끌어서 움직입니다.
검색 세팅도 처음부터 함께 설계합니다. 페이지 제목에는 스튜디오 이름과 강점 문장을, 설명에는 '성수'와 '물리치료사 출신 원장', '최대 3명'을 넣었습니다. 사진은 첫 화면을 빼고 모두 지연 로딩으로 불러와 효과가 많아도 처음 뜨는 속도가 느려지지 않게 했습니다. 이 포트폴리오는 가상 업체라 검색에 잡히지 않도록 noindex로 막아 두었지만, 실제 성수 필라테스 홈페이지라면 '성수 필라테스', '성수 체형 교정 필라테스' 같은 검색어에 맞춰 페이지를 나누고 구조화 데이터를 넣고 네이버 서치어드바이저와 구글 서치 콘솔에 등록합니다. 첫 화면 설계 원칙은 「병원 홈페이지 제작, 첫 화면에 원장님이 보여야 하는 이유」에 더 자세히 정리해 두었습니다.
우리 필라테스 센터에 적용한다면
스튜디오마다 강점은 다릅니다. 소수 정원일 수도, 재활 경력일 수도, 산전·산후 전문일 수도 있습니다. 저희는 대표님 인터뷰로 그 강점을 한 문장으로 정하고, 섹션과 수업 페이지 구조를 짠 뒤, 스튜디오에 직접 가서 촬영하고, 디자인과 효과, 검색 세팅까지 한 사람이 끝까지 맡습니다. 요가 필라테스 홈페이지처럼 수업 종류가 많은 곳은 수업마다 페이지를 따로 두어 검색에 잡히게 합니다.
제작 비용은 330만 원(부가세 포함)이며 직접 촬영, 페이지 수와 수정 횟수 제한 없음, 검색 노출용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다. 지금 홈페이지가 낡아 필라테스 홈페이지 리뉴얼을 고민 중이시라면 「병원 홈페이지 리뉴얼, 지금 해야 한다는 신호 7가지」로 먼저 점검해 보셔도 좋습니다. 다른 업종 작업은 홈페이지 포트폴리오에서 보실 수 있고, 우리 스튜디오에 맞는 방향이 궁금하시면 무료 사전 진단을 신청해 주세요.
자주 묻는 질문
필라테스 홈페이지 제작 비용은 얼마인가요?
블러썸팩토리는 330만 원(부가세 포함)이며, 직접 촬영과 페이지 수·수정 횟수 제한 없음, 검색 노출용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다.
이런 효과가 많으면 홈페이지가 느려지지 않나요?
첫 화면을 뺀 사진은 지연 로딩으로 불러오고 움직임은 가벼운 방식으로 만들어 처음 뜨는 속도를 지킵니다. 움직임을 줄이도록 설정한 기기에서는 효과도 줄어듭니다.
수업 시간표나 가격은 직접 수정할 수 있나요?
자주 바뀌는 내용은 대표님이 직접 고칠 수 있는 구조로 만들고, 오픈 후 3개월 동안은 수정 요청을 무료로 반영해 드립니다.
스튜디오 사진이 없어도 제작할 수 있나요?
네. 실제 제작에서는 저희가 스튜디오에 방문해 대표님과 수업 장면, 공간을 직접 촬영합니다.
네이버와 구글 검색에도 나오게 해 주나요?
페이지 제목과 설명, 구조화 데이터를 세팅하고 네이버 서치어드바이저와 구글 서치 콘솔에 등록하며, 지역과 수업 이름으로 검색되는 칼럼 6편을 함께 씁니다.