![[Phocus] 사용자 경험 중심 스벨트 이미지 뷰어 라이브러리 (송가람 Jordan)](https://i.ytimg.com/vi/kB-O2vy9_ek/sddefault.jpg)
[Phocus] 사용자 경험 중심 스벨트 이미지 뷰어 라이브러리 (송가람 Jordan)
if kakao 카카오 · YouTube
AI 핵심 요약
카카오맵·티스토리·브런치·다음 카페가 서로 다른 이미지 뷰어를 사용하던 문제를 해결하기 위해, 여러 서비스에서 공통으로 쓸 수 있는 Svelte 기반 라이브러리 Phocus를 개발했다. React의 번들 크기와 바닐라 JavaScript의 설계 부담을 고려해 Svelte 3를 선택하고, TypeScript와 anime.js를 활용했으며 글로벌 CSS 부작용을 우려해 Tailwind 대신 Svelte의 컴포넌트 CSS를 사용했다. 수백·수천 장의 이미지도 다룰 수 있도록 가상 슬라이더를 구현하고, 핀치 확대·축소의 위치 보정과 터치 임계값 처리로 인터랙션 문제를 해결했다. 라이브러리 개발에서는 기능 구현뿐 아니라 DOM·네트워크 성능과 터치 동작의 충돌까지 고려해야 하며, Svelte의 간결함과 함께 문법 및 사이드 이펙트 관리의 아쉬움도 확인했다.
- 가상 슬라이더는 전체 항목을 DOM에 올리는 대신 필요한 수의 슬라이드만 유지해 렌더링과 네트워크 요청을 줄인다.
- 루프 슬라이더는 인덱스 범위와 translate 위치를 함께 조정해 마지막 이미지와 첫 이미지를 자연스럽게 연결한다.
- 핀치 확대·축소에서는 핀치 중심과 이미지 중심의 차이를 스케일 변화량에 반영해 확대 기준점이 밀리는 현상을 보정한다.
- 터치 임계값을 두면 탭·핀치 동작 전에 의도치 않은 스와이프가 먼저 실행되는 문제를 줄일 수 있다.
소개
[2024.04.11. 제5회 Kakao Tech Meet 발표] 웹 이미지뷰어 라이브러리 '포커스'의 개발 이야기를 공유합니다. 개발 과정에서 선택한 프레임워크인 '스벨트'에 대한 결정 과정과 개인적인 경험에 대해서 이야기합니다. 그리고 이미지 뷰어를 개발하면서 겪었던 다양한 이슈들과 이를 어떻게 해결해 나갔는지 공유합니다. 웹 페이지 및 라이브러리 개발에 관심 있는 모든 프론트엔드 개발자들에게 추천합니다. #kakaotechmeet #Svelte #ImageViewer #VirtualSlide #library 발표자: 송가람(jordan.song) 카카오의 콘텐츠FE에서 티스토리 서비스를 운영 및 개발하고 있는 조단입니다. 전사 이미지 뷰어 라이브러리 포커스의 프로젝트 리더로 기획 및 개발을 진행하였습니다. 💬 발표자 인터뷰와 비하인드 보러가기: https://tech.kakao.com/2024/04/29/techmeet-image-viewer/ ✨ 카카오테크 톡채...
비슷한 학습 자료
컨퍼런스 if kakao
iOS 앱 이미지 에디터 개발기 / if(kakaoAI)2024
컨퍼런스 if kakao
브런치, 티스토리에 적용된 iOS 이미지 에디터 개발 과정을 소개하고, 그 과정에서 겪은 어려움을 공유합니다. 특히 회전, 반전, 자르기 등을 지원하는 상황에서 여러 편집이 적용된 이미지를 처리하는 방법을 중점적으로 다룹니다. #ios #image editor #2D computer graphics 브런치, 티스토리 iOS 앱을 개발하고 있는 Woongs입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-51 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
모바일 앱 개발
컨퍼런스 if kakao
관심과 우선순위를 받기 어려운 처지에 놓인 UX 관련 과제를 시작시키기부터 성공적으로 적용하는 데까지 직면했던 여러 문제들과 이를 극복해오면서 배운 경험을 공유하고자 합니다. #FE #UX #일하는 방식 카카오 FE플랫폼팀에서 티스토리 서비스를 담당하고 있는 Jordan입니다. 카카오 FE플랫폼팀에서 카페 서비스를 담당하고 있는 Leah입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-36 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
UI/UX
컨퍼런스 if kakao
이미지 기반 스팸 대응을 위한 카카오의 AI 기술 활용 (오창화 Herschel)
컨퍼런스 if kakao
[2024.06.13. 제6회 Kakao Tech Meet 발표] 스팸 이미지 분류를 하기 위해 시도했던 다양한 경험을 공유합니다. 2018년부터 스팸성 이미지 대응 업무에 ML/DL을 도입해온 과정에서, 다양한 문제를 만나고 이를 해결해 가는 과정에서 쌓은 경험을 공유합니다. 다양한 업무 영역에서 ML/DL 도입을 위해 고민하는 개발자에게 추천합니다. #kakaotechmeet #AI #ML #DL 발표자: 오창화(herschel.alway) 어쩌다 보니 세월의 흐름에 이끌려 백엔드 개발에서 스팸 관련한 AI 연구도 같이 하고 있는 개발자입니다. 💬 발표자 인터뷰와 비하인드 보러가기: https://tech.kakao.com/posts/625 ✨ 카카오테크 톡채널: http://pf.kakao.com/_qmkxcs ✨ 카카오테크 페이스북: https://www.facebook.com/kakaotech 카카오테크, 미래의 문턱을 낮추는 기술 https://tech.ka...
딥러닝 · 머신러닝 컴퓨터 비전
컨퍼런스 if kakao
터치 인터랙션 테스트 3단계 #이미지뷰어
컨퍼런스 if kakao
사진편집기! 이것DOM 적용해볼GL? / if(kakao)2022
컨퍼런스 if kakao
새로운 사진편집기에 WebGL을 적용하고, 공용 컴포넌트를 개발하면서 마주했던 선택과 문제 해결과정을 공유합니다. #WebGL 더 멋진 카카오의 에디터를 위해 노력합니다. 카카오 FE플랫폼팀 스카이입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-79 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
웹 개발 프론트엔드
컨퍼런스 if kakao
Preview Web+Mobile @if(kakao)2021
컨퍼런스 if kakao
if (kakao) 2021 컨퍼런스에서 Data 관련 기술 발표 세션을 소개합니다. 1. 이게 진짜 일 리 없어 : 초보 리더가 프로젝트에서 마주치는 어려운 상황들 @effie.seo 올해 6월에 카카오맵 매장관리 서비스를 오픈했습니다. 매장관리 프로젝트 진행 과정을 통해서 카카오맵 FrontEnd 개발자들은 어떻게 협업하는지, 프로젝트에서 마주쳤던 상황들을 대처 하기 위해서 초보 리더인 제가 동료들과 함께 고민하고 시도했던 과정에 대해서 공유해보고자 합니다 2. Next.js와 Typescript를 이용한 프론트엔드 개발기 @jaden.js @luffy.yeon Next.js를 사용한 서버사이드 랜더링, Next.js 환경 Typescript 포팅을 하며 겪은 경험 공유 3. 톡패스워드 크롬 익스텐션 개발기 @felix.lee 입사 후 처음으로 혼자 프로젝트를 설계하면서 고민했던 구조선택과 고민거리에 대한 공유 4. UI 테스트 경험기 @jay.choi 리팩토링에 대한...
프론트엔드 소프트웨어 테스트 애자일 · 협업