UI Builder는 디자인을 하는 공간입니다. 사실 버블을 이용해 서비스를 개발하다 보면 가장 쉽게 익숙해지는 공간이기도 합니다. 때문에 기능에 대한 자세한 설명보다는 사용 방법에 대한 설명을 위주로 진행을 하도록 하겠습니다. 자, 그럼 Visual elements를 먼저 살펴볼까요?
1. 텍스트(TEXT)
첫 번째는 텍스트입니다. 텍스트는 서비스를 개발하는 개발자가 직접 써서 보여줄 수도 있고, 데이터 베이스 저장된 텍스트를 불러와 보여줄 수 있는 기능을 담당하는 요소입니다. 사용자에게 텍스트를 보여주고 싶다면 Text를 기억하세요!
보이시나요? 텍스트 요소를 이용해서 사용자에게 보여주고 싶은 문장을 입력해 보세요! 그리고 우측 상단에 있는 Preview를 누르게 되면 입력한 문장이 그대로 보이는 걸 확인해 볼 수 있을 거예요!
2. 버튼(BUTTON)
다음은 버튼 요소를 알아볼 거예요. 버튼은 말그대로 유저들이 클릭할 수 있게 도와주는 기능이에요. 그래서 생긴것도 막 누르고 싶게 생겼습니다. 버튼을 눌렀을 때 발생하는 액션은 Workflow 섹션에서 다룰 예정이니 지금은 디자인을 구성하는 요소로만 이해해 주시면 좋을 것 같습니다. 지금은 이정도만 이해하셔도 충분합니다!
짠! 버튼을 페이지 넣고 “버튼”이라고 이름을 지어줬습니다. 어떤가요? 누르고 싶지 않나요? 물론, 버튼이 아니더라도 Workflow를 활용한다면 모든 요소를 버튼처럼 사용할 수 있어요! 그러니 버튼 디자인이 마음에 들지 않는다고 실망할 필요 없어요. 얼마든지 원하는 모양과 디자인으로 활용할 수 있어요. 곧 알게 되실 거예요.
3. 아이콘(ICON)
다음은 Icon에 대해서 알아 볼 거예요! 아이콘은 여러모로 활용도가 높은 비주얼 엘리먼트입니다. 버튼으로 사용하기에는 조금 무겁고, 버튼을 넣지 않자니 조금은 애매한 그런 상황들이 많이 발생하거든요. 그럴 땐 바로 이 아이콘을 사용해주면 좋습니다.
메뉴 바를 아이콘으로 표현해 봤어요. 모바일 앱에서 “메뉴”를 표현할 때 많이 사용하는 아이콘이에요. 이 밖에도 정말 많은 아이콘들이 있어요. 아이콘 역시 디자인적으로 활용할 수도 있지만, 버튼 요소로도 많이 사용하고 있으니 참고해 두시면 좋을 거예요.
4. 이미지(IMAGE)
이미지는 웹/앱을 제작할 때 가장 많이 사용하는 엘리먼트입니다. 사용자에게 이미지를 보여주고 싶다는 생각이 든다면 바로 Image 엘리먼트를 떠올리면 됩니다. 이미지 역시 개발자가 직접 올린 이미지를 보여줄 수도 있고, 데이터 베이스에 저장된 이미지를 보여줄 수도 있으니 참고하세요!
만약 개발자가 직접 업로드한 이미지를 유저에게 보여주고 싶다면 Static image(1)에 이미지를 직접 업로드하면 되고, 데이터 베이스에 저장된 이미지를 보여주고 싶다면 Dynamic image(2)를 선택해서 이미지를 불러올 경로를 지정해 주면 됩니다. 마지막으로 외부에 있는 이미지를 사용하고 싶다면 External sources에서 검색 후 마음에 드는 이미지를 사용할 수도 있어요. 무료로 제공되는 이미지니 적절하게 사용하면 디자인에 큰 도움이 돼요!
'노코드기초' 카테고리의 다른 글
| 노코드 툴 버블(bubble.io) 회원가입 한 번에 끝내기! (0) | 2023.01.20 |
|---|---|
| 버블(Bubble.io) 학습 전 기본 구조 살펴보기! (0) | 2022.12.19 |
| 웹사이트 빌더 웹플로우(Webflow)와 소프터(Softr) 주요 기능 비교 (0) | 2022.12.07 |
| 기획자가 노코드를 배워야 하는 이유 (0) | 2022.11.22 |
| 노코드 끝판왕 웹플로우와 버블 비교 (0) | 2022.11.21 |
댓글