POLABO2 [POLABO] 온보딩 튜토리얼 공통 컴포넌트 만들기 목차1. 프롤로그2. UI 설계: div에 구멍을 뚫을 수는 없나?3. 유연한 공통 컴포넌트를 위한 Compound component 패턴4. 여러 페이지에서 독립적인 상태 관리하기5. 마치면서1. 프롤로그1.1. Polabo에서 튜토리얼을 도입하게 된 배경서비스를 사용할 때 제작자가 의도한 flow대로 기능을 사용하게 하려면, 사용자가 UX를 직관적으로 이해할 수 있어야 한다. 하지만 우리가 아무리 쉽게 만들었다고 해도, 사용자들이 우리 의도대로 모든 기능을 꼼꼼히 써주는 경우는 드물다.Polabo 프로젝트에서도 유저 반응 테스트를 진행한 결과, 예상과 달리 많은 사용자가 특정 기능의 존재조차 모르는 경우가 있었다. 예를 들어, 폴라로이드 사진을 클릭하면 크게 볼 수 있는 기능이 있는데, 이를 알지 못.. 2024. 12. 22. 폴라보는 이미지를 이렇게 최적화합니다. 서비스 소개 폴라보는 DDD 웹 1팀에서 진행하고 있는 프로젝트로, 친구 혹은 연인들끼리 "보드"를 만들어 폴라로이드를 붙이면서 보드를 꾸미고 추억을 공유하는 서비스입니다. 제가 이미지 관련된 기능 개발을 담당하게 되면서, 어떤 식으로 이미지를 최적화했는지 소개해보려고 합니다. 이미지 압축을 통한 로딩 시간 개선1. browser-image-compression압축 없이 이미지를 업로드하면서 보드에서 폴라로이드 사진을 로딩하는 시간이 너무 오래 걸리는 문제가 있었습니다. 이를 해결하기 위해 S3에 이미지를 업로드하기 전에 먼저 압축하는 방법을 선택했고, 이 과정에서 browser-image-compression이라는 라이브러리를 사용했습니다.const file = event.target.files[0].. 2024. 8. 28. 이전 1 다음
