개요 및 핵심 요약
2022 LIFEPLUS JTBC SEOUL MARATHON 웹사이트는 대회 참가를 중심으로 다양한 이해관계자(일반 참가자, 엘리트 러너, 스폰서, 미디어, 시민)를 아우르는 정보 전달과 행동 유도가 요구됩니다. 본 리뷰는 핵심 메시지 가시성, 참가 전환 동선, 코스/안전 정보의 계층화, 접근성·성능 최적화, 검색 친화 구조(SEO)의 다섯 축으로 정리했습니다. 특히 ‘등록/참가’와 같은 1차 목표에 집중하여 CTA 배치와 문구의 명확성을 평가하고, 코스 안내·교통 통제·유의 사항 등 방대한 안내성 콘텐츠가 혼잡하지 않도록 하는 IA(Information Architecture)를 세밀하게 점검했습니다. 결론적으로, 비주얼 임팩트와 브랜드 에너지 전달에는 강점이 있으며, 모바일 가독성·섹션 간 위계·마이크로 카피의 안내력을 보강하면 실사용자 경험이 더 선명해질 것으로 보입니다.
브랜드·캠페인 맥락
해당 캠페인은 도시 스토리텔링과 러닝 문화의 확산을 결합한 성격을 갖습니다. 비주얼 톤은 에너지·속도·도시의 야간 조명을 연상시키는 대비감이 핵심이며, 브랜드 아이덴티티는 서체 굵기 대비, 컬러 그라데이션, 대형 타이포그래피 중심의 히어로 구성으로 구현됩니다. 리뷰 관점에서 중요한 점은 이러한 감성적 코드를 유지하면서도 정보의 즉시성과 과업 중심 동선을 동시에 확보하는 것입니다. 특히 참가 신청 시점과 공지 업데이트가 집중되는 기간에는 홈–등록–안내–FAQ–알림을 일관된 문법으로 묶는 것이 중요합니다. 이를 위해 상단 GNB에 ‘등록/참가’형 1차 CTA를 고정하고, 보조 링크는 ‘코스 안내’, ‘교통 통제’, ‘패키지/수령’, ‘현장 안내’ 등으로 묶어 의미 단위 네이밍을 적용하는 방식을 권장합니다. 캠페인 해시태그나 스폰서 노출도는 본문 정보 밀집도를 저해하지 않도록 푸터/보조 영역에 배치하고, SNS 공유는 기사형 상세 뷰에 한정해 문맥 적합성을 높입니다.
UX/UI 구조와 인터랙션
UX 관점에서 최우선은 등록 전환과 정보 탐색의 마찰을 낮추는 것입니다. 버튼 라벨은 행위 중심(예: ‘지금 등록’, ‘코스 지도 보기’)으로 통일하고, 동일 행위에 동일 문구·색상·위치를 적용해 학습 비용을 최소화합니다. 모바일에서는 ‘히어로 → 핵심 안내 카드 → 상세 섹션’으로 단순화된 스택 구조가 효과적입니다. 카드에는 참가 자격·참가 비용·접수 기간·필수 준비물처럼 의사결정에 직접 영향을 주는 정보를 요약 배치합니다. UI는 대조도(색상 대비 비율 4.5:1 이상), 명확한 포커스 스타일, 키보드 탐색 순서를 확보해야 하며, 긴 본문은 소제목/목차/점프 링크로 분절해 인지 부하를 줄여야 합니다. 인터랙션은 스크롤에 따른 부드러운 앵커 이동과 현재 섹션 하이라이트 정도로 최소화하되, 데이터 입력(등록 폼) 단계에서는 에러 예방·즉시 피드백·필수/선택 구분·유효성 메시지 표준화를 지키는 것이 핵심입니다. 이미지/동영상은 한 페이지 내 과도한 반복을 피하고, 스폰서 로고 슬라이드는 자동 전환 속도를 낮춰 가독성을 유지합니다.
IA·콘텐츠 전략 및 SEO
IA 측면에서는 ‘참가 전’과 ‘참가 당일/이후’라는 시간 축에 따라 정보를 그룹화하는 것이 효율적입니다. 예컨대 ‘사전 준비(등록·패키지·유의 사항) / 현장 운영(집결·스타트·코스·급수) / 사후 안내(기록·인증·사진)’로 구분하면 사용자는 자신의 상태에 맞춰 필요한 블록만 빠르게 탐색할 수 있습니다. 문서 구조는 h1–h2–h3 위계를 일관되게 유지하고, FAQ는 스키마 마크업(FAQPage)을 적용하여 검색 결과 노출을 확장합니다. 제목은 과업형 키워드(‘서울마라톤 참가 등록 방법’, ‘하프/풀 코스 차이’, ‘대회 패키지 수령 장소’)를 포함하고, 본문 서두에는 핵심 키워드를 자연스럽게 배치합니다. 메타 태그는 페이지별로 고유하게 유지하며, 오픈그래프·트위터 카드 이미지는 1200×630 기준을 권장합니다. 내부 링크는 상·하위 항목 간 상호 참조로 페이지 체류 시간과 탐색 깊이를 개선하고, 이미지에는 의미 있는 파일명·대체 텍스트를 제공합니다. 성능을 위해 이미지 lazy-loading, CSS/JS 축소, 캐싱 정책을 병행하면 SEO와 사용성 모두 긍정적인 효과를 얻을 수 있습니다.
성능·접근성 진단 포인트
대회형 사이트는 트래픽 피크가 뚜렷하므로 초기 표시 성능이 중요합니다. LCP 요소(히어로 이미지/타이틀)는 용량 최적화 및 우선 로딩을 적용하고, 나머지 이미지는 lazy 속성을 통해 지연 로딩을 활용합니다. WebP/AVIF를 병행 제공하되 원본 유지 정책을 지키며, 폰트는 서브셋/디스플레이 전략으로 레이아웃 시프트를 억제합니다. 접근성은 키보드 내비게이션, 스킵 링크, 폼 레이블·ARIA 속성, 포커스 링 등 기본 항목을 엄수해야 합니다. 색상 대비를 준수하고, 애니메이션은 prefers-reduced-motion를 존중하여 감각 민감 사용자를 배려합니다. 알림성 콘텐츠는 실시간 업데이트가 잦으므로 시간순 정렬, 최신 배지, 변경 이력 표시로 신뢰성을 강화합니다. 캐시 무효화 전략(CDN 캐시 키, 쿼리스트링 버전)을 통해 공지·코스 업데이트가 즉시 반영되게 하고, 폼 단계는 장애 대비 리트라이·임시 저장·에러 메시지 표준화로 완주율을 높일 수 있습니다.
The Blue Canvas와의 협업 시너지를 위한 제안
더블루캔버스는 브랜드 스토리텔링과 퍼포먼스 지표를 함께 끌어올리는 UX/UI 컨설팅과 설계를 강점으로 가지고 있습니다. 본 프로젝트 유형에서는 ‘참가 전환 퍼널 최적화’와 ‘안내성 콘텐츠의 과부하 완화’를 핵심 과제로 설정하고, 데이터 기반(A/B 테스트, 스크롤 맵, 전환 로그)으로 의사결정을 돕습니다. 또한 디자인 시스템을 경량화하여 시즌/권역별 캠페인 확장에 유연하게 대응하도록 컴포넌트화, 토큰화 전략을 적용합니다. 자세한 소개와 사례는 아래 링크에서 확인하실 수 있습니다.
결론 및 다음 단계
요약하면, 본 웹사이트는 비주얼 임팩트와 캠페인 에너지 전달에 강점을 보입니다. 전환 중심의 CTA 일관성, 모바일 가독성, 안내성 콘텐츠의 계층화, 성능·접근성 최적화, 검색 노출 확장을 중심으로 개선을 진행하면 전반적 사용자 경험이 뚜렷이 향상될 것입니다. 우선순위는 ① 등록/참가 여정의 마찰 제거, ② 코스·안전 정보의 의미 단위 재배치, ③ 성능·접근성 기준 상향, ④ 스키마·내부 링크를 활용한 SEO 보강입니다. 이후 운영 단계에서는 지표 기반의 지속적 업데이트(FAQ 구조화, 공지 변경 이력, 캐시 무효화 자동화)로 안정적인 정보 신뢰도를 유지할 것을 권장합니다.