모바일 웹뷰에서 iOS·Android 가상 키보드 길들이기
iOS·Android WebView의 가상 키보드가 유발하는 뷰포트·고정 입력창 문제를 분석했습니다.\nVisualViewport 기반 VirtualViewport로 플랫폼별 레이아웃 차이를 완화했습니다.
#mobile#web
300
프론트엔드 기술 블로그 최신 글
필터 0
KBO 피치트레킹 리플레이 개발기
KBO 피치트레킹 리플레이 개발기
투구 데이터 9개 값과 등가속도 운동식으로 KBO 피치트래킹 3D 리플레이를 구현했습니다.\nWebGL 궤적과 DOM 핫콜드존을 정렬해 투수의 코스 공략을 시각화했습니다.
#React#Three.js
300
D2Coding 폰트 1.4.0 릴리즈 소식을 전합니다.
D2Coding 폰트 1.4.0 릴리즈 소식을 전합니다.
D2 Coding 1.4.0은 점 0 선택 기능과 기준선 정렬 보정을 추가했습니다. 리거처·제어 문자·전각 기호·위첨자 및 분수 표시도 개선했습니다.
#D2 Coding#OpenType
4800
FE News 26년 10월 소식을 전해드립니다.
FE News 26년 10월 소식을 전해드립니다.
VS Code, Shopify의 네이티브 전환, AI 결과물 검증 사례를 포함한 프런트엔드 소식을 큐레이션했습니다. Penpot과 명세 주도 개발처럼 AI 활용 개발 흐름도 함께 소개합니다.
#VS Code#React Native
7300
UI 딜레마 규칙과 유연 사이
모달 크기는 콘텐츠 양, 사용자 행동, 탭의 비교 필요성에 따라 고정과 유동을 선택해야 합니다. 규격을 유지하되 과도한 콘텐츠는 더 큰 모달이나 페이지 분리를 고려해야 합니다.
#UI/UX#디자인 시스템
3200
플랫폼 행성에 떨어진 서비스 개발자
플랫폼 행성에 떨어진 서비스 개발자
전시어드민의 사용자 행동 로그를 구축해 공통 컴포넌트와 개선 과제의 우선순위를 정했습니다. AI·MCP·Playwright로 분석과 QA를 자동화해 운영 효율과 검증 안정성을 높였습니다.
#BigQuery#MCP
4700
태블릿을 없애자 생긴 문제
태블릿을 없애자 생긴 문제
회원 스마트폰 QR 접수 전환 뒤 GPS 오차와 주소 좌표 불일치로 생긴 웨이팅 접수 실패를 분석했습니다. 운영자가 웨이팅별 접수 위치와 반경을 설정하도록 개선했습니다.
#GPS#Geocoding
2200
Vue.js와 React.js의 사용 경험 비교
React와 Vue의 컴포넌트 작성 방식, 반응성·상태 관리·SSR 생태계를 비교했습니다. 경량 환경의 생산성과 협업성을 고려한 Vue 선택 경험을 공유했습니다.
#React#Vue.js
9400
에이전트도 읽는 디자인 시스템, Clay 개편기
AI 에이전트가 읽는 Clay 디자인 시스템을 위해 Figma·React의 명칭과 구조를 통일했습니다. 가이드라인과 CLI를 제공해 타입 에러를 없애고 작업 시간·비용을 절반 가까이 낮췄습니다.
#디자인 시스템#AI 에이전트
5500
당근 동네걷기 위에서 동시에 쏟아지는 오버레이들을 우아하게 제어하기
당근 동네걷기 위에서 동시에 쏟아지는 오버레이들을 우아하게 제어하기
독립적으로 발화하는 웹뷰·OS 오버레이를 Promise 기반 우선순위 큐로 직렬화했습니다. 큐와 로컬 시퀀서의 책임을 분리해 순서 변경과 검증 복잡도를 낮췄습니다.
#JavaScript#Promise
13300
9인조 다람쥐 아이돌을 데뷔시켰습니다
적금 재방문을 높이기 위해 9종 다람쥐 캐릭터와 성장 중심 UI를 설계했습니다. AI 시안 탐색과 즉각적인 인터랙션으로 저금의 보람과 다음 방문 동기를 만들었습니다.
#UI/UX#design
7000
미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
브라우저에서 SVG 필터로 이미지를 보정하는 글입니다. 다만 본문 접근이 차단되어 세부 내용은 확인할 수 없었습니다.
#SVG#브라우저
2400
AI로 만들고, 디자인으로 완성한 3개월
AI로 분석 툴 노트북을 빠르게 검증하고, 디자인으로 밀도와 사용성을 완성한 3개월의 과정을 정리했습니다. 고객이 실제로 쓸 수 있는 제품이 되기까지의 판단과 협업 방식을 소개합니다.
#디자인 시스템#프로토타입
4100
방해하지 않고, 눈에 띌 수 있을까
자산관리 리포트의 클릭률을 높이기 위해 표현보다 구조를 먼저 바꾼 디자인 사례를 다뤘습니다. 플로팅 카드와 인터랙션 조정으로 CTR과 CVR을 함께 3배 높였습니다.
#UI/UX#A/B test
7100