웹뷰 속 무한 CSS 애니메이션의 숨은 비용
안녕하세요. 크리에이트립의 서종학입니다. 오늘은 웹뷰에서 관찰된 CSS 애니메이션의 높은 CPU 현상을 기준으로, 해당 이슈의 원인과 해결책에 대해 이야기를 해보려고 해요. 웹 프론트엔드 개발을 조금 해봤다면 이런 이야기를 한 번쯤 들어봤을 겁니다. “애니메이션은 top, left보다 transform을 써야 한다.” “ transform과 opacity는…
안녕하세요. 크리에이트립의 서종학입니다. 오늘은 웹뷰에서 관찰된 CSS 애니메이션의 높은 CPU 현상을 기준으로, 해당 이슈의 원인과 해결책에 대해 이야기를 해보려고 해요. 웹 프론트엔드 개발을 조금 해봤다면 이런 이야기를 한 번쯤 들어봤을 겁니다. “애니메이션은 top, left보다 transform을 써야 한다.” “ transform과 opacity는…
안녕하세요. 크리에이트립(Creatrip)의 강병준입니다. 저는 사내에서 FE 업무뿐만 아니라, AI를 활용한 개발 생산성 향상과 코드 품질 개선에도 깊이 관여하고 있는데요, 오늘은 그 중 하나인 AI 코드 리뷰의 품질을 개선해온 과정을 공유해보려고 합니다. 배경 GitHub Octoverse 2025 에 따르면 한 해 동안 머지된 PR은 전년 대비 23%…
안녕하세요. 크리에이트립 프론트엔드 개발자 이승우라고 해요. 이 글에서는 styled-components에서 Tailwind CSS로 안전하게 대규모 마이그레이션한 경험을 공유해보려고 해요. 마이그레이션을 결정하게 된 배경 크리에이트립 프론트엔드는 그동안 styled-components를 주력 스타일링 라이브러리로 사용해왔어요. 하지만 프로젝트가 커지면서…
Claude Code는 강력한 에이전트 기능을 제공하는 CLI 도구입니다. 파일을 읽고, 코드를 작성하고, 다양한 도구를 활용해 복잡한 작업을 수행합니다. 하지만 CLI라는 특성상 웹 서비스나 외부 시스템에서 직접 호출하기는 어렵습니다. 저희는 Claude Code의 강력한 기능을 웹 환경에서도 활용하고 싶었습니다. 기존에 구축해둔 도구들을 재사용하면서,…
“AI가 우리 팀의 맥락을 이해하고, 필요한 정보를 스스로 찾아 코드 리뷰를 할 수는 없을까?” 안녕하세요, 크리에이트립(Creatrip)의 강병준입니다. 오늘은 위 질문에서 시작된 저희 팀의 여정을 공유하려고 합니다. TL;DR 기존에 있던 AI PR Review Action은 팀의 맥락을 이해하지 못했어요 AI에게 도구와 자율성을 주자 필요한 정보를 스…
안녕하세요. 크리에이트립(Creatrip)의 서종학입니다. 오늘은 캐시된 유저페이지의 개인화 데이터 동기화 문제를 저희 크리에이트립에서 GraphQL의 커스텀 디렉티브를 사용하여 개선한 이야기를 간단하게 소개하려고 합니다. TL;DR 개인화된 데이터에 의존한 UI를 위해 클라이언트 하이드레이션 이후 전체 데이터를 다시 한 번 가져와야 하는 문제가 있었어요.…
들어가며 최근 저희 프론트엔드 팀에서는 스타일링과 관련된 중요한 의사결정을 했어요. styled-components 를 사용하며 발생하는 런타임 오버헤드 가 점점 부담스러워졌고, LLM을 통한 생산성도 고려한 결과 tailwindcss 로의 전환을 결정하였어요. 이 과정에서 “어차피 디자인 토큰과 유틸 클래스 형식이 정해져 있으니, 피그마에서 바로 tail…
안녕하세요. 크리에이트립의 서종학이라고 합니다. 오늘은 좀 특별하게 저희 크리에이트립 슬랙 내에 있는 product_engineer_llm(프로턱트 팀의 llm 사용 경험과 노하우를 나누는 채널이에요)에서 있었던 작은 대화에 대해 소개드리려고 해요. 저 개인적으로 흥미 있다고 생각했던 대화이기도 했고, 다른 회사들도 어느새 현실이 되어버린 AI시대에 이런…
크리에이트립은 한국을 잘 모르는 해외 유저에게 맞춤형 여행 플랜을 추천하는 서비스를 운영해요. 이를 위해 유저의 소비 습관·여행 스타일·관심사를 단계별 질문으로 수집하고 있어요. 단계별 질문 수집엔 각 단계에서 선택 값을 저장하고, 조건에 따라 특정 단계를 건너뛰거나 되돌아가는 흐름이 있어요. 이 흐름을 React 기본 상태 관리만으로 처리하다 보니 코드가…
대용량 트래픽을 견디는 서버 만들기 — Rust 기반 게이트웨이 구축 안녕하세요. Creatrip에서 백엔드 개발을 담당하고 있는 이재용입니다. 저희 팀은 GraphQL 기반으로 서버를 운영 중이며, 그동안 Node.js로 작성된 Apollo Gateway를 사용해왔습니다. 지속적으로 슬로우 쿼리를 튜닝하고 성능 병목을 일으키는 지점을 파악하여 최적화하는…