송해온: 심해의 치유를 담은 프리미엄 해수온천
Songhaeon Premium Seawater Spa Web Integration
| CLIENT | Songhaeon Co. |
| ROLE | Tech Planning, UI/UX Design, Front-end Dev |
| PERIOD | 2024.11.01 - 2024.11.14 (14 Days) |
| TECH STACK | Blogger XML, CSS3 Variables, Vanilla JS, Google CDN, JSON-LD |
전략 및 시장 아키텍처
Strategy & Market Architecture
Market Analysis
현대인의 웰니스(Wellness) 니즈가 증가함에 따라 단순한 목욕 시설을 넘어선 '치유'와 '경험' 중심의 공간이 요구되었습니다. 경쟁사 대비 압도적인 미네랄 함량을 보유한 송해온의 USP(Unique Selling Proposition)를 데이터 시각화로 전달하고, 고급스러운 공간 이미지를 통해 프리미엄 포지셔닝을 확립했습니다.
정보 구조 설계
Information Architecture
Sitemap Structure
Blogger의 b:section 구조를 활용하여 단일 페이지 내에서 정보가 유기적으로 흐르도록 설계했습니다.
- Hero Brand Video & Key Visual (Ocean View)
- Quality Water Composition Graph & Data Visualization
- Facility Premium Sauna & Wellness Zone Gallery
- Info Usage Guide, Pricing, Location Map
UX Flow Visualization
User Entry (SEO) Verify Quality (Graph) Explore Facility (Gallery) Check Location & Visit
비주얼 디자인 및 AI 워크플로우
Visual & AI Workflow
No-Photoshop Design Process
그래픽 툴에 의존하지 않고 Generative AI Tools를 활용하여 배경 텍스처와 아이콘 에셋을 생성했습니다. CSS Grid와 Flexbox만으로 복잡한 매거진 스타일의 레이아웃을 구현하여, 이미지 수정 시 코드 수정 없이도 즉각적인 대응이 가능한 유연한 디자인 시스템을 구축했습니다.
Style Guide
#1A2B49
Trust & Depth
#C5A059
Premium Accent
#F5F5F5
Base Background
타이포그래피는 가독성이 뛰어난 'Pretendard'를 기본으로, 영문 헤드라인에는 세리프 폰트를 혼용하여 클래식한 무드를 연출했습니다.
기술 구현 및 최적화
Performance & Technical Optimization
Core Web Vitals & Speed
LCP(Largest Contentful Paint) 개선을 위해 상단 히어로 영역의 CSS를 Critical CSS로 인라인 처리하고, 폰트 파일에 Preload를 적용했습니다. Google CDN을 활용하여 전 세계 어디서든 빠르게 접속 가능하며, 스크롤 아래 영역의 고해상도 이미지는 Lazy Loading과 WebP 포맷 변환을 통해 대역폭을 절약하고 초기 로딩 속도를 비약적으로 향상시켰습니다.
SEO Architecture (Schema.org)
검색 엔진 최적화를 위해 시맨틱 태그(Semantic HTML)를 준수했습니다. 특히 LocalBusiness 및 HealthAndBeautyBusiness 타입의 JSON-LD 구조화된 데이터를 삽입하여, 구글 검색 결과에서 위치, 영업시간, 가격 정보가 리치 스니펫으로 노출되도록 기술적 토대를 마련했습니다.
Google Infra 기반의 강력한 안정성과
프리미엄 브랜드 경험의 기술적 결합
