양식 레이아웃
이 장에서는 웹 애플리케이션에서 매우 흔히 사용하는양식(폼) 페이지에 대해 알아봅니다. 이 장에서도 실제 시나리오를 통해 양식 레이아 셀을 어떻게 사용하는지 설명합니다. 입력 영역으로서의 양식 페이지는, 현재 웹 시스템에서 가장 흔히 보이는 형태가 바로 라벨 텍스트와 입력란으로 구성된 양식 항목입니다.
예시 그림은 가장 단순한 형태의 양식 페이지로, 매우 흔한 형태입니다. 다음으로 이 부분의 설정을 완료해 보겠습니다.
빌더에서 셀 영역을 선택하고, 양식 셀을 해당 영역에 드래그합니다. 아래 그림처럼 A2:AE15 영역을 선택해서 양식 셀을 배치했습니다.
다음 단계로, 표시하고 싶은 데이터 테이블을 양식 위에 드래그한 후, 필요한 필드를 선택하고 필드의 표시 순서를 조정합니다. 확인을 클릭하면 필요한 양식 데이터를 빠르게 한 번에 생성할 수 있습니다.
양식 속성 기능 소개
레이아웃: 다단(여러 열) 양식과 한 줄(인라인) 양식, 이 두 가지 레이아웃 방식이 모두 흔히 쓰입니다. 이 장 뒷부분에서 실제 시나리오를 통해 두 레이아웃을 소개합니다.
열 개수: 레이아웃이 다단일 때 표시되는 열의 개수를 제어합니다. 수식(고급 기능)을 사용하면 자신의 업무 시나리오에 따라 실행 중 수식으로 양식의 열 개수를 동적으로 제어할 수도 있습니다.
라벨 위치: 위/아래 또는 왼쪽/오른쪽 — 두 시나리오 모두 실제 업무 상황에 맞게 선택할 수 있으며, 간단하고 이해하기 쉬워 자세히 설명하지 않습니다. 활자格에서 설정만 해보면 바로 효과를 확인할 수 있습니다.
라벨 간격: 간단하고 이해하기 쉬워 자세히 설명하지 않습니다. 활자格에서 설정만 해보면 바로 효과를 확인할 수 있습니다.
라벨 필수 표시 위치: 간단하고 이해하기 쉬워 자세히 설명하지 않습니다. 활자格에서 설정만 해보면 바로 효과를 확인할 수 있습니다. 주의할 점은, 이는 단순히 표시 마커일 뿐 실제 데이터 검증 기능은 없다는 것입니다. 실제 데이터 검증을 구현하려면 입력란의 데이터 검증에서 검증 규칙을 설정해야 합니다. 여기서는 라벨에 필수 표시를 어디에 보여줄지만 설정합니다.
라벨 스타일: 라벨의 스타일, 글꼴, 전경색 등을 설정합니다. 간단하고 이해하기 쉬워 자세히 설명하지 않습니다. 활자格에서 설정만 해보면 바로 효과를 확인할 수 있습니다.
행 간격: 여러 행 사이의 행 간격입니다.
열 간격: 여러 열 사이의 열 간격입니다.
오류 표시 대장: 이 옵션은 입력형 셀의 데이터 검증 설정과 함께 사용해야 하며, 데이터 검증 규칙을 통과하지 못했을 때 오류 메시지가 표시되는 위치를 제어합니다.
컨테이너 오버플로 모드: 양식 내 필드가 많아서 컨테이너를 초과할 때, 이 모드가 오버플로 동작을 제어합니다.
여백: 양식 전체 콘텐츠와 양식 컨테이너 간의 상/하/좌/우 여백을 제어합니다. 간단하고 이해하기 쉬워 자세히 설명하지 않습니다. 포건시에서 설정만 해보면 바로 효과를 확인할 수 있습니다.
여러 양식
다음으로 위에서 소개한 양식 속성 기능을 이해하기 위해 세부사항을 조정해 보겠습니다. 데이터 필드가 많아서 다 표시되지 않을 때의 해결 방법입니다.
방법 1: 양식을 여러 열로 표시합니다. 기본값은 1열이며, 2열 또는 3열로 설정할 수 있습니다.
방법 2: 1열 표시 방식을 유지하면서 양식 컨테이너의 높이를 늘립니다. 주의할 점은 단순히 양식이 위치한 격자 영역을 늘리는 것이 아니라, 양식의 높이가 필드 수에 따라 자동으로 맞춰지길 원한다는 것입니다.
방법 1 구현: 양식의 열 개수를 3으로 설정하면, 양식 영역에 모든 필드가 표시되는 것을 확인할 수 있습니다.
실행해서 효과를 확인하면, 양식 내 필드들이 3열로 왼쪽에서 오른쪽 순서로 표시되는 것을 볼 수 있습니다.
만약 더 나아가 양식의 너비가 고정된 너비가 아니라 브라우저 전체 너비를 가득 채우길 원한다면, 격자의 열 너비를 범위 모드로 설정해야 합니다. 격자 레이아웃에 대한 자세한 내용은 격자 레이아웃 기능 소개를 참고하세요.
실행해서 효과를 확인하면, 양식이 전체 너비를 가득 채우고, 양식 내 3개 열의 필드도 같은 너비로 양식 전체를 채우는 것을 확인할 수 있습니다.
방법 2: 양식을 자동 맞춤으로 설정하면, 양식 내 필드 수에 따라 양식의 높이를 계산하여 높이 자동 맞춤 요구사항을 충족합니다.
빌더로 돌아가서, 양식이 위치한 임의의 행을 선택하고 행 높이를 자동 맞춤 모드로 설정합니다. 이는 이 행의 높이가 내용의 높이에 영향을 받는다는 의미입니다.
실행해서 효과를 확인하면, 양식의 행 높이가 내용에 따라 자동으로 늘어난 것을 확인할 수 있습니다. 여기서 사용한 것은 격자의 자동 맞춤 모드이며, 자세한 내용은 격자 레이아웃 기능 소개 장을 참고하세요.
라벨과 입력란
양식은 여러 개의 양식 항목으로 구성되며, 각 양식 항목은 라벨과 입력란을 포함합니다. 따라서 라벨과 입력란의 레이아웃, 간격, 스타일은 필요에 따라 설정할 수 있습니다. 속성이 간단하므로 여기서는 자세히 설명하지 않으며, 디자이너에서 직접 설정해서 효과를 확인할 수 있습니다.
데이터 검증
양식에서 흔히 쓰이는 데이터 검증은 어떻게 구현할까요? 예를 들어 위 양식 항목에서 제품명을 필수 항목으로 만들고 싶다면 다음 단계를 따릅니다.
제품명을 선택하고, 속성 패널에서 "양식 항목 설정" 대화상자를 클릭한 후 "필수 표시 보이기"를 체크합니다. 주의할 점은, 이는 단지 필수 표시만 보여줄 뿐 실제 데이터 검증 동작은 전혀 없다는 것입니다.
"데이터 검증"을 클릭하면 대화상자가 나타나며, "공백 무시" 체크를 해제합니다.
실행한 후 제품명 입력란을 클릭하고 다른 입력란을 클릭하면 데이터 검증이 실행되어, 오류 메시지가 입력란 아래쪽에 표시됩니다. 오류 메시지의 위치는 양식 속성에서 "오류 메시지 표시 위치"를 설정해서 변경할 수 있습니다.
빌더로 돌아가서 양식을 선택하고 속성 패널에서 "오류 메시지 표시 위치"를 "자동"으로 변경합니다.
실행한 후 제품명 입력란을 클릭하고 다른 입력란을 클릭해서 효과를 확인하면, 오류 메시지가 공간을 차지하지 않고 알림 형태로 팝업되어 표시됩니다.
데이터 검증의 오류 메시지 표시 위치는 업무 시나리오에 맞게 직접 선택하면 됩니다. 양식 항목 간 간격이 비교적 넓을 때(일반적으로 20px 이상)는 오류 메시지를 입력란 아래쪽에 표시하는 방식이 더 잘 보입니다. 반면 양식 항목이 매우 빽빽하게 배치된 경우에는 자동 모드를 사용하여 오류 메시지를 툴팁 형태로 표시하는 것을 더 추천합니다.
양식 항목 설정
양식 안의 셀에는 속성 패널에 모두 "양식 항목 설정" 속성이 있습니다. 앞서 "필수 표시 보이기"를 사용해 보았는데, 아래에서 몇 가지 흔한 시나리오 예시를 통해 다른 옵션들의 기능도 설명하겠습니다.
흔히 일부 양식에서 정보 내용이 많은 항목이 더 넓은 너비와 높이를 차지하는 경우를 볼 수 있습니다(아래 그림의 비고 항목 등).
이 효과는 어떻게 구현할까요?
디자이너에서 다음과 같이 설정했습니다.
양식에서 배경 필드와 노트필드의 순서를 조정했습니다. 양식에서 노트를 선택해 배경 필드 뒤로 바로 드래그하면 됩니다.
비고의 한 줄 입력란을 여러 줄 입력란으로 교체합니다. 셀을 교체하는 방법은 간단합니다. 비고를 선택하고 셀 형식에서 여러 줄 입력란을 더블클릭하면 현재 셀이 교체됩니다.
비고를 선택하고 "양식 항목 설정"을 클릭한 후, 대화상자에서 양식 열 개수를 3으로 설정합니다. 이는 이 양식 항목의 너비가 3개 열을 차지한다는 의미입니다. 높이는 64로 설정하여 비고의 양식 항목 높이를 64px로 늘립니다.
실행해서 결과를 확인하면, 비고 양식 항목이 3개 열의 너비를 차지하고 높이는 64px가 됩니다.
하지만 일부 시나리오에서는 높이가 내용에 따라 자동으로 맞춰지길 원할 수도 있습니다. 어떻게 해야 할까요? 디자이너로 돌아가서 다시 비고를 선택하고, "양식 항목 설정" 대화상자를 다시 열어 "내용에 따라 양식 항목 높이 늘이기 허용"을 체크합니다.
실행한 후 비고 입력란에 여러 줄의 데이터를 입력해서 효과를 확인합니다.
주의할 점은, 여러 줄 입력란에 여러 줄의 데이터를 입력하는 동안에는 비고 양식 항목의 높이가 실시간으로 늘어나거나 줄어들지 않으며, 포커스를 벗어난 후에야 내용에 따라 필요한 높이가 계산된다는 것입니다.
이상이 양식 항목에서 흔히 쓰이는 양식 항목 설정 속성들입니다. 양식 항목 속성에는 라벨 스타일, 항목 컨테이너 CSS 클래스명도 있는데, 이는 일반적으로 특수한 시나리오에서 특정 라벨에 다른 스타일을 적용하거나, CSS 속성으로 더 고급스럽고 유연한 커스텀 스타일을 적용할 때 사용합니다.