프론트엔드10분
코드 분할과 지연 로딩: 기능을 지우지 않고 첫 화면을 가볍게 하는 법
「체스, 지뢰찾기, 스티커 메모를 빼면 앱이 가벼워지고 빨라질까?」 웹 데스크톱에 메모 앱을 하나 더 붙인 뒤 이 질문이 나왔습니다. 기능이 늘수록 첫 화면이 무거워지는 건 당연해 보였고, 가장 쉬운 답은 덜 쓰는 앱을 지우는 것이었습니다.
전체 태그
#frontend 12개 글
- 프론트엔드8분
웹 퍼블리셔와 프론트엔드 개발자 차이: 산출물이 갈리는 지점
견적서에 이런 두 줄이 나란히 놓이는 경우가 있습니다.
- 디자인 시스템10분
색 테마 20종을 위한 리팩토링: 하드코딩된 색 100곳과 캔버스 모듈 분리
회사 홈페이지에 색 테마를 붙였습니다. 다크·라이트는 이미 있었고, 거기에 색 팔레트를 고르는 축을 하나 더 얹는 일이었습니다.
- 프론트엔드9분
디자인 시스템을 씌우기 전에 레이아웃 틀부터 맞춰야 하는 이유
같은 디자인 시스템을 사용하는데도 어떤 화면은 정돈되어 보이고, 어떤 화면은 미묘하게 어긋나 보일 때가 있습니다. 색상과 버튼 모양이 같아도 페이지 폭, 여백, 제목 위치, 입력 필드의 구성이 제각각이면 전체 인상은 쉽게 흐트러집니다.
- 프론트엔드7분
Next.js는 운영에서 멀쩡한데 로컬 개발 서버에서만 UI가 먹통이 되는 이유
Next.js 애플리케이션은 운영 빌드가 안정적이면 개발 서버도 같은 방식으로 움직일 것 같지만, 둘은 클라이언트 코드의 수명이 다릅니다. 제가 확인한 환경은 Next.js 16.2.7과 Turbopack이었고, 운영 사이트에서는 잘 눌리던 상단 메뉴가 로컬 개발 서버에서만 간헐적으로 먹통이 됐습니다.
- 프론트엔드6분
9개의 글자로 만든 DUOLABS AI STUDIO 브랜드 인트로 제작기
브랜드 인트로를 만들면서 출발점은 로고 모양이 아니라 문자 수였습니다. DUOLABS AI STUDIO를 적어 놓고 중복을 걷어내니 남는 글자는 D, U, O, L, A, B, S, I, T 아홉 개였습니다. 3×3 격자 하나를 채우기에 정확한 숫자였습니다.
- 프론트엔드6분
스크롤바가 없는데 화면 오른쪽에 빈 여백이 생기는 이유
웹 앱의 화면 가장자리는 평소에는 눈에 잘 들어오지 않습니다. 콘텐츠와 배경이 자연스럽게 이어지면 굳이 볼 이유가 없기 때문입니다. 그런데 여러 화면을 확인하던 중 오른쪽 끝에 비어 보이는 세로 띠가 계속 눈에 걸렸습니다. 어떤 화면에서는 나타나고, 어떤 화면에서는 덜 보였습니다.
- 프론트엔드15분
디자인 시안을 웹으로 옮기는 순서: 시맨틱 HTML·토큰·컴포넌트
디자인 시안을 웹으로 옮길 때 핵심은 픽셀을 그대로 복사하는 것이 아니라, 콘텐츠의 의미와 반복 규칙을 브라우저가 이해할 수 있는 구조로 번역하는 것이다. 이 글에서는 시맨틱 HTML, 디자인 토큰, 컴포넌트, 반응형 규칙을 이용해 시안을 유지보수 가능한 코드로 구현하는 순서를 살펴본다.
- 디자인 시스템19분
웹 디자인 레이아웃의 기본: 콘텐츠 흐름부터 반응형 그리드까지
웹 레이아웃은 화면을 몇 칸으로 나눌지 정하는 작업이 아닙니다. 콘텐츠의 읽기 순서를 먼저 세우고, 넓이가 달라져도 그 순서와 기능이 무너지지 않도록 공간의 규칙을 만드는 작업입니다.
- 프론트엔드9분
Google 번역을 켰더니 React 앱이 오류 화면으로 바뀐 이유
한국어, 영어, 일본어, 중국어를 직접 제공하는 React 랜딩 페이지에서 예상하지 못한 문제가 생겼습니다. Chrome이 띄운 "이 페이지를 번역하시겠습니까?" 제안을 수락하면 번역이 시작되는 듯하다가, 잠시 뒤 사이트의 "일시적인 오류가 발생했습니다" 화면으로 바뀌었습니다.
- 디자인 시스템2분
디자인 시스템 이름을 짓는 방법: 오래 가는 네이밍 전략
디자인 시스템을 운영하다 보면 버튼, 컬러, 레이아웃보다 먼저 부딪히는 문제가 있습니다. 바로 이름입니다. 이름은 문서 구조, 패키지명, 컴포넌트 철학, 팀 내 커뮤니케이션에 계속 영향을 줍니다.
- 프론트엔드3분
클릭했는데 화면이 늦게 바뀌는 느낌을 줄이는 방법
사용자가 버튼이나 링크를 눌렀는데 아무 반응이 없는 것처럼 보이면, 실제 로딩 시간이 길지 않아도 서비스가 느리다고 느낍니다. 이 문제는 단순한 성능 문제가 아니라 체감 성능과 피드백의 문제입니다.