Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Chanhee
April 21, 2021

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

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

Chanhee

April 21, 2021
Tweet

More Decks by Chanhee

Other Decks in Programming

Transcript

  1. 숫자 놀이 출처 ) Liftoff. 2017년 10월. eMarketer. 사용자가 특정

    동작을 하게 하려면 어느 정도의 마케팅 비용을 지출해야 할까요? (단, 단위는 $ )
  2. 숫자 놀이 앱을 깔게 만들려면? $4 앱을 깔고 가입까지 하도록

    만들려면? 출처 ) Liftoff. 2017년 10월. eMarketer.
  3. 숫자 놀이 앱을 깔게 만들려면? $4 앱을 깔고 가입까지 하도록

    만들려면? $8 출처 ) Liftoff. 2017년 10월. eMarketer.
  4. 숫자 놀이 앱을 깔게 만들려면? $4 앱을 깔고 가입까지 하도록

    만들려면? $8 앱에서 예약 같은 걸 하게 만들려면? 출처 ) Liftoff. 2017년 10월. eMarketer.
  5. 숫자 놀이 앱을 깔게 만들려면? $4 앱을 깔고 가입까지 하도록

    만들려면? $8 앱에서 예약 같은 걸 하게 만들려면? $29 출처 ) Liftoff. 2017년 10월. eMarketer.
  6. 숫자 놀이 앱을 깔게 만들려면? $4 앱을 깔고 가입까지 하도록

    만들려면? $8 앱에서 예약 같은 걸 하게 만들려면? $29 앱에서 구매를 하게 만들려면? 출처 ) Liftoff. 2017년 10월. eMarketer.
  7. 숫자 놀이 앱을 깔게 만들려면? $4 앱을 깔고 가입까지 하도록

    만들려면? $8 앱에서 예약 같은 걸 하게 만들려면? $29 앱에서 구매를 하게 만들려면? $75 출처 ) Liftoff. 2017년 10월. eMarketer.
  8. 숫자 놀이 앱을 깔게 만들려면? $4 앱을 깔고 가입까지 하도록

    만들려면? $8 앱에서 예약 같은 걸 하게 만들려면? $29 앱에서 구매를 하게 만들려면? $75 우리 앱을 구독까지 하게 만들려면? 출처 ) Liftoff. 2017년 10월. eMarketer.
  9. 숫자 놀이 앱을 깔게 만들려면? $4 앱을 깔고 가입까지 하도록

    만들려면? $8 앱에서 예약 같은 걸 하게 만들려면? $29 앱에서 구매를 하게 만들려면? $75 우리 앱을 구독까지 하게 만들려면? $148 출처 ) Liftoff. 2017년 10월. eMarketer.
  10. 광고주가 되어버린 나 돈은 엄청 쓰는데 성과가 잘 나오나…? 어떤

    광고를 어디에 뿌려야 잘 터질까? 제대로 된 유저를 데려오고 있는 건가?
  11. 광고주가 되어버린 나 돈은 엄청 쓰는데 성과가 잘 나오나…? 어떤

    광고를 어디에 뿌려야 잘 터질까? 제대로 된 유저를 데려오고 있는 건가? 오래도록 우리 서비스를 잘 쓰게 하려면?
  12. AB180이 하는 일 (해야하는 일) 플랫폼, 디바이스 등에 관계 없이

    성과를 측정하기 효용이 좋은 광고, 매체를 실시간 분석해주기 사기 설치, 공장 클릭 등을 원천 차단해주기 유입 및 행동경로 등의 데이터를 내재화 시켜주기
  13. React Redux Recoil Emotion Netlify ( Internal QA ) LogRocket

    Sentry AWS S3 Cypress TypeScript Internal External Snyk AB180 Frontend Tech Stack 2021
  14. AB180 Workflow Ideapark Product Research Voice of Customer Kickoff API

    Spec Frontend Backend QA Code Review Deploy Sprint / Roadmap
  15. 변수명. 그리고 도메인 지식. “Lookback Windows” get donatedTerm() { const

    contributonPeriod = … const Giyeogigan = 10; periodOf…
  16. Domain Knowledge 어떤 분야 / 산업에서 널리 쓰이는 전문 지식

    변수명. 그리고 도메인 지식. CTIT Deeplink Last-click Attribution 기여기간 대행사 CPI LTV Touchpoint 지면
  17. 대시보드를 빠르게 해주세요 저 대시보드… 왠지 좀 느리지 않나요? 시간

    되실 때 한 번 봐주세요^^ 영업 / 고객사 미팅 돌아온 뒤 성필님이 하는 말
  18. 시간 별 대시보드 세션 수 2 : 00 6 :

    00 10 : 00 15 : 00 18 : 00 22 : 00 All Sessions from LogRocket
  19. 시간 별 대시보드 세션 수 2 : 00 6 :

    00 10 : 00 15 : 00 18 : 00 22 : 00 All Sessions from LogRocket
  20. 시간 별 대시보드 세션 수 2 : 00 6 :

    00 10 : 00 15 : 00 18 : 00 22 : 00 All Sessions from LogRocket 마케터, 대행사 업무 시작 Actuals 등의 리포트, Raw Data 추출해서 받은 뒤 회사 포맷에 맞는 보고서 작성
  21. 시간 별 대시보드 세션 수 2 : 00 6 :

    00 10 : 00 15 : 00 18 : 00 22 : 00 All Sessions from LogRocket 마케팅 집행 상황 점검 
 필요할 경우 보고서 추가 작성 마케터, 대행사 업무 시작 Actuals 등의 리포트, Raw Data 추출해서 받은 뒤 회사 포맷에 맞는 보고서 작성
  22. 렌더링을 빠르게 큰 서비스는 많은 데이터가 적재된다. 분석된 결과도 기본적으로

    양이 많을 수 있다. Raw Data를 같이 뽑아 분석, 점검한다. 이걸 프론트엔드에서 바로 보여주면?
  23. 렌더링을 빠르게 Rendering Virtualization 현재 스크롤 위치를 기반으로 보여야 할

    DOM만 노출 react-virtualized에 커스텀 렌더링 로직을 붙여서 row 단위로 그리게 함
  24. 렌더링을 빠르게 Priority-based Rendering 우선적으로 그려져야 하는 부분에 컴퓨팅 리소스가

    가도록 처리 React의 Concurrent Mode / Transition 혹은 간단하게 순차적으로 display: none -> unset으로 푸는 방식으로도 가능 1 3 2
  25. 로딩을 빠르게 Dynamic Import + React.lazy() & requestIdleCallback() Webpack Tree

    shaking & Package-level Code split Babel Preset 대신 Polyfill.io 적용 지역성 원칙을 고려한 패키지 구조로 갈아엎기? UPDATED PENDING Service Worker로 리소스 캐싱 + 자동 업데이트 fonts.google.com 사용하지 않고 폰트 서빙 → 비용 대비 효율이 낮음 PENDING
  26. 시간별 대시보드 세션 수 2 : 00 6 : 00

    10 : 00 15 : 00 18 : 00 22 : 00 All Sessions from LogRocket
  27. 시간별 대시보드 세션 수 2 : 00 6 : 00

    10 : 00 15 : 00 18 : 00 22 : 00 All Sessions from LogRocket
  28. 일별 대시보드 세션 수 8 15 22 29 All Sessions

    from LogRocket 1 마케팅 시작 및 런칭 상황 확인 리포트 기능을 평소보다 많이 사용
  29. 일별 대시보드 세션 수 8 15 22 29 All Sessions

    from LogRocket 1 마케팅 시작 및 런칭 상황 확인 리포트 기능을 평소보다 많이 사용 기존 마케팅 종료 / 신규 마케팅 준비 링크 생성 및 연동 기능 많이 사용
  30. 일별 대시보드 세션 수 8 15 22 29 All Sessions

    from LogRocket 1 마케팅 시작 및 런칭 상황 확인 리포트 기능을 평소보다 많이 사용 기존 마케팅 종료 / 신규 마케팅 준비 링크 생성 및 연동 기능 많이 사용 이쯤에 실험 / 패키지 업데이트?
  31. Product Stage Iteration Product-Market Fit 초기 유저 유입 기능 개선의

    반복 초기 작업 프로세스 도입 실패 도입, 실패, 수정… 로드맵 및 분기 당 작업을 가늠할 수 있는 수준 안정화 단계 유지보수
  32. Product Stage Iteration Product-Market Fit 초기 유저 유입 기능 개선의

    반복 초기 작업 프로세스 도입 실패 도입, 실패, 수정… 로드맵 및 분기 당 작업을 가늠할 수 있는 수준 안정화 단계 유지보수 대부분의 서비스는 여기를 넘기지 못함
  33. Product Stage Iteration Product-Market Fit 초기 유저 유입 기능 개선의

    반복 초기 작업 프로세스 도입 실패 도입, 실패, 수정… 로드맵 및 분기 당 작업을 가늠할 수 있는 수준 안정화 단계 유지보수
  34. Product Stage Iteration Product-Market Fit 초기 유저 유입 기능 개선의

    반복 초기 작업 프로세스 도입 실패 도입, 실패, 수정… 로드맵 및 분기 당 작업을 가늠할 수 있는 수준 안정화 단계 유지보수 팀을 도와주는 엔지니어링에 집중
  35. 우리 팀의 효율 높이기 만들어진 것을 토대로 디자인 시스템 만들고

    적용하기 다국어 ( Internalization) 작업을 도와주는 도구 만들기 레거시 코드 정리하기 한국어 English 日本語
  36. 웹 접근성을 잘 지킬 것 마크업 및 스타일링을 웹 접근성에

    맞춰서 적절하게 하기 (준수 못하면 Code Review Reject)
  37. 웹 접근성을 잘 지킬 것 ✅ aria-popup 설정이 되었는가? ✅

    aria-live 체크가 잘 되었는가? ✅ 날짜에 대체 텍스트가 잘 뜨는가? ✅ 키보드만으로 기본적인 인터랙션이 가능한가? ✅ 팝업이 열렸을 때 focus가 특정 영역에서만 머무는가? ❌ focus, hover 항목에 outline이 노출되는가? ❌ 채도/명도가 WCAG 조건에 부합하는가?
  38. 체감 난이도 사용자와 가까운지 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
  39. 체감 난이도 사용자와 가까운지 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