Miro 대신 PostItUp으로 회고 시간을 아껴보세요!

PostItUp은 차가운 SaaS 대시보드 디자인 대신 실제 코르크보드와 포스트잇의 질감을 살린 디자인을 채택했다. 이는 사용자의 심리적 장벽을 낮추고 솔직한 피드백을 유도하기 위함이다. 실제 포스트잇처럼 일회용의 가벼운 느낌을 주어 자유로운 아이디어 개진을 장려하며, 새로운 시각적 경험을 통해 기존 협업 도구에 대한 무뎌짐을 방지하는 효과를 노렸다. 손글씨 폰트와 흔들리는 테두리는 이러한 의도를 강화하는 요소로 작용한다.

개발자는 자유로운 배치(Free Canvas), 그리드 스냅(Grid Mode), 줄노트(Ruled Lines) 세 가지 캔버스 모드를 제공하여 다양한 사용자 요구사항을 충족시키고자 했다. 초기에는 자유 배치 모드만 고려했으나, 사용자들이 노트 배치의 어려움을 느끼는 것을 관찰하고 그리드 모드를 추가했다. 줄노트 모드는 순차적 피드백이나 순서가 있는 목록 수집에 적합하도록 설계되었다. 이는 사용자 관찰을 통한 기능 개선의 중요성을 보여주는 사례이며, 단일 솔루션이 아닌 다양한 사용 맥락을 고려한 유연성을 확보하는 데 중점을 두었다.

PostItUp은 Supabase Realtime을 활용하여 WebSocket 기반의 실시간 동기화 기능을 구현했다. 개발자는 특정 테이블의 변경 이벤트를 구독하고, 데이터 변경 시 클라이언트에 즉시 페이로드를 전달받는다. 낙관적 업데이트(Optimistic Update) 기법을 사용하여 사용자가 노트를 작성하면 즉시 화면에 반영하고, 이후 실시간 이벤트로 동기화하여 지연 없는 사용자 경험을 제공한다. 중복 노트 삽입 방지를 위한 INSERT 핸들러의 존재 유무 확인 로직은 안정적인 실시간 업데이트를 보장하는 핵심 요소다.

PostItUp은 iframe, 스크립트 태그, React 컴포넌트 등 다양한 임베딩 옵션을 제공하여 개발자 편의성을 극대화했다. 특히 스크립트 태그 방식은 별도 프레임워크 없이 정적 페이지에도 쉽게 통합 가능하며, 사용자가 클릭할 때만 로드되어 성능 부하가 거의 없다. 향후 제공될 React 컴포넌트는 SSR 호환성 및 테마 프로퍼티를 지원하여 기존 애플리케이션과의 이질감을 최소화할 예정이다. 이는 개발 생산성 향상과 쉬운 통합을 목표로 하는 설계 철학을 반영한다.

노트 드래그 시 위치 저장 오류는 React의 비동기 상태 업데이트로 인한 Stale Closure 문제가 원인이었다. 마우스 이벤트 핸들러가 생성될 당시의 상태 스냅샷을 참조하여 최신 위치가 반영되지 않았다. 이 문제를 해결하기 위해 실시간 위치 정보를 useRef에 저장하고, 마우스 이동 시마다 ref를 업데이트하여 `mouseup` 이벤트에서 항상 최신 상태 값을 참조하도록 수정했다. 이는 React의 상태 관리 특성을 이해하고 mutable ref를 활용하여 동시성 문제를 해결한 좋은 사례다.

PostItUp은 Postgres Row Level Security (RLS)를 엄격하게 적용하여 데이터 접근을 제어하고, GDPR 규정 준수를 위한 데이터 내보내기 및 삭제 기능을 기본 내장했다. 특히 업보트(Upvote) 기능 구현 시 무한 재귀 호출 오류를 방지하기 위해 SECURITY DEFINER 함수를 사용하여 데이터베이스 레벨에서 원자적이고 안전한 업데이트 로직을 구축했다. 이는 클라이언트 측 조작을 원천 차단하고 데이터 무결성을 보장하는 효과적인 방법이다. 익명 사용자 투표는 로컬 스토리지의 랜덤 지문(fingerprint)으로 추적하여 개인 식별 정보를 데이터베이스에 저장하지 않는다.