피드로 돌아가기
Three-Week Sprint: New Homepage, Dark Mode, and Operations Dashboard
Dev.toDev.to
Frontend

Three-Week Sprint: New Homepage, Dark Mode, and Operations Dashboard

PSRESTful이 3주간 158개 커밋으로 홈페이지 완전 재설계, 사이트 전역 다크모드, 구매발주 관리 대시보드 구현

PSRESTful2026년 3월 24일6intermediate

Context

기존 홈페이지는 현재 제품 상태를 제대로 반영하지 못했으며, 사용자들이 다크모드 지원을 요구했고, 구매발주 업무를 관리할 수 있는 기능이 없었다.

Technical Solution

  • 홈페이지 UI 재설계: 다크 그래디언트 히어로 섹션, 재구성된 레이아웃, 기능 그리드 업데이트, 가격 카드 리프레시, 신규 Business 플랜 추가
  • 사이트 전역 다크모드 구현: 모든 페이지, 컴포넌트, 폼, 데이터 테이블에 대해 별도의 다크/라이트 템플릿 변형 설계 (CSS 필터 대신 각 뷰마다 개별 디자인)
  • Operations Dashboard에 역할 기반 접근 제어 추가: 팀원별로 발주서 열람, 생성, 승인 권한 세분화
  • 주요 기능별 전용 랜딩페이지 구성: Brand List & Detail, Supplier Detail, Discount Codes, Broken Links Checker, Media Downloader, Supplier Magento/Shopify 통합 페이지
  • 색상 정규화 엔진 구현: 공급자별 일관성 없는 색상 표현(Royal, Royal Blue, RoyalBlue, #4169E1)을 정규 색상으로 매핑하고 자동 매칭
  • Web Service Validator 기능 확장: psdomain 모델 파싱, Protobuf 지원, 툴팁, 토스트 알림, 클립보드 복사 기능, 공급자 이미지 URL 미디어 정규화

Key Takeaway

대규모 UI 재설계 시 다크모드를 CSS 필터 대신 각 뷰마다 별도로 설계하면 사용자 경험의 일관성을 보장할 수 있으며, 도메인 문제(색상 정규화)를 전용 엔진으로 해결하면 데이터 품질과 검색 정확도를 동시에 개선할 수 있다.


B2B SaaS 플랫폼에서 구매발주 관리 기능을 추가할 때 역할 기반 접근 제어를 처음부터 Dashboard에 내장하면 팀 협업 시 권한 충돌 없이 각 사용자가 필요한 작업만 수행하도록 강제할 수 있다. 또한 공급자 데이터의 정규화 전용 엔진을 별도로 구축하면 입력 방식 차이로 인한 중복 데이터를 자동 제거해 검색 정확도를 높일 수 있다.

원문 읽기
Three-Week Sprint: New Homepage, Dark Mode, and Operations Dashboard | Devpick