미리 정의된 컴포넌트
LC5는 기본적으로 SAP에서 제공하는 UI5 컴포넌트를 사용하여 레이아웃을 구성하고 있습니다. UI5는 엔터프라이즈 표준을 준수하는 오픈소스 UI 컴포넌트 라이브러리로, 다양한 웹 애플리케이션에서 사용될 수 있는 풍부한 컴포넌트를 제공합니다. 이를 통해 LC5는 사용자가 직관적인 디자인의 웹 페이지를 손쉽게 제작할 수 있도록 지원합니다.
UI5 컴포넌트는 반응형 디자인을 지원하며, 이는 LC5에도 적용됩니다. 반응형 디자인이란 웹 페이지의 레이아웃이 뷰포트(viewport)의 크기에 따라 자동으로 조정되는 기능을 말합니다. 이를 통해 사용자는 별도의 설정 없이도 다양한 디바이스에서 일관된 사용자 경험을 제공할 수 있습니다. PC, 태블릿, 스마트폰 등 어떤 기기에서도 최적의 화면 배치를 제공함으로써, 더 나은 접근성과 유연성을 제공합니다.
Builder 페이지에서 컴포넌트 및 레이아웃의 너비, 높이 등 스타일을 수동으로 지정하여 적용하는 것도 가능합니다.
레이아웃 컴포넌트
LC5에서 정의하는 컴포넌트는 크게 두 가지로 분류됩니다. 하나는 페이지의 한 섹션을 레이아웃으로서 차지하는 레이아웃 컴포넌트입니다.
레이아웃 컴포넌트들은 기본적으로 LC5 내부적으로 정의된 순서로 배치됩니다. 즉, 레이아웃 배치 순서는 컴포넌트 생성 순서에 영향을 받지 않습니다. 지정된 레이아웃 순서는 위에서부터 차례대로 헤더->폼->테이블->코드 에디터->노드 에디터->섹션 순입니다. Builder 페이지에서 폼을 먼저 추가하고 헤더를 그 다음에 추가한다 해도 폼 밑에 헤더가 배치되는 일은 없는 것입니다. 이는 UI 레이아웃의 일관성을 지키기 위함입니다.
만약 컴포넌트 배치 순서를 직접 변경하고 싶다면, Section 레이아웃 컴포넌트를 사용할 수 있습니다. 섹션 컴포넌트는 위치를 지정해서 배치할 수 있는 특별한 컴포넌트입니다.
레이아웃 컴포넌트는 Builder 페이지의 중앙 하단부 테이블에서 관리할 수 있으며 속성 부여와 내부 컴포넌트 배치가 가능합니다.
현재 지원하는 레이아웃 컴포넌트는 헤더, 폼, 테이블, 다이얼로그, 코드 에디터, 노드 에디터, 섹션이 있습니다.
Header
페이지의 가장 상단에 위치하는 바 형태의 레이아웃입니다. 내부에 버튼과 링크를 추가할 수 있습니다.
Form
사용자 입력을 위한 필드를 제공하는 레이아웃입니다. 텍스트 필드, 셀렉트 필드, 라디오 버튼 등 다양한 세부 컴포넌트를 포함할 수 있습니다.
Table
데이터를 표시하고 관리하기 위한 테이블 형태의 레이아웃입니다. 각 셀 안에는 세부 컴포넌트를 배치할 수 있으며, 테이블 헤더를 따로 추가할 수 있습니다.
Dialog
사용자에게 정보를 제공하거나 추가 입력을 받기 위한 팝업 창 형태의 레이아웃입니다. 다이얼로그 창 내부에 세부 컴포넌트를 배치할 수 있습니다.
Code Editor
코드 편집 기능을 제공하는 레이아웃입니다. 코드 에디터 내부에 코드 블럭을 추가하여 사용자가 코드를 작성하고 편집할 수 있습니다.
Node Editor
노드 기반의 데이터를 시각적으로 표현하고 관리하기 위한 레이아웃입니다. 노드 에디터 내부에 노드를 추가하고 연결하여 데이터를 구조화할 수 있습니다.
Section
세부 컴포넌트를 원하는 순서로 배치하고자 할 때 사용할 수 있는 비어있는 형태의 컴포넌트입니다.
섹션은 아무런 설정을 하지 않았을 땐 노드 에디터 다음 순서로 배치되지만, locateTargetKey와 locateWhere 프로퍼티를 사용하여 특정 컴포넌트의 앞 혹은 뒤 순서에 렌더링되도록 설정할 수 있습니다. 또한, 다른 레이아웃 컴포넌트들과 달리 기본 보일러플레이트 디자인이 없기 때문에 원하는 형태로 컴포넌트를 구성할 수 있습니다.
섹션에는 타입이 존재하며, VBox, HBox, Split, Grid 타입이 있습니다. 각 타입은 배치 방식을 나타냅니다.
VBox: 수직으로 배치HBox: 수평으로 배치Split: 수평으로 분리된 형태로 배치Grid: 그리드 형태로 배치
Section (Render as React 전용)
Render as React 옵션을 활성화하면, 위 레이아웃 컴포넌트 외에도 Section이라는 레이아웃 컨테이너를 자유롭게 추가할 수 있습니다. Section은 폼, 테이블과 마찬가지로 Builder 페이지의 Actions 메뉴에서 추가할 수 있으며, 서로 중첩하여 배치하는 것도 가능합니다.
현재 지원하는 Section 유형은 다음과 같습니다.
- VBox, HBox, Grid, Split : 하위 컴포넌트를 세로/가로/격자/분할 형태로 배치하는 기본 박스 레이아웃입니다.
- Panel : 제목 영역을 클릭하여 펼치고 접을 수 있는 패널 레이아웃입니다.
- Wizard : 여러 단계로 이루어진 작업을 순차적으로 안내하는 마법사 레이아웃입니다.
- Card, CardHeader, AnalyticalCardHeader : 정보를 카드 형태로 묶어서 보여주는 레이아웃으로, 헤더 영역에 요약 정보나 통계를 함께 표시할 수 있습니다.
- Timeline, TimelineItem : 시간 순서에 따라 이벤트를 나열하여 보여주는 레이아웃입니다.
- BarChart, LineChart, DonutChart, RadarChart : 데이터를 시각화할 수 있는 차트 레이아웃입니다.
사실 Form과 Table도 내부적으로는 Section의 한 유형입니다. 다만 별도의 전용 편집 UI를 제공하기 때문에, 본 문서에서는 위의 레이아웃 컴포넌트로 구분하여 설명하고 있습니다.
세부 컴포넌트
LC5에서 정의하는 컴포넌트 중 레이아웃 컴포넌트의 내부에 배치되는 상대적으로 작은 단위의 컴포넌트를 세부 컴포넌트라고 합니다.
세부 컴포넌트는 레이아웃 없이 독립적으로 배치될 수 없으며, 레이아웃 컴포넌트가 등록된 이후에 각 레이아웃 관리 테이블 안에서만 등록할 수 있습니다.
LC5에서는 Input, Radio, Button 등 폼에서 자주 쓰이는 컴포넌트를 미리 정의하여 제공하고 있으며, 사용자는 간단한 클릭만으로 컴포넌트를 가져와 사용할 수 있습니다. 제공되는 컴포넌트 리스트는 다음과 같습니다.
다음은 각 컴포넌트에 대한 설명입니다.
Amount, Quantity
금액 및 수량 입력을 위한 필드를 제공합니다. 사용자 지정 단위와 콤마(,) 형식을 지원하여 사용자가 숫자 데이터를 정확하게 입력할 수 있습니다.
Button
다양한 기능을 수행할 수 있는 버튼을 제공합니다. 클릭 이벤트를 쉽게 연결할 수 있어 사용자 인터랙션을 원활하게 할 수 있습니다.
Checkbox
사용자가 하나 이상의 선택 항목을 선택할 수 있도록 하는 체크박스를 제공합니다. 다중 선택이 필요한 경우 유용합니다.
CodeEditor
코드 편집 기능을 제공하는 에디터로, 문법 자동완성 및 코드 하이라이팅 기능을 지원합니다. 프로젝트 안에 코드 블럭 UI를 추가할 필요가 있을 경우 유용합니다.
ComboBox
사용자가 목록에서 항목을 선택하거나 직접 입력할 수 있는 콤보 박스를 제공합니다. 선택 항목과 입력 필드가 결합된 형태입니다.
Date
사용자가 날짜를 선택할 수 있는 인터페이스를 제공합니다. 캘린더 형태로 구현되어 있어 날짜 선택이 용이합니다.
DateRange
시작일과 종료일을 선택할 수 있는 날짜 범위 선택 기능을 제공합니다. 프로젝트 기간 설정 등 다양한 시나리오에 활용할 수 있습니다.
Input
사용자가 텍스트를 입력할 수 있는 필드를 제공합니다. 다양한 속성 설정을 통해 입력 형식을 제한하거나, 초기값을 설정할 수 있습니다.
Link
사용자가 클릭하여 다른 페이지나 리소스로 이동할 수 있는 하이퍼링크를 제공합니다. 링크 텍스트와 URL을 설정할 수 있습니다.
Number
숫자 입력을 위한 필드를 제공합니다. 공란일 경우의 표시 방식, 정렬, 단위 등의 설정을 추가할 수 있습니다.
Radio
여러 선택지 중 하나를 선택할 수 있는 라디오 버튼을 제공합니다. 그룹으로 묶어서 사용하면 선택 항목 간의 배타성을 유지할 수 있습니다.
RichTextEditor (Render as React 전용)
볼드, 이탤릭, 리스트 등 서식이 있는 텍스트를 작성할 수 있는 WYSIWYG 에디터를 제공합니다. TextArea와 달리 값이 서식이 적용된 형태로 저장되므로, 공지사항이나 상세 설명과 같이 풍부한 서식이 필요한 콘텐츠를 작성할 때 유용합니다.
ScannerButton
바코드 스캔 기능을 제공하는 버튼으로, 스캔한 데이터를 입력 필드에 자동으로 반영할 수 있습니다.
Select
드롭다운 목록에서 하나의 항목을 선택할 수 있도록 하는 셀렉트 박스를 제공합니다. 많은 옵션을 간결하게 제공할 때 유용합니다.
Status
항목의 상태를 시각적으로 표시하는 컴포넌트로, 미리 정의된 색상을 통해 상태를 구분할 수 있습니다.
Text
고정된 텍스트를 표시하는 컴포넌트로, 설명이나 안내 문구 등을 표시할 때 사용합니다.
TextArea
사용자가 여러 줄의 텍스트를 입력할 수 있는 필드를 제공합니다. 긴 텍스트 입력이 필요한 경우 유용합니다.
Title (Render as React 전용)
섹션이나 페이지의 제목으로 사용할 수 있는 제목 텍스트를 제공합니다. Text 컴포넌트와 달리 제목에 특화된 스타일이 적용됩니다.
Uploader
파일 업로드 기능을 제공하는 컴포넌트로, Browse 버튼이나 빈칸 필드를 클릭 시 파일 탐색기가 열려 업로드할 파일을 지정할 수 있습니다.
이 외에도 LC5는 다양한 UI 컴포넌트를 지속적으로 업데이트하고 추가하고 있으며, 최신 UI 트렌드를 반영한 웹 페이지 제작을 모토로 개발을 진행하고 있습니다.
LC5는 직관적인 사용자 인터페이스와 강력한 기능을 통해, 사용자들이 손쉽게 웹 페이지를 제작하고 비즈니스 로직 코드에 집중할 수 있도록 도와줍니다. 사용자들은 미리 정의된 컴포넌트를 활용하여, 보다 빠르고 효율적으로 원하는 웹 페이지를 구성할 수 있습니다.