UX/UI References Platform
Dnas
디자인나스는 전 세계 UX/UI 레퍼런스를 체계적으로 탐색할 수 있도록 설계된 구독 기반의 웹 서비스예요. 최신 트렌드를 반영한 다양한 디자인 사례를 효율적으로 수집, 저장, 제공하며, 사용자가 필요한 정보를 직관적으로 찾을 수 있도록 최적화된 환경을 제공합니다.
UX/UI 레퍼런스 사이트의 특성상 대량의 고해상도 이미지를 처리해야 하기 때문에, 고성능 이미지 최적화 기술이 필수적이며, 이를 통해 쾌적한 사용자 경험을 제공하고 있어요.
Client:
디자인나스
Year:
2024
Stack & Tools :
Next.js, JavaScript, Supabase, PostgreSQL, Portone Browser SDK 등
사용자 경험을 극대화하기 위해 다양한 이미지 최적화 기술을 적용했어요. 이미지가 로딩될 때 스켈레톤 애니메이션을 제공해 시각적 일관성을 유지하고, 반응형 이미지 처리를 통해 다양한 디바이스에서도 최적의 크기로 표시되도록 설정했어요. 특히, Next.js의 이미지 최적화 기능(WebP 변환, Lazy Loading, CDN 기반 캐싱 등)을 적극 활용하여 로딩 속도를 단축하고 네트워크 사용량을 최소화했어요.
더불어, React Query 기반의 데이터 캐싱 및 페이지네이션 로직을 구현하여 대량의 이미지를 효율적으로 로드할 수 있었고, 무한 스크롤을 적용해 사용자가 끊김 없이 레퍼런스를 탐색할 수 있도록 구현했는데요, 사용자는 원하는 레퍼런스를 개별 다운로드할 수도 있으며, 여러 개를 선택하면 ZIP 파일로 압축되어 빠르게 다운로드 할 수 있어요.
디자인나스는 구독 결제 시스템을 통해 사용자별 접근 권한을 세분화했어요. 무료 사용자는 정해진 개수의 레퍼런스만 확인할 수 있지만, 유료 구독자는 모든 레퍼런스를 무제한으로 열람 및 다운로드할 수 있습니다. 결제는 Portone Browser SDK를 활용하여 PayPal 및 TossPayments를 지원하며, 결제 내역 조회 및 자동 갱신 관리 기능도 제공해요.
