브라우저 위젯을 사이트에 넣을 때 과해지지 않는 원칙
사이트에 작은 위젯을 넣으면 화면이 살아 있는 느낌을 줍니다. 라디오, 방문자 수, 최근 댓글, 인기 글, 시장 지표 같은 요소는 사이트가 정적인 문서 묶음이 아니라 운영 중인 제품처럼 보이게 합니다. 문제는 위젯이 많아질수록 본문보다 더 큰 존재감을 갖기 쉽다는 점입니다.
위젯은 주인공이 아니다
블로그 글을 읽는 화면에서 주인공은 본문입니다. 위젯은 탐색을 돕거나 부가 상태를 알려주는 역할이어야 합니다. 따라서 위치는 반복 영역, 사이드바, 푸터처럼 본문 흐름을 끊지 않는 곳이 좋습니다. 특히 모바일에서는 위젯이 본문보다 먼저 나오면 읽기 경험을 망칩니다.
라디오처럼 지속 상태가 있는 위젯은 더 조심해야 합니다. 페이지 이동 중에도 유지되어야 하므로 본문 안에 넣기보다 전역 영역에 두는 것이 맞습니다. 반대로 글별 댓글이나 인기 글은 해당 화면의 맥락에 묶여도 됩니다.
실패를 격리한다
위젯은 외부 API, 오디오 스트림, 통계 조회처럼 실패 가능성이 높은 기능을 자주 포함합니다. 따라서 위젯이 실패해도 본문, 내비게이션, 관리자 기능은 살아 있어야 합니다. 차트 로딩 실패가 글 목록을 죽이거나, 라디오 초기화 실패가 페이지 이동을 막으면 안 됩니다.
구현에서는 각 위젯을 독립적으로 초기화하고, 실패 시 empty state를 보여주는 편이 좋습니다. 한 화면의 모든 데이터를 하나의 요청에 묶으면 일부 실패가 전체 실패가 됩니다.
밀도와 반복을 관리한다
위젯은 한 번 볼 때는 좋아 보여도 모든 페이지에서 반복되면 피로해집니다. 그래서 크기, 텍스트 길이, 애니메이션, 업데이트 빈도를 제한해야 합니다. 사용자가 글을 읽는 동안 계속 시선을 빼앗는 위젯은 기능이 아니라 방해입니다.
좋은 위젯 설계는 기능을 숨기는 것이 아니라 역할을 제한하는 것입니다. 필요한 정보를 작은 면적으로 제공하고, 실패해도 조용히 물러나며, 본문보다 앞서지 않게 만드는 것이 핵심입니다.
실제 적용 메모
이 사이트에 실제로 들어간 위젯은 라디오 dock, 관리자 패널, 방문자 그래프, 인기 글 차트입니다. 각각 실패 가능성이 다릅니다.
라디오 dock: 외부 스트림 실패 가능
방문자 그래프: D1 조회 또는 차트 렌더 실패 가능
인기 글 차트: 데이터 없음 가능
관리자 패널: 세션 만료 가능처음에는 차트 데이터가 죽으면 주변 패널까지 같이 죽는 문제가 있었습니다. 이후 각 패널을 renderPanel로 감싸고, 방문자 그래프는 별도 조회로 분리했습니다. 라디오도 PJAX 이동 후 refresh를 다시 호출하게 했습니다.
위젯을 넣을 때 핵심은 “있으면 좋은 기능”을 넣는 것이 아니라 실패해도 본문이 살아 있게 만드는 것입니다. 위젯은 사이트를 풍부하게 만들 수 있지만, 본문보다 강한 의존성이 되면 안 됩니다.
아직 댓글이 없습니다.