서비스 UX는 내가 직접 지킨다: 웹 이미지 뷰어 '포커스' 개발 및 적용기 / if(kakaoAI)2024
if kakao 카카오 · YouTube
AI 핵심 요약
티스토리·브런치스토리·다음 카페·카카오맵은 이미지 뷰어의 기능과 UI가 제각각이었고, 외부 라이브러리 의존과 중복 개발도 문제였습니다. 이를 해결하기 위해 Svelte와 TypeScript, GSAP으로 공통 이미지 뷰어 ‘포커스’를 만들고, 확대·슬라이드·목록 등 기능과 서비스별 적용을 위한 API·CSS 변수·문서를 제공했습니다. 가상 슬라이드로 필요한 이미지만 렌더링하고, 핀치·더블 탭 확대와 제스처 충돌을 세밀하게 조정해 사용자 경험을 다듬었습니다. 포커스는 여러 서비스에 적용됐으며, 다음 버전에서는 모멘텀 스크롤과 트랙패드 줌, 플러그인 기반 확장성 및 협업 과정을 개선할 과제로 꼽았습니다.
- 기능 목록은 사용자 리서치와 서비스 기획자 설문을 바탕으로 만들고, 우선순위를 정해 구체화한다.
- 이미지가 많을 때는 가상 슬라이드로 필요한 항목만 DOM에 렌더링해 성능 부담을 줄일 수 있다.
- 핀치 확대는 배율에 따른 가중치를 적용하고, 더블 탭 축소는 다음 상태를 예측해 화면 밖으로 벗어나지 않도록 보정한다.
- 제스처 충돌은 디바운스와 상태 관리로 막고, 터치 임계값을 두어 사용자의 의도에 맞는 이벤트를 판별한다.
- 여러 서비스에 맞춰 확장할 라이브러리는 기능을 모두 포함하기보다 플러그인 방식으로 필요한 기능을 선택하게 하는 방안을 고려한다.
소개
관심과 우선순위를 받기 어려운 처지에 놓인 UX 관련 과제를 시작시키기부터 성공적으로 적용하는 데까지 직면했던 여러 문제들과 이를 극복해오면서 배운 경험을 공유하고자 합니다. #FE #UX #일하는 방식 카카오 FE플랫폼팀에서 티스토리 서비스를 담당하고 있는 Jordan입니다. 카카오 FE플랫폼팀에서 카페 서비스를 담당하고 있는 Leah입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-36 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
비슷한 학습 자료
컨퍼런스 if kakao
사용자 발화에서 응답까지: 그래프 기반 에이전트로 동작하는 AI 서비스
컨퍼런스 if kakao
if(kakao)25 사용자 발화에서 응답까지의 과정을 그래프 기반 에이전트 구조로 풀어낸 카카오의 AI 서비스 구현 방식을 공유합니다. #TECH #PRODUCT #LLM #Agent 카카오에서 LLM을 활용해 여러 도메인의 AI서비스를 개발하고 있는 홍보미(chloe.bm)입니다. AI 서비스의 홍수 속에서 빠지지 않도록 열심히 헤엄치고 있습니다. 카카오에서 LLM을 활용해 여러 도메인의 AI서비스를 개발하고 있는 길민호(ethan.mino)입니다. 스트리밍과 안정적인 LLM 서빙에 관심이 있습니다. 발표자료 보기 📍https://if.kakao.com/2025/session?sessionId=34 📍if.kakao.com if(kakao)25 홈페이지 : https://if.kakao.com/2025 #카카오 #kakao #이프카카오25
AI에이전트 개발
컨퍼런스 if kakao
업무 효율화를 위한 카카오 사내봇 개발기 / if(kakaoAI)2024
컨퍼런스 if kakao
카카오 내에 수많은 데이터에서 원하는 데이터를 빠르게 찾아주는 '0depth 사내봇 개발기'를 공유합니다. #Data #AI #LLM #RAG 카카오 데이터 조직의 Tory입니다. 실용적이고 사용자 친화적인 AI Application을 만드는 것에 관심이 많습니다. 카카오 내에 다양한 AI 프로덕트를 생산하는 Jennie입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-27 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
AI에이전트 개발
컨퍼런스 if kakao
카카오i를 통한 AIOT 서비스의 사례와 미래 / if(kakaoAI)2024
컨퍼런스 if kakao
모든 요소기술들을 아우를 수 있는 미래 먹거리로써 사물인터넷에 연결되는 스마트 디바이스와 클라우드 플랫폼, 그리고 서비스에 인공지능이 접목된 지능화된 사물인터넷(Artificial Intelligence of Things, AIoT)이 부각되는 시대. 사람과 사물이 경계없이 연결하기 위한 카카오i의 AIOT플랫폼의 구조와 현재, 방향, 고민에 대해 공유합니다. #AIoT 디케이테크인의 AI공통플랫폼팀에서 kakaoi 대화형플랫폼 개발을 하고 있는 Ramsy와 Tristan입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-2 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
인공지능 기타 네트워크
컨퍼런스 if kakao
CTO 키노트 / Kakao AI Native | if(kakaoAI)2024 Day2
컨퍼런스 if kakao
if(kakaoAI)2024 CTO 정규돈(gd.re) 키노트 : Kakao AI Native 👇핵심만 골라보기 👇 ⏲️ Time Stamps 00:00 오프닝 01:08 카카오의 AI native 03:20 AI Native 성숙도 4단계 04:00 1단계 탐색 05:49 2단계 적용 06:26 AI Buddy, Code Buddy 22:17 KAP 25:15 AI 포인트 서비스 27:06 3단계 혁신 27:30 4단계 일상 카카오 개발자 컨퍼런스 if(kakaoAI)2024에서 카카오 AI 통합 브랜드 Kanana를 비롯해 AI 비전, 모델, 그리고 우리의 일상을 바꿀 새로운 AI 서비스를 처음으로 세상에 공개했습니다. 더 나은 일상을 모두에게 전하는 그날까지, 끊임없이 가깝고, 친근한 기술을 만들어 가겠습니다. 모든 연결을 새롭게 if(kakaoAI)2024 🔗 if(kakaoAI)2024 홈페이지 : https://if.kakao.com/
AI 코딩 인공지능 기타
컨퍼런스 if kakao
[Phocus] 사용자 경험 중심 스벨트 이미지 뷰어 라이브러리 (송가람 Jordan)
컨퍼런스 if kakao
[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
쿠버네티스 펀하고, 쿨하고, 섹시하게 / if(kakao)2022
컨퍼런스 if kakao
카카오 엔터프라이즈에서는 cluster api와 다양한 plugin을 이용하여, 개발자들에게 용도에 맞는 k8s를 제공하고 있습니다. 그리고 이 환경을 기반으로 모든 클라우드 배포 환경을 k8s를 이용하여 구현할 수 있었습니다. 카카오 엔터프라이즈에서 사용중인 선언적인 kubernetes as a service 개발 방법 공유! 이것이 선언적인 방법이니까! 음! #Kubernetes #ClusterAPI #Kubernetesasaservice 카카오엔터프라이즈에서 퍼블릭 클라우드 서비스를 개발하고 있는 벅과 곤잘레스 입니다. 카카오아이클라우드 최고에요~! 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-58 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #i...
데브옵스 · 인프라 클라우드