Family UI

Family UI는 자동차 업계의 Family Look(같은 브랜드의 여러 모델에 공통된 디자인 요소를 부여해 브랜드 정체성을 드러내는 방식)에서 인용된 개념으로, 하나의 서비스가 웹·iOS 앱·안드로이드 앱 등 여러 플랫폼에 걸쳐 제공될 때 아이콘·레이블·레이아웃·내비게이션 등 UI 요소가 얼마나 일관된 정체성을 유지하는지를 가리킨다. 모델이 달라도 한눈에 같은 브랜드임을 알아볼 수 있게 하는 자동차의 Family Look처럼, 서비스도 플랫폼이 바뀌어도 사용자가 동일한 서비스를 쓰고 있다는 느낌을 받도록 디자인해야 한다는 문제의식에서 나온 용어다.

2010년 미투데이(당시 마이크로블로그 서비스)의 웹·iOS 앱·안드로이드 앱을 나란히 비교한 사례 분석은 이 개념을 구체적으로 보여준다. 아이콘 차원에서는 같은 레이블('찾아보는', '프로필')인데도 실제로는 다른 기능(키워드 등록 보기 vs 검색, 프로필 설정 vs 프로필 확인)을 수행하면서 아이콘만 다르게 쓰거나, 반대로 다른 기능인데 비슷한 형태의 아이콘을 재사용해 혼란을 주는 경우가 발견됐다. 레이블 차원에서는 동일한 기능에 '댓글달기'/'댓글쓰기', '쓰기'/'올리기'처럼 플랫폼마다 다른 단어를 쓰는 문제가 있었다. 레이아웃 차원에서는 날짜·시간 정렬 방향(좌측/우측)과 표기 방식, 이미지 그리드의 한 줄당 개수(iOS 2개 vs 안드로이드 6개)가 플랫폼마다 달랐다. 내비게이션 차원에서는 안드로이드가 홈 대시보드를 거쳐 이동하는 구조인 반면 iOS는 하단 탭에서 카테고리를 바로 선택하는 구조로, OS의 태생적 차이가 서비스 구조에도 그대로 반영돼 있었다.

이런 차이는 대부분 치명적인 오류라기보다 미묘한 불일치이며, 개별 플랫폼의 UI 흐름(Flow) 자체에는 문제가 없는 경우가 많다. 그러나 한 서비스를 웹에서 쓰다가 앱으로, 또는 iOS에서 안드로이드로 옮겨가는 사용자에게는 이런 사소한 차이가 누적되어 "다른 서비스를 쓰는 듯한" 낯섦으로 이어질 수 있다. 따라서 Family UI를 다루는 태도는 모든 플랫폼을 픽셀 단위로 동일하게 맞추는 것이 아니라, 각 플랫폼의 특성에 맞게 최적화하면서도 아이콘·레이블·레이아웃 규칙 등 정체성의 핵심 요소는 통일하는 균형에 있다.

핵심 내용

  • Family UI: 자동차 업계의 Family Look에서 차용한 개념으로, 여러 플랫폼에 걸친 UI 정체성의 일관성을 뜻함
  • 같은 레이블에 다른 아이콘, 같은 기능에 다른 레이블을 쓰면 사용자 혼란을 유발
  • 레이아웃(정렬 방향, 그리드 개수)과 내비게이션 구조도 플랫폼별로 미묘하게 달라지기 쉬운 지점
  • 안드로이드/iOS의 내비게이션 구조 차이는 OS의 태생적 특성(홈 대시보드 vs 하단 탭)에서 기인
  • 목표는 모든 플랫폼의 완전한 동일화가 아니라, 플랫폼별 최적화와 정체성 일관성 사이의 균형

관련 개념

  • UI 가이드라인 — 플랫폼별 공식 HIG가 규정하는 디자인 규범과, 그 위에서 유지해야 할 브랜드 고유의 Family UI 일관성
  • 디자인 시스템 — 아이콘·레이블·레이아웃 규칙을 체계적으로 관리해 Family UI 일관성을 구조적으로 지원하는 도구
  • 안드로이드 내비게이션 룰 — 안드로이드 고유의 Activity Stack 기반 내비게이션 구조가 iOS와 다른 이유
  • UI 컴포넌트 용어 — 아이콘·레이블 등 UI 요소를 지칭하는 공통 용어 체계

출처

최종 업데이트: 2026-07-17 | 출처 1개