2. UI 디자인: 컴포넌트 추가 및 레이아웃
효과적인 UI 디자인은 훌륭한 사용자 경험을 위해 매우 중요합니다. Thunkable은 컴포넌트를 시각적으로 쉽게 추가하고 배치할 수 있도록 합니다.
2.1. 기본 UI 컴포넌트 추가
디자인 탭에서 "컴포넌트" 패널에서 컴포넌트를 화면으로 드래그합니다. 일반적인 컴포넌트는 다음과 같습니다.
- 버튼: 사용자 상호 작용용.
- 레이블: 텍스트 표시용.
- 이미지: 그림 표시용.
- 텍스트 입력: 사용자 입력 받기용.
- 스위치: 옵션 전환용.
화면에 컴포넌트가 있으면, 이를 선택하여 "속성" 패널에서 속성을 보고 수정할 수 있습니다.
2.2. 레이아웃을 사용한 컴포넌트 배치
레이아웃 컴포넌트는 다른 컴포넌트를 깔끔하게 정리하는 데 도움이 됩니다. 주요 레이아웃 유형:
- 세로 배열 (Column): 컴포넌트를 세로로 배치합니다.
- 가로 배열 (Row): 컴포넌트를 가로로 배치합니다.
- 컨테이너 (Container): 컴포넌트를 함께 그룹화합니다.
- 공백 (Space): 컴포넌트 사이에 빈 공간을 추가합니다.
레이아웃 컴포넌트를 화면으로 드래그한 다음, 그 안에 다른 UI 컴포넌트를 드래그합니다. 속성 패널을 사용하여 레이아웃 내에서 정렬, 간격 및 분포를 조정합니다.
2.3. 컴포넌트 속성 사용자 지정
아무 컴포넌트나 선택하고 속성 패널을 사용하여 모양과 동작을 사용자 지정합니다. 예시:
- 텍스트: 버튼 또는 레이블 텍스트 변경.
- 색상: 배경 또는 텍스트 색상 설정.
- 글꼴 크기: 텍스트 크기 조정.
- 너비/높이: 치수 설정 (예: '부모 채우기', '콘텐츠에 맞춤' 또는 특정 픽셀/%).
- 테두리 반경: 모서리 둥글게 처리.
원하는 모양과 느낌을 얻기 위해 다양한 속성을 실험해 보세요.