AB180에서 사용자에게 정보를 전달하며

SW마에스트로 12기 연수생분들을 대상으로 프론트엔드에 관한 이야기를 전달했습니다.
회사에서 했던 경험과 실패, 생각들을 많이 담으려고 노력했습니다.

Transcript

1. AB180에서 사용자에게 정보를 전달하며 2021년 4월 21일. 이찬희. 소프트웨어 마에스트로 기술소모임
2. 숫자 놀이 출처 ) Liftoff. 2017년 10월. eMarketer. 사용자가 특정 동작을 하게 하려면 어느 정도의 마케팅 비용을 지출해야 할까요? (단, 단위는 $ )
3. 숫자 놀이 앱을 깔게 만들려면? 출처 ) Liftoff. 2017년 10월. eMarketer.
4. 숫자 놀이 앱을 깔게 만들려면? $4 출처 ) Liftoff. 2017년 10월. eMarketer.
5. 숫자 놀이 앱을 깔게 만들려면? $4 앱을 깔고 가입까지 하도록 만들려면? 출처 ) Liftoff. 2017년 10월. eMarketer.
6. 숫자 놀이 앱을 깔게 만들려면? $4 앱을 깔고 가입까지 하도록 만들려면? $8 출처 ) Liftoff. 2017년 10월. eMarketer.
7. 숫자 놀이 앱을 깔게 만들려면? $4 앱을 깔고 가입까지 하도록 만들려면? $8 앱에서 예약 같은 걸 하게 만들려면? 출처 ) Liftoff. 2017년 10월. eMarketer.
8. 숫자 놀이 앱을 깔게 만들려면? $4 앱을 깔고 가입까지 하도록 만들려면? $8 앱에서 예약 같은 걸 하게 만들려면? $29 출처 ) Liftoff. 2017년 10월. eMarketer.
9. 숫자 놀이 앱을 깔게 만들려면? $4 앱을 깔고 가입까지 하도록 만들려면? $8 앱에서 예약 같은 걸 하게 만들려면? $29 앱에서 구매를 하게 만들려면? 출처 ) Liftoff. 2017년 10월. eMarketer.
10. 숫자 놀이 앱을 깔게 만들려면? $4 앱을 깔고 가입까지 하도록 만들려면? $8 앱에서 예약 같은 걸 하게 만들려면? $29 앱에서 구매를 하게 만들려면? $75 출처 ) Liftoff. 2017년 10월. eMarketer.
11. 숫자 놀이 앱을 깔게 만들려면? $4 앱을 깔고 가입까지 하도록 만들려면? $8 앱에서 예약 같은 걸 하게 만들려면? $29 앱에서 구매를 하게 만들려면? $75 우리 앱을 구독까지 하게 만들려면? 출처 ) Liftoff. 2017년 10월. eMarketer.
12. 숫자 놀이 앱을 깔게 만들려면? $4 앱을 깔고 가입까지 하도록 만들려면? $8 앱에서 예약 같은 걸 하게 만들려면? $29 앱에서 구매를 하게 만들려면? $75 우리 앱을 구독까지 하게 만들려면? $148 출처 ) Liftoff. 2017년 10월. eMarketer.
13. 광고주가 되어버린 나
14. 광고주가 되어버린 나 돈은 엄청 쓰는데 성과가 잘 나오나…?
15. 광고주가 되어버린 나 돈은 엄청 쓰는데 성과가 잘 나오나…? 어떤 광고를 어디에 뿌려야 잘 터질까?
16. 광고주가 되어버린 나 돈은 엄청 쓰는데 성과가 잘 나오나…? 어떤 광고를 어디에 뿌려야 잘 터질까? 제대로 된 유저를 데려오고 있는 건가?
17. 광고주가 되어버린 나 돈은 엄청 쓰는데 성과가 잘 나오나…? 어떤 광고를 어디에 뿌려야 잘 터질까? 제대로 된 유저를 데려오고 있는 건가? 오래도록 우리 서비스를 잘 쓰게 하려면?
18. AB180이 하는 일 (해야하는 일) 플랫폼, 디바이스 등에 관계 없이 성과를 측정하기 효용이 좋은 광고, 매체를 실시간 분석해주기 사기 설치, 공장 클릭 등을 원천 차단해주기 유입 및 행동경로 등의 데이터를 내재화 시켜주기
27. React AWS S3 Internal External AB180 Frontend Tech Stack 2015
28. React Redux Recoil Emotion Netlify ( Internal QA ) LogRocket Sentry AWS S3 Cypress TypeScript Internal External Snyk AB180 Frontend Tech Stack 2021
29. AB180 Workflow Ideapark Product Research Voice of Customer Kickoff API Spec Frontend Backend QA Code Review Deploy Sprint / Roadmap
30. What makes Frontend Difficult?
31. 변수명. 그리고 도메인 지식. “기여기간” get donatedTerm() { const contributonPeriod = … const Giyeogigan = 10; periodOf…
32. 변수명. 그리고 도메인 지식. “I don’t know what the f**k you’re talking about”
33. 변수명. 그리고 도메인 지식. “기여기간” get donatedTerm() { const contributonPeriod = … const Giyeogigan = 10; periodOf…
34. 변수명. 그리고 도메인 지식. “Lookback Windows” get donatedTerm() { const contributonPeriod = … const Giyeogigan = 10; periodOf…
35. Domain Knowledge 어떤 분야 / 산업에서 널리 쓰이는 전문 지식 변수명. 그리고 도메인 지식. CTIT Deeplink Last-click Attribution 기여기간 대행사 CPI LTV Touchpoint 지면
36. 어디에서 무엇을 만드는지 알아야 진짜 ‘엔지니어링’을 할 수 있다 Between Over-engineering and
37. 대시보드를 빠르게 해주세요
38. 대시보드를 빠르게 해주세요 저 대시보드… 왠지 좀 느리지 않나요? 시간 되실 때 한 번 봐주세요^^ 영업 / 고객사 미팅 돌아온 뒤 성필님이 하는 말
39. 대시보드를 빠르게 해주세요 사용자를 이해하여 문제를 해결한다.
40. 대시보드를 빠르게 해주세요 사용자를 이해하여 문제를 해결한다. = 로딩을 빠르게 + 렌더링을 빠르게
41. 시간 별 대시보드 세션 수 2 : 00 6 : 00 10 : 00 15 : 00 18 : 00 22 : 00 All Sessions from LogRocket
42. 시간 별 대시보드 세션 수 2 : 00 6 : 00 10 : 00 15 : 00 18 : 00 22 : 00 All Sessions from LogRocket
43. 시간 별 대시보드 세션 수 2 : 00 6 : 00 10 : 00 15 : 00 18 : 00 22 : 00 All Sessions from LogRocket 마케터, 대행사 업무 시작 Actuals 등의 리포트, Raw Data 추출해서 받은 뒤 회사 포맷에 맞는 보고서 작성
44. 시간 별 대시보드 세션 수 2 : 00 6 : 00 10 : 00 15 : 00 18 : 00 22 : 00 All Sessions from LogRocket 마케팅 집행 상황 점검 
 필요할 경우 보고서 추가 작성 마케터, 대행사 업무 시작 Actuals 등의 리포트, Raw Data 추출해서 받은 뒤 회사 포맷에 맞는 보고서 작성
45. 렌더링을 빠르게 큰 서비스는 많은 데이터가 적재된다. 분석된 결과도 기본적으로 양이 많을 수 있다. Raw Data를 같이 뽑아 분석, 점검한다. 이걸 프론트엔드에서 바로 보여주면?
47. (기준 + 지표) * 최소 10,000 행의 DOM이 빈번하게 생기고 사라진다면?
48. 렌더링을 빠르게 Rendering Virtualization 현재 스크롤 위치를 기반으로 보여야 할 DOM만 노출 react-virtualized에 커스텀 렌더링 로직을 붙여서 row 단위로 그리게 함
49. 렌더링을 빠르게 Priority-based Rendering 우선적으로 그려져야 하는 부분에 컴퓨팅 리소스가 가도록 처리 React의 Concurrent Mode / Transition 혹은 간단하게 순차적으로 display: none -> unset으로 푸는 방식으로도 가능 1 3 2
50. 로딩을 빠르게 Single Page Application 매일 레거시가 늘어나는 느낌 대시보드 제공 기능 30 + 상세페이지 더하면 80 +
51. 로딩을 빠르게 Dynamic Import + React.lazy() & requestIdleCallback() Webpack Tree shaking & Package-level Code split Babel Preset 대신 Polyfill.io 적용 지역성 원칙을 고려한 패키지 구조로 갈아엎기? UPDATED PENDING Service Worker로 리소스 캐싱 + 자동 업데이트 fonts.google.com 사용하지 않고 폰트 서빙 → 비용 대비 효율이 낮음 PENDING
52. 대시보드를 빠르게 해주세요 3초 내로 Interactive 될 때까지 Lighthouse 돌리고 지표화
53. 대시보드를 빠르게 해주세요 Cypress로 렌더링 성능 측정 및 간단한 기능 테스트
54. 시간별 대시보드 세션 수 2 : 00 6 : 00 10 : 00 15 : 00 18 : 00 22 : 00 All Sessions from LogRocket
55. 시간별 대시보드 세션 수 2 : 00 6 : 00 10 : 00 15 : 00 18 : 00 22 : 00 All Sessions from LogRocket
56. 일별 대시보드 세션 수 8 15 22 29 All Sessions from LogRocket 1
57. 일별 대시보드 세션 수 8 15 22 29 All Sessions from LogRocket 1
58. 일별 대시보드 세션 수 8 15 22 29 All Sessions from LogRocket 1 마케팅 시작 및 런칭 상황 확인 리포트 기능을 평소보다 많이 사용
59. 일별 대시보드 세션 수 8 15 22 29 All Sessions from LogRocket 1 마케팅 시작 및 런칭 상황 확인 리포트 기능을 평소보다 많이 사용 기존 마케팅 종료 / 신규 마케팅 준비 링크 생성 및 연동 기능 많이 사용
60. 일별 대시보드 세션 수 8 15 22 29 All Sessions from LogRocket 1 마케팅 시작 및 런칭 상황 확인 리포트 기능을 평소보다 많이 사용 기존 마케팅 종료 / 신규 마케팅 준비 링크 생성 및 연동 기능 많이 사용 이쯤에 실험 / 패키지 업데이트?
61. Product Stage Iteration Product-Market Fit 초기 유저 유입 기능 개선의 반복 초기 작업 프로세스 도입 실패 도입, 실패, 수정… 로드맵 및 분기 당 작업을 가늠할 수 있는 수준 안정화 단계 유지보수
62. Product Stage Iteration Product-Market Fit 초기 유저 유입 기능 개선의 반복 초기 작업 프로세스 도입 실패 도입, 실패, 수정… 로드맵 및 분기 당 작업을 가늠할 수 있는 수준 안정화 단계 유지보수 대부분의 서비스는 여기를 넘기지 못함
63. 처음에는 두렵더라도 만드는데 집중해야 합니다
66. Product Stage Iteration Product-Market Fit 초기 유저 유입 기능 개선의 반복 초기 작업 프로세스 도입 실패 도입, 실패, 수정… 로드맵 및 분기 당 작업을 가늠할 수 있는 수준 안정화 단계 유지보수
67. Product Stage Iteration Product-Market Fit 초기 유저 유입 기능 개선의 반복 초기 작업 프로세스 도입 실패 도입, 실패, 수정… 로드맵 및 분기 당 작업을 가늠할 수 있는 수준 안정화 단계 유지보수 팀을 도와주는 엔지니어링에 집중
68. 우리 팀의 효율 높이기 만들어진 것을 토대로 디자인 시스템 만들고 적용하기 다국어 ( Internalization) 작업을 도와주는 도구 만들기 레거시 코드 정리하기 한국어 English 日本語
74. 세로 가운데 정렬이 안되는 문제를 풀려면 폰트를 뜯어야 해서 결국 폰트를 직접 커스텀하는 중…
75. 웹 접근성을 잘 지킬 것 마크업 및 스타일링을 웹 접근성에 맞춰서 적절하게 하기 (준수 못하면 Code Review Reject)
76. 웹 접근성을 잘 지킬 것 ✅ aria-popup 설정이 되었는가? ✅ aria-live 체크가 잘 되었는가? ✅ 날짜에 대체 텍스트가 잘 뜨는가? ✅ 키보드만으로 기본적인 인터랙션이 가능한가? ✅ 팝업이 열렸을 때 focus가 특정 영역에서만 머무는가? ❌ focus, hover 항목에 outline이 노출되는가? ❌ 채도/명도가 WCAG 조건에 부합하는가?
77. 아는 게 없음 여전히 아는 게 없음 지식/기술 자신감 높음 낮음 2017
78. 아는 게 없음 여전히 아는 게 없음 지식/기술 자신감 높음 낮음 2018
79. 아는 게 없음 여전히 아는 게 없음 지식/기술 자신감 높음 낮음 2019
80. 아는 게 없음 여전히 아는 게 없음 지식/기술 자신감 높음 낮음 2020 +
81. 즐거워요
82. 체감 난이도 사용자와 가까운지 UI / UX Data Visualization Test & Reliability Check Ops / Optimization Design System User Interface Motion / Animation Webpack Edge Network End-to-end Test Unit Test CI CD Prototyping Chart Lint / Type Checker Data Pipelining
83. 체감 난이도 사용자와 가까운지 UI / UX Data Visualization Test & Reliability Check Ops / Optimization Design System User Interface Motion / Animation Webpack Edge Network End-to-end Test Unit Test CI CD Prototyping Chart Lint / Type Checker Data Pipelining Front-forward Front-backward
84. 엔지니어링의 의미 비용 효율적인 Cost-effective 직관적인 Intuitive 안정적인 Stable 방법으로
85. 엔지니어링의 의미 비용 효율적인 Cost-effective 직관적인 Intuitive 안정적인 Stable 방법으로
86. 엔지니어링의 의미 비용 효율적인 Cost-effective 직관적인 Intuitive 안정적인 Stable 방법으로 사용자 팀원
87. 데이터는 정보가 아니고, 정보는 지식이 아니며, 지식은 이해가 아니고, 이해는 지혜가 아니다. 클리포드 스톨. Clifford Stoll.
88. Frontend Engineering 사용자에게 ‘정보’를 전달하는 일
89. 저희와 함께 할 개발자를 찾고 있어요! recruit.ab180.co (곧 함께 할거니까 반갑다는 뜻ㅎ)
90. chanhee@ab180.co 
 fb.me/hiddenest 감사합니다.