우당탕탕 beauty 풀한, 컬리 앱 서비스 런칭기
컬리 앱에서 뷰티 컬리 런칭 과정과 전환 구조 개선 사례를 공유했습니다. 초기 오픈과 이후 전환율 개선까지 협업과 데이터 기반 대응이 중심이었습니다.
#iOS#API
2500
프론트엔드 기술 블로그 최신 글
필터 0
View Transitions API
View Transitions API로 React 상태 변경 전후 화면을 캡처해 복잡한 화면 전환을 단순화했습니다. 가상 요소와 CSS·Web Animations API로 요소별 슬라이드와 썸네일 이동 효과를 구현했습니다.
#View Transitions API#React
100
View Transitions API
View Transitions API
View Transitions API로 웹 화면 전환을 외부 라이브러리 없이 쉽게 구현하는 방법을 소개했습니다. 상태 변경과 트랜지션 제어를 단순화하고, 세부 애니메이션 확장 예시까지 함께 설명했습니다.
#React#CSS
3100
웹에서 파일 선택하기: onShowFileChooser()를 이용한 단일 및 복수 파일 선택 방법
안드로이드 WebView의 파일 입력을 onShowFileChooser()로 직접 구현하는 방법을 설명했습니다. 파일 선택 결과 전달과 URI 권한 처리, 복수 파일 선택 대응까지 다뤘습니다.
#Android#WebView
4600
Vue 기능을 활용한 Transition 적용기
Vue Transition으로 버튼과 입력 영역의 등장·퇴장 애니메이션을 자연스럽게 구현한 경험을 소개했습니다. `v-if` 전환, `opacity` 조정, `mode="out-in"` 적용 과정을 정리했습니다.
#Vue.js#JavaScript
2900
ChatGPT는 FE개발자를 대체할 수 있을까? (AI로 개발하기)
ChatGPT는 FE개발자를 대체할 수 있을까? (AI로 개발하기)
ChatGPT로 FE 개발을 어디까지 보조할 수 있는지 미니 프로젝트로 살펴보았습니다. 간단한 코드 생성에는 유용하지만 최신 설정과 정확한 구현은 검증이 필요했습니다.
#ChatGPT#Next.js
2000
Vibrant Design System 과 함께하는 크로스 플랫폼 개발기
웹과 앱이 각자 다르게 만들던 UI를 크로스 플랫폼 디자인 시스템으로 통합한 과정을 소개했습니다. 기존 Box 중심 구조의 한계를 해결하기 위해 역할 분리와 플랫폼별 구현 방식을 도입했습니다.
#React Native#디자인 시스템
2800
병원 상세 웹뷰 통신 및 크로스 브라우징
하이브리드 앱에서 병원 상세 웹뷰의 웹-네이티브 통신 방식을 정리했습니다. 또한 OS별 UX, 크로스 브라우징, 딥링크와 상태 동기화 개선 포인트를 함께 다루었습니다.
#웹뷰#iOS
100
병원 상세 웹뷰 통신 및 크로스 브라우징
병원 상세 웹뷰 통신 및 크로스 브라우징
병원 상세 웹뷰를 사례로 웹-앱 통신 방식과 OS별 UX 차이를 정리했습니다. 또한 크로스 브라우징과 유지보수 개선 포인트까지 함께 다뤘습니다.
#웹뷰#JavaScript
3100
Webview에서 핀치 줌(pinch zoom) 구현하기
TouchEvent와 두 터치 간 거리 변화를 이용해 Webview 핀치 줌을 구현했습니다. 기본 확대 차단, 중심점 보정, 멀티터치 처리 시 주의점을 함께 설명합니다.
#TypeScript#webview
200
Webview에서 핀치 줌(pinch zoom) 구현하기
Webview에서 핀치 줌(pinch zoom) 구현하기
웹뷰에서 핀치 줌을 직접 구현하는 방법을 설명했습니다. TouchEvent와 좌표 보정을 활용해 확대 중심을 유지하는 로직을 소개했습니다.
#TypeScript#web
7200
우리 회사에 딱맞는 마이크로소프트 팀즈 봇 제작기 (프로젝트 생성 과정, 실습 포함)
마이크로소프트 팀즈의 협업 기능을 바탕으로 회사에 맞는 봇 제작 과정을 정리한 글입니다. 프로젝트 생성과 실습을 포함해 팀즈 봇 개발 흐름을 소개합니다.
#Microsoft Teams#bot
6700
모노레포 적용부터 yarn berry까지
멀티레포의 중복과 표준화 문제를 해결하기 위해 Yarn Berry 기반 모노레포를 설계했습니다. PnP 캐싱의 한계를 분석하고, 필요한 코드만 배포하는 yarn release 플러그인을 구현했습니다.
#모노레포#Yarn Berry
300
번들러 마이그레이션(Webpack to Vite)으로 빌드 속도 높이기
Webpack에서 Vite로 번들러를 옮겨 빌드 속도를 높이는 내용을 다뤘습니다. Vite의 빠른 개발·빌드 경험과 인기 배경을 소개했습니다.
#Vite#Webpack
3200