이틀 만에 노코드 툴, 버블로 서비스 만들기 (2)
버블로 프로덕트의 화면을 이쁘게 채워보자!
목차
1. 프로덕트 화면을 만들어요
2. 화면 요소를 만들어 봅시다.
3. 더 이쁘게! 디자인 입히기
4. 작업 효율성을 높이는 재생산 요소
프로덕트 화면을 만들어요.
이전 글에서는 (1) 구성 페이지, (2) 데이터 테이블과 (3) 요소 스타일을 세팅하는 방법을 다뤘다. 해당 방법은 모두 버블로 서비스를 만드는데 필요한 뼈대 작업이다. 뼈대 작업을 얼마나 잘했는지에 따라서, 살을 붙이는 작업의 효율성이 크게 달라진다. 만약 뼈대 작업이 제대로 이루어지지 못했다면, 살을 붙였다가 다시 무너트려야 하는 상황도 펼쳐질 수 있다.
이제 뼈대가 완성됐으니, 화면을 채워 넣어야 한다. 이번 글에서는 완성한 뼈대에 살을 붙이는, 화면 구현 방법에 대해 알아보자!
뼈대에 살을 붙여보자! (출처 : <언더테일>)화면 요소를 만들어 봅시다.
버블에서는 컴포넌트(Component) 대신에 요소(Element)라는 표현을 씁니다. 둘이 같은 의미로 생각하시면 됩니다.
1. 화면 구성
[Design] 탭에서 각 화면을 빌드할 수 있다. 해당 탭에 들어간 후, 좌측 상단에서 페이지 네비게이션을 열 수 있는데 현재 만들어 놓은 구성 페이지를 아래처럼 확인할 수 있다.
[Design] 탭의 전체 화면은 아래처럼 구성되어 있는데, [UI 빌더]에서 필요한 요소를 생성할 수 있다. 빌더에서 필요한 요소를 드래그하고, [디자인 화면]에 드랍하면 해당 요소가 생성된다.
2. UI 빌더
[UI 빌더]에의 요소는 크게 [Visual elements], [Containers], [Input forms], [Reusable elements] 총 4개의 카테고리로 구분되며, 각 카테고리 안에 다양한 요소들이 있다.
[Visual elements] : 유저로부터 데이터를 입력받지 않는 요소로, 텍스트, 버튼 등이 있다
[Containers] : 여러 요소를 그룹으로 묶어주는 요소로, 피그마의 그룹화 기능을 생각하면 된다.
[Input forms] : 유저로부터 데이터를 입력받을 수 있는 요소로, 체크박스, 업로더 등이 있다.
[Reusable elements] : 재사용을 위해 직접 만든 요소로, 피그마의 컴포넌트 기능을 생각하면 된다.
다양한 요소를 필요한 목적에 맞게 생성해서 사용하면 된다. 예를 들어, 회원가입 페이지를 구현한다고 해보자. (1) 유저의 이메일과 비밀번호를 입력받을 수 있어야 하고 (2) 모든 정보를 입력하면, 제출을 해서 승인을 해야 한다. (1)의 경우, 유저로부터 데이터를 "입력" 받아야 하므로, 데이터를 입력받을 수 있는 [Input forms] 카테고리의 [Input] 요소를 사용해야 한다. (2)의 경우, 제출 이벤트를 동작시키는 버튼이 있어야 하므로 [Visual elements] 카테고리의 [Button] 요소를 생성하면 된다.
아래 이미지를 보면, 다음의 요소가 사용됐다.
[Input] 요소 : 아이디와 비밀번호 입력 칸
[Image] 요소 : 로고 출력
[Text] 요소 : 안내 문구 출력
[Button] 요소 : 로그인 요청 버튼과 회원가입 페이지 전환 버튼
더 이쁘게! 디자인 입히기
1. 기본 디자인
생성한 요소에 사전에 설정한 스타일 시스템을 적용해야 한다. 생성한 요소를 더블 클릭하면, 설정창이 나온다. 요소 설정 창의 상단은 [Appearnce], [Layout]와 [Conditonal] 탭으로 구성되는데, 각 탭에서 설정할 수 있는 게 다르다.
[Appearnace] : 해당 요소의 기본(Deafult) 디자인을 설정. (ex) 플레이스 홀더, 색, 폰트
[Layout] : 해당 요소의 레이아웃을 설정 (ex) 마진, 패딩
[Conditional] : 특정 조건이 참일 때, 별도로 적용할 디자인을 설정(ex) 호버 상태의 디자인 설정
여기서 [Appearance] 탭에 있는 [Style] 선택란을 클릭하면, [Styles] 탭에서 만들어 둔 스타일을 확인하고 바로 적용할 수 있다. 현재 이미지를 보면, [Input - SignleLine]이란 이름의 스타일을 적용한 걸 볼 수 있다.
각 요소마다 제공 기능이 다르기에, 설정 창의 구성도 달라진다. 예를 들어, 유저의 입력값을 받을 수 있는 [Input] 요소는 입력값이 전혀 없을 때, 어떤 값을 보일지 설정하는 [Placeholder] 입력란이 있다. 반면, 그냥 설정한 텍스트를 출력하는 [Text] 요소는 해당 입력란이 없다.
[Input] 요소의 설정창
[Text] 요소의 설정창2. 레이아웃
피그마를 쓰신 분은 알겠지만, AutoLayout 기능을 아느냐, 모르느냐에 의해 작업 효율성과 퀄리티가 달라진다. AutoLayout 기능을 사용하면, 각 컴포넌트 사이의 여백이나 그룹의 패딩 등을 쉽게 조절할 수 있다. 오죽하면, AutoLayout 때문에 XD에서 피그마로 넘어갔다는 우스갯소리도 있다.
마찬가지로, 버블에서도 그룹 요소의 Layout 설정을 아느냐 모르느냐에 의해 작업 효율성과 퀄리티가 달라진다. 이를 설정하면, 해당 그룹에 속해 있는 여러 요소들의 간격, 배치를 더 쉽게 조절할 수 있다. 우선, 여러 요소를 그룹화해야 한다. [UI 빌더]에서 [Containers] 카테고리에 있는 [Group] 요소를 클릭하고, 드래그 앤 드랍으로 묶을 요소를 포함시키면 된다.
그룹 요소의 설정창에서 [Layout] 탭으로 이동하면, 아래와 같은 설정창이 보인다. 여기서 [Container Layout]이란 선택란이 있는데, 그룹에 속한 요소들의 배열을 어떤 방향으로 할지 선택할 수 있다. 피그마의 AutoLayout에서 가로, 세로 배열과 동일하다고 보면 된다.
이 외에도 여러 설정 필드에서 그룹화된 구성 요소들의 레이아웃을 조절할 수 있다. 내가 가장 많이 설정하는 설정값은 아래와 같다.
[Apply gap spacing between elements] : 구성 요소들 사이의 여백을 조절
[Container alignment] : 그룹 요소의 테두리를 기준으로, 구성 요소들의 배열을 설정
[Horizontal alignmnet] : 현재 페이지를 기준으로, 그룹 요소의 배열을 설정
[Make this element fixed-Width / Height] : 그룹 요소의 테두리 크기를 고정 및 조절할 수 있다.
[Margins], [Padding] : 그룹 요소의 테두리를 기준으로 마진, 패딩 값을 설정한다.
3. 조건 디자인 설정하기
요소 설정 창의 [Conditional] 탭에서는 특정 조건이 참일 때, 다른 디자인 설정값을 적용할 수 있다. 예를 들어, 호버 상태일 때 테두리에 그림자를 넣는다든가, 누르는 상태일 때 투명도를 바꾸는 등이 가능하다. 아래 이미지를 보면, 이메일을 입력받는 필드에서 (1) 호버 상태, (2) 클릭된 상태와 (3) 값이 유효하지 않은 상태, 총 3가지의 설정값이 보인다. 참고로, [Styles] 탭에서 이를 설정해놓으면, 모든 요소에 동일한 조건을 적용할 수 있다.
[Conditional] 탭의 최하단에 있는 [Define antoher condition] 버튼을 클릭하면, 새로운 조건을 추가할 수 있다. 여기서 [When] 입력란에 어떤 조건을 적용할지 입력하면 된다. [Select a property to change when true] 선택란에는 해당 조건이 참일 때, 적용할 디자인 값을 입력하면 된다. 아래 설정값을 적용하면, 선택한 인풋 필드의 값이 비어 있을 때, 배경 색깔을 #F40000이 설정된다.
작업 효율성을 높이는 재생산 요소
해더나 푸터 같이, 화면에서 반복적으로 사용하는 요소들이 있다. 이러한 요소를 매번 하나하나 만드는 건 귀찮은 일이다. 이때, 재생산 가능한 요소(Reusable Element)로 등록해서 사용하면, 작업 효율성이 훨씬 늘어난다.
좌측 상단의 페이지 네비게이션을 보면, 크게 (1) Pages 영역과 (2) Reusable elements 영역이 있는 걸 볼 수 있다. 최하단의 [Add a new reusable element]를 클릭하면, 재생산 가능한 요소를 생산할 수 있다. 이렇게 등록한 재생산 요소는 [UI 빌더]의 [Reusable element] 카테고리에서도 확인할 수 있으며, 이를 기본 요소처럼 생성하면 된다.
오프라인에서 함께 노코드 전문가로 거듭나요!
( ~23년 8월 말까지 모집 )
온라인 클래스로 빠르게 공부하는 방법
