To download the app, visit: [tulip](https://<span translate=).co/library/apps/mobile-app-design-template/">Library
이 글에서는 UI 템플릿의 구성 요소와 활용 용도에 대해 설명합니다.
목적
이 앱의 목적은 앱 개발자가 사용자 친화적이고 일관되며 간소화된 모바일 애플리케이션을 제작할 수 있도록 돕는 것입니다. 모바일 경험을 고려하여 앱을 구축함으로써, 모바일 기기에서 더욱 유용하게 활용될 수 있습니다.
이 앱은 Tulip 애플리케이션의 예시를 제공하고, 애플리케이션에서 사용할 수 있는 일반적인 단계 레이아웃을 보여줍니다. 또한 기본 레이아웃, 헤더, 푸터에 포함되어야 할 요소를 개괄적으로 설명하여, 앱 개발자가 Tulip 애플리케이션 개발을 쉽게 시작할 수 있도록 돕습니다. 이 템플릿을 사용하면 앱 개발자가 단계 레이아웃을 복사하여 애플리케이션에 붙여넣을 수 있으므로 앱 제작 과정이 상당히 간소화됩니다. 이는 시간을 절약할 뿐만 아니라, 이 가이드를 사용하여 제작된 모든 앱의 디자인이 통일되도록 보장합니다.
설정
다양한 기기의 화면 크기가 제각각이기 때문에 모바일 앱에서는 해상도가 매우 중요합니다. 현재 이 앱은 모바일 가로 모드와 모바일 세로 모드라는 두 가지 모바일 설정 옵션을 제공합니다. 최신 모바일 기기의 경우 19.5:9 세로 모드와 19.5:9 가로 모드 해상도를 사용하는 것을 권장합니다.
기능 개요
처음 6단계는 디자인 가이드 역할을 하며, 애플리케이션에 사용되는 색상, 버튼, 버튼 아이콘 및 타이포그래피를 보여줍니다. 이러한 요소를 정의함으로써 회사 또는 인스턴스 전반에 걸쳐 일관된 인터페이스를 유지하기가 더 쉬워집니다.
‘색상’ 단계에서는 애플리케이션 구축에 사용된 모든 색상과 해당 16진수 코드를 확인할 수 있습니다. 여러 단계에 걸쳐 색상 변경이 필요한 경우, 색상을 변수로 저장하여 앱 전체에서 일관성을 유지할 수 있습니다.
'버튼' 및 '버튼 아이콘' 단계에서는 라이트 모드 및 다크 모드 앱 모두에서 일반적으로 사용되는 버튼과 관련 아이콘을 정의합니다. 버튼 아이콘은 아이콘의 의미가 한눈에 명확할 때 텍스트와 함께 사용하여 가독성을 높이고 공간을 절약할 수 있습니다. 각 아이콘은 앱의 모든 단계에서, 그리고 가급적이면 워크스페이스 내 모든 앱에서 일관된 의미를 가져야 합니다.
이 섹션의 마지막 단계는 ‘타이포그래피’ 단계로, 제목과 본문 텍스트의 글꼴 크기와 스타일을 정의합니다. 모바일 앱의 경우 가독성을 높이기 위해 글꼴 크기를 20px 이상으로 유지하고 배경과 높은 대비를 확보하는 것이 좋습니다.
다음 섹션은 앱 제작자가 자신의 앱에 가장 적합한 기본 레이아웃을 디자인할 수 있도록 돕습니다. 여기에는 기본 레이아웃에 복사하여 붙여넣을 수 있는 다양한 헤더와 푸터가 제공됩니다. 기본 레이아웃에 네비게이션 바를 추가하면 사용자가 다른 단계로 이동하거나, 페이지를 새로 고치거나, 기기 상태를 확인할 수 있어 사용자 워크플로우가 향상됩니다. 앱 제작자는 밝은 테마 또는 어두운 테마의 기본 레이아웃 중에서 선택할 수 있습니다.
또한 이 앱에는 ‘단계 템플릿’용 단계 세트와 ‘단계 레이아웃’용 단계 세트가 포함되어 있습니다. 여기에는 메뉴, 모달, 작업 지침, 사진 촬영 등이 포함됩니다.
추가 정보
앱 디자인 모범 사례에 대해 알아보려면 여기의 기사를 확인해 보세요.
모바일 기기용 애플리케이션 설계에 대해 더 자세히 알아보려면 모바일 UI/UX 모범 사례에 대한 커뮤니티 토론을 확인해 보세요.