지난 시간에 이어서 진행해 보겠습니다! 로그인하니 저번 포스팅에서 생성한 프로젝트가 보이네요. 프로젝트 선택화면을 먼저 살펴볼게요.
1번은 해당 프로젝트를 미리보기 할 수 있는 버튼입니다. 2번 버튼을 누르면 프로젝트를 삭제(delete)하거나 복제(duplicate)할 수 있습니다. 3번을 눌러 프로젝트명을 수정할수도 있습니다.
이제 프로젝트를 선택하여 빌더로 들어가 보겠습니다.
우선 눈여겨 보셔야 할 부분은, 상단의 탭 입니다. 썬커블 로고 아래로 디자인(Design)탭과 블록(Blocks)탭이 보이실 거에요. 처음엔 디자인탭이 선택되어 있네요. 이번 포스팅에선 일단 디자인 탭부터 뜯어보도록 하겠습니다 ㅋㅋ
디자인(Design)탭 살펴보기
📌디자인 탭 에서는 앱의 '보여지는 부분'을 구성합니다.필요한 컴포넌트[각주:1]를 끌어와서 배치 하고, 속성을 조정하여 조금 더 디테일한 UI[각주:2]를 구성할 수 있습니다.
디자인 탭의 각 패널들에 대해 알아볼게요!
화면 : 우리가 개발할 앱의 화면이라고 생각하시면 됩니다. 필요한 컴포넌트를 끌어와서 배치할 수 있습니다.
앱 트리 : 앱에 배치된 컴포넌트의 계층을 목록으로 확인하고 정렬할 수 있습니다.
컴포넌트 패널 : 끌어서 사용할 수 있는 컴포넌트들이 모여있는 곳입니다.
속성 패널 : 배치한 컴포넌트의 속성을 조정할 수 있습니다.
이제 화면을 구성해볼까?
컴포넌트(Components)
👉 컴포넌트는 버튼이나 메뉴 내비게이션, 텍스트 입력창과 같은 앱의 화면 구성요소를 말합니다. 컴포넌트의 종류가 많으니 따로 하나하나 설명하지는 않을게요. 앞으로 화면에 배치해 보면서 하나씩 알아보도록 하겠습니다. 따로 공부해보실 분은🔗썬커블 공식문서에서 UI 컴포넌트 부분을 참조해 주세요!
컴포넌트를 배치하자
📌컴포넌트 패널에서 컴포넌트를 선택하여 화면으로 끌어다 놓으면 배치됩니다.
컴포넌트 패널에서 Button 컴포넌트를 찾아 드래그하여 화면 중앙에 배치해 보겠습니다.
화면에 파란색 버튼이 배치된것이 보이시죠? 앱 트리 패널에도 Screen1 아래에 Button1이 들어가 있는걸 확인 할 수 있습니다.
📌 앱 트리에서의 컴포넌트 앱 트리의 컴포넌트를 마우스로 드래그하여 순서를 변경할 수 있습니다. 그리고, 이 위에 마우스를 갖다 대면 위의 이미지처럼 연필과 쓰레기통 모양의 아이콘이 나타납니다. 연필 아이콘을 클릭하여 컴포넌트의 이름을 변경할 수도 있고, 쓰레기통 모양을 클릭하여 삭제 할 수도 있습니다. 앱 트리에서 컴포넌트를 삭제하면 당연히 화면에서도 사라지니 주의하세요!
앱 트리 패널에서 Screen1을 선택하여 배경색을 변경해볼게요.
속성 패널의 Background를 클릭하여 마음에 드는 색으로 변경해 보세요. 그 다음 Button1의 속성도 변경하겠습니다.
Button1 선택 후 속성패널 의 Button 속성에서 입력 창 내용을 변경하여 버튼 안의 텍스트를 변경합니다. 저는 "다음 화면으로 이동" 이라고 입력했습니다. 텍스트가 길어서 버튼의 너비가 모자를 경우 Layout 속성의 가로 폭을 변경하거나, 화면에서 Button1을 직접 선택한 후 가장자리를 드래그하여 크기를 변경할 수 있습니다.
이어서 화면 추가 버튼을 눌러 화면을 하나 추가할게요
이렇게 Screen2라는 화면이 추가되었습니다. 이 화면에도 Button 컴포넌트를 배치하고, 배경색과 버튼 문구를 변경했습니다.
완성된 화면입니다! 간단하지만 쉽게 앱의 화면이 구성되었네요.
다음 포스팅에서는 Blocks탭으로 이동하여 대망의 블록코딩을 함께 해볼게요! 긴 글 읽어주셔서 감사합니다!
