👋 들어가며
안녕하세요 퍼블리셔 한상현입니다.
방탄소년단의 게임 인더섬을 제작하게 되었습니다. 인더섬의 퍼블리싱을 맡게되었습니다.
- docker
- react
- swiper
- videojs
- sass
- tailwindcss
- postcss
- keen-slider
프로젝트의 기초를 html, sass, js로 만들어져있었고 퍼블리싱을하여서 다시 React로 변형하는 프로세스여서 이 부분을 논의해서 처음부터 리액트로 퍼블리싱하게 변경하였습니다. 기존 프로젝트를 가지고 제가 자주 사용하는 프로젝트구조로 마이그레이션 하였습니다.
🤔
iOS15 Chrome 애니메이션 오류
매번 작업하면서 Swiper Slider (Carousel)이 모바일에서 버벅이는 문제가 있어서 React – Keen Slider를 사용했습니다. 이 때까지도 슬라이더에 문제가 있는 줄 알았습니다.
이 작업을 하면서 알게된 사실이었는데 Swiper는 문제가 없었습니다. IOS15 – Chrome 앱에서 애니메이션 오류가 있어서 버벅였던 것을 알게 되었습니다.
비록 Swiper에 이슈가있는 것같아서 Keen Slider로 작업하였지만 Keen Slider에도 매력적인 부분들이 있어서 작업을 완료한 부분은 유지하였습니다.
Keen Slider의 매력
기능이 많이 탑재되어있지 않지만 순수하게 들어가있는 기능들만으로도 괜찮은 슬라이더를 만들 수 있다. Keen Slider를 사용하면서 그냥 마우스로 스냅이 되는 슬라이드를 많이 사용하습니다.
아마도 이 기능은 추구 CSS Feature에서 CSS로만 구현이 가능 할 것같아서 시도해보면 좋을 것같다.
매번 모든 프로젝트의 tailwindcss
tailwindcss는 빠질 수 없다. 정말 획기적으로 작업속도가 빨라졌다. 많은 설정도 필요없고 html, js, css, react 모든 곳에서 사용할 수 있으니 빠질 수 없었습니다.