크로스핏 홈페이지 제작기, 성수 아이언하우스 크로스핏 디자인 이야기
요약 크로스핏 홈페이지 제작에서 저희가 붙잡은 질문은 "다들 무거운 걸 드는데 나만 못 따라가면 어쩌지"였습니다. 아이언하우스 크로스핏은 실제 고객이 아니라, 블러썸팩토리가 서울 성수의 옛 공장 1층에 있는 가상 크로스핏 박스를 정하고 실제 의뢰처럼 헤드코치의 강점부터 잡아 만든 포트폴리오 홈페이지입니다. 모든 동작을 입문·스케일·RX 세 단계로 바꿔 처음 온 사람도 같은 WOD를 끝까지 한다는 약속을, 분필 칠판과 WOD 타이머로 어떻게 보여 줬는지 디자이너가 직접 들려 드립니다.
성수의 가상 크로스핏 박스, 이렇게 가정했습니다
크로스핏을 알아보는 분들은 운동 효과보다 두려움을 먼저 안고 들어옵니다. "다들 무거운 걸 드는데 나만 못 따라가면 어쩌지", "크로스핏은 다치기 쉽다던데" 같은 걱정입니다. 영상 속 크로스핏은 늘 근육질 선수들이 바벨을 던지는 장면이라, 처음인 사람에게는 문턱이 높아 보입니다.
그래서 가상의 박스 '아이언하우스'를 정하고, 강태오 헤드코치라는 가상 인물에게 강점 하나를 주었습니다. "모든 동작을 입문·스케일·RX로 바꿔 처음 온 사람도 같은 WOD를 끝까지 하게 만들고, 매 수업 한 사람씩 동작을 직접 봐 주는 국제 자격 코치"입니다. 헤드라인은 "처음 온 날에도, 같은 WOD를 끝까지."로, 영문 슬로건은 SCALE IT. FINISH IT.으로 정했습니다. 센 사람들의 박스가 아니라, 누구나 끝까지 가는 박스라는 이야기입니다.
사진은 포트폴리오라서 연출 사진(AI 생성 이미지와 무료 사진)을 썼습니다. 실제 제작에서는 대표 코치님과 코치 팀, 수업과 박스 공간을 저희가 직접 촬영합니다.
첫 화면: 분필이 터지고, 셔터가 올라갑니다
사이트를 열면 손바닥의 초크가 '팡' 터지듯 흰 가루 입자가 화면에 퍼집니다. 일부는 바닥으로 가라앉고, 나머지가 모여 IRONHAUS 스텐실 글자로 남은 뒤 철제 셔터처럼 말려 올라가며 첫 화면이 열립니다. 바벨을 잡기 전 초크를 바르는 그 순간, 박스 안의 공기를 첫 3초에 옮기고 싶었습니다.
히어로에는 SCALE IT. FINISH IT.을 굵은 대문자로 크게 세우고, 바로 아래 "처음 온 날에도, 같은 WOD를 끝까지."를 한글로 붙였습니다. 오른쪽에는 두 사람이 나란히 스러스터를 하는 사진을 두고 'WOD 10.08 THRUSTER · 3 SCALES' 라벨을 달았습니다. 버튼은 '첫 수업 무료 예약'과 '오늘의 WOD 보기' 두 개입니다. 처음 온 사람이 할 일과 이 박스가 매일 하는 일이 바로 보이게 했습니다.
히어로 아래에는 '03 단계 스케일링', '04 회 온램프', '1:1 코치의 시선' 세 숫자를 띠로 깔고, 오렌지와 검정 사선의 하자드 띠를 한 번 가로질렀습니다. 띠는 스크롤 방향으로 흐르고 빨리 내릴수록 빨라집니다. 그 바로 아래 'ONE WOD. THREE SCALES.' 섹션에서 같은 스러스터가 입문은 PVC 봉 10회, 스케일은 20/15kg 10회, RX는 43/29kg 10회로 어떻게 달라지는지 바벨 그림과 함께 보여 줍니다. "나만 못 따라가면 어쩌지"라는 걱정에 첫 스크롤에서 바로 답하는 장치입니다.
디자인 언어: 옛 공장의 콘크리트와 하자드 오렌지
크로스핏 박스는 창고나 공장을 고쳐 쓰는 곳이 많고, 그 날것의 분위기를 좋아해 찾아오는 분도 많습니다. 그래서 옛 공장 건물의 노출 콘크리트를 화면의 바탕으로 삼았습니다. 거푸집 이음선과 폼타이 구멍까지 그려 넣은 회색 위에, 철판과 리벳, 롤업 셔터를 재료처럼 얹었습니다.
색은 하자드 오렌지 하나만 강하게 썼습니다. 다만 경고 줄무늬, 버튼, 타이머 숫자처럼 '움직여야 할 곳'에만 쓰고 나머지는 콘크리트 그레이와 잉크 블랙, 분필 화이트로 눌렀습니다. 글꼴은 산업 표지판 같은 Big Shoulders Display와 스텐실 숫자의 Saira Stencil One을 쓰고, 칠판에서만 분필 손글씨 글꼴로 코치의 손맛을 살렸습니다. 날것이지만 정렬과 여백은 엄격하게 지켜, '거칠지만 체계적인 박스'로 보이게 했습니다.
| 요소 | 고른 것 | 이유 |
|---|---|---|
| 바탕 | 노출 콘크리트 그레이 | 옛 공장을 고친 박스의 날것 같은 공기 |
| 포인트 색 | 하자드 오렌지 한 가지 | 버튼·타이머처럼 움직일 곳만 눈에 띄게 |
| 영문과 숫자 | Big Shoulders Display, Saira Stencil One | 산업 표지판 같은 굵은 위계 |
| 칠판 글씨 | 분필 손글씨 글꼴 | 매일 아침 코치가 직접 쓰는 WOD |
| 사진 등장 | 롤업 셔터가 말려 올라가는 효과 | 박스 문을 여는 듯한 경험 |
섹션 구성: "나도 끝까지 할 수 있겠다"까지의 순서
크로스핏 홈페이지에서 풀어야 할 질문은 "따라갈 수 있을까", "다치지 않을까", "처음엔 뭘 하지" 세 가지입니다. 그래서 스케일링 설명 바로 뒤에 오늘의 WOD 칠판을 두어 직접 확인하게 하고, 마지막에는 온램프 4회로 첫 걸음을 구체적으로 보여 줬습니다.
| 섹션 | 담은 것 | 풀어 주는 망설임 |
|---|---|---|
| 같은 WOD 세 가지 스케일 | 스러스터 입문·스케일·RX | 나만 못 따라가면 어쩌지 |
| 오늘의 WOD 칠판 | 레벨별로 다시 써지는 무게와 횟수 | 그날 운동이 내 수준에 맞을까 |
| WOD 타이머 | AMRAP·EMOM·FOR TIME 설명 | 크로스핏 용어가 낯설다 |
| 네 가지 프로그램 | WOD 클래스, 온램프, 올림픽 리프팅, 체조 스킬 | 나는 어디로 들어가야 할까 |
| 헤드코치와 코치 팀 | 국제 자격, 한마디, 코치 세 명 | 누가 내 자세를 봐 줄까 |
| 온램프 4회와 FAQ | DAY 01~04 과정, 부상 걱정 답변 | 처음 가면 무엇부터 할까 |
이 사이트의 핵심은 오늘의 WOD 칠판입니다. 실제 칠판 질감 위에 'TODAY'S WOD'와 AMRAP 14:00이 분필 손글씨로 한 줄씩 써지고, 쓸 때마다 분필 가루가 떨어집니다. 입문, 스케일, RX를 누르면 칠판지우개가 지나가며 무게와 횟수가 지워졌다 다시 써지고, 지운 자국은 희미하게 남습니다. 입문을 고르면 'PVC 봉 × 10', '누워서 로프 당기기 × 5'처럼 내 무게로 바뀌는 것을 직접 보며 "같은 칠판에 내 자리가 있다"고 느끼게 했습니다.
칠판 다음은 박스 벽에 걸린 시계입니다. AMRAP, EMOM, FOR TIME 탭을 고르고 START, RESET, +ROUND를 누르면 실제로 움직이는 세븐세그먼트 타이머입니다. 아래에는 세 가지 형식을 한 줄씩 풀어 "입문자도 같은 14분을 씁니다"라고 적었습니다. 낯선 용어를 글로만 설명하지 않고, 수업의 리듬을 손으로 눌러 보게 한 것입니다.
헤드코치 섹션에서는 화이트보드 앞에서 웃으며 설명하는 강태오 헤드코치 사진 옆에 CrossFit Level 3 Trainer, 역도 지도자 국제 자격, 체조 스킬 지도 9년을 나란히 적었습니다. 한마디는 칠판 손글씨로 "오늘 처음 왔다면, 오늘 무게는 제가 정합니다. 끝까지 가는 건 같이 합니다."로 정했습니다. 아래에는 올림픽 리프팅, 체조 스킬, 온램프를 맡은 코치 세 명을 카드로 붙여, 부상 걱정을 자격과 사람으로 함께 풀었습니다.
마지막 'Four Bolts In' 섹션은 온램프 4회를 볼트 모양 번호로 잇고, 넷째 날 10분짜리 미니 WOD를 끝까지 하는 장면으로 마무리해 처음 가는 날이 머릿속에 그려지게 했습니다.
휴대폰 화면: 칠판과 타이머를 엄지 크기로
크로스핏 회원은 "오늘 WOD 뭐지?" 하고 휴대폰으로 박스 소식을 확인하는 경우가 많습니다. 그래서 모바일에서도 칠판과 타이머를 빼지 않고 세로로 다시 짰습니다. 칠판은 레벨 버튼을 제목 바로 아래에 두어 엄지로 바로 바꿀 수 있게 하고, 타이머는 숫자를 화면 폭에 맞춰 키운 뒤 START 버튼을 오렌지 막대로 크게 만들었습니다.
온램프 4회는 세로 타임라인으로 바꿨고, 화면 아래에는 '전화'와 '첫 수업 무료 예약' 버튼을 늘 고정해, 칠판을 보다가 마음이 생기면 바로 예약으로 넘어가게 했습니다.
검색 세팅, 그리고 우리 박스에 적용한다면
크로스핏 홈페이지는 "성수 크로스핏", "역 이름 + 크로스핏 박스"처럼 지역과 운동 이름을 함께 검색하는 분들이 찾아옵니다. 그래서 페이지 제목은 "아이언하우스 크로스핏 IRONHAUS CrossFit | 서울 성수"로, 설명 문구에는 "서울 성수", "옛 공장 1층의 크로스핏 박스", "입문·스케일·RX 세 단계", "첫 수업 무료"를 담았습니다. 실제 제작에서는 온램프, 올림픽 리프팅, 체조 스킬처럼 프로그램마다 페이지를 나눠 "크로스핏 입문", "역도 클래스" 같은 검색어도 받을 수 있게 합니다.
첫 화면 사진을 뺀 이미지는 지연 로딩으로 불러오고, 분필 입자 효과는 휴대폰에서도 부드럽게 돌도록 가볍게 만들었습니다. 포트폴리오 자체는 가상 업체라 noindex로 검색에서 빼 두었습니다. 실제 의뢰라면 업체 정보와 수업 시간을 담은 구조화 데이터를 넣고 네이버와 구글에 등록한 뒤 검색 노출용 칼럼을 함께 발행합니다. 같은 크로스핏이라도 강점이 다르면 화면이 완전히 달라집니다. 커뮤니티와 가족을 앞세운 「바시티 크로스핏 제작기」와 비교해 보시면 차이가 잘 보입니다.
제작은 대표님 인터뷰에서 시작합니다. 회원이 왜 우리 박스를 끝까지 다니는지 듣고 강점을 한 문장으로 정한 뒤, 프로그램과 코치, 처음 오는 분의 과정을 짭니다. 이어서 실제 수업과 박스를 직접 촬영하고, 디자인과 효과, 검색 세팅을 거쳐 오픈한 뒤 첫 수업 예약 클릭 같은 숫자를 함께 확인합니다. 강점 한 문장에서 디자인을 시작하는 이유는 「병원 브랜딩, 원장님에서 시작해야 하는 이유」에 병원 사례로 정리해 두었는데, 박스도 같은 원리입니다.
비용은 330만 원(부가세 포함)으로 직접 촬영이 포함되고 페이지 수와 수정 횟수에 제한이 없습니다. 검색 노출용 칼럼 6편과 오픈 후 3개월 유지보수도 무료이며, 이후 유지보수 정기권은 월 110만 원(월 마케팅이나 개원 마케팅 이용 시 무료)입니다. 다른 업종 사례는 홈페이지 포트폴리오에서, 우리 박스 홈페이지에서 무엇부터 바꾸면 좋을지는 무료 사전 진단으로 먼저 확인해 보세요.
자주 묻는 질문
크로스핏 홈페이지 제작 비용은 얼마인가요?
330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색 노출용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다.
수업 시간표나 프로그램이 바뀌면 계속 고쳐 주시나요?
오픈 후 3개월은 무료로 수정해 드리고, 이후에는 유지보수 정기권으로 시간표와 코치, 이벤트 변경을 맡기실 수 있습니다.
칠판이나 타이머 같은 효과가 많으면 휴대폰에서 느리지 않나요?
첫 화면 외 이미지는 지연 로딩하고 효과는 가볍게 만들어, 휴대폰에서 직접 검수한 뒤 오픈합니다.
우리 박스도 이런 공업형 디자인으로 해야 하나요?
아닙니다. 인터뷰에서 대표님 박스만의 강점을 찾아 그에 맞는 색과 장치를 새로 설계하며, 같은 틀을 복사해 쓰지 않습니다.
회원 사진을 홈페이지에 써도 되나요?
촬영 전에 동의를 받은 회원만 찍고, 원하지 않는 분은 얼굴이 드러나지 않게 구도를 잡아 촬영합니다.