본문으로 이동
Compose Text 통합 진단: 이슈 분석과 디자인시스템 적용 전략 #우아콘2025 #우아한형제들
컨퍼런스

Compose Text 통합 진단: 이슈 분석과 디자인시스템 적용 전략 #우아콘2025 #우아한형제들

우아콘 2025 우아한형제들 · YouTube

원문 보기

AI 핵심 요약

배달의민족 앱의 Compose 텍스트가 디자인 시안과 어긋나는 문제를 해결하기 위해 폰트 패딩, 폰트 매트릭스, 베이스라인 기준 줄높이와 한국어 줄바꿈 동작을 분석했습니다. LineHeightStyle의 trim과 alignment를 조정해 Figma의 줄높이 표현에 맞추고, 디자인 시스템 타이포그래피에 설정을 통합했습니다. 줄바꿈은 로케일에 따라 달라지는 점을 확인하고, Zero Width Space·Non-Breaking Space나 실제 줄 길이에 맞춘 레이아웃 조정으로 사례별 대응법을 마련했습니다. 지정한 폰트 크기만으로 실제 텍스트 영역을 예측할 수 없으므로, 폰트 매트릭스와 측정 결과까지 고려해 디자인 시스템에서 일관되게 다뤄야 한다는 점을 공유했습니다.

  • Compose의 줄높이는 일반적인 상단부터 하단까지의 높이가 아니라 베이스라인 간 거리로 정의되므로, 시각적 기준과 구분해야 합니다.
  • Figma 시안에 맞출 때는 LineHeightStyle의 trim과 alignment를 함께 검토하고, 디자인 시스템의 타이포그래피 스타일에 일관되게 적용하세요.
  • 한국어 줄바꿈은 로케일에 따라 어절 또는 음절 단위로 달라질 수 있으므로 실제 기기의 언어 설정까지 포함해 테스트해야 합니다.
  • Zero Width Space와 Non-Breaking Space는 줄바꿈 동작을 바꾸지만 텍스트 처리에 영향을 주므로 필요한 사례에 한해 신중하게 사용하세요.
  • 폰트 매트릭스 때문에 지정한 폰트 크기와 실제 텍스트 레이아웃 높이가 다를 수 있어, 측정 결과와 컴포넌트 배치를 함께 확인해야 합니다.

소개

[세션 설명] 배달의민족 앱에서 마주한 Compose Text 품질 이슈를 사례로 다룹니다. 폰트 정렬, 줄바꿈, 말줄임 처리 문제를 해결하며 픽셀 단위까지 품질을 끌어올린 과정을 공유합니다. 단순한 버그 수정이 아니라 디자인시스템 차원에서 줄높이와 간격을 집요하게 맞춰온, 끝없이 텍스트와 싸운 기록을 소개합니다. [발표자 소개] 강경완(안드로이드 개발자)

비슷한 학습 자료

컨퍼런스 우아콘 2025

당연해진 디자인시스템, 그다음 이야기: AST와 MCP로 여는 미래 #우아콘2025 #우아한형제들

컨퍼런스 우아콘 2025

[세션 설명] 우아한공방은 우아한형제들의 디자인시스템으로, 3년간의 안정화를 거쳐 모든 프로덕트에 잘 녹아들게 되었습니다. 이제는 디자인시스템 개발을 넘어 전 직군의 업무 효율에 도움 될 수 있는 방안을 고민하고 있습니다. 각 프로덕트에서 우아한공방의 적용 현황을 분석해 시각화하고, 우아한공방 MCP를 활용해 UX/DX를 향상한 경험을 공유합니다. [발표자 소개] 권현아(프런트엔드 개발자), 이상철(프런트엔드 개발자)

프론트엔드 AI에이전트 개발 UI/UX

컨퍼런스 우아콘 2025

똑같아 보이는데 다르다고? 큐레이션 중복 개발 탈출기 #우아콘2025 #우아한형제들

컨퍼런스 우아콘 2025

[세션 설명] 배달의민족에는 고객의 선택을 돕는 수많은 큐레이션들이 있습니다. 여러 화면에 노출하기 위하여 지면별로 개발을 진행하면서 발생했던 문제들과 이를 하나의 통합 플랫폼으로 발전시킨 실제 경험을 공유합니다. 메인홈, 검색결과 등 주요 지면에 성공적으로 적용하여 개발 효율성을 크게 향상시킨 구체적인 사례와 함께, 기술과 조직 문화가 함께 변화한 생생한 이야기를 들려드립니다. [발표자 소개] 강미경(PM), 이화영(안드로이드 개발자)

백엔드

컨퍼런스 우아콘 2025

Android 개발자가 iOS 개발자 없이 앱 출시하기: Compose Multiplatform 아키텍처 설계부터 운영까지 #우아콘2025 #우아한형제들

컨퍼런스 우아콘 2025

[세션 설명] Compose Multiplatform으로 우아한테크코스 인하우스 앱을 개발하고 운영하며 겪었던 네이티브 리소스 관리 노하우와 KMP 아키텍처 설계를 공유합니다. KMP 미지원 라이브러리(Firebase 등)를 통합하고 네이티브 UI 이벤트를 처리하기 위한 구체적인 코드 레벨의 고민을 담았습니다. [발표자 소개] 김수현(안드로이드 개발자, 교육자)

모바일 앱 개발 로드맵 8개에 담김

컨퍼런스 우아콘 2024

XML을 Compose로 전환하기 #우아콘2024 #우아한형제들

컨퍼런스 우아콘 2024

[WOOWACON2024 세션 다시보기] 👉 세션 설명 ㅤ 요즘 다들 컴포즈로 개발한다던데, 우리는 아직 XML로 작성되어 있는데, 괜히 바꾸었다가 문제가 생기는 거 아니야? 완전 다른 방식인데 어떤 점을 신경써야 하지? 고민하신 적 있나요? 커머스Android팀에서 XML → Compose 전환하면서 겪은 사례들을 소개합니다. ㅤ 👉 발표자 소개ㅤ 박정운, Android 개발자

프론트엔드 모바일 앱 개발

컨퍼런스 우아콘 2022

Jetpack Compose로 디자인시스템 만들기 #우아콘2022 #Day2_음식그이상의것을문앞으로

컨퍼런스 우아콘 2022

배달의민족 Android 프로젝트에 디자인시스템(aka 배시시, 배민시각시스템)을 도입한 경험과, 디자인시스템을 만들기 위해 Jetpack Compose를 사용해 보고 느낀 점을 공유합니다. [발표자 소개] 강경완 | 배민푸드Android개발팀 배달의민족 Android 앱을 개발합니다. 모든 사람이 편하게 사용할 수 있는 앱을 만들기 위해 노력합니다. 사람들과 만나 소통하는 걸 좋아하며, 개발자 커뮤니티를 운영하고 있습니다.

모바일 앱 개발 UI/UX

컨퍼런스 우아콘 2021

배달의민족에 Jetpack Compose 적용을 시도해보았다 #우아콘2021 #첫째날_배민비하인드

컨퍼런스 우아콘 2021

Jetpack Compse가 1.0 버전으로 공개되었습니다. 배달의민족 프로젝트에 Jetpack Compose를 사용해보고 느낀점을 공유합니다. [발표자 소개] 강경완, 배민Android개발팀 배달의민족 Android앱을 개발합니다. 모든 사람이 편하게 사용할 수 있는 앱을 만들기 위해 노력합니다. 사람들과 만나 소통하는 걸 좋아하며, 개발자 커뮤니티를 운영하고있습니다.

프론트엔드 모바일 앱 개발