같은 연출, 다른 CLS: transform을 제외한 설계 의도를 찾아서
height 애니메이션을 transform 기반 모션으로 분리해 연출을 유지하면서 CLS를 낮췄습니다. 로컬 프로파일링과 운영 데이터로 레이아웃·메인 스레드 작업 감소를 확인했습니다.
#CLS#transform#web-performance
600
모든 블로그
대표 인기 포스트버즈빌 프론트엔드 변천사143 조회143 조회 프론트엔드 프론트엔드
프론트엔드
프론트엔드
AI
백엔드
백엔드
프론트엔드
백엔드
아키텍처
백엔드
AI
AI
백엔드
AI
아키텍처
AI
AI
버즈빌
주요 카테고리 백엔드 · DevOps
활동 요약
- 최근 30일
- 2개
- 평균 조회
- 18
- 누적 조회
- 2,197
- 전체 글
- 125개
- 마지막 발행
- 2026. 11. 3.
버즈빌 기술 블로그 글 (125)
사진 속 별자리 찾기: 7년 걸린 Plate Solver 만들기
밤하늘 사진의 별 배치로 위치를 찾는 브라우저 Plate Solver 개발 과정을 소개했습니다. AI 협업과 검증 절차로 정확도·속도·용량 문제를 개선하고 공개 가능한 수준을 확인했습니다.
#plate solving#JavaScript#Web Worker
1700
영상 최적화의 대상은 영상만이 아니었다
WebView별 영상 재생 제약에 스틸 이미지·스프라이트 대체 경로를 설계했습니다. 해상도와 인코딩은 실기기 검증으로 사용자 흐름 중심으로 최적화했습니다.
#WebView#video#성능
1200
프리로드 API 없는 광고 SDK에 프리로딩을 적용하며 배운 것
프리로드 API 없는 광고 SDK를 hidden 세션으로 선실행해 반복 대기 시간을 줄이는 구조를 설계했습니다. 우선순위 병합, 노출 신호 보류, 세션 정리와 폴백·관측 기준을 정리했습니다.
#프리로딩#성능#SDK
500
Figma, 더 가볍게.
LLM과 코드 리뷰 중심으로 디자인 핸드오프를 PR 기반으로 전환했습니다. Figma 구독을 Professional로 조정해 연간 비용 약 77% 절감을 예상했습니다.
#Figma#LLM#Claude
4300
Memory DB는 무엇으로 가득 차 있었을까 - 2부 : BCAST 전환과 Failover
유령 키로 누적되는 MemoryDB OPTIN tracking item 문제를 BCAST 전환으로 구조적으로 차단했습니다. 리허설 후 failover를 두 차례 수행해 7,684만 개 항목과 메모리 사용률을 정상화했습니다.
#MemoryDB#Redis#cache
300
Go embed: 최소 변경으로 불필요한 메모리 사용 줄이기
GeoIP DB를 embed.FS.ReadFile로 읽으며 발생한 전체 DB heap 복사 원인을 분석했습니다.직접 []byte embed 방식으로 배포 구조를 유지하면서 보유 heap을 줄였습니다.
#Go#GeoIP#Pyroscope
300
이제 디자이너가 PR을 올립니다
디자이너가 AI와 프로덕션 레포에서 직접 PR을 만들고 엔지니어 리뷰로 배포하는 워크플로우를 공유했습니다. 디자인 시스템·자동 검증·보안·리뷰 정책을 갖춰 핸드오프 지연과 구현 손실을 줄였습니다.
#design-system#pull-request#Claude
600
Memory DB는 무엇으로 가득 차 있었을까 - 1부 : 클라이언트 캐싱과 tracking item
MemoryDB 메모리 급증의 원인을 Redis 클라이언트 캐싱 tracking item 누적으로 분석했습니다. 존재하지 않는 유령 키 조회가 TTL 없이 기록을 쌓는 구조를 확인했습니다.
#MemoryDB#Redis#클라이언트 캐싱
300
AI와 함께 업무 시스템을 다시 설계하다: Salesforce 대체 CRM 개발기
Salesforce의 연동·정합성 병목을 해결하기 위해 AI와 사용자 인터뷰를 결합해 자체 CRM을 개발했습니다. 관계형 데이터 모델과 유스케이스 중심 화면으로 업무 전환과 정산 효율화를 추진했습니다.
#Salesforce#CRM#AI Agent
200
피크 타임 Pod 245개를 100여개로 — DynamoDB SDK v2 전환으로 Go 서버 CPU 절반 줄이기
Pyroscope로 DynamoDB 응답 역직렬화의 CPU 병목을 확인하고 AWS SDK v2 기반 래퍼로 전환했습니다. 요청당 CPU를 59% 줄여 피크 타임 HPA 파드를 245개에서 109개로 낮췄습니다.
#Go#DynamoDB#AWS SDK
100
에이전트를 위한 디자인 시스템
에이전트가 활용할 디자인 시스템을 매니페스트·브랜드 시드·명시적 제약 데이터로 설계했습니다. 조합 테스트와 빌드 검증으로 일관된 인터랙션 품질을 운영하는 방식을 소개합니다.
#에이전트#디자인 시스템#인터랙션 디자인
600
에이전트가 직접 쓴 운영 매뉴얼: AI 코딩 에이전트를 위한 5겹 하네스
AI 코딩 에이전트의 작업을 통제하는 5겹 하네스 구조를 소개했습니다. 자동 검증과 권한 제어로 사람이 설계 리뷰에 집중하는 방식을 설명합니다.
#Claude Code#monorepo#TypeScript
600
Feature Flag API의 p99 레이턴시 개선기 (+오픈소스 기여)
S3 export 중 mutex를 잡아 Feature Flag API p99가 급등한 원인을 분석했습니다. 비동기 래퍼와 락 범위 축소로 최대 레이턴시를 200ms 내외로 안정화했습니다.
#Go#Feature Flag#S3
000
AI 네이티브 디자인 플레이북
AI 코딩 에이전트와 디자인 시스템으로 목업·핸드오프 대신 PR 중심 딜리버리 흐름을 제안했습니다. 토큰, 컨텍스트, 훅으로 품질을 강제하고 산출물 기반 케이던스를 운영했습니다.
#Claude#design system#design token
300
Nobody Owned the Website. Now Everybody Does.
분산된 웹 자산을 디자인 토큰 기반 Next.js 모노레포로 통합했습니다. AI 에이전트용 규칙과 자동화로 전사 기여 가능한 브랜드 플랫폼을 구축했습니다.
#디자인 시스템#Next.js#Turborepo
200
The Flip
AI 에이전트가 브랜드와 사용자 맥락에 맞춰 UI를 구성하도록 디자인 시스템을 재정의했습니다. 구조화된 문서·스킬과 NPM 패키지로 디자인 판단을 전달하는 방향을 소개합니다.
#디자인 시스템#NPM#UI/UX
200
The Flip
AI가 디자인을 대신 만들어주는 것이 아니라, AI가 쓸 디자인 시스템을 설계하는 관점입니다. 브랜드 맥락과 인터랙션 규칙을 구조화해 에이전트가 바로 조합하고 실행할 수 있게 만들었습니다.
#디자인 시스템#agent#UI/UX
2800