KMP 기반 UI 컴포넌트 통합 전략
엔지니어링데이 2025 네이버 · YouTube
AI 핵심 요약
밴드 디자인 시스템 BDS는 파운데이션·엘리먼트·모듈 계층과 역할 중심 디자인 토큰으로 UI를 구조화했지만, 플랫폼별 구현 차이와 진행도 불일치로 결과물의 일관성을 유지하기 어려웠습니다. 이를 줄이기 위해 Kotlin Multiplatform(KMP)과 Compose Multiplatform을 BDS UI 모듈에 적용해 공통 코드로 UI를 구현하고, 필요한 모듈만 멀티플랫폼화해 Maven 스냅샷으로 배포했습니다. 플랫폼별 코드는 공통화를 우선하고 expect/actual은 불가피한 경우에만 쓰는 팀 원칙을 세웠으며, Figicon은 Figma API로 아이콘을 내려받고 SVG를 Android XML로 변환해 동기화 과정을 자동화합니다. 디자인 시스템의 재사용성을 높이려면 컴포넌트 구조뿐 아니라 플랫폼 간 구현 원칙과 리소스 관리 절차도 함께 표준화해야 한다는 점을 보여줍니다.
- 공통 UI는 Compose Multiplatform으로 구현하고, 플랫폼 전용 API는 인터페이스 구현을 우선하며 필요한 경우에만 expect/actual을 사용합니다.
- KMP는 전체 프로젝트를 한 번에 전환하지 않고 필요한 모듈부터 점진적으로 적용할 수 있습니다.
- 디자인 토큰은 원시 색상값을 직접 참조하기보다 팔레트의 레퍼런스 토큰과 역할 중심 시스템 토큰으로 나누어 관리합니다.
- Figicon 자동화에는 Figma 파일 구조와 디자이너 간 합의가 필요하며, API로 받은 SVG 아이콘은 Android XML 벡터 리소스로 변환합니다.
소개
네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. [발표 내용] 멀티플랫폼에 대응 가능한 밴드 디자인 시스템의 설계 및 구현 방식에 대해 소개하고, 밴드 안드로이드 팀에서 아이콘 리소스를 자동화하여 관리하는 방법에 대해서 공유합니다. [강의 대상] * 안드로이드 개발자 및 멀티플랫폼에 대한 관심이 있는 분 * 디자인 시스템에 관심이 있는 분 [목차] Episode 1 : 디자인 시스템, 개념에서 실전까지 Episode 2 : KMP, 진짜 실무에 쓸 수 있을까? Episode 3 : BDS 모듈에 KMP 적용하기 Episode 4 : 디자인 시스템 UI 컴포넌트, Maven으로 배포하기 Episode 5 : Figicon으로 아이콘 자동 동기화하기
비슷한 학습 자료
컨퍼런스 엔지니어링데이 2025
디자인시스템이 AI를 만났을 때: FE 개발 패러다임의 변화
컨퍼런스 엔지니어링데이 2025
네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025 에서 발표되었던 세션을 공개합니다. [발표 내용] 네이버파이낸셜 디자인시스템과 AI를 이용하여 마크업 자동화 작업에 대한 소소한 경험을 공유합니다. [발표 대상] AI를 이용한 마크업 등 디자인 작업관련 관심 있으신 모든 분들 [목차] * 오늘 이야기의 키워드 * 知彼知己 - 네이버파이낸셜 디자인시스템 ㄴ디자인 토큰 ㄴ 디자인 시스템 컴포넌트 * 우리를 도와 줄 AI 는? * 百戰不殆 * Let's Try * 마크업 작업을 위한 사전 준비 - 디자인시스템 Code Connect - 디자인시스템 instruction - 이제 FE 개발 시작해도 될 마크업, 하지만 아쉬웠던 점 - 그 외로 힘들었던 점 * 현실 개발에서는 어떻게 해야하는가? * 마크업 직업 개발했더니 어떠니?
프론트엔드 AI 코딩
컨퍼런스 엔지니어링데이 2025
생산성을 높이는 Android SDK 배포 전략
컨퍼런스 엔지니어링데이 2025
네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. [발표 내용] Android SDK 를 배포하는 프로세스를 개선하거나 자동화 함으로써 생산성을 높였던 경험을 공유하고 그 과정에 대해 소개합니다. [강의 대상 및 직군] Android SDK 배포 효율성과 생산성을 높이고 싶으신 분들 GitHub Actions 를 이용한 자동화에 관심이 있으신 분들 [기술 분류] Android, SDK, Gradle, GitHub Actions
모바일 앱 개발 데브옵스 · 인프라
컨퍼런스 엔지니어링데이 2025
디자인시스템을 개발에서 적용 하는법
컨퍼런스 엔지니어링데이 2025
DESIGN SYSTEM FOR Android: From Figma to Jetpack Compose
컨퍼런스 엔지니어링데이 2025
네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2024(5월)에서 발표되었던 세션을 공개합니다. Figma와 Jetpack Compose를 사용하여 Android 디자인 시스템을 구축하는 방법을 다룹니다. 디자인 시스템의 중요성과 Figma에서 디자인을 만들고 Jetpack Compose로 구현하는 과정을 설명하고, 이를 통해 디자이너와 개발자가 어떻게 협업할 수 있는지, 그리고 일관성 있는 사용자 경험을 제공하기 위해 디자인 시스템을 어떻게 효과적으로 관리할 수 있는지를 보여줍니다. We'll discuss what design systems are, why they're important, and how we can build them effectively using tools like Jetpack Compose. Demo Material Design figma : https://www.figma.com/file/nVZK2STszk2ehH0xN3kxc...
프론트엔드 모바일 앱 개발 UI/UX
컨퍼런스 우아콘 2025
