The Herz - 브랜드 사이트 프론트엔드

서비스 소개

The Herz는 회사의 브랜드 정체성과 사업 영역을 소개하는 웹 프론트엔드 프로젝트다. 메인 랜딩에서 브랜드 인상을 먼저 전달하고, 이후 영어 유치부, 심리상담센터, 연구소, 북카페, 리더 소개, 공간 구조 같은 세부 페이지로 자연스럽게 이동하는 흐름을 목표로 했다.

이 프로젝트에서 중요한 건 단순히 정보를 나열하는 것이 아니라, 브랜드 사이트 특유의 분위기와 탐색 흐름을 함께 설계하는 일이었다.

역할과 범위

프론트엔드 개발자로서 아래 영역을 담당했다.

메인 원페이지 랜딩 인터랙션 구현
섹션 단위 네비게이션 흐름 설계
사업 소개용 상세 페이지 구성
리더 소개 페이지 UI 구현
공간 구조 페이지와 상태 안내 처리
SCSS 기반 공통 스타일 구조 정리

즉, 메인 화면 연출만 만든 것이 아니라 메인에서 상세 페이지로 이어지는 전체 정보 구조를 프론트엔드 관점에서 정리한 작업이었다.

핵심 구현

1. Swiper 기반 세로형 원페이지 랜딩

메인 페이지는 일반적인 긴 스크롤 랜딩 대신, Swiper 기반 세로 슬라이드 구조로 구성했다. 각 섹션은 독립된 메시지를 가진 화면으로 설계했고, 사용자는 마우스 휠과 키보드로 한 섹션씩 이동하도록 했다.

const SECTION_INDEX_MAP = {
  'hero-section': 0,
  'intro-section': 1,
  'mission-section': 2,
  'sitemap-section': 3,
  'story-section': 4,
  'leaders-section': 5,
  'location-section': 6,
  'notice-section': 7,
  footer: 7,
};

이 구조를 통해 섹션 단위 이동을 명확하게 관리할 수 있었고, 브랜드 메시지를 단계적으로 전달하는 UX를 만들 수 있었다.

2. 랜딩 재진입 제어와 복귀 흐름 보완

원페이지 메인에서 상세 페이지로 이동했다가 다시 돌아올 때, 사용자가 매번 첫 랜딩부터 다시 보게 되면 탐색 피로도가 커진다. 이를 줄이기 위해 sessionStorage를 활용해 랜딩 재진입 여부와 이탈 상태를 관리하고, 필요한 경우 스크롤 위치를 복원하도록 구현했다.

sessionStorage.setItem('skipLandingOnce', 'true');
sessionStorage.setItem('navigatedAway', 'true');

브랜드 연출은 유지하되 반복 탐색에서는 방해가 되지 않도록 균형을 잡는 데 초점을 맞췄다.

3. 목적이 다른 상세 페이지를 분리 설계

사업 소개 페이지는 각 영역을 더 자세히 읽을 수 있도록 분리했고, 리더 소개 페이지는 대표 인물과 일반 리더를 구분한 카드형 구성으로 시각적 위계를 만들었다.

공간 구조 페이지에서는 층별 정보를 카드형으로 정리했고, 아직 준비되지 않은 공간은 죽은 링크가 아니라 토스트 메시지로 Coming soon 상태를 안내하도록 처리했다. 작은 디테일이지만, 사용자 입장에서 오류와 준비 중 상태를 구분하게 해주는 UX였다.

4. SCSS 기반 스타일 구조 정리

페이지별 비주얼 성격은 달랐지만 전체 브랜드 톤은 유지해야 했기 때문에, SCSS 변수와 믹스인을 분리해 색상, 간격, 반응형 규칙을 공통으로 관리했다. 페이지 단위 스타일은 CSS Modules로 구성해 스타일 범위를 명확히 나눴다.

이 구조 덕분에 페이지가 늘어나도 스타일 충돌을 줄이고 수정 범위를 예측하기 쉬웠다.

배운 점

이 프로젝트를 통해 브랜드 사이트 프론트엔드는 단순한 퍼블리싱 작업이 아니라는 점을 다시 확인했다. 인터랙션이 강할수록 사용자가 원하는 정보를 찾기 어려워질 수 있기 때문에, 연출과 탐색성을 함께 설계해야 했다.

특히 아래 기준이 중요했다.

브랜드 연출은 강할수록 복귀 흐름을 더 신경 써야 한다
랜딩 화면은 보여줄 순간보다 생략할 순간이 더 중요할 수 있다
하위 페이지는 메인의 보조가 아니라 정보 구조의 확장이어야 한다
스타일 시스템은 현재 화면보다 이후 수정 흐름을 기준으로 정리해야 한다

포트폴리오 관점에서 이 작업은 단순 페이지 제작이 아니라, 상태와 사용자 흐름까지 고려한 프론트엔드 구현 경험으로 남아 있다.