TIL.56 SPA_UX 및 개발자

UX = User experience

사용자 경험(使用者經驗, User Experience 유저 익스피리언스[*], 간단히 UX)은 사용자가 어떤 시스템, 제품, 서비스를 직, 간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험을 말한다. 단순히 기능이나 절차상의 만족뿐 아니라 전반적인 지각 가능한 모든 면에서 사용자가 참여, 사용, 관찰하고 상호 교감을 통해서 알 수 있는 가치있는 경험이다. 긍정적인 사용자 경험의 창출은 산업 디자인, 소프트웨어 공학, 마케팅, 및 경영학의 중요 과제이며 이는 사용자의 니즈의 만족, 브랜드의 충성도 향상, 시장에서의 성공을 가져다 줄 수 있는 주요 사항이다. 부정적인 사용자 경험은 사용자가 원하는 목적을 이루지 못할 때나 목적을 이루더라도 감정적, 이성적으로나 경제적으로 편리하지 못하거나 부정적인 반응을 불러일으키는 경험을 하게 되는 경우 발생할 수 있다.(ko.wikipedia.org/wiki/%EC%82%AC%EC%9A%A9%EC%9E%90_%EA%B2%BD%ED%97%98)

SPA (single-page application)

싱글 페이지 애플리케이션(single-page application, SPA, 스파)은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다. 이러한 접근은 연속되는 페이지들 간의 사용자 경험의 간섭을 막아주고 애플리케이션이 더 데스크톱 애플리케이션처럼 동작하도록 만들어준다. SPA에서 HTML, 자바스크립트, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나,[1] 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가하는데, 보통 사용자의 동작에 응답하게 되는 방식이다. 문서는 프로세스 중 어떠한 지점에서도 다시 불러들이지 않으며 다른 문서로 제어권을 넘기지 않으나, 위치 해시나 HTML5 히스토리 API를 사용하여 애플리케이션 안에서 개개의 논리 문서의 인식 및 탐색을 제공할 수 있다.[2] 싱글 페이지 애플리케이션과의 소통은 뒷편에 있는 웹 서버와의 동적인 통신을 수반하기도 한다.(ko.wikipedia.org/wiki/%EC%8B%B1%EA%B8%80_%ED%8E%98%EC%9D%B4%EC%A7%80_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98)

결국 SPA는

최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 어플리케이션
(하나의 html파일로만 동작함, 리액트 프로젝트 파일도 보면 다 html파일 하나로 작업)
SPA는 클라이언트사이드렌더링 방식이라 말할 수 있다.

Rendering이란?

렌더링은 요청받은 내용을 브라우저 화면에 표시하는 것을 말한다.

https://velog.io/@haileyself/SPA-Client-Side-Rendering-%EA%B7%B8%EB%A6%AC%EA%B3%A0-Server-Side-Rendering-90k4ar8is1

이전에는 서버에 HTML 파일을 통째로 저장하고 이를 사용자가 서버에 접속하여 통째로 받는 방식이었다.

이로인해 사이트를 읽어들이는데 많은 시간이 소요되었고 새로고침을 할때마다 많은 시간을 기다려야하는 문제가 있었다.

설상가상으로 인터넷이 발전하고 웹사이트가 발전할수록 다루는 데이터의 양이 증가하였고 이러한 문제는 더욱더 화두가 되었다고 한다.

이때 등장하게 된 개념이 SPA (singpage appcations) 이다

이러한 이유로 등장하게 된 SPA CSR + SSR 이라고 할 수 있다.

---

CSR (Client Side Rendering)

클라이언트 사이드 렌더링은 SPA로, 클라이언트 사이드에서 HTML을 반환한 후에,

JS가 동작하면서 데이터만을 주고 받아서 클라이언트에서 렌더링을 진행하는 것

점점 더 복잡해지는 웹페이지를 구현하기 위해서 전통적인 방식의 SSR보다는 CSR로 웹을 구현하는 경우가 많아짐

• 동작과정 : HTML 다운로드-> JS 다운로드 -> JS 실행 -> DATA 서버로부터 받기 -> Content 확인가능

CSR의 장점

• 클라이언트 사이드 렌더링은 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기때문에 SSR 보다 조금 더 빠른 인터랙션이 가능

• page 전체를 요청하지 않고 페이지에 필요한 부분만 변경하게 하기 때문에, 모바일 네트워크에서도 빠른 속도로 렌더링이 가능

• lazy loading을 지원해줌

  lazy loading이란 ? 페이지 로딩 시 중요하지 않은 리소스의 로딩을 늦추는 기술

  (Ex. 스크롤 내려야만 해당 이미지 보이게 하는 것)

• 서버사이드 렌더링이 따로 필요하지 않기때문에 일관성있는 코드를 작성할 수 있음

CSR의 단점

• Googlebot과 Searchconsole에 검색 노출이 되지 않음 (브라우저가 없기때문에, html만 가져와서 검색에는 뜨지 않음)

• 페이지를 읽고, 자바스크립트를 읽은 후 화면을 그리는 시간까지 모두 마쳐야 콘텐츠가 사용자에게 보여지기 때문에 초기구동 속도가 느림

 

SSR (Server Side Rendering)

서버에서 렌더링을 작업하는 렌더링 방식, 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때,

서버에 각각의 페이지에 대한 요청을 하며 서버에서 html, js 파일 등을 다 다운로드해서 화면에 렌더링하는 방식

SSR의 장점

• 사용자가 처음으로 컨텐츠를 볼 수 있는 시점을 앞당길 수 있음

• 검색엔진최적화(SEO) 적용이 용이

SSR의 단점

• 모든 요청에 관해 필요한 부분만 수정하는 것이 아닌, 완전히 새페이지를 로딩하고 렌더해줌(새로고침)

• 전체를 로딩하다보니 CSR보다 느리고, bandwitdh를 많이 쓰고, 사용자 경험 좋지 않음

  (사용자가 처음으로 컨텐츠를 볼 수는 있으나, 화면단에는 html요소들이 나오나 js파일이 다 다운로드 되지않아서 버튼이 클릭되지않는 등의 현상이 있을 수 있음)

 

웹 개발자가 UX를 고민해야하는 이유는 무엇일까?

일단 우리가 만들고하는 사이트, 서비스 는 모두 고객은 사용자이기 때문이다.

곧 사용자 경험 UX를 생각하는 것 자체가 UX Engineering과 별반 다르지 않다. 

UX와 UI 를 어떻게 구성하느냐에 따라서

사용자가 우리 서비스를 이용하고 싶도록 만들 수 있으며

기존 사용자를 이탈하게 할 수도 있다.

 

중요한것은 UI 나 UX는 단순히 기획자, 디자이너, 혹은 프론트엔드 개발자 만이 고려해야하는것은 아니다

백엔드 개발자 또한 사용자의 입장에서 UX 측면으로 효과적으로 모델과 데이터를 구성하는데 UX적 요소를 생각하면서

개발하는 사용자이자 개발자라는 생각으로 개발을 해나가는게 옳은 일이라 생각한다.

 

기능이나 서비스등을 구현하기 급급한 개발자가 아닌 UX도 고려하여 사용자이자 개발자인 

역지사지의 마음가짐을 가지고 개발에 임하는 자세를 갖추도록 하자.

 

면접 질문으로

프로젝트시 구성한 기능이 아니라

사이트에서 UX 부분을 어떻게 생각하고 프로젝트를 진행했는지 알고 있어야 한다.

주어진것만 하는게 아닌 한발짝 더 나아가는 느낌이다.

 

출처 : velog.io/@haileyself/SPA-Client-Side-Rendering-%EA%B7%B8%EB%A6%AC%EA%B3%A0-Server-Side-Rendering-90k4ar8is1

SPA / Client Side Rendering 그리고 Server Side Rendering

ko.wikipedia.org/wiki/%EC%82%AC%EC%9A%A9%EC%9E%90_%EA%B2%BD%ED%97%98