HardWireAI: 하드웨어 솔루션 랜딩 페이지 제작기

최근 포트폴리오용 프로젝트를 만들면서 또 하나의 생각이 들었다.

단순히 예쁜 웹사이트를 만드는 것과,

제품의 정체성을 제대로 전달하는 웹사이트를 만드는 건 완전히 다른 문제 아닐까?

이번에 만든 프로젝트는 HardWireAI라는 하드웨어 설계 관련 웹사이트였다.

핵심은 간단했다.

복잡한 하드웨어 설계 개념을

어떻게 하면 더 직관적이고, 더 믿음직하고, 더 매력적으로 보여줄 수 있을까?

타겟 사용자는 하드웨어 엔지니어와 디바이스 제조사였다.

그러다 보니 그냥 트렌디하고 예쁜 사이트를 만드는 것만으로는 부족했다.

사이트를 보는 순간 “오… 이거 꽤 정밀하게 만든 서비스 같은데?”라는 느낌이 들어야 했다.

그래서 나는 웹사이트 자체를 하나의 정밀하게 가공된 제품처럼 보이게 만들고 싶었다.

약간 알루미늄 바디의 하이엔드 장비 같은 느낌?

그런 인상을 웹 안에 담아보고 싶었다.

하이테크 다크 모드로 방향을 잡다

먼저 전체적인 디자인 톤은 딥 블랙과 쿨 그레이를 기반으로 잡았다.

처음부터 밝고 친근한 느낌보다는,

어둡고 차갑지만 전문적인 느낌을 주고 싶었다.

뭔가 연구실 장비 같고,

고급 개발자 툴 같고,

하드웨어 엔지니어가 봤을 때 신뢰가 가는 그런 분위기.

그래서 전체 사이트는 하이테크 다크 모드로 구성했다.

여기에 Tailwind CSS v4를 활용해서 글래스모피즘 효과도 넣었다.

얇은 보더, 깊이 있는 backdrop-blur, 은은한 투명도 조절을 사용해서

각 요소들이 화면 위에 살짝 떠 있는 듯한 느낌을 만들었다.

이게 생각보다 분위기를 확 바꿔줬다.

그냥 어두운 배경에 카드 몇 개 올린 사이트가 아니라,

뭔가 레이어가 쌓여 있고, 공간감이 있는 인터페이스처럼 보이기 시작했다.

그리고 브랜드 정체성을 더 살리기 위해 SVG Path 애니메이션도 사용했다.

마이크로칩을 연상시키는 심볼을 배치하고,

선이 그려지는 듯한 애니메이션을 넣어 하드웨어 느낌을 강조했다.

이런 작은 디테일들이 모이니까

사이트가 점점 HardWireAI라는 이름에 어울리는 분위기를 갖춰가기 시작했다.

패럴랙스 배경으로 공간감을 만들다

처음 화면을 만들었을 때는 뭔가 괜찮긴 한데,

조금 평면적이라는 느낌이 있었다.

그래서 배경에도 움직임을 넣어보기로 했다.

다중 레이어로 구성된 패럴랙스 배경을 만들고,

스크롤에 따라 각 레이어가 조금씩 다르게 움직이도록 했다.

이걸 넣고 나니까 화면에 깊이감이 생겼다.

그냥 위아래로 스크롤되는 페이지가 아니라,

사용자가 어떤 공간 안을 지나가는 듯한 느낌이 났다.

물론 이런 효과는 과하면 바로 촌스러워질 수 있어서 조심해야 했다.

그래서 최대한 은은하게,

하지만 느껴질 정도로만 조정했다.

이런 거 하다 보면 진짜 애매하다.

너무 약하면 아무도 모르고,

너무 강하면 갑자기 2010년대 플래시 사이트가 된다. ㅋㅋ

보기 좋은 사이트에서 끝내고 싶지는 않았다

그런데 나는 이 사이트를 단순히 보기 좋은 랜딩페이지로만 만들고 싶지는 않았다.

결국 웹사이트의 목적은 사용자를 설득하는 것이다.

그렇다면 사용자가 어디까지 읽고,

어떤 섹션에서 관심을 보이고,

어디에서 이탈하는지 알아야 했다.

그래서 PostHog를 꽤 깊게 붙였다.

단순히 방문자 수만 보는 수준이 아니라,

사용자가 어떤 섹션을 실제로 보고 지나갔는지 추적할 수 있게 만들었다.

예를 들어 사용자가 Comparison 섹션을 봤는지,

Mockup 섹션까지 내려왔는지,

마지막 CTA까지 도달했는지 확인할 수 있도록 퍼널을 구성했다.

여기에는 Framer Motion의 onViewportEnter를 활용했다.

섹션이 화면에 들어오는 순간 이벤트를 기록하게 만든 것이다.

처음에는 “이 정도까지 해야 하나?” 싶었는데,

막상 붙이고 나니까 확실히 다르게 보였다.

이제 사이트는 그냥 감으로 보는 결과물이 아니라,

데이터로 개선할 수 있는 제품이 되었다.

클릭 하나까지 추적해보기

PostHog를 붙인 김에 사용자 인터랙션도 최대한 세밀하게 기록했다.

“Get Lifetime Access” 버튼을 눌렀는지,

“Join Waitlist”를 클릭했는지 같은 핵심 이벤트는 당연히 추적했다.

그런데 거기서 끝내지 않았다.

마스터 프롬프트를 복사했는지,

컴포넌트를 변경했는지,

목업에서 어떤 조합을 선택했는지 같은 작은 행동들도 이벤트로 남겼다.

이런 것들은 당장 보기에는 사소해 보이지만,

나중에 사용자가 어떤 부분에서 흥미를 느끼는지 파악하는 데 꽤 중요하다.

사람들은 말로는 “괜찮네요” 하고 넘어가도,

실제로는 클릭한 곳과 머문 곳에 진짜 관심이 드러난다.

이걸 데이터로 보고 싶었다.

그래서 클라이언트 사이드뿐만 아니라 서버 사이드에서도 이벤트를 기록할 수 있도록 구성했다.

posthog-node를 사용해서 서버에서도 안전하게 이벤트를 캡처할 수 있는 하이브리드 분석 환경을 만들었다.

이쯤 되니까 프론트엔드 프로젝트라기보다는

약간 제품 실험 플랫폼에 가까워졌다.

인터랙티브 목업 최적화하기

이번 프로젝트에서 가장 신경 쓴 부분 중 하나는 인터랙티브 목업이었다.

사용자가 보드, 센서, 액추에이터 같은 구성 요소를 직접 선택하면

그에 따라 결과가 바뀌는 섹션이었다.

말로는 간단해 보이지만,

막상 구현해보니 생각보다 신경 쓸 게 많았다.

상태가 자주 바뀌고,

그에 따라 UI도 계속 움직이고,

애니메이션도 자연스럽게 이어져야 했다.

조금만 최적화가 부족해도 버벅거리거나,

전환이 끊겨 보일 수 있었다.