러닝 크루 홈페이지 제작기, 여의도 새벽 러닝 던런 디자인 이야기

요약 러닝 크루 홈페이지 제작에서 저희가 붙잡은 질문은 "나만 너무 느리면 어쩌지, 혼자서는 새벽에 못 일어나는데"였습니다. 던런 러닝 트레이닝은 실제 고객이 아니라, 블러썸팩토리가 서울 여의도 한강의 가상 새벽 러닝 크루를 정하고 실제 의뢰처럼 대표 코치의 강점부터 잡아 만든 포트폴리오 홈페이지입니다. 서브3 출신 코치가 한 사람씩 페이스표를 짜고 화·목·토 새벽 6시에 옆에서 함께 뛴다는 약속을, 해가 뜨는 스크롤과 한강 코스 지도, 페이스 계산기로 어떻게 보여 줬는지 디자이너가 직접 들려 드립니다.

여의도의 가상 새벽 러닝 크루, 이렇게 가정했습니다

러닝 크루를 찾는 분들의 걱정은 두 가지로 모입니다. "다들 빠를 텐데 나만 너무 느리면 어쩌지"와 "혼자서는 새벽에 못 일어나는데"입니다. 러닝은 혼자서도 할 수 있는 운동이라, 돈을 내고 크루에 들어오는 이유는 결국 '나에게 맞는 숫자'와 '같이 나오는 사람'입니다.

그래서 가상의 러닝 클럽 '던런'을 정하고, 윤하린 대표 코치라는 가상 인물에게 강점 하나를 주었습니다. "마라톤 풀코스 2:58, 서브3 출신으로 한 사람씩 개인 페이스표를 직접 짜 주고, 화·목·토 새벽 6시 한강에서 옆에서 함께 달리는 코치"입니다. 헤드라인은 "해 뜨기 전, 당신의 페이스로 같이 달립니다."로 정했습니다. 빠른 사람들의 크루가 아니라, 각자의 페이스로 같은 새벽을 함께 여는 크루라는 이야기입니다.

사진은 포트폴리오라서 연출 사진(AI 생성 이미지와 무료 사진)을 썼습니다. 실제 제작에서는 대표 코치님과 크루원들이 실제 코스를 달리는 새벽 장면을 저희가 직접 촬영합니다.

첫 화면: 05:30에서 06:00으로, 해가 뜹니다

사이트를 열면 별이 뜬 인디고 하늘의 지평선 아래에서 해가 떠오르며 빛이 번지고 물결에 비칩니다. 그동안 05:30 시계가 06:00으로 넘어가고, DAWN RUN 글자가 흐림에서 또렷하게 떠오릅니다. 새벽 6시 출발이라는 이 크루의 가장 큰 특징을 첫 3초에 몸으로 느끼게 하고 싶었습니다.

히어로에는 얇은 DAWN과 해돋이 색으로 물든 굵은 RUN을 나란히 크게 세우고, 아래에 "해 뜨기 전, 당신의 페이스로 같이 달립니다."를 붙였습니다. 사진은 한강 다리와 해 뜨는 도심을 배경으로 크루가 함께 달리는 장면을 지평선처럼 둥글게 잘라 넣었습니다. 버튼은 '첫 새벽 러닝 무료'와 '내 페이스 계산' 두 개입니다. 사진 위에는 'SUB-3 풀코스 2:58 코치', '1:1 개인 페이스표', '06:00 주 3회 함께' 세 가지를 칩으로 붙여, 이 크루가 주는 것을 첫 화면에서 다 읽히게 했습니다.

헤더 오른쪽의 작은 시계는 06:00에서 시작해 스크롤에 따라 07:10까지 흘러갑니다. 페이지 전체의 하늘도 밤에서 여명, 일출, 아침으로 색이 바뀌고, 별이 사라지며 해가 서서히 올라갑니다. 사이트를 끝까지 내리는 일이 곧 새벽 한 시간을 함께 달리는 일이 되도록 만든 장치입니다.

디자인 언어: 새벽에서 아침까지의 하늘

러닝 브랜드 홈페이지는 검정 배경에 형광색을 쓰거나, 기록과 속도를 크게 내세우는 경우가 많습니다. 하지만 "나만 느리면 어쩌지" 하는 분에게 그런 화면은 부담입니다. 그래서 색을 운동이 아니라 시간에서 가져왔습니다. 딥 인디고에서 바이올렛과 새벽 핑크, 선라이즈 오렌지를 지나 크림빛 아침으로 바뀌는 하늘을 사이트 전체의 바탕으로 삼았습니다.

하늘이 밝아지는 순간 글자색도 크림에서 인디고로 넘어가도록 해 어느 구간에서도 읽기 편하게 지켰습니다. 영문은 얇고 넓은 Unbounded로 새벽 공기 같은 여백을, 시계와 기록, 페이스 숫자는 DM Mono 고정폭으로 정확함을 표현했습니다. 사진은 해 모양 아치와 지평선 곡선으로 잘라 '해가 뜨는 장소'라는 인상을 끝까지 이어 갔습니다.

섹션 구성: "나도 이 크루에서 뛸 수 있겠다"까지의 순서

러닝 크루 홈페이지에서 방문자가 확인하고 싶은 것은 "누가 가르치나", "어디를 달리나", "내 속도로 괜찮나" 세 가지입니다. 그래서 대표 코치 바로 뒤에 한강 코스를, 그다음에 페이스 계산기를 두어 순서대로 답하게 했습니다.

대표 코치 섹션의 제목은 "서브3로 달려 본 사람이 당신의 첫 1km부터 봅니다."입니다. 해 모양 아치로 자른 코치 사진 옆에 풀코스 2:58:41, 하프 1:24:10, 10K 38:52를 고정폭 숫자로 나란히 두고, 한마디는 "빨리 달리는 법보다, 오래 달리는 법을 먼저 가르칩니다."로 정했습니다. 아래에는 하프 1:55 목표의 주간 페이스표 예시를 표로 보여 줘, 말뿐인 약속이 아니라는 증거로 삼았습니다.

한강 코스 지도는 화면을 고정한 채 스크롤에 맞춰 여의도 한강공원 코스가 그려지는 구간입니다. 러너 점이 따라 움직이며 1km마다 마커가 켜지고, 왼쪽에는 거리와 경과 시간, '강변 숲길 — 숨이 편하면 마지막 1km만 조금 올립니다' 같은 구간 메모가 바뀝니다. 5K와 10K 루프는 탭으로 바꿀 수 있습니다. 처음 오는 사람이 "어디서 출발해 어디로 달리는지"를 미리 한 바퀴 달려 보게 한 것입니다.

이 사이트의 핵심은 페이스 계산기입니다. 10K, 하프, 풀 중 목표 거리를 고르고 목표 기록 슬라이더를 움직이면 km당 레이스 페이스와 통과 기록이 바로 나옵니다. 오른쪽에는 이지·레이스·템포·인터벌 네 가지 훈련 존이 페이스 축 위 막대로 튕기듯 이동하고, 아래에는 화·목·토 새벽 세션의 페이스까지 계산됩니다. 10K 55분처럼 평범한 목표를 넣어도 내 숫자가 나오는 것을 보며 "느린 사람도 여기선 자기 표가 있다"고 느끼게 했습니다. 계산기 아래에는 "처음 달리는 분은 기록보다 '쉬지 않고 30분'부터 시작합니다"라는 문장도 함께 두었습니다.

그 아래 '새벽 한 시간' 타임라인은 05:50 물빛광장 집결부터 06:00 드릴, 06:15 그룹별 러닝, 06:50 쿨다운과 기록 확인, 07:05 해산까지를 큰 고정폭 시계와 진행 막대로 보여 줍니다. 출근 전 직장인이 가장 궁금한 "몇 시에 끝나지?"에 답하는 섹션입니다.

휴대폰 화면: 코스와 계산기를 손가락으로

새벽 러닝은 전날 밤 침대에서 휴대폰으로 찾아보는 경우가 많습니다. 그래서 모바일에서도 코스 지도와 페이스 계산기를 빼지 않았습니다. 코스 지도는 지도와 거리 숫자를 위아래로 쌓아 한 화면에 들어오게 하고, 계산기는 슬라이더 손잡이를 엄지 크기로 키워 목표 기록을 쉽게 움직이게 했습니다.

하늘이 밝아지는 효과와 헤더 시계도 모바일에서 그대로 흐릅니다. 화면 아래에는 '전화'와 '첫 새벽 러닝 무료 신청' 버튼을 늘 고정해, 페이스를 계산해 본 그 자리에서 내일 새벽 신청으로 넘어가게 했습니다.

검색 세팅, 그리고 우리 크루에 적용한다면

러닝 클럽 홈페이지는 "여의도 러닝 크루", "한강 러닝 클럽", "마라톤 훈련 프로그램"처럼 장소와 목표를 함께 검색하는 분들이 찾아옵니다. 그래서 페이지 제목은 "던런 러닝 트레이닝 DAWN RUN — 새벽 6시, 당신의 페이스로 같이 달립니다"로, 설명 문구에는 "여의도 한강", "마라톤 서브3 출신 대표 코치", "개인 페이스표", "10K·하프·풀마라톤 목표 트레이닝", "첫 새벽 러닝 무료"를 담았습니다. 실제 제작에서는 10K 입문, 하프, 풀코스 프로그램을 각각 페이지로 나눠 "첫 하프 마라톤 준비" 같은 검색어도 받을 수 있게 합니다.

첫 화면 외 이미지는 지연 로딩으로 불러오고, 하늘색 변화는 가볍게 계산했습니다.포트폴리오 자체는 가상 업체라 noindex로 검색에서 빼 두었습니다. 실제 의뢰라면 업체 정보와 집결 장소, 크루 런 시간을 담은 구조화 데이터를 넣고 네이버와 구글에 등록한 뒤 검색 노출용 칼럼을 함께 발행합니다. 같은 러닝이라도 측정과 자세 교정을 강점으로 삼으면 화면이 전혀 달라집니다. 「스트라이드 러닝랩 제작기」와 비교해 보세요.

제작은 대표님 인터뷰에서 시작합니다. 크루원들이 왜 새벽에 계속 나오는지 듣고 강점을 한 문장으로 정한 뒤, 코스와 프로그램, 처음 오는 날의 과정을 짭니다. 이어서 실제 새벽 러닝을 직접 촬영하고, 디자인과 효과, 검색 세팅을 거쳐 오픈한 뒤 첫 러닝 신청 클릭 같은 숫자를 함께 확인합니다. 강점 한 문장에서 디자인을 시작하는 이유는 「병원 브랜딩, 원장님에서 시작해야 하는 이유」에 병원 사례로 정리해 두었는데, 러닝 크루도 같은 원리입니다.

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

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

자주 묻는 질문

러닝 크루 홈페이지 제작 비용은 얼마인가요?

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

새벽 촬영도 해 주시나요?

네, 크루 런이 열리는 시간에 맞춰 실제 코스에 나가 촬영합니다. 해 뜨는 시각과 날씨를 보고 날짜를 함께 정합니다.

페이스 계산기 같은 기능도 만들 수 있나요?

네, 대표 코치님이 실제로 쓰는 계산 방식과 훈련 존을 인터뷰로 듣고, 홈페이지에서 직접 눌러 볼 수 있는 형태로 만듭니다.

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

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

크루원 사진을 홈페이지에 써도 되나요?

촬영 전에 동의를 받은 크루원만 찍고, 원하지 않는 분은 얼굴이 드러나지 않게 구도를 잡아 촬영합니다.