아이템 옵션 & 동적 템플릿

아이템 옵션은 재고 아이템에 부착하는 맞춤 속성입니다. 표준 속성을 확장하고, 업종별·기업별 특수 데이터를 수집하며, 사이즈/색상/재질 등 상품 변형과 옵션별 가격 반영까지 지원합니다. 동적 템플릿은 아이템 옵션을 화면에 표시·수집하는 설계도입니다. 드래그앤드롭으로 폼을 구성하고, 화면 크기에 따라 반응형 배치를 적용하며, 조건부 표시/검증/실시간 갱신을 설정할 수 있습니다.

주요 이점

유연성: 미리 정해진 필드에 갇히지 않고 업무에 맞춘 수집 화면을 구성
일관성: 조직 전반에서 동일 형식으로 데이터 수집
사용성: 필요한 필드만 보여 주어 복잡도 감소
데이터 품질: 형식 검증과 제약으로 정확도 향상
업무 규칙 반영: 조건 로직으로 비즈니스 규칙을 폼에 내장

대표 활용 사례

제조(규격/재질/공정정보), 리테일(사이즈/색상/스타일), 식음료(원재료/조리지시/영양정보), 헬스케어(장비 사양/정비), 건설(자재/치수/시공정보)

동작 방식

1. 템플릿 생성: 옵션 빌더에서 폼 레이아웃 설계

2. 아이템 연결: 관련 아이템에 템플릿 지정

3. 데이터 수집: 사용자가 아이템과 상호작용 시 맞춤 폼 표시

4. 처리: 수집 데이터가 아이템 속성의 일부로 저장

아이템 옵션 템플릿 에디터: 컴포넌트 필드 안내

기본 필드

유형(Type)

목적: 렌더링할 컴포넌트 종류 지정
사용: 드롭다운에서 선택
예시: 텍스트, 박스, 텍스트 입력, 숫자 입력, 날짜 입력, 스위치, 칩, 체크박스, 선택, 숫자 선택, 다중 선택, 자동완성, 리스트

라벨(Label)

목적: 컴포넌트의 제목/표시 텍스트
사용: 필드 목적이 잘 드러나게 간결히 작성

라벨 표시(Show Label)

목적: 라벨 노출 여부
사용: 필요 시만 표시(공간 절약·자명한 필드에 유용)

위치·크기

X 위치 / Y 위치 목적: 좌상단 기준 배치 좌표(픽셀)

너비 / 높이 목적: 컴포넌트 크기(픽셀)

Z-인덱스 목적: 겹침 순서(값이 클수록 위)

동작 설정

필수(Required)
목적: 제출 시 필수 입력

JSON 제외(Omit JSON)
목적: 제출 데이터(JSON)에서 값 제외(표시용/보조필드에 유용)

기본값(Default Value)
목적: 초기 표시 값 설정(유형에 맞는 형식)

탭 순서(Tab Index)
목적: 탭 이동 순서 제어(낮은 숫자 우선)

검증·제한

최소값 / 최대값
목적: 숫자 입력의 허용 범위

선택 옵션

선택지(Choices)
목적: 선택형 컴포넌트의 옵션 목록(줄바꿈으로 항목 입력)
대상: 선택, 숫자 선택, 다중 선택, 자동완성

조건부 로직

활성 조건(Active Condition)
목적: 표시/활성 제어
형식 예:

• fieldName=value

• fieldName!=value

• fieldName:contains:value

• fieldName:true / fieldName:false

  결합: 조건A || 조건B, 조건A && 조건B

값 조건(Value Condition)
목적: 다른 필드 값에 따라 이 필드 값을 자동 설정
형식 예:

• 결제방식=카드:30,결제방식=현금:0

스타일

스타일(Style)
목적: 개별 컴포넌트 CSS 스타일
형식: {"fontWeight":"bold","backgroundColor":"#fafafa"}

특정 컴포넌트 안내

텍스트: 제목/안내문 등 정적 표시
박스: 시각적 구획(그룹핑)
숫자 선택: 숫자 전용 드롭다운(자동 정렬·검증)
다중 선택: 여러 값 선택(저장은 쉼표 구분 문자열)
리스트: 여러 텍스트 항목 입력(간단한 단일열 스프레드시트 느낌)

효과적인 폼 설계 팁

• 논리적 그룹화: 관련 필드를 가까이 배치

• 균형 잡힌 간격: 일정한 여백으로 가독성 확보

• 명확한 라벨: 짧고 목적이 분명한 문구

• 검증 피드백: 필수·범위 제약으로 올바른 입력 유도

• 조건부 표시: 불필요한 필드는 숨겨 복잡도 감소

• 탭 순서: 키보드 이동 흐름 최적화