Bubble의 핵심 능력은 기본적인 형태에서 전문 웹 사이트 및 SaaS 응용 프로그램까지 정밀하게 디자인을 만들 수 있는 능력입니다.
Introduction
디자인은 앱의 외관, 제공하는 경험 및 사용자에게 불러일으키는 감정을 포함한 앱의 모양과 느낌에 관한 것입니다. 디자인 작업 시 레이아웃, 타이포그래피, 색상 및 테두리, 그림자 및 전환과 같은 효과에 중점을 두게 됩니다.
앱의 디자인은 몇 가지 중요한 기능을 제공합니다. 잘 고려된 디자인은 직관적인 사용자 인터페이스를 제공하여 사용자가 앱을 쉽게 이동하고 사용할 수 있도록 합니다. 또한 일관된 브랜드 아이덴티티를 확립하여 앱을 인식 가능하게하고 돋보이게 할 수 있습니다.
Great design solves problems
대부분의 앱은 본질적으로 사용자에게 복잡한 작업을 단순화하려는 기계의 상단에 있는 깔끔한 계층에 불과합니다. 예를 들어 프리랜서를 찾는 마켓 플레이스, 작업 관리 앱 또는 아트를 구매하는 전자 상거래 스토어를 운영한다고 가정해 보겠습니다. 이러한 작업 중 어느 하나도 사용자가 처음에 해결할 수 없을 것은 없지만 앱을 통해 더 간단하고 즐거운 경험으로 만들 수 있습니다. 훌륭한 앱 아이디어는 사용자가 문제를 해결하고 데이터를 안전하게 저장할 수 있도록 돕는 것입니다.
이것이 디자인이 단순히 앱을 멋지게 만드는 것이 아니라는 이유입니다. 잘 디자인된 앱의 목표는 매력적인 시각적인 효과를 사용자 친화성과 결합하는 것입니다. 성공적인 디자인에는 여러 가지 측면이 있으며 아래 목록은 앱의 사용자 인터페이스를 계획하는 데 좋은 시작점을 제공할 수 있습니다.
•
일관성 : 색상, 글꼴 및 기타 스타일링 선택의 구조적 사용은 사용자가 인식할 수 있는 앱의 정체성을 제공합니다.
•
직관성 : 직관적인 디자인은 사용자가 앱을 어떻게 사용할지 이해하기 쉽게 만듭니다.
•
효율성 : 설계를 신중하게 고려하면 사용자가 효율적으로 문제를 해결할 수 있습니다.
•
접근성 : 잘 계획된 디자인은 다양한 종류의 기기 및 장애를 가진 사용자에게 앱을 접근 가능하게 만듭니다.
Bubble's design tools
Bubble은 앱을 만드는 독특한 방법을 제공합니다. 빈 캔버스에 앱을 그리고 디자인을 즉시 미리 볼 수 있는 100% WYSIWYG 도구입니다. 코드를 작성하거나 예상치 못한 결과가 나오지 않습니다.
Bubble의 다양한 도구를 결합하여 일관되고 픽셀 완벽하며 완전히 응답하며 모든 기기 및 브라우저와 호환되는 디자인을 만들 수 있습니다.
Elements
앱의 사용자 인터페이스는 입력 필드, 버튼, 이미지, 확인란, 달력, 이미지, 아이콘과 같은 요소로 구성됩니다. Bubble은 WYSIWYG 시각 편집기를 제공하여 코드를 작성하지 않고도 페이지에 직접 요소를 선택하고 배치하고 즉시 미리 볼 수 있습니다.
요소 섹션에서는 다양한 요소 유형과 이를 조합하여 거의 무한한 수의 다양한 사용자 인터페이스를 구축하는 방법에 대해 다룹니다.
Styling
페이지의 모든 가시적인 요소는 다양한 방법으로 스타일링될 수 있습니다. 단일 요소를 기반으로 스타일을 적용하거나 Bubble의 스타일 기능을 사용하여 여러 요소에 적용할 수 있는 스타일 시트를 저장할 수 있습니다. Bubble은 또한 폰트 및 색상 변수를 설정하여 이러한 속성을 앱 전체의 스타일 및 요소에 적용할 수 있습니다.
Responsive design
Bubble의 응답형 엔진은 앱이 스마트폰, 태블릿 및 데스크톱 컴퓨터와 같은 다양한 기기에서 잘 보이고 잘 작동하도록 보장합니다. 응답형 디자인을 설정하면 다양한 기기에 대한 웹 사이트의 별도 버전을 만들 필요가 없어집니다.
Additional design resources
자체 디자인을 만드는 데 도움이 되는 Bubble의 도구 외에도 프로젝트를 처음 설정할 때 시작점을 제공할 수 있는 다양한 리소스가 있습니다.
Templates
템플릿은 프로젝트를 처음 설정할 때 시작점을 제공할 수 있는 반종료 앱입니다. 디자인 및 워크플로를 모두 포함하고 다양한 범주를 다룹니다.
아래의 기사에서 전체 범주 목록을 확인하세요.
The Component Library
Bubble의 Component Library는 페이지에 끌어다 놓아 아름다운 인터페이스를 더 빠르게 구축하는 데 도움이 되는 사전 제작된 사용자 인터페이스 (UI) 구성 요소의 컬렉션입니다. 이러한 UI 구성 요소는 완전히 응답하며 컨테이너, 시각적 요소 및 폼 입력으로 구성되어 페이지에 추가되면 개별적으로 사용자 정의할 수 있습니다.
Importing from Figma
Figma는 프로토타이핑 및 디자인 초기 단계에 유용한 도구이며 Bubble은 Figma에서 디자인을 가져오는 도구를 제공합니다.
