채팅으로 디자인하는 AI, 실제로 쓸까? — A/B 테스트와 사용자 행동 분석기
들어가며 안녕하세요. 미리캔버스 검탐색 스쿼드에서 데이터 분석가로 일하고 있는 윤지호입니다. 2026년 9월, 미리캔버스 에디터에 ‘AI 디자이너’ 기능이 추가됐습니다. 사용자가 채팅으로 원하는 작업을 요청하면 템플릿을 검색하거나 이미지를 생성하고, 캔버스에 있는 요소를 수정해 주는 AI 에이전트입니다. 이번 MVP에서 확인하고 싶었던 것은 사용자가 실제로…
미리디 블로그
기업최근 글
미리디 블로그기업
‘왜 이렇게 만들었을까’라는 질문으로 성장하는 웹 에디터 팀
“본질에 집중하고, 질문으로 성장하다.” 미리캔버스 편집 기능을 만드는 미리디 웹 에디터 팀이 실제로 일하는 방식이에요. 이 팀에서는 “왜 이렇게 만들었을까”라는 질문 하나가, 기능을 만드는 사람을 구조를 설계하는 사람으로 자라게 해요. 그 성장과 협업의 이야기를 웹 에디터 팀 백동열, 김예지, 이은지 님에게 들어봤어요. 지난 1부에서는 웹 에디터 엔진 개…
미리캔버스의 편집 로직을 책임지는 웹 에디터 팀 엔진 개발자들
미리캔버스에서 도형을 옮기고, 글자를 고치고, 방금 한 작업을 한 번에 되돌리는 순간. 우리는 이 움직임을 당연하게 여기죠. 그런데 이 매끄러움이 저절로 만들어지는 게 아니라면요? 화면 뒤에는 복잡한 로직과 정교한 성능 최적화를 위해 애쓰는 엔진 개발자들이 있습니다. 미리디의 웹 에디터 팀이 바로 그들이에요. 사용자가 미리캔버스에서 도형과 텍스트를 자유롭게…
미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
05. 실전 팁 | DX개발그룹 엔진팀 김준 5부: 실전 팁 안녕하세요, DX개발그룹 엔진팀 김준입니다. 이번 글에서는 SVG 필터를 실제 프로젝트에 적용할 때 만나는 네 가지 영역 — 성능 저하, 브라우저 간 동작 차이, 컴포넌트 구조화, 자주 묻는 질문 — 을 차례로 다뤄요. 5–1. 성능 고려사항 SVG 필터는 브라우저 합성 단계에서 처리되지만, 설정…
디자인 퀄리티와 사용 편의성 사이, 최적의 균형을 만드는 미리캔버스 템플릿 디자이너
미리캔버스 템플릿 디자이너는 모두 고객에 대해 깊이 고민하고 몰입하며, 더 사랑받는 서비스를 만들어갑니다. 디자인 퀄리티와 사용 편의성, 두 마리 토끼를 함께 잡아가는 사람들이 바로 템플릿 디자인 팀입니다. 템플릿 디자인 팀의 유현님, 현아님의 이야기를 이어서 전해드립니다. Q. 1부에서 템플릿 디자이너가 어떤 일을 하는지 들어봤는데요, 실제로 일하면서 가…
누구나 전문가처럼 만들 수 있게: 미리캔버스 템플릿 디자이너가 일하는 법
미리캔버스 템플릿 디자이너는 유저 입장에서 고민하며, 누구나 쉽게 멋진 결과물을 만들 수 있도록 다양한 템플릿을 기획하고 설계합니다. 타겟과 목적에 맞춘 실험으로 전 세계 고객이 원하는 디자인을 완성하도록 돕는 사람들, 템플릿 디자인 팀의 유현님과 현아님의 이야기를 전해드립니다. Q. 안녕하세요, 유현님과 현아님! 자기소개 부탁드릴게요. 유현님: 안녕하세요…
“고객의 목소리를 서비스 개선으로 잇는 사람들, 고객만족 CX팀”
고객만족 CX팀 · 임재훈님, 권태헌님 고객의 어려움을 해결하는 데서 그치지 않고, 문제의 원인을 깊이 있게 들여다보며 같은 이슈가 반복되지 않도록 운영 구조를 만들어가는 팀이 있습니다. 서비스와 고객 사이의 ‘연결고리” 역할을 하고 있는 고객만족 CX팀 임재훈님, 권태헌님의 이야기를 들려드립니다. Q. 먼저 두 분 소개와 미리디에 합류하신 계기를 들려주세…
미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
04. 고급 활용| DX개발그룹 엔진팀 김준 4부: 고급 활용 안녕하세요, DX개발그룹 엔진팀 김준입니다. 2부와 3부에서 이미지 보정과 오버레이 효과를 다뤘다면, 이번 4부는 SVG 필터의 표현 한계를 한 단계 더 밀어붙이는 기법을 다뤄요. 노이즈 생성, 구간별 톤 커브, 행렬 직접 계산 — 세 가지 모두 파라미터 하나씩의 의미를 이해하고 나면 응용 범위…
미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
복합 오버레이 필터 | DX개발그룹 엔진팀 김준 3부: 복합 오버레이 필터 안녕하세요, DX개발그룹 엔진팀 김준입니다. 2부에서 단일 프리미티브로 이미지를 보정했다면, 3부에서는 여러 프리미티브를 직접 연결해서 드롭 섀도우·이너 섀도우·아웃라인 같은 레이어 효과를 만들어요. 각 프리미티브가 어떤 순서로 이어지는지 이해하면, CSS로는 표현하기 어려운 복합…
외부 API 장애가 우리 서비스 장애로 이어졌다
멀티 벤더 자동 Fallback과 Health Status를 적용하며 겪은 시행착오 | CP개발그룹 성호창님 안녕하세요. 미리디에서 백엔드 개발자로 일하고 있는 성호창입니다. 외부 API(외부 벤더) 연동을 많이 하는 팀이나 개발자라면 낯설지 않은 상황일 거예요. 외부 API에서 발생한 장애가 우리 서비스로 전파돼서, 그 장애가 해결될 때까지 관련 기능을…
테스트가 늘수록 느려지던 CI, 16분에서 3분이 되기까지
안녕하세요. 미리디 DX개발그룹 엔진팀 프론트엔드 개발자 김민성이에요. 미리캔버스 모노레포에는 테스트 케이스가 수만 개 있어요. 올해 엔진팀에는 안정적인 서비스 운영을 위한 테스트 커버리지 100% 목표가 생겼고, AI 에이전트와 함께하는 TDD가 자리 잡으면서 테스트 코드는 하루가 다르게 늘고 있어요. 여기까지는 좋은 이야기예요. 문제는 CI였어요. 테스…
미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
이미지 보정 필터 (contributor-content-polish skill) | DX개발그룹 엔진팀 김준 2부. 이미지 보정 필터 (미리캔버스 활용 영역) 이 파트에서 다루는 필터들은 미리캔버스 이미지 편집 기능에서 실제로 활용되는 보정 효과예요. 블러, 밝기, 대비, 채도, 색온도, 색조, 비네팅 — 포토샵에서 슬라이더를 조작하면 일어나는 일들이 브라…
미리디 엔진팀이 사내 해커톤 이틀 만에 만든 결과물 30개
안녕하세요, 미리디 엔진팀이에요. 이 글은 저희가 이틀에 걸쳐 연 사내 해커톤 ‘Rev.Up’에서 무슨 일이 있었는지, 그리고 그게 왜 미리디에서 개발하는 일과 이어지는지에 대한 이야기예요. 떠오른 아이디어를 일단 만들어보는 팀에서, 이틀 남짓한 시간 동안 30개 가까운 결과물이 나왔었거든요. AI 에이전트 시대에 사람 개발자가 할 일은 무엇인지 고민하며…
AI 잘 쓰는 사람의 노하우, 어떻게 팀 전체로 퍼질까?
혼자 쌓고 끝나던 AI 활용 경험, 서로 이어지게 만든 방법 Re:Sync-모두가 같은 방향을 향해 나아가는 시간 미리디는 매월 각 팀의 실행 과정과 배움을 나누는 전사 타운홀 Re를 진행합니다. Re:Sync는 과정에서 세운 가설과 선택, 실험의 배경을 공유하며 서로의 맥락을 이해하고 하나의 방향으로 정렬하는 자리예요. Re:Sync에서 공유된 이야기 중…
Terraform Module에서 Terragrunt Stacks까지 IaC 구조를 다시 나눈 이유
안녕하세요. 미리디 플랫폼 엔지니어링 팀에서 데브옵스 엔지니어로 일하고 있는 조우형입니다. 저희 데브옵스 팀은 10개가 넘는 AWS 계정에서 350개 이상의 서비스를 Terraform과 Terragrunt로 관리하고 있습니다. 서비스 규모가 커지면서 처음에는 큰 문제 없이 동작하던 IaC 구조에서도 모듈 중복, 버전 관리, 서비스 조합과 같은 문제가 하나씩…
미리캔버스가 AI 3대로 해외 트렌드에서 진짜를 가려내는 법
안녕하세요, 미리디에서 디자인옵스를 맡고 있는 이근엽이에요. 저희 팀은 미리캔버스의 템플릿 제작 파이프라인이 더 빠르고 일관되게 돌아가도록 구조를 설계하는 역할을 맡고 있어요. 디자인 트렌드를 리서치하고 분석해서 템플릿을 제작할 때 반영할 수 있도록 하죠. 이 글은 디자인옵스팀이 국내외의 트렌드를 세 AI 에이전트가 추적하도록 만든 트렌드봇의 제작 기록이에…
AI로 QA 업무를 자동화한 방법: n8n부터 E2E 테스트 자동화까지
안녕하세요. 미리디 QA팀 에서 서비스 품질을 맡고 있는 조권현이에요. 저희 팀은 같 은 기능이 여러 상황에서도 잘 작동하는지 반복해서 확인하는 일이 많아요. 그래서 새로운 기능이 나오면 기존 기능에 문제가 생기지는 않았는지 다시 살펴보고, 슬랙에서 발견한 이슈를 Jira로 옮기는 일을 해야 할 때가 빈번해요. 하나하나가 꼭 필요한 일이지만, 이런 일을 반…
통합 검색 임베딩 모델 개발기: 9개 태스크를 고르게 학습시키기
| 미리디 AI팀 검색파트 김정준, 장시온 00. 지난 이야기 안녕하세요. 미리디 AI팀 검색파트의 김정준, 장시온입니다. 1편에서는 통합 임베딩 모델의 도입 배경과 Qwen3-VL-Embedding 기반의 파인튜닝 전략을 소개했습니다. 이번 글에서는 이 모델이 실제로 효과가 있었는지 확인합니다. 첫 평가 결과에서 발견한 문제와 그 원인, 이를 해결하기 위…
데이터 요청 응대 30분을 3분으로 줄인 n8n AI 에이전트
미리디 데이터 분석가가 온콜 헬퍼봇을 만든 이야기 Re:Sync — 모두가 같은 방향을 향해 나아가는 시간 미리디는 매월 각 팀의 실행 과정과 배움을 나누는 전사 타운홀 Re:Sync를 진행합니다. Re:Sync는 성과만 공유하는 것이 아니라, 그 과정에서 세운 가설과 선택, 실험의 배경을 나누며 서로의 맥락을 이해하고 하나의 방향으로 정렬하는 자리예요.…
미리캔버스의 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나 테이블…