도메인 지식 없는 디자이너가 팀의 기준을 바꾼 방법
해외송금 디자인에서 수수료보다 큰 가치는 사용자의 불안을 줄이는 경험이라는 점을 발견했습니다. 인터뷰와 팀의 직접 경험을 통해 제품 기준을 바꾸고 송금 상태와 입력 과정을 단순화했습니다.
#UI/UX#API
5600
프론트엔드 기술 블로그 최신 글
필터 0
배달의민족 전자계약서 화면 개편기: AI에게 맡긴 것과 사람이 챙긴 것
배달의민족 전자계약서 화면 개편기: AI에게 맡긴 것과 사람이 챙긴 것
전자계약서 화면을 AI와 함께 다시 설계하고, 뷰·폼·스토어로 나눠 구현한 과정을 소개했습니다. AI는 반복 구현을 맡기고 사람은 경계 설정과 명세 승인, 최종 품질 확인을 담당했습니다.
#React#디자인 시스템
1600
사용자를 위해 일부러 어렵게 만드는 경험, 어디까지 괜찮을까?
10대 저축을 돕는 잠금 저금통을 만들며, 일부러 어렵게 만드는 경험의 기준을 정리했습니다. 사용자에게 죄책감 대신 선택권과 응원을 남기는 설계를 강조했습니다.
#UI/UX#인터랙션
9100
AI 코딩 시대, 테스트의 역할
AI 코딩으로 테스트 작성 비용이 낮아지면서, 테스트의 역할이 구현 검증을 넘어 요구사항 정의와 완료 조건 설정까지 확장된다고 설명했습니다. 프론트엔드 TDD 적용 방식과 AI 코딩 어시스턴트와의 궁합도 함께 정리했습니다.
#TDD#Testing Library
5200
SpreadJS 엑셀 로딩 성능 최적화2
React와 TypeScript 기반 SpreadJS Excel 상세 화면의 초기 로딩 지연을 단계별 측정으로 분석했습니다. 모든 시트에 바인딩하던 구조를 필요한 시트만 처리하도록 바꿔 로딩 시간을 약 40~50% 줄였습니다.
#React#TypeScript
2600
Storybook으로 만든 독립적인 UI 개발 환경
Storybook으로 UI 상태를 독립적으로 재현해 개발 환경 준비에 덜 의존하도록 구성했습니다. 실제 API 연동과 화면 흐름은 기존 개발 환경에서 분리해 확인했습니다.
#Storybook#Vite
5800
집 나간 네트워크는 돌아왔는데 React.lazy는 왜 안 돌아올까
집 나간 네트워크는 돌아왔는데 React.lazy는 왜 안 돌아올까
네트워크 복구 후에도 React.lazy 재시도가 막히는 이유를 모듈 맵 캐시로 설명했습니다. 정적 import 전환과 사전 로딩으로 오류를 해결했습니다.
#React#Vite
1100
테스트가 늘수록 느려지던 CI, 16분에서 3분이 되기까지
테스트가 늘수록 느려지던 CI, 16분에서 3분이 되기까지
미리캔버스 모노레포에서 테스트 수가 늘며 CI가 16분까지 느려졌습니다. 테스트 실행 구조를 개선해 CI 시간을 3분 수준으로 줄였습니다.
#CI/CD#test
6800
Main Thread Blocking 개선 사례
수만 건 Grid 화면에서 Cell 계산과 데이터 조합이 반복되며 Main Thread Blocking이 발생했습니다. 사전 집계와 계산 결과 재사용으로 반복 연산을 줄여 개선했습니다.
#성능#Main Thread
3700
항공 프론트엔드 구축기 (9/10): 쓰자고 해 놓고 안 썼습니다
항공 프론트엔드 구축기 (9/10): 쓰자고 해 놓고 안 썼습니다
항공 프론트엔드 구축기 연재에서 상태관리 주제를 다뤘습니다.
#React#상태관리
3800
항공 프론트엔드 구축기 (8/10): 토큰이 세 군데서 온다
항공 프론트엔드 구축기 (8/10): 토큰이 세 군데서 온다
항공 프론트엔드에서 인증 토큰이 여러 경로로 들어오는 문제를 다룬 글입니다. 본문 접근 제한으로 세부 내용은 확인할 수 없었습니다.
#인증#토큰
4200
App Router의 장점은 우리에게도 장점일까요?
App Router와 RSC의 장점을 실제 서비스에 적용해 검토했지만, 전환과 운영 비용이 더 크다고 판단했습니다. 토스뱅크는 일부 이득보다 안정성과 기존 기능 호환성을 우선해 Pages Router를 유지하기로 했습니다.
#Next.js#React Server Components
12900
이제 디자이너가 PR을 올립니다
디자이너가 AI와 프로덕션 레포에서 직접 PR을 만들고 엔지니어 리뷰로 배포하는 워크플로우를 공유했습니다. 디자인 시스템·자동 검증·보안·리뷰 정책을 갖춰 핸드오프 지연과 구현 손실을 줄였습니다.
#design-system#pull-request
400
미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
브라우저에서 SVG 필터로 이미지 보정 효과를 구현한 사례를 다룬 글입니다. 미리캔버스의 활용 영역에서 이미지 보정 필터 적용 맥락을 소개했습니다.
#SVG#browser
3200