Velopers
모든 블로그
미리디

미리디

도메인medium.com
주요 카테고리 AI · 프론트엔드

활동 요약

대표 인기 포스트AI Agent로 테스트 커버리지 100% 달성한 실전 전략 — Claude Code 활용기406 조회
최근 30일
7개
평균 조회
68
누적 조회
3,320
전체 글
49개
마지막 발행
2026. 11. 10.
블로그 방문

미리디 기술 블로그 글 (14)

프론트엔드

프로덕트 디자이너와 개발자를 연결하는 AX 프로젝트, AXPD스쿼드

AI 프로토타입이 개발 코드로 이어지지 못하는 디자인·개발 협업 병목을 분석했습니다. 공통 검증과 Storybook 하네스로 재사용 가능한 작업 경로를 마련합니다.

#Storybook#디자인 시스템#프로토타입
2700

프론트엔드

‘왜 이렇게 만들었을까’라는 질문으로 성장하는 웹 에디터 팀

웹 에디터 팀은 문제 정의와 설계 후 구현하는 방식으로 복잡한 편집 기능을 개발했습니다. 질문 중심 코드 리뷰와 기술 공유로 구조 설계 역량을 함께 키웠습니다.

#React#Jotai#디자인패턴
2200

프론트엔드

미리캔버스의 편집 로직을 책임지는 웹 에디터 팀 엔진 개발자들

미리캔버스 웹 에디터 팀이 편집 기능의 핵심 로직과 상태 구조를 설계하는 역할을 소개했습니다. MFA와 책임 분리 구조를 바탕으로 실시간 반응성·확장성을 확보하는 방식을 공유했습니다.

#MFA#객체지향#함수형 프로그래밍
2500

프론트엔드

미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기

브라우저에서 SVG 필터로 이미지 보정 기능을 구현하는 활용 사례를 다룹니다. 실제 프로젝트 적용 시 마주치는 실전 이슈를 중심으로 설명합니다.

#SVG#이미지 보정#브라우저
1300

프론트엔드

미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기

브라우저에서 SVG 필터로 이미지를 보정하는 글입니다. 다만 본문 접근이 차단되어 세부 내용은 확인할 수 없었습니다.

#SVG#브라우저#이미지
2500

프론트엔드

테스트가 늘수록 느려지던 CI, 16분에서 3분이 되기까지

미리캔버스 모노레포에서 테스트 수가 늘며 CI가 16분까지 느려졌습니다. 테스트 실행 구조를 개선해 CI 시간을 3분 수준으로 줄였습니다.

#CI/CD#test#모노레포
7100

프론트엔드

미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기

브라우저에서 SVG 필터로 이미지 보정 효과를 구현한 사례를 다룬 글입니다. 미리캔버스의 활용 영역에서 이미지 보정 필터 적용 맥락을 소개했습니다.

#SVG#browser#image processing
3200

프론트엔드

미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기

SVG 필터가 브라우저 렌더링 과정에서 어떻게 작동하는지, `fe*` 프리미티브와 `in`/`result`로 파이프라인을 구성하는 방식을 설명했습니다. 단순 보정은 CSS filter로, 복합 합성과 커스텀 효과는 SVG 필터로 나누어 선택하는 기준도 정리했습니다.

#SVG#CSS#browser
16600

프론트엔드

미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기

브라우저에서 이미지 보정을 구현할 때 SVG 필터를 활용하는 방법을 소개했습니다. 선언적 적용과 파이프라인 구성, React 연동의 장점을 중심으로 정리했습니다.

#SVG#React#CSS
3100

프론트엔드

모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [2/2]

미리캔버스 프론트엔드 모노레포의 CI/CD와 배포 구조를 설명했습니다. 빌드 아티팩트 분리와 Module Federation, manifest 기반 독립 배포, 관측 지표를 함께 다뤘습니다.

#모노레포#CI/CD#TypeScript
10600

프론트엔드

DOM Reflow 100번을 1번으로 줄였더니 60fps가 돌아왔다

캔버스 에디터 드래그 성능 저하의 원인을 React가 아닌 Layout Thrashing으로 분석했습니다. Read와 Write를 분리한 4-Phase 배칭으로 reflow를 줄여 60fps를 회복했습니다.

#React#DOM#모니터링
9600

프론트엔드

개인화 추천 템플릿 메인 페이지에 유저를 부드럽게 랜딩시키기

개인화 추천 템플릿 메인 페이지의 LCP 지연을 줄이기 위해 CSR을 유지한 채 전환 애니메이션과 네트워크·API·이미지 로딩 최적화를 적용했습니다. 그 결과 부드러운 랜딩을 확보하면서도 첫 화면 성능을 개선했습니다.

#성능#CSR#React
12200

프론트엔드

“더 빠르고, 자연스러운 경험을 만드는 웹&에디터팀”

미리캔버스 웹&에디터팀이 에디터 2.0의 모듈화와 UX 개선, 성능 최적화를 중심으로 일하는 방식을 소개했습니다. 또한 모니터링, 설계 리뷰, 테스트 코드로 안정성과 확장성을 높이는 과정을 공유했습니다.

#React#애니메이션#성능
4600

프론트엔드

“보이지 않는 곳에서 만드는 차이, 플랫폼팀이 만드는 효율과 성장의 무대”

프론트엔드 플랫폼팀이 서비스 안정성, DX, 성능 개선을 위해 맡는 역할을 소개했습니다. 또한 Micro Frontends, 모니터링, CI/CD로 대규모 웹 서비스를 운영하는 방향을 설명했습니다.

#Micro Frontends#React#Next.js
1800