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>
- Server Rendering
- ECMAScript 3 / Ajax (1999)
- Gmail (2004)
- jQuery (2006)
- Angular JS (2010)
- React (2013)
- 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(프론트엔드개발그룹)