UX빼면 시체
한재엽(Jbee) | FEDG(프론트엔드개발그룹)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203779/pasted-from-clipboard.png)
프론트엔드
<meta>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203779/pasted-from-clipboard.png)
<meta>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203779/pasted-from-clipboard.png)
Part I. 웹
Part II. FrontEnd 2019
Part III. UX
<ol>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203779/pasted-from-clipboard.png)
<h1>Web🕸</h1>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203779/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203784/30th-anniversary-of-the-world-wide-web-4871946884874240-2xa.gif)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203802/pasted-from-clipboard.png)
Client
Server
HTML
🗣
Web🕸
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6209844/Screen_Shot_2019-06-03_at_9.06.08_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6209833/Screen_Shot_2019-06-03_at_9.04.08_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6209836/Screen_Shot_2019-06-03_at_9.04.37_PM.png)
<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>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203779/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203825/react.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6209888/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6209891/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203879/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203833/PWA.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203839/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203840/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203842/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203867/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203870/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203872/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203875/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203909/nodejs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203911/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6215173/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6215186/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203813/jamstack.png)
JAM Stack 🍯
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203850/pasted-from-clipboard.png)
Why? 🤔
🤓
개발하는데 필요하니까?
구글이 심심해서
개발자는 새로운 것을 좋아해서
기존의 것이 불편해서
👻: 당연히 개발을 하는데 도구가 필요하니까 만들었겠죠.
🤓: 이것은 사용하는 라이브러리를 볼 때 내릴 수 있는 결론.
왜 필요했을까
환경을 바라본다면? 👀
정보량 과다
작은 모바일 화면
복잡해진 화면
문서 그 이상의 매체
사용자가 웹을 이용하려 할때 풍부한 정보를 좀 더 빠르게 보다 우아하게 제공하기 위해
🤓
웹 + 빠른 + 풍부한 + 우아 + 제공
UX
<h1>UX🍗</h1>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203779/pasted-from-clipboard.png)
Not only
UX Design
But also
UX Engineering
UX Engineering ? 🧐
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6215222/Screen_Shot_2019-06-04_at_8.40.38_PM.png)
성능 최적화
예상 가능한 동작
SEO / SMO
측정과 개선
<h1>UX Case Study🔖</h1>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203779/pasted-from-clipboard.png)
성능 최적화🚀
- 초기 로딩 / 렌더링 속도 최적화
- 빠르다는 느낌을 전달
- 부드러운 애니메이션
예상 가능한 동작🤳
- 스크롤 복원 (봤던 거 보여주기)
- 딤드 영역 닫힘
- 손에 쉽게 들어오는 인터랙션 영역
- 예상 가능한 인터랙션
SEO/SMO🤖
- 검색 엔진 최적화
- 어디까지 공유가 가능해야 하는가?
- 공유 시 thumbnail은 어떻게 설정해야할까
측정과 개선🛠
- 사용자는 어떻게 우리 서비스를 사용하는가? (트래킹)
- 상황에 따라 그 비율은 어떻게 되는가? (A/B TEST)
- 이탈률은 어떻게 줄일 수 있는가? (GA)
Let's Demo 😎
Good😍
<footer>마무리</footer>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203779/pasted-from-clipboard.png)
프론트엔드의 본질은 UX가 아닐까
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6224488/Screen_Shot_2019-06-06_at_5.59.00_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203888/feconf_logo.png)
감사합니다.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/608899/images/6203779/pasted-from-clipboard.png)
한재엽(Jbee) | FEDG(프론트엔드개발그룹)
frontend_with_ux
By Han JaeYeab
frontend_with_ux
- 1,197