더헤르츠 브랜드 사이트 프론트엔드 개발기: 원페이지 인터랙션과 사업 소개 구조를 함께 설계하기

더헤르츠 작업물은 흔히 말하는 “회사 소개 페이지”에 가깝지만, 실제로 구현하면서 느낀 점은 단순한 소개 사이트와는 결이 조금 달랐다는 것이다. 이 프로젝트에서 중요한 건 정보를 많이 보여주는 것보다, 브랜드의 분위기와 사업 구조를 사용자가 자연스럽게 따라가게 만드는 일이었다.

그래서 메인 화면은 정적인 배너 나열 대신 세로형 원페이지 인터랙션으로 구성했고, 각 사업 영역은 별도 페이지로 분리했다. 결과적으로 이 작업은 페이지를 만드는 일이라기보다, 브랜드 소개 흐름을 프론트엔드 UX로 번역하는 작업에 가까웠다.

프로젝트 개요

이 프로젝트는 더헤르츠의 브랜드와 사업 영역을 소개하는 프론트엔드 웹사이트다. 사용자가 메인 랜딩에서 브랜드 인상을 먼저 경험한 뒤, 영어 유치부, 심리상담센터, 연구소, 북카페, 리더 소개, 공간 구조 같은 세부 콘텐츠로 이동하는 구조를 목표로 했다.

기술 스택은 아래와 같이 가져갔다.

Next.js App Router
React
TypeScript
SCSS Modules
Swiper
react-pageflip

스타일은 SCSS 변수와 믹스인을 분리해서 관리했고, 페이지 단위 스타일은 CSS Modules로 구성했다. 단발성 퍼블리싱처럼 끝내지 않고, 페이지가 늘어나도 유지 가능한 구조를 만드는 쪽으로 정리했다.

내가 맡은 작업

이 프로젝트에서 내가 집중한 영역은 아래와 같았다.

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

결과적으로 “한 장짜리 멋진 메인 페이지”만 만든 것이 아니라, 메인에서 세부 페이지로 이어지는 정보 구조 전체를 프론트엔드 관점에서 정리한 작업이었다.

왜 원페이지 구조를 선택했는가

처음부터 이 사이트를 일반적인 기업 소개 사이트처럼 만들고 싶지는 않았다. 상단에 Hero가 있고, 그 아래로 긴 문단과 카드가 이어지는 구조는 익숙하지만, 브랜드의 인상이나 공간의 결을 전달하는 데는 한계가 있다.

더헤르츠는 사업 영역 자체가 분명하게 나뉘어 있었고, 각 영역의 이미지도 비교적 또렷했다. 그래서 메인 페이지를 여러 정보를 한꺼번에 보여주는 화면이 아니라, 사용자가 한 섹션씩 따라가며 읽는 흐름으로 설계하는 편이 더 맞다고 판단했다.

이 판단 때문에 메인 페이지는 Swiper 기반 세로 슬라이드 구조로 구현했다. 사용자는 마우스 휠이나 키보드로 한 섹션씩 이동하고, 각 섹션은 독립적인 메시지를 전달하도록 구성했다.

이 방식의 장점은 분명했다.

첫 진입에서 브랜드 인상을 강하게 줄 수 있다
섹션마다 메시지를 분리해 전달할 수 있다
소개 사이트가 너무 평면적으로 느껴지는 문제를 줄일 수 있다

반대로 단점도 있었다.

사용자가 원하는 정보에 빠르게 접근하기 어려울 수 있다
페이지 이동 후 다시 홈으로 돌아왔을 때 흐름이 끊길 수 있다
랜딩 연출이 반복되면 피로도가 높아질 수 있다

결국 이 프로젝트의 핵심은 “연출”보다 “연출과 탐색성의 균형”을 잡는 일이었다.

메인 페이지에서 가장 중요했던 구현 포인트

1. 섹션 이동을 단순 스크롤이 아니라 상태 있는 흐름으로 다뤘다

메인 페이지는 단순히 위아래로 스크롤되는 구조가 아니라, 각 섹션이 명확한 의미를 갖는 슬라이드 구조였다. 그래서 섹션 ID와 슬라이드 인덱스를 연결하는 맵을 두고, 특정 섹션으로 이동하는 커스텀 이벤트를 처리하도록 만들었다.

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,
};

이렇게 해두면 헤더나 다른 UI에서 특정 섹션으로 이동시키는 로직을 분리해서 관리할 수 있다. 단순한 스크롤 위치 계산보다, 화면 구조가 바뀌어도 의도를 유지하기 쉬운 방식이었다.

2. 페이지 이탈 후 복귀했을 때 탐색 흐름이 끊기지 않게 했다

원페이지 메인에서 상세 페이지로 들어갔다가 다시 홈으로 돌아오면, 대부분의 구현은 첫 화면으로 초기화된다. 하지만 실제 사용자는 “리더 소개를 보다가 다시 메인으로 왔을 때 아까 보던 흐름 근처로 돌아오길” 기대한다.

그래서 이 프로젝트에서는 sessionStorage를 활용해 이탈 전 상태를 저장하고, 홈 복귀 시 스크롤 위치를 복원하는 흐름을 넣었다.

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

이 처리는 작은 디테일처럼 보이지만, 메인 화면의 연출이 강할수록 오히려 더 중요하다. 사용자가 같은 연출을 반복해서 다시 겪지 않도록 해야 실제 탐색성이 유지된다.

3. 랜딩 화면은 보여주는 것보다 “언제 생략할지”가 더 중요했다

브랜드 사이트에서는 첫 진입 연출이 중요하다. 하지만 그 연출이 매번 반복되면 금방 방해 요소가 된다. 그래서 랜딩 화면은 무조건 보여주는 것이 아니라, 첫 진입이나 특정 상황에서만 보여주고 내부 이동 후 복귀 시에는 건너뛸 수 있도록 제어했다.

개인적으로 이 부분이 꽤 중요했다. 프론트엔드에서 애니메이션이나 랜딩 화면은 “넣는 것”보다 “빼야 할 순간을 구분하는 것”이 더 어렵다. 이 프로젝트는 그 차이를 실제로 체감하게 만든 사례였다.

상세 페이지는 각각 다른 목적을 갖도록 나눴다

메인 페이지만 강하게 만들고 하위 페이지를 단순하게 처리하면 전체 사이트 완성도가 떨어진다. 그래서 상세 페이지도 각각의 목적에 맞는 구조를 가지도록 구성했다.

사업 소개 페이지

영어 유치부, 상담센터, 연구소, 북카페 같은 사업 영역은 각각 별도의 페이지로 분리했다. 사용자가 메인에서 인상적으로 보고 끝나는 것이 아니라, 필요한 영역을 더 자세히 읽을 수 있도록 한 구조다.

이 방식은 단순하다. 하지만 브랜드 사이트에서는 오히려 중요한 선택이다. 메인에서 모든 걸 설명하려고 하면 정보가 섞이고, 하위 페이지가 없으면 탐색 경험이 금방 얕아진다.

리더 소개 페이지

리더 페이지는 인물 중심 콘텐츠라서 카드형 시각 구성이 중요했다. 대표 리더와 나머지 리더를 나눠 배치하고, 상세 페이지로 이동하는 흐름을 두어 정보 위계를 분명히 하려 했다.

이 페이지는 단순 리스트가 아니라 “누가 중심 인물인지”가 먼저 보이도록 설계한 것이 포인트였다.

공간 구조 페이지

공간 구조 페이지는 층별 정보를 카드형으로 정리했다. 여기서 신경 쓴 부분은 아직 준비되지 않은 공간의 처리였다. 클릭이 안 되는 죽은 링크로 두는 대신, Coming soon 토스트 메시지를 보여주게 했다.

이런 처리는 작아 보여도 사용자 경험에서 차이가 크다. 왜 이동이 안 되는지 설명이 없으면 사용자는 오류라고 느끼기 쉽기 때문이다.

스타일 구조는 “페이지 수가 늘어도 감당 가능하게” 잡았다

브랜드 사이트 작업은 화면별 분위기가 다르기 때문에 그때그때 스타일을 붙이다 보면 금방 관리가 어려워진다. 그래서 초반부터 SCSS 변수와 믹스인을 분리해서 색상, 간격, 반응형 규칙을 한 군데에서 관리하도록 정리했다.

이 방식의 장점은 명확했다.

페이지마다 톤이 달라도 기본 규칙은 유지할 수 있다
스타일 수정 시 영향 범위를 예측하기 쉽다
이후 페이지 추가나 수정이 들어와도 구조를 버리지 않아도 된다

프로젝트 규모가 아주 크진 않더라도, 회사 소개 사이트처럼 시안 수정이 반복될 가능성이 높은 작업에서는 이런 정리가 체감상 꽤 큰 차이를 만든다.

작업하면서 배운 점

이번 작업을 하면서 가장 크게 느낀 건, 브랜드 사이트 프론트엔드는 단순히 예쁜 UI를 만드는 작업이 아니라는 점이었다. 사용자가 어떤 순서로 콘텐츠를 만나고, 어디서 멈추고, 언제 지루해지는지를 함께 설계해야 한다.

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

인터랙션은 강할수록 탐색성을 보완해야 한다
랜딩 연출은 보여줄 이유만큼 생략할 이유도 분명해야 한다
하위 페이지는 메인의 보조가 아니라 정보 구조의 확장이어야 한다
스타일 정리는 화면이 아니라 수정 흐름을 기준으로 해야 한다

개인적으로는 메인 원페이지의 연출보다, 상세 페이지로 갔다가 다시 돌아오는 흐름과 랜딩 재진입 제어 같은 부분에서 더 많은 프론트엔드 판단이 필요했다. 화면 효과보다 상태와 흐름 설계가 더 어려웠고, 그래서 더 많이 배웠다.

아쉬웠던 점과 다음에 보완하고 싶은 점

지금 다시 이 작업을 확장한다면 아래 영역을 더 보강하고 싶다.

접근성 기준을 더 일찍 반영하기
콘텐츠를 코드 하드코딩보다 관리 가능한 형태로 분리하기
공통 컴포넌트 추상화를 조금 더 체계적으로 가져가기
메인 인터랙션에 대한 모바일 UX 최적화 범위를 더 넓히기

당시에는 브랜드 인상과 화면 구현에 집중했다면, 다음에는 운영성과 확장성까지 조금 더 앞단에서 설계할 수 있을 것 같다.

마무리

더헤르츠 작업은 눈에 보이는 결과만 보면 브랜드 사이트 프론트엔드지만, 실제로는 “브랜드 인상”, “정보 구조”, “탐색 흐름”을 한 번에 다뤄야 했던 프로젝트였다. 메인 랜딩의 인터랙션, 사업 영역의 분리, 리더와 공간 소개 페이지, 랜딩 재진입 제어와 복귀 흐름 같은 디테일을 직접 구현하면서, 프론트엔드가 단순한 화면 제작이 아니라 사용자 경험의 구조를 설계하는 일이라는 걸 다시 확인했다.

포트폴리오 관점에서도 이 프로젝트는 내가 단순 페이지 퍼블리싱이 아니라, 실제 서비스 흐름과 상태를 고려한 프론트엔드 구현을 할 수 있다는 점을 보여주는 작업물로 남아 있다.

# 더헤르츠 브랜드 사이트 프론트엔드 개발기: 원페이지 인터랙션과 사업 소개 구조를 함께 설계하기