사용자 경험이 매우 중요한 웹 서비스에서 최적화는 빼놓을 수 없는 주제인데요. 그런 맥락에서 이번 토스 모닥불 EP9 "프론트엔드 서비스 최적화? 토스에서는 '이렇게' 합니다!" 를 흥미롭게 시청했습니다. 유익한 내용이 많아서 최적화 기본 개념부터 React 기반 최적화 방법까지 영상 내용을 토대로 인사이트를 정리해보았습니다.

최적화의 기본 원칙
 1. 최적화는 필요할 때만: 하면 좋을 것 같다면 하지 말고, 진짜 해야 한다고 느껴지면 프로파일링부터 시작합니다. 하지만 실제 최적화가 필요한 시점을 생각보다 늦게 알 수 있으므로 신중히 접근해야 합니다.
 2. 현실적인 테스트 환경: 일반적으로 최적화 작업은 좋은 컴퓨터와 빠른 네트워크 환경에서 테스트되기 때문에 실제 사용자 경험을 반영하지 못할 수 있습니다. 따라서 최악의 상황에서도 서비스가 원활히 동작하는지 테스트해야 합니다.
 3. 트레이드오프의 이해: 최적화를 통해 성능을 개선했다면, 그 과정에서 개발 시간이나 유지보수 비용 같은 다른 요소들이 희생될 수 있습니다. "은탄환"은 존재하지 않으므로, 트레이드오프를 명확히 인지해야 합니다.

주요 최적화 영역
1. 초기 로딩 속도
 * 번들 크기 관리: 번들이 클수록 대역폭과 지연시간에 영향을 미칩니다. 또한 번들을 작은 단위로 쪼개면 캐싱에도 유리합니다.
 * 필요한 리소스 우선 로드: React에서는 화면에 꼭 필요한 요소만 먼저 렌더링하고, 나머지는 비동기로 로드합니다.
 * 프리페칭: 페이지 이동 시 필요한 리소스를 미리 가져와 페이지 전환 속도를 향상시킵니다.
   
2. 런타임 성능
 * 반응성 개선: 사용자 입력에 대한 빠른 반응성을 확보하여 사용 중 부드러운 경험을 제공합니다.
 * 성능 측정 방법: 런타임: FPS(Frame Per Second)를 통해 성능을 확인하고, 크롬 개발자 도구의 프로파일러를 사용하여 렌더링 병목 현상을 분석합니다.
 * FPS 유지: 드래그 앤 드롭 같은 동작이 60프레임을 유지하는지 확인 합니다.메인 스레드 블로킹 여부를 파악하고, 프로파일러에서 노란색 막대를 줄이는 방향으로 개선 합니다.
   
React에서의 렌더링 최적화
 1. 불필요한 상태 업데이트 줄이기:
    useEffect
    안에서 상태를 변경해 연쇄적으로 리렌더링이 발생하지 않도록 주의 합니다. 파생 상태는 별도의 상태로 관리하기보다, 계산된 값으로 사용 합니다.
 2. 메모화 활용:
    React.memo
    를 사용하여 컴포넌트가 불필요하게 렌더링되지 않도록 하여 렌더링이 필요한 특정 컴포넌트만 업데이트되도록 최적화 합니다.
    
프론트엔드 개발자로써 성능 최적화는 항상 도전적인 과제인데요. 이번 영상을 통해 최적화의 개념과 실행 방법을 정리할 수 있었습니다. 언제, 어떻게 최적화를 해야 할지 고민이 될 때 이 영상을 참고하면 좋을것 같습니다. 보다 더 자세한 내용은 영상을 통해 확인해보세요.

https://www.youtube.com/watch?v=upUON56UEYo

프론트엔드 성능 최적화: 토스 개발팀의 전략과 인사이트

데이터 분석을 하다 보면 종종 이런 질문에 마주하게 됩니다.
“A/B 테스트의 유의확률이 왜 중요하지?”,
“상관관계는 인과관계를 의미하지 않는다는데, 그건 무슨 뜻이지?”,
“정규분포가 그렇게 중요하다고들 하는데, 왜?”

현업에서 통계를 다뤄본 사람이라면, 어느 순간 ‘기법보다 개념’이 더 궁금해지는 순간을 맞이합니다. 그래서 이 책 『데이터 분석가가 궁금해 할 통계의 모든 것 59가지 통계학 궁금증 완전 정복』이라는 제목을 보았을 때, 마치 제 오랜 질문에 답해줄 것만 같은 기대감이 들었습니다.

| 통계를 Q&A로 풀어낸 실용적 구성

이 책은 총 59가지 질문을 중심으로 구성되어 있습니다. 단순히 이론을 설명하는 것이 아니라, 현장에서 실제로 궁금해할 법한 질문을 먼저 던지고, 그에 대한 설명을 차근차근 풀어가는 방식으로 말이죠.

예를 들어,
✔️ p-value라는 숫자가 실제로 의미하는 직관은?
✔️ 귀무가설 vs 대립가설
✔️ 선형 모델을 학습한다는 것은?
✔️ ROC 곡선의 x축, y축 값이 의미하는 것은?

이런 질문들은 통계를 단지 계산이나 숫자로 보는 것이 아니라, 현상을 해석하는 언어로 이해하게끔 돕습니다. 마치 질문 하나하나가 독자를 더 깊은 사고로 이끄는 셈이죠.

| 실무에서 필요한 통계학 개념과 이론을 콤팩트하게 구성

책 속 "궁금증 07. 상호 작용 효과를 추가한다는 것의 직관적인 의미는?"이라는 챕터는, 현업 데이터 분석가라면 한 번쯤 겪어봤을 법한 고민을 다룹니다.

예컨대 선형 모델을 설계하거나 성능을 개선할 때, 단순히 변수 하나하나의 영향만 보는 것이 아니라, 변수들 간의 ‘관계의 관계’, 즉 상호 작용 효과(interaction effect)를 고려하는 것이 중요할 때가 있습니다.

특히, 어떤 카테고리로 그룹을 나눈 후 그 그룹 내에서 연관성 정도가 서로 다른 경우, 단순히 공변량을 추가하는 것만으로는 한계가 있습니다. 이럴 때는 공변량과 본래의 입력 변수 사이의 상호 작용 항을 모델에 포함함으로써 더 정밀한 예측과 해석이 가능해집니다.

이 책에서는 이 개념을 ‘학생 성별, 수학 등급에 따른 영어 등급’이라는 단순한 사례를 들어 직관적으로 풀어줍니다. 단순히 성별이나 수학 등급 각각이 영어 등급에 미치는 영향을 따지는 것이 아니라, 둘이 결합될 때 성적에 미치는 영향이 달라질 수 있다는 점, 즉 변수 간 상호작용이 결과를 더 정확히 설명할 수 있다는 것을 시각적으로 이해하게 도와줍니다.

또한 수식이나 모델 역시 계산 도구로서가 아니라, 생각을 구조화하는 언어로 다가오도록 구성되어 있어, 통계를 수학적으로만 접근해왔던 사람들에게도 부담 없이 다가갈 수 있는 장점이 있습니다.

| 이런 분들께 이 책을 추천합니다

이 책을 통해 제가 가장 크게 얻은 것은, ‘통계 개념을 더 쉽게, 그리고 더 구조적으로 설명할 수 있게 되었다’는 점입니다. 특히 요즘처럼 AI와 머신러닝이 일상화된 시대에, 통계적 기반 없이 결과만 해석하려고 한다면 분석의 깊이가 쉽게 얕아질 수 있습니다. 이 책은 그런 ‘통계적 허기’를 채워주는 든든한 입문서이자 실무서라고 생각합니다.

물론 이 책은 얇고 가벼운 분량 안에 59가지의 질문과 설명을 담아낸 만큼, 밀도가 꽤 높은 편입니다. 그래서 처음 읽을 때는 이해가 쉽지 않은 부분도 있을 수 있습니다. 그럴 때는 해당 개념을 별도로 검색하거나, 저자의 유튜브 채널(『그림 과학자』)을 함께 참고하는 것도 좋은 방법이 됩니다.

통계학에 완전히 처음 입문하신 분들에겐 다소 도전적인 책이 될 수 있지만, 한 챕터씩 천천히, 반복해서 읽으며 관련 개념을 정리하다 보면 어느새 통계에 대한 두려움이 줄어들고, 사고의 틀이 한층 깊어지는 경험을 하실 수 있을 거라 확신합니다.

저는 이 책을 아래와 같은 분들께 특히 추천드리고 싶습니다
✔️ 통계를 더 이상 피하고 싶지 않은 실무자
✔️ 데이터를 해석하는 기본기와 원리를 탄탄히 하고 싶은 분석가
✔️ 데이터 분석가, 데이터 사이언티스트 직무를 준비 중인 취업 준비생

데이터 분석가는 늘 질문을 품고 살아갑니다. 그리고 이 책은 그 질문들에 대해 숫자가 아닌 ‘통계’로 답하는 법을 알려줍니다. 통계를 통해 사고하고, 설명하고, 설득하는 힘을 키우고 싶은 모든 분들께 이 책을 권합니다.

? 이 서평은 출판사 길벗으로부터 도서를 제공받아 작성한 글입니다.

https://blog.naver.com/bestinall/223897225902

[서평] 59가지 통계학 궁금증 완전 정복

산소마스크는 내가 먼저 써야 한다

Kakaostyle Strategy Group Leader

Younglong Kim

카카오스타일 지그재그 CRM Team Leader

김민규

지그재그 PO

이미준(도그냥)

sunday

카카오스타일 PR 매니저

이예슬

카카오스타일 백엔드 엔지니어

나즈

카카오스타일 프로덕트 디자이너

허지인

카카오스타일 운영매니저

강현지

카카오스타일 파트리더

배민경

카카오스타일 브랜드MD

최혜원

카카오스타일 CX 

김정은

카카오스타일 | 데이터 분석가

이건승

개발

강웅석

카카오스타일 프로덕트 오너

서효

패션MD

이나래

카카오스타일 PM

김해주

카카오스타일 VoC분석매니저

우지원

카카오스타일 DS

진현두

프로덕트 매니저/서비스 기획

최우진

마케터

김민정

카카오스타일 결제팀 리더

김주명

카카오스타일 데이터사이언티스트

이명휘

카카오스타일 백엔드 개발자

이영진

마케팅

하동권 

정다현

카카오스타일 백엔드개발자

김 다희 Heidi

C레벨 Staff

김범수

카카오스타일 오퍼레이터

임지현

Claude

카카오스타일 검색 엔지니어

안성현

Yvonne So

카카오스타일 디자이너

히히힛

프로덕트 디자이너

공성희

카카오스타일 PO

카카오스타일 HR(기업문화 담당자)

차영민

카카오스타일 iOS developer

동중서

백엔드 엔지니어

박성필

카카오스타일 CTO

윤상민 Simon

카카오스타일 프론트엔드 개발자

종오

다은

카카오스타일 po

예스리

카카오스타일 안드로이드 개발자

HyoB

이준혁

카카오스타일 플랫폼 디자이너

김범석

Product Owner

김다래

카카오스타일 앱개발

하경

프론트엔드 개발자

권형주

카카오스타일 BD

김재현

카카오스타일 Android enginner

박종혁

김효근

하종윤

지은

카카오스타일 CRM 데이터 분석가

이정대

yesdoing

카카오스타일 마케팅 콘텐츠 디자이너

고유진

정보석

카카오스타일(지그재그) 온사이트 마케터

정다인

카카오스타일 그로스 마케터

허유리

박지웅

뭉강

mayh

카카오스타일 CRM 마케터

제갈명

소프트웨어 엔지니어

escape3rd

최운식

이세영

카카오스타일 프론트개발자

김서현

카카오스타일 콘텐츠 기획

정다은

카카오스타일 브랜드 마케터

정영선

좐좐좐좐좐좐좐좐좐좐좐좐좐좐좐좐좐좐좐좐

김초원?

유정은

정종호

비즈니스마케팅, PR

정자영(cassie)

LeeJieyul

대철

카카오스타일 풀스택 개발자

한주

카카오스타일 UX리서처

박지영

카카오스타일 데이터분석가

김찬호

황성인

카카오스타일 매니저

윤상준

오경무

카카오스타일 SRE 엔지니어

카카오스타일

언어

프론트엔드

백엔드

데이터베이스

데브옵스

typescript

javascript

ExpressJS

Kotlin

React

GraphQL

Jotai

SpringBoot

apache kafka

Node.js

MySQL

mongodb

Redis

Elasticsearch

AWS RDS(with MySQL)

Kubernetes

Docker

Github

Argo CD

Datadog

Helm

Jenkins

재직자