왜 우리 웹사이트는 운영체제처럼 보일까

• 많은 대형 기술 웹사이트들은 여러 페이지를 동시에 참고하려면 탭 폭주 문제가 발생함
• PostHog.com 역시 유사한 문제를 겪었으며, 이를 해결하고자 운영체제 스타일 UI를 도입함
• 새로운 구조에서는 멀티태스킹, 윈도우 스냅핑, 키보드 단축키 등 다양한 상호작용 기능을 제공함
• 시각적 계층과 콘텐츠 분리, JSON 기반 컨텐츠 관리, 고객 데이터베이스 등 기술적 혁신이 적용됨
• 초반엔 낯설었으나 개발 및 사용 경험이 긍정적으로 변화했고, 유연성과 확장성을 확보함

문제의식: 기술 웹사이트의 탭 폭주

• 많은 대규모 기술 웹사이트에서 한 번에 여러 페이지를 참고하려고 할 때 CMD + 클릭으로 새로운 탭을 여러 개 열게 됨
• 동일한 파비콘과 유사한 디자인으로 인해 각 탭을 구분하기 어려움
• PostHog.com도 서비스가 성장하며 동일한 문제를 겪기 시작했으며, 더 많은 유료 제품 지원 및 페이지 증가로 분별력 저하 문제가 심화됨

대안 탐색과 UI 혁신

• 기존 마케팅 및 문서 사이트의 스크롤 위주 인터페이스, 커다란 푸터, 지나친 공백 등에 의문을 가짐
• 무의미한 스크롤 유도 대신 더 나은 콘텐츠 소비 방법 필요성을 인식함
• 이를 해결하기 위해 새로운 PostHog.com에서는 멀티태스킹, 여러 기사 동시 열람, 화면 내 자유로운 이동이 가능하도록 설계함

운영체제처럼 작동하는 사이트

• 새로운 UI는 윈도우 스냅핑, 키보드 단축키, 북마크 앱 등의 기능을 구현
• 브라우저 내 운영체제처럼, 여러 작업을 동시에 수행할 수 있는 경험 제공
• 예시로, 엔지니어 대상 뉴스레터 보기, 데모 비디오 시청, 게임(헤지혹 모드) 실행을 동시에 진행 가능함

초기 적응 및 사용자 반응

• 운영체제 스타일 인터페이스는 초반에 다소 낯선 경험을 줄 수 있음
• 전통적인 브라우저 패턴을 벗어나 뇌가 거부감을 느끼기도 했으나, 반복 사용 시 익숙해지고 긍정적으로 인식하게 됨
• 내부 동료들도 이 새로운 경험에 긍정적 피드백을 보였으며, 기존 방식으로는 돌아가기 어려운 수준에 도달함

구축 과정 및 기술적 하이라이트

• Eli Kinsey와 함께 Typescript, Tailwind 기반으로 UI를 설계 및 개발하며 사이트를 빌드
• 5년치 콘텐츠를 확장성 있게 정리하는 방법을 고안하는 과정에서 여러 기술적 접근을 탐색함

주요 기술 포인트

• 시각 계층과 콘텐츠 분리

  • 모든 제품 페이지를 JSON 파일 기반으로 렌더링함
  • JSON이 직접 페이지 레이아웃, 콘텐츠 전개, 기능별 경쟁사 비교, 다양한 테마(라이트/다크 모드) 스크린샷을 제어함
  • 장기적으로는 이 구조를 PostHog 앱과 공유하는 레포지토리로 이전하여 단일 정보 소스화 계획함

• 테마와 색상 스키닝

  • 라이트 및 다크 모드를 유지하며, 주요/보조/3차 색상 등 다양한 테마를 조화롭게 적용하는 방법을 고민함
  • 이에 대한 경험을 추후에 별도 글로 공유 예정임

• 레퍼런스 고객 데이터베이스

  • 코드 내 단일 고객 레코드를 정의하여, 제품별 사용 현황, 고객 인용문, SVG 로고(라이트/다크 모드 대응) 정보를 저장함
  • 페이지별로 각기 다른 제품과 연관된 인용문, 이름, 사진, 회사 로고를 자동으로 불러올 수 있어 유연성 확보함

개발 방식 및 프로토타이핑

• Typescript와 Tailwind로 UI를 구현하며, 사이트 설계와 개발을 동시에 진행
• 새로운 아이디어 도출 및 기능 확장이 용이한 프로덕션 환경 내 프로토타이핑 방식 선택
• 필요에 따라 Balsamiq 등 외부 목업 툴을 병행하여, 컨셉을 구체화함

결론 및 향후 개선 방향

• 현재는 초반 MVP 단계에 해당하며, 앞으로도 다수 개선이 필요한 상황임
• 사용자에게 PostHog.com의 새로운 UX를 즐기며, 사이트 탐색과 함께 재미를 느끼길 기대함
• 사이트 작동 원리에 대한 기술 문서는 별도로 제공함