단기집중과정 101
10 모듈
5 주

컴포넌트 디자인

복사하려면 클릭

웹 애플리케이션을 위한 그래픽 구성 요소 디자인


단순히 캔버스의 빈 공간에 요소를 배치하는 것도 가능하지만 모든 것을 즉시 깔끔하고 정돈된 상태로 만들려고 노력하는 것이 좋습니다. 따라서 먼저 작업 공간을 디자인합니다. 다른 모든 요소를 배치할 캔버스에 구성 요소( Container )를 추가해 보겠습니다. 추가한 후 톱니바퀴 아이콘을 클릭하고 이 컨테이너의 구성을 진행해야 합니다.

컨테이너 설정

사용 가능한 설정을 살펴보겠습니다.

  • Name - 애플리케이션의 비즈니스 프로세스에서 이 컨테이너를 참조할 수 있는 이름입니다. 예를 들어 이 컨테이너의 일부 설정을 변경하는 비즈니스 프로세스를 생성하려는 경우입니다.
  • Direction - 지정된 컨테이너 내부의 요소가 배치되는 방향입니다. 가로로, 가로로 배열하려는 경우에는 차례로, 그 반대로 세로로 요소가 서로 아래에 있을 때 정렬합니다.
  • Wrap - 요소의 출력을 설정합니다. 같은 줄에 있어야 합니까(nowrap), 아니면 줄 바꿈할 수 있습니까(wrap).
  • Alignment - 컨테이너의 요소를 정렬하는 방법(수평 및 수직 정렬에 대한 별도 설정).
  • Size - 컨테이너 크기. 사용 가능한 공간의 백분율로 설정하거나 픽셀 단위로 엄격하게 고정된 크기를 가질 수 있습니다.
  • Max Width - 최대 허용 너비(엄격하게 설정되지 않고 내용에 따라 다를 경우).
  • Margin/Padding - 컨테이너 테두리에서 들여쓰기합니다. 각각 외부 또는 내부.
  • Image, Gradient or Overlay (Background color) - 원하는 배경을 설정하는 기능. 특정 색상(또는 그라디언트가 있는 다양한 색상 조합)을 선택하거나 배경 이미지를 선택할 수 있습니다.
  • Border - 프레임 및 모양 선택(색상, 두께, 반올림 반경).
  • Visible - 요소의 가시성(모든 중첩 요소 포함).

선택한 설정은 스크린샷에서 볼 수 있습니다. 물론 독특한 디자인을 선택하여 실험하고 변경할 수 있습니다.

생성된 컨테이너에 다른 컨테이너를 추가해 보겠습니다. 여기에 필요한 입력 필드를 추가합니다. 세로, 가운데 정렬, 너비 40%, 왼쪽 여백(왼쪽 여백 20px)으로 설정합니다.

애플리케이션 구성 요소

그런 다음 구성 요소 자체를 컨테이너에 추가합니다. 우리의 비즈니스 프로세스는 float 유형의 두 가지 숫자를 허용합니다. 입력하려면 두 개의 Input 구성 요소( float ), 계산 프로세스를 시작하는 버튼( Button )을 추가하고 Label 에 서명하기 위해 약간의 시각적 조정을 수행해야 합니다.

일반적으로 계산하려는 내용(합계, 빼기 등)에 서명할 블록을 하나 더 추가해 보겠습니다. 요소가 세로로 정렬되고 중앙에 오른쪽으로 정렬된 상태에서 너비를 30%로 설정해 보겠습니다( end/center ). 5개의 Label 구성 요소를 컨테이너 자체에 추가하고 즉시 해당 텍스트를 원하는 것으로 변경해 보겠습니다.

시각적 디자인의 마지막 단계는 계산 결과를 표시할 다른 컨테이너를 추가하는 것입니다. 이전 컨테이너와 유추하여 추가했지만 왼쪽에 작은 패딩이 있는 오른쪽으로 정렬을 설정했습니다. 이 컨테이너의 기능은 처음에는 보이지 않는다는 것입니다( Visible 스위치가 꺼져 있음). 계산 결과가 나오는 순간 켜보자. 여기에 5개의 Label 구성 요소를 추가하고 블록이 여전히 보이지 않기 때문에 텍스트를 변경할 필요도 없습니다. 가장 중요한 것은 비즈니스 프로세스를 생성할 때 필요한 요소를 식별할 수 있도록 Name 을 설정하는 것입니다.

모든 것이 올바르게 완료되면 웹 디자이너에서 다음 결과를 볼 수 있습니다.

그리고 이것은 게시된 앱에서:

Was this article helpful?
아직도 답을 찾고 계십니까?