2026-02-02 15:15:01 +09:00
|
|
|
# POP 컴포넌트 상세 설계서
|
|
|
|
|
|
|
|
|
|
> AI 에이전트 안내: Quick Reference 먼저 확인 후 필요한 섹션만 참조
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Quick Reference
|
|
|
|
|
|
2026-02-04 14:14:48 +09:00
|
|
|
### 총 컴포넌트 수: 14개
|
2026-02-02 15:15:01 +09:00
|
|
|
|
|
|
|
|
| 분류 | 개수 | 컴포넌트 |
|
|
|
|
|
|------|------|----------|
|
2026-02-04 14:14:48 +09:00
|
|
|
| 레이아웃 | 3 | container, tab-panel, **spacer** |
|
2026-02-02 15:15:01 +09:00
|
|
|
| 데이터 표시 | 4 | data-table, card-list, kpi-gauge, status-indicator |
|
|
|
|
|
| 입력 | 4 | number-pad, barcode-scanner, form-field, action-button |
|
|
|
|
|
| 특화 기능 | 3 | timer, alarm-list, process-flow |
|
|
|
|
|
|
|
|
|
|
### 개발 우선순위
|
|
|
|
|
|
|
|
|
|
1단계: number-pad, status-indicator, kpi-gauge, action-button
|
|
|
|
|
2단계: data-table, card-list, barcode-scanner, timer
|
|
|
|
|
3단계: container, tab-panel, form-field, alarm-list, process-flow
|
|
|
|
|
|
|
|
|
|
### POP UI 필수 원칙
|
|
|
|
|
|
|
|
|
|
- 버튼 최소 크기: 48px (1.5cm)
|
|
|
|
|
- 고대비 테마 지원
|
|
|
|
|
- 단순 탭 조작 (스와이프 최소화)
|
|
|
|
|
- 알람에만 원색 사용
|
|
|
|
|
- 숫자 우측 정렬
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 컴포넌트 목록
|
|
|
|
|
|
|
|
|
|
| # | 컴포넌트 | 역할 |
|
|
|
|
|
|---|----------|------|
|
|
|
|
|
| 1 | pop-container | 레이아웃 뼈대 |
|
|
|
|
|
| 2 | pop-tab-panel | 정보 분류 |
|
2026-02-04 14:14:48 +09:00
|
|
|
| 3 | **pop-spacer** | **빈 공간 (정렬용)** |
|
|
|
|
|
| 4 | pop-data-table | 대량 데이터 |
|
|
|
|
|
| 5 | pop-card-list | 시각적 목록 |
|
|
|
|
|
| 6 | pop-kpi-gauge | 목표 달성률 |
|
|
|
|
|
| 7 | pop-status-indicator | 상태 표시 |
|
|
|
|
|
| 8 | pop-number-pad | 수량 입력 |
|
|
|
|
|
| 9 | pop-barcode-scanner | 스캔 입력 |
|
|
|
|
|
| 10 | pop-form-field | 범용 입력 |
|
|
|
|
|
| 11 | pop-action-button | 작업 실행 |
|
|
|
|
|
| 12 | pop-timer | 시간 측정 |
|
|
|
|
|
| 13 | pop-alarm-list | 알람 관리 |
|
|
|
|
|
| 14 | pop-process-flow | 공정 현황 |
|
2026-02-02 15:15:01 +09:00
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 1. pop-container
|
|
|
|
|
|
|
|
|
|
역할: 모든 컴포넌트의 부모, 화면 뼈대
|
|
|
|
|
|
|
|
|
|
| 기능 | 설명 |
|
|
|
|
|
|------|------|
|
|
|
|
|
| 반응형 그리드 | 모바일/태블릿 자동 대응 |
|
|
|
|
|
| 플렉스 방향 | row, column, wrap |
|
|
|
|
|
| 간격 설정 | gap, padding |
|
|
|
|
|
| 배경/테두리 | 색상, 둥근모서리 |
|
|
|
|
|
| 스크롤 설정 | 가로/세로/없음 |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 2. pop-tab-panel
|
|
|
|
|
|
|
|
|
|
역할: 정보 분류, 화면 공간 효율화
|
|
|
|
|
|
|
|
|
|
| 기능 | 설명 |
|
|
|
|
|
|------|------|
|
|
|
|
|
| 탭 모드 | 상단/하단/좌측 탭 |
|
|
|
|
|
| 아코디언 모드 | 접기/펼치기 |
|
|
|
|
|
| 아이콘 지원 | 탭별 아이콘 |
|
|
|
|
|
| 뱃지 표시 | 알림 개수 표시 |
|
|
|
|
|
| 기본 활성 탭 | 초기 선택 설정 |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2026-02-04 14:14:48 +09:00
|
|
|
## 3. pop-spacer (v4 전용)
|
|
|
|
|
|
|
|
|
|
역할: 빈 공간을 차지하여 레이아웃 정렬에 사용 (Figma, Webflow 등 업계 표준)
|
|
|
|
|
|
|
|
|
|
| 기능 | 설명 |
|
|
|
|
|
|------|------|
|
|
|
|
|
| 공간 채우기 | 남은 공간을 자동으로 채움 (`width: fill`) |
|
|
|
|
|
| 고정 크기 | 특정 크기의 빈 공간 (`width: fixed`) |
|
|
|
|
|
| 정렬 용도 | 컴포넌트를 오른쪽/가운데 정렬 |
|
|
|
|
|
|
|
|
|
|
### 사용 예시
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
[버튼A] [Spacer(fill)] [버튼B] → 버튼B가 오른쪽 끝으로
|
|
|
|
|
[Spacer] [컴포넌트] [Spacer] → 컴포넌트가 가운데로
|
|
|
|
|
[Spacer(fill)] [컴포넌트] → 컴포넌트가 오른쪽으로
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 기본 설정
|
|
|
|
|
|
|
|
|
|
| 속성 | 기본값 |
|
|
|
|
|
|------|--------|
|
|
|
|
|
| width | fill (남은 공간 채움) |
|
|
|
|
|
| height | 48px (고정) |
|
|
|
|
|
| 디자인 모드 표시 | 점선 배경 + "빈 공간" 텍스트 |
|
|
|
|
|
| 실제 모드 | 완전히 투명 (공간만 차지) |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2026-02-02 15:15:01 +09:00
|
|
|
## 3. pop-data-table
|
|
|
|
|
|
|
|
|
|
역할: 대량 데이터 표시, 선택, 편집
|
|
|
|
|
|
|
|
|
|
| 기능 | 설명 |
|
|
|
|
|
|------|------|
|
|
|
|
|
| 가상 스크롤 | 대량 데이터 성능 |
|
|
|
|
|
| 행 선택 | 단일/다중 선택 |
|
|
|
|
|
| 인라인 편집 | 셀 직접 수정 |
|
|
|
|
|
| 정렬/필터 | 컬럼별 정렬, 검색 |
|
|
|
|
|
| 고정 컬럼 | 좌측 컬럼 고정 |
|
|
|
|
|
| 행 색상 조건 | 상태별 배경색 |
|
|
|
|
|
| 큰 글씨 모드 | POP 전용 가독성 |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 4. pop-card-list
|
|
|
|
|
|
|
|
|
|
역할: 시각적 강조가 필요한 목록
|
|
|
|
|
|
|
|
|
|
| 기능 | 설명 |
|
|
|
|
|
|------|------|
|
|
|
|
|
| 카드 레이아웃 | 1열/2열/3열 |
|
|
|
|
|
| 이미지 표시 | 부품/제품 사진 |
|
|
|
|
|
| 상태 뱃지 | 진행중/완료/대기 |
|
|
|
|
|
| 진행률 바 | 작업 진척도 |
|
|
|
|
|
| 스와이프 액션 | 완료/삭제 (선택적) |
|
|
|
|
|
| 클릭 이벤트 | 상세 모달 연결 |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 5. pop-kpi-gauge
|
|
|
|
|
|
|
|
|
|
역할: 목표 대비 실적 시각화
|
|
|
|
|
|
|
|
|
|
| 기능 | 설명 |
|
|
|
|
|
|------|------|
|
|
|
|
|
| 게이지 타입 | 원형/반원형/수평바 |
|
|
|
|
|
| 목표값 | 기준선 표시 |
|
|
|
|
|
| 현재값 | 실시간 바인딩 |
|
|
|
|
|
| 색상 구간 | 위험/경고/정상 |
|
|
|
|
|
| 단위 표시 | %, 개, 초 등 |
|
|
|
|
|
| 애니메이션 | 값 변경 시 전환 |
|
|
|
|
|
| 라벨 | 제목, 부제목 |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 6. pop-status-indicator
|
|
|
|
|
|
|
|
|
|
역할: 설비/공정 상태 즉시 파악
|
|
|
|
|
|
|
|
|
|
| 기능 | 설명 |
|
|
|
|
|
|------|------|
|
|
|
|
|
| 표시 타입 | 원형/사각/아이콘 |
|
|
|
|
|
| 상태 매핑 | 값 -> 색상/아이콘 자동 |
|
|
|
|
|
| 색상 설정 | 상태별 커스텀 |
|
|
|
|
|
| 크기 | S/M/L/XL |
|
|
|
|
|
| 깜빡임 | 알람 상태 강조 |
|
|
|
|
|
| 라벨 위치 | 상단/하단/우측 |
|
|
|
|
|
| 그룹 표시 | 여러 상태 한 줄 |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 7. pop-number-pad
|
|
|
|
|
|
|
|
|
|
역할: 장갑 착용 상태 수량 입력
|
|
|
|
|
|
|
|
|
|
| 기능 | 설명 |
|
|
|
|
|
|------|------|
|
|
|
|
|
| 큰 버튼 | 최소 48px (1.5cm) |
|
|
|
|
|
| 레이아웃 | 전화기식/계산기식 |
|
|
|
|
|
| 소수점 | 허용/불허 |
|
|
|
|
|
| 음수 | 허용/불허 |
|
|
|
|
|
| 최소/최대값 | 범위 제한 |
|
|
|
|
|
| 단위 표시 | 개, kg, m 등 |
|
|
|
|
|
| 빠른 증감 | +1, +10, +100 버튼 |
|
|
|
|
|
| 진동 피드백 | 터치 확인 |
|
|
|
|
|
| 클리어 | 전체 삭제, 한 자리 삭제 |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 8. pop-barcode-scanner
|
|
|
|
|
|
|
|
|
|
역할: 자재 투입, 로트 추적
|
|
|
|
|
|
|
|
|
|
| 기능 | 설명 |
|
|
|
|
|
|------|------|
|
|
|
|
|
| 카메라 스캔 | 모바일 카메라 연동 |
|
|
|
|
|
| 외부 스캐너 | USB/블루투스 연동 |
|
|
|
|
|
| 스캔 타입 | 바코드/QR/RFID |
|
|
|
|
|
| 연속 스캔 | 다중 입력 모드 |
|
|
|
|
|
| 이력 표시 | 최근 스캔 목록 |
|
|
|
|
|
| 유효성 검증 | 포맷 체크 |
|
|
|
|
|
| 자동 조회 | 스캔 후 API 연동 |
|
|
|
|
|
| 소리/진동 | 스캔 성공 피드백 |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 9. pop-form-field
|
|
|
|
|
|
|
|
|
|
역할: 텍스트, 선택, 날짜 등 범용 입력
|
|
|
|
|
|
|
|
|
|
| 기능 | 설명 |
|
|
|
|
|
|------|------|
|
|
|
|
|
| 입력 타입 | text/number/date/time/select |
|
|
|
|
|
| 라벨 | 상단/좌측/플로팅 |
|
|
|
|
|
| 필수 표시 | 별표, 색상 |
|
|
|
|
|
| 유효성 검증 | 실시간 체크 |
|
|
|
|
|
| 에러 메시지 | 하단 표시 |
|
|
|
|
|
| 비활성화 | 읽기 전용 모드 |
|
|
|
|
|
| 큰 사이즈 | POP 전용 높이 |
|
|
|
|
|
| 도움말 | 툴팁/하단 설명 |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 10. pop-action-button
|
|
|
|
|
|
|
|
|
|
역할: 작업 실행, 상태 변경
|
|
|
|
|
|
|
|
|
|
| 기능 | 설명 |
|
|
|
|
|
|------|------|
|
|
|
|
|
| 크기 | S/M/L/XL/전체너비 |
|
|
|
|
|
| 스타일 | primary/secondary/danger/success |
|
|
|
|
|
| 아이콘 | 좌측/우측/단독 |
|
|
|
|
|
| 로딩 상태 | 스피너 표시 |
|
|
|
|
|
| 비활성화 | 조건부 |
|
|
|
|
|
| 확인 다이얼로그 | 위험 작업 전 확인 |
|
|
|
|
|
| 길게 누르기 | 특수 동작 (선택적) |
|
|
|
|
|
| 뱃지 | 개수 표시 |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 11. pop-timer
|
|
|
|
|
|
|
|
|
|
역할: 사이클 타임, 비가동 시간 측정
|
|
|
|
|
|
|
|
|
|
| 기능 | 설명 |
|
|
|
|
|
|------|------|
|
|
|
|
|
| 모드 | 스톱워치/카운트다운 |
|
|
|
|
|
| 시작/정지/리셋 | 기본 제어 |
|
|
|
|
|
| 랩 타임 | 구간 기록 |
|
|
|
|
|
| 목표 시간 | 초과 시 알림 |
|
|
|
|
|
| 표시 형식 | HH:MM:SS / MM:SS |
|
|
|
|
|
| 크기 | 작은/중간/큰 |
|
|
|
|
|
| 배경 색상 | 상태별 변경 |
|
|
|
|
|
| 자동 시작 | 조건부 트리거 |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 12. pop-alarm-list
|
|
|
|
|
|
|
|
|
|
역할: 이상 상황 알림 및 확인
|
|
|
|
|
|
|
|
|
|
| 기능 | 설명 |
|
|
|
|
|
|------|------|
|
|
|
|
|
| 우선순위 | 긴급/경고/정보 |
|
|
|
|
|
| 색상 구분 | 레벨별 배경색 |
|
|
|
|
|
| 시간 표시 | 발생 시각 |
|
|
|
|
|
| 확인(Ack) | 알람 인지 처리 |
|
|
|
|
|
| 필터 | 미확인만/전체 |
|
|
|
|
|
| 정렬 | 시간순/우선순위순 |
|
|
|
|
|
| 상세 보기 | 클릭 시 모달 |
|
|
|
|
|
| 소리 알림 | 신규 알람 |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 13. pop-process-flow
|
|
|
|
|
|
|
|
|
|
역할: 전체 공정 현황 시각화
|
|
|
|
|
|
|
|
|
|
| 기능 | 설명 |
|
|
|
|
|
|------|------|
|
|
|
|
|
| 노드 타입 | 공정/검사/대기 |
|
|
|
|
|
| 연결선 | 화살표, 분기 |
|
|
|
|
|
| 현재 위치 | 강조 표시 |
|
|
|
|
|
| 상태 색상 | 완료/진행/대기 |
|
|
|
|
|
| 클릭 이벤트 | 공정 상세 이동 |
|
|
|
|
|
| 가로/세로 | 방향 설정 |
|
|
|
|
|
| 축소/확대 | 핀치 줌 |
|
|
|
|
|
| 진행률 | 전체 대비 현재 |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 커버 가능한 시나리오
|
|
|
|
|
|
|
|
|
|
이 13개 컴포넌트 조합으로 대응 가능한 화면:
|
|
|
|
|
|
|
|
|
|
- 작업 지시 화면
|
|
|
|
|
- 실적 입력 화면
|
|
|
|
|
- 품질 검사 화면
|
|
|
|
|
- 설비 모니터링 대시보드
|
|
|
|
|
- 자재 투입/출고 화면
|
|
|
|
|
- 알람 관리 화면
|
|
|
|
|
- 공정 현황판
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 기존 컴포넌트 재사용 가능 목록
|
|
|
|
|
|
|
|
|
|
| POP 컴포넌트 | 기존 컴포넌트 | 수정 필요 |
|
|
|
|
|
|-------------|--------------|----------|
|
|
|
|
|
| pop-data-table | v2-table-widget | 큰 글씨 모드 추가 |
|
|
|
|
|
| pop-form-field | v2-input-widget, v2-select-widget | 큰 사이즈 옵션 |
|
|
|
|
|
| pop-action-button | v2-button-widget | 크기/확인 다이얼로그 |
|
|
|
|
|
| pop-tab-panel | tab-widget | POP 스타일 적용 |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
*최종 업데이트: 2026-01-29*
|
