TIL # 32 (UX와 웹 개발자)

Mikyung Lee·2021년 1월 25일
0
post-thumbnail

1. 웹 사이트의 발전

웹의 발전과 더불어 웹 개발자는 다양한 기술과 언어를 활용해 사용자에게 최적화된 웹서비스를 제공해야할 필요성이 증가했다.

SPA + SSR + CSR

  • 사용자는 기다리지 않습니다. 때문에 웹사이트는 좀 더 빠르게 화면을 보여줘야 했습니다. 사용자가 뒤로가기 버튼을 누를 때마다, 또 다른 메뉴탭을 누를 때마다 특정 부분을 갱신하기 위해서 매번 통신 후 페이지를 전체 리렌더 해야한다면 당연히 로딩이 느려지고 사용자는 기다리겠죠?

  • 이런 일을 방지하기 위해서 html 파일을 통째로 서버로부터 다시 받아오지 않고, 화면은 유지하면서 바뀔 부분의 정보(ex. JSON)만 일부 갈아끼워 동적으로 화면을 구성하는 SPA가 생겨나게 되었고 이는 웹사이트가 더욱 사용자 친화적인 형태로 발전된 모습이라고 볼 수 있습니다.

  • 이후 SSR, CSR을 고루 사용하면서 SPA를 넘어서서 Universal한 Web으로 발전하는데, 기저에는 UX를 고려한 기술의 반영이라고 할 수 있습니다.

  • 참고 링크 : https://medium.com/아몽소프트웨어/csr-ssr-spa-mpa-ede7b55c5f6f

  • 🧐 SPA + SSR + CSR ?

    • SPA(Single Page Application)란?
      • 말그대로 페이지가 하나인 어플리케이션입니다. SPA이전에는 페이지를 로딩할 때마다 서버에 리소스를 전달받아와서 렌더링을 했습니다. 이렇게 되면 데이터 정보 전송의 과부화, 속도 저하 등 여러 문제가 발생하게 되죠! 이러한 문제를 해결하고자 SPA가 등장했고 SPA로 렌더링 할 경우에는 서버에서 제공하는 페이지가 한 페이지기 때문에 로딩을 한 번 하고나서 페이지를 이동할 때마다 서버에 새로운 페이지를 요청하는 것이 아닌 새 페이지에서 필요한 데이터만 받아와서 다른 종류의 뷰를 만듭니다.
    • SSR (Server Side Rendering)
      • Server Side Rendering이란 단어 그대로 서버에서 렌더링을 작업하는 것 입니다. 웹페이지에 접근할 때 서버에 페이지에 대한 요청을 하며 서버에서는 html, view와 같은 리소스들을 어떻게 보여질 지 해석하고 렌더링합니다. SSR의 장점으로는 초기 렌더링 속도가 매우 빠르며 SEO를 사용할 수 있는 점입니다. 그러나 간단한 데이터 수정에도 서버를 거쳐야하는 불편함이 따르기 때문에 초기 렌더링 수행은 빠르지만 연속적으로 렌더링 수행을 할 경우 서버에 과부하가 올 수 있습니다.
    • CSR ( Client Side Rendering)
      • Client Side Rendering은 렌더링에서 사용자에게 필요한 부분만 서버로부터 로딩하는 방식입니다. 때문에 주고받게 되는 데이터의 양이 현저히 줄어들고 연속된 렌더링으로 인한 과부하를 줄일 수 있습니다.

결국 웹기술은 사용자가 웹을 이용할 때 풍부한 정보를 빠르고 동적으로 받아볼 수 있게 하기 위해 발전된 것이라고 볼 수 있습니다.

2. 웹 개발자가 UX를 고민해야 하는 이유(?)


  • 그렇다면 웹개발자가 UX를 생각해야하는 이유는 무엇일까요? 우리는 디자이너가 아닌데 말이죠!
  • 사실 UX는 디자이너와도 관련이 깊지만 우리는 UX Engineering에 대해서 생각해볼 수 있습니다.
  • UX Engineering은 결국 사용자 경험에 미루어서 웹사이트에서 일어나는 모든 인터렉션에 관여하는 것이라고 할 수 있습니다.
  • 웹 개발자는 이를 토대로 SEO(검색 엔진 최적화), 로딩 속도와 성능 개선, 디바이스에 따른 화면 구성 등 여러 가지를 염두하며 구조 설계까지 UX의 영향을 받을 수 있습니다.

프로토타입과 UI 컴포넌트, 스타일링을 설계하고 유지 보수에 대한 계획을 기술적으로 이행할 수 있게 해주는 것이 웹 개발자라고 할 수 있죠.

3. 그럼 UX란 무엇일까요?


UX(User Experience)란 앞서 언급했단 사용자 경험입니다. 이는 사용자에게 더 나은 경험을 제공하는데 이바지하는 모든 활동이나 계통을 가리킬 때 포괄적으로 쓰입니다.

그렇다면 사용자는 웹페이지에서 어떤 경험을 하게될까요?

  • 사용자 경험의 핵심은 "느낌, 태도, 행동" 으로 함축할 수 있습니다. 경험을 설계한다는 말은 "느낌, 태도, 행동"을 설계한다는 말입니다.

  • 어떤 커머스 사이트에 접속했다고 가정 해보겠습니다. 표를 살펴보시면 긍정적인 경험과 부정적인 경험을 나눌 수 있죠. 보통 부정적인 경험은 사용자가 본인에게 맞는 사이즈를 찾지 못했다거나 별로 볼게 없다거나 다양한 옵션을 찾을 수 없다거나 사이트의 로딩이 길어질 때 발생합니다. 이러한 경험을 최대한 긍정적인 경험으로 끌어올릴 수 있도록 구조를 잘 설계하여 부정적인 경험 포인트를 피할 수 있겠죠.
  • 이를테면 품절상품 자체를 필터링해서 보여주지 않는다던지, 하나의 상품이 가지고 있는 여러가지 옵션을 쪼개서 좀 더 댜앙하게 보여준다던지, 로딩속도를 줄인다던지 등등 방대한 데이터를 가지고 최대한 UX를 고려하여 보여줄 수 있습니다.

사용자 규칙

UX에 대한 고민이 녹아든 웹을 구성할 때에 몇가지 핵심적인 사용성 원칙만 이해하면 됩니다.

  • 사용자는 웹페이지를 읽지 않습니다. 단지 훑어봅니다.
  • 사람들은 사용법을 스스로 알아낼 수 없는 웹사이트는 사용하지 않습니다.
  • 사용자는 흔히 '정보의 냄새'라고 부르는 자취를 따라갑니다. 목표를 분명히 보여주는 링크는 사용자가 따라갈 수 있는 강력한 냄새를 뿜어냅니다.
  • 창의적이고 혁신적인 방법은 사용자의 편의성이 확실히 보장된 상태에서 해야합니다.
  • 명료성이 일관성보다 중요합니다.
  • 클릭할 수 있는 요소를 명확히 표시해야합니다.

4. UX가 웹사이트에 미치는 영향


앞서 언급했던 "경험을 설계한다는 말" 기억 나시나요? 한 웹사이트에는 여러 명의 생각이 녹아들어 있습니다. 디자이너, 기획자 등 여러 사람의 고민에 의해서 웹사이트가 탄생하고 사용자와 상호작용 하지요. 그 안에서 웹 개발자는 UX에 대한 고민을 기능적으로 접근하여 설계할 수 있습니다.

UI - UX

  • 사용자는 늘 부지불식간에 시각적 계층구조를 분석합니다.
    • 시각적 계층구조는 전혀 새로운 개념이 아닙니다. 신문에서도 시각적 계층 구조를 살펴볼 수 있는데요, 어떤 타이틀 안에 해당 컨텐츠를 쉽게 눈으로 따라가는 것을 보면 설명 가능하죠!
    • 웹사이트에서 시각적 계층 구조에 대한 인식은 UI를 구성할 때 중요하게 작용합니다. 우리가 대부분 사이트를 구성할 때 Nav바를 상단에 고정시켜 놓는 이유도 바로 이 때문입니다. Nav 바는 시각적 계층 구조에서 중요한 길잡이 역할을 합니다. 사용자가 웹사이트 상에서 길을 잃어버리지 않도록 하기 위함이죠.
    • 또한 웹페이지에 제대로 된 정보전달이 이루어지고 있는지도 고민해볼 수 있습니다.

  • 어떤 버튼을 만든다고 가정해봅시다. 우리는 디자이너가 의도한 바와 더불어 사용자가 어플리케이션 내에서 불편함 없이 버튼을 클릭할 수 있는지를 고려해볼 수 있습니다.
  • UX를 고려한 웹사이트는 사용자의 경험을 예측하여 시각적인 피로도를 낮추고 더불어 사이트의 접근성도 높입니다.

5. 다시 프론트엔드 개발자가 UX를 고민해야하는 이유(!)

  • 모든 상황을 고려하고 고민한다고 해도 제대로된 UX를 설계한다는 것은 거의 불가능할지도 모릅니다.
  • 그러나 이 사이트를 사용하는 사용자 대부분에게 좋은 경험을 제공할 수 있을까? 를 고민하는 개발자가 본질적으로 가지고 있는 기술을 기여할 수 있는 개발자가 될 수 있을 거라고 생각합니다.✨
profile
front-end developer 🌷

0개의 댓글