(1) 버블의 디자인
Bubble디자인의 핵심은
기본적인 웹사이트부터 전문 웹 사이트 및 SaaS 애플리케이션에 이르기까지 디자인을 쉽고 정확하게 만드는 것입니다.
1. 특징 소개
1) 심미적인 효과
- 디자인은 시각적 매력, 앱이 제공하는 경험, 앱이 사용자에게 불러일으키는 감정을 포함하여 앱의 모양과 느낌에 관한 것입니다.
- 디자인 작업을 할 때 요소의 레이아웃, 타이포그래피, 색상 및 테두리, 그림자 및 전환과 같은 효과와 같은 미학에 중점을 둡니다.
2) 효과적인 사용자 인터페이스
- 버블 앱 디자인은 몇 가지 중요한 기능을 제공합니다. 또한 훌륭하고 사려 깊은 디자인은 직관적인 사용자 인터페이스를 제공하여, 사용자가 쉽고 즐겁게 앱을 탐색하고 사용할 수 있도록 해줍니다.
3) 브랜드 아이덴티티 구축
- 앱을 빠르게 인식할 수 있도록 돋보이게 하는 일관된 브랜드 아이덴티티를 설정하는 데 도움이 될 수 있습니다.
2. 성공적인 디자인
1) 훌륭한 디자인은 문제를 해결
- 생각해 보면 대부분의 앱은 실제로는 복잡할 수 있는 사용자의 작업을 쉽고 단순화하는 것을 목표로 하는 기계 위에 있는 예쁜 레이어입니다.
- 예를 들어, 프리랜서를 찾기 위한 마켓플레이스, 작업 관리 앱 또는 미술품 구매를 위한 전자 상거래 상점을 운영하는 경우, 이러한 작업 중 어느 것도 처음부터 문제를 쉽게 해결할 수는 없습니다. 그러나 여러분의 버블 앱은 더 쉽고 즐겁게 문제를 해결할 수 있습니다. 결과적으로 훌륭한 앱 아이디어를 통해 사용자는 쉽게 문제를 해결하고 데이터를 안전하게 저장할 수 있습니다.
2) 사용자 친한 성을 결합한 디자인
- 위와 같은 이유가 바로 디자인을 오직 예쁘게만 만들지 말아야 하는 이유입니다.
- 잘 디자인된 앱의 목표는 매력적인 시각적 요소와 사용자 친화성을 결합하는 것입니다.
성공적인 디자인에는 여러 가지 측면이 있으며 아래 목록은 앱의 사용자 인터페이스를 계획하기 위한 좋은 출발점을 제공할 수 있습니다. 다음의 것들은 성공적인 앱 서비스를 위해서 반드시 고려되어야 할 부분들입니다.
3) 성공적인 디자인의 고려사항
- 일관성 색상, 글꼴 및 기타 스타일 선택을 체계적으로 사용하면 앱에 사용자가 알아볼 수 있는 아이덴티티가 부여됩니다.
- 직관성 직관적인 디자인으로 사용자가 앱 사용 방법을 쉽게 이해할 수 있습니다.
- 효율성 사려 깊은 디자인은 사용자가 문제를 효율적으로 해결하는 데 도움이 될 수 있습니다.
- 접근성 잘 계획된 디자인을 통해 다양한 유형의 장치와 장애가 있는 사용자가 앱에 액세스 할 수 있습니다.
(2) 버블의 디자인 도구
- Bubble은 앱을 구축하는 고유한 방법을 제공합니다. 빈 캔버스에 앱을 그리고 즉시 디자인을 미리 볼 수 있는 100% WYSIWYG 도구입니다. 작성할 코드나 예기치 않은 결과가 없습니다.
- Bubble의 다양한 도구를 결합하여 모든 장치 및 브라우저와 일관되고 빠르게 호환되는 디자인을 만들 수 있습니다.
WYSIWYG (위지웍스) 도구란?
- WYSIWYG는 "What You See Is What You Get"의 약자로, 사용자가 컴퓨터 화면에서 작업한 내용이 출력물이나 최종 결과물과 동일하게 나타나는 도구 또는 시스템을 의미합니다. 이 용어는 주로 워드 프로세서, 그래픽 디자인 소프트웨어, 웹 편집기 등의 응용 프로그램에서 사용됩니다.
1. Element (요소)
- 앱의 사용자 인터페이스는 element(요소)로 구성됩니다. 그것들은 각각 특정 용도에 사용되는 아이콘과 같은 입력 필드, 버튼, 이미지, 확인란, 캘린더, 이미지입니다.
- Bubble 은 코드를 작성하는 대신 페이지에서 직접 element(요소)를 선택하고 배치할 수 있는 WYSIWYG 시각적 편집기를 제공합니다.
- 요소(element) 섹션에서는 서로 다른 요소 유형과 이러한 요소를 결합하여 사실상 무제한의 서로 다른 사용자 인터페이스를 구축하는 방법을 다룹니다.
Element (요소) 중급 > 바로가기
2. Styling 스타일링
- 페이지에 표시되는 모든 element(요소)는 다양한 방식으로 스타일을 지정할 수 있습니다.
- 요소별로 스타일을 적용하거나 Bubble의 스타일 기능을 사용하여 여러 요소에 적용할 수 있고 하나의 통합된 중앙위치에서 제어할 수 있는 스타일시트를 저장할 수 있습니다. 또한 Bubble을 사용하면 앱의 스타일 및 요소에 이러한 속성을 적용하는 글꼴 및 색상 변수를 설정할 수 있습니다.
Styling (스타일링) 중급 > 바로가기
3. Responsive design 반응형 디자인
- Bubble의 반응형 엔진은 앱이 스마트폰, 태블릿 및 데스크톱 컴퓨터와 같은 다양한 장치에서 잘 보이고 작동하도록 합니다. 반응형 디자인을 설정하면 다양한 장치에 대해 별도의 웹사이트 버전을 생성할 필요가 없습니다.
반응형 디자인 (초급) > 바로가기
반응형 디자인 (중급) : Building responsive pages > 바로가기
(3) 추가적인 디자인 자원
- 자신만의 디자인을 구축하기 위한 Bubble의 도구 외에도 디자인을 훨씬 더 빠르게 설정하는 데 도움이 되는 다양한 리소스가 있습니다.
1. 템플릿 : Templates
- 템플릿은 프로젝트를 처음 설정할 때 시작점을 제공할 수 있는 반제품 앱이라고 생각하면 쉽습니다. 여기에는 디자인 및 워크플로우가 모두 포함되어 있으며 다양한 범주의 앱들을 제공합니다.
- 자세한 내용을 읽고 아래 문서에서 전체 범주 목록을 확인하십시오.
템플릿 : Templates (초급) > 바로가기
2. 구성 요소 라이브러리 : The Component Library
- 구성 요소 라이브러리는 멋진 인터페이스를 더 빠르게 구축하는 데 도움이 되도록 페이지로 끌어다 놓을 수 있는 사전 구축된 사용자 인터페이스(UI) 구성 요소 모음입니다.
- 이러한 UI 구성 요소는 완벽하게 반응하며 페이지에 추가된 후 개별적으로 사용자 지정을 할 수 있는 컨테이너, 시각적 요소 및 양식 입력으로 구성됩니다.
컴포넌트 라이브러리 (중급) : The Component Library > 바로가기
- 예제 : 쉽고 빠르게 가입/로그인 구현해 보기
3. Figma에서 가져오기
:Figma는 프로토타이핑 및 디자인의 첫 번째 단계를 위한 인기 있고 유용한 도구이며 Bubble에는 Figma에서 Bubble로 디자인을 가져오는 도구가 있습니다.
Figma란?
웹 기반의 협업 디자인 도구입니다. 그래픽 디자이너, UI/UX 디자이너 및 기타 디자인 관련 전문가들이 디자인 작업을 할 수 있도록 도와주는 툴입니다.
Figma에서 가져오기 (초급) > 바로가기
'버블 개발 > 초급' 카테고리의 다른 글
| 6. Bubble Logic (초급) : 버블 로직, 워크플로우 (workflow), 동적표현(dynamic expression), conditions, navigation (0) | 2023.06.01 |
|---|---|
| 5. Bubble Data (초급) : 버블의 데이터, 노코드앱의 쉬운 데이터 설정 (0) | 2023.05.31 |
| 3. 버블로 첫 번째 앱 만들기 (기초) : 앱 개발의 단계적 튜토리얼 (0) | 2023.05.29 |
| 2-3. Bubble Key features (기초) : 버블의 핵심 기능, 노코드 툴로 앱 만들기 (0) | 2023.05.28 |
| 2-2. Bubble Key tools (기초): 버블의 핵심 도구, 버블의 특별한 도구 이해하기 (0) | 2023.05.25 |
