작업 리포트

[개인 사업 · 가게] 브랜드 홈페이지 「바운즈바레 bounze BARRE」

브랜드 홈페이지 「바운즈바레 bounze BARRE」
  • PC
  • Mobile

브랜드 홈페이지 「바운즈바레 bounze BARRE」

브랜드 시안부터 아임웹 구축, 검색엔진 등록까지 9일 만에 1차 오픈한 바레 피트니스 브랜드 홈페이지

제작 방식
아임웹 + 커스텀 CSS · 코드 위젯
작업 기간
2026년 9월 29일 – 10월 7일
타입
신규 피트니스 브랜드 홈페이지 (9개 페이지)
메인 컬러
#FF5A00#141414#F6F5F2
폰트
Pretendard
클라이언트
바운즈바레 (바레 피트니스)
바운즈바레 (바레 피트니스) 사이트 보러가기 ↗

사이트는 넘긴 뒤 고객이 고쳤을 수 있습니다. 넘길 때의 디자인은 아래 그림에서 볼 수 있습니다.

작업 리포트

새로 시작하는 바레 피트니스 브랜드 「바운즈바레」의 브랜드 홈페이지입니다. 브랜드 시안부터 아임웹 구축, 검색엔진 등록까지 맡아 착수 9일 만에 1차 오픈했습니다.

짧은 기간에, 사업 구조까지 보이는 홈페이지

바운즈바레는 바레 · 필라테스 · 유산소를 결합한 신규 브랜드로, 회원 모집과 함께 강사를 파트너 점장 · 오너로 키우는 사업 모델을 갖고 있습니다. 운동을 처음 접하는 고객과 함께 일할 강사 · 가맹 희망자에게 각각 필요한 내용을 한 사이트에 담아야 했습니다.

  • 1주 안에 첫 시안을 사이트로 올리고, 이후 수정을 거쳐 오픈
  • 4가지 프로그램(FLOW · CORE · BOUNZE · RED)을 한눈에 구분
  • 강사 → 파트너 점장 → 오너로 이어지는 성장 구조 전달
  • 지점이 늘어날 때 고객이 직접 추가 · 수정할 수 있는 구조

고객과 함께 좁혀 간 디자인

고르기 쉽도록 매 단계 실제 화면 크기의 비교 시안을 만들고, 고객의 선택을 다음 시안에 바로 반영했습니다.

  1. 스타일 샘플 (9.29) — 고객이 마음에 들어 한 레이아웃 방향을 출발점으로 잡고, 브랜드 컬러인 오렌지와 차콜 · 크림 베이스를 정리했습니다.
  2. 브랜드 시안 3안 비교 (9.30) — 사진형 · 다크 · 컬러 띠형 세 가지를 PC 1440 / 모바일 390 실제 폭으로 나란히 비교할 수 있게 했습니다. 고객은 다크안의 구성을 고른 뒤 "더 밝게"를 요청했습니다.
  3. 화이트 톤 확정 · 메인 사진 선택 (10.1) — 밝은 톤 3종 중 화이트로 확정하고, 메인 사진 후보를 같은 화면에 넣어 비교했습니다.
  4. 최종 시안 → 아임웹 제작 (10.2) — 고객이 보내 준 프로그램 · 파트너 구성안을 시안에 반영한 뒤 아임웹 제작에 들어갔습니다. 원페이지 구성은 피드백에 따라 메뉴별 페이지로 나눴습니다.
  5. 피드백 반영 · 오픈 (10.3 – 10.7) — 콘텐츠를 받는 대로 반영하고, 확인이 필요한 항목은 작업 보고서로 정리해 전달했습니다. 오픈 직전 요청 3건(팝업 · 지점 사진 · 파트너 페이지)을 반영하고 10월 7일 공개했습니다.

오렌지 하나로 기억되게, 프로그램은 색으로 구분

밝은 화이트 · 크림 바탕에 오렌지를 포인트로만 써서 버튼과 숫자가 먼저 보이게 했습니다. 4개 프로그램에는 각각 고유 색(FLOW 블루 · CORE 핑크 · BOUNZE 오렌지 · RED 레드)을 주어 메인 · 프로그램 · 지점 어디서든 같은 색으로 알아보게 했습니다. 헤드라인은 굵은 영문 대문자로 에너지를 표현하고, 본문은 Pretendard로 통일해 긴 설명은 카드 · 아이콘 · 키워드로 나눠 읽지 않아도 이해되도록 구성했습니다.

보기 좋은 것에서 끝나지 않도록

  • 4 PROGRAMS 패널 — 메인에서 프로그램 4종을 사진 패널로 보여 주고, PC에서는 마우스를 올린 칸이 넓어집니다. 누르면 프로그램 페이지의 해당 위치로 바로 이동합니다.
  • 한 화면에 한 프로그램 — 스크롤을 내리면 FLOW → CORE → BOUNZE → RED가 한 화면씩 차례로 나타납니다.
  • TEACH → LEAD → GROW → OWN — 긴 설명이던 성장 구조를 4단계 로드맵 카드로 바꿔, 강사에서 오너까지의 흐름이 한눈에 들어오게 했습니다.
  • 지점 자동 연동 — 지점 글을 하나 올리면 메인의 지점 안내에도 자동으로 나옵니다. 지점이 늘어도 고객이 직접 관리할 수 있습니다.
  • 예약 · 상담 동선 — 네이버 플레이스 예약을 메인 첫 화면과 지점 페이지에 연결하고, 파트너 모집 팝업과 상담 신청 폼을 붙였습니다.
  • 검색엔진 등록 — 구글 Search Console · 네이버 서치어드바이저 등록, 사이트맵 제출까지 마치고, 고객용 네이버 등록 가이드를 따로 만들어 드렸습니다.

결과

착수부터 1차 오픈까지 9일, 메인 · 브랜드 · 프로그램 · 지점 · 송도점 · 이벤트 · 아카데미 · 파트너 · 상담 문의 9개 페이지를 PC와 모바일로 공개했습니다. 시안 확정부터 공개까지 고객의 피드백 주기에 맞춰 진행했고, 오픈 후에는 유지보수 기간 동안 추가 수정을 이어가고 있습니다.

사이트에 쓰인 이미지와 브랜드 자산의 권리는 바운즈바레에 있습니다.

  • 3안 비교로 좁혀 간 시안

    사진형 · 다크 · 컬러 띠형 세 가지를 PC 1440 / 모바일 390 실제 폭으로 나란히 보여 드리고, 고객의 선택을 다음 시안에 바로 반영했습니다.

  • 프로그램은 색으로 구분

    오렌지를 포인트로만 쓰고 FLOW · CORE · BOUNZE · RED 네 프로그램에 고유 색을 주어, 메인 · 프로그램 · 지점 어디서든 같은 색으로 알아봅니다.

  • 착수 9일 만에 1차 오픈

    9개 페이지를 PC · 모바일로 공개하고, 네이버 플레이스 예약 연결과 구글 · 네이버 검색엔진 등록까지 마쳤습니다.

제공 서비스

  • 브랜드 분석 · 시안 디자인
  • 아임웹 9개 페이지 구축
  • 커스텀 CSS
  • PC · 모바일 반응형
  • 팝업 · 상담 신청 폼
  • 네이버 플레이스 연동
  • 구글 · 네이버 검색엔진 등록

개요

브랜드 홈페이지 「바운즈바레 bounze BARRE」 — 개요

디자인 과정

브랜드 홈페이지 「바운즈바레 bounze BARRE」 — 디자인 과정 1
브랜드 홈페이지 「바운즈바레 bounze BARRE」 — 디자인 과정 2

디자인 시스템

브랜드 홈페이지 「바운즈바레 bounze BARRE」 — 디자인 시스템

메인

브랜드 홈페이지 「바운즈바레 bounze BARRE」 — 메인 1
브랜드 홈페이지 「바운즈바레 bounze BARRE」 — 메인 2

메인 · 모바일

브랜드 홈페이지 「바운즈바레 bounze BARRE」 — 메인 · 모바일

프로그램

브랜드 홈페이지 「바운즈바레 bounze BARRE」 — 프로그램

파트너

브랜드 홈페이지 「바운즈바레 bounze BARRE」 — 파트너

주요 기능

브랜드 홈페이지 「바운즈바레 bounze BARRE」 — 주요 기능

결과

브랜드 홈페이지 「바운즈바레 bounze BARRE」 — 결과