Cursor AI로 K-팝 소개 사이트 만들기 (feat. 커서 AI 트렌드 ＆ 활용 백과)
Cursor AI로 K-팝 소개 웹페이지를 만들고 웹 서버에 올린 과정을 공유했습니다. 초보자도 빠르게 결과물을 만들 수 있지만, 도메인 지식과 수정 검토가 중요하다고 짚었습니다.
#Cursor#HTML
26600
필터 1
단 한 줄로 전환하는 다크 테마 - Variables 기반 디자인 토큰 자동화
Figma Variables와 CSS Variables를 연결해 디자인 토큰을 자동화한 사례를 소개했습니다. data-theme 속성만으로 다크 테마와 브랜드 테마를 단순 전환하도록 구성했습니다.
#Figma#CSS
1500
![[Vue] motion 라이브러리로 더 나은 UX 제공하기](https://devocean.sk.com/thumnail/2025/3/26/161965bcf2c0b07df46454d50714fad4eb4e06189069272bebd9fabacb97b9b4.png)
[Vue] motion 라이브러리로 더 나은 UX 제공하기
Vue에서 motion-v를 사용해 다양한 UI 애니메이션을 선언적으로 구현하는 방법을 소개했습니다. Transition, IntersectionObserver, GSAP보다 간결하게 작성할 수 있는 사례를 함께 살펴보았습니다.
#Vue#UI/UX
27400
FE News 25년 2월 소식을 전해드립니다!
25년 2월 프런트엔드 기술 소식을 큐레이션해 소개했습니다. CSS 지문 채취, AI 개발 워크플로우, 토스 가이드, 포털 대체 방법을 다뤘습니다.
#CSS#JavaScript
4600
토스 피플: 문과생에서 토스 개발 리더까지
문과 출신 개발자가 토스에서 프론트엔드와 UX 엔지니어링 리더로 성장한 과정을 들려주셨습니다. 디자인 시스템과 편집기 개발, 팀 빌딩과 리더십 고민도 함께 공유했습니다.
#UX/UX Engineer#JavaScript
4900
2024 선물카드 제목 짓기 대회가 탄생하기까지: 운영, PM, 개발 이야기
배민선물하기 2024 참여형 캠페인을 제목 짓기 대회로 바꾸고, 협업과 제약 속에서 구현한 과정을 소개했습니다. 반응형 웹, 비로그인 참여, OTP, 영상 최적화 같은 실무 포인트도 함께 다뤘습니다.
#Next.js#SSR
2700
네이버 검색 클라이언트 로그 수집 - Beacon API 전환기
Beacon API로 클릭 로그 수집을 전환해 페이지 이탈 시 유실을 줄이고 안정성을 높였습니다. 점진적 실험과 분석으로 사용자 경험까지 함께 정상화했습니다.
#Beacon API#로그 수집
1900
Velopers 추천광고
쿠팡 파트너스
개발자를 위한 인기 상품을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발자#노트북#컴퓨터
FE News 24년 9월 소식을 전해드립니다!
24년 9월 프론트엔드 기술 소식을 큐레이션해 소개했습니다. Angular, CSS, 런타임 비교 등 주요 글을 월간으로 공유했습니다.
#JavaScript#CSS
1600
API 없이 웹 애니메이션 구현: 인터랙티브 웹 개발 2편
라이브러리 없이 수학과 물리로 웹 애니메이션을 구현한 과정을 공유했습니다. 카카오페이의 트리 조명 인터랙티브 개발 사례를 중심으로 설명했습니다.
#web#CSS
900
API 없이 웹 애니메이션 구현: 인터랙티브 웹 개발 1편
API 없이 수학과 물리 개념으로 웹 애니메이션을 구현한 과정을 공유했습니다.\n카카오페이의 트리 조명 애니메이션 개발 사례와 인터랙티브 웹 접근을 소개했습니다.
#web#CSS
1000
SVG를 이용하여 Animation 만들기
SVG 도형을 추출해 ID와 그룹 단위로 CSS 애니메이션을 적용하는 방법을 정리했습니다. hover 이동, 클릭 색상 변경, 순차 등장 애니메이션까지 구현 과정을 소개했습니다.
#SVG#Animation
6100
LINE Android 앱에 폰트 커스터마이징 기능 적용하기
LINE Android 앱에 회원 한정 폰트를 적용한 과정을 정리한 글입니다. Downloadable Fonts와 테마 주입으로 전체 앱에 동적 폰트를 적용하고 남은 과제도 함께 다뤘습니다.
#Android#Kotlin
2200
카카오헤어샵 vanilla-extract 도입기 - 카카오헤어샵 마크업 내재화 이야기
카카오헤어샵이 외부 퍼블리셔 의존 구조에서 벗어나 마크업 내재화를 추진한 내용을 다뤘습니다. vanilla-extract 도입을 통해 프론트엔드 스타일 작업 방식을 개선한 사례입니다.
#vanilla-extract#CSS
3000
마우스 드래그로 범위 지정과 리사이징 및 이동 구현하기
매월 반복되던 기획전 마크업 작업을 줄이기 위해 드래그 기반 제작툴을 구축했습니다.\n영역 지정, 리사이징, 이동과 마크업 자동 완성으로 작업 효율을 높였습니다.
#JavaScript#CSS
3600