사용자 맞춤 입력화면 구성

Works의 가장 큰 특징은 사용자가 원하는 입력 화면을 직접 설계할 수 있다는 점입니다.
입력 화면을 구성하는 컴포넌트를 자유롭게 추가하고, 배치하고, 속성을 설정하여 업무에 맞게 최적화된 앱을 만들 수 있습니다.

• 컴포넌트 : Works 입력 화면을 구성하는 기능 단위로, 데이터를 입력하거나 선택하는 역할
  예) 텍스트 입력, 날짜 선택, 체크박스 등

입력화면 관리란?

입력 화면 관리는 Works 앱에서 데이터를 입력하는 폼을 설계하는 기능입니다.

운영자는 다양한 컴포넌트를 활용하여 입력 폼을 원하는 형태로 구성할 수 있습니다.

입력 화면 관리 주요 기능

• 컴포넌트(입력 요소) 추가 : 원하는 입력 필드를 드래그 앤 드롭하여 화면 구성
• 컴포넌트 속성 수정 : 입력값 제한, 기본값 설정, 유효성 검사 등 다양한 설정 가능
• 레이아웃 조정 : 입력 필드의 크기, 위치, 컬럼(다단) 배치 설정 가능
• 노출 조건 설정 : 특정 입력값에 따라 다른 입력 필드가 보이도록 설정 가능
  
  

입력화면 설정 방법

1. 앱 관리 홈에서 [입력 화면]을 클릭하여 입력 화면 관리 페이지로 이동
2. 왼쪽 탭에서 원하는 컴포넌트를 선택하여 드래그 앤 드롭으로 배치
3. 컴포넌트를 클릭하여 속성을 설정 (입력값 제한, 기본값, 필수 입력 여부 등)
4. 완성된 입력 화면을 저장 후 적용

컴포넌트 유형 및 속성

입력 화면에서 사용할 수 있는 컴포넌트는 크게 3가지 유형으로 나뉩니다.

• 데이터 컴포넌트 : 사용자가 입력하는 데이터 필드
• 디자인 컴포넌트 : 입력 폼의 레이아웃 및 가독성을 높이는 요소
• 고급 컴포넌트 : 다른 앱과 연결하거나, 계산이 자동으로 이루어지는 특별한 기능 제공

컴포넌트는 기본적으로 속성을 설정할 수 있으나 공통 속성을 우선 안내하고 컴포넌트 소개와 함께 속성을 설명하도록 하겠습니다. 

모든 입력 컴포넌트는 기본적으로 다음과 같은 공통 속성을 설정할 수 있습니다. 단, 일부(라인, 공백 컴포넌트)는 예외

노출조건 설정 속성🎯

노출 조건 설정은 앱 내 컴포넌트(입력 항목)의 표시 여부를 조건에 따라 제어할 수 있는 기능입니다.
조건에 따라 보여야 할 항목만 화면에 나타나도록 설정하면, 사용자 경험을 간결하고 명확하게 만들 수 있습니다. 

• 모든 컴포넌트에서 사용할 수 있는 공통 기능
• 여러 개의 조건을 복합적으로 지정해 세밀한 화면 제어 가능
• 필요한 입력 항목 노출로, 사용자 입력 시 혼란 최소화

설정 방법

체크박스 컴포넌트에서  A옵션 선택 시 반드시 파일 첨부를 하도록 설정!

1. 노출 조건을 적용할 컴포넌트 선택
   예) 파일첨부 컴포넌트 선택
   
   

2. 해당 컴포넌트의 속성 > 노출 조건 설정의 [+설정] 선택
   
   

3. 노출 조건 설정 > 조건 추가
   예) 조건 기준 컴포넌트로 체크박스 선택
   
   
4. 노출 조건 세팅
   • 체크박스 값 중 A를 선택한 경우에만 노출되도록 설정
   • 원하는 조건을 여러 개 추가 가능
     
     

5. [선택]  NOT(위 조건이 아닌 경우 노출) 체크

   • 반대로 조건 적용 가능 
     예) A를 선택하지 않은 경우에만 표시하고 싶을 때

결과 확인

A 선택 시, 노출 조건 설정에 따라 파일첨부 영역 노출

B 또는 C 선택 시, 파일첨부 영역 노출되지 않음

사용자 입력에 따라 항목이 다르게 보이도록 설정할 수 있어, 더 직관적인 입력 화면을 만들 수 있습니다.

데이터 컴포넌트

사용자 입력을 필요로 하는 데이터 컴포넌트 입니다.

🧮 테이블 사용하기

테이블 영역은 여러 개의 데이터를 표(테이블) 형태로 반복 입력할 수 있도록 구성된 입력 공간입니다.
견적 항목, 일정 목록, 업무 리스트 등 여러 건의 정보를 구조화하여 입력할 때 유용합니다.

• 테이블 영역은 6가지 컴포넌트만 추가 가능, 이 외의 컴포넌트는 테이블 영역에 배치 불가
  

  사용 가능 컴포넌트	설명 예시
  텍스트	품명, 항목 이름 등
  숫자	금액, 수량 등
  드롭박스	상태 선택 예) 완료, 미완료
  날짜, 시간, 날짜와 시간	일정일, 마감일, 시작시간, 회의 일정 등

테이블 자동 계산 기능

숫자 컴포넌트를 테이블에 넣으면,  자동 계산 기능을 사용할 수 있습니다.

입력된 숫자들을 열 단위로 합계 또는 평균 계산하여 자동으로 보여주는 기능입니다.

• 테이블 컴포넌트 생성 후, 테이블 영역 내 숫자 컴포넌트 삽입

• 삽입한 숫자 컴포넌트 선택 후 속성 > [테이블 자동계산] 사용함 체크

• 계산 방식 선택 → 합계 계산(SUM) 또는 평균 계산(AVG)

• 입력화면 저장 후, 데이터 등록 시 데이터에 입력한 값이 테이블 컴포넌트 마지막 행에 자동 계산

예) 테이블 하단에 자동계산 속성 합계 또는 평균 설정에 따라 자동 표시

예) 단가 합계 15,000원 

디자인 컴포넌트

컴포넌트를 통해 라벨 텍스트를 표시하거나 구분선을 표시하는 등 디자인 컴포넌트를 이용하여 입력화면 폼의 가독성을 높일 수 있습니다.

🎨 디자인 컴포넌트 (라벨, 라인, 공백, 다단)

• 폼의 가독성과 구조를 높이기 위한 요소
  1. 라벨: 설명 문구나 항목 구분 텍스트
  2. 라인: 항목 간 시각적 구분
  3. 공백: 항목 사이 여백 조절
  4. 다단(칼럼): 한 줄에 2단~3단 속성 설정을 통해 항목을 배치하여 공간 절약

고급 컴포넌트

입력 화면에서 다른 앱과 연결하거나, 계산이 자동으로 이루어지는 특별한 기능을 제공하는 컴포넌트입니다.

컴포넌트명	속성	화면
🧮 자동 계산 다른 항목의 값을 기반으로 합계나 차이 등 자동 계산 예) 종료일 - 시작일 = 기간	숫자, 날짜, 시간 수식 타입 선택 계산에 사용할 수식 입력 소수점 표시 자리 수 설정
🔄데이터 연동 다른 앱의 데이터를 선택해서 현재 앱과 연결 예) 계약서 작성 시 고객사 정보 불러오기	상세 설명으로 이동 📑앱간 데이터 연동 및 항목 매핑
📥연동 항목 매핑 연결된 앱의 데이터 중 필요한 항목만 자동으로 입력되게 설정 예) 고객사 선택 시 담당자명 자동 입력	상세 설명으로 이동 📑앱간 데이터 연동 및 항목 매핑

자동계산 사용하기 🔢

다른 입력 항목의 값을 활용해, 계산 결과를 자동으로 입력해주는 기능입니다.

사용자는 계산식을 직접 입력할 필요 없이 결과만 확인하면 됩니다.

• 숫자A(단가) + 숫자B(추가비용) → 총비용

• 시작일 ~ 종료일 → 사용일수

• 시작시간 ~ 종료시간 → 소요시간
  이런 식으로 자동 계산 결과가 바로 입력됩니다.

설정방법

1. 수식 타입 선택 : 어떤 항목을 계산할지 선택 (숫자 / 날짜 / 시간)
   • 🔢 숫자 계산 
     숫자 컴포넌트 항목코드 price와 또 다른 숫자 컴포넌트의 항목코드qty가 있을 시,
     해당 자동 계산 컴포넌트 수식에 price * qty 입력 시 총액 자동 계산
     (numberA - 1000) * 2 처럼 공식도 자유롭게 입력
     
     
   • 📅 날짜 계산 (단위 : 일)
     날짜 컴포넌트 항목코드 dateB와 다른 컴포넌트 dateA 기준
     해당 자동 계산 컴포넌트 수식에 dateB-dateA 
     → 시작일 ~ 종료일 간 날짜 차이 자동 계산
     • 수식 타입에서 반드시 일(day) 선택해야 함
       
       
   • ⏱️ 시간 계산 (단위 : 시간) 
     시간 컴포넌트 항목 코드 timeB와 다른 컴포넌트 timeA 기준
     해당 자동 계산 컴포넌트 수식에 timeB-timeA
     → 회의 시작~종료 시간 차이 자동 계산
     
     • 수식 타입에서 시간(time)으로 설정
       
       
2. 수식 입력 계산 :  공식을 작성 (항목 코드들을 이용해 수식 작성)
3. 소수점 자리 설정 :  결과값 소수점 자릿수 지정 가능 (예: 2자리 → 3.43)
4. 결과 자동 입력 : 사용자가 데이터를 입력하면 계산된 결과가 자동으로 표시됨