▲

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

 (posthog.com)
1P by GN⁺ 2일전 | ★ favorite | 댓글 1개
  • 많은 대형 기술 웹사이트들은 여러 페이지를 동시에 참고하려면 탭 폭주 문제가 발생함
  • 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를 즐기며, 사이트 탐색과 함께 재미를 느끼길 기대함
  • 사이트 작동 원리에 대한 기술 문서는 별도로 제공함
▲
GN⁺ 2일전  [-]
Hacker News 의견

  • 왜 이렇게 기존 디자인들과 비교해서 이례적으로 매력적으로 느껴지는지에 대해선 심리학자나 인지과학자, 혹은 신경과학자가 대답할 수 있을 것 같음, 지금 우리가 소프트웨어 업계에서 서둘러 작성하는 블로그 글보다는 더 심도 있는 연구가 필요하다고 생각함
    개인적으로 한 가지는 경험적으로 이야기할 수 있음, 나는 대형 SaaS 제품을 위한 웹사이트와 전략을 만드는 회사에서 일해봤고, 이런 사이트의 목표 타겟(엔지니어링 디렉터나 VP)임
    잠재 고객 입장에서 원하는 정보를 탐색하는 속도와 편리함이 지금까지 본 것들보다 확실히 뛰어남
    예를 들어, 7개 카테고리 아래에 34개 제품이 있음을 바로 확인 가능했고, 인기 많은 제품 5개, 신규 4개가 즉시 보임
    만약 제품을 체험하고 싶으면: Docs > Product OS > Integration > Install and configure > Install PostHog
    엔지니어링 문화가 궁금하면: Company > Handbook > Engineering > Internal Processes > Bug prioritization
    가격 확인은: Pricing calculator > 제품 선택 > 사용량 설정, 부가 기능 선택
    이 모든 상호작용이 몇 초 만에 일어남, 그리고 이미 열어둔 개요 페이지와 새로 연 가격 페이지를 웹사이트 전체 재로딩 없이 바로 전환 가능, 굳이 새 탭에서 열거나 스크롤할 필요 없음
    그래서 단순히 미적인 부분을 넘어서 무언가 본질적인 내용이 여기에 있다고 생각함, 아마 현재의 UI/UX 철학이 오히려 사용자에게 불친절해진 건 아닐까라는 결론이 나올 수도 있음

    • Cory와 Eli(프론트엔드 엔지니어)가 웹사이트 디자인에 대해 ‘왜 모든 웹사이트가 길고 스크롤이 긴 페이지로 이루어져 있을까, 이게 우리 비즈니스에 적합한가?’라는 주제로 토론한 기억이 있음
      우리가 다양한 제품과 폭넓은 컨텐츠(10개 이상의 제품, 핸드북, 채용, 뉴스레터 등)를 제공하다 보니, 1개 제품 회사에 적합한 플랫한 구조가 적합하지 않다는 결론을 내림
      대부분의 웹사이트가 3초 안에 자사의 모든 내용을 전달하려고 하는데, 우리 회사는 3초 소개에 담기엔 너무 다각적임, 그래서 일부러 사람들이 웹사이트를 탐험하고 내용을 더 깊이 이해하도록 유도하는 구조로 만듦
      이 때문에 일부 방문자는 금방 이탈하겠지만, 남는 사람들은(가끔은!) 이 UX를 정말 좋아함
      이 프로젝트 자체도 재미있었고, 뭔가 특별한 방식으로 돋보일 수 있어 시도해본 것임
      전통적인 외부 영업보다 훨씬 멋지고 비용 효율적임
      스타트업 지표로 3개월 CAC 회수기간으로 운영 중임
      단, 이런 전략이 제대로 통하려면 "정말" 깊이 있게 다뤄야 사람들의 기억에 남는다는 전제가 필요함

    • 이런 입장을 HN에서 볼 줄 몰랐음
      보통 HN에서는 JavaScript를 많이 사용하면 나쁜 디자인이다, 사용 불가능하고 이식성 떨어진다, 이런 인식이 압도적임
      이번 사례는 말하자면 JavaScript 극대화 버전임

    • 필요한 정보를 빠르고 쉽게 찾을 수 있다는 점, 정말 웹이 과거의 메뉴 중심 설계로 다시 돌아간 느낌임
      요즘 최신 UI들은 단순함과 "즐거운 경험"을 내세우지만, 잘 구성된 메뉴바의 효율성을 따라가기 힘듦

    • 이런 인터페이스에서 느끼는 쾌적함을 일반화하는 건 조심해야 함
      CLI나 커맨드 팔레트에 비해 이 UI는 부담되고 인지적으로 피곤하게 느껴짐

    • 내 기억이 맞다면, 이 회사는 모든 컨텐츠를 같은 CMS에 넣었음, 특히 토론/도움말 포럼을 메인 사이트에 통합함
      과거에 비슷한 프로젝트를 했던 경험상, 프론트 페이지의 모든 컨텐츠가 한 조직이 주도권을 쥐고 통제하는 느낌이 남, 부서 간의 자리다툼이나 여러 서브도메인 링크가 어지럽게 있는 흔적이 없음
      이런 사이트는 백엔드에 컨텐츠 통합시스템(CMS)이 있어야만 만들 수 있다고 생각함
      그리고 조직 차원에서 분권화(각 VP가 자기 땅을 챙기는 식)로 흘러가려는 경향에 강하게 저항해야 이런 CMS 구조가 가능함

  • PostHog.com은 서드파티 쿠키 없이 내부 쿠키 하나만 사용한다고 하는데,
    법적으로 그 쿠키가 사이트 핵심 기능에 필수적이지 않으면 옵트 아웃(거부) 옵션을 제공해야 함
    만약 핵심 기능에 필요하다면 배너 자체가 필요 없음

    • 실제로 쿠키를 필수 기능에만 쓴다면, 이런 농담성 쿠키 배너는 방문자 프라이버시를 존중하는 척하면서 오히려 불필요하게 짜증 유발함
      더 나쁜 것은, EU 법이 실질적인 의미 없는 귀찮은 규제로만 보이게 만들어서, 진짜로 사용자를 감시하는 사이트들에게 더 나쁜 권리를 부여하는 결과임
      정말 어이없음

    • 쿠키 배너가 필요한 기준이 더 간단한 것 같음
      쿠키가 트래킹 목적으로 사용되지 않으면 배너가 필요 없는 구조임
      예를 들어, 정렬 순서를 기억하는 쿠키처럼 트래킹 목적이 아닌 것은 배너가 필요 없다고 생각함
      결국 핵심은 "쿠키"가 아니라 "트래킹"이 이슈라는 점임

    • 어느 국가가 모든 쿠키에 대해 쿠키 배너를 강제하는지 궁금함
      EU는 트래킹용 쿠키에만 의무화했고, PostHog는 그 목적을 명시하지 않음
      나도 직접 쿠키가 없어도 "필수라니까" 넣어본 적 있음
      모든 사이트에 쿠키 배너가 있어야 한다는 인식이 실제로는 배너보다 더 해로울 수도 있음

    • 로그인 시스템이 있으니 내부 쿠키에 로그인 정보(JWT 등)가 담겨 있을 확률이 높음
      이 경우 쿠키는 핵심 기능용 쿠키이므로 배너가 필요 없음
      즉, 법적으로 필요한 건 아니지만, 배너가 없으면 누군가 "왜 쿠키 배너 없어요?"라고 할까봐 그냥 넣었음을 유추할 수 있음
      결국 실질적 법적 의무는 없고, 관행상/인지상 필요 수준임

    • 2025년이 됐는데 아직도 쿠키를 눈으로 보고 거부하고 싶어하는 이유가 궁금함
      그냥 브라우저가 자동으로 해주면 되지 않나 생각함

  • https://posthog.com/404 페이지가 블루스크린 오브 데스 패러디임

  • 예전에 '멀티 도큐먼트 인터페이스(MDI)'가 안티패턴이라는 생각을 항상 가짐
    이미 완벽한 윈도 매니저가 있는데 왜 앱마다 자체 내장 창 관리툴이 필요한가?
    물론 모바일에서는 이런 운영체제 수준 윈도 매니저가 없으니 예외임

    • 일부 앱(예: 이미지 편집기)은 애플리케이션 내에서 여러 창이 필요함
      하지만 거의 모든 범용 MDI 구현(Win32, Qt)은 너무 미니멀해서 실망임
      Krita에서는 여러 윈도우를 띄우고 싶은데 Qt의 MDI는 Windows 95 보다 못함

    • Gimp 같은 앱과 비교하면 나는 오히려 하나의 창 안에 다 들어있는 구조가 더 좋음
      두세 개 앱이 동시에 열리면 창 찾기가 숨바꼭질임
      툴바가 별도 창으로 노출되는 것을 정말 싫어함

    • 맥을 오래 쓴 입장에서는 MDI가 OS가 애플리케이션 단위 윈도 매니징 기능이 부족해서 생긴 임시방편이라고 느껴짐
      예전 포토샵은 맥에서 윈도와 팔레트를 자유롭게 띄웠다가 CS4 즈음 MDI 타입이 도입, 갑자기 갑갑해져서 항상 꺼버림
      맥에서만큼은 너무 낯설고 답답하게 느껴짐

    • 유닉스의 대부분의 명령어는 출력 포맷에 각자만의 방식이 있음(컬럼, 테이블, 목록, 파일, TTY 등)
      UNIX 추상화는 결국 "텍스트" 중심 구조임
      하지만 에코시스템이 풍부하다 보니 각 툴마다 다양한 요구사항이 있음
      만약 텍스트 위 외에 적합한 추상화가 가능했다면 이미 나왔겠지만 결국 다 텍스트 파이프라인임

    • OS의 윈도 매니저들은 한 스크린에 여러 개의 작은 창이 있을 때 효율적으로 다루지 못하는 것 같음
      반면, 아트 소프트웨어나 CAD 소프트웨어의 커스텀 창 관리툴은 작은 타이틀바로 공간을 아껴쓰게 최적화된 게 많음

  • 거의 완벽하고 영감을 주는 프로젝트라고 생각함
    실제 OS의 데스크탑처럼 아무것도 없는 부분을 드래그하면 네모 상자가 생겨서 움직일 수 있으면 더 좋았을텐데,
    그걸 가능하게 해주는 코드 스니펫을 직접 만들어 보았으니 콘솔에 붙여넣고 체험해보면 꿈이 실현됨
    (코드: 마우스 드래그로 화면에 selection rect를 표시하는 JS, 콘솔로 결과 출력)

  • 아이디어도, 구현도 멋지지만 솔직히 원치 않음
    새 UI/UX를 새로 배워야 하고, 또 창 안에 창을 정리해야 함
    웹사이트는 멋들어진 인터페이스보단 그냥 텍스트 블록이면 충분하다고 생각함

    • 정말 공감함
      이미 내 운영체제가 윈도우 관리를 완벽히 하게끔 세팅해 둠

    • 만약 이 페이지의 모든 컨텐츠를 하나의 블록 텍스트로 만들어야 한다면 그야말로 무지막지하게 길어진다고 상상해보면 좋을 듯함

  • 뭐라고 표현해야 할지 어려운데, 정말 멋진 작업임
    수년간 웹 개발에 몸 담으면서 나쁜 UI에 항상 불만이 많았는데, 이번 웹사이트는 정말 뛰어남
    단순히 ‘윈도우스 닮은꼴’ 만이 아니라, 실제로 사용감이 지금까지 해본 브라우저 기반 데스크탑 시뮬레이터 사이트 중 제일 좋았음
    한 가지 아쉬운 점이라면, 배경을 우클릭했을 때 뜨는 컨텍스트 메뉴에 "새로고침" 항목이 있었으면 브라우저 데스크탑 느낌이 완벽했을 것임(실행은 필요 없지만 감성적으로 완성됨)
    요컨대: 멋진 작업, 멋진 사이트임

    • 요청해줘서 고맙고, "새로고침" 버튼 고민해보겠음

  • 비주얼적으로 멋은 있지만 성능이 너무 느림
    창 몇 개를 띄우고 움직여보면 답답함
    이런 멀티 윈도우 웹페이지를 만들려면 성능도 좋아야 함
    예전에는 SEO 때문에 절대 이런 구조를 쓰지 않았음
    지금은 SEO 중요성도 옛말이 되어가는 느낌임

    • Firefox에서 느린 현상 경험했음
      Edge 브라우저로 들어가니까 부드럽게 동작함

    • 어떤 환경에서 성능 문제를 겪는지 궁금함
      첫 번째 창까지는 잘 되다가 두 번째 창부터 약간 끊기고, 이후엔 풀 속도임
      아마 브라우저가 특정 함수들 사용을 감지하면 최적화 루틴을 좀 늦게 적용해서 그런 듯함

    • 예전 SEO는 ‘문서’로서의 웹페이지였는데, 이제는 다들 웹을 게임으로 만드려는 추세로 보임
      게임류의 웹사이트는 랭킹 매기기도 어렵지 않을까 생각함

  • 이 웹사이트가 너무 참신해서 정말 좋음
    똑같은 섹션 스택 템플릿 쓰는 SaaS 마케팅 사이트 천국 속에서 두드러짐
    하지만 실제로 위에서 설명하는 방식대로 사용하는 사람은 없을 것임
    사이트 전용 창 관리 기능을 따로 익혀서 써줄 만큼 누구도 오래 머물지 않는다고 봄

    • 나는 오히려 UX가 직관적으로 느껴졌음
      게다가 재미도 있음
      평소 이런 제품 사이트는 바로 닫는데, 이번엔 5~10분 이상 둘러보면서 뭐가 있나 샅샅이 구경했음

    • 나도 마찬가지로 신기하게 느꼈음
      하지만 HN 댓글 대부분은 좀 못마땅해하는 것 같음

    • 내 반응도 비슷했음
      인상적이고 재미있으며 회사 철학을 잘 보여주는 느낌임
      실제로 쓰기엔 실용성이 떨어지지만, 그게 중요한 문제는 아니라고 생각함

  • PostHog와 일하면서 분석량이 내 윤리 기준엔 안 맞아서 불편했지만, 기술적으로는 정말 잘 만듦
    랜딩 페이지가 제품 자체에 적용된 기술력과 수준을 잘 보여줌
    참신하고 즐거운 랜딩 페이지였고, "쿠키 배너" 농담도 웃음이 나옴

답변달기