UX빼면 시체

한재엽(Jbee) | FEDG(프론트엔드개발그룹)

프론트엔드

<meta>

<meta>

Part I. 웹
Part II. FrontEnd 2019
Part III. UX

<ol>

<h1>Web🕸</h1>

World Wide Web 30th anniversary🎉

Document

문서

Hyper Link

📃

📃

📃

📃

📃

📃

<html>
  <head>
    <title>What is Front End?</title>
  </head>
  <body>
    <h1>Hello, Front End</h1>
    <a href="https://jbee.io">
      필수 방문 블로그
    </a>
  </body>
</html>

HTML

Hyper Text Markup Language

Client

Server

HTML

🗣

Web🕸

<ol>

  1. Server Rendering
  2. ECMAScript 3 / Ajax (1999)
  3. Gmail (2004)
  4. jQuery (2006)
  5. Angular JS (2010)
  6. React (2013)
  7. ECMAScript 2015

Why? 🤔

<h1>Front-End in 2019 📆</h1>

JAM Stack 🍯

Why? 🤔

🤓

개발하는데 필요하니까?

구글이 심심해서

개발자는 새로운 것을 좋아해서

기존의 것이 불편해서

👻: 당연히 개발을 하는데 도구가 필요하니까 만들었겠죠.

🤓: 이것은 사용하는 라이브러리를 볼 때 내릴 수 있는 결론.

왜 필요했을까

환경을 바라본다면? 👀

정보량 과다

작은 모바일 화면

복잡해진 화면

문서 그 이상의 매체

사용자가 을
이용하려 할때
풍부한 정보를
좀 더 빠르게
보다 우아하게
제공하기 위해

🤓

웹 + 빠른 + 풍부한 + 우아 + 제공

UX

<h1>UX🍗</h1>

Not only

 

UX Design

But also

UX Engineering

UX Engineering ? 🧐

성능 최적화

예상 가능한 동작

SEO / SMO

측정과 개선

<h1>UX Case Study🔖</h1>

성능 최적화🚀

  • 초기 로딩 / 렌더링 속도 최적화
  • 빠르다는 느낌을 전달
  • 부드러운 애니메이션

예상 가능한 동작🤳

  • 스크롤 복원 (봤던 거 보여주기)
  • 딤드 영역 닫힘
  • 손에 쉽게 들어오는 인터랙션 영역
  • 예상 가능한 인터랙션

SEO/SMO🤖

  • 검색 엔진 최적화
  • 어디까지 공유가 가능해야 하는가?
  • 공유 시 thumbnail은 어떻게 설정해야할까

측정과 개선🛠

  • 사용자는 어떻게 우리 서비스를 사용하는가? (트래킹)
  • 상황에 따라 그 비율은 어떻게 되는가? (A/B TEST)
  • 이탈률은 어떻게 줄일 수 있는가? (GA)

Let's Demo 😎

Good😍

<footer>마무리</footer>

프론트엔드의 본질은 UX가 아닐까

감사합니다.

한재엽(Jbee) | FEDG(프론트엔드개발그룹)

Made with Slides.com