[ FE ] 우리가 홈페이지를 만들 때 고려해야할 사항은 뭘까?-1

홈페이지를 제작할 때, 고려해야 할 사항은 다양할 것입니다.

하지만 대다수 동의하는 것은 홈페이지 로딩 속도를 더 빠르게 만드는 것입니다.

---

• 사전 렌더링된 페이지는 선택 사항이 아닙니다.
• 사용자 입력에 따라 즉시 조치
• 데이터 변경에 대응
• 서버와의 데이터 교환을 제어합니다.
• 역사를 깨지 말고, 역사를 더욱 발전시키자
• 푸시 코드 업데이트
• 행동을 예측하다

---

 

제 접근 방식은 사용자 경험(UX)의 관점에서만 JavaScript 사용을 검토하는 것입니다  .  특히, 사용자가 관심 있는 데이터를 얻는 데 걸리는 시간을 최소화하는 아이디어에 중점을 두었습니다. 네트워킹 기본 사항부터 미래 예측까지.

 

 

1. 사전 렌더링된 페이지는 선택 사항이 아닙니다.

사용자 연결의 대역폭 용량은 꾸준히 개선되어 왔기 때문에 눈에 띄게 개선될 수 있지만 지연 바늘은 전혀 움직이지 않습니다. 즉, 페이지에 정보를 표시하기 위해 왕복하는 횟수를 최소화하는 것이 훌륭한 사용자 경험과 반응성에 필수적입니다.

대부분 SPA의 경우 빈 페이지와  태그가 대신 반환되고 스크립트 내용을 가져오기 위해 또 다른 왕복이 이루어집니다. 그러면 렌더링에 필요한 데이터를 가져오기 위해 또 다른 왕복이 이루어질 수 있습니다.

가장 중요한 것은, 우리는 보통 현재 인터넷 데이터(TCP)의 우세한 전송이  느리게 시작한다는 것을 잊습니다 . 이것은 대부분 스크립트 번들이 한 번의 왕복으로 페치되지 않을 것이라는 것을 거의 보장하며, 위에서 설명한 상황을 더욱 악화시킵니다.

브라우저와 서버 간에 렌더링 코드를 공유하고 점진적으로 스크립트와 스타일을 로드하기 위한 도구를 제공하는 충분히 유연한 시스템은 아마도  웹사이트와 웹앱 간의 구어체적 구분을 없앨 것입니다 . 둘 다 동일한 UX 원칙에 의해 지배됩니다. 블로그와 CRM은 근본적으로 그렇게 다르지 않습니다. URL, 탐색 기능이 있으며 사용자에게 데이터를 보여줍니다. 전통적으로 클라이언트 측 기능에 훨씬 더 의존하는 스프레드시트 애플리케이션조차도 먼저 사용자에게 수정하려는 데이터를 보여줘야 합니다. 그리고 네트워크 왕복 횟수를 최소화하는 것이 가장 중요합니다.

 

 

2. 사용자 입력에 즉시 대응

첫 번째 원칙은 사용자가 웹사이트와 상호작용할 때 지연 시간을 최소화한다는 아이디어를 기반으로 합니다.즉, 서버와 클라이언트 간의 왕복을 최소화하기 위해 얼마나 많은 노력을 투자하더라도 제어할 수 없는 몇 가지 사항이 있습니다. 사용자와 서버 간의 거리가 피할 수 없는 것으로 주어진 이론적 하한이 있습니다.

그리고 여기에 UX 개선을 위한 JavaScript의 가장 큰 강점이 있습니다. 클라이언트 측 코드가 사용자 상호 작용을 주도하면서 이제  지연 시간을 가릴 수 있습니다. 속도에 대한 인식을 만들 수 있습니다. 인위적으로 지연 시간을 0으로 만들 수 있습니다.

JavaScript를 사용하면 사용자 입력에 대해 즉시 낙관적으로  행동  할 수 있습니다. 링크나 버튼을 클릭하면 네트워크에 연결하지 않고도 즉각적인 반응이 나타날 수 있습니다. 이에 대한 유명한 예로 Gmail(또는 Google Inbox)이 있는데, 여기서는 서버 요청이 비동기적으로 전송되고 처리되는 동안 UI에서 이메일을 보관하는 것이 즉시 발생합니다.

양식의 경우, 제출 후 HTML을 응답으로 기다리는 대신, 사용자가 enter를 누른 직후에 조치를 취할 수 있습니다. 또는 더 나은 방법으로, Google 검색처럼 사용자가 키를 누르고 있는 동안 응답할 수 있습니다.

 

1. Gmail의 즉시 반응 예시

1. Gmail에서 사용자가 이메일을 보관하거나 삭제할 때, UI에서는 해당 이메일이 즉시 사라지거나 이동된 것처럼 보입니다.
2. 이때, 이메일 보관이나 삭제는 백그라운드에서 비동기 요청으로 서버에 전달되어 처리됩니다.
3. 사용자는 이메일을 보관할 때 기다리지 않고 바로 다른 작업을 수행할 수 있어, 속도가 훨씬 빠르게 느껴집니다.
4. 만약 서버 요청이 실패하더라도, UI에서 에러 메시지를 보여줘서 사용자가 다시 시도할 수 있게 할 수 있습니다.

 

2. Google Search의 자동 완성 기능

1. Google Search에서는 사용자가 검색어를 입력할 때마다 자동 완성 기능이 실시간으로 제안 목록을 제공합니다.
2. 이 기능은 사용자가 키보드를 누를 때마다 발생하는 입력 이벤트에 대해 즉시 반응합니다.
3. 검색어 입력마다 서버에 요청이 가지만, 사용자가 요청을 기다릴 필요 없이 바로 자동 완성 결과가 업데이트되어 UI에 반영됩니다.
4. 사용자는 네트워크 지연이나 요청 처리 시간을 느끼지 못하고, 검색이 매우 빠르게 이루어진다는 인상을 받게 됩니다.

 

 

3. 데이터 변경에 대응

사용자가 페이지를 새로 고치거나(기존 웹사이트) 페이지와 상호작용할 때까지 정적인 상태로 유지되는 HTML 데이터 스냅샷을 제공하는 방식(AJAX)은 점점 더 쓸모없어지고 있습니다. UI는 자동으로 업데이트 되어야 합니다 .

우리는 이제 사진을 업로드하고 동료들이 거의 즉시 좋아요를 누르거나 댓글을 달 수 있는 세상에 살고 있습니다. 애플리케이션의 높은 동시 사용으로 인해 실시간 피드백이 필요한 것은 당연합니다.

애플리케이션에서 초기 페이지 로드 시 데이터를 함께 전송하는 경우, 클라이언트 측 스크립트가 실제로 로드되고 실행될 때까지의 시간 지연을 고려해야 합니다. 이 시간 동안 앱은 '연결 해제' 상태로 간주될 수 있습니다.

예를 들어, 사용자가 웹 페이지에 접속하면 서버에서 HTML 페이지와 함께 데이터가 전송됩니다. 그런데 클라이언트 측 자바스크립트 코드가 완전히 로드되고 실행되기 전까지 이 데이터는 사용할 수 없는 상태입니다. 이 시간 동안 사용자는 페이지 상에서 상호작용을 할 수 없게 됩니다. 이는 연결이 끊겼거나 페이지가 정적인 것처럼 보입니다.이후 클라이언트 측 스크립트가 로드되고 실행되면, 이를 통해 데이터가 처리되고 UI가 업데이트됩니다. 이런 의미에서 스크립트에 의한 이 초기 연결은 사용자 세션이 재개되는 것과 같습니다.

프로그레스 표시기 (Progress Indicator) 사용 : 초기 데이터 로딩이 완료되기 전까지 사용자에게 로딩 중임을 알려주는 프로그레스 표시기를 보여줌


스켈레톤 UI (Skeleton UI) 구현 : 데이터가 완전히 로드되기 전에도 UI 요소의 구조를 미리 보여주어 사용자에게 페이지가 로드되고 있다는 느낌을 줌

오프라인 대응 기능 제공 : 초기 데이터 로딩 중 네트워크 연결이 끊긴 경우에도 사용자가 계속 작업할 수 있도록 오프라인 대응 기능 구현

부분 업데이트 (Incremental Update) 적용 : 전체 데이터를 한꺼번에 로드하지 않고 필요한 부분만 점진적으로 로드하여 사용자 경험 개선

서버 측 렌더링 (Server-Side Rendering) 활용 : 초기 페이지 로드 시 서버에서 HTML을 렌더링하여 전송함으로써 클라이언트 측 스크립트 로딩 시간 단축