네이티브 차트 개발 여정 / if(kakaoAI)2024
if kakao 카카오 · YouTube
AI 핵심 요약
파스타의 혈당 차트는 데이터가 불규칙하게 비거나 끊기는 경우까지 다루는 세밀한 요구사항이 많아, 기존 차트 라이브러리 대신 iOS와 Android에서 네이티브로 구현했습니다. iOS에서는 Core Graphics의 패스와 클리핑, 블렌드 모드로 선과 영역을 표현하고, 뷰포트에 보이는 데이터만 그려 메모리 부담을 줄였습니다. Android에서는 Jetpack Compose의 Canvas와 LazyRow를 이용해 차트를 시간 블록으로 나누고, 블록 경계의 포인트를 연결해 선의 연속성을 유지했습니다. 구간별 색상은 비트맵을 ImageShader 브러시로 재사용해 한 번에 그렸으며, 직접 구현은 높은 자유도를 주지만 렌더링 구조와 성능을 함께 설계해야 한다는 점을 공유했습니다.
- 차트 라이브러리가 세밀한 요구사항을 충족하지 못한다면, 필요한 인터랙션과 커스터마이징 범위를 먼저 정리한 뒤 직접 구현 여부를 판단하세요.
- Core Graphics에서는 클리핑 패스와 CGContext 상태 저장·복원으로 영역별 색상을 적용하고, 블렌드 모드로 겹치는 레이어의 합성 방식을 조정할 수 있습니다.
- 스크롤 차트는 화면 밖의 데이터까지 렌더링하지 않도록 iOS에서는 뷰포트를, Android에서는 LazyRow 기반 블록 구조를 활용할 수 있습니다.
- 블록 단위로 선을 그릴 때는 경계의 이전·다음 포인트를 연결해 선이 끊기거나 꺾여 보이지 않도록 처리해야 합니다.
- Android에서 구간별 영역 색상을 여러 번 겹쳐 그리는 대신 비트맵과 ImageShader를 재사용하면 렌더링 횟수를 줄일 수 있습니다.
소개
유동적인 데이터를 시각화하는 차트를 개발하며, 라이브러리를 사용하지 않고 모바일 환경에서 직접 차트를 구현한 경험을 공유합니다. 복잡하고 다양한 커스터마이징을 위해 라이브러리를 배제한 이유와 선택 사항들, 그리고 문제 해결 과정에 대해 다룹니다. 각 단계별로 직면했던 과제와 이를 극복한 방법을 설명하며, 보다 유연하고 맞춤화된 차트를 만드는 데 필요한 내용을 설명합니다. #Android #iOS #Chart 카카오헬스케어에서 파스타 서비스의 iOS 개발을 담당하고 있는 Apeach입니다. 카카오헬스케어에서 파스타 서비스의 안드로이드 개발을 담당하고 있는 Las입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-50 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
비슷한 학습 자료
컨퍼런스 if kakao
카카오톡 펑 개발기 / if(kakaoAI)2024
컨퍼런스 if kakao
숏폼, 휘발성 컨텐츠 서비스인 “카카오톡 펑” 개발 과정을 소개합니다. 성능 최적화, 비디오/이미지 데이터 처리 등을 위한 경험을 공유합니다. #카카오톡펑 #개발기 #최적화전략 #실시간데이터 카카오톡 플랫폼 개발하는 Ocean입니다. 카카오톡 플랫폼을 개발하는 Hoodie입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-87 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
웹 개발 백엔드
컨퍼런스 if kakao
카카오내비 카플레이/AndroidAuto 개발기 / if(kakaoAI)2024
컨퍼런스 if kakao
카카오내비의 카플레이(CarPlay) 및 안드로이드 오토(Android Auto) 개발 과정을 다룹니다. 각 플랫폼에서의 구조적 고민, HUD 및 클러스터 기능 구현 등의 도전 과제와 개발 경험을 소개합니다. #Carplay #Android-Auto #Navigation 카카오내비 클라이언트앱 개발 담당하는 Jin입니다. 카카오내비 iOS 카플레이 개발 담당하는 David입니다. 카카오내비 Android-Auto 개발 담당하는 Beom입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-53 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
모바일 앱 개발
컨퍼런스 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
우리는 왜 차트를 쪼갰을까: 복잡한 데이터 시각화에 유연하게 대응하기 / if(kakaoAI)2024
컨퍼런스 if kakao
데이터를 활용하는 분야에서 적절한 시각화는 매우 중요합니다. 하지만 복잡한 요구사항에 대응하기 위해 차트의 깊은 곳까지 들여다보는 일은 때때로 매우 어렵습니다. 디자인 시스템을 조립하듯 쉽게 차트를 만들 수 있다면 어떨까요? 이를 위해 차트의 로직과 UI를 분리하여 정의하고, 새롭게 설계 및 구현한 과정을 공유합니다. #Frontend #데이터 시각화 #의존성 관리 카카오헬스케어에서 데이터 플랫폼을 위한 차트 시스템을 개발하고 있는 Ollie입니다. 유연한 인터페이스 설계와 안정성 높은 코드 작성에 관심이 많습니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-41 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
프론트엔드
컨퍼런스 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
카카오페이 앱 리빌딩 스토리 / if(kakao)2022
컨퍼런스 if kakao
카카오페이앱을 리빌딩하면서 겪은 과정들을 소개해 드리려고 합니다. #Android 카카오페이 안드로이드 주식 서비스 업무를 맡고 있는 스카일러입니다. 카카오페이 안드로이드 계정 서비스 업무를 맡고 있는 에디입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-91 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
모바일 앱 개발