프론트 개발 블로그

CORE WEB VITALS (웹 성능 지표)

maybe.b50 — Mon, 13 Jul 2026 10:05:50 +0900

Core Web Vitals는 구글이 정의한 웹페이지의 실제 사용자 경험 품질을 측정하는 3가지 핵심 지표예요.

검색 순위(SEO)에도 영향을 미침.

1. LCP (Largest Contentful Paint) — 로딩 속도

뭘 측정하나: 화면에서 가장 큰 콘텐츠(보통 히어로 이미지, 큰 텍스트 블록)가 렌더링되는 시점
의미: "사용자가 페이지의 주요 콘텐츠를 봤다고 느끼는 시점"
기준:
- 좋음: 2.5초 이하
- 개선 필요: 2.5~4초
- 나쁨: 4초 초과
원인: 느린 서버 응답, 렌더링 차단 CSS/JS, 최적화 안 된 이미지 등

2. INP (Interaction to Next Paint) — 반응성

뭘 측정하나: 사용자가 클릭/탭/키 입력했을 때, 화면이 실제로 반응하기까지 걸리는 시간
의미: "버튼 눌렀는데 왜 안 눌리지?" 하는 그 느낌을 수치화한 것
기준:
- 좋음: 200ms 이하
- 개선 필요: 200~500ms
- 나쁨: 500ms 초과
참고: 2024년 3월부터 기존 FID(First Input Delay)를 대체한 지표예요. FID는 "첫 입력까지의 지연"만 봤다면, INP는 페이지 생애 전체의 모든 인터랙션을 다 측정해서 더 엄격해요.
원인: 무거운 JS 실행, 메인 스레드 블로킹, 불필요한 리렌더링(React에서 자주 발생)

3. CLS (Cumulative Layout Shift) — 시각적 안정성

뭘 측정하나: 페이지 로딩 중 요소들이 갑자기 움직이는 정도(레이아웃이 얼마나 "덜컹거리는지")
의미: 글 읽으려는데 광고 로딩되면서 버튼이 밀려서 잘못 클릭되는 그 경험
기준:
- 좋음: 0.1 이하
- 개선 필요: 0.1~0.25
- 나쁨: 0.25 초과
원인: 크기 지정 안 된 이미지/광고, 동적으로 삽입되는 콘텐츠, 웹폰트 로딩으로 인한 텍스트 리플로우

실무에서 자주 만나는 개선 포인트

지표 퍼블리싱/프론트엔드 관점 실전 팁

LCP	<img>에 width/height 명시, 이미지 lazy loading, 폰트 preload
INP	이벤트 핸들러 안에서 무거운 연산 피하기, React라면 useMemo/useCallback으로 불필요한 재계산 줄이기
CLS	이미지/광고 영역 aspect-ratio로 미리 확보, 웹폰트는 font-display: swap + 폴백 폰트 크기 맞추기

측정은 크롬 개발자도구의 Lighthouse 탭이나 PageSpeed Insights에서 바로 확인 가능해요. 실제 유저 데이터 기준으로 보려면 Chrome UX Report(CrUX) 나 구글 서치 콘솔의 "핵심 웹 지표" 리포트를 보시면 됩니다.

ender-blocking requests- est saving of 580 ms Requests are blocking the page's initial render, which may delay LCP. Deferring of inliinging can move these network reqeusts out of the critial path. FCP / LCP, unscored

You're loading fonts wrong(and it's cripping your performance)

maybe.b50 — Sun, 14 Sep 2025 21:50:53 +0900

글꼴 설정이 왜 잘못되었는지, 이를 수정하는 방법

https://www.jonoalderson.com/performance/youre-loading-fonts-wrong/?utm_source=Nomad+Academy&utm_campaign=6c590e1186-EMAIL_CAMPAIGN_2025_09_05&utm_medium=email&utm_term=0_4313d957c9-7ac123137e-158246701

MUI - material UI, MUI base, JOY UI, MUI System 차이

maybe.b50 — Fri, 25 Jul 2025 09:14:49 +0900

Material UI (@mui/material)	구글 머티리얼 디자인 기반 UI 컴포넌트	가장 널리 쓰임. 버튼, 다이얼로그, 셀렉트 등 포함
MUI Base (@mui/base)	스타일 없는 순수 기능 컴포넌트	스타일링 자유도 높음 (headless UI)
Joy UI (@mui/joy)	MUI 팀이 만든 다른 디자인 시스템	머티리얼이 아닌, 감성적이고 우아한 UI 디자인
MUI System (@mui/system)	스타일 유틸리티 (spacing, layout 등)	Emotion 기반의 스타일링 도구 모음

PMG 공정도란?

maybe.b50 — Fri, 9 May 2025 08:55:05 +0900

1. PMG = Project Master Gantt 의 약자로 전체 프로젝트의 공정(Plan & Schedule)을 Gantt Chart 형식으로 정리한 마스터 일정표를 말함.

공정도란? 작업 순서와 기간을 시각적으로 표현한 도표. 일반적으로 Gantt 차트 형태.

PMG 공정도는 보통 다음 내용을 포함합니다:

전체 작업(WBS: Work Breakdown Structure)
각 작업의 시작일/종료일
선행 작업/후속 작업 간 의존 관계
주요 마일스톤
일정 지연/진행률 표시 등

[Eclipse] 이클립스 compare 화면 안보일 때

maybe.b50 — Tue, 29 Nov 2022 16:45:34 +0900

소스 충돌 해결 하고자 compare 화면을 보고자 했는데 소스 비교 화면이 보이질 않음.

이클립스가 평소에도 느려서 이클립스 문젠가 싶었는데, Javascript 비교 버그 중 하나라고(StackOverflow) 함.

window >> preferences >> compare/Patch
open structure compare automatically 체크박스 해제

(읽어보기)

-> Javascript 비교 관련 버그라고 한다.

https://stackoverflow.com/questions/10457639/eclipse-compare-editor-stopped-showing-detailed-differences

SASS Function을 활용한 px -> rem 단위 변환

maybe.b50 — Tue, 25 Oct 2022 14:16:41 +0900

SASS Function을 활용한 px -> rem 단위 변환

// px to rem
$rem-base: 16px !default;

// STRIP UNIT 
// 측정 단위를 제거하고 반환 
@function strip-unit($num) {
    @return $num / ($num * 0 + 1);  // 10 / 10 * 0 + 1 
}

// CONVERT TO REM
@function convert-to-rem($value, $base-value: $rem-base) {  
    $value: strip-unit($value) / strip-unit($base-value) * 1rem; 
    @if($value == 0rem) {
        $value: 0;
    }
    @return $value;
}

// REM CALC
// rem-calc(10 20 30px 40);
// rem-calc(10);
@function rem-calc($values, $base-value: $rem-base) {
    $max: length($values); 
    @if $max == 1 {
        @return convert-to-rem(nth($values, 1), $base-value);  
    }
    $remValues: ();
    @for $i from 1 through $max {
        $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
    }
    @return $remValues;
}

설명

SASS의 Function 기능을 활용하여 디자인 상에 표현되는 px 값을 rem 으로 자동 변환하여 플렉시블 하게 여백 값을 사용할 수 있다.

디자인 상 h1 요소에 padding-top 의 값이 10px 로 표현 되어 있을 때, 아래와 같이 rem-calc 함수를 통해 padding-top 값을 작성한다.

h1 {padding-top: rem-clac(10);}

rem-calc 함수 설명

$rem-base: 16px !default;

@function rem-calc($values, $base-value: $rem-base) {
    $max: length($values); 
    @if $max == 1 {
        @return convert-to-rem(nth($values, 1), $base-value);  
    }
    $remValues: ();
    @for $i from 1 through $max {
        $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
    }
    @return $remValues;
}

- $rem-base 의 값은 브라우저의 기본 폰트 크기

- length() 는 해당 리스트의 갯수를 반환한다.

- nth($list, $n) 는 두번째 값이 n이고 두번째 값의 n번째 인덱스 값을 반환함.

- append($list, $value) 는 리스트 마지막 요소의 $value 를 추가 함

2-1. $max 값이 1과 같을 경우 convert-to-rem 함수 리턴

2-2. $max 값이 1이 아닌 경우 for 문을 통해서 $max 수까지 반복하여 $remValues에 아래의 값이 append 됨

convert-to-rem 함수 설명

// STRIP UNIT 
// 측정 단위를 제거하고 반환 
@function strip-unit($num) {
    @return $num / ($num * 0 + 1);   // 16px / (16px * 0 + 1)
}

// CONVERT TO REM
@function convert-to-rem($value, $base-value: $rem-base) {  
	// convert-to-rem(nth(10, 1), 16)
    // convert-to-rem(10, 16)
    
    $value: strip-unit(10) / strip-unit(16) * 1rem;  // 1 / 16 * 1 = 0.625rem
    @if($value == 0rem) {
        $value: 0;
    }
    @return $value;
}

- SASS 에서 단위를 제거 하려면 1로 나눠야지 제거 가능함. (하기 strip-unit-function 참고)

https://css-tricks.com/snippets/sass/strip-unit-function/

https://sass-lang.com/documentation/values/lists#access-an-element

http://megaton111.cafe24.com/2017/01/16/sass-%EB%AC%B8%EB%B2%95-%EB%82%B4%EC%9E%A5%ED%95%A8%EC%88%98%ED%99%9C%EC%9A%A9-%EB%B9%88%EB%8F%84%EA%B0%80-%EB%86%92%EC%9D%80-%ED%95%A8%EC%88%98%EB%93%A4/

[git error] github에 README.md 파일 생성 후 push rejected 발생

maybe.b50 — Mon, 24 Oct 2022 11:37:33 +0900

https://jobc.tistory.com/177

git push, pull (fatal: refusing to merge unrelated histories) 에러

원격 저장소를 remote로 설정하고 바로 push를 하면 몇가지 오류가 발생할 수도 있다. 예를 들어 아래와 같은 오류 메시지이다. 1 2 ! [rejected] master -> master (non-fast-forward) error: failed to push som..

jobc.tistory.com

위으 블로그 덕분에 해결할 수 있었음.

1. git push origin main 실행 시 아래와 같이 rejected 발생

! [rejected]        main -> main (non-fast-forward)
error: failed to push some refs to 'https://github.com/xxx/xxx.git'

- Github에서 Repository 생성 시 README.md 파일 생성 함.

로컬 저장소에서 셋팅 된 소스를 push 하려고 했는데 위와 같이 rejected 되었다.

- non-fast-foward : 원격 저장소의 main 브랜치가 로컬 저장소의 버전보다 이전버전이 아니다 라는 의미

- 원격저장소에서 생성한 readme.md 파일의 이력이 로컬 저장소의 커밋 이력에는 없기 때문에 발생 된 에러.

해결방법으로 readme.md 파일이 없이 저장소를 만들고 push 하거나 원격저장소의 마지막 commit(README.md 커밋이력)을 로컬 저장소의 commit 로그의 맨 앞으로 받아오는 방법이 있다.

2. git pull 로 원격저장소 이력을 가져오려고 했더니, 관련없는 히스토리이므로 merge 가 거부됨

git pull origin main
fatal: refusing to merge unrelated histories

- pull 명령어는 fetch + merge 를 한꺼번에 처리하는 명령어

- mege는 로컬 저장소와 원격 저장소가 공통으로 가지고 있는 commit 지점이 존재해야 그 지점부터 병합을 시도하기 때문에 위의 경우 pull 명령어를 사용할 수 없다.

3. pull 명령어에 옵션을 추가해 강제로 pull 함

git pull origin (branchname) --allow-unrelated-histories

- 강제로 pull 했을 때 로컬저장소 README.md 파일과 원격저장소 README.md 파일이 충돌하여 conflict 발생함

* branch            main       -> FETCH_HEAD
Auto-merging README.md
CONFLICT (add/add): Merge conflict in README.md
Automatic merge failed; fix conflicts and then commit the result.

4. 충돌난 부분 수정하여 다시 add, commit 하여 push 함

[JSP] 서블릿 예외처리 response.sendError()

maybe.b50 — Wed, 12 Oct 2022 13:50:36 +0900

response.sendError(HTTP상태코드, 에러메세지)

HttpServletResponse : HTTP 응답정보를 처리하는 객체

<%
response.sendError(HttpServletResponse.SC_FORBIDDEN); // 403 에러 발생 
response.sendError(HttpServletResponse.SC_NOT_FOUND); // 404 에러 발생 
%>

https://velog.io/@jihyeonee/%EC%8A%A4%ED%94%84%EB%A7%81-MVC-2%ED%8E%B8-%EC%98%88%EC%99%B8-%EC%B2%98%EB%A6%AC%EC%99%80-%EC%98%A4%EB%A5%98-%ED%8E%98%EC%9D%B4%EC%A7%80

https://tomcat.apache.org/tomcat-5.5-doc/servletapi/javax/servlet/http/HttpServletResponse.html

Javascript 중복 클릭 방지

maybe.b50 — Tue, 27 Sep 2022 11:17:30 +0900

https://itworldyo.tistory.com/136

submit 중복 클릭 막기

submit 중복 클릭 막기 중복 클릭으로 인해 가장 많이 발생하는 문제가 있습니다. 폼을 전송할 때 클릭이 2번 이상 발생하면서 폼이 2번 전송되어 2중으로 저장되는 경우입니다. 이러한 경우에

itworldyo.tistory.com

버튼 클릭 시 중복 이벤트 방지

// 클릭 시 버튼 비활성화
	$('#btn').prop('disable', true);


OR 

const btnElem = document.querySelector('#btn');
btnElem.addEventListener('click', function(e) {
	this.setAttribute("disabled", "disabled");
    // Submit 
});

Galaxy Flip viewport size

maybe.b50 — Fri, 2 Sep 2022 09:46:25 +0900

기종	Viewport 화면 사이즈 (W x H)	해상도 Phys. (W x H)	인치	DPR (Device Pixel Ratio)
Galaxy Flip3	384 x 939	1080 x 2640 260 x 512	6.7	2.8125
Galaxy Flip2			6.7
Galaxy Flip	412 x 1004	1080 x 2636 112 x 300	6.7
Galaxy Z Fold3	접힌화면 320 x 872 넓은화면 674 x 842	접힌화면 840 x 2289 넓은화면 1769.25 x 2210.25		2.625
Galaxy Z Fold2	884 x 1104	1768 x 2208	7.6	2
Galaxy Fold	768 x 1076	1536 x 2152	7.3	2