미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
SVG 필터는 어떻게 작동할까 | DX개발그룹 엔진팀 김준 1부. 브라우저에 이미 포토샵이 숨어 있다. SVG 필터가 어떤 구조로 작동하는지, 필터 프리미티브가 서로 어떻게 연결되는지 살펴봅니다. CSS filter와는 무엇이 다르고, 어떤 상황에서 SVG 필터를 선택하면 좋은지도 함께 알아봅니다. 1–1. <filter>와 fe* 프리미티브 구조 SVG…
미리디 블로그
기업최근 글
미리디 블로그기업
미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
들어가며 | DX개발그룹 엔진팀 김준 이미지에 블러를 적용하고 밝기와 채도를 조절하는 일은 포토샵에서는 몇 번의 클릭으로 끝납니다. 반면 웹 브라우저에서 같은 기능을 구현하려면 Canvas나 WebGL 같은 별도의 이미지 처리 기술이 필요하다고 생각하기 쉽습니다. 하지만 브라우저에는 이미 이미지 효과를 처리할 수 있는 기능이 내장되어 있습니다. 바로 SVG…
micro frontends가 미리캔버스 프론트엔드팀이 일하는 방식을 바꾸는 이유
DX개발그룹 프론트엔드팀 김종현님 큰 프로덕트를 오래 운영하다 보면, 코드가 어떻게 짜여 있느냐와 무관하게 반복해서 만나는 문제들이 있습니다. 처음에는 개별 사건처럼 보이지만, 시간이 쌓이면 같은 형태로 돌아옵니다. 우리도 그랬습니다. 이 글은 우리가 어떤 두 종류의 문제를 만났고, 왜 마이크로 프론트엔드(이하 MFE)를 다음 세대 아키텍처로 선택했는지,…
통합 검색 임베딩 모델 개발기: 디자인 검색을 하나의 표현 공간으로 묶기
00. 시작하기에 앞서 안녕하세요. 미리디 AI팀 검색파트의 김정준, 장시온입니다. 이번 글에서는 기존 검색 구조의 한계를 극복하기 위한 통합 임베딩 모델의 도입 배경, 단일 모델로 해결하고자 했던 주요 검색 과제들, 그리고 Qwen3-VL-Embedding을 활용한 구체적인 파인튜닝 전략까지 설명 드리고자 합니다. 01. 왜 통합 검색 임베딩이 필요했나…
AI와 코드 사이: 이미지 한 장을 편집 가능한 레이어로 되돌리기
안녕하세요. 미리디 DX개발그룹 엔진팀 프론트엔드 개발자 김민성입니다. 처음엔 이미지 한 장을 통째로 생성형 모델에 넣고 “편집 가능하게 분해해줘”라고 시켰습니다. 그럴듯한 게 나왔는데 두 가지가 걸렸어요. 한 장 분해하는 데 0.6~0.8달러가 들었고, 무엇보다 각 요소가 미묘하게 다른 형태로 바뀌어 있었습니다. 생성형 모델이 원본을 지킨 게 아니라 ‘다…
모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [2/2]
1편에서는 모노레포의 개념들과 미리캔버스가 모노레포를 구성하는 방법에대해서 간단하게 살펴보았습니다. 2편에서는 실제로 미리캔버스의 모노레포가 어떻게 동작하는지, 그리고 모노레포가 동작하는 플랫폼이 서비스 아키텍처를 어떻게 뒷받침하고 있는지 살펴보려고 합니다. CI/CD의 흐름부터 플랫폼의 관점에서 모노레포를 이해하는방법까지 살펴보려고 합니다. CI의 아키텍…
모노레포가 미리캔버스 프론트엔드 아키텍처를 뒷받침 하는 방법 [1/2]
모노레포 도입하는데 고민되시나요? 잘 찾아오셨습니다 🤗 많은 팀이 모노레포(Monorepo)를 도입합니다. 이유는 늘 비슷합니다. 여러 서비스에서 코드를 공유하고 싶고, 패키지들을 한 곳에서 일관되게 관리하고 싶고, CI/CD 파이프라인을 통일하고 싶습니다. 처음 몇 달은 정말 좋습니다. 패키지 하나를 수정하면 모든 앱에 즉시 반영되고, 공통 컴포넌트를 한…
사람도 기계도 읽는 규약: 예측 가능한 AI 제품 만들기
안녕하세요. 미리디 DX개발그룹 엔진팀 프론트엔드 개발자 김민성입니다. AI에게 JSON 형식을 정해줘도 스키마에 없는 값이 나올 때가 있습니다. Prism Lens를 만들 때 도형 종류 자리에 정의되지 않은 hexagon이 들어왔어요. 이런 값이 오면 보통 로직은 거기서 멈추거나 원치 않은 결과물이 나오게 됩니다. 처음엔 그 필드의 .catch(‘rect…
AI 스타일 검색 2편 : 듀얼 벡터 검색과 OpenSearch 3.3 버전업
1편에서는 키워드 노이즈 문제를 해결하기 위해 Efficient KNN Filtering(Pre-filter)을 도입하고, 검색 품질과 채택률을 개선한 과정을 다뤘습니다. 이번 2편에서는 그 위에 비주얼 벡터를 추가한 듀얼 벡터 검색 을 설계하고, 이를 안정적으로 운영하기 위해 OpenSearch 3.3으로 버전업 하기까지의 여정을 공유합니다. 지난 이야기…
DOM Reflow 100번을 1번으로 줄였더니 60fps가 돌아왔다
캔버스 에디터에서 Layout Thrashing을 해결한 방법 소개 캔버스에서 요소들 여러개를 드래그했을 뿐인데 화면이 버벅이는 문제가 있었습니다. 처음에는 React 렌더링 비용이 원인이라고 생각했습니다. 사용자가 요소를 움직일 때 실제로는 해당 요소만 이동하는 것이 아니었습니다. 그룹의 경우 내부 요소들, 연결된 선, 스냅 가이드라인까지 함께 갱신되면서…
서버 0대, 브라우저 SLM으로 만든 차트 추천 봇
스프레드시트를 열고 어떤 차트를 써야 할지 고민해본 적 있나요? 매출 데이터가 담긴 스프레드시트를 열었습니다. 컬럼은 6개, 행은 20줄입니다. 이걸 차트로 보여줘야 하는데 막대 차트가 맞을지, 꺾은선 차트가 좋을지, 파이 차트로 보여줘도 되는지 고민하기 시작하면 데이터보다 차트 종류를 고르는 데 더 많은 시간을 쓰게 됩니다. 이 글에서는 CSV나 테이블…
MAU 성장 레버, 데이터로 증명하기 — 연관도·코호트·퍼널·SHAP 분석 실전
안녕하세요, 미리디 DA팀 서유진입니다. 올해 초 그로스 스쿼드에 합류하면서 전달받은 스쿼드의 미션은 단 한 줄이었습니다. 바로 MAU를 상승시키는 것. 분석가가 조직에 가장 크게 기여할 수 있는 방향은, 스쿼드원들이 동일한 리소스를 투입했을 때 가장 큰 임팩트를 낼 수 있는 액션이 무엇인지를 데이터로 좁혀주는 일이라고 생각합니다. 이에 그로스 PM과 논의…