브라우저 렌더링 성능을 고려하여 최적화를 진행한 경험이 있다면, 어떤 방법을 사용했는지 설명해 주세요. | 토스 프론트엔드 면접 질문

Q: 어떤 최적화 방법이 가장 효과적이었다고 생각하시나요?

면접관이 답변에 이어 던질 수 있는 후속 질문입니다.

Q: 이 방법을 사용하면서 어떤 어려움이 있었나요?

면접관이 답변에 이어 던질 수 있는 후속 질문입니다.

Q: 이 최적화를 통해 어떤 성과를 얻었나요?

면접관이 답변에 이어 던질 수 있는 후속 질문입니다.

토토스프론트엔드직무 역량2026년 출제

답변 미리보기

팀 프로젝트에서 리스트 컴포넌트가 데이터가 바뀌지 않았는데도 계속 리렌더링된다는 것을 React DevTools로 확인하였습니다. 원인을 분석해보니 부모

예상 답변 시간

60~90초

예상 꼬리질문

3회

난이도

난이도 중상

출제 빈도

높음

INTERVIEWER'S INTENT · 면접관의 의도

이 질문, 네 갈래로 뜯어봅니다.

면접관이 이 한 문장으로 확인하려는 것들. 각 갈래를 알면 답의 뼈대가 잡혀요.

렌더링 최적화 경험이 있는가?

웹 애플리케이션의 렌더링 성능 최적화 경험이 답에 있어야 합니다. 없으면 면접관이 '구체적으로 어떤 방법을 사용했나요?'를 추가로 묻는 경우가 자주 보입니다.

어떤 최적화 기법을 사용했는가?

사용한 최적화 기법의 구체적인 사례가 답에 포함된 흔적이 있어야 합니다. 없으면 면접관이 '그 외에 다른 방법은 없었나요?'를 질문하는 자리가 자주 보입니다.

성능 개선 결과는 어땠는가?

최적화 후 성능 개선에 대한 결과나 지표가 답에 있어야 합니다. 없으면 면접관이 '어떤 변화가 있었나요?'를 추가로 묻는 경우가 많습니다.

협업 과정에서의 역할은 무엇인가?

프로젝트 내에서 본인의 역할과 기여가 답에 나타나야 합니다. 없으면 면접관이 '그 과정에서 어떤 역할을 했나요?'를 추가로 묻는 경우가 자주 보입니다.

말로 해봐야 는다

읽는 것과 말하는 건 다릅니다.
이 질문, 소리 내어 답해 볼까요?

토스 면접관 페르소나가 이 질문을 던지고, 당신의 답에 꼬리질문으로 되물어요.

음성으로 답해보기

React 컴포넌트의 불필요한 리렌더링을 줄인 경험약 90초 이미지 포맷과 레이지 로딩으로 초기 로딩 속도를 개선한 경험약 90초 코드 스플리팅으로 초기 번들 크기를 줄인 경험약 90초

불필요 리렌더링 제거

약 90초

React 컴포넌트의 불필요한 리렌더링을 줄인 경험

팀 프로젝트에서 리스트 컴포넌트가 데이터가 바뀌지 않았는데도 계속 리렌더링된다는 것을 React DevTools로 확인하였습니다.

원인을 분석해보니 부모 컴포넌트가 렌더링될 때마다 자식에 새 객체를 props로 내려주어 같은 값이어도 참조가 달라지는 문제였습니다. useMemo와 useCallback으로 값을 메모이제이션하였더니 불필요한 리렌더링이 없어졌습니다. 처음에는 모든 컴포넌트에 적용하다가 오히려 코드가 복잡해진 실수가 있었으나, 실제로 느린 곳에만 적용하는 방식이 맞았습니다.

그 경험에서 최적화는 측정 없이 시작하면 오히려 복잡성만 늘어난다는 것을 배웠습니다. 느린 것이 눈에 보이는 곳에만 최적화를 적용하는 것이 원칙이 되었습니다. 그 경험 덕분에 한 단계 성장할 수 있었습니다.

이 결의 특징

불필요한 리렌더링을 React DevTools로 발견하고 useMemo·useCallback으로 개선한 흔적이 있습니다.

이 결이 통하는 자리

측정 없이 최적화를 시작하면 오히려 복잡성만 늘어난다는 관점이 답에 담겨 있을 때 면접관의 신뢰가 쌓이는 자리를 자주 봅니다.

이미지 최적화

약 90초

이미지 포맷과 레이지 로딩으로 초기 로딩 속도를 개선한 경험

서비스 배포 후 모바일에서 이미지가 많은 페이지 로딩이 5초 이상 걸린다는 피드백이 들어왔어요. Lighthouse로 분석해보니 이미지 최적화 점수가 낮았습니다.

두 가지를 했어요. 이미지를 WebP 포맷으로 변환하고, 스크롤 범위 밖 이미지는 레이지 로딩으로 나중에 불러오게 바꿨습니다. WebP 변환만으로 파일 크기가 평균 60% 줄었고, 레이지 로딩으로 초기에 요청하는 이미지 수가 반으로 줄었어요. 처음엔 레이지 로딩이 적용됐는지 확인을 안 했다가 일부 이미지가 아예 안 나오는 버그가 있었어요.

로딩 성능의 많은 부분이 이미지에서 온다는 걸 직접 확인하니 이후 프로젝트에서는 이미지 처리 방식을 항상 먼저 생각하게 됐어요. 코드 최적화보다 리소스 최적화가 먼저인 경우가 많다는 것도요. 그 경험이 성능을 리소스 관점에서도 보게 해줬습니다.

이 결의 특징

이미지 로딩 지연을 WebP 변환과 레이지 로딩으로 해결한 구체 수치가 담긴 흔적이 있습니다.

이 결이 통하는 자리

코드 최적화보다 리소스 최적화가 먼저인 경우가 많다는 관점이 구체적으로 담긴 답에서 통합니다.

코드 스플리팅 적용

약 90초

코드 스플리팅으로 초기 번들 크기를 줄인 경험

프로젝트 규모가 커지면서 초기 로딩 시간이 느려진다는 피드백이 반복됐어요. 번들 크기를 확인해보니 잘 사용하지 않는 페이지 코드까지 처음부터 다 받고 있었습니다.

React.lazy와 Suspense로 라우트별 코드 스플리팅을 적용했어요. 자주 쓰는 메인 페이지만 초기에 로드하고 나머지는 해당 페이지에 접근할 때 받아오는 방식이었습니다. 처음엔 Suspense 폴백이 없어서 로딩 중에 화면이 비는 문제가 있었는데, 로딩 스피너를 추가하면서 해결됐어요.

초기 번들 크기가 40% 줄었고 첫 페이지 로딩이 체감상 빨라졌어요. 사용자가 처음에 필요한 것만 주는 것이 전체를 다 주는 것보다 낫다는 걸 그 경험에서 배웠습니다. 그 경험이 번들 구조를 의식적으로 관리하는 계기가 됐어요.

이 결의 특징

번들 크기 문제를 코드 스플리팅으로 해결하며 Suspense 폴백 누락을 겪은 흔적이 있습니다.

이 결이 통하는 자리

사용자가 처음에 필요한 것만 주는 것이 전체를 다 주는 것보다 낫다는 관점이 답에 담겨 있을 때 면접관의 신뢰가 쌓이는 결이 보입니다.

위 답변은 여러 풀이 중 한 가지 예시입니다. 정답이 아니며, 외워서 그대로 말하면 면접관이 다음 질문을 그 자리에서 시작하는 경우가 많습니다. 본인의 프로젝트·기준·숫자로 다시 짜는 자리로만 쓰세요.

자주 빠지는 자리

같은 실수가 반복돼요. 이것만 피해도 절반은 갑니다.

떨어뜨린 옵션이 1개라도 있는가? "이게 답이었어요"만으로는 의사결정이 아니라 그냥 선택입니다.
선택 기준이 그 프로젝트에 한정되는가? "성능이 좋아서"는 일반론, "우리 트래픽이 X 패턴이라서"가 본인의 답입니다.
결과 숫자 1개를 정확히 말할 수 있는가? P95·QPS·적중률 — 무엇이든 1개. 숫자가 없으면 직감으로 한 일처럼 들리기 쉽습니다.
지금 다시 한다면 어떻게 할지 답할 수 있는가? "잘했다"보다 "이건 다르게 했을 것 같다"가 더 깊은 인상을 남깁니다.

이어질 꼬리질문

진짜 면접은 두 번째 질문부터예요. 이 답 뒤에 따라올 법한 것들.

壹어떤 최적화 방법이 가장 효과적이었다고 생각하시나요?

貳이 방법을 사용하면서 어떤 어려움이 있었나요?

參이 최적화를 통해 어떤 성과를 얻었나요?

이제, 직접 답해볼 차례예요.

눈으로 읽은 답은 면접장에서 나오지 않아요. 토스 면접관과 이 질문으로 한 번 대화해 보세요.

이 질문으로 모의면접 해보기

안내 · 이 페이지의 질문·답변·꼬리질문은 유사 직군 채용 시장의 공개된 면접 후기·커뮤니티 게시물을 분석해 구성한 학습 자료입니다. 실제 출제·회사 공식 입장과는 무관하며, 정정 요청 시 24시간 내 반영합니다. 자세히

개인정보처리방침 이용약관 문의

토토스프론트엔드직무 역량2026년 출제

답변 미리보기

팀 프로젝트에서 리스트 컴포넌트가 데이터가 바뀌지 않았는데도 계속 리렌더링된다는 것을 React DevTools로 확인하였습니다. 원인을 분석해보니 부모

예상 답변 시간

60~90초

예상 꼬리질문

3회

난이도

난이도 중상

출제 빈도

높음

INTERVIEWER'S INTENT · 면접관의 의도

이 질문, 네 갈래로 뜯어봅니다.

면접관이 이 한 문장으로 확인하려는 것들. 각 갈래를 알면 답의 뼈대가 잡혀요.

렌더링 최적화 경험이 있는가?

어떤 최적화 기법을 사용했는가?

성능 개선 결과는 어땠는가?

최적화 후 성능 개선에 대한 결과나 지표가 답에 있어야 합니다. 없으면 면접관이 '어떤 변화가 있었나요?'를 추가로 묻는 경우가 많습니다.

협업 과정에서의 역할은 무엇인가?

말로 해봐야 는다

읽는 것과 말하는 건 다릅니다.
이 질문, 소리 내어 답해 볼까요?

토스 면접관 페르소나가 이 질문을 던지고, 당신의 답에 꼬리질문으로 되물어요.

음성으로 답해보기

불필요 리렌더링 제거

약 90초

React 컴포넌트의 불필요한 리렌더링을 줄인 경험

팀 프로젝트에서 리스트 컴포넌트가 데이터가 바뀌지 않았는데도 계속 리렌더링된다는 것을 React DevTools로 확인하였습니다.

이 결의 특징

불필요한 리렌더링을 React DevTools로 발견하고 useMemo·useCallback으로 개선한 흔적이 있습니다.

이 결이 통하는 자리

측정 없이 최적화를 시작하면 오히려 복잡성만 늘어난다는 관점이 답에 담겨 있을 때 면접관의 신뢰가 쌓이는 자리를 자주 봅니다.

이미지 최적화

약 90초

이미지 포맷과 레이지 로딩으로 초기 로딩 속도를 개선한 경험

이 결의 특징

이미지 로딩 지연을 WebP 변환과 레이지 로딩으로 해결한 구체 수치가 담긴 흔적이 있습니다.

이 결이 통하는 자리

코드 최적화보다 리소스 최적화가 먼저인 경우가 많다는 관점이 구체적으로 담긴 답에서 통합니다.

코드 스플리팅 적용

약 90초

코드 스플리팅으로 초기 번들 크기를 줄인 경험

이 결의 특징

번들 크기 문제를 코드 스플리팅으로 해결하며 Suspense 폴백 누락을 겪은 흔적이 있습니다.

이 결이 통하는 자리

사용자가 처음에 필요한 것만 주는 것이 전체를 다 주는 것보다 낫다는 관점이 답에 담겨 있을 때 면접관의 신뢰가 쌓이는 결이 보입니다.

자주 빠지는 자리

같은 실수가 반복돼요. 이것만 피해도 절반은 갑니다.

떨어뜨린 옵션이 1개라도 있는가? "이게 답이었어요"만으로는 의사결정이 아니라 그냥 선택입니다.
선택 기준이 그 프로젝트에 한정되는가? "성능이 좋아서"는 일반론, "우리 트래픽이 X 패턴이라서"가 본인의 답입니다.
결과 숫자 1개를 정확히 말할 수 있는가? P95·QPS·적중률 — 무엇이든 1개. 숫자가 없으면 직감으로 한 일처럼 들리기 쉽습니다.
지금 다시 한다면 어떻게 할지 답할 수 있는가? "잘했다"보다 "이건 다르게 했을 것 같다"가 더 깊은 인상을 남깁니다.

이어질 꼬리질문

진짜 면접은 두 번째 질문부터예요. 이 답 뒤에 따라올 법한 것들.

壹어떤 최적화 방법이 가장 효과적이었다고 생각하시나요?

貳이 방법을 사용하면서 어떤 어려움이 있었나요?

參이 최적화를 통해 어떤 성과를 얻었나요?

이제, 직접 답해볼 차례예요.

눈으로 읽은 답은 면접장에서 나오지 않아요. 토스 면접관과 이 질문으로 한 번 대화해 보세요.

이 질문으로 모의면접 해보기

개인정보처리방침 이용약관 문의