개발자
React와 같은 CSR에서 데이터 로딩 중 화면 구성 보통 어떤식으로 하시나요?
기본값을 지정해서 보여주자니 뭔가 기본값이 있는 화면이 띄워져 있다가 데이터를 불러온 후 화면이 전환되는듯한 느낌을 주면 사용성이 안좋을거같아서.. Skeleton을 띄우는게 제일 무난할거같긴한데.. 보통 어떤식으로 사용하시나요??
답변 1
네, 말씀하신 것처럼 보통은 스켈레톤이나 로딩 스피너를 많이 사용합니다. 사용자 경험을 좀 더 높이고 싶다면 시나리오에 따라서 로딩 전략을 좀 더 다양하게 가져갈 수도 있습니다. 제가 예전에 썼던 글 중에 사용자 경험을 높여줄 로딩 UX 패턴(https://careerly.co.kr/comments/89559) 이라는 글을 참고해보시면 좋을 것 같습니다. 실용적인 레퍼런스가 필요하시면 Ant Design 같은 오픈소스를 참고해보시는 것도 좋습니다. 저는 Ant Design의 테이블 컴포넌트(https://ant.design/components/table)가 사용자 경험을 높인 로딩의 좋은 예시라고 생각합니다. 테이블 컴포넌트에 오버레이 + 스피너를 적용해서 직관적이고 스무스한 로딩을 구현했었던 점이 기억에 남네요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 10월 17일
대부분의 React.js 개발자들은 보통 스켈레톤 화면(Skeleton Screen)을 사용하여 사용자가 데이터 로딩 동안 응답하도록 만듭니다. 이 방법은 페이스북, 유튜브 등 많은 곳에서 적용하는 전략입니다. 스켈레톤 화면의 장점은, 데이터가 아직 로드되지 않았어도 사용자는 애플리케이션이 작동 중인 것처럼 느끼기 때문에 UX를 향상시켜줍니다. 또한, 컴포넌트별로 스켈레톤 화면을 따로 지정하거나, 전체 페이지에 대한 스켈레톤 화면을 설정할 수 있습니다. React에서는 react-loading-skeleton이나 react-content-loader와 같은 외부 패키지를 이용해 손쉽게 구현할 수 있습니다. 그러나 항상 기억해야 할 점은 어느 방식을 선택하든 사용성과 성능을 고려하여 결정해야 한다는 것입니다. 모든 상황에 최적화된 방법이라고 단정짓기는 어렵습니다. 각 프로젝트의 목적과 요구사항에 따라 가장 적합한 방법을 선택하는 것이 중요합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!